@tiptap/core 2.0.0-beta.163 → 2.0.0-beta.167

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.163",
+  "version": "2.0.0-beta.167",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -30,14 +30,14 @@
     "@types/prosemirror-schema-list": "^1.0.3",
     "@types/prosemirror-state": "^1.2.8",
     "@types/prosemirror-transform": "^1.1.5",
-    "@types/prosemirror-view": "^1.19.2",
-    "prosemirror-commands": "^1.1.12",
+    "@types/prosemirror-view": "^1.23.1",
+    "prosemirror-commands": "^1.2.1",
     "prosemirror-keymap": "^1.1.5",
     "prosemirror-model": "^1.16.1",
     "prosemirror-schema-list": "^1.1.6",
     "prosemirror-state": "^1.3.4",
     "prosemirror-transform": "^1.3.3",
-    "prosemirror-view": "^1.23.5"
+    "prosemirror-view": "^1.23.6"
   },
   "repository": {
     "type": "git",
@@ -45,5 +45,5 @@
     "directory": "packages/core"
   },
   "sideEffects": false,
-  "gitHead": "d71c27fe99e34d1906b4f094554beb86fc7287e1"
+  "gitHead": "82759a898a77aa0bf6a459178021e86b6713ef39"
 }

package/src/PasteRule.ts

@@ -158,24 +158,53 @@ function run(config: {
  */
 export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }): Plugin[] {
   const { editor, rules } = props
-  let isProseMirrorHTML = false
+  let dragSourceElement: Element | null = null
+  let isPastedFromProseMirror = false
+  let isDroppedFromProseMirror = false
 
   const plugins = rules.map(rule => {
     return new Plugin({
+      // we register a global drag handler to track the current drag source element
+      view(view) {
+        const handleDragstart = (event: DragEvent) => {
+          dragSourceElement = view.dom.parentElement?.contains(event.target as Element)
+            ? view.dom.parentElement
+            : null
+        }
+
+        window.addEventListener('dragstart', handleDragstart)
+
+        return {
+          destroy() {
+            window.removeEventListener('dragstart', handleDragstart)
+          },
+        }
+      },
+
       props: {
-        handlePaste: (view, event) => {
-          const html = event.clipboardData?.getData('text/html')
+        handleDOMEvents: {
+          drop: view => {
+            isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
+
+            return false
+          },
 
-          isProseMirrorHTML = !!html?.includes('data-pm-slice')
+          paste: (view, event) => {
+            const html = event.clipboardData?.getData('text/html')
 
-          return false
+            isPastedFromProseMirror = !!html?.includes('data-pm-slice')
+
+            return false
+          },
         },
       },
+
       appendTransaction: (transactions, oldState, state) => {
         const transaction = transactions[0]
+        const isPaste = transaction.getMeta('uiEvent') === 'paste' && !isPastedFromProseMirror
+        const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
 
-        // stop if there is not a paste event
-        if (!transaction.getMeta('paste') || isProseMirrorHTML) {
+        if (!isPaste && !isDrop) {
           return
         }
 

package/src/commands/blur.ts

@@ -15,6 +15,10 @@ export const blur: RawCommands['blur'] = () => ({ editor, view }) => {
   requestAnimationFrame(() => {
     if (!editor.isDestroyed) {
       (view.dom as HTMLElement).blur()
+
+      // Browsers should remove the caret on blur but safari does not.
+      // See: https://github.com/ueberdosis/tiptap/issues/2405
+      window?.getSelection()?.removeAllRanges()
     }
   })
 

package/src/commands/insertContentAt.ts

@@ -53,6 +53,7 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       ? { from: position, to: position }
       : position
 
+    let isOnlyTextContent = true
     let isOnlyBlockContent = true
     const nodes = isFragment(content)
       ? content
@@ -62,6 +63,10 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       // check if added node is valid
       node.check()
 
+      isOnlyTextContent = isOnlyTextContent
+        ? node.isText && node.marks.length === 0
+        : false
+
       isOnlyBlockContent = isOnlyBlockContent
         ? node.isBlock
         : false
@@ -84,7 +89,13 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       }
     }
 
-    tr.replaceWith(from, to, content)
+    // if there is only plain text we have to use `insertText`
+    // because this will keep the current marks
+    if (isOnlyTextContent) {
+      tr.insertText(value as string, from, to)
+    } else {
+      tr.replaceWith(from, to, content)
+    }
 
     // set cursor at end of inserted content
     if (options.updateSelection) {

package/src/commands/keyboardShortcut.ts

@@ -1,6 +1,6 @@
 import { RawCommands } from '../types'
-
-const mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false
+import { isiOS } from '../utilities/isiOS'
+import { isMacOS } from '../utilities/isMacOS'
 
 function normalizeKeyName(name: string) {
   const parts = name.split(/-(?!$)/)
@@ -27,7 +27,7 @@ function normalizeKeyName(name: string) {
     } else if (/^s(hift)?$/i.test(mod)) {
       shift = true
     } else if (/^mod$/i.test(mod)) {
-      if (mac) {
+      if (isiOS() || isMacOS()) {
         meta = true
       } else {
         ctrl = true

package/src/commands/selectTextblockEnd.ts

@@ -0,0 +1,19 @@
+// @ts-ignore
+// TODO: add types to @types/prosemirror-commands
+import { selectTextblockEnd as originalSelectTextblockEnd } from 'prosemirror-commands'
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    selectTextblockEnd: {
+      /**
+       * Moves the cursor to the end of current text block.
+       */
+      selectTextblockEnd: () => ReturnType,
+    }
+  }
+}
+
+export const selectTextblockEnd: RawCommands['selectTextblockEnd'] = () => ({ state, dispatch }) => {
+  return originalSelectTextblockEnd(state, dispatch)
+}

package/src/commands/selectTextblockStart.ts

@@ -0,0 +1,19 @@
+// @ts-ignore
+// TODO: add types to @types/prosemirror-commands
+import { selectTextblockStart as originalSelectTextblockStart } from 'prosemirror-commands'
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    selectTextblockStart: {
+      /**
+       * Moves the cursor to the start of current text block.
+       */
+      selectTextblockStart: () => ReturnType,
+    }
+  }
+}
+
+export const selectTextblockStart: RawCommands['selectTextblockStart'] = () => ({ state, dispatch }) => {
+  return originalSelectTextblockStart(state, dispatch)
+}

package/src/extensions/commands.ts

@@ -28,6 +28,8 @@ import * as selectAll from '../commands/selectAll'
 import * as selectNodeBackward from '../commands/selectNodeBackward'
 import * as selectNodeForward from '../commands/selectNodeForward'
 import * as selectParentNode from '../commands/selectParentNode'
+import * as selectTextblockEnd from '../commands/selectTextblockEnd'
+import * as selectTextblockStart from '../commands/selectTextblockStart'
 import * as setContent from '../commands/setContent'
 import * as setMark from '../commands/setMark'
 import * as setMeta from '../commands/setMeta'
@@ -77,6 +79,8 @@ export { selectAll }
 export { selectNodeBackward }
 export { selectNodeForward }
 export { selectParentNode }
+export { selectTextblockEnd }
+export { selectTextblockStart }
 export { setContent }
 export { setMark }
 export { setMeta }
@@ -131,6 +135,8 @@ export const Commands = Extension.create({
       ...selectNodeBackward,
       ...selectNodeForward,
       ...selectParentNode,
+      ...selectTextblockEnd,
+      ...selectTextblockStart,
       ...setContent,
       ...setMark,
       ...setMeta,

package/src/extensions/keymap.ts

@@ -1,5 +1,7 @@
 import { Plugin, PluginKey, Selection } from 'prosemirror-state'
 import { createChainableState } from '../helpers/createChainableState'
+import { isiOS } from '../utilities/isiOS'
+import { isMacOS } from '../utilities/isMacOS'
 import { CommandManager } from '../CommandManager'
 import { Extension } from '../Extension'
 
@@ -38,13 +40,15 @@ export const Keymap = Extension.create({
       () => commands.selectNodeForward(),
     ])
 
-    return {
-      Enter: () => this.editor.commands.first(({ commands }) => [
-        () => commands.newlineInCode(),
-        () => commands.createParagraphNear(),
-        () => commands.liftEmptyBlock(),
-        () => commands.splitBlock(),
-      ]),
+    const handleEnter = () => this.editor.commands.first(({ commands }) => [
+      () => commands.newlineInCode(),
+      () => commands.createParagraphNear(),
+      () => commands.liftEmptyBlock(),
+      () => commands.splitBlock(),
+    ])
+
+    const baseKeymap = {
+      Enter: handleEnter,
       'Mod-Enter': () => this.editor.commands.exitCode(),
       Backspace: handleBackspace,
       'Mod-Backspace': handleBackspace,
@@ -53,6 +57,30 @@ export const Keymap = Extension.create({
       'Mod-Delete': handleDelete,
       'Mod-a': () => this.editor.commands.selectAll(),
     }
+
+    const pcKeymap = {
+      ...baseKeymap,
+      Home: () => this.editor.commands.selectTextblockStart(),
+      End: () => this.editor.commands.selectTextblockStart(),
+    }
+
+    const macKeymap = {
+      ...baseKeymap,
+      'Ctrl-h': handleBackspace,
+      'Alt-Backspace': handleBackspace,
+      'Ctrl-d': handleDelete,
+      'Ctrl-Alt-Backspace': handleDelete,
+      'Alt-Delete': handleDelete,
+      'Alt-d': handleDelete,
+      'Ctrl-a': () => this.editor.commands.selectTextblockStart(),
+      'Ctrl-e': () => this.editor.commands.selectTextblockEnd(),
+    }
+
+    if (isiOS() || isMacOS()) {
+      return macKeymap
+    }
+
+    return pcKeymap
   },
 
   addProseMirrorPlugins() {

package/src/utilities/isMacOS.ts

@@ -0,0 +1,5 @@
+export function isMacOS(): boolean {
+  return typeof navigator !== 'undefined'
+    ? /Mac/.test(navigator.platform)
+    : false
+}