@blankdotpage/cake 0.1.68 → 0.1.69

package/dist/cake/react/CakeEditor.js

@@ -1,225 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
-import { CakeEngine } from "../engine/cake-engine";
-function toEngineSelection(selection) {
-    if (!selection) {
-        return { start: 0, end: 0, affinity: "forward" };
-    }
-    return {
-        start: selection.start,
-        end: selection.end,
-        affinity: selection.affinity,
-    };
-}
-export const CakeEditor = forwardRef(function CakeEditor(props, outerRef) {
-    const containerRef = useRef(null);
-    const engineRef = useRef(null);
-    const onChangeRef = useRef(props.onChange);
-    const onSelectionChangeRef = useRef(props.onSelectionChange);
-    const lastEmittedValueRef = useRef(null);
-    const lastEmittedSelectionRef = useRef(null);
-    const [contentRoot, setContentRoot] = useState(null);
-    const extensionsRef = useRef(props.extensions);
-    const hasOverlayExtensions = extensionsRef.current.some((ext) => ext.renderOverlay);
-    useEffect(() => {
-        onChangeRef.current = props.onChange;
-        onSelectionChangeRef.current = props.onSelectionChange;
-    }, [props.onChange, props.onSelectionChange]);
-    useEffect(() => {
-        engineRef.current?.syncPlaceholder();
-    }, [props.placeholder]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container) {
-            return;
-        }
-        const engine = new CakeEngine({
-            container,
-            value: props.value,
-            selection: props.selection ?? undefined,
-            extensions: extensionsRef.current,
-            readOnly: props.disabled ?? false,
-            spellCheckEnabled: props.spellCheck ?? false,
-            onChange: (value, selection) => {
-                lastEmittedValueRef.current = value;
-                lastEmittedSelectionRef.current = selection;
-                onChangeRef.current(value);
-                onSelectionChangeRef.current?.(selection.start, selection.end, selection.affinity);
-            },
-            onSelectionChange: (selection) => {
-                lastEmittedSelectionRef.current = selection;
-                onSelectionChangeRef.current?.(selection.start, selection.end, selection.affinity);
-            },
-        });
-        engineRef.current = engine;
-        setContentRoot(engine.getContentRoot());
-        return () => {
-            engine.destroy();
-            engineRef.current = null;
-            setContentRoot(null);
-        };
-    }, []);
-    useEffect(() => {
-        const engine = engineRef.current;
-        if (!engine) {
-            return;
-        }
-        engine.setReadOnly(props.disabled ?? false);
-    }, [props.disabled]);
-    useEffect(() => {
-        const engine = engineRef.current;
-        if (!engine) {
-            return;
-        }
-        engine.setSpellCheckEnabled(props.spellCheck ?? false);
-    }, [props.spellCheck]);
-    useEffect(() => {
-        const engine = engineRef.current;
-        if (!engine) {
-            return;
-        }
-        const nextValue = props.value;
-        const nextSelection = props.selection
-            ? toEngineSelection(props.selection)
-            : undefined;
-        const lastEmittedValue = lastEmittedValueRef.current;
-        // If the value matches what we emitted, don't accept selection changes from props.
-        // This prevents stale selection props (from React batching during fast typing)
-        // from resetting the engine's selection.
-        if (lastEmittedValue === nextValue) {
-            return;
-        }
-        engine.setValue({
-            value: nextValue,
-            selection: nextSelection,
-        });
-    }, [props.value, props.selection]);
-    useImperativeHandle(outerRef, () => {
-        return {
-            element: containerRef.current,
-            focus: (selection) => {
-                const sel = selection ? toEngineSelection(selection) : undefined;
-                engineRef.current?.focus(sel);
-            },
-            blur: () => {
-                engineRef.current?.blur();
-            },
-            hasFocus: () => {
-                return engineRef.current?.hasFocus() ?? false;
-            },
-            selectAll: () => {
-                engineRef.current?.selectAll();
-            },
-            executeCommand: (command, options) => {
-                if (!engineRef.current) {
-                    return false;
-                }
-                return engineRef.current.executeCommand(command, options);
-            },
-            applyUpdate: (update) => {
-                if (!engineRef.current) {
-                    return;
-                }
-                const engine = engineRef.current;
-                const selection = update.selection
-                    ? toEngineSelection(update.selection)
-                    : undefined;
-                if (update.value !== undefined) {
-                    engine.setValue({
-                        value: update.value,
-                        selection,
-                    });
-                    if (update.focus) {
-                        engine.focus(selection);
-                    }
-                    return;
-                }
-                if (update.selection) {
-                    if (!selection) {
-                        return;
-                    }
-                    engine.setSelection(selection);
-                    if (update.focus) {
-                        engine.focus(selection);
-                    }
-                    return;
-                }
-                if (update.focus) {
-                    engine.focus();
-                }
-            },
-            getValue: () => engineRef.current?.getValue() ?? props.value,
-            getSelection: () => {
-                const selection = engineRef.current?.getSelection();
-                if (!selection) {
-                    return null;
-                }
-                return { start: selection.start, end: selection.end };
-            },
-            getCursorLength: () => engineRef.current?.getCursorLength() ?? 0,
-            insertText: (text) => {
-                engineRef.current?.insertText(text);
-            },
-            replaceText: (oldText, newText) => {
-                engineRef.current?.replaceText(oldText, newText);
-            },
-        };
-    }, [props.value]);
-    const containerStyle = props.style
-        ? { ...props.style }
-        : {};
-    if (!containerStyle.position) {
-        containerStyle.position = "relative";
-    }
-    const containerClassName = props.className
-        ? `cake ${props.className}`
-        : "cake";
-    const overlayContext = containerRef.current && contentRoot
-        ? {
-            container: containerRef.current,
-            contentRoot,
-            toOverlayRect: (rect) => {
-                const containerRect = containerRef.current?.getBoundingClientRect();
-                if (!containerRect) {
-                    return {
-                        top: rect.top,
-                        left: rect.left,
-                        width: rect.width,
-                        height: rect.height,
-                    };
-                }
-                return {
-                    top: rect.top - containerRect.top,
-                    left: rect.left - containerRect.left,
-                    width: rect.width,
-                    height: rect.height,
-                };
-            },
-            insertText: (text) => {
-                engineRef.current?.insertText(text);
-            },
-            replaceText: (oldText, newText) => {
-                engineRef.current?.replaceText(oldText, newText);
-            },
-            getSelection: () => {
-                const selection = engineRef.current?.getSelection();
-                if (!selection) {
-                    return null;
-                }
-                const focus = selection.start === selection.end
-                    ? selection.start
-                    : Math.max(selection.start, selection.end);
-                return { start: focus, end: focus };
-            },
-            executeCommand: (command) => {
-                return engineRef.current?.executeCommand(command) ?? false;
-            },
-        }
-        : null;
-    return (_jsxs("div", { style: { position: "relative", height: "100%" }, children: [_jsx("div", { ref: containerRef, className: containerClassName, style: containerStyle, "data-placeholder": props.placeholder, onBlur: (event) => {
-                    props.onBlur?.(event.nativeEvent);
-                } }), overlayContext && hasOverlayExtensions
-                ? extensionsRef.current.map((extension) => extension.renderOverlay ? (_jsx(Fragment, { children: extension.renderOverlay(overlayContext) }, extension.name)) : null)
-                : null] }));
-});
-CakeEditor.displayName = "CakeEditor";