@tiptap/extension-invisible-characters 2.22.0

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,GAAG,aAAa,CAAC,CAAC;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;CAC5B"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tiptap/extension-invisible-characters",
+  "description": "invisible characters extension for tiptap",
+  "version": "2.22.0",
+  "homepage": "https://tiptap.dev/docs/editor/extensions/functionality/invisiblecharacters",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@tiptap/core": "^2.22.0",
+    "@tiptap/extension-text-style": "^2.22.0"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.7.0",
+    "@tiptap/extension-text-style": "^2.7.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-invisible-characters"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+import { InvisibleCharacters } from './invisible-characters.js'
+
+export * from './invisible-characters.js'
+export * from './plugin/invisible-characters/hardBreak.js'
+export * from './plugin/invisible-characters/paragraph.js'
+export * from './plugin/invisible-characters/space.js'
+export * from './plugin/InvisibleCharacter.js'
+export * from './plugin/InvisibleNode.js'
+export * from './types.js'
+
+export default InvisibleCharacters

package/src/invisible-characters.ts

@@ -0,0 +1,99 @@
+import { Extension } from '@tiptap/core'
+
+import { InvisibleCharactersPlugin, InvisibleCharactersPluginKey } from './plugin/index.js'
+import { HardBreakNode } from './plugin/invisible-characters/hardBreak.js'
+import { ParagraphNode } from './plugin/invisible-characters/paragraph.js'
+import { SpaceCharacter } from './plugin/invisible-characters/space.js'
+import { InvisibleCharactersOptions } from './types.js'
+
+export {
+  HardBreakNode,
+  ParagraphNode,
+  SpaceCharacter,
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    invisibleCharacters: {
+      /**
+      * Show invisible characters
+      */
+      showInvisibleCharacters: (show?: boolean) => ReturnType
+
+      /**
+      * Hide invisible characters
+      */
+      hideInvisibleCharacters: () => ReturnType
+
+      /**
+      * Toggle invisible characters
+      */
+      toggleInvisibleCharacters: () => ReturnType
+    }
+  }
+}
+
+export const InvisibleCharacters = Extension.create<InvisibleCharactersOptions>({
+  name: 'invisibleCharacters',
+
+  addOptions() {
+    return {
+      visible: true,
+      builders: [
+        new SpaceCharacter(),
+        new ParagraphNode(),
+        new HardBreakNode(),
+      ],
+      injectCSS: true,
+      injectNonce: undefined,
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      InvisibleCharactersPlugin(this.editor.state, this.options),
+    ]
+  },
+
+  addStorage() {
+    return {
+      visibility: () => this.options.visible,
+    }
+  },
+
+  onBeforeCreate() {
+    this.storage.visibility = () => {
+      return InvisibleCharactersPluginKey.getState(this.editor.state)?.visible
+    }
+  },
+
+  addCommands() {
+    return {
+      showInvisibleCharacters: (visibility = true) => ({ dispatch, tr }) => {
+        if (dispatch) {
+          tr.setMeta('setInvisibleCharactersVisible', visibility)
+        }
+
+        return true
+      },
+      hideInvisibleCharacters: () => ({ dispatch, tr }) => {
+        if (dispatch) {
+          tr.setMeta('setInvisibleCharactersVisible', false)
+        }
+
+        return true
+      },
+      toggleInvisibleCharacters: () => ({ dispatch, tr, state }) => {
+        const visibility = !InvisibleCharactersPluginKey.getState(state)?.visible
+
+        if (dispatch) {
+          tr.setMeta('setInvisibleCharactersVisible', visibility)
+        }
+
+        return true
+      },
+    }
+  },
+})
+
+export default InvisibleCharacters

package/src/plugin/InvisibleCharacter.ts

@@ -0,0 +1,47 @@
+import { Node } from '@tiptap/pm/model'
+import { DecorationSet } from '@tiptap/pm/view'
+
+import { createDecorationWidget } from './utils/create-decoration-widget.js'
+import { textBetween } from './utils/text-between.js'
+
+export interface InvisibleCharacterOptions {
+  type: string;
+  predicate: (value: string) => boolean
+  priority?: number
+  content?: string
+}
+
+export class InvisibleCharacter {
+  predicate: (value: string) => boolean
+
+  content?: string
+
+  type: string
+
+  priority: number
+
+  constructor(options: InvisibleCharacterOptions) {
+    this.predicate = options.predicate
+    this.type = options.type
+    this.content = options.content
+    this.priority = options.priority || 100
+  }
+
+  createDecoration(from: number, to: number, doc: Node, decorations: DecorationSet) {
+    const textContent = textBetween(from, to, doc)
+
+    return textContent.reduce((oldDecorations, currentPosition) => {
+      return currentPosition.text.split('').reduce((innerDecorations, char, i) => {
+        return this.test(char)
+          ? innerDecorations.add(doc, [createDecorationWidget(currentPosition.pos + i, this.type, this.content)])
+          : innerDecorations
+      }, oldDecorations)
+    }, decorations)
+  }
+
+  test(value: string) {
+    return this.predicate(value)
+  }
+}
+
+export default InvisibleCharacter

package/src/plugin/InvisibleCharactersPlugin.ts

@@ -0,0 +1,79 @@
+import {
+  AllSelection, EditorState, Plugin, PluginKey,
+} from '@tiptap/pm/state'
+import { DecorationSet } from '@tiptap/pm/view'
+
+import { InvisibleCharactersOptions, PluginState } from '../types.js'
+import { stateReducer } from './reducers.js'
+import { style } from './style.js'
+import { createStyleTag } from './utils/create-style-tag.js'
+import { getUpdatedRanges } from './utils/get-updated-ranges.js'
+
+export const InvisibleCharactersPluginKey = new PluginKey<PluginState>('invisibleCharacters')
+
+export const InvisibleCharactersPlugin = (state: EditorState, options: InvisibleCharactersOptions) => {
+  const key = InvisibleCharactersPluginKey
+  const emptyDecorationSet = DecorationSet.create(state.doc, [])
+
+  const addDecorationsBetweenPositions = (
+    from: number,
+    to: number,
+    editorState: EditorState,
+    decorations: DecorationSet,
+  ) => {
+    return options.builders.sort((builderA, builderB) => {
+      if (builderA.priority > builderB.priority) {
+        return 1
+      }
+
+      return -1
+    }).reduce((newDecos, builder) => {
+      return builder.createDecoration(from, to, editorState.doc, newDecos)
+    }, decorations)
+  }
+
+  return new Plugin({
+    key,
+
+    state: {
+      init: () => {
+        const { $from, $to } = new AllSelection(state.doc)
+
+        if (options.injectCSS && document) {
+          createStyleTag(style, options.injectNonce)
+        }
+
+        return {
+          visible: options.visible,
+          decorations: addDecorationsBetweenPositions($from.pos, $to.pos, state, DecorationSet.empty),
+        }
+      },
+      apply: (tr, pluginState, _, currentState) => {
+        const newPluginState = stateReducer(pluginState, tr.getMeta('setInvisibleCharactersVisible'))
+
+        const decorations = getUpdatedRanges(tr).reduce((nextDecorations, [from, to]) => {
+          return addDecorationsBetweenPositions(from, to, currentState, nextDecorations)
+        }, newPluginState.decorations.map(tr.mapping, tr.doc))
+
+        return {
+          ...newPluginState,
+          decorations,
+        }
+      },
+    },
+
+    props: {
+      decorations(editorState) {
+        const pluginState = this.getState(editorState)
+
+        const visible = pluginState?.visible
+        const decorations = pluginState?.decorations
+
+        return visible ? decorations : emptyDecorationSet
+      },
+    },
+
+  })
+}
+
+export default InvisibleCharactersPlugin

package/src/plugin/InvisibleNode.ts

@@ -0,0 +1,61 @@
+import { Node } from '@tiptap/pm/model'
+import { DecorationSet } from '@tiptap/pm/view'
+
+import { createDecorationWidget } from './utils/create-decoration-widget.js'
+
+export interface InvisibleNodeOptions {
+  content?: string
+  position?: (node: Node, pos: number) => number;
+  predicate: (value: Node) => boolean
+  priority?: number
+  type: string;
+}
+
+/** Default position for nodes is always at the end of the node */
+const defaultPosition = (node: Node, pos: number) => pos + node.nodeSize - 1
+
+export class InvisibleNode {
+  predicate: (value: Node) => boolean
+
+  position: (node: Node, pos: number) => number
+
+  content ?: string
+
+  type: string
+
+  priority: number
+
+  constructor(options: InvisibleNodeOptions) {
+    this.predicate = options.predicate
+    this.type = options.type
+    this.position = options.position || defaultPosition
+    this.content = options.content
+    this.priority = options.priority || 100
+  }
+
+  createDecoration(from: number, to: number, doc: Node, decorations: DecorationSet) {
+    let newDecorations = decorations
+
+    doc.nodesBetween(from, to, (node, pos) => {
+      if (this.test(node)) {
+        const decorationPosition = this.position(node, pos)
+        const oldDecorations = newDecorations.find(
+          decorationPosition,
+          decorationPosition,
+          spec => spec.key === this.type,
+        )
+
+        newDecorations = newDecorations
+          .remove(oldDecorations)
+          .add(doc, [createDecorationWidget(decorationPosition, this.type, this.content)])
+      }
+    })
+    return newDecorations
+  }
+
+  test(value: Node) {
+    return this.predicate(value)
+  }
+}
+
+export default InvisibleNode

package/src/plugin/index.ts

@@ -0,0 +1 @@
+export * from './InvisibleCharactersPlugin.js'

package/src/plugin/invisible-characters/hardBreak.ts

@@ -0,0 +1,12 @@
+import { InvisibleNode } from '../InvisibleNode.js'
+
+export class HardBreakNode extends InvisibleNode {
+  constructor() {
+    super({
+      type: 'break',
+      predicate: node => node.type === node.type.schema.nodes.hardBreak,
+    })
+  }
+}
+
+export default HardBreakNode

package/src/plugin/invisible-characters/paragraph.ts

@@ -0,0 +1,12 @@
+import { InvisibleNode } from '../InvisibleNode.js'
+
+export class ParagraphNode extends InvisibleNode {
+  constructor() {
+    super({
+      type: 'paragraph',
+      predicate: node => node.type === node.type.schema.nodes.paragraph,
+    })
+  }
+}
+
+export default ParagraphNode

package/src/plugin/invisible-characters/space.ts

@@ -0,0 +1,12 @@
+import { InvisibleCharacter } from '../InvisibleCharacter.js'
+
+export class SpaceCharacter extends InvisibleCharacter {
+  constructor() {
+    super({
+      type: 'space',
+      predicate: (char: string) => char === ' ',
+    })
+  }
+}
+
+export default SpaceCharacter

package/src/plugin/reducers.ts

@@ -0,0 +1,14 @@
+import { PluginState } from '../types.js'
+
+export const stateReducer = (
+  state: PluginState,
+  visible: boolean,
+): PluginState => {
+  if (visible === undefined) {
+    return state
+  }
+
+  return { ...state, visible }
+}
+
+export default stateReducer

package/src/plugin/style.ts

@@ -0,0 +1,43 @@
+export const style = `.Tiptap-invisible-character {
+  height: 0;
+  padding: 0;
+  pointer-events: none;
+  user-select: none;
+  width: 0;
+}
+
+.Tiptap-invisible-character::before {
+  caret-color: inherit;
+  color: #aaa;
+  display: inline-block;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1em;
+  width: 0;
+}
+
+.Tiptap-invisible-character--space::before {
+  content: '·'
+}
+
+.Tiptap-invisible-character--break::before {
+  content: '¬'
+}
+
+.Tiptap-invisible-character--paragraph::before {
+  content: '¶'
+}
+
+.Tiptap-invisible-character + img.ProseMirror-separator {
+  height: 0 !important;
+  pointer-events: none;
+  user-select: none;
+  width: 0 !important;
+}
+
+.is-empty[data-placeholder].has-focus > .Tiptap-invisible-character {
+  display: none;
+}
+`
+
+export default style

package/src/plugin/utils/create-decoration-widget.ts

@@ -0,0 +1,28 @@
+import { Decoration } from '@tiptap/pm/view'
+
+export const createDecorationWidget = (pos: number, type: string, content?: string) => {
+  const createElement = () => {
+    const newElement = document.createElement('span')
+
+    newElement.classList.add('Tiptap-invisible-character')
+    newElement.classList.add(`Tiptap-invisible-character--${type}`)
+
+    if (content) {
+      newElement.textContent = content
+    }
+
+    return newElement
+  }
+
+  // return Decoration.inline(pos - 1, pos, {
+  //   class: `Tiptap-invisible-character Tiptap-invisible-character--${type}`,
+  // })
+
+  return Decoration.widget(pos, createElement, {
+    key: type,
+    marks: [],
+    side: 1000,
+  })
+}
+
+export default createDecorationWidget

package/src/plugin/utils/create-style-tag.ts

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

package/src/plugin/utils/get-updated-ranges.ts

@@ -0,0 +1,20 @@
+import { Transaction } from '@tiptap/pm/state'
+
+type StepRange = [from: number, to: number];
+
+export const getUpdatedRanges = ({ mapping }: Transaction): StepRange[] => {
+  const ranges: StepRange[] = []
+
+  mapping.maps.forEach((stepMap, i) => {
+    stepMap.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+      ranges.push([
+        mapping.slice(i + 1).map(newStart),
+        mapping.slice(i + 1).map(newEnd),
+      ])
+    })
+  })
+
+  return ranges
+}
+
+export default getUpdatedRanges

package/src/plugin/utils/text-between.ts

@@ -0,0 +1,22 @@
+import { Node } from '@tiptap/pm/model'
+
+import { Position } from '../../types.js'
+
+export const textBetween = (from: number, to: number, doc: Node) => {
+  const positions: Position[] = []
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (node.isText) {
+      const offset = Math.max(from, pos) - pos
+
+      positions.push({
+        pos: pos + offset,
+        text: node.text?.slice(offset, to - pos) || '',
+      })
+    }
+  })
+
+  return positions
+}
+
+export default textBetween

package/src/types.ts

@@ -0,0 +1,21 @@
+import { DecorationSet } from '@tiptap/pm/view'
+
+import { InvisibleCharacter } from './plugin/InvisibleCharacter.js'
+import { InvisibleNode } from './plugin/InvisibleNode.js'
+
+export interface InvisibleCharactersOptions {
+  visible: boolean,
+  builders: Array<InvisibleCharacter | InvisibleNode>,
+  injectCSS: boolean,
+  injectNonce: string | undefined,
+}
+
+export interface Position {
+  pos: number,
+  text: string,
+}
+
+export interface PluginState {
+  visible: boolean,
+  decorations: DecorationSet,
+}