@tiptap/core 2.0.0-beta.2 → 2.0.0-beta.200

package/src/extensions/clipboardTextSerializer.ts

@@ -1,40 +1,11 @@
-import { Editor } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
-import { Extension } from '../Extension'
-
-const textBetween = (
-  editor: Editor,
-  from: number,
-  to: number,
-  blockSeparator?: string,
-  leafText?: string,
-): string => {
-  let text = ''
-  let separated = true
-
-  editor.state.doc.nodesBetween(from, to, (node, pos) => {
-    const textSerializer = editor.extensionManager.textSerializers[node.type.name]
 
-    if (textSerializer) {
-      text += textSerializer({ node })
-      separated = !blockSeparator
-    } else if (node.isText) {
-      text += node?.text?.slice(Math.max(from, pos) - pos, to - pos)
-      separated = !blockSeparator
-    } else if (node.isLeaf && leafText) {
-      text += leafText
-      separated = !blockSeparator
-    } else if (!separated && node.isBlock) {
-      text += blockSeparator
-      separated = true
-    }
-  }, 0)
-
-  return text
-}
+import { Extension } from '../Extension'
+import { getTextBetween } from '../helpers/getTextBetween'
+import { getTextSerializersFromSchema } from '../helpers/getTextSerializersFromSchema'
 
 export const ClipboardTextSerializer = Extension.create({
-  name: 'editable',
+  name: 'clipboardTextSerializer',
 
   addProseMirrorPlugins() {
     return [
@@ -43,9 +14,17 @@ export const ClipboardTextSerializer = Extension.create({
         props: {
           clipboardTextSerializer: () => {
             const { editor } = this
-            const { from, to } = editor.state.selection
+            const { state, schema } = editor
+            const { doc, selection } = state
+            const { ranges } = selection
+            const from = Math.min(...ranges.map(range => range.$from.pos))
+            const to = Math.max(...ranges.map(range => range.$to.pos))
+            const textSerializers = getTextSerializersFromSchema(schema)
+            const range = { from, to }
 
-            return textBetween(editor, from, to, '\n')
+            return getTextBetween(doc, range, {
+              textSerializers,
+            })
           },
         },
       }),

package/src/extensions/commands.ts

@@ -1,146 +1,14 @@
+import * as commands from '../commands'
 import { Extension } from '../Extension'
-import * as blur from '../commands/blur'
-import * as clearContent from '../commands/clearContent'
-import * as clearNodes from '../commands/clearNodes'
-import * as command from '../commands/command'
-import * as createParagraphNear from '../commands/createParagraphNear'
-import * as deleteRange from '../commands/deleteRange'
-import * as deleteSelection from '../commands/deleteSelection'
-import * as enter from '../commands/enter'
-import * as exitCode from '../commands/exitCode'
-import * as extendMarkRange from '../commands/extendMarkRange'
-import * as first from '../commands/first'
-import * as focus from '../commands/focus'
-import * as insertHTML from '../commands/insertHTML'
-import * as insertText from '../commands/insertText'
-import * as joinBackward from '../commands/joinBackward'
-import * as joinForward from '../commands/joinForward'
-import * as keyboardShortcut from '../commands/keyboardShortcut'
-import * as lift from '../commands/lift'
-import * as liftEmptyBlock from '../commands/liftEmptyBlock'
-import * as liftListItem from '../commands/liftListItem'
-import * as newlineInCode from '../commands/newlineInCode'
-import * as replace from '../commands/replace'
-import * as replaceRange from '../commands/replaceRange'
-import * as resetNodeAttributes from '../commands/resetNodeAttributes'
-import * as scrollIntoView from '../commands/scrollIntoView'
-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 setContent from '../commands/setContent'
-import * as setMark from '../commands/setMark'
-import * as setNode from '../commands/setNode'
-import * as sinkListItem from '../commands/sinkListItem'
-import * as splitBlock from '../commands/splitBlock'
-import * as splitListItem from '../commands/splitListItem'
-import * as toggleList from '../commands/toggleList'
-import * as toggleMark from '../commands/toggleMark'
-import * as toggleNode from '../commands/toggleNode'
-import * as toggleWrap from '../commands/toggleWrap'
-import * as undoInputRule from '../commands/undoInputRule'
-import * as unsetAllMarks from '../commands/unsetAllMarks'
-import * as unsetMark from '../commands/unsetMark'
-import * as updateNodeAttributes from '../commands/updateNodeAttributes'
-import * as wrapIn from '../commands/wrapIn'
-import * as wrapInList from '../commands/wrapInList'
 
-export { blur }
-export { clearContent }
-export { clearNodes }
-export { command }
-export { createParagraphNear }
-export { deleteRange }
-export { deleteSelection }
-export { enter }
-export { exitCode }
-export { extendMarkRange }
-export { first }
-export { focus }
-export { insertHTML }
-export { insertText }
-export { joinBackward }
-export { joinForward }
-export { keyboardShortcut }
-export { lift }
-export { liftEmptyBlock }
-export { liftListItem }
-export { newlineInCode }
-export { replace }
-export { replaceRange }
-export { resetNodeAttributes }
-export { scrollIntoView }
-export { selectAll }
-export { selectNodeBackward }
-export { selectNodeForward }
-export { selectParentNode }
-export { setContent }
-export { setMark }
-export { setNode }
-export { sinkListItem }
-export { splitBlock }
-export { splitListItem }
-export { toggleList }
-export { toggleMark }
-export { toggleNode }
-export { toggleWrap }
-export { undoInputRule }
-export { unsetAllMarks }
-export { unsetMark }
-export { updateNodeAttributes }
-export { wrapIn }
-export { wrapInList }
+export * from '../commands'
 
 export const Commands = Extension.create({
   name: 'commands',
 
   addCommands() {
     return {
-      ...blur,
-      ...clearContent,
-      ...clearNodes,
-      ...command,
-      ...createParagraphNear,
-      ...deleteRange,
-      ...deleteSelection,
-      ...enter,
-      ...exitCode,
-      ...extendMarkRange,
-      ...first,
-      ...focus,
-      ...insertHTML,
-      ...insertText,
-      ...joinBackward,
-      ...joinForward,
-      ...keyboardShortcut,
-      ...lift,
-      ...liftEmptyBlock,
-      ...liftListItem,
-      ...newlineInCode,
-      ...replace,
-      ...replaceRange,
-      ...resetNodeAttributes,
-      ...scrollIntoView,
-      ...selectAll,
-      ...selectNodeBackward,
-      ...selectNodeForward,
-      ...selectParentNode,
-      ...setContent,
-      ...setMark,
-      ...setNode,
-      ...sinkListItem,
-      ...splitBlock,
-      ...splitListItem,
-      ...toggleList,
-      ...toggleMark,
-      ...toggleNode,
-      ...toggleWrap,
-      ...undoInputRule,
-      ...unsetAllMarks,
-      ...unsetMark,
-      ...updateNodeAttributes,
-      ...wrapIn,
-      ...wrapInList,
+      ...commands,
     }
   },
 })

package/src/extensions/editable.ts

@@ -1,4 +1,5 @@
 import { Plugin, PluginKey } from 'prosemirror-state'
+
 import { Extension } from '../Extension'
 
 export const Editable = Extension.create({

package/src/extensions/focusEvents.ts

@@ -1,4 +1,5 @@
 import { Plugin, PluginKey } from 'prosemirror-state'
+
 import { Extension } from '../Extension'
 
 export const FocusEvents = Extension.create({
@@ -11,11 +12,8 @@ export const FocusEvents = Extension.create({
       new Plugin({
         key: new PluginKey('focusEvents'),
         props: {
-          attributes: {
-            tabindex: '0',
-          },
           handleDOMEvents: {
-            focus: (view, event) => {
+            focus: (view, event: Event) => {
               editor.isFocused = true
 
               const transaction = editor.state.tr
@@ -26,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/extensions/index.ts

@@ -3,3 +3,4 @@ export { Commands } from './commands'
 export { Editable } from './editable'
 export { FocusEvents } from './focusEvents'
 export { Keymap } from './keymap'
+export { Tabindex } from './tabindex'

package/src/extensions/keymap.ts

@@ -1,4 +1,10 @@
+import { Plugin, PluginKey, Selection } from 'prosemirror-state'
+
+import { CommandManager } from '../CommandManager'
 import { Extension } from '../Extension'
+import { createChainableState } from '../helpers/createChainableState'
+import { isiOS } from '../utilities/isiOS'
+import { isMacOS } from '../utilities/isMacOS'
 
 export const Keymap = Extension.create({
   name: 'keymap',
@@ -6,6 +12,24 @@ export const Keymap = Extension.create({
   addKeyboardShortcuts() {
     const handleBackspace = () => this.editor.commands.first(({ commands }) => [
       () => commands.undoInputRule(),
+      // maybe convert first text block node to default node
+      () => commands.command(({ tr }) => {
+        const { selection, doc } = tr
+        const { empty, $anchor } = selection
+        const { pos, parent } = $anchor
+        const isAtStart = Selection.atStart(doc).from === pos
+
+        if (
+          !empty
+          || !isAtStart
+          || !parent.type.isTextblock
+          || parent.textContent.length
+        ) {
+          return false
+        }
+
+        return commands.clearNodes()
+      }),
       () => commands.deleteSelection(),
       () => commands.joinBackward(),
       () => commands.selectNodeBackward(),
@@ -17,20 +41,93 @@ 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(),
-      Delete: () => handleDelete(),
-      'Mod-Delete': () => handleDelete(),
-      // we don’t need a custom `selectAll` for now
-      // 'Mod-a': () => this.editor.commands.selectAll(),
+      Backspace: handleBackspace,
+      'Mod-Backspace': handleBackspace,
+      'Shift-Backspace': handleBackspace,
+      Delete: handleDelete,
+      'Mod-Delete': handleDelete,
+      'Mod-a': () => this.editor.commands.selectAll(),
+    }
+
+    const pcKeymap = {
+      ...baseKeymap,
+    }
+
+    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() {
+    return [
+      // With this plugin we check if the whole document was selected and deleted.
+      // In this case we will additionally call `clearNodes()` to convert e.g. a heading
+      // to a paragraph if necessary.
+      // This is an alternative to ProseMirror's `AllSelection`, which doesn’t work well
+      // with many other commands.
+      new Plugin({
+        key: new PluginKey('clearDocument'),
+        appendTransaction: (transactions, oldState, newState) => {
+          const docChanges = transactions.some(transaction => transaction.docChanged)
+            && !oldState.doc.eq(newState.doc)
+
+          if (!docChanges) {
+            return
+          }
+
+          const { empty, from, to } = oldState.selection
+          const allFrom = Selection.atStart(oldState.doc).from
+          const allEnd = Selection.atEnd(oldState.doc).to
+          const allWasSelected = from === allFrom && to === allEnd
+          const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0
+
+          if (empty || !allWasSelected || !isEmpty) {
+            return
+          }
+
+          const tr = newState.tr
+          const state = createChainableState({
+            state: newState,
+            transaction: tr,
+          })
+          const { commands } = new CommandManager({
+            editor: this.editor,
+            state,
+          })
+
+          commands.clearNodes()
+
+          if (!tr.steps.length) {
+            return
+          }
+
+          return tr
+        },
+      }),
+    ]
   },
 })

package/src/extensions/tabindex.ts

@@ -0,0 +1,18 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+
+import { Extension } from '../Extension'
+
+export const Tabindex = Extension.create({
+  name: 'tabindex',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tabindex'),
+        props: {
+          attributes: this.editor.isEditable ? { tabindex: '0' } : {},
+        },
+      }),
+    ]
+  },
+})

package/src/helpers/combineTransactionSteps.ts

@@ -0,0 +1,18 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Transaction } from 'prosemirror-state'
+import { Transform } from 'prosemirror-transform'
+
+/**
+ * Returns a new `Transform` based on all steps of the passed transactions.
+ */
+export function combineTransactionSteps(oldDoc: ProseMirrorNode, transactions: Transaction[]): Transform {
+  const transform = new Transform(oldDoc)
+
+  transactions.forEach(transaction => {
+    transaction.steps.forEach(step => {
+      transform.step(step)
+    })
+  })
+
+  return transform
+}

package/src/helpers/createChainableState.ts

@@ -0,0 +1,38 @@
+import { EditorState, Transaction } from 'prosemirror-state'
+
+export function createChainableState(config: {
+  transaction: Transaction,
+  state: EditorState,
+}): EditorState {
+  const { state, transaction } = config
+  let { selection } = transaction
+  let { doc } = transaction
+  let { storedMarks } = transaction
+
+  return {
+    ...state,
+    apply: state.apply.bind(state),
+    applyTransaction: state.applyTransaction.bind(state),
+    filterTransaction: state.filterTransaction,
+    plugins: state.plugins,
+    schema: state.schema,
+    reconfigure: state.reconfigure.bind(state),
+    toJSON: state.toJSON.bind(state),
+    get storedMarks() {
+      return storedMarks
+    },
+    get selection() {
+      return selection
+    },
+    get doc() {
+      return doc
+    },
+    get tr() {
+      selection = transaction.selection
+      doc = transaction.doc
+      storedMarks = transaction.storedMarks
+
+      return transaction
+    },
+  }
+}

package/src/helpers/createDocument.ts

@@ -0,0 +1,12 @@
+import { Node as ProseMirrorNode, ParseOptions, Schema } from 'prosemirror-model'
+
+import { Content } from '../types'
+import { createNodeFromContent } from './createNodeFromContent'
+
+export function createDocument(
+  content: Content,
+  schema: Schema,
+  parseOptions: ParseOptions = {},
+): ProseMirrorNode {
+  return createNodeFromContent(content, schema, { slice: false, parseOptions }) as ProseMirrorNode
+}

package/src/helpers/createNodeFromContent.ts

@@ -0,0 +1,57 @@
+import {
+  DOMParser,
+  Fragment,
+  Node as ProseMirrorNode,
+  ParseOptions,
+  Schema,
+} from 'prosemirror-model'
+
+import { Content } from '../types'
+import { elementFromString } from '../utilities/elementFromString'
+
+export type CreateNodeFromContentOptions = {
+  slice?: boolean,
+  parseOptions?: ParseOptions,
+}
+
+export function createNodeFromContent(
+  content: Content,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): ProseMirrorNode | Fragment {
+  options = {
+    slice: true,
+    parseOptions: {},
+    ...options,
+  }
+
+  if (typeof content === 'object' && content !== null) {
+    try {
+      if (Array.isArray(content)) {
+        return Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)))
+      }
+
+      return schema.nodeFromJSON(content)
+    } catch (error) {
+      console.warn(
+        '[tiptap warn]: Invalid content.',
+        'Passed value:',
+        content,
+        'Error:',
+        error,
+      )
+
+      return createNodeFromContent('', schema, options)
+    }
+  }
+
+  if (typeof content === 'string') {
+    const parser = DOMParser.fromSchema(schema)
+
+    return options.slice
+      ? parser.parseSlice(elementFromString(content), options.parseOptions).content
+      : parser.parse(elementFromString(content), options.parseOptions)
+  }
+
+  return createNodeFromContent('', schema, options)
+}

package/src/helpers/defaultBlockAt.ts

@@ -0,0 +1,13 @@
+import { ContentMatch, NodeType } from 'prosemirror-model'
+
+export function defaultBlockAt(match: ContentMatch): NodeType | null {
+  for (let i = 0; i < match.edgeCount; i += 1) {
+    const { type } = match.edge(i)
+
+    if (type.isTextblock && !type.hasRequiredAttrs()) {
+      return type
+    }
+  }
+
+  return null
+}

package/src/helpers/findChildren.ts

@@ -0,0 +1,18 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+
+import { NodeWithPos, Predicate } from '../types'
+
+export function findChildren(node: ProseMirrorNode, predicate: Predicate): NodeWithPos[] {
+  const nodesWithPos: NodeWithPos[] = []
+
+  node.descendants((child, pos) => {
+    if (predicate(child)) {
+      nodesWithPos.push({
+        node: child,
+        pos,
+      })
+    }
+  })
+
+  return nodesWithPos
+}

package/src/helpers/findChildrenInRange.ts

@@ -0,0 +1,32 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+
+import { NodeWithPos, Predicate, Range } from '../types'
+
+/**
+ * Same as `findChildren` but searches only within a `range`.
+ */
+export function findChildrenInRange(node: ProseMirrorNode, range: Range, predicate: Predicate): NodeWithPos[] {
+  const nodesWithPos: NodeWithPos[] = []
+
+  // if (range.from === range.to) {
+  //   const nodeAt = node.nodeAt(range.from)
+
+  //   if (nodeAt) {
+  //     nodesWithPos.push({
+  //       node: nodeAt,
+  //       pos: range.from,
+  //     })
+  //   }
+  // }
+
+  node.nodesBetween(range.from, range.to, (child, pos) => {
+    if (predicate(child)) {
+      nodesWithPos.push({
+        node: child,
+        pos,
+      })
+    }
+  })
+
+  return nodesWithPos
+}

package/src/helpers/findParentNode.ts

@@ -1,7 +1,8 @@
 import { Selection } from 'prosemirror-state'
-import findParentNodeClosestToPos from './findParentNodeClosestToPos'
+
 import { Predicate } from '../types'
+import { findParentNodeClosestToPos } from './findParentNodeClosestToPos'
 
-export default function findParentNode(predicate: Predicate) {
+export function findParentNode(predicate: Predicate) {
   return (selection: Selection) => findParentNodeClosestToPos(selection.$from, predicate)
 }

package/src/helpers/findParentNodeClosestToPos.ts

@@ -1,7 +1,8 @@
-import { ResolvedPos, Node as ProseMirrorNode } from 'prosemirror-model'
+import { Node as ProseMirrorNode, ResolvedPos } from 'prosemirror-model'
+
 import { Predicate } from '../types'
 
-export default function findParentNodeClosestToPos($pos: ResolvedPos, predicate: Predicate): ({
+export function findParentNodeClosestToPos($pos: ResolvedPos, predicate: Predicate): ({
   pos: number,
   start: number,
   depth: number,

package/src/helpers/generateHTML.ts

@@ -1,11 +1,12 @@
 import { Node } from 'prosemirror-model'
-import getSchema from './getSchema'
-import getHTMLFromFragment from './getHTMLFromFragment'
-import { Extensions } from '../types'
 
-export default function generateHTML(doc: object, extensions: Extensions): string {
+import { Extensions, JSONContent } from '../types'
+import { getHTMLFromFragment } from './getHTMLFromFragment'
+import { getSchema } from './getSchema'
+
+export function generateHTML(doc: JSONContent, extensions: Extensions): string {
   const schema = getSchema(extensions)
   const contentNode = Node.fromJSON(schema, doc)
 
-  return getHTMLFromFragment(contentNode, schema)
+  return getHTMLFromFragment(contentNode.content, schema)
 }

package/src/helpers/generateJSON.ts

@@ -0,0 +1,14 @@
+import { DOMParser } from 'prosemirror-model'
+
+import { Extensions } from '../types'
+import { elementFromString } from '../utilities/elementFromString'
+import { getSchema } from './getSchema'
+
+export function generateJSON(html: string, extensions: Extensions): Record<string, any> {
+  const schema = getSchema(extensions)
+  const dom = elementFromString(html)
+
+  return DOMParser.fromSchema(schema)
+    .parse(dom)
+    .toJSON()
+}