@tiptap/core 2.0.0-beta.180 → 2.0.0-beta.183

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.180",
+  "version": "2.0.0-beta.183",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -24,13 +24,13 @@
     "dist"
   ],
   "dependencies": {
-    "prosemirror-commands": "^1.3.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "^1.17.0",
-    "prosemirror-schema-list": "^1.2.0",
-    "prosemirror-state": "^1.4.0",
-    "prosemirror-transform": "^1.6.0",
-    "prosemirror-view": "^1.25.0"
+    "prosemirror-commands": "1.3.0",
+    "prosemirror-keymap": "1.2.0",
+    "prosemirror-model": "1.18.1",
+    "prosemirror-schema-list": "1.2.0",
+    "prosemirror-state": "1.4.1",
+    "prosemirror-transform": "1.6.0",
+    "prosemirror-view": "1.26.2"
   },
   "repository": {
     "type": "git",
@@ -38,5 +38,5 @@
     "directory": "packages/core"
   },
   "sideEffects": false,
-  "gitHead": "a1e612bf897a14065b4f9ba6d48925c97d136811"
+  "gitHead": "5bcfb322ceb30575430bd8797f2787d65de80f2c"
 }

package/src/CommandManager.ts

@@ -107,13 +107,13 @@ export class CommandManager {
 
   public createCan(startTr?: Transaction): CanCommands {
     const { rawCommands, state } = this
-    const dispatch = undefined
+    const dispatch = false
     const tr = startTr || state.tr
     const props = this.buildProps(tr, dispatch)
     const formattedCommands = Object.fromEntries(Object
       .entries(rawCommands)
       .map(([name, command]) => {
-        return [name, (...args: never[]) => command(...args)({ ...props, dispatch })]
+        return [name, (...args: never[]) => command(...args)({ ...props, dispatch: undefined })]
       })) as unknown as SingleCommands
 
     return {

package/src/Editor.ts

@@ -169,6 +169,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    */
   public setEditable(editable: boolean): void {
     this.setOptions({ editable })
+    this.emit('update', { editor: this, transaction: this.state.tr })
   }
 
   /**

package/src/ExtensionManager.ts

@@ -3,7 +3,7 @@ import { Node as ProsemirrorNode, Schema } from 'prosemirror-model'
 import { Plugin } from 'prosemirror-state'
 import { Decoration, EditorView } from 'prosemirror-view'
 
-import { NodeConfig } from '.'
+import { Mark, NodeConfig } from '.'
 import { Editor } from './Editor'
 import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions'
 import { getExtensionField } from './helpers/getExtensionField'
@@ -252,6 +252,13 @@ export class ExtensionManager {
           context,
         )
 
+        let defaultBindings: Record<string, () => boolean> = {}
+
+        // bind exit handling
+        if (extension.type === 'mark' && extension.config.exitable) {
+          defaultBindings.ArrowRight = () => Mark.handleExit({ editor, mark: (extension as Mark) })
+        }
+
         if (addKeyboardShortcuts) {
           const bindings = Object.fromEntries(
             Object
@@ -261,11 +268,13 @@ export class ExtensionManager {
               }),
           )
 
-          const keyMapPlugin = keymap(bindings)
-
-          plugins.push(keyMapPlugin)
+          defaultBindings = { ...defaultBindings, ...bindings }
         }
 
+        const keyMapPlugin = keymap(defaultBindings)
+
+        plugins.push(keyMapPlugin)
+
         const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
           extension,
           'addInputRules',

package/src/Mark.ts

@@ -304,6 +304,11 @@ declare module '@tiptap/core' {
       parent: ParentConfig<MarkConfig<Options, Storage>>['excludes'],
     }) => MarkSpec['excludes']),
 
+    /**
+     * Marks this Mark as exitable
+     */
+    exitable?: boolean | (() => boolean),
+
     /**
      * Group
      */
@@ -486,4 +491,38 @@ export class Mark<Options = any, Storage = any> {
 
     return extension
   }
+
+  static handleExit({
+    editor,
+    mark,
+  }: {
+    editor: Editor
+    mark: Mark
+  }) {
+    const { tr } = editor.state
+    const currentPos = editor.state.selection.$from
+    const isAtEnd = currentPos.pos === currentPos.end()
+
+    if (isAtEnd) {
+      const currentMarks = currentPos.marks()
+      const isInMark = !!currentMarks.find(m => m?.type.name === mark.name)
+
+      if (!isInMark) {
+        return false
+      }
+
+      const removeMark = currentMarks.find(m => m?.type.name === mark.name)
+
+      if (removeMark) {
+        tr.removeStoredMark(removeMark)
+      }
+      tr.insertText(' ', currentPos.pos)
+
+      editor.view.dispatch(tr)
+
+      return true
+    }
+
+    return false
+  }
 }

package/src/PasteRule.ts

@@ -190,7 +190,7 @@ export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }):
             return false
           },
 
-          paste: (view, event) => {
+          paste: (view, event: Event) => {
             const html = (event as ClipboardEvent).clipboardData?.getData('text/html')
 
             isPastedFromProseMirror = !!html?.includes('data-pm-slice')
@@ -229,7 +229,7 @@ export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }):
           editor,
           state: chainableState,
           from: Math.max(from - 1, 0),
-          to: to.b,
+          to: to.b - 1,
           rule,
         })
 

package/src/commands/focus.ts

@@ -60,7 +60,9 @@ export const focus: RawCommands['focus'] = (position = null, options = {}) => ({
     return true
   }
 
-  const selection = resolveFocusPosition(editor.state.doc, position) || editor.state.selection
+  // pass through tr.doc instead of editor.state.doc
+  // since transactions could change the editors state before this command has been run
+  const selection = resolveFocusPosition(tr.doc, position) || editor.state.selection
   const isSameSelection = editor.state.selection.eq(selection)
 
   if (dispatch) {

package/src/commands/setContent.ts

@@ -1,5 +1,4 @@
 import { ParseOptions } from 'prosemirror-model'
-import { TextSelection } from 'prosemirror-state'
 
 import { createDocument } from '../helpers/createDocument'
 import { Content, RawCommands } from '../types'
@@ -22,11 +21,9 @@ declare module '@tiptap/core' {
 export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({ tr, editor, dispatch }) => {
   const { doc } = tr
   const document = createDocument(content, editor.schema, parseOptions)
-  const selection = TextSelection.create(doc, 0, doc.content.size)
 
   if (dispatch) {
-    tr.setSelection(selection)
-      .replaceSelectionWith(document, false)
+    tr.replaceWith(0, doc.content.size, document)
       .setMeta('preventUpdate', !emitUpdate)
   }
 

package/src/commands/setNodeSelection.ts

@@ -1,4 +1,4 @@
-import { NodeSelection, Selection } from 'prosemirror-state'
+import { NodeSelection } from 'prosemirror-state'
 
 import { RawCommands } from '../types'
 import { minMax } from '../utilities/minMax'
@@ -17,10 +17,8 @@ declare module '@tiptap/core' {
 export const setNodeSelection: RawCommands['setNodeSelection'] = position => ({ tr, dispatch }) => {
   if (dispatch) {
     const { doc } = tr
-    const minPos = Selection.atStart(doc).from
-    const maxPos = Selection.atEnd(doc).to
-    const resolvedPos = minMax(position, minPos, maxPos)
-    const selection = NodeSelection.create(doc, resolvedPos)
+    const from = minMax(position, 0, doc.content.size)
+    const selection = NodeSelection.create(doc, from)
 
     tr.setSelection(selection)
   }

package/src/commands/splitBlock.ts

@@ -1,21 +1,10 @@
-import { ContentMatch } from 'prosemirror-model'
 import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state'
 import { canSplit } from 'prosemirror-transform'
 
+import { defaultBlockAt } from '../helpers/defaultBlockAt'
 import { getSplittedAttributes } from '../helpers/getSplittedAttributes'
 import { RawCommands } from '../types'
 
-function defaultBlockAt(match: ContentMatch) {
-  for (let i = 0; i < match.edgeCount; i += 1) {
-    const { type } = match.edge(i)
-
-    if (type.isTextblock && !type.hasRequiredAttrs()) {
-      return type
-    }
-  }
-  return null
-}
-
 function ensureMarks(state: EditorState, splittableMarks?: string[]) {
   const marks = state.storedMarks
     || (state.selection.$to.parentOffset && state.selection.$from.marks())

package/src/extensions/focusEvents.ts

@@ -13,7 +13,7 @@ export const FocusEvents = Extension.create({
         key: new PluginKey('focusEvents'),
         props: {
           handleDOMEvents: {
-            focus: (view, event) => {
+            focus: (view, event: Event) => {
               editor.isFocused = true
 
               const transaction = editor.state.tr
@@ -24,7 +24,7 @@ export const FocusEvents = Extension.create({
 
               return false
             },
-            blur: (view, event) => {
+            blur: (view, event: Event) => {
               editor.isFocused = false
 
               const transaction = editor.state.tr

package/src/helpers/getTextContentFromNodes.ts

@@ -9,7 +9,7 @@ export const getTextContentFromNodes = ($from: ResolvedPos, maxMatch = 500) => {
     (node, pos, parent, index) => {
       textBefore += node.type.spec.toText?.({
         node, pos, parent, index,
-      }) || node.textContent || '%leaf%'
+      }) || $from.nodeBefore?.text || '%leaf%'
     },
   )
 

package/src/helpers/isNodeSelection.ts

@@ -1,7 +1,5 @@
 import { NodeSelection } from 'prosemirror-state'
 
-import { isObject } from '../utilities/isObject'
-
 export function isNodeSelection(value: unknown): value is NodeSelection {
-  return isObject(value) && value instanceof NodeSelection
+  return value instanceof NodeSelection
 }

package/src/helpers/isTextSelection.ts

@@ -1,7 +1,5 @@
 import { TextSelection } from 'prosemirror-state'
 
-import { isObject } from '../utilities/isObject'
-
 export function isTextSelection(value: unknown): value is TextSelection {
-  return isObject(value) && value instanceof TextSelection
+  return value instanceof TextSelection
 }

package/src/pasteRules/index.ts

@@ -1,2 +1,3 @@
 export * from './markPasteRule'
+export * from './nodePasteRule'
 export * from './textPasteRule'

package/src/pasteRules/nodePasteRule.ts

@@ -0,0 +1,39 @@
+import { NodeType } from 'prosemirror-model'
+
+import { PasteRule } from '../PasteRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities'
+
+/**
+ * Build an paste rule that adds a node when the
+ * matched text is pasted into it.
+ */
+export function nodePasteRule(config: {
+  find: RegExp,
+  type: NodeType,
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null,
+}) {
+  return new PasteRule({
+    find: config.find,
+    handler({ match, chain, range }) {
+      const attributes = callOrReturn(config.getAttributes, undefined, match)
+
+      if (attributes === false || attributes === null) {
+        return null
+      }
+
+      if (match.input) {
+        chain()
+          .deleteRange(range)
+          .insertContent({
+            type: config.type.name,
+            attrs: attributes,
+          })
+      }
+    },
+  })
+}

package/dist/packages/core/src/utilities/isClass.d.ts

@@ -1 +0,0 @@
-export declare function isClass(value: any): boolean;

package/dist/packages/core/src/utilities/isObject.d.ts

@@ -1 +0,0 @@
-export declare function isObject(value: any): boolean;

package/src/utilities/isClass.ts

@@ -1,7 +0,0 @@
-export function isClass(value: any): boolean {
-  if (value.constructor?.toString().substring(0, 5) !== 'class') {
-    return false
-  }
-
-  return true
-}

package/src/utilities/isObject.ts

@@ -1,10 +0,0 @@
-import { isClass } from './isClass'
-
-export function isObject(value: any): boolean {
-  return (
-    value
-    && typeof value === 'object'
-    && !Array.isArray(value)
-    && !isClass(value)
-  )
-}