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

package/src/inputRules/markInputRule.ts

@@ -1,50 +1,69 @@
-import { InputRule } from 'prosemirror-inputrules'
-import { MarkType } from 'prosemirror-model'
-import getMarksBetween from '../helpers/getMarksBetween'
-
-export default function (regexp: RegExp, markType: MarkType, getAttributes?: Function): InputRule {
-  return new InputRule(regexp, (state, match, start, end) => {
-    const attributes = getAttributes instanceof Function
-      ? getAttributes(match)
-      : getAttributes
-    const { tr } = state
-    const captureGroup = match[match.length - 1]
-    const fullMatch = match[0]
-    let markEnd = end
-
-    if (captureGroup) {
-      const startSpaces = fullMatch.search(/\S/)
-      const textStart = start + fullMatch.indexOf(captureGroup)
-      const textEnd = textStart + captureGroup.length
-
-      const excludedMarks = getMarksBetween(start, end, state)
-        .filter(item => {
-          // TODO: PR to add excluded to MarkType
-          // @ts-ignore
-          const { excluded } = item.mark.type
-          return excluded.find((type: MarkType) => type.name === markType.name)
-        })
-        .filter(item => item.to > textStart)
-
-      if (excludedMarks.length) {
+import { MarkType } from '@tiptap/pm/model'
+
+import { getMarksBetween } from '../helpers/getMarksBetween'
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities/callOrReturn'
+
+/**
+ * Build an input rule that adds a mark when the
+ * matched text is typed into it.
+ */
+export function markInputRule(config: {
+  find: InputRuleFinder
+  type: MarkType
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match)
+
+      if (attributes === false || attributes === null) {
         return null
       }
 
-      if (textEnd < end) {
-        tr.delete(textEnd, end)
-      }
+      const { tr } = state
+      const captureGroup = match[match.length - 1]
+      const fullMatch = match[0]
+      let markEnd = range.to
 
-      if (textStart > start) {
-        tr.delete(start + startSpaces, textStart)
-      }
+      if (captureGroup) {
+        const startSpaces = fullMatch.search(/\S/)
+        const textStart = range.from + fullMatch.indexOf(captureGroup)
+        const textEnd = textStart + captureGroup.length
 
-      markEnd = start + startSpaces + captureGroup.length
+        const excludedMarks = getMarksBetween(range.from, range.to, state.doc)
+          .filter(item => {
+            // @ts-ignore
+            const excluded = item.mark.type.excluded as MarkType[]
 
-      tr.addMark(start + startSpaces, markEnd, markType.create(attributes))
+            return excluded.find(type => type === config.type && type !== item.mark.type)
+          })
+          .filter(item => item.to > textStart)
 
-      tr.removeStoredMark(markType)
-    }
+        if (excludedMarks.length) {
+          return null
+        }
 
-    return tr
+        if (textEnd < range.to) {
+          tr.delete(textEnd, range.to)
+        }
+
+        if (textStart > range.from) {
+          tr.delete(range.from + startSpaces, textStart)
+        }
+
+        markEnd = range.from + startSpaces + captureGroup.length
+
+        tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}))
+
+        tr.removeStoredMark(config.type)
+      }
+    },
   })
 }

package/src/inputRules/nodeInputRule.ts

@@ -1,17 +1,50 @@
-import { InputRule } from 'prosemirror-inputrules'
-import { NodeType } from 'prosemirror-model'
+import { NodeType } from '@tiptap/pm/model'
 
-export default function (regexp: RegExp, type: NodeType, getAttributes?: (match: any) => any): InputRule {
-  return new InputRule(regexp, (state, match, start, end) => {
-    const attributes = getAttributes instanceof Function
-      ? getAttributes(match)
-      : getAttributes
-    const { tr } = state
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities/callOrReturn'
 
-    if (match[0]) {
-      tr.replaceWith(start - 1, end, type.create(attributes))
-    }
+/**
+ * Build an input rule that adds a node when the
+ * matched text is typed into it.
+ */
+export function nodeInputRule(config: {
+  find: InputRuleFinder
+  type: NodeType
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+      const { tr } = state
+      const start = range.from
+      let end = range.to
 
-    return tr
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+        let matchStart = start + offset
+
+        if (matchStart > end) {
+          matchStart = end
+        } else {
+          end = matchStart + match[1].length
+        }
+
+        // insert last typed character
+        const lastChar = match[0][match[0].length - 1]
+
+        tr.insertText(lastChar, start + match[0].length - 1)
+
+        // insert node from input rule
+        tr.replaceWith(matchStart, end, config.type.create(attributes))
+      } else if (match[0]) {
+        tr.replaceWith(start, end, config.type.create(attributes))
+      }
+    },
   })
 }

package/src/inputRules/textInputRule.ts

@@ -0,0 +1,35 @@
+import { InputRule, InputRuleFinder } from '../InputRule'
+
+/**
+ * Build an input rule that replaces text when the
+ * matched text is typed into it.
+ */
+export function textInputRule(config: {
+  find: InputRuleFinder,
+  replace: string,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      let insert = config.replace
+      let start = range.from
+      const end = range.to
+
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+
+        insert += match[0].slice(offset + match[1].length)
+        start += offset
+
+        const cutOff = start - end
+
+        if (cutOff > 0) {
+          insert = match[0].slice(offset - cutOff, offset) + insert
+          start = end
+        }
+      }
+
+      state.tr.insertText(insert, start, end)
+    },
+  })
+}

package/src/inputRules/textblockTypeInputRule.ts

@@ -0,0 +1,37 @@
+import { NodeType } from '@tiptap/pm/model'
+
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities/callOrReturn'
+
+/**
+ * Build an input rule that changes the type of a textblock when the
+ * matched text is typed into it. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ */
+export function textblockTypeInputRule(config: {
+  find: InputRuleFinder
+  type: NodeType
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const $start = state.doc.resolve(range.from)
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+
+      if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), config.type)) {
+        return null
+      }
+
+      state.tr
+        .delete(range.from, range.to)
+        .setBlockType(range.from, range.from, config.type, attributes)
+    },
+  })
+}

package/src/inputRules/wrappingInputRule.ts

@@ -0,0 +1,59 @@
+import { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model'
+import { canJoin, findWrapping } from '@tiptap/pm/transform'
+
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities/callOrReturn'
+
+/**
+ * Build an input rule for automatically wrapping a textblock when a
+ * given string is typed. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ *
+ * `type` is the type of node to wrap in.
+ *
+ * By default, if there’s a node with the same type above the newly
+ * wrapped node, the rule will try to join those
+ * two nodes. You can pass a join predicate, which takes a regular
+ * expression match and the node before the wrapped node, and can
+ * return a boolean to indicate whether a join should happen.
+ */
+export function wrappingInputRule(config: {
+  find: InputRuleFinder
+  type: NodeType
+  getAttributes?:
+    | 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 }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+      const tr = state.tr.delete(range.from, range.to)
+      const $start = tr.doc.resolve(range.from)
+      const blockRange = $start.blockRange()
+      const wrapping = blockRange && findWrapping(blockRange, config.type, attributes)
+
+      if (!wrapping) {
+        return null
+      }
+
+      tr.wrap(blockRange, wrapping)
+
+      const before = tr.doc.resolve(range.from - 1).nodeBefore
+
+      if (
+        before
+        && before.type === config.type
+        && canJoin(tr.doc, range.from - 1)
+        && (!config.joinPredicate || config.joinPredicate(match, before))
+      ) {
+        tr.join(range.from - 1)
+      }
+    },
+  })
+}

package/src/pasteRules/index.ts

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

package/src/pasteRules/markPasteRule.ts

@@ -1,61 +1,69 @@
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { Slice, Fragment, MarkType } from 'prosemirror-model'
-
-export default function (regexp: RegExp, type: MarkType, getAttrs?: (match: any) => any): Plugin {
-  const handler = (fragment: Fragment, parent?: any) => {
-    const nodes: any[] = []
-
-    fragment.forEach(child => {
-      if (child.isText && child.text) {
-        const { text } = child
-        let pos = 0
-        let match
-
-        // eslint-disable-next-line
-        while ((match = regexp.exec(text)) !== null) {
-          const outerMatch = Math.max(match.length - 2, 0)
-          const innerMatch = Math.max(match.length - 1, 0)
-
-          if (parent?.type.allowsMarkType(type)) {
-            const start = match.index
-            const matchStart = start + match[0].indexOf(match[outerMatch])
-            const matchEnd = matchStart + match[outerMatch].length
-            const textStart = matchStart + match[outerMatch].lastIndexOf(match[innerMatch])
-            const textEnd = textStart + match[innerMatch].length
-            const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs
-
-            // adding text before markdown to nodes
-            if (matchStart > 0) {
-              nodes.push(child.cut(pos, matchStart))
-            }
-
-            // adding the markdown part to nodes
-            nodes.push(child
-              .cut(textStart, textEnd)
-              .mark(type.create(attrs).addToSet(child.marks)))
-
-            pos = matchEnd
-          }
+import { MarkType } from '@tiptap/pm/model'
+
+import { getMarksBetween } from '../helpers/getMarksBetween'
+import { PasteRule, PasteRuleFinder } from '../PasteRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import { callOrReturn } from '../utilities/callOrReturn'
+
+/**
+ * Build an paste rule that adds a mark when the
+ * matched text is pasted into it.
+ */
+export function markPasteRule(config: {
+  find: PasteRuleFinder
+  type: MarkType
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+}) {
+  return new PasteRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match)
+
+      if (attributes === false || attributes === null) {
+        return null
+      }
+
+      const { tr } = state
+      const captureGroup = match[match.length - 1]
+      const fullMatch = match[0]
+      let markEnd = range.to
+
+      if (captureGroup) {
+        const startSpaces = fullMatch.search(/\S/)
+        const textStart = range.from + fullMatch.indexOf(captureGroup)
+        const textEnd = textStart + captureGroup.length
+
+        const excludedMarks = getMarksBetween(range.from, range.to, state.doc)
+          .filter(item => {
+            // @ts-ignore
+            const excluded = item.mark.type.excluded as MarkType[]
+
+            return excluded.find(type => type === config.type && type !== item.mark.type)
+          })
+          .filter(item => item.to > textStart)
+
+        if (excludedMarks.length) {
+          return null
         }
 
-        // adding rest of text to nodes
-        if (pos < text.length) {
-          nodes.push(child.cut(pos))
+        if (textEnd < range.to) {
+          tr.delete(textEnd, range.to)
         }
-      } else {
-        nodes.push(child.copy(handler(child.content, child)))
-      }
-    })
 
-    return Fragment.fromArray(nodes)
-  }
+        if (textStart > range.from) {
+          tr.delete(range.from + startSpaces, textStart)
+        }
 
-  return new Plugin({
-    key: new PluginKey('markPasteRule'),
-    props: {
-      transformPasted: slice => {
-        return new Slice(handler(slice.content), slice.openStart, slice.openEnd)
-      },
+        markEnd = range.from + startSpaces + captureGroup.length
+
+        tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}))
+
+        tr.removeStoredMark(config.type)
+      }
     },
   })
 }

package/src/pasteRules/nodePasteRule.ts

@@ -0,0 +1,37 @@
+import { NodeType } from '@tiptap/pm/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).insertContentAt(range.from, {
+          type: config.type.name,
+          attrs: attributes,
+        })
+      }
+    },
+  })
+}

package/src/pasteRules/textPasteRule.ts

@@ -0,0 +1,35 @@
+import { PasteRule, PasteRuleFinder } from '../PasteRule'
+
+/**
+ * Build an paste rule that replaces text when the
+ * matched text is pasted into it.
+ */
+export function textPasteRule(config: {
+  find: PasteRuleFinder,
+  replace: string,
+}) {
+  return new PasteRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      let insert = config.replace
+      let start = range.from
+      const end = range.to
+
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+
+        insert += match[0].slice(offset + match[1].length)
+        start += offset
+
+        const cutOff = start - end
+
+        if (cutOff > 0) {
+          insert = match[0].slice(offset - cutOff, offset) + insert
+          start = end
+        }
+      }
+
+      state.tr.insertText(insert, start, end)
+    },
+  })
+}

package/src/style.ts

@@ -1,12 +1,14 @@
-const style = `.ProseMirror {
+export const style = `.ProseMirror {
   position: relative;
 }
 
 .ProseMirror {
   word-wrap: break-word;
   white-space: pre-wrap;
+  white-space: break-spaces;
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
 }
 
 .ProseMirror [contenteditable="false"] {
@@ -21,10 +23,19 @@ const style = `.ProseMirror {
   white-space: pre-wrap;
 }
 
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+}
+
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
   position: absolute;
+  margin: 0;
 }
 
 .ProseMirror-gapcursor:after {
@@ -57,6 +68,8 @@ const style = `.ProseMirror {
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
-}`
+}
 
-export default style
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0
+}`