feat: add code formatting and RTL/LTR direction — v1.2.0

- Code button: inline <code> wrapping for selections, <pre> block for
  cursor-only; clicking again toggles off
- Direction buttons (RTL/LTR): sets dir attribute + inline style
  (direction + text-align) directly on the block element; per-block,
  toggleable, always one active
- defaultDir prop: sets default text direction on the editor container
- Fix: typing after clearing editor now always starts inside a <p>
- Fix: direction feature rewrote block detection to handle missing
  selection and avoid unreliable <div> wrapper approach
- Docs: README updated with direction section, defaultDir prop table
  entry, fixed heading typos; CHANGELOG entry for v1.2.0

Author: markrahimi

CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-06-11
+
+### Added
+- **Code formatting** — new `code` feature flag and toolbar button with two modes:
+  - Text selected → wraps in inline `<code>`
+  - No selection / cursor in a block → converts to `<pre>` code block
+  - Clicking again inside `<code>` or `<pre>` removes the formatting (toggle)
+  - Both `<code>` and `<pre>` share the same visual style (monospace font, subtle background, accent border-left)
+- **RTL / LTR direction** — new `direction` feature flag adds two toolbar buttons:
+  - Sets `dir` attribute and matching inline `style` (`direction` + `text-align`) directly on the current block element
+  - Per-block direction — each paragraph or heading can have its own direction
+  - Toggle behavior — clicking the active direction button removes the direction
+  - One button is always highlighted: current block dir → `defaultDir` → `'ltr'`
+  - Direction is written as inline style so output renders correctly without the editor stylesheet
+- **`defaultDir` prop** — sets the default text direction (`'rtl'` | `'ltr'`) for the entire editor content area; useful for Persian / Arabic editors
+- New SVG icons: `IconDirectionRTL`, `IconDirectionLTR`, `IconCode`
+
+### Fixed
+- Typing after clearing the editor produced bare text nodes not wrapped in `<p>` — `handleFocus` now inserts a `<p><br></p>` and positions the cursor inside when the editor is empty; `handleInput` also catches any remaining bare text nodes and wraps them
+- Direction buttons previously used a `<div>` wrapper approach which broke block detection when no saved range was present; rewritten to set `dir` directly on the block element and handle missing selection gracefully
+
 ## [1.1.0] - 2026-06-08
 
 ### Added

README.md

@@ -8,7 +8,7 @@
 
 <p align="center">
   <strong>A modern, lightweight WYSIWYG rich text editor for React & Next.js</strong><br/>
-  Feature-flagged · Fully typed · Zero runtime dependencies · &lt;300KB
+  Feature-flagged · Fully typed · Zero runtime dependencies · &lt;400KB
 </p>
 
 <p align="center">
@@ -80,7 +80,7 @@ export default function MyPage() {
 
 ## API Reference
 
-###rops
+### Props
 
 | Prop           | Type                      | Default                     | Description                              |
 | -------------- | ------------------------- | --------------------------- | ---------------------------------------- |
@@ -96,11 +96,12 @@ export default function MyPage() {
 | `media`        | `MediaConfig`             | —                           | File upload / library config             |
 | `theme`        | `'classic' \| 'modern'`   | `'classic'`                 | Visual theme                             |
 | `colorScheme`  | `'light' \| 'dark'`       | `'light'`                   | Color scheme                             |
+| `defaultDir`   | `'rtl' \| 'ltr'`          | —                           | Default text direction for the editor    |
 | `height`       | `number`                  | `400`                       | Min height of editor content area (px)   |
 | `className`    | `string`                  | —                           | Extra CSS class on root element          |
 | `apiToken`     | `string`                  | —                           | Token for future paid pro features       |
 
-###mperative Handle (ref)
+### Imperative Handle (ref)
 
 ```tsx
 import { useRef } from "react";
@@ -180,7 +181,55 @@ Disable any toolbar button by setting its flag to `false`:
 />
 ```
 
-Full list of flags: `bold`, `italic`, `strikethrough`, `lists`, `blockquote`, `hr`, `align`, `link`, `fullscreen`, `kitchenSink`, `underline`, `justify`, `foreColor`, `pasteAsText`, `removeFormat`, `charMap`, `indent`, `undo`, `help`, `media`, `subscript`, `superscript`
+Full list of flags: `bold`, `italic`, `strikethrough`, `lists`, `blockquote`, `hr`, `align`, `link`, `code`, `direction`, `fullscreen`, `kitchenSink`, `underline`, `justify`, `foreColor`, `pasteAsText`, `removeFormat`, `charMap`, `indent`, `undo`, `help`, `media`, `subscript`, `superscript`
+
+---
+
+## Code Formatting
+
+The `code` feature adds a **Code** button to the toolbar. It has two modes depending on the selection:
+
+| Context | Result |
+|---|---|
+| Text selected | Wraps in inline `<code>` |
+| No selection / cursor in a block | Converts block to `<pre>` (code block) |
+| Click again inside `<code>` or `<pre>` | Removes the formatting |
+
+Both `<code>` and `<pre>` share the same visual style — monospace font, subtle background from `--me-textarea-bg`, and a matching border — so inline and block code look like a family.
+
+```tsx
+// Disable the code button
+<MandooEditor features={{ code: false }} />
+```
+
+---
+
+## RTL / LTR Direction
+
+The `direction` feature adds **RTL** and **LTR** toggle buttons to the toolbar. Direction is applied per block — each paragraph or heading can have its own direction independently.
+
+| Action | Result |
+|---|---|
+| Click RTL | Sets `dir="rtl" style="direction:rtl; text-align:right"` on the current block |
+| Click LTR | Sets `dir="ltr" style="direction:ltr; text-align:left"` on the current block |
+| Click the active button again | Removes direction from the block (toggle off) |
+
+One button is always highlighted: the active block's direction, or `defaultDir` if set, or LTR by default.
+
+```tsx
+// RTL-first editor (e.g. Persian / Arabic content)
+<MandooEditor defaultDir="rtl" />
+
+// Disable the direction buttons entirely
+<MandooEditor features={{ direction: false }} />
+```
+
+Direction is stored inline in the HTML output so it renders correctly anywhere, without requiring the editor's stylesheet:
+
+```html
+<p dir="rtl" style="direction: rtl; text-align: right;">متن فارسی</p>
+<p dir="ltr" style="direction: ltr; text-align: left;">English paragraph</p>
+```
 
 ---
 
@@ -226,7 +275,7 @@ Wire any storage backend — S3, MinIO, Cloudflare R2, or your own API:
 />
 ```
 
-###inIO / S3 Server Route (Next.js App Router)
+### MinIO / S3 Server Route (Next.js App Router)
 
 ```ts
 // app/api/upload/route.ts

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mandoo-editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A modern, lightweight WYSIWYG rich text editor for React & Next.js — feature-flagged, fully typed, zero runtime dependencies.",
   "author": "Mohammad Ali Rahimi <hi@markrahimi.com> (https://markrahimi.com)",
   "license": "MIT",

package.json

@@ -46,6 +46,7 @@ const MandooEditor = forwardRef<MandooEditorHandle, MandooEditorProps>(function
     name,
     theme = DEFAULT_THEME,
     colorScheme = DEFAULT_COLOR_SCHEME,
+    defaultDir,
     height = DEFAULT_HEIGHT,
     className,
   },
@@ -159,8 +160,17 @@ const MandooEditor = forwardRef<MandooEditorHandle, MandooEditorProps>(function
 
   // Wrap handleInput to pass onChange
   const handleInput = useCallback(() => {
+    // Fix bare text nodes — wrap in <p> if the first child is a text node
+    if (editorRef.current) {
+      const fc = editorRef.current.firstChild;
+      if (fc && fc.nodeType === Node.TEXT_NODE) {
+        const p = document.createElement('p');
+        editorRef.current.insertBefore(p, fc);
+        p.appendChild(fc);
+      }
+    }
     _handleInput(handleChange);
-  }, [_handleInput, handleChange]);
+  }, [_handleInput, handleChange, editorRef]);
 
   // Wrap handleKeyDown to pass exec
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
@@ -179,8 +189,17 @@ const MandooEditor = forwardRef<MandooEditorHandle, MandooEditorProps>(function
   }, [handleSelectionChange]);
 
   const handleFocus = useCallback(() => {
-    if (editorRef.current && editorRef.current.innerHTML === '') {
-      document.execCommand('formatBlock', false, 'p');
+    if (!editorRef.current) return;
+    // When editor is empty, insert a real <p> so typing starts inside a block
+    if (!editorRef.current.firstChild) {
+      const p = document.createElement('p');
+      p.innerHTML = '<br>';
+      editorRef.current.appendChild(p);
+      const range = document.createRange();
+      range.setStart(p, 0);
+      range.collapse(true);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
     }
   }, []);
 
@@ -353,6 +372,8 @@ const MandooEditor = forwardRef<MandooEditorHandle, MandooEditorProps>(function
             <Toolbar
               activeFormats={state.activeFormats}
               currentBlock={state.currentBlock}
+              currentDir={state.currentDir}
+              defaultDir={defaultDir}
               isFullscreen={state.isFullscreen}
               showKitchenSink={state.showKitchenSink}
               pasteAsText={state.pasteAsText}
@@ -379,6 +400,7 @@ const MandooEditor = forwardRef<MandooEditorHandle, MandooEditorProps>(function
               initialValue={htmlValue}
               placeholder={placeholder}
               height={height}
+              dir={defaultDir}
               onInput={handleInput}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}

src/MandooEditor.tsx

@@ -31,6 +31,8 @@ export const ALL_FEATURES_ON: Required<Features> = {
   media: true,
   subscript: true,
   superscript: true,
+  code: true,
+  direction: true,
 };
 
 /** Merge partial feature flags with all-enabled defaults */

src/constants.ts

@@ -7,6 +7,7 @@ interface VisualEditorProps {
   initialValue?: string;
   placeholder?: string;
   height?: number;
+  dir?: 'rtl' | 'ltr';
   onInput: () => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
   onPaste: (e: React.ClipboardEvent) => void;
@@ -18,6 +19,7 @@ export default function VisualEditor({
   initialValue = '',
   placeholder = 'Start writing…',
   height = 300,
+  dir,
   onInput,
   onKeyDown,
   onPaste,
@@ -40,6 +42,7 @@ export default function VisualEditor({
         contentEditable
         suppressContentEditableWarning
         data-placeholder={placeholder}
+        dir={dir}
         style={{ minHeight: height }}
         onInput={onInput}
         onKeyDown={onKeyDown}

src/editor/VisualEditor.tsx

@@ -6,6 +6,7 @@ import { EditorState, ExecCommands } from '../types';
 const INITIAL_STATE: EditorState = {
   activeFormats: new Set(),
   currentBlock: 'p',
+  currentDir: '',
   wordCount: 0,
   charCount: 0,
   pathElements: [],
@@ -38,12 +39,39 @@ export function useEditorState(editorRef: React.RefObject<HTMLDivElement | null>
       // execCommand state queries can throw in some contexts
     }
 
+    // Detect inline <code> around cursor
+    try {
+      const sel = window.getSelection();
+      if (sel && sel.anchorNode) {
+        let n: Node | null = sel.anchorNode;
+        if (n.nodeType === Node.TEXT_NODE) n = n.parentNode;
+        while (n && n !== document.body) {
+          if ((n as Element).tagName === 'CODE') { formats.add('code'); break; }
+          n = n.parentNode;
+        }
+      }
+    } catch { /* empty */ }
+
     let currentBlock = 'p';
     try {
       const val = document.queryCommandValue('formatBlock');
       currentBlock = val?.replace(/^<|>$/g, '') || 'p';
     } catch { /* empty */ }
 
+    let currentDir: 'rtl' | 'ltr' | '' = '';
+    try {
+      const sel = window.getSelection();
+      if (sel && sel.anchorNode) {
+        let n: Node | null = sel.anchorNode;
+        if (n.nodeType === Node.TEXT_NODE) n = n.parentNode;
+        while (n && n !== editorRef.current) {
+          const dir = (n as Element).getAttribute?.('dir');
+          if (dir === 'rtl' || dir === 'ltr') { currentDir = dir; break; }
+          n = n.parentNode;
+        }
+      }
+    } catch { /* empty */ }
+
     const text = editorRef.current?.innerText || '';
     const words = text.trim() ? text.trim().split(/\s+/).filter(Boolean) : [];
     const charCount = text.replace(/\s/g, '').length;
@@ -54,6 +82,7 @@ export function useEditorState(editorRef: React.RefObject<HTMLDivElement | null>
       ...prev,
       activeFormats: formats,
       currentBlock,
+      currentDir,
       wordCount: words.length,
       charCount,
       pathElements: path,