@tiptap/extension-unique-id 2.0.0-beta.3 → 2.22.0

package/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-unique-id
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-unique-id.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-unique-id)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-unique-id.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-unique-id.svg)](https://www.npmjs.com/package/@tiptap/extension-unique-id)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/helpers/findDuplicates.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a list of duplicated items within an array.
+ */
+export declare function findDuplicates(items: any[]): any[];
+//# sourceMappingURL=findDuplicates.d.ts.map

package/dist/helpers/findDuplicates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findDuplicates.d.ts","sourceRoot":"","sources":["../../src/helpers/findDuplicates.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,CAKlD"}

package/dist/helpers/removeDuplicates.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+export declare function removeDuplicates<T>(array: T[], by?: {
+    (value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
+    (value: any, replacer?: (number | string)[] | null, space?: string | number): string;
+}): T[];
+//# sourceMappingURL=removeDuplicates.d.ts.map

package/dist/helpers/removeDuplicates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"removeDuplicates.d.ts","sourceRoot":"","sources":["../../src/helpers/removeDuplicates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE;;;CAAiB,GAAG,CAAC,EAAE,CAUxE"}

package/dist/{tiptap-extension-unique-id.cjs.js → index.cjs}

@@ -3,292 +3,265 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@tiptap/core');
-var prosemirrorState = require('prosemirror-state');
-var prosemirrorModel = require('prosemirror-model');
+var model = require('@tiptap/pm/model');
+var state = require('@tiptap/pm/state');
 var uuid = require('uuid');
-var prosemirrorTransform = require('prosemirror-transform');
 
-/**
- * Returns a new `Transform` based on all steps of the passed transactions.
- */
-function combineTransactionSteps(oldDoc, transactions) {
-    const transform = new prosemirrorTransform.Transform(oldDoc);
-    transactions.forEach(transaction => {
-        transaction.steps.forEach(step => {
-            transform.step(step);
-        });
-    });
-    return transform;
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+function removeDuplicates(array, by = JSON.stringify) {
+    const seen = {};
+    return array.filter(item => {
+        const key = by(item);
+        return Object.prototype.hasOwnProperty.call(seen, key)
+            ? false
+            : (seen[key] = true);
+    });
 }
 
-/**
- * Removes duplicated values within an array.
- * Supports numbers, strings and objects.
- */
-function removeDuplicates(array, by = JSON.stringify) {
-    const seen = {};
-    return array.filter(item => {
-        const key = by(item);
-        return Object.prototype.hasOwnProperty.call(seen, key)
-            ? false
-            : (seen[key] = true);
-    });
+/**
+ * Returns a list of duplicated items within an array.
+ */
+function findDuplicates(items) {
+    const filtered = items.filter((el, index) => items.indexOf(el) !== index);
+    const duplicates = removeDuplicates(filtered);
+    return duplicates;
 }
 
-/**
- * Removes duplicated ranges and ranges that are
- * fully captured by other ranges.
- */
-function simplifyChangedRanges(changes) {
-    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.oldStart >= otherChange.oldStart
-                    && change.oldEnd <= otherChange.oldEnd
-                    && change.newStart >= otherChange.newStart
-                    && change.newEnd <= otherChange.newEnd;
-            });
-        });
-}
-/**
- * Returns a list of changed ranges
- * based on the first and last state of all steps.
- */
-function getChangedRanges(transform) {
-    const { mapping, steps } = transform;
-    const changes = [];
-    mapping.maps.forEach((stepMap, index) => {
-        // 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 step = steps[index];
-            if (step.from === undefined || step.to === undefined) {
-                return;
-            }
-            changes.push({
-                oldStart: step.from,
-                oldEnd: step.to,
-                newStart: step.from,
-                newEnd: step.to,
-            });
-        }
-        else {
-            stepMap.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({
-                    oldStart,
-                    oldEnd,
-                    newStart,
-                    newEnd,
-                });
-            });
-        }
-    });
-    return simplifyChangedRanges(changes);
-}
-
-/**
- * Returns a list of duplicated items within an array.
- */
-function findDuplicates(items) {
-    const filtered = items.filter((el, index) => items.indexOf(el) !== index);
-    const duplicates = removeDuplicates(filtered);
-    return duplicates;
-}
-
-const UniqueID = core.Extension.create({
-    name: 'uniqueID',
-    // we’ll set a very high priority to make sure this runs first
-    // and is compatible with `appendTransaction` hooks of other extensions
-    priority: 10000,
-    defaultOptions: {
-        attributeName: 'id',
-        types: [],
-        generateID: () => uuid.v4(),
-        filterTransaction: null,
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    [this.options.attributeName]: {
-                        default: null,
-                        parseHTML: element => element.getAttribute(`data-${this.options.attributeName}`),
-                        renderHTML: attributes => {
-                            if (!attributes[this.options.attributeName]) {
-                                return {};
-                            }
-                            return {
-                                [`data-${this.options.attributeName}`]: attributes[this.options.attributeName],
-                            };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    // check initial content for missing ids
-    onCreate() {
-        const { view, state } = this.editor;
-        const { tr, doc } = state;
-        const { types, attributeName, generateID } = this.options;
-        const nodesWithoutId = core.findChildren(doc, node => {
-            return types.includes(node.type.name)
-                && node.attrs[attributeName] === null;
-        });
-        nodesWithoutId.forEach(({ node, pos }) => {
-            tr.setNodeMarkup(pos, undefined, {
-                ...node.attrs,
-                [attributeName]: generateID(),
-            });
-        });
-        view.dispatch(tr);
-    },
-    addProseMirrorPlugins() {
-        let dragSourceElement = null;
-        let transformPasted = false;
-        return [
-            new prosemirrorState.Plugin({
-                key: new prosemirrorState.PluginKey('uniqueID'),
-                appendTransaction: (transactions, oldState, newState) => {
-                    const docChanges = transactions.some(transaction => transaction.docChanged)
-                        && !oldState.doc.eq(newState.doc);
-                    const filterTransactions = this.options.filterTransaction
-                        && transactions.some(tr => { var _a, _b; return !((_b = (_a = this.options).filterTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, tr)); });
-                    if (!docChanges || filterTransactions) {
-                        return;
-                    }
-                    const { tr } = newState;
-                    const { types, attributeName, generateID } = this.options;
-                    const transform = combineTransactionSteps(oldState.doc, transactions);
-                    const { mapping } = transform;
-                    // get changed ranges based on the old state
-                    const changes = getChangedRanges(transform);
-                    changes.forEach(change => {
-                        const newRange = {
-                            from: change.newStart,
-                            to: change.newEnd,
-                        };
-                        const newNodes = core.findChildrenInRange(newState.doc, newRange, node => {
-                            return types.includes(node.type.name);
-                        });
-                        const newIds = newNodes
-                            .map(({ node }) => node.attrs[attributeName])
-                            .filter(id => id !== null);
-                        const duplicatedNewIds = findDuplicates(newIds);
-                        newNodes.forEach(({ node, pos }) => {
-                            var _a;
-                            // instead of checking `node.attrs[attributeName]` directly
-                            // we look at the current state of the node within `tr.doc`.
-                            // this helps to prevent adding new ids to the same node
-                            // if the node changed multiple times within one transaction
-                            const id = (_a = tr.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs[attributeName];
-                            if (id === null) {
-                                tr.setNodeMarkup(pos, undefined, {
-                                    ...node.attrs,
-                                    [attributeName]: generateID(),
-                                });
-                                return;
-                            }
-                            // check if the node doesn’t exist in the old state
-                            const { deleted } = mapping.invert().mapResult(pos);
-                            const newNode = deleted && duplicatedNewIds.includes(id);
-                            if (newNode) {
-                                tr.setNodeMarkup(pos, undefined, {
-                                    ...node.attrs,
-                                    [attributeName]: generateID(),
-                                });
-                            }
-                        });
-                    });
-                    if (!tr.steps.length) {
-                        return;
-                    }
-                    return tr;
-                },
-                // we register a global drag handler to track the current drag source element
-                view(view) {
-                    const handleDragstart = (event) => {
-                        var _a;
-                        dragSourceElement = ((_a = view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
-                            ? view.dom.parentElement
-                            : null;
-                    };
-                    window.addEventListener('dragstart', handleDragstart);
-                    return {
-                        destroy() {
-                            window.removeEventListener('dragstart', handleDragstart);
-                        },
-                    };
-                },
-                props: {
-                    // `handleDOMEvents` is called before `transformPasted`
-                    // so we can do some checks before
-                    handleDOMEvents: {
-                        // only create new ids for dropped content while holding `alt`
-                        // or content is dragged from another editor
-                        drop: (view, event) => {
-                            var _a;
-                            if (dragSourceElement !== view.dom.parentElement
-                                || ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.effectAllowed) === 'copy') {
-                                dragSourceElement = null;
-                                transformPasted = true;
-                            }
-                            return false;
-                        },
-                        // always create new ids on pasted content
-                        paste: () => {
-                            transformPasted = true;
-                            return false;
-                        },
-                    },
-                    // we’ll remove ids for every pasted node
-                    // so we can create a new one within `appendTransaction`
-                    transformPasted: slice => {
-                        if (!transformPasted) {
-                            return slice;
-                        }
-                        const { types, attributeName } = this.options;
-                        const removeId = (fragment) => {
-                            const list = [];
-                            fragment.forEach(node => {
-                                // don’t touch text nodes
-                                if (node.isText) {
-                                    list.push(node);
-                                    return;
-                                }
-                                // check for any other child nodes
-                                if (!types.includes(node.type.name)) {
-                                    list.push(node.copy(removeId(node.content)));
-                                    return;
-                                }
-                                // remove id
-                                const nodeWithoutId = node.type.create({
-                                    ...node.attrs,
-                                    [attributeName]: null,
-                                }, removeId(node.content), node.marks);
-                                list.push(nodeWithoutId);
-                            });
-                            return prosemirrorModel.Fragment.from(list);
-                        };
-                        // reset check
-                        transformPasted = false;
-                        return new prosemirrorModel.Slice(removeId(slice.content), slice.openStart, slice.openEnd);
-                    },
-                },
-            }),
-        ];
-    },
+const UniqueID = core.Extension.create({
+    name: 'uniqueID',
+    // we’ll set a very high priority to make sure this runs first
+    // and is compatible with `appendTransaction` hooks of other extensions
+    priority: 10000,
+    addOptions() {
+        return {
+            attributeName: 'id',
+            types: [],
+            generateID: () => uuid.v4(),
+            filterTransaction: null,
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    [this.options.attributeName]: {
+                        default: null,
+                        parseHTML: element => element.getAttribute(`data-${this.options.attributeName}`),
+                        renderHTML: attributes => {
+                            if (!attributes[this.options.attributeName]) {
+                                return {};
+                            }
+                            return {
+                                [`data-${this.options.attributeName}`]: attributes[this.options.attributeName],
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    // check initial content for missing ids
+    onCreate() {
+        const collab = this.editor.extensionManager.extensions.find(ext => ext.name === 'collaboration');
+        const provider = (collab === null || collab === void 0 ? void 0 : collab.options) ? collab.options.provider : undefined;
+        const createIds = () => {
+            const { view, state } = this.editor;
+            const { tr, doc } = state;
+            const { types, attributeName, generateID } = this.options;
+            const nodesWithoutId = core.findChildren(doc, node => {
+                return types.includes(node.type.name) && node.attrs[attributeName] === null;
+            });
+            nodesWithoutId.forEach(({ node, pos }) => {
+                tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    [attributeName]: generateID(),
+                });
+            });
+            tr.setMeta('addToHistory', false);
+            view.dispatch(tr);
+            if (provider) {
+                provider.off('synced', createIds);
+            }
+        };
+        /**
+         * We need to handle collaboration a bit different here
+         * because we can't automatically add IDs when the provider is not yet synced
+         * otherwise we end up with empty paragraphs
+         */
+        if (collab) {
+            if (!provider) {
+                return createIds();
+            }
+            provider.on('synced', createIds);
+        }
+        else {
+            return createIds();
+        }
+    },
+    addProseMirrorPlugins() {
+        let dragSourceElement = null;
+        let transformPasted = false;
+        return [
+            new state.Plugin({
+                key: new state.PluginKey('uniqueID'),
+                appendTransaction: (transactions, oldState, newState) => {
+                    const hasDocChanges = transactions.some(transaction => transaction.docChanged)
+                        && !oldState.doc.eq(newState.doc);
+                    const filterTransactions = this.options.filterTransaction
+                        && transactions.some(tr => { var _a, _b; return !((_b = (_a = this.options).filterTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, tr)); });
+                    const isCollabTransaction = transactions.find(tr => tr.getMeta('y-sync$'));
+                    if (isCollabTransaction) {
+                        return;
+                    }
+                    if (!hasDocChanges || filterTransactions) {
+                        return;
+                    }
+                    const { tr } = newState;
+                    const { types, attributeName, generateID } = this.options;
+                    const transform = core.combineTransactionSteps(oldState.doc, transactions);
+                    const { mapping } = transform;
+                    // get changed ranges based on the old state
+                    const changes = core.getChangedRanges(transform);
+                    changes.forEach(({ newRange }) => {
+                        const newNodes = core.findChildrenInRange(newState.doc, newRange, node => {
+                            return types.includes(node.type.name);
+                        });
+                        const newIds = newNodes
+                            .map(({ node }) => node.attrs[attributeName])
+                            .filter(id => id !== null);
+                        newNodes.forEach(({ node, pos }, i) => {
+                            var _a;
+                            // instead of checking `node.attrs[attributeName]` directly
+                            // we look at the current state of the node within `tr.doc`.
+                            // this helps to prevent adding new ids to the same node
+                            // if the node changed multiple times within one transaction
+                            const id = (_a = tr.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs[attributeName];
+                            if (id === null) {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    [attributeName]: generateID(),
+                                });
+                                return;
+                            }
+                            const nextNode = newNodes[i + 1];
+                            if (nextNode && node.content.size === 0) {
+                                tr.setNodeMarkup(nextNode.pos, undefined, {
+                                    ...nextNode.node.attrs,
+                                    [attributeName]: id,
+                                });
+                                newIds[i + 1] = id;
+                                if (nextNode.node.attrs[attributeName]) {
+                                    return;
+                                }
+                                const generatedId = generateID();
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    [attributeName]: generatedId,
+                                });
+                                newIds[i] = generatedId;
+                                return tr;
+                            }
+                            const duplicatedNewIds = findDuplicates(newIds);
+                            // check if the node doesn’t exist in the old state
+                            const { deleted } = mapping.invert().mapResult(pos);
+                            const newNode = deleted && duplicatedNewIds.includes(id);
+                            if (newNode) {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    [attributeName]: generateID(),
+                                });
+                            }
+                        });
+                    });
+                    if (!tr.steps.length) {
+                        return;
+                    }
+                    // `tr.setNodeMarkup` resets the stored marks
+                    // so we’ll restore them if they exist
+                    tr.setStoredMarks(newState.tr.storedMarks);
+                    return tr;
+                },
+                // we register a global drag handler to track the current drag source element
+                view(view) {
+                    const handleDragstart = (event) => {
+                        var _a;
+                        dragSourceElement = ((_a = view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+                            ? view.dom.parentElement
+                            : null;
+                    };
+                    window.addEventListener('dragstart', handleDragstart);
+                    return {
+                        destroy() {
+                            window.removeEventListener('dragstart', handleDragstart);
+                        },
+                    };
+                },
+                props: {
+                    // `handleDOMEvents` is called before `transformPasted`
+                    // so we can do some checks before
+                    handleDOMEvents: {
+                        // only create new ids for dropped content
+                        // or dropped content while holding `alt`
+                        // or content is dragged from another editor
+                        drop: (view, event) => {
+                            var _a, _b;
+                            if (dragSourceElement !== view.dom.parentElement
+                                || ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.effectAllowed) === 'copyMove'
+                                || ((_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.effectAllowed) === 'copy') {
+                                dragSourceElement = null;
+                                transformPasted = true;
+                            }
+                            return false;
+                        },
+                        // always create new ids on pasted content
+                        paste: () => {
+                            transformPasted = true;
+                            return false;
+                        },
+                    },
+                    // we’ll remove ids for every pasted node
+                    // so we can create a new one within `appendTransaction`
+                    transformPasted: slice => {
+                        if (!transformPasted) {
+                            return slice;
+                        }
+                        const { types, attributeName } = this.options;
+                        const removeId = (fragment) => {
+                            const list = [];
+                            fragment.forEach(node => {
+                                // don’t touch text nodes
+                                if (node.isText) {
+                                    list.push(node);
+                                    return;
+                                }
+                                // check for any other child nodes
+                                if (!types.includes(node.type.name)) {
+                                    list.push(node.copy(removeId(node.content)));
+                                    return;
+                                }
+                                // remove id
+                                const nodeWithoutId = node.type.create({
+                                    ...node.attrs,
+                                    [attributeName]: null,
+                                }, removeId(node.content), node.marks);
+                                list.push(nodeWithoutId);
+                            });
+                            return model.Fragment.from(list);
+                        };
+                        // reset check
+                        transformPasted = false;
+                        return new model.Slice(removeId(slice.content), slice.openStart, slice.openEnd);
+                    },
+                },
+            }),
+        ];
+    },
 });
 
 exports.UniqueID = UniqueID;
-exports["default"] = UniqueID;
-//# sourceMappingURL=tiptap-extension-unique-id.cjs.js.map
+exports.default = UniqueID;
+//# sourceMappingURL=index.cjs.map