@tiptap/core 2.0.0-beta.99 → 2.0.0-rc.1

package/src/extensions/keymap.ts

@@ -1,4 +1,10 @@
+import { Plugin, PluginKey, Selection } from '@tiptap/pm/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,19 @@ 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(),
@@ -13,24 +32,103 @@ export const Keymap = Extension.create({
 
     const handleDelete = () => this.editor.commands.first(({ commands }) => [
       () => commands.deleteSelection(),
+      () => commands.deleteCurrentNode(),
       () => commands.joinForward(),
       () => 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
+
+          if (empty || !allWasSelected) {
+            return
+          }
+
+          const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0
+
+          if (!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 '@tiptap/pm/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,21 @@
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Transaction } from '@tiptap/pm/state'
+import { Transform } from '@tiptap/pm/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 '@tiptap/pm/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

@@ -1,8 +1,9 @@
-import { Schema, Node as ProseMirrorNode, ParseOptions } from 'prosemirror-model'
+import { Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
+
 import { Content } from '../types'
-import createNodeFromContent from './createNodeFromContent'
+import { createNodeFromContent } from './createNodeFromContent'
 
-export default function createDocument(
+export function createDocument(
   content: Content,
   schema: Schema,
   parseOptions: ParseOptions = {},

package/src/helpers/createNodeFromContent.ts

@@ -1,19 +1,20 @@
 import {
-  Schema,
   DOMParser,
-  Node as ProseMirrorNode,
   Fragment,
+  Node as ProseMirrorNode,
   ParseOptions,
-} from 'prosemirror-model'
-import elementFromString from '../utilities/elementFromString'
+  Schema,
+} from '@tiptap/pm/model'
+
 import { Content } from '../types'
+import { elementFromString } from '../utilities/elementFromString'
 
 export type CreateNodeFromContentOptions = {
-  slice?: boolean,
-  parseOptions?: ParseOptions,
+  slice?: boolean
+  parseOptions?: ParseOptions
 }
 
-export default function createNodeFromContent(
+export function createNodeFromContent(
   content: Content,
   schema: Schema,
   options?: CreateNodeFromContentOptions,
@@ -26,19 +27,13 @@ export default 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)))
       }
 
       return schema.nodeFromJSON(content)
     } catch (error) {
-      console.warn(
-        '[tiptap warn]: Invalid content.',
-        'Passed value:',
-        content,
-        'Error:',
-        error,
-      )
+      console.warn('[tiptap warn]: Invalid content.', 'Passed value:', content, 'Error:', error)
 
       return createNodeFromContent('', schema, options)
     }

package/src/helpers/defaultBlockAt.ts

@@ -0,0 +1,13 @@
+import { ContentMatch, NodeType } from '@tiptap/pm/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

@@ -1,7 +1,8 @@
-import { Node as ProseMirrorNode } from 'prosemirror-model'
-import { Predicate, NodeWithPos } from '../types'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
-export default function findChildren(node: ProseMirrorNode, predicate: Predicate): NodeWithPos[] {
+import { NodeWithPos, Predicate } from '../types'
+
+export function findChildren(node: ProseMirrorNode, predicate: Predicate): NodeWithPos[] {
   const nodesWithPos: NodeWithPos[] = []
 
   node.descendants((child, pos) => {

package/src/helpers/findChildrenInRange.ts

@@ -1,10 +1,15 @@
-import { Node as ProseMirrorNode } from 'prosemirror-model'
-import { Predicate, Range, NodeWithPos } from '../types'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+import { NodeWithPos, Predicate, Range } from '../types'
 
 /**
  * Same as `findChildren` but searches only within a `range`.
  */
-export default function findChildrenInRange(node: ProseMirrorNode, range: Range, predicate: Predicate): NodeWithPos[] {
+export function findChildrenInRange(
+  node: ProseMirrorNode,
+  range: Range,
+  predicate: Predicate,
+): NodeWithPos[] {
   const nodesWithPos: NodeWithPos[] = []
 
   // if (range.from === range.to) {

package/src/helpers/findParentNode.ts

@@ -1,7 +1,8 @@
-import { Selection } from 'prosemirror-state'
-import findParentNodeClosestToPos from './findParentNodeClosestToPos'
+import { Selection } from '@tiptap/pm/state'
+
 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,12 +1,18 @@
-import { ResolvedPos, Node as ProseMirrorNode } from 'prosemirror-model'
+import { Node as ProseMirrorNode, ResolvedPos } from '@tiptap/pm/model'
+
 import { Predicate } from '../types'
 
-export default function findParentNodeClosestToPos($pos: ResolvedPos, predicate: Predicate): ({
-  pos: number,
-  start: number,
-  depth: number,
-  node: ProseMirrorNode,
-} | undefined) {
+export function findParentNodeClosestToPos(
+  $pos: ResolvedPos,
+  predicate: Predicate,
+):
+  | {
+      pos: number
+      start: number
+      depth: number
+      node: ProseMirrorNode
+    }
+  | undefined {
   for (let i = $pos.depth; i > 0; i -= 1) {
     const node = $pos.node(i)
 

package/src/helpers/generateHTML.ts

@@ -1,11 +1,12 @@
-import { Node } from 'prosemirror-model'
-import getSchema from './getSchema'
-import getHTMLFromFragment from './getHTMLFromFragment'
+import { Node } from '@tiptap/pm/model'
+
 import { Extensions, JSONContent } from '../types'
+import { getHTMLFromFragment } from './getHTMLFromFragment'
+import { getSchema } from './getSchema'
 
-export default function generateHTML(doc: JSONContent, extensions: Extensions): string {
+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

@@ -1,13 +1,12 @@
-import { DOMParser } from 'prosemirror-model'
-import getSchema from './getSchema'
-import elementFromString from '../utilities/elementFromString'
+import { DOMParser } from '@tiptap/pm/model'
+
 import { Extensions } from '../types'
+import { elementFromString } from '../utilities/elementFromString'
+import { getSchema } from './getSchema'
 
-export default function generateJSON(html: string, extensions: Extensions): Record<string, any> {
+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()
+  return DOMParser.fromSchema(schema).parse(dom).toJSON()
 }

package/src/helpers/generateText.ts

@@ -0,0 +1,27 @@
+import { Node } from '@tiptap/pm/model'
+
+import { Extensions, JSONContent, TextSerializer } from '../types'
+import { getSchema } from './getSchema'
+import { getText } from './getText'
+import { getTextSerializersFromSchema } from './getTextSerializersFromSchema'
+
+export function generateText(
+  doc: JSONContent,
+  extensions: Extensions,
+  options?: {
+    blockSeparator?: string
+    textSerializers?: Record<string, TextSerializer>
+  },
+): string {
+  const { blockSeparator = '\n\n', textSerializers = {} } = options || {}
+  const schema = getSchema(extensions)
+  const contentNode = Node.fromJSON(schema, doc)
+
+  return getText(contentNode, {
+    blockSeparator,
+    textSerializers: {
+      ...getTextSerializersFromSchema(schema),
+      ...textSerializers,
+    },
+  })
+}

package/src/helpers/getAttributes.ts

@@ -1,17 +1,16 @@
-import { MarkType, NodeType } from 'prosemirror-model'
-import { EditorState } from 'prosemirror-state'
-import getSchemaTypeNameByName from './getSchemaTypeNameByName'
-import getNodeAttributes from './getNodeAttributes'
-import getMarkAttributes from './getMarkAttributes'
+import { MarkType, NodeType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
 
-export default function getAttributes(
+import { getMarkAttributes } from './getMarkAttributes'
+import { getNodeAttributes } from './getNodeAttributes'
+import { getSchemaTypeNameByName } from './getSchemaTypeNameByName'
+
+export function getAttributes(
   state: EditorState,
   typeOrName: string | NodeType | MarkType,
 ): Record<string, any> {
   const schemaType = getSchemaTypeNameByName(
-    typeof typeOrName === 'string'
-      ? typeOrName
-      : typeOrName.name,
+    typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
     state.schema,
   )
 

package/src/helpers/getAttributesFromExtensions.ts

@@ -1,20 +1,20 @@
-import splitExtensions from './splitExtensions'
-import getExtensionField from './getExtensionField'
+import { MarkConfig, NodeConfig } from '..'
 import {
-  Extensions,
-  GlobalAttributes,
-  Attributes,
+  AnyConfig,
   Attribute,
+  Attributes,
   ExtensionAttribute,
-  AnyConfig,
+  Extensions,
+  GlobalAttributes,
 } from '../types'
-import { NodeConfig, MarkConfig } from '..'
+import { getExtensionField } from './getExtensionField'
+import { splitExtensions } from './splitExtensions'
 
 /**
  * Get a list of all extension attributes defined in `addAttribute` and `addGlobalAttribute`.
  * @param extensions List of extensions
  */
-export default function getAttributesFromExtensions(extensions: Extensions): ExtensionAttribute[] {
+export function getAttributesFromExtensions(extensions: Extensions): ExtensionAttribute[] {
   const extensionAttributes: ExtensionAttribute[] = []
   const { nodeExtensions, markExtensions } = splitExtensions(extensions)
   const nodeAndMarkExtensions = [...nodeExtensions, ...markExtensions]
@@ -24,12 +24,14 @@ export default function getAttributesFromExtensions(extensions: Extensions): Ext
     renderHTML: null,
     parseHTML: null,
     keepOnSplit: true,
+    isRequired: false,
   }
 
   extensions.forEach(extension => {
     const context = {
       name: extension.name,
       options: extension.options,
+      storage: extension.storage,
     }
 
     const addGlobalAttributes = getExtensionField<AnyConfig['addGlobalAttributes']>(
@@ -67,6 +69,7 @@ export default function getAttributesFromExtensions(extensions: Extensions): Ext
     const context = {
       name: extension.name,
       options: extension.options,
+      storage: extension.storage,
     }
 
     const addAttributes = getExtensionField<NodeConfig['addAttributes'] | MarkConfig['addAttributes']>(
@@ -85,13 +88,23 @@ export default function getAttributesFromExtensions(extensions: Extensions): Ext
     Object
       .entries(attributes)
       .forEach(([name, attribute]) => {
+        const mergedAttr = {
+          ...defaultAttribute,
+          ...attribute,
+        }
+
+        if (typeof mergedAttr?.default === 'function') {
+          mergedAttr.default = mergedAttr.default()
+        }
+
+        if (mergedAttr?.isRequired && mergedAttr?.default === undefined) {
+          delete mergedAttr.default
+        }
+
         extensionAttributes.push({
           type: extension.name,
           name,
-          attribute: {
-            ...defaultAttribute,
-            ...attribute,
-          },
+          attribute: mergedAttr,
         })
       })
   })

package/src/helpers/getChangedRanges.ts

@@ -0,0 +1,83 @@
+import { Step, Transform } from '@tiptap/pm/transform'
+
+import { Range } from '../types'
+import { removeDuplicates } from '../utilities/removeDuplicates'
+
+export type ChangedRange = {
+  oldRange: Range,
+  newRange: Range,
+}
+
+/**
+ * Removes duplicated ranges and ranges that are
+ * fully captured by other ranges.
+ */
+function simplifyChangedRanges(changes: ChangedRange[]): ChangedRange[] {
+  const uniqueChanges = removeDuplicates(changes)
+
+  return uniqueChanges.length === 1
+    ? uniqueChanges
+    : uniqueChanges.filter((change, index) => {
+      const rest = uniqueChanges.filter((_, i) => i !== index)
+
+      return !rest.some(otherChange => {
+        return change.oldRange.from >= otherChange.oldRange.from
+          && change.oldRange.to <= otherChange.oldRange.to
+          && change.newRange.from >= otherChange.newRange.from
+          && change.newRange.to <= otherChange.newRange.to
+      })
+    })
+}
+
+/**
+ * Returns a list of changed ranges
+ * based on the first and last state of all steps.
+ */
+export function getChangedRanges(transform: Transform): ChangedRange[] {
+  const { mapping, steps } = transform
+  const changes: ChangedRange[] = []
+
+  mapping.maps.forEach((stepMap, index) => {
+    const ranges: Range[] = []
+
+    // This accounts for step changes where no range was actually altered
+    // e.g. when setting a mark, node attribute, etc.
+    // @ts-ignore
+    if (!stepMap.ranges.length) {
+      const { from, to } = steps[index] as Step & {
+        from?: number,
+        to?: number,
+      }
+
+      if (from === undefined || to === undefined) {
+        return
+      }
+
+      ranges.push({ from, to })
+    } else {
+      stepMap.forEach((from, to) => {
+        ranges.push({ from, to })
+      })
+    }
+
+    ranges.forEach(({ from, to }) => {
+      const newStart = mapping.slice(index).map(from, -1)
+      const newEnd = mapping.slice(index).map(to)
+      const oldStart = mapping.invert().map(newStart, -1)
+      const oldEnd = mapping.invert().map(newEnd)
+
+      changes.push({
+        oldRange: {
+          from: oldStart,
+          to: oldEnd,
+        },
+        newRange: {
+          from: newStart,
+          to: newEnd,
+        },
+      })
+    })
+  })
+
+  return simplifyChangedRanges(changes)
+}