@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/tools/blockActionToolState.js

@@ -0,0 +1,177 @@
+const hoverLaneLeftWidth = 72;
+const hoverLaneRightWidth = 36;
+const hoverLaneVerticalPadding = 10;
+const raisedBlockActionToolTopOffset = -4;
+export function getBlockActionToolAnchorTop(blockType, top) {
+    return blockType === "checkbox" ? top + raisedBlockActionToolTopOffset : top;
+}
+export function getBlockActionToolRenderTop(placement) {
+    return placement.toolTop ?? placement.top;
+}
+export 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)
+        : [];
+}
+export 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,
+    };
+}
+export 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,
+    };
+}
+export 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;
+}
+export 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/dist/react/tools/imageBlockDiagnostics.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextBlock } from "../../core/types";
+export declare function warnIfImageBlockMissingDisplayUrl(block: RichTextBlock): void;

package/dist/react/tools/imageBlockDiagnostics.js

@@ -0,0 +1,12 @@
+export function warnIfImageBlockMissingDisplayUrl(block) {
+    if (block.type !== "image" ||
+        block.url ||
+        typeof block.uploadProgress === "number" ||
+        !block.alt?.trim()) {
+        return;
+    }
+    console.warn("Rich text image block is missing a display URL.", {
+        alt: block.alt,
+        blockId: block.id,
+    });
+}

package/dist/{session.d.ts → session/session.d.ts}

@@ -1,4 +1,4 @@
-import type { RichTextDocument } from "./types";
+import type { RichTextDocument } from "../core/types";
 export type EditorDirtyScope = "all" | "content";
 export type EditorSessionValue<Metadata = unknown> = {
     document: RichTextDocument;

package/dist-cjs/core/blockTree.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findBlockPath = findBlockPath;
+exports.getBlockAtPath = getBlockAtPath;
+exports.getBlocksAtPath = getBlocksAtPath;
+exports.removeBlockAtPath = removeBlockAtPath;
+exports.updateBlockAtPath = updateBlockAtPath;
+exports.insertBlockAtPath = insertBlockAtPath;
+exports.pathContains = pathContains;
+exports.withNestableBlockChildren = withNestableBlockChildren;
+exports.withBlockChildren = withBlockChildren;
+const blockTypes_1 = require("./blockTypes");
+function findBlockPath(blocks, blockId) {
+    for (let index = 0; index < blocks.length; index += 1) {
+        const block = blocks[index];
+        if (!block) {
+            continue;
+        }
+        if (block.id === blockId) {
+            return [index];
+        }
+        if ((0, blockTypes_1.isNestableRichTextBlock)(block) && block.children?.length) {
+            const childPath = findBlockPath(block.children, blockId);
+            if (childPath) {
+                return [index, ...childPath];
+            }
+        }
+    }
+    return null;
+}
+function getBlockAtPath(blocks, path) {
+    let currentBlocks = blocks;
+    let currentBlock;
+    for (const index of path) {
+        currentBlock = currentBlocks[index];
+        if (!currentBlock) {
+            return null;
+        }
+        currentBlocks = (0, blockTypes_1.isNestableRichTextBlock)(currentBlock)
+            ? currentBlock.children ?? []
+            : [];
+    }
+    return currentBlock ?? null;
+}
+function getBlocksAtPath(blocks, path) {
+    if (path.length === 0) {
+        return blocks;
+    }
+    const parent = getBlockAtPath(blocks, path);
+    return (0, blockTypes_1.isNestableRichTextBlock)(parent) ? parent.children ?? [] : null;
+}
+function removeBlockAtPath(blocks, path) {
+    const [index, ...rest] = path;
+    if (index === undefined) {
+        return null;
+    }
+    if (rest.length === 0) {
+        const block = blocks[index];
+        if (!block) {
+            return null;
+        }
+        return {
+            block,
+            blocks: [...blocks.slice(0, index), ...blocks.slice(index + 1)],
+        };
+    }
+    const parent = blocks[index];
+    if (!(0, blockTypes_1.isNestableRichTextBlock)(parent)) {
+        return null;
+    }
+    const removed = removeBlockAtPath(parent.children ?? [], rest);
+    if (!removed) {
+        return null;
+    }
+    const updatedParent = withNestableBlockChildren(parent, removed.blocks);
+    return {
+        block: removed.block,
+        blocks: [
+            ...blocks.slice(0, index),
+            updatedParent,
+            ...blocks.slice(index + 1),
+        ],
+    };
+}
+function updateBlockAtPath(blocks, path, updater) {
+    const [index, ...rest] = path;
+    if (index === undefined) {
+        return blocks;
+    }
+    const block = blocks[index];
+    if (!block) {
+        return blocks;
+    }
+    const updatedBlock = rest.length === 0
+        ? updater(block)
+        : (0, blockTypes_1.isNestableRichTextBlock)(block)
+            ? withNestableBlockChildren(block, updateBlockAtPath(block.children ?? [], rest, updater))
+            : block;
+    return [...blocks.slice(0, index), updatedBlock, ...blocks.slice(index + 1)];
+}
+function insertBlockAtPath(blocks, parentPath, index, insertedBlocks) {
+    if (parentPath.length === 0) {
+        return [
+            ...blocks.slice(0, index),
+            ...insertedBlocks,
+            ...blocks.slice(index),
+        ];
+    }
+    return updateBlockAtPath(blocks, parentPath, (parent) => {
+        if (!(0, blockTypes_1.isNestableRichTextBlock)(parent)) {
+            return parent;
+        }
+        return withNestableBlockChildren(parent, [
+            ...(parent.children ?? []).slice(0, index),
+            ...insertedBlocks,
+            ...(parent.children ?? []).slice(index),
+        ]);
+    });
+}
+function pathContains(parentPath, childPath) {
+    return parentPath.every((index, pathIndex) => childPath[pathIndex] === index);
+}
+function withNestableBlockChildren(block, children) {
+    if (block.type === "toggle") {
+        return { ...block, children };
+    }
+    if (children.length > 0) {
+        return { ...block, children };
+    }
+    const { children: _children, ...rest } = block;
+    return rest;
+}
+function withBlockChildren(block, children) {
+    return (0, blockTypes_1.isNestableRichTextBlock)(block)
+        ? withNestableBlockChildren(block, children)
+        : block;
+}

package/dist-cjs/core/blockTypes.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NESTABLE_RICH_TEXT_BLOCK_TYPES = void 0;
+exports.isNestableRichTextBlock = isNestableRichTextBlock;
+exports.NESTABLE_RICH_TEXT_BLOCK_TYPES = new Set(["bullet", "ordered", "checkbox", "toggle"]);
+function isNestableRichTextBlock(block) {
+    return (!!block &&
+        exports.NESTABLE_RICH_TEXT_BLOCK_TYPES.has(block.type));
+}

package/dist-cjs/core/exportImport.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.richTextJsonImportAdapter = exports.richTextJsonExportAdapter = void 0;
+exports.exportRichTextBlocks = exportRichTextBlocks;
+exports.importRichTextBlocks = importRichTextBlocks;
+const features_1 = require("./features");
+const richText_1 = require("./richText");
+exports.richTextJsonExportAdapter = {
+    extension: "json",
+    exportBlocks: (blocks) => ({
+        data: JSON.stringify((0, richText_1.sanitizeRichTextBlocks)(blocks), null, 2),
+        extension: "json",
+        format: "bayon-rich-text-json",
+        mimeType: "application/json",
+    }),
+    id: "bayon-rich-text-json",
+    label: "Bayon rich text JSON",
+    mimeType: "application/json",
+};
+exports.richTextJsonImportAdapter = {
+    extension: "json",
+    id: "bayon-rich-text-json",
+    importData: (data) => JSON.parse(data),
+    label: "Bayon rich text JSON",
+    mimeType: "application/json",
+};
+async function exportRichTextBlocks({ adapter, blocks, features, }) {
+    const gate = getExportImportGate(features);
+    if (gate) {
+        return { gate, ok: false };
+    }
+    return {
+        ok: true,
+        value: adapter.exportBlocks((0, richText_1.sanitizeRichTextBlocks)(blocks)),
+    };
+}
+async function importRichTextBlocks({ adapter, data, features, }) {
+    const gate = getExportImportGate(features);
+    if (gate) {
+        return { gate, ok: false };
+    }
+    return {
+        ok: true,
+        value: (0, richText_1.sanitizeRichTextBlocks)(adapter.importData(data)),
+    };
+}
+function getExportImportGate(features) {
+    const access = (0, features_1.getRichTextFeatureAccess)(features, "export-import");
+    return access.enabled
+        ? null
+        : {
+            featureId: access.featureId,
+            label: access.label,
+            reason: access.reason,
+        };
+}

package/dist-cjs/core/features.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.richTextEditorFeatureCatalog = void 0;
+exports.getRichTextFeatureAccess = getRichTextFeatureAccess;
+exports.isRichTextFeatureEnabled = isRichTextFeatureEnabled;
+exports.richTextEditorFeatureCatalog = {
+    "image-upload": {
+        label: "Image upload",
+        tier: "free",
+    },
+    transcription: {
+        label: "Transcription",
+        tier: "free",
+    },
+    "export-import": {
+        label: "Export and import",
+        tier: "pro",
+    },
+    comments: {
+        label: "Comments",
+        tier: "pro",
+    },
+    "review-marks": {
+        label: "Review marks",
+        tier: "pro",
+    },
+    "schema-migrations": {
+        label: "Schema migrations",
+        tier: "pro",
+    },
+    templates: {
+        label: "Templates",
+        tier: "pro",
+    },
+    collaboration: {
+        label: "Collaboration",
+        tier: "pro",
+    },
+};
+function getRichTextFeatureAccess(features, featureId) {
+    const feature = exports.richTextEditorFeatureCatalog[featureId];
+    const enabled = features?.[featureId] ?? true;
+    if (enabled) {
+        return {
+            enabled: true,
+            featureId,
+            label: feature.label,
+            reason: undefined,
+            tier: feature.tier,
+        };
+    }
+    return {
+        enabled: false,
+        featureId,
+        label: feature.label,
+        reason: feature.tier === "pro" ? "premium" : "disabled",
+        tier: feature.tier,
+    };
+}
+function isRichTextFeatureEnabled(features, featureId) {
+    return getRichTextFeatureAccess(features, featureId).enabled;
+}

package/dist-cjs/core/proFeatures.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runRichTextSchemaMigrations = runRichTextSchemaMigrations;
+exports.instantiateRichTextTemplate = instantiateRichTextTemplate;
+exports.connectRichTextCollaboration = connectRichTextCollaboration;
+exports.createRichTextAnnotations = createRichTextAnnotations;
+const features_1 = require("./features");
+const richText_1 = require("./richText");
+async function runRichTextSchemaMigrations({ blocks, features, migrations, }) {
+    const gate = getProFeatureGate(features, "schema-migrations");
+    if (gate) {
+        return { gate, ok: false };
+    }
+    let nextBlocks = (0, richText_1.sanitizeRichTextBlocks)(blocks);
+    const appliedMigrationIds = [];
+    for (const migration of migrations) {
+        nextBlocks = (0, richText_1.sanitizeRichTextBlocks)(migration.migrate(nextBlocks));
+        appliedMigrationIds.push(migration.id);
+    }
+    return {
+        ok: true,
+        value: { appliedMigrationIds, blocks: nextBlocks },
+    };
+}
+async function instantiateRichTextTemplate({ features, template, variables, }) {
+    const gate = getProFeatureGate(features, "templates");
+    if (gate) {
+        return { gate, ok: false };
+    }
+    return {
+        ok: true,
+        value: (0, richText_1.sanitizeRichTextBlocks)(template.createBlocks(variables)),
+    };
+}
+async function connectRichTextCollaboration({ adapter, blocks, features, }) {
+    const gate = getProFeatureGate(features, "collaboration");
+    if (gate) {
+        return { gate, ok: false };
+    }
+    return {
+        ok: true,
+        value: await adapter.connect({ blocks: (0, richText_1.sanitizeRichTextBlocks)(blocks) }),
+    };
+}
+function createRichTextAnnotations({ annotations, features, }) {
+    const reviewGate = annotations.some((annotation) => annotation.kind === "review-mark")
+        ? getProFeatureGate(features, "review-marks")
+        : null;
+    const commentGate = annotations.some((annotation) => annotation.kind === "comment")
+        ? getProFeatureGate(features, "comments")
+        : null;
+    const gate = reviewGate ?? commentGate;
+    if (gate) {
+        return { gate, ok: false };
+    }
+    return {
+        ok: true,
+        value: annotations.filter((annotation) => annotation.id.trim() && annotation.blockId.trim()),
+    };
+}
+function getProFeatureGate(features, featureId) {
+    const access = (0, features_1.getRichTextFeatureAccess)(features, featureId);
+    return access.enabled
+        ? null
+        : {
+            featureId: access.featureId,
+            label: access.label,
+            reason: access.reason,
+        };
+}