@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/{BlockActionTool.js → tools/BlockActionTool.js}

@@ -4,13 +4,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockActionTool = BlockActionTool;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RichTextIcons_1 = require("./RichTextIcons");
+const RichTextIcons_1 = require("../icons/RichTextIcons");
+const blockActionToolState_1 = require("../tools/blockActionToolState");
 function BlockActionTool({ activeBlockId, draggedBlockId, onAction, onHoverChange, onPointerDragEnd, onPointerDragMove, onPointerDragStart, onToggleMenu, placement, }) {
     const menuOpen = activeBlockId === placement.blockId;
     const dragging = draggedBlockId === placement.blockId;
     const pointerStartRef = (0, react_1.useRef)(null);
     const suppressClickRef = (0, react_1.useRef)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `bayon-rte-block-tool${menuOpen ? " bayon-rte-block-tool--menu-open" : ""}`, "data-block-action-tool": placement.blockId, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: { "--bayon-rte-block-tool-top": `${placement.top}px` }, children: [menuOpen ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Close block actions", className: "bayon-rte-icon-button bayon-rte-block-handle bayon-rte-block-handle--menu-open", onClick: () => onToggleMenu(placement.blockId), onMouseDown: (event) => event.preventDefault(), title: "Close block actions", type: "button", children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 19 }) })) : ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Block actions", "aria-pressed": dragging, className: `bayon-rte-icon-button bayon-rte-block-handle${dragging ? " bayon-rte-block-handle--dragging" : ""}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `bayon-rte-block-tool${menuOpen ? " bayon-rte-block-tool--menu-open" : ""}${placement.blockType === "image" ? " bayon-rte-block-tool--image" : ""}`, "data-block-action-tool": placement.blockId, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: {
+            "--bayon-rte-block-tool-left": `${placement.left}px`,
+            "--bayon-rte-block-tool-top": `${(0, blockActionToolState_1.getBlockActionToolRenderTop)(placement)}px`,
+        }, children: [menuOpen ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Close block actions", className: "bayon-rte-icon-button bayon-rte-block-handle bayon-rte-block-handle--menu-open", onClick: () => onToggleMenu(placement.blockId), onMouseDown: (event) => event.preventDefault(), title: "Close block actions", type: "button", children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 19 }) })) : ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Block actions", "aria-pressed": dragging, className: `bayon-rte-icon-button bayon-rte-block-handle${dragging ? " bayon-rte-block-handle--dragging" : ""}`, onClick: () => {
                     if (suppressClickRef.current) {
                         suppressClickRef.current = false;
                         return;

package/dist-cjs/react/tools/LinkCreationInput.js

@@ -0,0 +1,41 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkCreationInput = LinkCreationInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RichTextIcons_1 = require("../icons/RichTextIcons");
+// Renders the focused URL input used by selection link creation.
+function LinkCreationInput({ left, onCancel, onSubmit, placement, top, }) {
+    const inputRef = (0, react_1.useRef)(null);
+    const [href, setHref] = (0, react_1.useState)("https://");
+    (0, react_1.useEffect)(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    function handleSubmit(event) {
+        event.preventDefault();
+        submitHref();
+    }
+    function submitHref() {
+        const nextHref = href.trim();
+        if (!nextHref) {
+            return;
+        }
+        onSubmit(nextHref);
+    }
+    function guardButtonMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onCancel();
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("form", { "aria-label": "Create link", className: `bayon-rte-link-input bayon-rte-link-input--${placement}`, onSubmit: handleSubmit, style: {
+            "--bayon-rte-link-input-left": `${left}px`,
+            "--bayon-rte-link-input-top": `${top}px`,
+        }, children: [(0, jsx_runtime_1.jsx)("input", { "aria-label": "Link URL", className: "bayon-rte-link-input__field", onChange: (event) => setHref(event.target.value), onKeyDown: handleKeyDown, placeholder: "Paste or type a URL", ref: inputRef, type: "url", value: href }), (0, jsx_runtime_1.jsx)("button", { "aria-label": "Apply link", className: "bayon-rte-icon-button bayon-rte-link-input__action", onClick: submitHref, onMouseDown: guardButtonMouseDown, title: "Apply link", type: "button", children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.LinkIcon, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { "aria-label": "Cancel link", className: "bayon-rte-icon-button bayon-rte-link-input__action", onClick: onCancel, onMouseDown: guardButtonMouseDown, title: "Cancel link", type: "button", children: (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 16 }) })] }));
+}

package/dist-cjs/react/{SelectionFormatToolbar.js → tools/SelectionFormatToolbar.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectionActions = void 0;
 exports.SelectionFormatToolbar = SelectionFormatToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const RichTextIcons_1 = require("./RichTextIcons");
+const RichTextIcons_1 = require("../icons/RichTextIcons");
 exports.selectionActions = [
     { command: "bold", icon: RichTextIcons_1.BoldIcon, label: "Bold" },
     { command: "italic", icon: RichTextIcons_1.ItalicIcon, label: "Italic" },
@@ -14,8 +14,8 @@ exports.selectionActions = [
     { command: "code", icon: RichTextIcons_1.CodeIcon, label: "Code" },
 ];
 // Renders the floating toolbar used to format the current text selection.
-function SelectionFormatToolbar({ left, onAction, top, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-toolbar", style: {
+function SelectionFormatToolbar({ left, onAction, placement, top, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `bayon-rte-toolbar bayon-rte-toolbar--${placement}`, style: {
             "--bayon-rte-toolbar-left": `${left}px`,
             "--bayon-rte-toolbar-top": `${top}px`,
         }, children: exports.selectionActions.map(({ command, icon: Icon, label }, index) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, className: `bayon-rte-icon-button bayon-rte-toolbar__button${index === 3 ? " bayon-rte-toolbar__button--divider" : ""}`, onClick: () => onAction(command), onMouseDown: (event) => event.preventDefault(), title: label, type: "button", children: (0, jsx_runtime_1.jsx)(Icon, { size: 18 }) }, command))) }));

package/dist-cjs/react/tools/SpecialBlockOption.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialBlockOption = SpecialBlockOption;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Renders one selectable special-block action inside the insertion tool.
+function SpecialBlockOption({ action, disabled = false, onInsert, title = action.label, }) {
+    const Icon = action.icon;
+    const label = disabled ? `${action.label} unavailable` : action.label;
+    return ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, className: "bayon-rte-icon-button bayon-rte-special-button", disabled: disabled, onClick: () => onInsert(action), onMouseDown: (event) => event.preventDefault(), title: title, type: "button", children: (0, jsx_runtime_1.jsx)(Icon, { size: 18 }) }));
+}

package/dist-cjs/react/tools/SpecialBlockTool.js

@@ -0,0 +1,129 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specialBlockActions = void 0;
+exports.SpecialBlockTool = SpecialBlockTool;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const features_1 = require("../../core/features");
+const RichTextIcons_1 = require("../icons/RichTextIcons");
+const SpecialBlockOption_1 = require("./SpecialBlockOption");
+const specialBlockIcons = [
+    RichTextIcons_1.ImageIcon,
+    RichTextIcons_1.QuoteIcon,
+    RichTextIcons_1.TitleIcon,
+    RichTextIcons_1.BulletListIcon,
+    RichTextIcons_1.ToggleIcon,
+    RichTextIcons_1.CodeIcon,
+    RichTextIcons_1.DataObjectIcon,
+    RichTextIcons_1.DividerIcon,
+];
+exports.specialBlockActions = [
+    {
+        icon: RichTextIcons_1.PasteIcon,
+        kind: "paste",
+        label: "Paste",
+        selectDefault: false,
+    },
+    {
+        featureId: "image-upload",
+        fallbackHtml: '<figure data-placeholder="image"><p>Image placeholder</p></figure>',
+        icon: RichTextIcons_1.ImageIcon,
+        kind: "image-upload",
+        label: "Image",
+        selectDefault: true,
+    },
+    {
+        html: '<blockquote data-placeholder="quote"></blockquote>',
+        icon: RichTextIcons_1.QuoteIcon,
+        label: "Quote",
+        selectDefault: true,
+    },
+    {
+        html: "<h2>Title</h2>",
+        icon: RichTextIcons_1.TitleIcon,
+        label: "Title",
+        selectDefault: true,
+    },
+    {
+        html: '<ul data-rich-text-children=""><li data-rich-text-bullet=""><div data-rich-text-row=""><span data-bullet-marker="" contenteditable="false" aria-hidden="true"></span><span data-bullet-label="" data-placeholder="List item"></span></div></li></ul>',
+        icon: RichTextIcons_1.BulletListIcon,
+        label: "Bullet list",
+        selectDefault: false,
+    },
+    {
+        focusPosition: "start",
+        focusSelector: "[data-toggle-label]",
+        html: '<ul data-rich-text-children=""><li data-rich-text-toggle="" data-toggle-collapsed="false"><div data-rich-text-row=""><button aria-label="Collapse toggle" class="bayon-rte-toggle-button" contenteditable="false" data-toggle-collapse="" title="Collapse toggle" type="button"><span class="bayon-rte-toggle-caret" aria-hidden="true"></span></button><span data-toggle-label="" data-placeholder="Toggle title"></span></div><div data-toggle-content="" data-placeholder="Toggle content"></div></li></ul>',
+        icon: RichTextIcons_1.ToggleIcon,
+        label: "Toggle",
+        selectDefault: false,
+    },
+    {
+        html: "<pre><code>Code block</code></pre>",
+        icon: RichTextIcons_1.CodeIcon,
+        label: "Code block",
+        selectDefault: true,
+    },
+    {
+        html: "<pre><code>Embedded HTML</code></pre>",
+        icon: RichTextIcons_1.DataObjectIcon,
+        label: "Embedded HTML",
+        selectDefault: true,
+    },
+    {
+        html: "<hr>",
+        icon: RichTextIcons_1.DividerIcon,
+        label: "Divider",
+        selectDefault: false,
+    },
+];
+// Renders the floating insertion control for image, quote, title, code, and divider blocks.
+function SpecialBlockTool({ features, lockedFeatureMode = "hide", onFeatureGate, onHoverChange, onInsert, onOpenChange, open, toolHover, top, visible, }) {
+    const actionItems = exports.specialBlockActions
+        .map((action) => ({
+        access: getSpecialBlockActionAccess(features, action),
+        action,
+    }))
+        .filter((item) => item.access.enabled ||
+        !hasSpecialBlockActionFeature(item.action) ||
+        lockedFeatureMode === "disabled");
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": !visible, className: `bayon-rte-special-tool${visible ? " bayon-rte-special-tool--visible" : ""}`, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => {
+            onHoverChange(false);
+            onOpenChange(false);
+        }, style: { "--bayon-rte-special-tool-top": `${top}px` }, children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": open ? "Close special blocks" : "Add special block", "aria-expanded": open, className: "bayon-rte-icon-button bayon-rte-special-button bayon-rte-special-toggle", onClick: () => onOpenChange(!open), style: {
+                    transform: visible
+                        ? "scale(1) rotate(0deg)"
+                        : "scale(0.84) rotate(-12deg)",
+                }, title: open ? "Close special blocks" : "Add special block", type: "button", children: open ? (0, jsx_runtime_1.jsx)(RichTextIcons_1.CloseIcon, { size: 20 }) : (0, jsx_runtime_1.jsx)(RichTextIcons_1.AddIcon, { size: 20 }) }), open ? ((0, jsx_runtime_1.jsx)("div", { className: "bayon-rte-special-tool__actions", children: actionItems.map(({ access, action }) => {
+                    const disabled = !access.enabled;
+                    return ((0, jsx_runtime_1.jsx)(SpecialBlockOption_1.SpecialBlockOption, { action: action, disabled: disabled, onInsert: disabled
+                            ? () => onFeatureGate?.({
+                                featureId: access.featureId,
+                                label: access.label,
+                                reason: access.reason,
+                            })
+                            : onInsert, title: disabled
+                            ? `${access.label}: ${getLockedFeatureTitle(access)}`
+                            : action.label }, action.label));
+                }) })) : null] }));
+}
+function getSpecialBlockActionAccess(features, action) {
+    return hasSpecialBlockActionFeature(action)
+        ? (0, features_1.getRichTextFeatureAccess)(features, action.featureId)
+        : { enabled: true };
+}
+function hasSpecialBlockActionFeature(action) {
+    return "featureId" in action;
+}
+function getLockedFeatureTitle(access) {
+    if (access.enabled) {
+        return access.label;
+    }
+    if (access.reason === "premium") {
+        return "Premium feature";
+    }
+    if (access.reason === "unavailable") {
+        return "Unavailable";
+    }
+    return "Disabled";
+}

package/dist-cjs/react/{TranscriptionControl.js → tools/TranscriptionControl.js}

@@ -3,37 +3,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TranscriptionControl = TranscriptionControl;
 exports.getTranscriptionControlState = getTranscriptionControlState;
+exports.resolveSpeechRecognitionSupport = resolveSpeechRecognitionSupport;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RichTextIcons_1 = require("./RichTextIcons");
+const RichTextIcons_1 = require("../icons/RichTextIcons");
 function TranscriptionControl({ disabled = false, language, onTranscript, }) {
     const recognitionRef = (0, react_1.useRef)(null);
     const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
     const [lastInserted, setLastInserted] = (0, react_1.useState)(false);
     const [recording, setRecording] = (0, react_1.useState)(false);
-    const recognitionSupported = typeof window === "undefined" || Boolean(getSpeechRecognitionConstructor());
+    const recognitionSupport = getSpeechRecognitionSupport();
     const controlState = getTranscriptionControlState({
         disabled,
         errorMessage,
         lastInserted,
         recording,
-        supported: recognitionSupported,
+        supported: recognitionSupport.supported,
     });
     (0, react_1.useEffect)(() => {
         return () => {
-            recognitionRef.current?.stop();
+            stopRecognitionInstance(recognitionRef.current);
             recognitionRef.current = null;
         };
     }, []);
     function stopRecording() {
-        recognitionRef.current?.stop();
+        stopRecognitionInstance(recognitionRef.current);
         recognitionRef.current = null;
         setRecording(false);
         setLastInserted(false);
     }
     function startRecording() {
+        const support = getSpeechRecognitionSupport();
         const Recognition = getSpeechRecognitionConstructor();
-        if (!Recognition || disabled) {
+        if (!support.supported || !Recognition || disabled) {
             setErrorMessage("Browser transcription is unavailable.");
             setLastInserted(false);
             return;
@@ -63,8 +65,17 @@ function TranscriptionControl({ disabled = false, language, onTranscript, }) {
         recognitionRef.current = recognition;
         setErrorMessage(null);
         setLastInserted(false);
-        setRecording(true);
-        recognition.start();
+        try {
+            recognition.start();
+            setRecording(true);
+        }
+        catch (error) {
+            console.warn("[rich-text-editor] Failed to start browser transcription.", error);
+            recognitionRef.current = null;
+            setErrorMessage("Transcription stopped.");
+            setLastInserted(false);
+            setRecording(false);
+        }
     }
     return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": "Browser transcription", className: `bayon-rte-transcription bayon-rte-transcription--${controlState.tone}`, children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": controlState.buttonLabel, "aria-pressed": recording, className: `bayon-rte-icon-button bayon-rte-transcription__button${recording ? " bayon-rte-transcription__button--recording" : ""}`, disabled: controlState.disabled, onClick: () => (recording ? stopRecording() : startRecording()), title: controlState.buttonLabel, type: "button", children: recording ? (0, jsx_runtime_1.jsx)(RichTextIcons_1.StopIcon, { size: 18 }) : (0, jsx_runtime_1.jsx)(RichTextIcons_1.MicIcon, { size: 18 }) }), controlState.statusLabel ? ((0, jsx_runtime_1.jsxs)("small", { className: "bayon-rte-transcription__status", role: "status", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "bayon-rte-transcription__dot" }), controlState.statusLabel] })) : null] }));
 }
@@ -113,7 +124,58 @@ function getSpeechRecognitionConstructor() {
         return null;
     }
     const speechWindow = window;
-    return speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition ?? null;
+    return (speechWindow.SpeechRecognition ??
+        speechWindow.webkitSpeechRecognition ??
+        null);
+}
+function getSpeechRecognitionSupport() {
+    if (typeof window === "undefined") {
+        return {
+            reason: "available",
+            supported: true,
+        };
+    }
+    const speechWindow = window;
+    return resolveSpeechRecognitionSupport({
+        hasSpeechRecognition: Boolean(speechWindow.SpeechRecognition),
+        hasWebkitSpeechRecognition: Boolean(speechWindow.webkitSpeechRecognition),
+        userAgent: window.navigator.userAgent,
+    });
+}
+function resolveSpeechRecognitionSupport({ hasSpeechRecognition, hasWebkitSpeechRecognition, userAgent, }) {
+    if (!hasSpeechRecognition && !hasWebkitSpeechRecognition) {
+        return {
+            reason: "missing-api",
+            supported: false,
+        };
+    }
+    if (hasWebkitSpeechRecognition && isMobileSafariUserAgent(userAgent)) {
+        return {
+            reason: "mobile-safari",
+            supported: false,
+        };
+    }
+    return {
+        reason: "available",
+        supported: true,
+    };
+}
+function isMobileSafariUserAgent(userAgent) {
+    const normalizedUserAgent = userAgent.toLowerCase();
+    const isIosMobile = /\b(iphone|ipod|ipad)\b/.test(normalizedUserAgent) ||
+        (normalizedUserAgent.includes("macintosh") &&
+            normalizedUserAgent.includes("mobile"));
+    const isSafari = normalizedUserAgent.includes("safari");
+    const isOtherIosBrowser = /\b(crios|fxios|edgios|opios)\b/.test(normalizedUserAgent);
+    return isIosMobile && isSafari && !isOtherIosBrowser;
+}
+function stopRecognitionInstance(recognition) {
+    try {
+        recognition?.stop();
+    }
+    catch (error) {
+        console.warn("[rich-text-editor] Failed to stop browser transcription.", error);
+    }
 }
 function readFinalTranscript(event) {
     let text = "";

package/dist-cjs/react/tools/blockActionToolState.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlockActionToolAnchorTop = getBlockActionToolAnchorTop;
+exports.getBlockActionToolRenderTop = getBlockActionToolRenderTop;
+exports.getVisibleBlockActionToolPlacements = getVisibleBlockActionToolPlacements;
+exports.getPointerDropTarget = getPointerDropTarget;
+exports.getPointerDragDropResult = getPointerDragDropResult;
+exports.getPointerHoverLaneBlockId = getPointerHoverLaneBlockId;
+exports.getUniqueBlockActionToolPlacements = getUniqueBlockActionToolPlacements;
+const hoverLaneLeftWidth = 72;
+const hoverLaneRightWidth = 36;
+const hoverLaneVerticalPadding = 10;
+const raisedBlockActionToolTopOffset = -4;
+function getBlockActionToolAnchorTop(blockType, top) {
+    return blockType === "checkbox" ? top + raisedBlockActionToolTopOffset : top;
+}
+function getBlockActionToolRenderTop(placement) {
+    return placement.toolTop ?? placement.top;
+}
+function getVisibleBlockActionToolPlacements(placements, state) {
+    const uniquePlacements = getUniqueBlockActionToolPlacements(placements);
+    const visibleBlockId = state.activeBlockId ??
+        state.draggedBlockId ??
+        state.hoveredBlockId ??
+        state.focusedBlockId;
+    return visibleBlockId
+        ? uniquePlacements.filter((placement) => placement.blockId === visibleBlockId)
+        : [];
+}
+function getPointerDropTarget(placements, draggedBlockId, pointerClientY, pointerClientX) {
+    const targetPlacements = placements.filter((placement) => {
+        return placement.blockId !== draggedBlockId;
+    });
+    const rowPlacements = targetPlacements.filter((placement) => {
+        return placement.dropRole !== "content";
+    });
+    const contentPlacements = targetPlacements.filter((placement) => {
+        return placement.dropRole === "content";
+    });
+    const targetPlacement = findContainingPlacement(rowPlacements, pointerClientY) ??
+        findContainingPlacement(contentPlacements, pointerClientY) ??
+        getClosestPlacement(rowPlacements, pointerClientY) ??
+        getClosestPlacement(contentPlacements, pointerClientY);
+    if (!targetPlacement) {
+        return null;
+    }
+    if (targetPlacement.dropRole === "content") {
+        return {
+            placement: "inside",
+            targetBlockId: targetPlacement.blockId,
+        };
+    }
+    if (pointerClientX !== undefined &&
+        pointerClientX >= targetPlacement.left + 24) {
+        return {
+            placement: "inside",
+            targetBlockId: targetPlacement.blockId,
+        };
+    }
+    const visualAncestorDropTarget = pointerClientX === undefined
+        ? null
+        : getVisualAncestorDropTarget(rowPlacements, targetPlacement, pointerClientX);
+    if (visualAncestorDropTarget) {
+        return visualAncestorDropTarget;
+    }
+    return {
+        placement: pointerClientY >
+            targetPlacement.top + (targetPlacement.bottom - targetPlacement.top) / 2
+            ? "after"
+            : "before",
+        targetBlockId: targetPlacement.blockId,
+    };
+}
+function getPointerDragDropResult(placements, draggedBlockId, pointerClientY, pointerClientX) {
+    const containingPlacement = findContainingPlacement(placements, pointerClientY);
+    if (containingPlacement?.blockId === draggedBlockId) {
+        return {
+            dropTarget: getDropTargetFromPlacement(containingPlacement, pointerClientY, pointerClientX),
+            status: "invalid",
+        };
+    }
+    const dropTarget = getPointerDropTarget(placements, draggedBlockId, pointerClientY, pointerClientX);
+    if (!dropTarget) {
+        return { status: "invalid" };
+    }
+    const targetPlacement = placements.find((placement) => {
+        return (placement.blockId === dropTarget.targetBlockId &&
+            (dropTarget.placement === "inside" || placement.dropRole !== "content"));
+    });
+    if (dropTarget.targetBlockId === draggedBlockId ||
+        targetPlacement?.ancestorBlockIds?.includes(draggedBlockId)) {
+        return { dropTarget, status: "invalid" };
+    }
+    return { dropTarget, status: "valid" };
+}
+function getDropTargetFromPlacement(placement, pointerClientY, pointerClientX) {
+    if (placement.dropRole === "content" ||
+        (pointerClientX !== undefined && pointerClientX >= placement.left + 24)) {
+        return {
+            placement: "inside",
+            targetBlockId: placement.blockId,
+        };
+    }
+    return {
+        placement: pointerClientY > placement.top + (placement.bottom - placement.top) / 2
+            ? "after"
+            : "before",
+        targetBlockId: placement.blockId,
+    };
+}
+function getPointerHoverLaneBlockId(placements, pointerTop, pointerLeft) {
+    const placement = getUniqueBlockActionToolPlacements(placements).find((currentPlacement) => {
+        return (pointerTop >= currentPlacement.top - hoverLaneVerticalPadding &&
+            pointerTop <= currentPlacement.bottom + hoverLaneVerticalPadding &&
+            pointerLeft >= currentPlacement.left - hoverLaneLeftWidth &&
+            pointerLeft <= currentPlacement.left + hoverLaneRightWidth);
+    });
+    return placement?.blockId ?? null;
+}
+function getUniqueBlockActionToolPlacements(placements) {
+    const seenBlockIds = new Set();
+    return placements.filter((placement) => {
+        if (placement.dropRole === "content") {
+            return false;
+        }
+        if (seenBlockIds.has(placement.blockId)) {
+            return false;
+        }
+        seenBlockIds.add(placement.blockId);
+        return true;
+    });
+}
+function getVisualAncestorDropTarget(rowPlacements, targetPlacement, pointerClientX) {
+    const targetDepth = targetPlacement.depth ?? targetPlacement.ancestorBlockIds?.length ?? 0;
+    if (targetDepth <= 0 || !targetPlacement.ancestorBlockIds?.length) {
+        return null;
+    }
+    const desiredDepth = clamp(Math.round((pointerClientX - getMinimumPlacementLeft(rowPlacements)) /
+        getPlacementIndentSize(rowPlacements)), 0, targetDepth);
+    if (desiredDepth >= targetDepth) {
+        return null;
+    }
+    const targetBlockId = targetPlacement.ancestorBlockIds[desiredDepth];
+    return targetBlockId
+        ? {
+            placement: "after",
+            targetBlockId,
+        }
+        : null;
+}
+function getPlacementIndentSize(placements) {
+    const leftPositions = Array.from(new Set(placements.map((placement) => Math.round(placement.left)))).sort((a, b) => a - b);
+    const positiveDiffs = leftPositions
+        .slice(1)
+        .map((left, index) => left - (leftPositions[index] ?? left))
+        .filter((diff) => diff > 0);
+    return Math.min(...positiveDiffs, 42);
+}
+function getMinimumPlacementLeft(placements) {
+    return Math.min(...placements.map((placement) => placement.left), 0);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getDistanceToPlacement(placement, pointerClientY) {
+    if (pointerClientY >= placement.top && pointerClientY <= placement.bottom) {
+        return 0;
+    }
+    return Math.min(Math.abs(pointerClientY - placement.top), Math.abs(pointerClientY - placement.bottom));
+}
+function findContainingPlacement(placements, pointerClientY) {
+    return placements.find((placement) => {
+        return (pointerClientY >= placement.top && pointerClientY <= placement.bottom);
+    });
+}
+function getClosestPlacement(placements, pointerClientY) {
+    return placements.reduce((closestPlacement, placement) => {
+        if (!closestPlacement) {
+            return placement;
+        }
+        return getDistanceToPlacement(placement, pointerClientY) <
+            getDistanceToPlacement(closestPlacement, pointerClientY)
+            ? placement
+            : closestPlacement;
+    }, null);
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@bayonai/rich-text-editor",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "Reusable rich text editing, rendering, and unsaved-change session controls.",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist-cjs/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -23,6 +23,7 @@
     "dist",
     "dist-cjs",
     "CHANGELOG.md",
+    "BEHAVIOR.md",
     "README.md"
   ],
   "scripts": {

package/dist/react/RichTextBody.d.ts

@@ -1,18 +0,0 @@
-import type { RefObject } from "react";
-import { type EditorKeyboardShortcutCommand } from "./editorNavigation";
-type RichTextBodyProps = {
-    bodyRef: RefObject<HTMLDivElement | null>;
-    disabled: boolean;
-    label: string;
-    onArrowUpFromFirstLine: () => void;
-    onBackspace: () => boolean;
-    onEnter: (event: {
-        shiftKey: boolean;
-    }) => boolean;
-    onFocus: () => void;
-    onInput: () => void;
-    onSelectionChange: () => void;
-    onShortcutCommand: (command: EditorKeyboardShortcutCommand) => void;
-};
-export declare function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }: RichTextBodyProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/react/RichTextBody.js

@@ -1,66 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getCodeBlockSelectionTarget, getEditorKeyboardShortcut, isCursorOnFirstLine, isSelectAllShortcut, } from "./editorNavigation.js";
-// Renders the editable rich-text body and reports input and selection changes.
-export function RichTextBody({ bodyRef, disabled, label, onArrowUpFromFirstLine, onBackspace, onEnter, onFocus, onInput, onSelectionChange, onShortcutCommand, }) {
-    return (_jsx("div", { "aria-label": label, className: "bayon-rte-body", contentEditable: !disabled, "data-placeholder": "Tell your story...", dir: "auto", onBlur: onSelectionChange, onClick: (event) => {
-            if (event.target instanceof HTMLInputElement &&
-                event.target.type === "checkbox") {
-                onInput();
-            }
-        }, onFocus: onFocus, onInput: onInput, onKeyDown: (event) => {
-            if (isSelectAllShortcut(event)) {
-                const code = getCodeBlockSelectionTarget(event.currentTarget, window.getSelection());
-                if (code) {
-                    event.preventDefault();
-                    selectElementContents(code);
-                    onSelectionChange();
-                    return;
-                }
-            }
-            if (event.key === "Enter" && onEnter(event)) {
-                event.preventDefault();
-                return;
-            }
-            if (event.key === "Backspace" && onBackspace()) {
-                event.preventDefault();
-                return;
-            }
-            const shortcutCommand = getEditorKeyboardShortcut(event);
-            if (shortcutCommand) {
-                event.preventDefault();
-                onShortcutCommand(shortcutCommand);
-                return;
-            }
-            if (event.key === "ArrowUp" &&
-                isCursorOnFirstLine(event.currentTarget.textContent ?? "", getTextOffsetWithin(event.currentTarget))) {
-                event.preventDefault();
-                onArrowUpFromFirstLine();
-            }
-        }, onKeyUp: onSelectionChange, onMouseUp: onSelectionChange, onPaste: (event) => {
-            event.preventDefault();
-            document.execCommand("insertText", false, event.clipboardData.getData("text/plain"));
-            onInput();
-        }, ref: bodyRef, role: "textbox", suppressContentEditableWarning: true, tabIndex: disabled ? -1 : 0 }));
-}
-function selectElementContents(element) {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-}
-function getTextOffsetWithin(root) {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-        return 0;
-    }
-    const selectionRange = selection.getRangeAt(0);
-    if (!root.contains(selectionRange.startContainer)) {
-        return 0;
-    }
-    const textRange = document.createRange();
-    textRange.selectNodeContents(root);
-    textRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
-    return textRange.toString().length;
-}