@tiptap/extension-unique-id 2.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 2.0.0-beta.1 (2021-09-14)
+
+**Note:** Version bump only for package @tiptap/extension-unique-id

package/dist/demos/setup/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function splitName(name: string): string[];
+export declare function debug(): void;

package/dist/demos/setup/react.d.ts

@@ -0,0 +1,3 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow';
+import './style.scss';
+export default function init(name: string, source: any): void;

package/dist/demos/setup/vue.d.ts

@@ -0,0 +1,3 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow';
+import './style.scss';
+export default function init(name: string, source: any): void;

package/dist/demos/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/dist/packages/extension-drag-handle/src/drag-handle.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from '@tiptap/core';
+import { Props } from 'tippy.js';
+export interface DragHandleOptions {
+    /**
+     * Renders an element that is positioned with tippy.js
+     */
+    render(): HTMLElement;
+    /**
+     * Options for tippy.js
+     */
+    tippyOptions?: Partial<Props>;
+}
+export declare const DragHandle: Extension<DragHandleOptions>;

package/dist/packages/extension-drag-handle/src/helpers/cloneElement.d.ts

@@ -0,0 +1 @@
+export declare function cloneElement(node: HTMLElement): HTMLElement;

package/dist/packages/extension-drag-handle/src/helpers/dragHandler.d.ts

@@ -0,0 +1,2 @@
+import { EditorView } from 'prosemirror-view';
+export declare function dragHandler(event: DragEvent, view: EditorView): void;

package/dist/packages/extension-drag-handle/src/helpers/getComputedStyle.d.ts

@@ -0,0 +1 @@
+export declare function getComputedStyle(node: Element, property: keyof CSSStyleDeclaration): any;

package/dist/packages/extension-drag-handle/src/helpers/getInnerCoords.d.ts

@@ -0,0 +1,5 @@
+import { EditorView } from 'prosemirror-view';
+export declare function getInnerCoords(view: EditorView, x: number, y: number): {
+    left: number;
+    top: number;
+};

package/dist/packages/extension-drag-handle/src/helpers/minMax.d.ts

@@ -0,0 +1 @@
+export declare function minMax(value?: number, min?: number, max?: number): number;

package/dist/packages/extension-drag-handle/src/helpers/removeNode.d.ts

@@ -0,0 +1 @@
+export declare function removeNode(node: HTMLElement): void;

package/dist/packages/extension-drag-handle/src/index.d.ts

@@ -0,0 +1,3 @@
+import { DragHandle } from './drag-handle';
+export * from './drag-handle';
+export default DragHandle;

package/dist/packages/extension-node-range/src/helpers/NodeRangeBookmark.d.ts

@@ -0,0 +1,10 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model';
+import { Mapping } from 'prosemirror-transform';
+import { NodeRangeSelection } from './NodeRangeSelection';
+export declare class NodeRangeBookmark {
+    anchor: number;
+    head: number;
+    constructor(anchor: number, head: number);
+    map(mapping: Mapping): NodeRangeBookmark;
+    resolve(doc: ProseMirrorNode): NodeRangeSelection;
+}

package/dist/packages/extension-node-range/src/helpers/NodeRangeSelection.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from 'prosemirror-state';
+import { ResolvedPos, Node as ProseMirrorNode } from 'prosemirror-model';
+import { Mapping } from 'prosemirror-transform';
+import { NodeRangeBookmark } from './NodeRangeBookmark';
+export declare class NodeRangeSelection extends Selection {
+    depth: number | undefined;
+    constructor($anchor: ResolvedPos, $head: ResolvedPos, depth?: number, bias?: number);
+    get $to(): ResolvedPos<any>;
+    eq(other: Selection): boolean;
+    map(doc: ProseMirrorNode, mapping: Mapping): NodeRangeSelection;
+    toJSON(): {
+        type: string;
+        anchor: number;
+        head: number;
+    };
+    get isForwards(): boolean;
+    get isBackwards(): boolean;
+    extendBackwards(): NodeRangeSelection;
+    extendForwards(): NodeRangeSelection;
+    static fromJSON(doc: ProseMirrorNode, json: any): NodeRangeSelection;
+    static create(doc: ProseMirrorNode, anchor: number, head: number, depth?: number, bias?: number): NodeRangeSelection;
+    getBookmark(): NodeRangeBookmark;
+}

package/dist/packages/extension-node-range/src/helpers/getNodeRangeDecorations.d.ts

@@ -0,0 +1,3 @@
+import { SelectionRange } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+export declare function getNodeRangeDecorations(ranges: SelectionRange[]): DecorationSet;

package/dist/packages/extension-node-range/src/helpers/getSelectionRanges.d.ts

@@ -0,0 +1,3 @@
+import { SelectionRange } from 'prosemirror-state';
+import { ResolvedPos } from 'prosemirror-model';
+export declare function getSelectionRanges($from: ResolvedPos, $to: ResolvedPos, depth?: number): SelectionRange[];

package/dist/packages/extension-node-range/src/helpers/isNodeRangeSelection.d.ts

@@ -0,0 +1,2 @@
+import { NodeRangeSelection } from './NodeRangeSelection';
+export declare function isNodeRangeSelection(value: unknown): value is NodeRangeSelection;

package/dist/packages/extension-node-range/src/index.d.ts

@@ -0,0 +1,7 @@
+import { NodeRange } from './node-range';
+export * from './node-range';
+export * from './helpers/getNodeRangeDecorations';
+export * from './helpers/isNodeRangeSelection';
+export * from './helpers/NodeRangeSelection';
+export * from './helpers/getSelectionRanges';
+export default NodeRange;

package/dist/packages/extension-node-range/src/node-range.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from '@tiptap/core';
+export interface NodeRangeOptions {
+    depth: number | undefined;
+    key: 'Shift' | 'Control' | 'Alt' | 'Meta' | 'Mod' | null | undefined;
+}
+export declare const NodeRange: Extension<NodeRangeOptions>;

package/dist/packages/extension-unique-id/src/helpers/arrayDifference.d.ts

@@ -0,0 +1,9 @@
+export interface ArrayDifference {
+    added: any[];
+    removed: any[];
+    common: any[];
+}
+/**
+ * Checks for added, removed and common items between two arrays.
+ */
+export default function arrayDifference(array1: any[], array2: any[]): ArrayDifference;

package/dist/packages/extension-unique-id/src/helpers/combineTransactionSteps.d.ts

@@ -0,0 +1,7 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+/**
+ * Returns a new `Transform` based on all steps of the passed transactions.
+ */
+export default function combineTransactionSteps(oldDoc: ProseMirrorNode, transactions: Transaction[]): Transform;

package/dist/packages/extension-unique-id/src/helpers/findDuplicates.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a list of duplicated items within an array.
+ */
+export default function findDuplicates(items: any[]): any[];

package/dist/packages/extension-unique-id/src/helpers/getChangedRanges.d.ts

@@ -0,0 +1,12 @@
+import { Transform } from 'prosemirror-transform';
+export declare type ChangedRange = {
+    oldStart: number;
+    oldEnd: number;
+    newStart: number;
+    newEnd: number;
+};
+/**
+ * Returns a list of changed ranges
+ * based on the first and last state of all steps.
+ */
+export default function getChangedRanges(transform: Transform): ChangedRange[];

package/dist/packages/extension-unique-id/src/helpers/removeDuplicates.d.ts

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

package/dist/packages/extension-unique-id/src/index.d.ts

@@ -0,0 +1,3 @@
+import { UniqueId } from './unique-id';
+export * from './unique-id';
+export default UniqueId;

package/dist/packages/extension-unique-id/src/unique-id.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from '@tiptap/core';
+import { Transaction } from 'prosemirror-state';
+export interface UniqueIdOptions {
+    attributeName: string;
+    types: string[];
+    generateId: () => any;
+    filterTransaction: ((transaction: Transaction) => boolean) | null;
+}
+export declare const UniqueId: Extension<UniqueIdOptions>;

package/dist/tiptap-extension-unique-id.cjs.js

@@ -0,0 +1,291 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@tiptap/core');
+var prosemirrorState = require('prosemirror-state');
+var prosemirrorModel = require('prosemirror-model');
+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 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 => !this.options.filterTransaction?.(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 }) => {
+                            // 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 = tr.doc.nodeAt(pos)?.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) => {
+                        dragSourceElement = view.dom.parentElement?.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) => {
+                            if (dragSourceElement !== view.dom.parentElement
+                                || event.dataTransfer?.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);
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+exports.UniqueId = UniqueId;
+exports['default'] = UniqueId;
+//# sourceMappingURL=tiptap-extension-unique-id.cjs.js.map