edytor 0.0.7 → 0.0.9

package/dist/dnd.svelte.js

@@ -0,0 +1,125 @@
+import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash';
+import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+export class DnD {
+    state = {
+        source: null,
+        target: null,
+        position: null
+    };
+    options;
+    uniqueContextId = Symbol('dnd-context');
+    constructor(options = {}) {
+        this.options = options;
+    }
+    calculateDropPosition(element, mouseY) {
+        const rect = element.getBoundingClientRect();
+        const relativeY = mouseY - rect.top;
+        if (relativeY < rect.height * 0.25) {
+            return 'before';
+        }
+        else if (relativeY > rect.height * 0.75) {
+            return 'after';
+        }
+        return 'inside';
+    }
+    updateDropIndicator(element, position) {
+        // Remove existing indicators
+        document.querySelectorAll('.drop-indicator').forEach((el) => {
+            if (el instanceof HTMLElement) {
+                el.remove();
+            }
+        });
+        const indicator = document.createElement('div');
+        indicator.className = 'drop-indicator';
+        switch (position) {
+            case 'before':
+                indicator.style.cssText = `
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: -2px;
+          height: 4px;
+          background: #0066ff;
+        `;
+                break;
+            case 'after':
+                indicator.style.cssText = `
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -2px;
+          height: 4px;
+          background: #0066ff;
+        `;
+                break;
+            case 'inside':
+                indicator.style.cssText = `
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          border: 2px solid #0066ff;
+          pointer-events: none;
+        `;
+                break;
+        }
+        element.appendChild(indicator);
+    }
+    // Svelte action that handles both dragging and dropping
+    attach = (element, block) => {
+        // Make element draggable
+        element.draggable = true;
+        const cleanup = combine(monitorForElements({
+            canMonitor: (args) => {
+                const data = args.source.data;
+                return data.uniqueContextId === this.uniqueContextId;
+            },
+            onDragStart: (args) => {
+                this.state.source = block;
+                args.source.data = {
+                    uniqueContextId: this.uniqueContextId,
+                    id: block.id,
+                    type: 'block',
+                    block
+                };
+            },
+            onDrop: (args) => {
+                // didn't drop on anything
+                if (!args.location.current.dropTargets.length) {
+                    return;
+                }
+                const target = args.location.current.dropTargets[0];
+                const targetData = target.data;
+                const targetBlock = targetData.block;
+                const position = this.calculateDropPosition(target.element, args.location.current.input.clientY);
+                // Check if drop is allowed
+                if (this.options.canDrop && !this.options.canDrop(this.state.source, targetBlock)) {
+                    return;
+                }
+                this.options.onDrop?.(this.state.source, targetBlock, position);
+                triggerPostMoveFlash(target.element);
+                liveRegion.announce(`Moved ${block.type} ${position} ${targetBlock.type}`);
+                // Reset state
+                this.state = {
+                    source: null,
+                    target: null,
+                    position: null
+                };
+            }
+        }));
+        return {
+            destroy() {
+                cleanup();
+                document.querySelectorAll('.drop-indicator').forEach((el) => {
+                    if (el instanceof HTMLElement) {
+                        el.remove();
+                    }
+                });
+            }
+        };
+    };
+}

package/dist/edytor.svelte.d.ts

@@ -0,0 +1,94 @@
+import { type Snippet } from 'svelte';
+import * as Y from 'yjs';
+import { type JSONBlock, type JSONDoc, type YBlock, type SerializableContent } from './utils/json.js';
+import { EdytorSelection } from './selection/selection.svelte.js';
+import { Block } from './block/block.svelte.js';
+import { Text } from './text/text.svelte.js';
+import { SvelteMap } from 'svelte/reactivity';
+import { Awareness } from 'y-protocols/awareness.js';
+import { batch } from './block/block.utils.js';
+import type { Plugin, InitializedPlugin, BlockDefinition, MarkDefinition, InlineBlockDefinition } from './plugins.js';
+import { HotKeys, type HotKey } from './hotkeys.js';
+import { TRANSACTION } from './constants.js';
+import type { InlineBlock } from './block/inlineBlock.svelte.js';
+export type Snippets = {
+    [K in `${string}Block` | `${string}Mark`]: K extends `${string}Block` ? Snippet<[
+        {
+            block: Block;
+            children: Snippet | null;
+            content: Snippet;
+        }
+    ]> : Snippet<[
+        {
+            mark: SerializableContent;
+            text: Text;
+            content: Snippet;
+        }
+    ]>;
+};
+export type EdytorOptions = {
+    readonly?: boolean;
+    snippets?: Snippets;
+    hotKeys?: Record<string, HotKey>;
+    plugins?: Plugin[];
+    doc?: Y.Doc;
+    awareness?: Awareness;
+    sync?: boolean;
+    value?: JSONDoc;
+    onChange?: (value: JSONBlock) => void;
+    onSelectionChange?: (selection: EdytorSelection) => void;
+    placeholder?: string | Snippet<[{
+        block: Block;
+    }]>;
+};
+export type RootBlock = Block & {
+    readonly type: 'root';
+    readonly id: 'root';
+    readonly depth: 0;
+};
+export declare class Edytor {
+    node?: HTMLElement;
+    marks: Map<string, MarkDefinition>;
+    blocks: Map<string, BlockDefinition>;
+    inlineBlocks: Map<string, InlineBlockDefinition>;
+    plugins: InitializedPlugin[];
+    container: HTMLDivElement | undefined;
+    idToBlock: SvelteMap<string, Block>;
+    idToInlineBlock: SvelteMap<string, InlineBlock>;
+    idToText: SvelteMap<string, Text>;
+    nodeToText: SvelteMap<Node, Text>;
+    transaction: TRANSACTION;
+    hotKeys: HotKeys;
+    initialized: boolean;
+    readonly: boolean;
+    yRootBlock: YBlock;
+    root: Block | undefined;
+    synced: boolean;
+    edytor: this;
+    selection: EdytorSelection;
+    defaultType: string;
+    private off;
+    private onChange?;
+    placeholder?: string | Snippet<[{
+        block: Block;
+    }]>;
+    doc: Y.Doc;
+    undoManager: Y.UndoManager;
+    awareness: Awareness;
+    transact: <T>(cb: () => T) => T;
+    constructor({ snippets, readonly, hotKeys, plugins, doc, awareness, sync, value, onSelectionChange, placeholder, onChange }: EdytorOptions);
+    getBlockDefinition: <M extends "inline" | "block">(mode: M, type: string) => M extends "block" ? BlockDefinition : InlineBlockDefinition;
+    get value(): JSONBlock;
+    getDefaultBlock: (parent?: Block | Edytor | undefined) => string;
+    sync: ({ children }?: JSONDoc) => void;
+    onBeforeInput: (e: InputEvent) => Promise<void>;
+    batch: typeof batch;
+    deleteContentWithinSelection: (args_0: {}) => readonly [Text | null, number];
+    getTextById: (id: string) => Text | undefined;
+    getBlockByIdOrContent: (idOrContent: string | Text) => Block | undefined;
+    getTextNode: (idOrText: string | Text) => Promise<HTMLElement>;
+    attach: (node: HTMLDivElement) => {
+        destroy: () => void;
+    };
+}
+export declare const useEdytor: () => Edytor;

package/dist/edytor.svelte.js

@@ -0,0 +1,262 @@
+import { getContext, hasContext, setContext, tick, onMount } from 'svelte';
+import * as Y from 'yjs';
+import { onBeforeInput } from './events/onBeforeInput.js';
+import {} from './utils/json.js';
+import { onKeyDown } from './events/onKeyDown.js';
+import { EdytorSelection } from './selection/selection.svelte.js';
+import { Block } from './block/block.svelte.js';
+import { Text } from './text/text.svelte.js';
+import { SvelteMap } from 'svelte/reactivity';
+import { Awareness } from 'y-protocols/awareness.js';
+import { batch } from './block/block.utils.js';
+import { on } from 'svelte/events';
+import { HotKeys } from './hotkeys.js';
+import { TRANSACTION } from './constants.js';
+import { deleteContentWithinSelection } from './edytor.utils.js';
+export class Edytor {
+    node;
+    marks = new Map();
+    blocks = new Map();
+    inlineBlocks = new Map();
+    plugins;
+    container = $state();
+    idToBlock = new SvelteMap();
+    idToInlineBlock = new SvelteMap();
+    idToText = new SvelteMap();
+    nodeToText = new SvelteMap();
+    transaction = new TRANSACTION();
+    hotKeys;
+    initialized = $state(false);
+    readonly = $state(false);
+    yRootBlock;
+    root = $state();
+    synced = $state(false);
+    edytor = this;
+    selection;
+    defaultType = 'paragraph';
+    off = [];
+    onChange;
+    placeholder;
+    // YJS Stuff
+    doc = new Y.Doc();
+    undoManager;
+    awareness;
+    transact = (cb) => {
+        return this.doc.transact(() => {
+            const result = cb();
+            return result;
+        }, this.transaction);
+    };
+    constructor({ snippets, readonly, hotKeys, plugins, doc = this.doc, awareness = new Awareness(doc), sync, value, onSelectionChange, placeholder, onChange }) {
+        this.readonly = readonly || false;
+        this.doc = doc;
+        this.yRootBlock = this.doc.getMap('content');
+        this.awareness = awareness;
+        this.onChange = onChange;
+        // Initialize plugins
+        this.plugins = (plugins || []).map((plugin) => {
+            const initializedPlugin = plugin(this);
+            initializedPlugin.marks &&
+                Object.entries(initializedPlugin.marks).forEach(([key, snippet]) => {
+                    if (typeof snippet === 'object') {
+                        this.marks.set(key, snippet);
+                    }
+                    else {
+                        this.marks.set(key, { snippet });
+                    }
+                });
+            initializedPlugin.blocks &&
+                Object.entries(initializedPlugin.blocks).forEach(([key, definition]) => {
+                    if (typeof definition === 'object') {
+                        this.blocks.set(key, definition);
+                    }
+                    else {
+                        this.blocks.set(key, { snippet: definition });
+                    }
+                });
+            initializedPlugin.inlineBlocks &&
+                Object.entries(initializedPlugin.inlineBlocks).forEach(([key, definition]) => {
+                    if (typeof definition === 'object') {
+                        this.inlineBlocks.set(key, definition);
+                    }
+                    else {
+                        this.inlineBlocks.set(key, { snippet: definition });
+                    }
+                });
+            return initializedPlugin;
+        });
+        // We set the custom snippets after plugins are initialized in order to be able to override the plugins snippets
+        Object.entries(snippets || {}).forEach(([key, snippet]) => {
+            const isMark = key.endsWith('Mark');
+            const isInlineBlock = key.endsWith('InlineBlock');
+            const isBlock = key.endsWith('Block');
+            if (isMark) {
+                this.marks.set(key, { snippet: snippet });
+            }
+            else if (isInlineBlock) {
+                // this.inlineBlocks.set(key, { snippet: snippet as Snippet<[InlineBlockSnippetPayload]> });
+            }
+            else if (isBlock) {
+                this.blocks.set(key, { snippet: snippet });
+            }
+        });
+        this.placeholder =
+            placeholder || this.plugins.find((plugin) => plugin.placeholder)?.placeholder;
+        if (readonly || !sync) {
+            this.sync(value || { children: [] });
+        }
+        this.selection = new EdytorSelection(this, onSelectionChange);
+        this.hotKeys = new HotKeys(this, hotKeys, this.plugins);
+        this.undoManager = new Y.UndoManager(this.yRootBlock, {
+            trackedOrigins: new Set([this.transaction, null])
+        });
+    }
+    getBlockDefinition = (mode, type) => {
+        const definition = mode === 'block' ? this.blocks.get(type) : this.inlineBlocks.get(type);
+        if (type === 'root') {
+            return {};
+        }
+        if (!definition) {
+            throw new Error(`Block type ${type} is not defined`);
+        }
+        return definition;
+    };
+    get value() {
+        return {
+            type: 'root',
+            children: this.root?.value.children || []
+        };
+    }
+    getDefaultBlock = (parent = this.selection.state.startText?.parent) => {
+        if (!parent || parent instanceof Edytor) {
+            return 'paragraph';
+        }
+        for (const plugin of this.plugins) {
+            if (plugin.defaultBlock) {
+                const defaultBlock = typeof plugin.defaultBlock === 'function'
+                    ? plugin.defaultBlock(parent)
+                    : plugin.defaultBlock;
+                if (defaultBlock) {
+                    return defaultBlock;
+                }
+            }
+        }
+        return 'paragraph';
+    };
+    sync = ({ children = [] } = { children: [] }) => {
+        if (this.synced) {
+            return;
+        }
+        if (this.readonly) {
+            // children.forEach((child) => {
+            // 	const block = new Block({ parent: this.root, block: child });
+            // 	this.root.yChildren.push([block.yBlock]);
+            // });
+        }
+        else {
+            const INITIALIZED = 'INITIALIZED';
+            const initializedText = this.doc.getText(INITIALIZED);
+            this.initialized = initializedText?.toJSON() === INITIALIZED;
+            if (this.initialized) {
+                // this.yRootBlock =
+                // Root block already exists and has its children
+                this.root = new Block({
+                    edytor: this,
+                    yBlock: this.yRootBlock,
+                    block: {
+                        type: 'root',
+                        id: 'root',
+                        children
+                    }
+                });
+            }
+            else {
+                this.root = new Block({
+                    edytor: this,
+                    yBlock: this.yRootBlock,
+                    block: {
+                        type: 'root',
+                        id: 'root',
+                        children
+                    }
+                });
+            }
+            initializedText.delete(0, initializedText.length);
+            initializedText.insert(0, INITIALIZED);
+        }
+        this.synced = true;
+        this.doc.on('update', () => {
+            const value = this.value;
+            this.onChange?.(value);
+            this.plugins.forEach((plugin) => {
+                plugin.onChange?.(value);
+            });
+        });
+    };
+    onBeforeInput = onBeforeInput.bind(this);
+    batch = batch.bind(this);
+    deleteContentWithinSelection = this.batch('deleteContentWithinSelection', deleteContentWithinSelection.bind(this));
+    getTextById = (id) => {
+        const isText = id.startsWith('t');
+        if (!isText) {
+            throw new Error('Invalid id, expected text id');
+        }
+        return this.idToText.get(id);
+    };
+    getBlockByIdOrContent = (idOrContent) => {
+        if (typeof idOrContent === 'string') {
+            const isText = idOrContent.startsWith('t');
+            const isBlock = idOrContent.startsWith('b');
+            if (isBlock) {
+                return this.idToBlock.get(idOrContent);
+            }
+            else if (isText) {
+                const text = this.idToText.get(idOrContent);
+                return text?.parent;
+            }
+        }
+        else if (idOrContent instanceof Text) {
+            return idOrContent.parent || undefined;
+        }
+        return undefined;
+    };
+    getTextNode = async (idOrText) => {
+        await tick();
+        const text = idOrText instanceof Text ? idOrText : this.getTextById(idOrText);
+        let node = text?.node;
+        let breakCount = 0;
+        while (!node) {
+            await tick();
+            node = text?.node;
+            breakCount++;
+            if (breakCount > 10) {
+                throw new Error('Failed to find text node');
+            }
+        }
+        return node;
+    };
+    attach = (node) => {
+        this.node = node;
+        this.container = node;
+        this.selection.init();
+        this.hotKeys.init();
+        this.off.push(on(document, 'keydown', onKeyDown.bind(this)), on(node, 'click', this.selection.handleTripleClick), on(node, 'beforeinput', this.onBeforeInput));
+        this.plugins.forEach((plugin) => {
+            const action = plugin.onEdytorAttached?.({ node });
+            action && this.off.push(action);
+        });
+        return {
+            destroy: () => {
+                this.selection.destroy();
+                this.off.forEach((off) => off());
+            }
+        };
+    };
+}
+export const useEdytor = () => {
+    const hasEdytorContext = hasContext('edytor');
+    if (hasEdytorContext) {
+        return getContext('edytor');
+    }
+    throw new Error('No Edytor found');
+};

package/dist/edytor.utils.d.ts

@@ -0,0 +1,3 @@
+import { Text } from './text/text.svelte.js';
+import type { Edytor } from './edytor.svelte.js';
+export declare function deleteContentWithinSelection(this: Edytor, {}: {}): readonly [Text | null, number];

package/dist/edytor.utils.js

@@ -0,0 +1,78 @@
+import { Block } from './block/block.svelte.js';
+import { Text } from './text/text.svelte.js';
+import { deltaToJson, toDeltas } from './text/deltas.js';
+import { InlineBlock } from './block/inlineBlock.svelte.js';
+export function deleteContentWithinSelection({}) {
+    const { startBlock, startText, endBlock, yStart, yEnd, isAtStartOfBlock, isAtEndOfBlock, endText } = this.selection.state;
+    const blocksToDelete = this.selection.state.blocks.filter((block, index) => {
+        const isFirst = index === 0;
+        const isLast = index === this.selection.state.blocks.length - 1;
+        if (isFirst) {
+            return isAtStartOfBlock;
+        }
+        else if (isLast) {
+            return isAtEndOfBlock;
+        }
+        else {
+            return true;
+        }
+    });
+    const firstRange = startText && startBlock
+        ? {
+            start: [startText.index, yStart],
+            end: [startBlock.lastText.index, startBlock.lastText.length]
+        }
+        : null;
+    if (startBlock !== blocksToDelete[0] && firstRange) {
+        // Delete the text from the yStart
+        startBlock?.deleteContentAtRange(firstRange);
+    }
+    // We need to find the content that will be merged into the first block
+    if (endBlock && endText && endBlock !== blocksToDelete[blocksToDelete.length - 1]) {
+        const contentToMerge = endBlock.content
+            .slice(endText.index, endBlock?.content.length)
+            .map((part, index) => {
+            const isFirstPart = index === 0;
+            if (part instanceof Text && isFirstPart) {
+                // Delete from offset to end
+                part.yText.delete(0, yEnd);
+                const deltas = deltaToJson(toDeltas(part.yText)[0]);
+                return deltas;
+            }
+            return part.value;
+        });
+        const value = contentToMerge.map((part) => {
+            if ('type' in part) {
+                const block = new InlineBlock({
+                    parent: startBlock,
+                    block: part
+                });
+                return block.yBlock;
+            }
+            else {
+                const text = new Text({
+                    parent: startBlock,
+                    content: part
+                });
+                return text.yText;
+            }
+        });
+        startBlock?.yContent.push(value);
+    }
+    blocksToDelete.forEach((block, index) => {
+        block.removeBlock();
+    });
+    if (endBlock?.hasChildren) {
+        const newBlocks = endBlock.children.map((child) => {
+            const newBlock = new Block({
+                parent: startBlock.parent,
+                edytor: this,
+                block: child.value
+            });
+            return newBlock.yBlock;
+        });
+        startBlock?.parent?.yChildren.insert(startBlock.index + 1, newBlocks);
+    }
+    endBlock?.removeBlock();
+    return [startText, yStart];
+}

package/dist/events/onBeforeInput.d.ts

@@ -1,2 +1,2 @@
-import { onBeforeInputData } from "../types";
-export declare const onBeforeInput: ([doc, onChange, editor]: onBeforeInputData, e: InputEvent) => void;
+import type { Edytor } from '../edytor.svelte.js';
+export declare function onBeforeInput(this: Edytor, e: InputEvent): Promise<void>;