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

package/src/inputRules/wrappingInputRule.ts

@@ -0,0 +1,60 @@
+import { Node as ProseMirrorNode, NodeType } from 'prosemirror-model'
+import { canJoin, findWrapping } from 'prosemirror-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,70 @@
-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 'prosemirror-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,39 @@
+import { NodeType } from 'prosemirror-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
+}`

package/src/types.ts

@@ -1,57 +1,110 @@
 import {
-  Node as ProseMirrorNode,
   Mark as ProseMirrorMark,
+  Node as ProseMirrorNode,
   ParseOptions,
 } from 'prosemirror-model'
+import { EditorState, Transaction } from 'prosemirror-state'
 import {
-  EditorView,
   Decoration,
-  NodeView,
   EditorProps,
+  EditorView,
+  NodeView,
 } from 'prosemirror-view'
-import { EditorState, Transaction } from 'prosemirror-state'
-import { Extension } from './Extension'
-import { Node } from './Node'
-import { Mark } from './Mark'
-import { Editor } from './Editor'
+
 import {
   Commands,
   ExtensionConfig,
-  NodeConfig,
   MarkConfig,
+  NodeConfig,
 } from '.'
+import { Editor } from './Editor'
+import { Extension } from './Extension'
+import { Mark } from './Mark'
+import { Node } from './Node'
 
-export {
-  Commands,
-  ExtensionConfig,
-  NodeConfig,
-  MarkConfig,
+export type AnyConfig = ExtensionConfig | NodeConfig | MarkConfig
+export type AnyExtension = Extension | Node | Mark
+export type Extensions = AnyExtension[]
+
+export type ParentConfig<T> = Partial<{
+  [P in keyof T]: Required<T>[P] extends (...args: any) => any
+    ? (...args: Parameters<Required<T>[P]>) => ReturnType<Required<T>[P]>
+    : T[P]
+}>
+
+export type Primitive =
+  | null
+  | undefined
+  | string
+  | number
+  | boolean
+  | symbol
+  | bigint
+
+export type RemoveThis<T> = T extends (...args: any) => any
+  ? (...args: Parameters<T>) => ReturnType<T>
+  : T
+
+export type MaybeReturnType<T> = T extends (...args: any) => any
+  ? ReturnType<T>
+  : T
+
+export type MaybeThisParameterType<T> = Exclude<T, Primitive> extends (...args: any) => any
+  ? ThisParameterType<Exclude<T, Primitive>>
+  : any
+
+export interface EditorEvents {
+  beforeCreate: { editor: Editor },
+  create: { editor: Editor },
+  update: { editor: Editor, transaction: Transaction },
+  selectionUpdate: { editor: Editor, transaction: Transaction },
+  transaction: { editor: Editor, transaction: Transaction },
+  focus: { editor: Editor, event: FocusEvent, transaction: Transaction },
+  blur: { editor: Editor, event: FocusEvent, transaction: Transaction },
+  destroy: void,
 }
 
-export type Extensions = (Extension | Node | Mark)[]
+export type EnableRules = (AnyExtension | string)[] | boolean
 
 export interface EditorOptions {
   element: Element,
   content: Content,
   extensions: Extensions,
   injectCSS: boolean,
+  injectNonce: string | undefined,
   autofocus: FocusPosition,
   editable: boolean,
   editorProps: EditorProps,
   parseOptions: ParseOptions,
-  enableInputRules: boolean,
-  enablePasteRules: boolean,
-  onCreate: (props: { editor: Editor }) => void,
-  onUpdate: (props: { editor: Editor }) => void,
-  onViewUpdate: (props: { editor: Editor }) => void,
-  onSelectionUpdate: (props: { editor: Editor }) => void,
-  onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
-  onFocus: (props: { editor: Editor, event: FocusEvent }) => void,
-  onBlur: (props: { editor: Editor, event: FocusEvent }) => void,
-  onDestroy: () => void,
+  enableInputRules: EnableRules,
+  enablePasteRules: EnableRules,
+  enableCoreExtensions: boolean,
+  onBeforeCreate: (props: EditorEvents['beforeCreate']) => void,
+  onCreate: (props: EditorEvents['create']) => void,
+  onUpdate: (props: EditorEvents['update']) => void,
+  onSelectionUpdate: (props: EditorEvents['selectionUpdate']) => void,
+  onTransaction: (props: EditorEvents['transaction']) => void,
+  onFocus: (props: EditorEvents['focus']) => void,
+  onBlur: (props: EditorEvents['blur']) => void,
+  onDestroy: (props: EditorEvents['destroy']) => void,
+}
+
+export type HTMLContent = string
+
+export type JSONContent = {
+  type?: string,
+  attrs?: Record<string, any>,
+  content?: JSONContent[],
+  marks?: {
+    type: string,
+    attrs?: Record<string, any>,
+    [key: string]: any,
+  }[],
+  text?: string,
+  [key: string]: any,
 }
 
-export type Content = string | JSON | null
+export type Content = HTMLContent | JSONContent | JSONContent[] | null
 
 export type CommandProps = {
   editor: Editor,
@@ -68,12 +121,15 @@ export type Command = (props: CommandProps) => boolean
 
 export type CommandSpec = (...args: any[]) => Command
 
+export type KeyboardShortcutCommand = (props: { editor: Editor }) => boolean
+
 export type Attribute = {
   default: any,
   rendered?: boolean,
-  renderHTML?: ((attributes: { [key: string]: any }) => { [key: string]: any } | null) | null,
-  parseHTML?: ((element: HTMLElement) => { [key: string]: any } | null) | null,
+  renderHTML?: ((attributes: Record<string, any>) => Record<string, any> | null) | null,
+  parseHTML?: ((element: HTMLElement) => any | null) | null,
   keepOnSplit: boolean,
+  isRequired?: boolean,
 }
 
 export type Attributes = {
@@ -95,59 +151,71 @@ export type GlobalAttributes = {
 
 export type PickValue<T, K extends keyof T> = T[K]
 
-export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I)=>void)
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void)
   ? I
   : never
 
 export type Diff<T extends keyof any, U extends keyof any> =
   ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T]
 
-export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
+export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U
 
-export type AnyObject = {
-  [key: string]: any
-}
+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 ValuesOf<T> = T[keyof T];
+export type NodeViewProps = {
+  editor: Editor,
+  node: ProseMirrorNode,
+  decorations: Decoration[],
+  selected: boolean,
+  extension: Node,
+  getPos: () => number,
+  updateAttributes: (attributes: Record<string, any>) => void,
+  deleteNode: () => void,
+}
 
-export type KeysWithTypeOf<T, Type> = ({[P in keyof T]: T[P] extends Type ? P : never })[keyof T]
+export interface NodeViewRendererOptions {
+  stopEvent: ((props: {
+    event: Event
+  }) => boolean) | null,
+  ignoreMutation: ((props: {
+    mutation: MutationRecord | { type: 'selection', target: Element }
+  }) => boolean) | null,
+}
 
 export type NodeViewRendererProps = {
   editor: Editor,
   node: ProseMirrorNode,
   getPos: (() => number) | boolean,
-  HTMLAttributes: { [key: string]: any },
+  HTMLAttributes: Record<string, any>,
   decorations: Decoration[],
   extension: Node,
 }
 
 export type NodeViewRenderer = (props: NodeViewRendererProps) => (NodeView | {})
 
-export type UnionCommands = UnionToIntersection<ValuesOf<Pick<Commands, KeysWithTypeOf<Commands, {}>>>>
+export type AnyCommands = Record<string, (...args: any[]) => Command>
+
+export type UnionCommands<T = Command> = UnionToIntersection<ValuesOf<Pick<Commands<T>, KeysWithTypeOf<Commands<T>, {}>>>>
 
 export type RawCommands = {
-  [Item in keyof UnionCommands]: UnionCommands[Item] extends (...args: any[]) => any
-  ? (...args: Parameters<UnionCommands[Item]>) => Command
-  : never
+  [Item in keyof UnionCommands]: UnionCommands<Command>[Item]
 }
 
 export type SingleCommands = {
-  [Item in keyof RawCommands]: RawCommands[Item] extends (...args: any[]) => any
-  ? (...args: Parameters<RawCommands[Item]>) => boolean
-  : never
+  [Item in keyof UnionCommands]: UnionCommands<boolean>[Item]
 }
 
 export type ChainedCommands = {
-  [Item in keyof RawCommands]: RawCommands[Item] extends (...args: any[]) => any
-  ? (...args: Parameters<RawCommands[Item]>) => ChainedCommands
-  : never
+  [Item in keyof UnionCommands]: UnionCommands<ChainedCommands>[Item]
 } & {
   run: () => boolean
 }
 
 export type CanCommands = SingleCommands & { chain: () => ChainedCommands }
 
-export type FocusPosition = 'start' | 'end' | number | boolean | null
+export type FocusPosition = 'start' | 'end' | 'all' | number | boolean | null
 
 export type Range = {
   from: number,
@@ -167,3 +235,20 @@ export type MarkRange = {
 }
 
 export type Predicate = (node: ProseMirrorNode) => boolean
+
+export type NodeWithPos = {
+  node: ProseMirrorNode,
+  pos: number,
+}
+
+export type TextSerializer = (props: {
+  node: ProseMirrorNode,
+  pos: number,
+  parent: ProseMirrorNode,
+  index: number,
+  range: Range,
+}) => string
+
+export type ExtendedRegExpMatchArray = RegExpMatchArray & {
+  data?: Record<string, any>,
+}

package/src/utilities/callOrReturn.ts

@@ -1,3 +1,6 @@
+import { MaybeReturnType } from '../types'
+import { isFunction } from './isFunction'
+
 /**
  * Optionally calls `value` as a function.
  * Otherwise it is returned directly.
@@ -5,8 +8,8 @@
  * @param context Optional context to bind to function.
  * @param props Optional props to pass to function.
  */
-export default function callOrReturn(value: any, context: any = undefined, ...props: any[]): any {
-  if (typeof value === 'function') {
+export function callOrReturn<T>(value: T, context: any = undefined, ...props: any[]): MaybeReturnType<T> {
+  if (isFunction(value)) {
     if (context) {
       return value.bind(context)(...props)
     }
@@ -14,5 +17,5 @@ export default function callOrReturn(value: any, context: any = undefined, ...pr
     return value(...props)
   }
 
-  return value
+  return value as MaybeReturnType<T>
 }

package/src/utilities/createStyleTag.ts

@@ -1,6 +1,17 @@
-export default function createStyleTag(style: string): HTMLStyleElement {
+export function createStyleTag(style: string, nonce?: string): HTMLStyleElement {
+  const tipTapStyleTag = (<HTMLStyleElement>document.querySelector('style[data-tiptap-style]'))
+
+  if (tipTapStyleTag !== null) {
+    return tipTapStyleTag
+  }
+
   const styleNode = document.createElement('style')
 
+  if (nonce) {
+    styleNode.setAttribute('nonce', nonce)
+  }
+
+  styleNode.setAttribute('data-tiptap-style', '')
   styleNode.innerHTML = style
   document.getElementsByTagName('head')[0].appendChild(styleNode)
 

package/src/utilities/deleteProps.ts

@@ -1,18 +1,16 @@
-import { AnyObject } from '../types'
-
 /**
  * Remove a property or an array of properties from an object
  * @param obj Object
  * @param key Key to remove
  */
-export default function deleteProps(obj: AnyObject, propOrProps: string | string[]): AnyObject {
+export function deleteProps(obj: Record<string, any>, propOrProps: string | string[]): Record<string, any> {
   const props = typeof propOrProps === 'string'
     ? [propOrProps]
     : propOrProps
 
   return Object
     .keys(obj)
-    .reduce((newObj: AnyObject, prop) => {
+    .reduce((newObj: Record<string, any>, prop) => {
       if (!props.includes(prop)) {
         newObj[prop] = obj[prop]
       }

package/src/utilities/elementFromString.ts

@@ -1,7 +1,6 @@
-export default function elementFromString(value: string): HTMLElement {
-  const htmlString = `<div>${value}</div>`
-  const parser = new window.DOMParser()
-  const element = parser.parseFromString(htmlString, 'text/html').body
+export function elementFromString(value: string): HTMLElement {
+  // add a wrapper to preserve leading and trailing whitespace
+  const wrappedValue = `<body>${value}</body>`
 
-  return element
+  return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
 }

package/src/utilities/escapeForRegEx.ts

@@ -0,0 +1,4 @@
+// source: https://stackoverflow.com/a/6969486
+export function escapeForRegEx(string: string): string {
+  return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+}

package/src/utilities/findDuplicates.ts

@@ -0,0 +1,5 @@
+export function findDuplicates(items: any[]): any[] {
+  const filtered = items.filter((el, index) => items.indexOf(el) !== index)
+
+  return [...new Set(filtered)]
+}