edytor 0.0.7 → 0.0.9

package/dist/text/text.svelte.d.ts

@@ -0,0 +1,70 @@
+import { Edytor } from '../edytor.svelte.js';
+import * as Y from 'yjs';
+import { type JSONText, type SerializableContent } from '../utils/json.js';
+import { Block } from '../block/block.svelte.js';
+import { type JSONDelta } from './deltas.js';
+export declare class Text {
+    #private;
+    readonly: boolean;
+    parent: Block;
+    yText: Y.Text;
+    edytor: Edytor;
+    stringContent: string;
+    index: number;
+    node: HTMLElement | undefined;
+    isEmpty: boolean;
+    endsWithNewline: boolean;
+    markOnNextInsert: undefined | Record<string, SerializableContent | null>;
+    id: string;
+    get value(): JSONText[];
+    get length(): number;
+    get children(): JSONDelta[];
+    set children(value: JSONDelta[]);
+    private setChildren;
+    private observeText;
+    constructor({ parent, content, yText }: {
+        parent: Block;
+    } & ({
+        yText?: undefined;
+        content: string | JSONText[];
+    } | {
+        yText: Y.Text;
+        content?: undefined;
+    }));
+    private batch;
+    getMarksAtRange: (yStart: number, yEnd: number) => JSONText[];
+    insertText: (args_0: {
+        value: string;
+        isAutoDot?: boolean;
+        start?: number;
+        end?: number;
+        marks?: Record<string, SerializableContent | null>;
+    }) => void;
+    deleteText: (args_0: {
+        direction: "BACKWARD" | "FORWARD";
+        length: number;
+    }) => void;
+    splitText: (args_0: {
+        index?: number;
+    }) => JSONText[];
+    setText: (args_0: {
+        value: JSONText[];
+    }) => void;
+    markText: (args_0: {
+        mark: string;
+        start?: number;
+        end?: number;
+        value?: SerializableContent | null;
+        toggle?: boolean;
+    }) => void;
+    removeMarksFromText: (args_0: {
+        mark: string;
+        start?: number;
+        end?: number;
+        value?: SerializableContent | null;
+        toggle?: boolean;
+    }) => void;
+    attach: (node: HTMLElement) => {
+        destroy: () => void;
+    };
+}

package/dist/text/text.svelte.js

@@ -0,0 +1,119 @@
+import { Edytor } from '../edytor.svelte.js';
+import * as Y from 'yjs';
+import {} from '../utils/json.js';
+import { Block } from '../block/block.svelte.js';
+import { batch, deleteText, removeMarksFromText, getMarksAtRange, insertText, markText, setText, splitText } from './text.utils.js';
+import { deltaToJson, jsonToDelta, toDeltas } from './deltas.js';
+import { id } from '../utils.js';
+import { climb } from '../selection/selection.utils.js';
+export class Text {
+    readonly = false;
+    parent;
+    yText;
+    edytor;
+    stringContent = $state('');
+    index = $state(0);
+    node;
+    // Used to add en empty string in the DOM if the text is empty in order to be abble to focus on it.
+    isEmpty = $state(false);
+    // Used to add en empty string at the end of the text if it ends with a newline in order to visually render the newline.
+    endsWithNewline = $state(false);
+    // Used when user toggles mark without selection range.
+    markOnNextInsert = undefined;
+    id;
+    #children = $state([]);
+    get value() {
+        return deltaToJson(this.#children);
+    }
+    get length() {
+        return this.yText.length;
+    }
+    get children() {
+        const transformer = this.parent.definition.transformText;
+        return transformer
+            ? jsonToDelta(transformer({ text: this, block: this.parent, content: this.value }))
+            : this.#children;
+    }
+    set children(value) {
+        this.#children = value;
+    }
+    setChildren = (text) => {
+        this.stringContent = this.yText.toJSON();
+        [this.children, this.isEmpty] = toDeltas(text || this.yText);
+        this.endsWithNewline = this.stringContent.endsWith('\n');
+    };
+    observeText = (event, transaction) => {
+        if (transaction.origin !== this.edytor.transaction) {
+            // If the transaction is not from the edytor, we need to restore the selection
+            // If the current text is not focused, this action will be ignored
+            this.edytor.selection.restoreRelativePosition(this);
+        }
+        this.setChildren(event.target);
+    };
+    constructor({ parent, content, yText }) {
+        this.parent = parent;
+        this.edytor = parent.edytor;
+        this.yText = yText || new Y.Text();
+        this.id = this.yText.doc ? this.yText.getAttribute('id') : id('t');
+        if (content !== undefined) {
+            // If content is provided we need to initialize the text with the content
+            this.yText._pending?.push(() => {
+                this.yText.setAttribute('id', this.id);
+                if (typeof content === 'string') {
+                    this.yText.insert(0, content);
+                }
+                else {
+                    this.yText.applyDelta(content.map((part) => ({
+                        insert: part.text,
+                        attributes: part.marks
+                    })));
+                }
+                this.setChildren();
+            });
+        }
+        else {
+            this.setChildren();
+        }
+        this.edytor.idToText.set(this.id, this);
+        if (!this.edytor.readonly) {
+            this.yText.observe(this.observeText);
+        }
+    }
+    batch = batch.bind(this);
+    getMarksAtRange = getMarksAtRange.bind(this);
+    insertText = this.batch('insertText', insertText.bind(this));
+    deleteText = this.batch('deleteText', deleteText.bind(this));
+    splitText = this.batch('splitText', splitText.bind(this));
+    setText = this.batch('setText', setText.bind(this));
+    markText = this.batch('markText', markText.bind(this));
+    removeMarksFromText = this.batch('removeMarksFromText', removeMarksFromText.bind(this));
+    attach = (node) => {
+        this.node = node;
+        this.edytor.nodeToText.set(node, this);
+        node.setAttribute('data-edytor-id', `${this.id}`);
+        node.setAttribute('data-edytor-text', `true`);
+        let pluginDestroy = this.edytor.plugins.reduce((acc, plugin) => {
+            const action = plugin.onTextAttached?.({ node, text: this });
+            action && acc.push(action);
+            return acc;
+        }, []);
+        let insideVoid = this.parent.definition.void;
+        climb(this.parent, (block) => {
+            if (block instanceof Block && block.definition.void) {
+                insideVoid = true;
+                return true;
+            }
+        });
+        if (insideVoid) {
+            node.contentEditable = 'true';
+            node.style.outline = 'none';
+        }
+        return {
+            destroy: () => {
+                this.yText?.unobserve(this.observeText);
+                this.edytor.idToText.delete(this.id);
+                pluginDestroy.forEach((destroy) => destroy());
+            }
+        };
+    };
+}

package/dist/text/text.utils.d.ts

@@ -0,0 +1,40 @@
+import type { JSONText, SerializableContent } from '../utils/json.js';
+import type { Text } from './text.svelte.js';
+export type TextOperations = {
+    insertText: {
+        value: string;
+        isAutoDot?: boolean;
+        start?: number;
+        end?: number;
+        marks?: Record<string, SerializableContent | null>;
+    };
+    deleteText: {
+        direction: 'BACKWARD' | 'FORWARD';
+        length: number;
+    };
+    splitText: {
+        index?: number;
+    };
+    setText: {
+        value: JSONText[];
+    };
+    markText: {
+        mark: string;
+        start?: number;
+        end?: number;
+        value?: SerializableContent | null;
+        toggle?: boolean;
+    };
+    removeMarksFromText: {
+        start?: number;
+        end?: number;
+    };
+};
+export declare function batch<T extends (...args: any[]) => any, O extends keyof TextOperations>(operation: O, func: T): T;
+export declare function insertText(this: Text, { value, isAutoDot, start, end, marks }: TextOperations['insertText']): void;
+export declare function getMarksAtRange(this: Text, yStart: number, yEnd: number): JSONText[];
+export declare function deleteText(this: Text, { direction, length }: TextOperations['deleteText']): void;
+export declare function removeMarksFromText(this: Text, { start, end }: TextOperations['markText']): void;
+export declare function markText(this: Text, { mark, value, toggle, start, end }: TextOperations['markText']): void;
+export declare function splitText(this: Text, { index }: TextOperations['splitText']): JSONText[];
+export declare function setText(this: Text, { value }: TextOperations['setText']): void;

package/dist/text/text.utils.js

@@ -0,0 +1,174 @@
+import { prevent } from '../utils.js';
+export function batch(operation, func) {
+    return function (payload) {
+        let finalPayload = payload;
+        for (const plugin of this.edytor.plugins) {
+            // @ts-expect-error
+            const normalizedPayload = plugin.onBeforeOperation?.({
+                operation,
+                payload,
+                text: this,
+                block: this.parent,
+                prevent
+            });
+            if (normalizedPayload) {
+                finalPayload = normalizedPayload;
+                break;
+            }
+        }
+        const result = this.edytor.transact(() => func.bind(this)(finalPayload));
+        for (const plugin of this.edytor.plugins) {
+            plugin.onAfterOperation?.({
+                operation,
+                payload,
+                text: this,
+                block: this.parent
+            });
+        }
+        return result;
+    };
+}
+export function insertText({ value, isAutoDot, start = this.edytor.selection.state.yStart, end = this.edytor.selection.state.yEnd, marks = this.markOnNextInsert }) {
+    const isCollapsed = start === end || !end;
+    // const attributes = this.getAttributesAtPosition(yStart);
+    const deltas = [{ retain: start }, { insert: value, attributes: marks }];
+    if (isAutoDot) {
+        deltas[0].retain = start - 1;
+        deltas.splice(1, 0, { delete: 1 });
+    }
+    if (!isCollapsed) {
+        deltas.splice(1, 0, { delete: end - start });
+    }
+    this.edytor.doc.transact(() => {
+        if (isAutoDot || !isCollapsed) {
+            this.yText.applyDelta(deltas);
+        }
+        else {
+            this.yText.insert(start, value, marks);
+        }
+    });
+    if (this.markOnNextInsert) {
+        this.markOnNextInsert = undefined;
+    }
+}
+export function getMarksAtRange(yStart, yEnd) {
+    const result = [];
+    let offset = 0;
+    let entered = false;
+    for (let i = 0; i < this.children.length; i++) {
+        const { text, marks } = this.children[i];
+        const length = text.length;
+        const end = offset + length;
+        if (yStart >= offset && yStart < end) {
+            // Found start of range
+            entered = true;
+            const startOffset = yStart - offset;
+            const endOffset = Math.min(length, yEnd - offset);
+            result.push({
+                text: text.slice(startOffset, endOffset),
+                marks: Object.fromEntries(marks)
+            });
+        }
+        else if (entered && end <= yEnd) {
+            // Middle of range
+            result.push({
+                text,
+                marks: Object.fromEntries(marks)
+            });
+        }
+        else if (entered && offset < yEnd && yEnd <= end) {
+            // End of range
+            const endOffset = yEnd - offset;
+            result.push({
+                text: text.slice(0, endOffset),
+                marks: Object.fromEntries(marks)
+            });
+            break;
+        }
+        offset += length;
+    }
+    return result;
+}
+export function deleteText({ direction, length = 1 }) {
+    const { yStart, isCollapsed } = this.edytor.selection.state;
+    const deltas = direction === 'BACKWARD'
+        ? [{ retain: isCollapsed ? yStart - 1 : yStart }, { delete: isCollapsed ? 1 : length }]
+        : [{ retain: isCollapsed ? yStart : yStart }, { delete: isCollapsed ? 1 : length }];
+    this.yText.applyDelta(deltas);
+}
+export function removeMarksFromText({ start = this.edytor.selection.state.yStart || 0, end = this.edytor.selection.state.yEnd || this.yText.length }) {
+    const marksAtRange = this.getMarksAtRange(start, end);
+    const attributes = marksAtRange.reduce((acc, { marks }) => {
+        Object.entries(marks || {}).forEach(([key, value]) => {
+            if (value === null) {
+                Object.assign({ key: null });
+            }
+        });
+        return acc;
+    }, {});
+    this.yText.format(start, end, attributes);
+}
+export function markText({ mark, value = true, toggle = false, start = this.edytor.selection.state.yStart, end = this.edytor.selection.state.yEnd }) {
+    const length = end - start;
+    const isCollasped = end - start === 0;
+    const marksAtRange = this.getMarksAtRange(isCollasped ? start - 1 : start, end);
+    const isNextActiveMark = isCollasped && this.markOnNextInsert && mark in this.markOnNextInsert;
+    const spreadOnAllRange = marksAtRange.every(({ marks }) => marks && mark in marks);
+    const markValue = (spreadOnAllRange || isNextActiveMark) && toggle ? null : value;
+    if (isCollasped) {
+        const activeMarks = marksAtRange.reduce((acc, { marks }) => {
+            Object.entries(marks || {}).forEach(([key, value]) => {
+                if (value === true) {
+                    Object.assign(acc, { [key]: true });
+                }
+            });
+            return acc;
+        }, {});
+        if (isNextActiveMark && markValue === null) {
+            delete this.markOnNextInsert[mark];
+        }
+        else {
+            this.markOnNextInsert = {
+                ...(this.markOnNextInsert || {}),
+                ...activeMarks,
+                [mark]: markValue
+            };
+        }
+    }
+    else {
+        this.yText.format(start, length, {
+            [mark]: markValue
+        });
+    }
+}
+// This function split a Y.Text at an index, delete what is after the index and returns the deleted content as a JSONText[]
+export function splitText({ index = this.edytor.selection.state.yStart }) {
+    let offset = 0;
+    let content = [];
+    for (const child of this.value) {
+        const textLength = child.text.length;
+        const nextOffset = offset + textLength;
+        if (offset < index) {
+            content.push({
+                text: child.text.slice(index - offset),
+                marks: child.marks
+            });
+        }
+        else {
+            // Text fully after split point
+            content.push({
+                text: child.text,
+                marks: child.marks
+            });
+        }
+        offset = nextOffset;
+    }
+    this.yText.delete(index, this.yText.length - index);
+    return content;
+}
+export function setText({ value }) {
+    this.yText.applyDelta([
+        { delete: this.yText.length },
+        ...value.map((part) => ({ insert: part.text, attributes: part.marks }))
+    ]);
+}

package/dist/utils/json.d.ts

@@ -0,0 +1,32 @@
+import { Map } from 'yjs';
+export type YBlock = Map<any>;
+export type Mark = [string, Record<string, unknown> | boolean | string];
+export type SerializableContent = {
+    [key: string]: SerializableContent;
+} | string | boolean | number | null;
+export type JSONText = {
+    text: string;
+    marks?: Record<string, SerializableContent>;
+};
+export type JSONInlineBlock = {
+    id?: string;
+    data?: any;
+    type: string;
+};
+export type JSONBlock = {
+    type: string;
+    id?: string;
+    data?: Record<string, SerializableContent>;
+    children?: JSONBlock[];
+    content?: (JSONText | JSONInlineBlock)[];
+};
+export type PartialJSONBlock = Omit<JSONBlock, 'children' | 'content'>;
+export type JSONDoc = {
+    children: JSONBlock[];
+} & Partial<Record<string, unknown>>;
+export type Delta = {
+    insert?: string;
+    retain?: number;
+    delete?: number;
+    attributes?: SerializableContent;
+};

package/dist/utils/json.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Text, AbstractType, Array as YArray, Map, Doc } from 'yjs';

package/dist/utils/jsx.d.ts

@@ -0,0 +1,25 @@
+import type { JSONBlock, SerializableContent } from './json.js';
+type JSXAttributes = {
+    children?: JSXChild | JSXChild[];
+    data?: any;
+} & {
+    [key: string]: string | number | boolean | SerializableContent | JSXChild | JSXChild[] | undefined;
+};
+type JSXChild = string | number | boolean | JSXElement | null | undefined;
+interface JSXElement {
+    type: string;
+    props: JSXAttributes;
+}
+declare global {
+    namespace JSX {
+        interface Element extends JSXElement {
+        }
+        interface IntrinsicElements {
+            [elemName: string]: JSXAttributes;
+        }
+    }
+}
+declare function jsx(type: string, props: JSXAttributes): JSXElement;
+declare function jsxs(type: string, props: JSXAttributes): JSXElement;
+declare function convertJSXToJSONBlock(element: JSXElement): JSONBlock;
+export { jsx, jsxs, convertJSXToJSONBlock };

package/dist/utils/jsx.js

@@ -0,0 +1,66 @@
+function jsx(type, props) {
+    return { type, props };
+}
+function jsxs(type, props) {
+    return jsx(type, props);
+}
+const MARK_ELEMENTS = new Set(['bold', 'italic', 'underline', 'strike', 'code']);
+function convertJSXToJSONBlock(element) {
+    const { type, props } = element;
+    const { children, data, ...rest } = props;
+    // Handle mark wrapper elements (bold, italic, etc)
+    if (MARK_ELEMENTS.has(type)) {
+        const textContent = convertChildrenToTextContent(children);
+        return {
+            type: 'text',
+            content: [
+                {
+                    text: textContent,
+                    marks: { [type]: true }
+                }
+            ]
+        };
+    }
+    // Handle inline blocks
+    if (type === 'inline') {
+        const inlineContent = {
+            type: props.blockType || 'inline',
+            ...(data && { data })
+        };
+        return {
+            type: 'inline',
+            content: [inlineContent],
+            ...rest
+        };
+    }
+    // Convert children
+    const convertedChildren = children
+        ? (Array.isArray(children) ? children : [children])
+            .filter((child) => child != null &&
+            (typeof child === 'object' || typeof child === 'string' || typeof child === 'number'))
+            .map((child) => {
+            if (typeof child === 'string' || typeof child === 'number') {
+                return {
+                    type: 'text',
+                    content: [{ text: child.toString() }]
+                };
+            }
+            return convertJSXToJSONBlock(child);
+        })
+        : undefined;
+    return {
+        type,
+        ...(convertedChildren && { children: convertedChildren }),
+        ...rest
+    };
+}
+function convertChildrenToTextContent(children) {
+    if (!children)
+        return '';
+    const childArray = Array.isArray(children) ? children : [children];
+    return childArray
+        .filter((child) => typeof child === 'string' || typeof child === 'number')
+        .map((child) => child.toString())
+        .join('');
+}
+export { jsx, jsxs, convertJSXToJSONBlock };

package/dist/utils/serialize.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/serialize.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const id: (prefix: "t" | "b" | "i") => string;
+export declare class PreventionError extends Error {
+    cb?: () => void;
+    constructor(cb?: () => void);
+}
+export declare const prevent: (cb?: () => void) => void;

package/dist/utils.js

@@ -0,0 +1,19 @@
+let alphabet = 'useandom26T198340PX75pxJACKVERYMINDBUSHWOLFGQZbfghjklqvwyzrict';
+export const id = (prefix) => {
+    const e = 10;
+    let t = '', r = crypto.getRandomValues(new Uint8Array(e));
+    for (let n = 0; n < e; n++)
+        t += alphabet[61 & r[n]];
+    return `${prefix}_${t}`;
+};
+export class PreventionError extends Error {
+    cb;
+    constructor(cb) {
+        super('Prevent');
+        this.name = 'PreventionError';
+        this.cb = cb;
+    }
+}
+export const prevent = (cb) => {
+    throw new PreventionError(cb);
+};