@tiptap/core 2.0.0-beta.21 → 2.0.0-beta.211

package/src/helpers/createNodeFromContent.ts

@@ -1,58 +1,50 @@
 import {
-  Schema,
   DOMParser,
-  Node as ProseMirrorNode,
   Fragment,
-} from 'prosemirror-model'
-import elementFromString from '../utilities/elementFromString'
-import { AnyObject } from '../types'
+  Node as ProseMirrorNode,
+  ParseOptions,
+  Schema,
+} from '@tiptap/pm/model'
 
-export type Content = string | JSON | null
+import { Content } from '../types'
+import { elementFromString } from '../utilities/elementFromString'
 
 export type CreateNodeFromContentOptions = {
-  slice?: boolean,
-  parseOptions?: AnyObject,
+  slice?: boolean
+  parseOptions?: ParseOptions
 }
 
-export default function createNodeFromContent(
+export function createNodeFromContent(
   content: Content,
   schema: Schema,
   options?: CreateNodeFromContentOptions,
-): string | ProseMirrorNode | Fragment {
+): ProseMirrorNode | Fragment {
   options = {
     slice: true,
     parseOptions: {},
     ...options,
   }
 
-  if (content && typeof content === 'object') {
+  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,
-      )
+      console.warn('[tiptap warn]: Invalid content.', 'Passed value:', content, 'Error:', error)
 
       return createNodeFromContent('', schema, options)
     }
   }
 
   if (typeof content === 'string') {
-    const isHTML = content.trim().startsWith('<') && content.trim().endsWith('>')
-
-    if (isHTML || !options.slice) {
-      const parser = DOMParser.fromSchema(schema)
-
-      return options.slice
-        ? parser.parseSlice(elementFromString(content), options.parseOptions).content
-        : parser.parse(elementFromString(content), options.parseOptions)
-    }
+    const parser = DOMParser.fromSchema(schema)
 
-    return content
+    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 '@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

@@ -0,0 +1,18 @@
+import { Node as ProseMirrorNode } from '@tiptap/pm/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,36 @@
+import { Node as ProseMirrorNode } from '@tiptap/pm/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 { 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 { Extensions } from '../types'
+import { Node } from '@tiptap/pm/model'
 
-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,12 @@
+import { DOMParser } from '@tiptap/pm/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()
+}

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

@@ -0,0 +1,26 @@
+import { MarkType, NodeType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+
+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,
+    state.schema,
+  )
+
+  if (schemaType === 'node') {
+    return getNodeAttributes(state, typeOrName as NodeType)
+  }
+
+  if (schemaType === 'mark') {
+    return getMarkAttributes(state, typeOrName as MarkType)
+  }
+
+  return {}
+}

package/src/helpers/getAttributesFromExtensions.ts

@@ -1,17 +1,20 @@
-import splitExtensions from './splitExtensions'
+import { MarkConfig, NodeConfig } from '..'
 import {
-  Extensions,
-  GlobalAttributes,
-  Attributes,
+  AnyConfig,
   Attribute,
+  Attributes,
   ExtensionAttribute,
+  Extensions,
+  GlobalAttributes,
 } from '../types'
+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]
@@ -21,18 +24,28 @@ 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,
     }
 
-    if (!extension.config.addGlobalAttributes) {
+    const addGlobalAttributes = getExtensionField<AnyConfig['addGlobalAttributes']>(
+      extension,
+      'addGlobalAttributes',
+      context,
+    )
+
+    if (!addGlobalAttributes) {
       return
     }
 
-    const globalAttributes = extension.config.addGlobalAttributes.bind(context)() as GlobalAttributes
+    // TODO: remove `as GlobalAttributes`
+    const globalAttributes = addGlobalAttributes() as GlobalAttributes
 
     globalAttributes.forEach(globalAttribute => {
       globalAttribute.types.forEach(type => {
@@ -54,25 +67,40 @@ export default function getAttributesFromExtensions(extensions: Extensions): Ext
 
   nodeAndMarkExtensions.forEach(extension => {
     const context = {
+      name: extension.name,
       options: extension.options,
+      storage: extension.storage,
     }
 
-    if (!extension.config.addAttributes) {
+    const addAttributes = getExtensionField<NodeConfig['addAttributes'] | MarkConfig['addAttributes']>(
+      extension,
+      'addAttributes',
+      context,
+    )
+
+    if (!addAttributes) {
       return
     }
 
-    const attributes = extension.config.addAttributes.bind(context)() as Attributes
+    // TODO: remove `as Attributes`
+    const attributes = addAttributes() as Attributes
 
     Object
       .entries(attributes)
       .forEach(([name, attribute]) => {
+        const mergedAttr = {
+          ...defaultAttribute,
+          ...attribute,
+        }
+
+        if (attribute?.isRequired && attribute?.default === undefined) {
+          delete mergedAttr.default
+        }
+
         extensionAttributes.push({
-          type: extension.config.name,
+          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)
+}

package/src/helpers/getDebugJSON.ts

@@ -0,0 +1,54 @@
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+import { JSONContent } from '../types'
+
+interface DebugJSONContent extends JSONContent {
+  from: number
+  to: number
+}
+
+export function getDebugJSON(node: ProseMirrorNode, startOffset = 0): DebugJSONContent {
+  const isTopNode = node.type === node.type.schema.topNodeType
+  const increment = isTopNode ? 0 : 1
+  const from = startOffset
+  const to = from + node.nodeSize
+  const marks = node.marks.map(mark => {
+    const output: { type: string; attrs?: Record<string, any> } = {
+      type: mark.type.name,
+    }
+
+    if (Object.keys(mark.attrs).length) {
+      output.attrs = { ...mark.attrs }
+    }
+
+    return output
+  })
+  const attrs = { ...node.attrs }
+  const output: DebugJSONContent = {
+    type: node.type.name,
+    from,
+    to,
+  }
+
+  if (Object.keys(attrs).length) {
+    output.attrs = attrs
+  }
+
+  if (marks.length) {
+    output.marks = marks
+  }
+
+  if (node.content.childCount) {
+    output.content = []
+
+    node.forEach((child, offset) => {
+      output.content?.push(getDebugJSON(child, startOffset + offset + increment))
+    })
+  }
+
+  if (node.text) {
+    output.text = node.text
+  }
+
+  return output
+}

package/src/helpers/getExtensionField.ts

@@ -0,0 +1,25 @@
+import { AnyExtension, MaybeThisParameterType, RemoveThis } from '../types'
+
+export function getExtensionField<T = any>(
+  extension: AnyExtension,
+  field: string,
+  context?: Omit<MaybeThisParameterType<T>, 'parent'>,
+): RemoveThis<T> {
+
+  if (extension.config[field] === undefined && extension.parent) {
+    return getExtensionField(extension.parent, field, context)
+  }
+
+  if (typeof extension.config[field] === 'function') {
+    const value = extension.config[field].bind({
+      ...context,
+      parent: extension.parent
+        ? getExtensionField(extension.parent, field, context)
+        : null,
+    })
+
+    return value
+  }
+
+  return extension.config[field]
+}

package/src/helpers/getHTMLFromFragment.ts

@@ -1,13 +1,12 @@
-import { Node, DOMSerializer, Schema } from 'prosemirror-model'
+import { DOMSerializer, Fragment, Schema } from '@tiptap/pm/model'
 
-export default function getHTMLFromFragment(doc: Node, schema: Schema): string {
-  const fragment = DOMSerializer
-    .fromSchema(schema)
-    .serializeFragment(doc.content)
+export function getHTMLFromFragment(fragment: Fragment, schema: Schema): string {
+  const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(fragment)
 
   const temporaryDocument = document.implementation.createHTMLDocument()
   const container = temporaryDocument.createElement('div')
-  container.appendChild(fragment)
+
+  container.appendChild(documentFragment)
 
   return container.innerHTML
 }

package/src/helpers/getMarkAttributes.ts

@@ -1,26 +1,33 @@
-import { EditorState } from 'prosemirror-state'
-import { Mark, MarkType } from 'prosemirror-model'
-import getMarkType from './getMarkType'
-import { AnyObject } from '../types'
+import { Mark, MarkType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
 
-export default function getMarkAttributes(state: EditorState, typeOrName: string | MarkType): AnyObject {
+import { getMarkType } from './getMarkType'
+
+export function getMarkAttributes(
+  state: EditorState,
+  typeOrName: string | MarkType,
+): Record<string, any> {
   const type = getMarkType(typeOrName, state.schema)
   const { from, to, empty } = state.selection
-  let marks: Mark[] = []
+  const marks: Mark[] = []
 
   if (empty) {
-    marks = state.selection.$head.marks()
+    if (state.storedMarks) {
+      marks.push(...state.storedMarks)
+    }
+
+    marks.push(...state.selection.$head.marks())
   } else {
     state.doc.nodesBetween(from, to, node => {
-      marks = [...marks, ...node.marks]
+      marks.push(...node.marks)
     })
   }
 
   const mark = marks.find(markItem => markItem.type.name === type.name)
 
-  if (mark) {
-    return { ...mark.attrs }
+  if (!mark) {
+    return {}
   }
 
-  return {}
+  return { ...mark.attrs }
 }