@tiptap/core 3.10.7 → 3.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.10.7",
+  "version": "3.11.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -52,10 +52,10 @@
     "jsx-dev-runtime"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.10.7"
+    "@tiptap/pm": "^3.11.0"
   },
   "peerDependencies": {
-    "@tiptap/pm": "^3.10.7"
+    "@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/resetAttributes.ts

@@ -43,23 +43,31 @@ export const resetAttributes: RawCommands['resetAttributes'] =
       markType = getMarkType(typeOrName as MarkType, state.schema)
     }
 
-    if (dispatch) {
-      tr.selection.ranges.forEach(range => {
-        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
-          if (nodeType && nodeType === node.type) {
+    let canReset = false
+
+    tr.selection.ranges.forEach(range => {
+      state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+        if (nodeType && nodeType === node.type) {
+          canReset = true
+
+          if (dispatch) {
             tr.setNodeMarkup(pos, undefined, deleteProps(node.attrs, attributes))
           }
+        }
+
+        if (markType && node.marks.length) {
+          node.marks.forEach(mark => {
+            if (markType === mark.type) {
+              canReset = true
 
-          if (markType && node.marks.length) {
-            node.marks.forEach(mark => {
-              if (markType === mark.type) {
+              if (dispatch) {
                 tr.addMark(pos, pos + node.nodeSize, markType.create(deleteProps(mark.attrs, attributes)))
               }
-            })
-          }
-        })
+            }
+          })
+        }
       })
-    }
+    })
 
-    return true
+    return canReset
   }

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/commands/updateAttributes.ts

@@ -53,45 +53,55 @@ export const updateAttributes: RawCommands['updateAttributes'] =
       markType = getMarkType(typeOrName as MarkType, state.schema)
     }
 
-    if (dispatch) {
-      tr.selection.ranges.forEach((range: SelectionRange) => {
-        const from = range.$from.pos
-        const to = range.$to.pos
-
-        let lastPos: number | undefined
-        let lastNode: Node | undefined
-        let trimmedFrom: number
-        let trimmedTo: number
-
-        if (tr.selection.empty) {
-          state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
+    let canUpdate = false
+
+    tr.selection.ranges.forEach((range: SelectionRange) => {
+      const from = range.$from.pos
+      const to = range.$to.pos
+
+      let lastPos: number | undefined
+      let lastNode: Node | undefined
+      let trimmedFrom: number
+      let trimmedTo: number
+
+      if (tr.selection.empty) {
+        state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
+          if (nodeType && nodeType === node.type) {
+            canUpdate = true
+            trimmedFrom = Math.max(pos, from)
+            trimmedTo = Math.min(pos + node.nodeSize, to)
+            lastPos = pos
+            lastNode = node
+          }
+        })
+      } else {
+        state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
+          if (pos < from && nodeType && nodeType === node.type) {
+            canUpdate = true
+            trimmedFrom = Math.max(pos, from)
+            trimmedTo = Math.min(pos + node.nodeSize, to)
+            lastPos = pos
+            lastNode = node
+          }
+
+          if (pos >= from && pos <= to) {
             if (nodeType && nodeType === node.type) {
-              trimmedFrom = Math.max(pos, from)
-              trimmedTo = Math.min(pos + node.nodeSize, to)
-              lastPos = pos
-              lastNode = node
-            }
-          })
-        } else {
-          state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
-            if (pos < from && nodeType && nodeType === node.type) {
-              trimmedFrom = Math.max(pos, from)
-              trimmedTo = Math.min(pos + node.nodeSize, to)
-              lastPos = pos
-              lastNode = node
-            }
+              canUpdate = true
 
-            if (pos >= from && pos <= to) {
-              if (nodeType && nodeType === node.type) {
+              if (dispatch) {
                 tr.setNodeMarkup(pos, undefined, {
                   ...node.attrs,
                   ...attributes,
                 })
               }
+            }
+
+            if (markType && node.marks.length) {
+              node.marks.forEach((mark: Mark) => {
+                if (markType === mark.type) {
+                  canUpdate = true
 
-              if (markType && node.marks.length) {
-                node.marks.forEach((mark: Mark) => {
-                  if (markType === mark.type) {
+                  if (dispatch) {
                     const trimmedFrom2 = Math.max(pos, from)
                     const trimmedTo2 = Math.min(pos + node.nodeSize, to)
 
@@ -104,37 +114,37 @@ export const updateAttributes: RawCommands['updateAttributes'] =
                       }),
                     )
                   }
-                })
-              }
+                }
+              })
             }
+          }
+        })
+      }
+
+      if (lastNode) {
+        if (lastPos !== undefined && dispatch) {
+          tr.setNodeMarkup(lastPos, undefined, {
+            ...lastNode.attrs,
+            ...attributes,
           })
         }
 
-        if (lastNode) {
-          if (lastPos !== undefined) {
-            tr.setNodeMarkup(lastPos, undefined, {
-              ...lastNode.attrs,
-              ...attributes,
-            })
-          }
-
-          if (markType && lastNode.marks.length) {
-            lastNode.marks.forEach((mark: Mark) => {
-              if (markType === mark.type) {
-                tr.addMark(
-                  trimmedFrom,
-                  trimmedTo,
-                  markType.create({
-                    ...mark.attrs,
-                    ...attributes,
-                  }),
-                )
-              }
-            })
-          }
+        if (markType && lastNode.marks.length) {
+          lastNode.marks.forEach((mark: Mark) => {
+            if (markType === mark.type && dispatch) {
+              tr.addMark(
+                trimmedFrom,
+                trimmedTo,
+                markType.create({
+                  ...mark.attrs,
+                  ...attributes,
+                }),
+              )
+            }
+          })
         }
-      })
-    }
+      }
+    })
 
-    return true
+    return canUpdate
   }

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/helpers/getSchemaByResolvedExtensions.ts

@@ -34,8 +34,8 @@ function buildAttributeSpec(
 ): [string, Record<string, any>] {
   const spec: Record<string, any> = {}
 
-  // Only include 'default' if the attribute is not required and default is defined
-  if (!extensionAttribute?.attribute?.isRequired && extensionAttribute?.attribute?.default !== undefined) {
+  // Only include 'default' if the attribute is not required and default is set on the attribute
+  if (!extensionAttribute?.attribute?.isRequired && 'default' in (extensionAttribute?.attribute || {})) {
     spec.default = extensionAttribute.attribute.default
   }
 

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
         >
       >
@@ -442,17 +451,71 @@ export interface EditorOptions {
 export type HTMLContent = string
 
 /**
- * Loosely describes a JSON representation of a Prosemirror document or node
+ * A Tiptap JSON node or document. Tiptap JSON is the standard format for
+ * storing and manipulating Tiptap content. It is equivalent to the JSON
+ * representation of a Prosemirror node.
+ *
+ * Tiptap JSON documents are trees of nodes. The root node is usually of type
+ * `doc`. Nodes can have other nodes as children. Nodes can also have marks and
+ * attributes. Text nodes (nodes with type `text`) have a `text` property and no
+ * children.
+ *
+ * @example
+ * ```ts
+ * const content: JSONContent = {
+ *   type: 'doc',
+ *   content: [
+ *     {
+ *       type: 'paragraph',
+ *       content: [
+ *         {
+ *           type: 'text',
+ *           text: 'Hello ',
+ *         },
+ *         {
+ *           type: 'text',
+ *           text: 'world',
+ *           marks: [{ type: 'bold' }],
+ *         },
+ *       ],
+ *     },
+ *   ],
+ * }
+ * ```
  */
 export type JSONContent = {
+  /**
+   * The type of the node
+   */
   type?: string
+  /**
+   * The attributes of the node. Attributes can have any JSON-serializable value.
+   */
   attrs?: Record<string, any> | undefined
+  /**
+   * The children of the node. A node can have other nodes as children.
+   */
   content?: JSONContent[]
+  /**
+   * A list of marks of the node. Inline nodes can have marks.
+   */
   marks?: {
+    /**
+     * The type of the mark
+     */
     type: string
+    /**
+     * The attributes of the mark. Attributes can have any JSON-serializable value.
+     */
     attrs?: Record<string, any>
     [key: string]: any
   }[]
+  /**
+   * The text content of the node. This property is only present on text nodes
+   * (i.e. nodes with `type: 'text'`).
+   *
+   * Text nodes cannot have children, but they can have marks.
+   */
   text?: string
   [key: string]: any
 }

package/src/utilities/markdown/parseIndentedBlocks.ts

@@ -103,6 +103,7 @@ export function parseIndentedBlocks(
         break
       } else if (currentLine.trim() === '') {
         i += 1
+        totalRaw = `${totalRaw}${currentLine}\n`
         continue
       } else {
         return undefined
@@ -188,6 +189,6 @@ export function parseIndentedBlocks(
 
   return {
     items,
-    raw: totalRaw.trim(),
+    raw: totalRaw,
   }
 }