edytor 0.0.7 → 0.0.9

package/dist/events/onBeforeInput.js

@@ -0,0 +1,338 @@
+import { prevent, PreventionError } from '../utils.js';
+import { Text } from '../text/text.svelte.js';
+export async function onBeforeInput(e) {
+    const { start, yStart, isCollapsed, isTextSpanning, isAtStartOfBlock, isAtStartOfText, isVoid, endText, isAtEndOfText, length, isBlockSpanning, startText, isAtEndOfBlock, yEnd, islandRoot, texts } = this.selection.state;
+    if (this.readonly)
+        return;
+    const { inputType, dataTransfer, data } = e;
+    try {
+        // Build virtual keyboard events for plugins hotkeys to listen to before handling the input event
+        if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+            const customKeyDownEvent = new KeyboardEvent('keydown', {
+                key: 'Enter',
+                code: 'Enter',
+                shiftKey: e.inputType === 'insertLineBreak'
+            });
+            this.hotKeys.isHotkey(customKeyDownEvent);
+        }
+        if (e.inputType === 'deleteContentForward' || e.inputType === 'deleteContentBackward') {
+            const customKeyDownEvent = new KeyboardEvent('keydown', {
+                key: 'Backspace',
+                code: 'Backspace',
+                shiftKey: e.inputType === 'deleteContentBackward'
+            });
+            this.hotKeys.isHotkey(customKeyDownEvent);
+        }
+        e.preventDefault();
+        this.plugins.forEach((plugin) => {
+            plugin.onBeforeInput?.({ prevent, e });
+        });
+        const isFirstChildOfDocument = startText?.parent === this.root?.children.at(0);
+        const isNested = startText?.parent.parent !== this.root;
+        const isLastChild = startText?.parent.parent?.children.at(-1) === startText?.parent;
+        switch (inputType) {
+            case 'insertText': {
+                if (data === '. ') {
+                    startText?.insertText({ value: data, isAutoDot: true });
+                }
+                else {
+                    if (isBlockSpanning) {
+                        const [startText, offset] = this.deleteContentWithinSelection({});
+                        startText && (await this.selection.setAtTextOffset(startText, offset));
+                    }
+                    else if (isTextSpanning) {
+                        startText?.parent.deleteContentAtRange({
+                            start: [startText.index, yStart],
+                            end: [endText.index, yEnd]
+                        });
+                        await this.selection.setAtTextOffset(startText, yStart);
+                    }
+                    startText?.insertText({ value: data });
+                    // We need to immediately shift the selection to the right by the length of the inserted text
+                    // This is to prevent selection divergence when the text is rapidly inserted
+                    this.edytor.selection.shift(data.length);
+                    // Then we set the caret to the right position of the inserted text
+                    this.selection.setAtTextOffset(startText, yStart + data.length);
+                }
+                break;
+            }
+            case 'deleteContentForward': {
+                if (!startText) {
+                    return;
+                }
+                if (isBlockSpanning) {
+                    const startText = texts[0];
+                    const offset = yStart;
+                    this.deleteContentWithinSelection({});
+                    this.selection.setAtTextOffset(startText, offset);
+                }
+                else {
+                    if (isCollapsed && isAtEndOfBlock) {
+                        // Before:
+                        // [Block]
+                        //   [Text] "Hello|"
+                        // [NextBlock]
+                        //   [Text] "World"
+                        //
+                        // After:
+                        // [Block]
+                        //   [Text] "Hello|World"
+                        startText.parent.mergeBlockForward();
+                        this.edytor.selection.setAtTextOffset(startText, yStart);
+                    }
+                    else if (isCollapsed && isAtEndOfText) {
+                        // Before:
+                        //   [Text] [InlineBlock] [Text]
+                        //
+                        // After:
+                        //   [Text]
+                        const index = startText.parent.content.indexOf(startText) + 1;
+                        startText.parent.removeInlineBlock({ index });
+                        this.selection.setAtTextOffset(startText, yStart);
+                    }
+                    else if (isTextSpanning) {
+                        const startText = texts[0];
+                        const endText = texts[texts.length - 1];
+                        if (!startText || !endText) {
+                            return;
+                        }
+                        startText.parent.deleteContentAtRange({
+                            start: [startText.index, yStart],
+                            end: [endText.index, yEnd]
+                        });
+                        this.selection.setAtTextOffset(startText, yStart);
+                    }
+                    else {
+                        // Before:
+                        //   [Text] "Hello| World"
+                        //
+                        // After:
+                        //   [Text] "Hello|World"
+                        startText.deleteText({ direction: 'FORWARD', length: length || 1 });
+                        this.selection.setAtTextOffset(startText, yStart);
+                    }
+                }
+                break;
+            }
+            case 'deleteContentBackward': {
+                if (isCollapsed &&
+                    isAtStartOfBlock &&
+                    isFirstChildOfDocument &&
+                    !startText?.parent.isEmpty) {
+                    return;
+                }
+                if (isBlockSpanning) {
+                    const startText = texts[0];
+                    const offset = yStart;
+                    this.deleteContentWithinSelection({});
+                    this.selection.setAtTextOffset(startText, offset);
+                    // TODO: implement this later, it's complicated i think.
+                }
+                else {
+                    if (!startText) {
+                        return;
+                    }
+                    if (isCollapsed && isAtStartOfBlock) {
+                        // Last nested block need to be unNest
+                        // Otherwise we just merge the block backward and eventually remove the block or unnest the children
+                        if (isNested && isLastChild && !islandRoot) {
+                            console.log('unNest');
+                            // Before:
+                            // [Block]
+                            //   [Block]
+                            //     [Text] "|Hello"
+                            //
+                            // After:
+                            // [Block]
+                            // [Block]
+                            //   [Text] "|Hello"
+                            const newBlock = startText?.parent.unNestBlock();
+                            newBlock && this.edytor.selection.setAtTextOffset(newBlock.firstText, 0);
+                        }
+                        else {
+                            // Before:
+                            // [Block]
+                            //   [Text] "Hello |World"
+                            //
+                            // After:
+                            // [Block]
+                            //   [Text] "Hello|World"
+                            //
+                            // OR
+                            //
+                            // Before:
+                            // [Block]
+                            //   [Text] "Hello"
+                            // [Block]
+                            //   [Text] "|World"
+                            //
+                            // After:
+                            // [Block]
+                            //   [Text] "Hello|World"
+                            //
+                            // OR
+                            //
+                            // Before:
+                            // [Block]
+                            //   [Text] "Hello"
+                            // [Block]
+                            //   [Text] "|World"
+                            //	 [Block]
+                            //   	[Text] "!"
+                            //
+                            // After:
+                            // [Block]
+                            //   [Text] "Hello|World"
+                            // [Block]
+                            //   [Text] "|!"
+                            if (islandRoot && islandRoot.children.length === 1) {
+                                this.edytor.selection.selectBlocks(islandRoot);
+                            }
+                            else {
+                                if (islandRoot && islandRoot.children.length > 1 && startText?.parent.index === 0) {
+                                    return;
+                                }
+                                else {
+                                    const previousBlock = startText?.parent.closestPreviousBlock;
+                                    const previousText = previousBlock?.lastText;
+                                    const offset = previousText?.length;
+                                    startText?.parent.mergeBlockBackward();
+                                    previousText &&
+                                        this.edytor.selection.setAtTextOffset(previousBlock.lastText, offset);
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        if (isCollapsed && isAtStartOfText) {
+                            // Before:
+                            //   [Text] [InlineBlock] [Text]
+                            //
+                            // After:
+                            //   [Text]
+                            const index = startText.parent.content.indexOf(startText) - 1;
+                            const previousText = startText.parent.content.at(index - 1);
+                            const hasPreviousText = previousText && previousText instanceof Text;
+                            const offset = hasPreviousText ? previousText.yText.length : 0;
+                            console.log({ hasPreviousText, offset, previousText });
+                            startText.parent.removeInlineBlock({ index });
+                            if (hasPreviousText) {
+                                this.selection.setAtTextOffset(previousText, offset);
+                            }
+                        }
+                        else if (isTextSpanning) {
+                            const startText = texts[0];
+                            const endText = texts[texts.length - 1];
+                            if (!startText || !endText) {
+                                return;
+                            }
+                            startText.parent.deleteContentAtRange({
+                                start: [startText.index, yStart],
+                                end: [endText.index, yEnd]
+                            });
+                            this.selection.setAtTextOffset(startText, yStart);
+                        }
+                        else {
+                            startText?.deleteText({ direction: 'BACKWARD', length: length || 1 });
+                            this.selection.setAtTextOffset(startText, isCollapsed ? yStart - 1 : yStart);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'insertLineBreak': {
+                if (!startText) {
+                    return;
+                }
+                if (isBlockSpanning) {
+                    const [startText, offset] = this.deleteContentWithinSelection({});
+                    startText && (await this.selection.setAtTextOffset(startText, offset));
+                }
+                else if (isTextSpanning) {
+                    startText?.parent.deleteContentAtRange({
+                        start: [startText.index, yStart],
+                        end: [endText.index, yEnd]
+                    });
+                    await this.selection.setAtTextOffset(startText, yStart);
+                }
+                this.selection.state.startText?.insertText({ value: '\n' });
+                this.selection.setAtTextOffset(this.selection.state.startText, this.selection.state.yStart + 1);
+                break;
+            }
+            case 'insertFromPaste': {
+                if (!startText) {
+                    return;
+                }
+                if (isBlockSpanning) {
+                    const [startText, offset] = this.deleteContentWithinSelection({});
+                    startText && (await this.selection.setAtTextOffset(startText, offset));
+                }
+                else if (isTextSpanning) {
+                    startText?.parent.deleteContentAtRange({
+                        start: [startText.index, yStart],
+                        end: [endText.index, yEnd]
+                    });
+                    await this.selection.setAtTextOffset(startText, yStart);
+                }
+                const value = dataTransfer.getData('text/plain');
+                this.selection.state.startText?.insertText({ value });
+                this.selection.setAtTextOffset(this.selection.state.startText, this.selection.state.yStart + value.length);
+                break;
+            }
+            case 'insertParagraph': {
+                if (!startText) {
+                    return;
+                }
+                if (isBlockSpanning) {
+                    const [startText, offset] = this.deleteContentWithinSelection({});
+                    startText && (await this.selection.setAtTextOffset(startText, offset));
+                }
+                else if (isTextSpanning) {
+                    startText?.parent.deleteContentAtRange({
+                        start: [startText.index, yStart],
+                        end: [endText.index, yEnd]
+                    });
+                    await this.selection.setAtTextOffset(startText, yStart);
+                }
+                else if (!isCollapsed) {
+                    startText.deleteText({ direction: 'FORWARD', length: yEnd - yStart });
+                    await this.selection.setAtTextOffset(startText, yStart);
+                }
+                const defaultBlock = this.getDefaultBlock();
+                if (this.selection.state.isCollapsed) {
+                    if (this.selection.state.isAtEndOfBlock) {
+                        const newBlock = startText.parent.insertBlockAfter({
+                            block: {
+                                type: defaultBlock
+                            }
+                        });
+                        newBlock &&
+                            this.selection.setAtTextOffset(newBlock.firstText, newBlock?.firstText?.length);
+                    }
+                    else if (this.selection.state.isAtStartOfBlock) {
+                        startText.parent?.insertBlockBefore({
+                            block: {
+                                type: defaultBlock
+                            }
+                        });
+                        this.selection.setAtTextOffset(startText, 0);
+                    }
+                    else {
+                        const newBlock = this.selection.state.startText?.parent?.splitBlock({
+                            index: this.selection.state.yStart,
+                            text: this.selection.state.startText
+                        });
+                        newBlock && this.selection.setAtTextOffset(newBlock.firstText, 0);
+                    }
+                }
+                break;
+            }
+        }
+    }
+    catch (error) {
+        if (error instanceof PreventionError) {
+            return error.cb?.();
+        }
+        throw error;
+    }
+}

package/dist/events/onKeyDown.d.ts

@@ -1,69 +1,2 @@
-import { Editor } from "../types";
-export declare const onKeyDown: (editor: Editor, e: KeyboardEvent) => any;
-export declare const defaultHotkeys: ({
-    operation: string;
-    keys: string;
-    mark: {
-        bold: boolean;
-        italic?: undefined;
-        underline?: undefined;
-        code?: undefined;
-        strikethrough?: undefined;
-        highlight?: undefined;
-    };
-} | {
-    operation: string;
-    keys: string;
-    mark: {
-        italic: boolean;
-        bold?: undefined;
-        underline?: undefined;
-        code?: undefined;
-        strikethrough?: undefined;
-        highlight?: undefined;
-    };
-} | {
-    operation: string;
-    keys: string;
-    mark: {
-        underline: boolean;
-        bold?: undefined;
-        italic?: undefined;
-        code?: undefined;
-        strikethrough?: undefined;
-        highlight?: undefined;
-    };
-} | {
-    operation: string;
-    keys: string;
-    mark: {
-        code: boolean;
-        bold?: undefined;
-        italic?: undefined;
-        underline?: undefined;
-        strikethrough?: undefined;
-        highlight?: undefined;
-    };
-} | {
-    operation: string;
-    keys: string;
-    mark: {
-        strikethrough: boolean;
-        bold?: undefined;
-        italic?: undefined;
-        underline?: undefined;
-        code?: undefined;
-        highlight?: undefined;
-    };
-} | {
-    operation: string;
-    keys: string;
-    mark: {
-        highlight: boolean;
-        bold?: undefined;
-        italic?: undefined;
-        underline?: undefined;
-        code?: undefined;
-        strikethrough?: undefined;
-    };
-})[];
+import type { Edytor } from '../edytor.svelte.js';
+export declare function onKeyDown(this: Edytor, e: KeyboardEvent): void;

package/dist/events/onKeyDown.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Block } from '../block/block.svelte.js';
+import { prevent, PreventionError } from '../utils.js';
+export function onKeyDown(e) {
+    if (this.readonly)
+        return;
+    try {
+        this.hotKeys.isHotkey(e);
+    }
+    catch (error) {
+        if (error instanceof PreventionError) {
+            error.cb?.();
+        }
+        else {
+            throw error;
+        }
+    }
+}

package/dist/hotkeys.d.ts

@@ -0,0 +1,27 @@
+import type { Edytor, EdytorOptions } from './edytor.svelte.js';
+import type { InitializedPlugin } from './plugins.js';
+export type HotKey = (payload: {
+    event: KeyboardEvent;
+    edytor: Edytor;
+    prevent: (cb?: () => void) => void;
+}) => void;
+export type HotKeyModifier = 'mod' | 'alt' | 'ctrl' | 'shift';
+declare const letter: Set<"t" | "b" | "i" | "a" | "c" | "d" | "e" | "f" | "g" | "h" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "u" | "v" | "w" | "x" | "y" | "z">;
+type Letter = typeof letter extends Set<infer T> ? T : never;
+type Key = Letter | 'tab' | 'enter' | 'backspace' | 'space' | 'escape' | 'arrowup' | 'arrowdown' | 'arrowleft' | 'arrowright';
+export type SingleModifierCombination = `${HotKeyModifier}+${Key}`;
+export type DoubleModifierCombination = `mod+alt+${Key}` | `mod+ctrl+${Key}` | `mod+shift+${Key}` | `alt+ctrl+${Key}` | `alt+shift+${Key}` | `ctrl+shift+${Key}`;
+export type HotKeyCombination = Key | SingleModifierCombination | DoubleModifierCombination;
+export declare class HotKeys {
+    private edytor;
+    private userHotKeys;
+    private plugins;
+    private hotkeys;
+    get isMac(): boolean;
+    constructor(edytor: Edytor, userHotKeys?: EdytorOptions['hotKeys'], plugins?: InitializedPlugin[]);
+    init: () => void;
+    private normalizeKey;
+    private combination;
+    isHotkey: (e: KeyboardEvent) => boolean;
+}
+export {};