@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist-cjs/react/editor/RichTextBody.js

@@ -0,0 +1,134 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextBody = RichTextBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editorNavigation_1 = require("./editorNavigation");
+// Renders the editable rich-text body and reports input and selection changes.
+function RichTextBody({ bodyRef, disabled, label, onBackspace, onDelete, onEnter, onFocus, onImageAlignChange, onImageCustomWidthChange, onImageSizeChange, onInput, onPasteText, onRedo, onSelectionChange, onShortcutCommand, onTab, onToggleCollapse, onUndo, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, className: "bayon-rte-body", contentEditable: !disabled, "data-placeholder": "Tell your story...", dir: "auto", onBlur: onSelectionChange, onClick: (event) => {
+            const imageAlignButton = event.target instanceof Element
+                ? event.target.closest("[data-image-align-action]")
+                : null;
+            if (imageAlignButton instanceof HTMLElement) {
+                const alignment = imageAlignButton.getAttribute("data-image-align-action");
+                const blockId = imageAlignButton
+                    .closest("[data-block-id]")
+                    ?.getAttribute("data-block-id");
+                if (blockId &&
+                    (alignment === "left" ||
+                        alignment === "center" ||
+                        alignment === "right")) {
+                    event.preventDefault();
+                    onImageAlignChange(blockId, alignment);
+                    return;
+                }
+            }
+            const imageSizeButton = event.target instanceof Element
+                ? event.target.closest("[data-image-size-action]")
+                : null;
+            if (imageSizeButton instanceof HTMLElement) {
+                const displaySize = imageSizeButton.getAttribute("data-image-size-action");
+                const blockId = imageSizeButton
+                    .closest("[data-block-id]")
+                    ?.getAttribute("data-block-id");
+                if (blockId &&
+                    (displaySize === "small" ||
+                        displaySize === "medium" ||
+                        displaySize === "full" ||
+                        displaySize === "custom")) {
+                    event.preventDefault();
+                    onImageSizeChange(blockId, displaySize);
+                    return;
+                }
+            }
+            const toggleButton = event.target instanceof Element
+                ? event.target.closest("[data-toggle-collapse]")
+                : null;
+            if (toggleButton instanceof HTMLElement) {
+                const blockId = toggleButton
+                    .closest("[data-block-id]")
+                    ?.getAttribute("data-block-id");
+                if (blockId) {
+                    event.preventDefault();
+                    onToggleCollapse(blockId);
+                    return;
+                }
+            }
+            if (event.target instanceof HTMLInputElement &&
+                event.target.type === "checkbox") {
+                onInput();
+            }
+        }, onFocus: onFocus, onInput: (event) => {
+            if (event.target instanceof HTMLInputElement &&
+                event.target.hasAttribute("data-image-custom-width-action")) {
+                const blockId = event.target
+                    .closest("[data-block-id]")
+                    ?.getAttribute("data-block-id");
+                const width = Number(event.target.value);
+                if (blockId && Number.isFinite(width)) {
+                    onImageCustomWidthChange(blockId, width);
+                    return;
+                }
+            }
+            onInput();
+        }, onKeyDown: (event) => {
+            const historyShortcut = (0, editorNavigation_1.getEditorHistoryShortcut)(event);
+            if (historyShortcut === "undo") {
+                event.preventDefault();
+                onUndo();
+                return;
+            }
+            if (historyShortcut === "redo") {
+                event.preventDefault();
+                onRedo();
+                return;
+            }
+            if ((0, editorNavigation_1.isSelectAllShortcut)(event)) {
+                const code = (0, editorNavigation_1.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;
+            }
+            if (event.key === "Delete" && onDelete()) {
+                event.preventDefault();
+                return;
+            }
+            if (event.key === "Tab" && onTab(event)) {
+                event.preventDefault();
+                return;
+            }
+            const shortcutCommand = (0, editorNavigation_1.getEditorKeyboardShortcut)(event);
+            if (shortcutCommand) {
+                event.preventDefault();
+                onShortcutCommand(shortcutCommand);
+                return;
+            }
+        }, onKeyUp: onSelectionChange, onMouseUp: onSelectionChange, onPaste: (event) => {
+            event.preventDefault();
+            const text = event.clipboardData.getData("text/plain");
+            if (onPasteText(text)) {
+                return;
+            }
+            document.execCommand("insertText", false, text);
+            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);
+}