@tiptap/core 2.0.0-beta.217 → 2.0.0-beta.219

package/dist/packages/core/src/NodeView.d.ts

@@ -1,15 +1,15 @@
 import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view';
+import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view';
 import { Editor as CoreEditor } from './Editor';
 import { Node } from './Node';
-import { NodeViewRendererOptions, NodeViewRendererProps } from './types';
+import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types';
 export declare class NodeView<Component, NodeEditor extends CoreEditor = CoreEditor, Options extends NodeViewRendererOptions = NodeViewRendererOptions> implements ProseMirrorNodeView {
     component: Component;
     editor: NodeEditor;
     options: Options;
     extension: Node;
     node: ProseMirrorNode;
-    decorations: Decoration[];
+    decorations: DecorationWithType[];
     getPos: any;
     isDragging: boolean;
     constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);

package/dist/packages/core/src/commands/toggleList.d.ts

@@ -6,7 +6,7 @@ declare module '@tiptap/core' {
             /**
              * Toggle between different list types.
              */
-            toggleList: (listTypeOrName: string | NodeType, itemTypeOrName: string | NodeType) => ReturnType;
+            toggleList: (listTypeOrName: string | NodeType, itemTypeOrName: string | NodeType, keepMarks?: boolean) => ReturnType;
         };
     }
 }

package/dist/packages/core/src/helpers/index.d.ts

@@ -1,4 +1,7 @@
 export * from './combineTransactionSteps';
+export * from './createChainableState';
+export * from './createDocument';
+export * from './createNodeFromContent';
 export * from './defaultBlockAt';
 export * from './findChildren';
 export * from './findChildrenInRange';
@@ -8,6 +11,7 @@ export * from './generateHTML';
 export * from './generateJSON';
 export * from './generateText';
 export * from './getAttributes';
+export * from './getAttributesFromExtensions';
 export * from './getChangedRanges';
 export * from './getDebugJSON';
 export * from './getExtensionField';
@@ -18,12 +22,19 @@ export * from './getMarksBetween';
 export * from './getMarkType';
 export * from './getNodeAttributes';
 export * from './getNodeType';
+export * from './getRenderedAttributes';
 export * from './getSchema';
+export * from './getSchemaByResolvedExtensions';
+export * from './getSchemaTypeByName';
+export * from './getSchemaTypeNameByName';
+export * from './getSplittedAttributes';
 export * from './getText';
 export * from './getTextBetween';
 export * from './getTextContentFromNodes';
 export * from './getTextSerializersFromSchema';
+export * from './injectExtensionAttributesToParseRule';
 export * from './isActive';
+export * from './isExtensionRulesEnabled';
 export * from './isList';
 export * from './isMarkActive';
 export * from './isNodeActive';
@@ -31,3 +42,6 @@ export * from './isNodeEmpty';
 export * from './isNodeSelection';
 export * from './isTextSelection';
 export * from './posToDOMRect';
+export * from './resolveFocusPosition';
+export * from './selectionToInsertionEnd';
+export * from './splitExtensions';

package/dist/packages/core/src/inputRules/wrappingInputRule.d.ts

@@ -1,4 +1,5 @@
 import { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model';
+import { Editor } from '../Editor';
 import { InputRule, InputRuleFinder } from '../InputRule';
 import { ExtendedRegExpMatchArray } from '../types';
 /**
@@ -18,6 +19,9 @@ import { ExtendedRegExpMatchArray } from '../types';
 export declare function wrappingInputRule(config: {
     find: InputRuleFinder;
     type: NodeType;
+    keepMarks?: boolean;
+    keepAttributes?: boolean;
+    editor?: Editor;
     getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null;
     joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean;
 }): InputRule;

package/dist/packages/core/src/pasteRules/nodePasteRule.d.ts

@@ -1,12 +1,12 @@
 import { NodeType } from '@tiptap/pm/model';
-import { PasteRule } from '../PasteRule';
+import { PasteRule, PasteRuleFinder } from '../PasteRule';
 import { ExtendedRegExpMatchArray } from '../types';
 /**
  * Build an paste rule that adds a node when the
  * matched text is pasted into it.
  */
 export declare function nodePasteRule(config: {
-    find: RegExp;
+    find: PasteRuleFinder;
     type: NodeType;
     getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null;
 }): PasteRule;

package/dist/packages/core/src/types.d.ts

@@ -1,4 +1,4 @@
-import { Mark as ProseMirrorMark, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model';
+import { Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions } from '@tiptap/pm/model';
 import { EditorState, Transaction } from '@tiptap/pm/state';
 import { Decoration, EditorProps, EditorView, NodeView } from '@tiptap/pm/view';
 import { Commands, ExtensionConfig, MarkConfig, NodeConfig } from '.';
@@ -135,10 +135,13 @@ export declare type ValuesOf<T> = T[keyof T];
 export declare type KeysWithTypeOf<T, Type> = {
     [P in keyof T]: T[P] extends Type ? P : never;
 }[keyof T];
+export declare type DecorationWithType = Decoration & {
+    type: NodeType;
+};
 export declare type NodeViewProps = {
     editor: Editor;
     node: ProseMirrorNode;
-    decorations: Decoration[];
+    decorations: DecorationWithType[];
     selected: boolean;
     extension: Node;
     getPos: () => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.217",
+  "version": "2.0.0-beta.219",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -35,7 +35,7 @@
     "@tiptap/pm": "^2.0.0-beta.209"
   },
   "devDependencies": {
-    "@tiptap/pm": "^2.0.0-beta.217"
+    "@tiptap/pm": "^2.0.0-beta.219"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -426,8 +426,8 @@ export class Editor extends EventEmitter<EditorEvents> {
     return getText(this.state.doc, {
       blockSeparator,
       textSerializers: {
-        ...textSerializers,
         ...getTextSerializersFromSchema(this.schema),
+        ...textSerializers,
       },
     })
   }

package/src/NodeView.ts

@@ -1,10 +1,10 @@
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 
 import { Editor as CoreEditor } from './Editor'
 import { Node } from './Node'
-import { NodeViewRendererOptions, NodeViewRendererProps } from './types'
+import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types'
 import { isiOS } from './utilities/isiOS'
 
 export class NodeView<
@@ -22,7 +22,7 @@ export class NodeView<
 
   node: ProseMirrorNode
 
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
 
   getPos: any
 
@@ -38,7 +38,7 @@ export class NodeView<
     } as Options
     this.extension = props.extension
     this.node = props.node
-    this.decorations = props.decorations
+    this.decorations = props.decorations as DecorationWithType[]
     this.getPos = props.getPos
     this.mount()
   }
@@ -113,11 +113,12 @@ export class NodeView<
       return false
     }
 
+    const isDragEvent = event.type.startsWith('drag')
     const isDropEvent = event.type === 'drop'
     const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable
 
     // any input event within node views should be ignored by ProseMirror
-    if (isInput && !isDropEvent) {
+    if (isInput && !isDropEvent && !isDragEvent) {
       return true
     }
 
@@ -129,7 +130,6 @@ export class NodeView<
     const isPasteEvent = event.type === 'paste'
     const isCutEvent = event.type === 'cut'
     const isClickEvent = event.type === 'mousedown'
-    const isDragEvent = event.type.startsWith('drag')
 
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
@@ -159,6 +159,14 @@ export class NodeView<
           { once: true },
         )
 
+        document.addEventListener(
+          'drop',
+          () => {
+            this.isDragging = false
+          },
+          { once: true },
+        )
+
         document.addEventListener(
           'mouseup',
           () => {

package/src/commands/insertContentAt.ts

@@ -79,7 +79,15 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
     // 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)
+      // if value is string, we can use it directly
+      // otherwise if it is an array, we have to join it
+      if (Array.isArray(value)) {
+        tr.insertText(value.map(v => v.text || '').join(''), from, to)
+      } else if (typeof value === 'object' && !!value && !!value.text) {
+        tr.insertText(value.text, from, to)
+      } else {
+        tr.insertText(value as string, from, to)
+      }
     } else {
       tr.replaceWith(from, to, content)
     }

package/src/commands/splitListItem.ts

@@ -130,7 +130,19 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
   }
 
   if (dispatch) {
+    const { selection, storedMarks } = state
+    const { splittableMarks } = editor.extensionManager
+    const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
+
     tr.split($from.pos, 2, types).scrollIntoView()
+
+    if (!marks || !dispatch) {
+      return true
+    }
+
+    const filteredMarks = marks.filter(mark => splittableMarks.includes(mark.type.name))
+
+    tr.ensureMarks(filteredMarks)
   }
 
   return true

package/src/commands/toggleList.ts

@@ -63,24 +63,23 @@ declare module '@tiptap/core' {
       /**
        * Toggle between different list types.
        */
-      toggleList: (
-        listTypeOrName: string | NodeType,
-        itemTypeOrName: string | NodeType,
-      ) => ReturnType
+      toggleList: (listTypeOrName: string | NodeType, itemTypeOrName: string | NodeType, keepMarks?: boolean) => ReturnType;
     }
   }
 }
 
-export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOrName) => ({
+export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOrName, keepMarks) => ({
   editor, tr, state, dispatch, chain, commands, can,
 }) => {
-  const { extensions } = editor.extensionManager
+  const { extensions, splittableMarks } = editor.extensionManager
   const listType = getNodeType(listTypeOrName, state.schema)
   const itemType = getNodeType(itemTypeOrName, state.schema)
-  const { selection } = state
+  const { selection, storedMarks } = state
   const { $from, $to } = selection
   const range = $from.blockRange($to)
 
+  const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
+
   if (!range) {
     return false
   }
@@ -110,6 +109,24 @@ export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOr
         .run()
     }
   }
+  if (!keepMarks || !marks || !dispatch) {
+
+    return chain()
+      // try to convert node to default node if needed
+      .command(() => {
+        const canWrapInList = can().wrapInList(listType)
+
+        if (canWrapInList) {
+          return true
+        }
+
+        return commands.clearNodes()
+      })
+      .wrapInList(listType)
+      .command(() => joinListBackwards(tr, listType))
+      .command(() => joinListForwards(tr, listType))
+      .run()
+  }
 
   return (
     chain()
@@ -117,6 +134,10 @@ export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOr
       .command(() => {
         const canWrapInList = can().wrapInList(listType)
 
+        const filteredMarks = marks.filter(mark => splittableMarks.includes(mark.type.name))
+
+        tr.ensureMarks(filteredMarks)
+
         if (canWrapInList) {
           return true
         }

package/src/helpers/createNodeFromContent.ts

@@ -27,7 +27,7 @@ export function createNodeFromContent(
 
   if (typeof content === 'object' && content !== null) {
     try {
-      if (Array.isArray(content)) {
+      if (Array.isArray(content) && content.length > 0) {
         return Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)))
       }
 

package/src/helpers/index.ts

@@ -1,4 +1,7 @@
 export * from './combineTransactionSteps'
+export * from './createChainableState'
+export * from './createDocument'
+export * from './createNodeFromContent'
 export * from './defaultBlockAt'
 export * from './findChildren'
 export * from './findChildrenInRange'
@@ -8,6 +11,7 @@ export * from './generateHTML'
 export * from './generateJSON'
 export * from './generateText'
 export * from './getAttributes'
+export * from './getAttributesFromExtensions'
 export * from './getChangedRanges'
 export * from './getDebugJSON'
 export * from './getExtensionField'
@@ -18,12 +22,19 @@ export * from './getMarksBetween'
 export * from './getMarkType'
 export * from './getNodeAttributes'
 export * from './getNodeType'
+export * from './getRenderedAttributes'
 export * from './getSchema'
+export * from './getSchemaByResolvedExtensions'
+export * from './getSchemaTypeByName'
+export * from './getSchemaTypeNameByName'
+export * from './getSplittedAttributes'
 export * from './getText'
 export * from './getTextBetween'
 export * from './getTextContentFromNodes'
 export * from './getTextSerializersFromSchema'
+export * from './injectExtensionAttributesToParseRule'
 export * from './isActive'
+export * from './isExtensionRulesEnabled'
 export * from './isList'
 export * from './isMarkActive'
 export * from './isNodeActive'
@@ -31,3 +42,6 @@ export * from './isNodeEmpty'
 export * from './isNodeSelection'
 export * from './isTextSelection'
 export * from './posToDOMRect'
+export * from './resolveFocusPosition'
+export * from './selectionToInsertionEnd'
+export * from './splitExtensions'

package/src/inputRules/wrappingInputRule.ts

@@ -1,6 +1,7 @@
 import { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model'
 import { canJoin, findWrapping } from '@tiptap/pm/transform'
 
+import { Editor } from '../Editor'
 import { InputRule, InputRuleFinder } from '../InputRule'
 import { ExtendedRegExpMatchArray } from '../types'
 import { callOrReturn } from '../utilities/callOrReturn'
@@ -20,18 +21,24 @@ import { callOrReturn } from '../utilities/callOrReturn'
  * return a boolean to indicate whether a join should happen.
  */
 export function wrappingInputRule(config: {
-  find: InputRuleFinder
-  type: NodeType
+  find: InputRuleFinder,
+  type: NodeType,
+  keepMarks?: boolean,
+  keepAttributes?: boolean,
+  editor?: Editor
   getAttributes?:
-    | Record<string, any>
-    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-    | false
-    | null
-  joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean
+  | Record<string, any>
+  | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+  | false
+  | null
+  ,
+  joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean,
 }) {
   return new InputRule({
     find: config.find,
-    handler: ({ state, range, match }) => {
+    handler: ({
+      state, range, match, chain,
+    }) => {
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
       const tr = state.tr.delete(range.from, range.to)
       const $start = tr.doc.resolve(range.from)
@@ -44,6 +51,24 @@ export function wrappingInputRule(config: {
 
       tr.wrap(blockRange, wrapping)
 
+      if (config.keepMarks && config.editor) {
+        const { selection, storedMarks } = state
+        const { splittableMarks } = config.editor.extensionManager
+        const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
+
+        if (marks) {
+          const filteredMarks = marks.filter(mark => splittableMarks.includes(mark.type.name))
+
+          tr.ensureMarks(filteredMarks)
+        }
+      }
+      if (config.keepAttributes) {
+        /** If the nodeType is `bulletList` or `orderedList` set the `nodeType` as `listItem` */
+        const nodeType = config.type.name === 'bulletList' || config.type.name === 'orderedList' ? 'listItem' : 'taskList'
+
+        chain().updateAttributes(nodeType, attributes).run()
+      }
+
       const before = tr.doc.resolve(range.from - 1).nodeBefore
 
       if (

package/src/pasteRules/nodePasteRule.ts

@@ -1,6 +1,6 @@
 import { NodeType } from '@tiptap/pm/model'
 
-import { PasteRule } from '../PasteRule'
+import { PasteRule, PasteRuleFinder } from '../PasteRule'
 import { ExtendedRegExpMatchArray } from '../types'
 import { callOrReturn } from '../utilities'
 
@@ -9,7 +9,7 @@ import { callOrReturn } from '../utilities'
  * matched text is pasted into it.
  */
 export function nodePasteRule(config: {
-  find: RegExp
+  find: PasteRuleFinder
   type: NodeType
   getAttributes?:
     | Record<string, any>

package/src/types.ts

@@ -1,4 +1,6 @@
-import { Mark as ProseMirrorMark, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
+import {
+  Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions,
+} from '@tiptap/pm/model'
 import { EditorState, Transaction } from '@tiptap/pm/state'
 import {
   Decoration, EditorProps, EditorView, NodeView,
@@ -148,10 +150,14 @@ export type ValuesOf<T> = T[keyof T]
 
 export type KeysWithTypeOf<T, Type> = { [P in keyof T]: T[P] extends Type ? P : never }[keyof T]
 
+export type DecorationWithType = Decoration & {
+  type: NodeType
+}
+
 export type NodeViewProps = {
   editor: Editor
   node: ProseMirrorNode
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
   selected: boolean
   extension: Node
   getPos: () => number