@tiptap/core 3.10.8 → 3.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -52,10 +52,10 @@
     "jsx-dev-runtime"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.10.8"
+    "@tiptap/pm": "^3.11.0"
   },
   "peerDependencies": {
-    "@tiptap/pm": "^3.10.8"
+    "@tiptap/pm": "^3.11.0"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -17,6 +17,7 @@ import {
   Keymap,
   Paste,
   Tabindex,
+  TextDirection,
 } from './extensions/index.js'
 import { createDocument } from './helpers/createDocument.js'
 import { getAttributes } from './helpers/getAttributes.js'
@@ -87,6 +88,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     extensions: [],
     autofocus: false,
     editable: true,
+    textDirection: undefined,
     editorProps: {},
     parseOptions: {},
     coreExtensionOptions: {},
@@ -430,6 +432,9 @@ export class Editor extends EventEmitter<EditorEvents> {
           Drop,
           Paste,
           Delete,
+          TextDirection.configure({
+            direction: this.options.textDirection,
+          }),
         ].filter(ext => {
           if (typeof this.options.enableCoreExtensions === 'object') {
             return (

package/src/commands/index.ts

@@ -39,6 +39,7 @@ export * from './setMark.js'
 export * from './setMeta.js'
 export * from './setNode.js'
 export * from './setNodeSelection.js'
+export * from './setTextDirection.js'
 export * from './setTextSelection.js'
 export * from './sinkListItem.js'
 export * from './splitBlock.js'
@@ -50,6 +51,7 @@ export * from './toggleWrap.js'
 export * from './undoInputRule.js'
 export * from './unsetAllMarks.js'
 export * from './unsetMark.js'
+export * from './unsetTextDirection.js'
 export * from './updateAttributes.js'
 export * from './wrapIn.js'
 export * from './wrapInList.js'

package/src/commands/setTextDirection.ts

@@ -0,0 +1,51 @@
+import type { Range, RawCommands } from '../types.js'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    setTextDirection: {
+      /**
+       * Set the text direction for nodes.
+       * If no position is provided, it will use the current selection.
+       * @param direction The text direction to set ('ltr', 'rtl', or 'auto')
+       * @param position Optional position or range to apply the direction to
+       * @example editor.commands.setTextDirection('rtl')
+       * @example editor.commands.setTextDirection('ltr', { from: 0, to: 10 })
+       */
+      setTextDirection: (direction: 'ltr' | 'rtl' | 'auto', position?: number | Range) => ReturnType
+    }
+  }
+}
+
+export const setTextDirection: RawCommands['setTextDirection'] =
+  (direction, position) =>
+  ({ tr, state, dispatch }) => {
+    const { selection } = state
+    let from: number
+    let to: number
+
+    if (typeof position === 'number') {
+      from = position
+      to = position
+    } else if (position && 'from' in position && 'to' in position) {
+      from = position.from
+      to = position.to
+    } else {
+      from = selection.from
+      to = selection.to
+    }
+
+    if (dispatch) {
+      tr.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.isText) {
+          return
+        }
+
+        tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          dir: direction,
+        })
+      })
+    }
+
+    return true
+  }

package/src/commands/unsetTextDirection.ts

@@ -0,0 +1,51 @@
+import type { Range, RawCommands } from '../types.js'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    unsetTextDirection: {
+      /**
+       * Remove the text direction attribute from nodes.
+       * If no position is provided, it will use the current selection.
+       * @param position Optional position or range to remove the direction from
+       * @example editor.commands.unsetTextDirection()
+       * @example editor.commands.unsetTextDirection({ from: 0, to: 10 })
+       */
+      unsetTextDirection: (position?: number | Range) => ReturnType
+    }
+  }
+}
+
+export const unsetTextDirection: RawCommands['unsetTextDirection'] =
+  position =>
+  ({ tr, state, dispatch }) => {
+    const { selection } = state
+    let from: number
+    let to: number
+
+    if (typeof position === 'number') {
+      from = position
+      to = position
+    } else if (position && 'from' in position && 'to' in position) {
+      from = position.from
+      to = position.to
+    } else {
+      from = selection.from
+      to = selection.to
+    }
+
+    if (dispatch) {
+      tr.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.isText) {
+          return
+        }
+
+        const newAttrs = { ...node.attrs }
+
+        delete newAttrs.dir
+
+        tr.setNodeMarkup(pos, undefined, newAttrs)
+      })
+    }
+
+    return true
+  }

package/src/extensions/index.ts

@@ -7,3 +7,4 @@ export { FocusEvents, focusEventsPluginKey } from './focusEvents.js'
 export { Keymap } from './keymap.js'
 export { Paste } from './paste.js'
 export { Tabindex } from './tabindex.js'
+export { TextDirection } from './textDirection.js'

package/src/extensions/textDirection.ts

@@ -0,0 +1,86 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+import { splitExtensions } from '../helpers/splitExtensions.js'
+
+export interface TextDirectionOptions {
+  direction: 'ltr' | 'rtl' | 'auto' | undefined
+}
+
+/**
+ * The TextDirection extension adds support for setting text direction (LTR/RTL/auto)
+ * on all nodes in the editor.
+ *
+ * This extension adds a global `dir` attribute to all node types, which can be used
+ * to control bidirectional text rendering. The direction can be set globally via
+ * editor options or per-node using commands.
+ */
+export const TextDirection = Extension.create<TextDirectionOptions>({
+  name: 'textDirection',
+
+  addOptions() {
+    return {
+      direction: undefined,
+    }
+  },
+
+  addGlobalAttributes() {
+    // Only add the dir attribute to nodes if text direction is configured
+    // This prevents null/undefined values from appearing in JSON exports
+    if (!this.options.direction) {
+      return []
+    }
+
+    const { nodeExtensions } = splitExtensions(this.extensions)
+
+    return [
+      {
+        types: nodeExtensions.filter(extension => extension.name !== 'text').map(extension => extension.name),
+        attributes: {
+          dir: {
+            default: this.options.direction,
+            parseHTML: element => {
+              const dir = element.getAttribute('dir')
+
+              if (dir && (dir === 'ltr' || dir === 'rtl' || dir === 'auto')) {
+                return dir
+              }
+
+              return this.options.direction
+            },
+            renderHTML: attributes => {
+              if (!attributes.dir) {
+                return {}
+              }
+
+              return {
+                dir: attributes.dir,
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('textDirection'),
+        props: {
+          attributes: (): { [name: string]: string } => {
+            const direction = this.options.direction
+
+            if (!direction) {
+              return {}
+            }
+
+            return {
+              dir: direction,
+            }
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/types.ts

@@ -292,6 +292,14 @@ export interface EditorOptions {
    * Whether the editor is editable
    */
   editable: boolean
+  /**
+   * The default text direction for all content in the editor.
+   * When set to 'ltr' or 'rtl', all nodes will have the corresponding dir attribute.
+   * When set to 'auto', the dir attribute will be set based on content detection.
+   * When undefined, no dir attribute will be added.
+   * @default undefined
+   */
+  textDirection?: 'ltr' | 'rtl' | 'auto'
   /**
    * The editor's props
    */
@@ -357,7 +365,8 @@ export interface EditorOptions {
           | 'tabindex'
           | 'drop'
           | 'paste'
-          | 'delete',
+          | 'delete'
+          | 'textDirection',
           false
         >
       >