@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/editor/RichTextBody.d.ts

@@ -0,0 +1,28 @@
+import type { RefObject } from "react";
+import { type EditorKeyboardShortcutCommand } from "./editorNavigation";
+type RichTextBodyProps = {
+    bodyRef: RefObject<HTMLDivElement | null>;
+    disabled: boolean;
+    label: string;
+    onBackspace: () => boolean;
+    onDelete: () => boolean;
+    onEnter: (event: {
+        shiftKey: boolean;
+    }) => boolean;
+    onFocus: () => void;
+    onImageAlignChange: (blockId: string, alignment: "center" | "left" | "right") => void;
+    onImageCustomWidthChange: (blockId: string, width: number) => void;
+    onImageSizeChange: (blockId: string, displaySize: "small" | "medium" | "full" | "custom") => void;
+    onInput: () => void;
+    onPasteText: (text: string) => boolean;
+    onRedo: () => boolean;
+    onSelectionChange: () => void;
+    onShortcutCommand: (command: EditorKeyboardShortcutCommand) => void;
+    onTab: (event: {
+        shiftKey: boolean;
+    }) => boolean;
+    onToggleCollapse: (blockId: string) => void;
+    onUndo: () => boolean;
+};
+export declare function RichTextBody({ bodyRef, disabled, label, onBackspace, onDelete, onEnter, onFocus, onImageAlignChange, onImageCustomWidthChange, onImageSizeChange, onInput, onPasteText, onRedo, onSelectionChange, onShortcutCommand, onTab, onToggleCollapse, onUndo, }: RichTextBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/editor/RichTextBody.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getEditorHistoryShortcut, getCodeBlockSelectionTarget, getEditorKeyboardShortcut, isSelectAllShortcut, } from "./editorNavigation.js";
+// Renders the editable rich-text body and reports input and selection changes.
+export function RichTextBody({ bodyRef, disabled, label, onBackspace, onDelete, onEnter, onFocus, onImageAlignChange, onImageCustomWidthChange, onImageSizeChange, onInput, onPasteText, onRedo, onSelectionChange, onShortcutCommand, onTab, onToggleCollapse, onUndo, }) {
+    return (_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 = getEditorHistoryShortcut(event);
+            if (historyShortcut === "undo") {
+                event.preventDefault();
+                onUndo();
+                return;
+            }
+            if (historyShortcut === "redo") {
+                event.preventDefault();
+                onRedo();
+                return;
+            }
+            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;
+            }
+            if (event.key === "Delete" && onDelete()) {
+                event.preventDefault();
+                return;
+            }
+            if (event.key === "Tab" && onTab(event)) {
+                event.preventDefault();
+                return;
+            }
+            const shortcutCommand = 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);
+}

package/dist/react/editor/RichTextEditor.d.ts

@@ -0,0 +1,138 @@
+import { type RichTextDocumentSurfaceBackground } from "./RichTextDocumentSurface";
+import { type BlockDropPlacement } from "../editor/blockActions";
+import { type BlockActionToolPlacement } from "../tools/blockActionToolState";
+import { type RichTextEditorEntitlements, type RichTextFeatureGate, type RichTextLockedFeatureMode } from "../../core/features";
+import type { RichTextBlock } from "../../core/types";
+import { type RichTextHistorySnapshot } from "./editorHistory";
+export type { RichTextHistoryLabel, RichTextHistoryMetadata, RichTextHistorySnapshot, RichTextHistorySnapshotEntry, } from "./editorHistory";
+type SelectionToolbarPlacement = "above" | "below";
+type SelectionToolbarRect = Pick<DOMRect, "bottom" | "height" | "left" | "top" | "width">;
+type SelectionToolbarBodyRect = Pick<DOMRect, "bottom" | "left" | "top">;
+type SelectionToolbarPositionInput = {
+    bodyClientWidth: number;
+    bodyRect: SelectionToolbarBodyRect;
+    rangeRect: SelectionToolbarRect;
+    scrollTop: number;
+};
+export type RichTextEditorBehavior = {
+    blockActions?: boolean;
+    specialBlocks?: boolean;
+    textBlockShortcuts?: boolean;
+};
+export type ResolvedRichTextEditorBehavior = Required<RichTextEditorBehavior>;
+export declare const defaultRichTextEditorBehavior: {
+    blockActions: true;
+    specialBlocks: true;
+    textBlockShortcuts: true;
+};
+export declare function resolveRichTextEditorBehavior(behavior?: RichTextEditorBehavior): ResolvedRichTextEditorBehavior;
+type RichTextEditorProps = {
+    behavior?: RichTextEditorBehavior;
+    bodyLabel: string;
+    contentBlocks: RichTextBlock[];
+    disabled?: boolean;
+    documentBackground?: RichTextDocumentSurfaceBackground;
+    features?: RichTextEditorEntitlements;
+    helperText?: string;
+    imageUpload?: RichTextImageUploadHandler;
+    lockedFeatureMode?: RichTextLockedFeatureMode;
+    onFeatureGate?: (gate: RichTextFeatureGate) => void;
+    onContentBlocksChange: (value: RichTextBlock[], change?: RichTextContentChange) => void;
+    onHistoryControlsChange?: (controls: RichTextHistoryControls) => void;
+    onHistorySnapshotChange?: (snapshot: RichTextHistorySnapshot) => void;
+    onTitleChange: (value: string) => void;
+    required?: boolean;
+    title: string;
+    titleLabel: string;
+    titleValidationMessage?: string;
+    transcriptionEnabled?: boolean;
+    transcriptionLanguage?: string;
+    transcriptionPortalContainer?: HTMLElement | null;
+};
+export type RichTextContentChange = {
+    reason: "image-upload-complete" | "toggle-collapse";
+};
+export type RichTextHistoryControls = {
+    canRedo: boolean;
+    canUndo: boolean;
+    redo: () => boolean;
+    undo: () => boolean;
+};
+export type RichTextImageUploadResult = {
+    alt?: string;
+    url: string;
+};
+type RichTextImageAlignment = "center" | "left" | "right";
+export type RichTextImageUploadHandler = (input: {
+    file: File;
+    onProgress?: (percentage: number) => void;
+}) => Promise<RichTextImageUploadResult>;
+export declare function RichTextEditor({ behavior, bodyLabel, contentBlocks, disabled, documentBackground, features, helperText, imageUpload, lockedFeatureMode, onFeatureGate, onContentBlocksChange, onHistoryControlsChange, onHistorySnapshotChange, onTitleChange, required, title, titleLabel, titleValidationMessage, transcriptionEnabled, transcriptionLanguage, transcriptionPortalContainer, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function getBlockActionAnchorSelector(blockType: RichTextBlock["type"]): "" | "[data-rich-text-image]";
+export declare function getDragIndicatorPosition(placements: BlockActionToolPlacement[], dropTarget: {
+    placement: BlockDropPlacement;
+    targetBlockId: string;
+}): {
+    left: number;
+    top: number;
+} | null;
+export declare function getTreeRowBackspaceMarkdown(type: "bullet" | "ordered" | "checkbox" | "toggle"): "" | "1." | "[ ]" | "*";
+export declare function getTreeRowBackspaceFocusPosition(type: "bullet" | "ordered" | "checkbox" | "toggle"): "end" | "start";
+export declare function getTreeRowBackspaceParagraphMarkdown(type: "bullet" | "ordered" | "checkbox" | "toggle", currentMarkdown: string): string;
+export declare function getTreeRowBackspaceFocusPositionForMarkdown(markdown: string): "end" | "start";
+export declare function getTreeRowBackspaceFocusPositionForParagraph(type: "bullet" | "ordered" | "checkbox" | "toggle", currentMarkdown: string): "end" | "start";
+export declare function canBackspaceEmptyToggleTitle(block: RichTextBlock | null | undefined): boolean;
+export declare function areBlockActionToolPlacementsEqual(previousPlacements: BlockActionToolPlacement[], nextPlacements: BlockActionToolPlacement[]): boolean;
+export declare function getDeletionFocusTarget(blocks: RichTextBlock[], blockId: string): {
+    blockId: string;
+    position: "end";
+} | {
+    blockId: string;
+    position: "start";
+} | undefined;
+export declare function getEditorHtmlForRichTextBlocks(blocks: RichTextBlock[]): string;
+export declare function buildUploadedImageBlock(upload: RichTextImageUploadResult, options?: {
+    alignment?: RichTextImageAlignment;
+    id?: string;
+}): RichTextBlock;
+export declare function buildUploadingImageBlock(input: {
+    alignment?: RichTextImageAlignment;
+    fileName?: string;
+    id?: string;
+    progress?: number;
+}): RichTextBlock;
+export declare function getImageUploadProgressMessage(progress: number): string;
+export declare function getImageUploadFailureMessage(error: unknown): string;
+export declare function normalizeSoftBreakHtml(html: string): string;
+export declare function hasEditableTrailingWhitespace(value: string): boolean;
+export declare function shouldDelayTypographyNormalization(value: string): boolean;
+export declare function splitTreeRowMarkdownAtTextOffset(markdown: string, offset: number): {
+    after: string;
+    before: string;
+};
+export declare const splitCheckboxMarkdownAtTextOffset: typeof splitTreeRowMarkdownAtTextOffset;
+export declare function getCheckboxEnterAction(event: {
+    shiftKey: boolean;
+}): "line-break" | "next-checkbox";
+export declare function shouldPadTrailingLineBreak(textAfterCursor: string): boolean;
+export declare function resolveTranscriptionConfig(config?: {
+    enabled?: boolean;
+    language?: string;
+}): {
+    enabled: boolean;
+    language: string | undefined;
+};
+export declare function appendTranscriptText(currentText: string, transcript: string): string;
+export declare function shouldRefreshEditorBodyHtml(body: HTMLElement, editableHtml: string, nextBlocks: RichTextBlock[]): boolean;
+type ScrollPositionTarget = {
+    requestAnimationFrame?: (callback: () => void) => number;
+    scrollTo: (x: number, y: number) => void;
+    scrollX: number;
+    scrollY: number;
+};
+export declare function restoreScrollPositionAfter(scrollTarget: ScrollPositionTarget, callback: () => void): void;
+export declare function getSelectionToolbarPosition({ bodyClientWidth, bodyRect, rangeRect, scrollTop, }: SelectionToolbarPositionInput): {
+    left: number;
+    placement: SelectionToolbarPlacement;
+    top: number;
+};