edytor 0.0.6 → 0.0.8

package/dist/selection/selection.svelte.js

@@ -0,0 +1,391 @@
+import {} from 'yjs';
+import * as Y from 'yjs';
+import { Text } from '../text/text.svelte.js';
+import { climb, climbDom, getRangesFromSelection, getTextOfNode, getTextsInSelection, getYIndex } from './selection.utils.js';
+import { Block } from '../block/block.svelte.js';
+import { SvelteSet } from 'svelte/reactivity';
+import { tick } from 'svelte';
+import { InlineBlock } from '../block/inlineBlock.svelte.js';
+export class EdytorSelection {
+    edytorOnSelectionChange;
+    edytor;
+    focusedBlocks = new SvelteSet();
+    selectedBlocks = new SvelteSet();
+    hasSelectedAll = $state(false);
+    state = $state({
+        selection: null,
+        start: 0,
+        end: 0,
+        yStart: 0,
+        yEnd: 0,
+        length: 0,
+        content: '',
+        isCollapsed: true,
+        ranges: [],
+        texts: [],
+        blocks: [],
+        contentParts: [],
+        isAtStartOfBlock: false,
+        isAtEndOfBlock: false,
+        isAtStartOfText: false,
+        isAtEndOfText: false,
+        startNode: null,
+        endNode: null,
+        startText: null,
+        endText: null,
+        startBlock: null,
+        endBlock: null,
+        isTextSpanning: false,
+        isBlockSpanning: false,
+        isVoid: false,
+        isIsland: false,
+        islandRoot: null,
+        voidRoot: null,
+        relativePosition: null,
+        // TOREMOVE
+        yTextContent: ''
+    });
+    constructor(edytor, edytorOnSelectionChange) {
+        this.edytorOnSelectionChange = edytorOnSelectionChange;
+        this.edytor = edytor;
+    }
+    destroy = () => {
+        document?.removeEventListener('selectionchange', this.onSelectionChange);
+    };
+    getTextOfNode = getTextOfNode.bind(this);
+    getTextsInSelection = getTextsInSelection.bind(this);
+    init = () => {
+        this.edytor.undoManager.on('stack-item-added', (event) => {
+            event.stackItem.meta.set('cursor-location', {
+                id: this.state.startText?.id,
+                offset: this.state.yEnd
+            });
+        });
+        this.edytor.undoManager.on('stack-item-popped', (event) => {
+            const cursorLocation = event.stackItem.meta.get('cursor-location');
+            const text = this.edytor.getTextById(cursorLocation.id);
+            text && this.setAtTextOffset(text, cursorLocation.offset);
+        });
+        document?.addEventListener('selectionchange', this.onSelectionChange);
+    };
+    handleTripleClick = async (e) => {
+        if (e.detail < 3)
+            return;
+        await tick();
+        const { startText } = this.state;
+        startText && this.setAtTextRange(startText, 0, startText.yText.length);
+    };
+    shift = async (length) => {
+        this.state.yStart += length;
+        this.state.yEnd += length;
+        this.state.start += length;
+        this.state.end += length;
+        this.state.yTextContent = this.state.startText?.yText.toJSON();
+    };
+    onSelectionChange = () => {
+        const selection = window.getSelection();
+        if (!selection?.anchorNode || !this.edytor.container?.contains(selection.anchorNode)) {
+            return;
+        }
+        const { anchorNode, focusNode, anchorOffset, focusOffset, isCollapsed, direction, type } = selection;
+        const ranges = getRangesFromSelection(selection);
+        const isReversed = focusNode === anchorNode
+            ? focusOffset < anchorOffset
+            : focusNode
+                ? anchorNode.compareDocumentPosition(focusNode) === Node.DOCUMENT_POSITION_PRECEDING
+                : false;
+        const content = selection?.toString() || '';
+        const startNode = isReversed ? focusNode : anchorNode;
+        const endNode = isReversed ? anchorNode : focusNode;
+        const start = isReversed ? focusOffset : anchorOffset;
+        const end = isReversed ? anchorOffset : focusOffset;
+        const { startText, endText, texts } = this.getTextsInSelection(startNode, endNode, ranges);
+        this.selectBlocks();
+        this.focusBlocks(...texts.map((text) => text.parent));
+        let yStart = getYIndex(startText, startNode, start);
+        let yEnd = isCollapsed ? yStart : getYIndex(endText, endNode, end);
+        if (startText?.parent.isEmpty && yStart > startText.length) {
+            // In case the placeholder or suggestion is not absolutely positioned, we need to set the selection to the start of the text because caret may be placed after the placeholder which is deceptive
+            return this.setAtTextOffset(startText, startText.length);
+        }
+        let isIsland = false;
+        let islandRoot = null;
+        climb(startText?.parent, (block) => {
+            if (block instanceof Block && block.definition.island) {
+                isIsland = true;
+                islandRoot = block;
+                return true;
+            }
+        });
+        let isVoid = false;
+        let voidRoot = null;
+        climb(startText?.parent, (block) => {
+            if (block instanceof Block && block.definition.void) {
+                isVoid = true;
+                voidRoot = block;
+                return true;
+            }
+        });
+        if (!isVoid) {
+            climbDom(startNode, (node) => {
+                if (node instanceof HTMLElement && node.dataset.edytorBlock && node.dataset.edytorVoid) {
+                    const id = node.dataset.edytorId;
+                    const block = id && this.edytor.idToBlock.get(id);
+                    if (block) {
+                        isVoid = true;
+                        voidRoot = block;
+                        return true;
+                    }
+                }
+            });
+        }
+        const isAtStartOfText = yStart === 0;
+        const isAtEndOfText = yEnd === endText?.yText.length;
+        const isAtStartOfBlock = (startText && startText === startText.parent.firstText && isAtStartOfText) || false;
+        const isAtEndOfBlock = (endText && endText === endText.parent.lastText && isAtEndOfText) || false;
+        const startBlock = startText?.parent || null;
+        const endBlock = endText?.parent || null;
+        const { startBlock: previousStartBlock, endBlock: previousEndBlock } = this.state;
+        if ((previousStartBlock !== startBlock || previousEndBlock !== endBlock) &&
+            [previousStartBlock, previousEndBlock].some((block) => block?.suggestions)) {
+            [previousStartBlock, previousEndBlock].forEach((block) => {
+                if (block?.suggestions) {
+                    block.suggestions = null;
+                }
+            });
+        }
+        const isTextSpanning = startText !== endText;
+        const isBlockSpanning = startBlock !== endBlock;
+        const blocks = startBlock ? [startBlock] : [];
+        let currentBlock = startBlock;
+        // Collect all blocks between the start and end blocks
+        while (currentBlock && currentBlock !== endBlock) {
+            const nextBlock = currentBlock.closestNextBlock;
+            currentBlock = nextBlock;
+            if (nextBlock) {
+                blocks.push(nextBlock);
+            }
+        }
+        // Flatten the blocks into a single array of content parts
+        let allContentParts = blocks.flatMap((block) => block.content);
+        let contentParts = [];
+        let currentPart = startText;
+        let i = 0;
+        while (currentPart && currentPart !== endText) {
+            contentParts.push(currentPart);
+            currentPart = allContentParts[i + 1] || null;
+            i++;
+        }
+        if (endText) {
+            contentParts.push(endText);
+        }
+        this.state = {
+            selection,
+            start,
+            end,
+            yStart,
+            yEnd,
+            length: content.length,
+            content,
+            isCollapsed,
+            ranges,
+            texts: contentParts.filter((part) => part instanceof Text),
+            contentParts,
+            blocks,
+            isBlockSpanning,
+            startText,
+            endText,
+            isAtStartOfText,
+            isAtEndOfText,
+            isAtEndOfBlock,
+            isAtStartOfBlock,
+            isTextSpanning,
+            startNode,
+            endNode,
+            startBlock,
+            endBlock,
+            isVoid,
+            isIsland,
+            islandRoot,
+            voidRoot,
+            relativePosition: startText
+                ? Y.createRelativePositionFromTypeIndex(startText.yText, yStart, -1)
+                : null,
+            // TOREMOVE
+            yTextContent: startText?.yText.toJSON()
+        };
+        this.edytorOnSelectionChange?.(this);
+        this.edytor.plugins.forEach((plugin) => {
+            plugin.onSelectionChange?.(this);
+        });
+    };
+    restoreRelativePosition = (text) => {
+        if (text !== this.state.startText || !this.state.relativePosition) {
+            return;
+        }
+        const absolutePosition = Y.createAbsolutePositionFromRelativePosition(this.state.relativePosition, this.edytor.doc);
+        if (!absolutePosition) {
+            return;
+        }
+        this.setAtTextOffset(text, absolutePosition?.index);
+    };
+    selectBlocks = (...blocks) => {
+        const difference = this.selectedBlocks.difference(new Set(blocks));
+        difference.forEach((block) => {
+            this.selectedBlocks.delete(block);
+            block.definition.onBlur?.({ block });
+            block.node?.removeAttribute('data-edytor-selected');
+        });
+        blocks.forEach((block) => {
+            this.selectedBlocks.add(block);
+            block.definition.onSelect?.({ block });
+            block.node?.setAttribute('data-edytor-selected', 'true');
+        });
+        if (blocks.length === 1) {
+            this.focusBlocks();
+        }
+    };
+    focusBlocks = (...blocks) => {
+        const difference = this.focusedBlocks.difference(new Set(blocks));
+        difference.forEach((block) => {
+            this.focusedBlocks.delete(block);
+            block.definition.onBlur?.({ block });
+            block.node?.removeAttribute('data-edytor-focused');
+        });
+        blocks.forEach((block) => {
+            this.focusedBlocks.add(block);
+            block.definition.onFocus?.({ block });
+            block.node?.setAttribute('data-edytor-focused', 'true');
+        });
+    };
+    findTextNode = (node, offset = 0) => {
+        let nodeOffset = 0;
+        const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            return NodeFilter.FILTER_SKIP;
+        });
+        let currentNode = treeWalker.nextNode();
+        let textNode = null;
+        let currentOffset = 0;
+        while (currentNode) {
+            const endOffset = currentOffset + currentNode.length;
+            if (offset >= currentOffset && offset <= endOffset) {
+                textNode = currentNode;
+                nodeOffset = offset - currentOffset;
+                break;
+            }
+            currentOffset = endOffset;
+            currentNode = treeWalker.nextNode();
+        }
+        return [textNode, nodeOffset];
+    };
+    setAtTextOffset = async (textOrId, textOffset = this.state.yStart) => {
+        if (!textOrId || typeof textOffset !== 'number') {
+            return;
+        }
+        const node = await this.edytor.getTextNode(textOrId);
+        const [textNode, nodeOffset] = this.findTextNode(node, textOffset);
+        if (textNode) {
+            this.setAtNodeOffset(textNode, nodeOffset);
+        }
+    };
+    setAtTextsRange = async (startText, endText) => {
+        if (!startText.node || !endText.node) {
+            return;
+        }
+        const [startTextNode, startNodeOffset] = this.findTextNode(startText.node, 0);
+        const [endTextNode, endNodeOffset] = this.findTextNode(endText.node, endText.yText.length);
+        if (startTextNode && endTextNode) {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.setStart(startTextNode, startNodeOffset);
+            range.setEnd(endTextNode, endNodeOffset);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+            startTextNode.parentElement?.focus();
+        }
+    };
+    setAtBlockRange = async (block, startOffset, endOffset) => {
+        if (!block) {
+            return;
+        }
+        if (!startOffset) {
+            startOffset = 0;
+        }
+        if (!endOffset) {
+            endOffset = block.lastText.length;
+        }
+        const startNode = await this.edytor.getTextNode(block.firstText);
+        const [startTextNode, startNodeOffset] = this.findTextNode(startNode, startOffset);
+        const endNode = await this.edytor.getTextNode(block.lastText);
+        const [endTextNode, endNodeOffset] = this.findTextNode(endNode, endOffset);
+        if (startTextNode && endTextNode) {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.setStart(startTextNode, startNodeOffset);
+            range.setEnd(endTextNode, endNodeOffset);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+            // this.edytor.node!.focus();
+            startTextNode.parentElement?.focus();
+        }
+    };
+    setAtTextRange = async (text, start, end) => {
+        if (!text || typeof start !== 'number' || typeof end !== 'number') {
+            return;
+        }
+        const node = await this.edytor.getTextNode(text);
+        let startNode = null;
+        let startOffset = 0;
+        let endNode = null;
+        let endOffset = 0;
+        const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            return NodeFilter.FILTER_SKIP;
+        });
+        let currentNode = treeWalker.nextNode();
+        let currentOffset = 0;
+        while (currentNode) {
+            const nodeLength = currentNode.textContent?.length || 0;
+            const endPosition = currentOffset + nodeLength;
+            // Find start position
+            if (!startNode && start >= currentOffset && start <= endPosition) {
+                startNode = currentNode;
+                startOffset = start - currentOffset;
+            }
+            // Find end position
+            if (!endNode && end >= currentOffset && end <= endPosition) {
+                endNode = currentNode;
+                endOffset = end - currentOffset;
+            }
+            if (startNode && endNode) {
+                break;
+            }
+            currentOffset = endPosition;
+            currentNode = treeWalker.nextNode();
+        }
+        if (startNode && endNode) {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.setStart(startNode, startOffset);
+            range.setEnd(endNode, endOffset);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+            // this.edytor.node!.focus();
+            startNode.parentElement?.focus();
+        }
+    };
+    setAtNodeOffset = (node, offset) => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(node, offset);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        this.onSelectionChange();
+    };
+}

package/dist/selection/selection.utils.d.ts

@@ -0,0 +1,14 @@
+import { EdytorSelection } from './selection.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import { Block } from '../block/block.svelte.js';
+import { Edytor } from '../edytor.svelte.js';
+export declare function getTextOfNode(this: EdytorSelection, node: Node | null): Text | null;
+export declare function getTextsInSelection(this: EdytorSelection, startNode: Node | null, endNode: Node | null, ranges: Range[]): {
+    startText: Text | null;
+    endText: Text | null;
+    texts: Text[];
+};
+export declare const getYIndex: (text: Text | null, node: Node | null, _start: number) => number;
+export declare const getRangesFromSelection: (selection: Selection) => Range[];
+export declare const climb: (block: Block | Edytor | undefined, cb: (block: Block) => void | true) => void;
+export declare const climbDom: (node: Node | undefined | null, cb: (node: Node) => void | true) => void;

package/dist/selection/selection.utils.js

@@ -0,0 +1,153 @@
+import { EdytorSelection } from './selection.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import { Block } from '../block/block.svelte.js';
+import { Edytor } from '../edytor.svelte.js';
+export function getTextOfNode(node) {
+    if (!node)
+        return null;
+    // If the node is not a text node, we need to find the closest text node
+    let text = null;
+    let currentNode = node;
+    if (node.nodeType !== Node.TEXT_NODE) {
+        const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, (node) => {
+            if (node instanceof HTMLSpanElement && node.hasAttribute('data-edytor-text')) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            return NodeFilter.FILTER_SKIP;
+        });
+        currentNode = treeWalker.nextNode();
+        text = this.edytor.nodeToText.get(currentNode) || null;
+        while (currentNode && !text) {
+            currentNode = treeWalker.nextNode();
+            text = this.edytor.nodeToText.get(currentNode) || null;
+        }
+    }
+    else {
+        while (currentNode.parentElement && !text) {
+            text = this.edytor.nodeToText.get(currentNode) || null;
+            currentNode = currentNode.parentElement;
+        }
+        // Maybe a weird behavior in firefox that force us to do that.
+        // Didn't explore much as it seems to work.
+        if (!text) {
+            currentNode = node;
+            // try with previousSibling
+            while (currentNode.previousSibling && !text) {
+                text = this.edytor.nodeToText.get(currentNode) || null;
+                currentNode = currentNode.previousSibling;
+            }
+        }
+    }
+    return text;
+}
+export function getTextsInSelection(startNode, endNode, ranges) {
+    const startText = this.getTextOfNode(startNode);
+    const endText = this.getTextOfNode(endNode);
+    if (!startText) {
+        return {
+            startText: null,
+            endText: null,
+            texts: []
+        };
+    }
+    const edytor = this.edytor;
+    const isAfterFirstText = (node) => {
+        return node.compareDocumentPosition(startText.node) === Node.DOCUMENT_POSITION_FOLLOWING;
+    };
+    const isBeforeLastText = (node) => {
+        return (node.compareDocumentPosition(endText?.node || startText.node) ===
+            Node.DOCUMENT_POSITION_PRECEDING);
+    };
+    const texts = new Set();
+    // Create a TreeWalker to traverse nodes within the range
+    const walker = document.createTreeWalker(ranges[0].commonAncestorContainer, NodeFilter.SHOW_ELEMENT, // Only consider element nodes
+    (node) => {
+        return node === startText.node ||
+            node === endText?.node ||
+            (node instanceof HTMLSpanElement &&
+                node.hasAttribute('data-edytor-text') &&
+                isAfterFirstText(node) &&
+                isBeforeLastText(node))
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_SKIP;
+    });
+    ranges.forEach((range) => {
+        const isNodeInRange = (node) => {
+            const nodeRange = document.createRange();
+            try {
+                nodeRange.selectNode(node);
+            }
+            catch (e) {
+                // If the node cannot be selected, it's not a valid target
+                return false;
+            }
+            // Check if the start or end of the node range intersects with the original range
+            return (range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0 &&
+                range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0);
+        };
+        // Start traversing the nodes within the range
+        while (walker.nextNode()) {
+            // If the current node is within the range, add it to the spans array
+            if (isNodeInRange(walker.currentNode)) {
+                texts.add(edytor.nodeToText.get(walker.currentNode));
+            }
+        }
+    });
+    if (!texts.size) {
+        texts.add(startText);
+        if (endText && endText.node !== startText.node) {
+            texts.add(endText);
+        }
+    }
+    return {
+        startText,
+        endText,
+        texts: Array.from(texts)
+    };
+}
+export const getYIndex = (text, node, _start) => {
+    if (!text || !node)
+        return _start;
+    const parent = text.node;
+    const { isEmpty } = text;
+    const treeWalker = document.createTreeWalker(parent, NodeFilter.SHOW_TEXT, (child) => {
+        return child.textContent &&
+            child.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_FOLLOWING
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_SKIP;
+    });
+    let start = _start;
+    while (treeWalker.nextNode()) {
+        const child = treeWalker.currentNode;
+        if (child.textContent) {
+            start += child.textContent.length;
+        }
+    }
+    if ((start === 0 || start === 1) && isEmpty) {
+        return 0;
+    }
+    return start;
+};
+export const getRangesFromSelection = (selection) => {
+    return Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i));
+};
+export const climb = (block, cb) => {
+    if (!block)
+        return;
+    let parent = block;
+    while (parent && parent instanceof Block) {
+        if (cb(parent))
+            break;
+        parent = parent.parent;
+    }
+};
+export const climbDom = (node, cb) => {
+    if (!node)
+        return;
+    let parent = node;
+    while (parent) {
+        if (cb(parent))
+            break;
+        parent = parent.parentElement;
+    }
+};

package/dist/text/deltas.d.ts

@@ -0,0 +1,11 @@
+import * as Y from 'yjs';
+import type { JSONText, SerializableContent } from '../utils/json.ts';
+export type Mark = [string, SerializableContent];
+export type JSONDelta = {
+    text: string;
+    marks: Mark[];
+    id: string;
+};
+export declare const jsonToDelta: (text: JSONText[]) => JSONDelta[];
+export declare const deltaToJson: (delta: JSONDelta[]) => JSONText[];
+export declare const toDeltas: (text: Y.Text) => readonly [JSONDelta[], true];

package/dist/text/deltas.js

@@ -0,0 +1,109 @@
+// This is an adaptation of the toDeltas function of the yjs library that better suits our needs
+import * as Y from 'yjs';
+export const jsonToDelta = (text) => {
+    return text.map((t) => ({
+        text: t.text,
+        marks: Object.entries(t.marks || {}),
+        id: crypto.randomUUID()
+    }));
+};
+export const deltaToJson = (delta) => {
+    return delta.map((d) => {
+        const result = {
+            text: d.text,
+            marks: Object.fromEntries(d.marks)
+        };
+        if (d.marks.length === 0) {
+            delete result.marks;
+        }
+        return result;
+    });
+};
+const createDelta = (text, attributes) => {
+    const size = attributes.size;
+    if (size === 0) {
+        return { text, marks: [], id: crypto.randomUUID() };
+    }
+    const marks = new Array(size);
+    let i = 0;
+    attributes.forEach((value, key) => {
+        marks[i++] = [key, value];
+    });
+    return { text, marks, id: crypto.randomUUID() };
+};
+const areMarksEqual = (marks1, marks2) => {
+    if (marks1.size !== marks2.size)
+        return false;
+    for (const [key, value] of marks1) {
+        if (!marks2.has(key) || marks2.get(key) !== value)
+            return false;
+    }
+    return true;
+};
+export const toDeltas = (text) => {
+    const result = [];
+    if (!text) {
+        return [result, true];
+    }
+    const currentAttributes = new Map();
+    let currentString = '';
+    let n = text._start;
+    let isEmpty = true;
+    const flushString = () => {
+        if (currentString) {
+            const newDelta = createDelta(currentString, currentAttributes);
+            // Check if we can merge with the previous delta
+            const lastDelta = result[result.length - 1];
+            if (lastDelta && lastDelta.marks.length === newDelta.marks.length) {
+                const lastDeltaMarks = new Map(lastDelta.marks);
+                const newDeltaMarks = new Map(newDelta.marks);
+                if (areMarksEqual(lastDeltaMarks, newDeltaMarks)) {
+                    // Merge the text with the previous delta
+                    lastDelta.text += currentString;
+                }
+                else {
+                    result.push(newDelta);
+                }
+            }
+            else {
+                result.push(newDelta);
+            }
+            currentString = '';
+            isEmpty = false;
+        }
+    };
+    while (n) {
+        if (!n.deleted) {
+            const content = n.content;
+            const contentType = content.constructor;
+            if (contentType === Y.ContentString) {
+                // Check ychange first to minimize map lookups
+                if (currentAttributes.has('ychange')) {
+                    flushString();
+                    currentAttributes.delete('ychange');
+                }
+                currentString += content.str;
+            }
+            else if (contentType === Y.ContentType || contentType === Y.ContentEmbed) {
+                flushString();
+                result.push(createDelta(String(content.getContent()[0]), currentAttributes));
+            }
+            else if (contentType === Y.ContentFormat) {
+                if (!n.deleted) {
+                    flushString();
+                    const format = content;
+                    const { key, value } = format;
+                    if (value === null) {
+                        currentAttributes.delete(key);
+                    }
+                    else {
+                        currentAttributes.set(key, value);
+                    }
+                }
+            }
+        }
+        n = n.right;
+    }
+    flushString();
+    return [result, isEmpty];
+};