@tiptap/core 2.10.4 → 2.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.10.4",
+  "version": "2.11.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^2.10.4"
+    "@tiptap/pm": "^2.11.0"
   },
   "peerDependencies": {
     "@tiptap/pm": "^2.7.0"

package/src/NodeView.ts

@@ -151,11 +151,11 @@ export class NodeView<
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
     // this fix prevents that
-    if (!isDraggable && isSelectable && isDragEvent) {
+    if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
       event.preventDefault()
     }
 
-    if (isDraggable && isDragEvent && !isDragging) {
+    if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
       event.preventDefault()
       return false
     }

package/src/PasteRule.ts

@@ -162,6 +162,9 @@ function run(config: {
   return success
 }
 
+// When dragging across editors, must get another editor instance to delete selection content.
+let tiptapDragFromOtherEditor: Editor | null = null
+
 const createClipboardPasteEvent = (text: string) => {
   const event = new ClipboardEvent('paste', {
     clipboardData: new DataTransfer(),
@@ -242,13 +245,25 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
           dragSourceElement = view.dom.parentElement?.contains(event.target as Element)
             ? view.dom.parentElement
             : null
+
+          if (dragSourceElement) {
+            tiptapDragFromOtherEditor = editor
+          }
+        }
+
+        const handleDragend = () => {
+          if (tiptapDragFromOtherEditor) {
+            tiptapDragFromOtherEditor = null
+          }
         }
 
         window.addEventListener('dragstart', handleDragstart)
+        window.addEventListener('dragend', handleDragend)
 
         return {
           destroy() {
             window.removeEventListener('dragstart', handleDragstart)
+            window.removeEventListener('dragend', handleDragend)
           },
         }
       },
@@ -259,6 +274,20 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
             isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
             dropEvent = event as DragEvent
 
+            if (!isDroppedFromProseMirror) {
+              const dragFromOtherEditor = tiptapDragFromOtherEditor
+
+              if (dragFromOtherEditor) {
+                // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
+                setTimeout(() => {
+                  const selection = dragFromOtherEditor.state.selection
+
+                  if (selection) {
+                    dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to })
+                  }
+                }, 10)
+              }
+            }
             return false
           },
 

package/src/commands/focus.ts

@@ -1,7 +1,6 @@
 import { isTextSelection } from '../helpers/isTextSelection.js'
 import { resolveFocusPosition } from '../helpers/resolveFocusPosition.js'
 import { FocusPosition, RawCommands } from '../types.js'
-import { isiOS } from '../utilities/isiOS.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -43,11 +42,7 @@ export const focus: RawCommands['focus'] = (position = null, options = {}) => ({
   }
 
   const delayedFocus = () => {
-    // focus within `requestAnimationFrame` breaks focus on iOS
-    // so we have to call this
-    if (isiOS()) {
-      (view.dom as HTMLElement).focus()
-    }
+    (view.dom as HTMLElement).focus()
 
     // For React we have to focus asynchronously. Otherwise wild things happen.
     // see: https://github.com/ueberdosis/tiptap/issues/1520

package/src/commands/selectAll.ts

@@ -1,3 +1,5 @@
+import { AllSelection } from '@tiptap/pm/state'
+
 import { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
@@ -12,9 +14,12 @@ declare module '@tiptap/core' {
   }
 }
 
-export const selectAll: RawCommands['selectAll'] = () => ({ tr, commands }) => {
-  return commands.setTextSelection({
-    from: 0,
-    to: tr.doc.content.size,
-  })
+export const selectAll: RawCommands['selectAll'] = () => ({ tr, dispatch }) => {
+  if (dispatch) {
+    const selection = new AllSelection(tr.doc)
+
+    tr.setSelection(selection)
+  }
+
+  return true
 }

package/src/helpers/index.ts

@@ -46,5 +46,6 @@ export * from './isNodeSelection.js'
 export * from './isTextSelection.js'
 export * from './posToDOMRect.js'
 export * from './resolveFocusPosition.js'
+export * from './rewriteUnknownContent.js'
 export * from './selectionToInsertionEnd.js'
 export * from './splitExtensions.js'

package/src/helpers/rewriteUnknownContent.ts

@@ -0,0 +1,148 @@
+import type { Schema } from '@tiptap/pm/model'
+
+import type { JSONContent } from '../types.js'
+
+type RewriteUnknownContentOptions = {
+  /**
+   * If true, unknown nodes will be treated as paragraphs
+   * @default true
+   */
+  fallbackToParagraph?: boolean;
+};
+
+type RewrittenContent = {
+  /**
+   * The original JSON content that was rewritten
+   */
+  original: JSONContent;
+  /**
+   * The name of the node or mark that was unsupported
+   */
+  unsupported: string;
+}[];
+
+/**
+ * The actual implementation of the rewriteUnknownContent function
+ */
+function rewriteUnknownContentInner({
+  json,
+  validMarks,
+  validNodes,
+  options,
+  rewrittenContent = [],
+}: {
+  json: JSONContent;
+  validMarks: Set<string>;
+  validNodes: Set<string>;
+  options?: RewriteUnknownContentOptions;
+  rewrittenContent?: RewrittenContent;
+}): {
+  /**
+   * The cleaned JSON content
+   */
+  json: JSONContent | null;
+  /**
+   * The array of nodes and marks that were rewritten
+   */
+  rewrittenContent: RewrittenContent;
+} {
+  if (json.marks && Array.isArray(json.marks)) {
+    json.marks = json.marks.filter(mark => {
+      const name = typeof mark === 'string' ? mark : mark.type
+
+      if (validMarks.has(name)) {
+        return true
+      }
+
+      rewrittenContent.push({
+        original: JSON.parse(JSON.stringify(mark)),
+        unsupported: name,
+      })
+      // Just ignore any unknown marks
+      return false
+    })
+  }
+
+  if (json.content && Array.isArray(json.content)) {
+    json.content = json.content
+      .map(
+        value => rewriteUnknownContentInner({
+          json: value,
+          validMarks,
+          validNodes,
+          options,
+          rewrittenContent,
+        }).json,
+      )
+      .filter(a => a !== null && a !== undefined)
+  }
+
+  if (json.type && !validNodes.has(json.type)) {
+    rewrittenContent.push({
+      original: JSON.parse(JSON.stringify(json)),
+      unsupported: json.type,
+    })
+
+    if (json.content && Array.isArray(json.content) && (options?.fallbackToParagraph !== false)) {
+      // Just treat it like a paragraph and hope for the best
+      json.type = 'paragraph'
+
+      return {
+        json,
+        rewrittenContent,
+      }
+    }
+
+    // or just omit it entirely
+    return {
+      json: null,
+      rewrittenContent,
+    }
+  }
+
+  return { json, rewrittenContent }
+}
+
+/**
+ * Rewrite unknown nodes and marks within JSON content
+ * Allowing for user within the editor
+ */
+export function rewriteUnknownContent(
+  /**
+   * The JSON content to clean of unknown nodes and marks
+   */
+  json: JSONContent,
+  /**
+   * The schema to use for validation
+   */
+  schema: Schema,
+  /**
+   * Options for the cleaning process
+   */
+  options?: RewriteUnknownContentOptions,
+): {
+  /**
+   * The cleaned JSON content
+   */
+  json: JSONContent | null;
+  /**
+   * The array of nodes and marks that were rewritten
+   */
+  rewrittenContent: {
+    /**
+     * The original JSON content that was rewritten
+     */
+    original: JSONContent;
+    /**
+     * The name of the node or mark that was unsupported
+     */
+    unsupported: string;
+  }[];
+} {
+  return rewriteUnknownContentInner({
+    json,
+    validNodes: new Set(Object.keys(schema.nodes)),
+    validMarks: new Set(Object.keys(schema.marks)),
+    options,
+  })
+}