@tiptap/extension-invisible-characters 2.24.1 → 3.0.0-beta.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -1,19 +1,52 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-Object.defineProperty(exports, '__esModule', { value: true });
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HardBreakNode: () => HardBreakNode,
+  InvisibleCharacter: () => InvisibleCharacter,
+  InvisibleCharacters: () => InvisibleCharacters,
+  InvisibleNode: () => InvisibleNode,
+  ParagraphNode: () => ParagraphNode,
+  SpaceCharacter: () => SpaceCharacter,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
 
-var core = require('@tiptap/core');
-var state = require('@tiptap/pm/state');
-var view = require('@tiptap/pm/view');
+// src/invisible-characters.ts
+var import_core = require("@tiptap/core");
 
-const stateReducer = (state, visible) => {
-    if (visible === undefined) {
-        return state;
-    }
-    return { ...state, visible };
+// src/plugin/InvisibleCharactersPlugin.ts
+var import_state = require("@tiptap/pm/state");
+var import_view = require("@tiptap/pm/view");
+
+// src/plugin/reducers.ts
+var stateReducer = (state, visible) => {
+  if (visible === void 0) {
+    return state;
+  }
+  return { ...state, visible };
 };
 
-const style = `.Tiptap-invisible-character {
+// src/plugin/style.ts
+var style = `.Tiptap-invisible-character {
   height: 0;
   padding: 0;
   pointer-events: none;
@@ -32,15 +65,15 @@ const style = `.Tiptap-invisible-character {
 }
 
 .Tiptap-invisible-character--space::before {
-  content: '·'
+  content: '\xB7'
 }
 
 .Tiptap-invisible-character--break::before {
-  content: '¬'
+  content: '\xAC'
 }
 
 .Tiptap-invisible-character--paragraph::before {
-  content: '¶'
+  content: '\xB6'
 }
 
 .Tiptap-invisible-character + img.ProseMirror-separator {
@@ -55,256 +88,262 @@ const style = `.Tiptap-invisible-character {
 }
 `;
 
-const createStyleTag = (style, nonce) => {
-    const tiptapStyleTag = document.querySelector('style[data-tiptap-extension-invisible-characters-style]');
-    if (tiptapStyleTag !== null) {
-        return tiptapStyleTag;
+// src/plugin/utils/create-style-tag.ts
+var createStyleTag = (style2, nonce) => {
+  const tiptapStyleTag = 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 = style2;
+  document.getElementsByTagName("head")[0].appendChild(styleNode);
+  return styleNode;
+};
+
+// src/plugin/utils/get-updated-ranges.ts
+var getUpdatedRanges = ({ mapping }) => {
+  const ranges = [];
+  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;
+};
+
+// src/plugin/InvisibleCharactersPlugin.ts
+var InvisibleCharactersPluginKey = new import_state.PluginKey("invisibleCharacters");
+var InvisibleCharactersPlugin = (state, options) => {
+  const key = InvisibleCharactersPluginKey;
+  const emptyDecorationSet = import_view.DecorationSet.create(state.doc, []);
+  const addDecorationsBetweenPositions = (from, to, editorState, decorations) => {
+    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 import_state.Plugin({
+    key,
+    state: {
+      init: () => {
+        const { $from, $to } = new import_state.AllSelection(state.doc);
+        if (options.injectCSS && document) {
+          createStyleTag(style, options.injectNonce);
+        }
+        return {
+          visible: options.visible,
+          decorations: addDecorationsBetweenPositions($from.pos, $to.pos, state, import_view.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 == null ? void 0 : pluginState.visible;
+        const decorations = pluginState == null ? void 0 : pluginState.decorations;
+        return visible ? decorations : emptyDecorationSet;
+      }
     }
-    const styleNode = document.createElement('style');
-    if (nonce) {
-        styleNode.setAttribute('nonce', nonce);
+  });
+};
+
+// src/plugin/utils/create-decoration-widget.ts
+var import_view2 = require("@tiptap/pm/view");
+var createDecorationWidget = (pos, type, content) => {
+  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;
     }
-    styleNode.setAttribute('data-tiptap-extension-invisible-characters-style', '');
-    styleNode.innerHTML = style;
-    document.getElementsByTagName('head')[0].appendChild(styleNode);
-    return styleNode;
+    return newElement;
+  };
+  return import_view2.Decoration.widget(pos, createElement, {
+    key: type,
+    marks: [],
+    side: 1e3
+  });
 };
 
-const getUpdatedRanges = ({ mapping }) => {
-    const ranges = [];
-    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),
-            ]);
-        });
+// src/plugin/InvisibleNode.ts
+var defaultPosition = (node, pos) => pos + node.nodeSize - 1;
+var InvisibleNode = class {
+  constructor(options) {
+    this.predicate = options.predicate;
+    this.type = options.type;
+    this.position = options.position || defaultPosition;
+    this.content = options.content;
+    this.priority = options.priority || 100;
+  }
+  createDecoration(from, to, doc, decorations) {
+    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 ranges;
+    return newDecorations;
+  }
+  test(value) {
+    return this.predicate(value);
+  }
 };
 
-const InvisibleCharactersPluginKey = new state.PluginKey('invisibleCharacters');
-const InvisibleCharactersPlugin = (state$1, options) => {
-    const key = InvisibleCharactersPluginKey;
-    const emptyDecorationSet = view.DecorationSet.create(state$1.doc, []);
-    const addDecorationsBetweenPositions = (from, to, editorState, decorations) => {
-        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 state.Plugin({
-        key,
-        state: {
-            init: () => {
-                const { $from, $to } = new state.AllSelection(state$1.doc);
-                if (options.injectCSS && document) {
-                    createStyleTag(style, options.injectNonce);
-                }
-                return {
-                    visible: options.visible,
-                    decorations: addDecorationsBetweenPositions($from.pos, $to.pos, state$1, view.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 === null || pluginState === void 0 ? void 0 : pluginState.visible;
-                const decorations = pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations;
-                return visible ? decorations : emptyDecorationSet;
-            },
-        },
+// src/plugin/invisible-characters/hardBreak.ts
+var HardBreakNode = class extends InvisibleNode {
+  constructor() {
+    super({
+      type: "break",
+      predicate: (node) => node.type === node.type.schema.nodes.hardBreak
     });
+  }
 };
 
-const createDecorationWidget = (pos, type, content) => {
-    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 view.Decoration.widget(pos, createElement, {
-        key: type,
-        marks: [],
-        side: 1000,
+// src/plugin/invisible-characters/paragraph.ts
+var ParagraphNode = class extends InvisibleNode {
+  constructor() {
+    super({
+      type: "paragraph",
+      predicate: (node) => node.type === node.type.schema.nodes.paragraph
     });
+  }
 };
 
-/** Default position for nodes is always at the end of the node */
-const defaultPosition = (node, pos) => pos + node.nodeSize - 1;
-class InvisibleNode {
-    constructor(options) {
-        this.predicate = options.predicate;
-        this.type = options.type;
-        this.position = options.position || defaultPosition;
-        this.content = options.content;
-        this.priority = options.priority || 100;
-    }
-    createDecoration(from, to, doc, decorations) {
-        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) {
-        return this.predicate(value);
-    }
-}
-
-class HardBreakNode extends InvisibleNode {
-    constructor() {
-        super({
-            type: 'break',
-            predicate: node => node.type === node.type.schema.nodes.hardBreak,
-        });
+// src/plugin/utils/text-between.ts
+var textBetween = (from, to, doc) => {
+  const positions = [];
+  doc.nodesBetween(from, to, (node, pos) => {
+    var _a;
+    if (node.isText) {
+      const offset = Math.max(from, pos) - pos;
+      positions.push({
+        pos: pos + offset,
+        text: ((_a = node.text) == null ? void 0 : _a.slice(offset, to - pos)) || ""
+      });
     }
-}
+  });
+  return positions;
+};
 
-class ParagraphNode extends InvisibleNode {
-    constructor() {
-        super({
-            type: 'paragraph',
-            predicate: node => node.type === node.type.schema.nodes.paragraph,
-        });
-    }
-}
+// src/plugin/InvisibleCharacter.ts
+var InvisibleCharacter = class {
+  constructor(options) {
+    this.predicate = options.predicate;
+    this.type = options.type;
+    this.content = options.content;
+    this.priority = options.priority || 100;
+  }
+  createDecoration(from, to, doc, decorations) {
+    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) {
+    return this.predicate(value);
+  }
+};
 
-const textBetween = (from, to, doc) => {
-    const positions = [];
-    doc.nodesBetween(from, to, (node, pos) => {
-        var _a;
-        if (node.isText) {
-            const offset = Math.max(from, pos) - pos;
-            positions.push({
-                pos: pos + offset,
-                text: ((_a = node.text) === null || _a === void 0 ? void 0 : _a.slice(offset, to - pos)) || '',
-            });
-        }
+// src/plugin/invisible-characters/space.ts
+var SpaceCharacter = class extends InvisibleCharacter {
+  constructor() {
+    super({
+      type: "space",
+      predicate: (char) => char === " "
     });
-    return positions;
+  }
 };
 
-class InvisibleCharacter {
-    constructor(options) {
-        this.predicate = options.predicate;
-        this.type = options.type;
-        this.content = options.content;
-        this.priority = options.priority || 100;
-    }
-    createDecoration(from, to, doc, decorations) {
-        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) {
-        return this.predicate(value);
-    }
-}
-
-class SpaceCharacter extends InvisibleCharacter {
-    constructor() {
-        super({
-            type: 'space',
-            predicate: (char) => char === ' ',
-        });
-    }
-}
-
-const InvisibleCharacters = core.Extension.create({
-    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 = () => {
-            var _a;
-            return (_a = InvisibleCharactersPluginKey.getState(this.editor.state)) === null || _a === void 0 ? void 0 : _a.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 }) => {
-                var _a;
-                const visibility = !((_a = InvisibleCharactersPluginKey.getState(state)) === null || _a === void 0 ? void 0 : _a.visible);
-                if (dispatch) {
-                    tr.setMeta('setInvisibleCharactersVisible', visibility);
-                }
-                return true;
-            },
-        };
-    },
+// src/invisible-characters.ts
+var InvisibleCharacters = import_core.Extension.create({
+  name: "invisibleCharacters",
+  addOptions() {
+    return {
+      visible: true,
+      builders: [new SpaceCharacter(), new ParagraphNode(), new HardBreakNode()],
+      injectCSS: true,
+      injectNonce: void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    return [InvisibleCharactersPlugin(this.editor.state, this.options)];
+  },
+  addStorage() {
+    return {
+      visibility: () => this.options.visible
+    };
+  },
+  onBeforeCreate() {
+    this.storage.visibility = () => {
+      var _a;
+      return (_a = InvisibleCharactersPluginKey.getState(this.editor.state)) == null ? void 0 : _a.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 }) => {
+        var _a;
+        const visibility = !((_a = InvisibleCharactersPluginKey.getState(state)) == null ? void 0 : _a.visible);
+        if (dispatch) {
+          tr.setMeta("setInvisibleCharactersVisible", visibility);
+        }
+        return true;
+      }
+    };
+  }
 });
 
-exports.HardBreakNode = HardBreakNode;
-exports.InvisibleCharacter = InvisibleCharacter;
-exports.InvisibleCharacters = InvisibleCharacters;
-exports.InvisibleNode = InvisibleNode;
-exports.ParagraphNode = ParagraphNode;
-exports.SpaceCharacter = SpaceCharacter;
-exports.default = InvisibleCharacters;
-//# sourceMappingURL=index.cjs.map
+// src/index.ts
+var index_default = InvisibleCharacters;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HardBreakNode,
+  InvisibleCharacter,
+  InvisibleCharacters,
+  InvisibleNode,
+  ParagraphNode,
+  SpaceCharacter
+});
+//# sourceMappingURL=index.cjs.map