@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/editor/use-editor-port.js

@@ -0,0 +1,40 @@
+import { editorBlockMoves, moveEditorBlock, } from '@fastsprout/reacd/adapter-runtime/core/editor-reorder.js';
+import { publishEditorDocument } from './publish-edit.js';
+import { selectedSdkBlockId } from '../editor-sdk/structural-selection.js';
+import { selectSdkBlock } from '../editor-sdk/select-block.js';
+import { canRunSdkCommand, runSdkCommand, sdkCommandActive, } from '../editor-sdk/commands.js';
+import { sdkSelectionToDomain } from '../editor-sdk/selection-mapping.js';
+export function createEditorPort(editor, properties, disabled, drag) {
+    const available = !disabled && editor !== null && !editor.isDestroyed;
+    const selection = editor === null
+        ? undefined
+        : sdkSelectionToDomain(editor.state.doc, editor.state.selection);
+    return {
+        document: properties.value,
+        selection,
+        selectedBlockId: (editor === null ? undefined : selectedSdkBlockId(editor.state.selection)) ??
+            selection?.focus.blockId,
+        disabled: !available,
+        active: (command) => available && sdkCommandActive(editor, command),
+        available: (command) => available && canRunSdkCommand(editor, command),
+        execute: (command) => {
+            if (available)
+                runSdkCommand(editor, command);
+        },
+        blockMoves: (id) => editorBlockMoves(properties.value, id),
+        selectBlock: (id) => {
+            if (!available)
+                return;
+            selectSdkBlock(editor, id);
+        },
+        moveBlock: (id, direction) => {
+            if (!available)
+                return;
+            const moved = moveEditorBlock(properties.value, id, direction);
+            if (moved.success)
+                publishEditorDocument(properties, moved.data, selection);
+        },
+        beginBlockDrag: (id) => available && drag.begin(properties.value, id),
+        cancelBlockDrag: () => drag.cancel(),
+    };
+}

package/dist/shared/editor/use-editor-session.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from '@tiptap/core';
+import type { EditorProps } from '@fastsprout/reacd/adapter-runtime/components/editor/index.js';
+export declare function useEditorSession(input: EditorProps, id: string): {
+    editor: Editor | null;
+    ready: boolean;
+    issue: string | undefined;
+    protectedView: boolean;
+    drag: {
+        begin(document: import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument, id: string): boolean;
+        cancel(): void;
+        drop(document: import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument, target: EventTarget | null, clientY: number, root: HTMLElement): import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument | undefined;
+    };
+    properties: EditorProps;
+};

package/dist/shared/editor/use-editor-session.js

@@ -0,0 +1,198 @@
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEditor } from '@tiptap/react';
+import { EDITOR_BEHAVIOR, EDITOR_ERRORS, } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { editorDocumentToSdk } from '../editor-conversion/to-sdk.js';
+import { editorDocumentFromSdk } from '../editor-conversion/from-sdk.js';
+import { createEditorExtensions } from '../editor-sdk/extensions.js';
+import { domainSelectionToSdk, sdkSelectionToDomain, } from '../editor-sdk/selection-mapping.js';
+import { buildEditorPlainPaste } from '../editor-sdk/plain-paste.js';
+import { applyEditorPlainPaste } from '../editor-sdk/apply-paste.js';
+import { createEditorDragSession } from './drag-session.js';
+import { EDITOR_NATIVE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-native-policy.js';
+import { sameEditorSelection } from '../editor-sdk/controlled-selection.js';
+import { selectedSdkBlockId, sdkBlockPosition, } from '../editor-sdk/structural-selection.js';
+import { publishEditorDocument } from './publish-edit.js';
+import { createEditorResources } from '../editor-sdk/resources.js';
+const CONTROLLED_TRANSACTION = EDITOR_NATIVE_POLICY.controlledTransaction;
+export function useEditorSession(input, id) {
+    const metadata = useFieldMetadata({ disabled: input.disabled }, [
+        `${id}-description`,
+    ]);
+    const properties = { ...input, disabled: metadata.disabled };
+    const active = useContext(PortalActiveContext);
+    const [drag] = useState(createEditorDragSession);
+    const [resources] = useState(createEditorResources);
+    useEffect(() => () => resources.dispose(), [resources]);
+    const [ready, setReady] = useState(false);
+    const [issue, setIssue] = useState();
+    const [revision, setRevision] = useState(0);
+    const hydrated = useRef(undefined);
+    const refresh = () => setRevision((previous) => previous + 1);
+    const [extensions] = useState(() => createEditorExtensions({
+        onRejected: () => setIssue(EDITOR_ERRORS.rejected),
+    }));
+    const protectedView = !active || properties.disabled === true || properties.readOnly === true;
+    const editor = useEditor({
+        extensions,
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+        injectCSS: false,
+        enableInputRules: EDITOR_BEHAVIOR.automaticInputRules,
+        content: editorDocumentToSdk(properties.value),
+        editable: !protectedView,
+        onBeforeCreate: ({ editor: current }) => resources.capture(current),
+        onCreate: () => setReady(true),
+        onTransaction: ({ transaction }) => {
+            if (transaction.getMeta(CONTROLLED_TRANSACTION) ||
+                (!transaction.docChanged && transaction.storedMarksSet))
+                refresh();
+        },
+        onUpdate: ({ editor: current, transaction }) => {
+            try {
+                if (protectedView || transaction.getMeta(CONTROLLED_TRANSACTION))
+                    return;
+                const projected = editorDocumentFromSdk(current.state.doc);
+                if (!projected.success) {
+                    setIssue(EDITOR_ERRORS.projection);
+                    return;
+                }
+                setIssue(undefined);
+                if (!publishEditorDocument(properties, projected.data, sdkSelectionToDomain(current.state.doc, current.state.selection)))
+                    setIssue(EDITOR_NATIVE_POLICY.selectionError);
+            }
+            finally {
+                refresh();
+            }
+        },
+        onSelectionUpdate: ({ editor: current, transaction }) => {
+            if (transaction.docChanged)
+                return;
+            try {
+                if (!active ||
+                    properties.disabled === true ||
+                    transaction.getMeta(CONTROLLED_TRANSACTION))
+                    return;
+                if (properties.onEditChange === undefined ||
+                    !current.state.doc.eq(current.schema.nodeFromJSON(editorDocumentToSdk(properties.value))))
+                    return;
+                const selection = sdkSelectionToDomain(current.state.doc, current.state.selection);
+                if (selection !== undefined &&
+                    !sameEditorSelection(selection, properties.selection))
+                    publishEditorDocument(properties, properties.value, selection);
+            }
+            finally {
+                refresh();
+            }
+        },
+        editorProps: {
+            attributes: {
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-labelledby': `${id}-label`,
+                'aria-describedby': metadata.descriptionIds.join(' '),
+                'aria-invalid': String(metadata.error.length > 0),
+                'aria-placeholder': properties.placeholder ?? '',
+                'aria-readonly': String(properties.readOnly === true),
+                'aria-disabled': String(properties.disabled === true || !active),
+                tabindex: properties.disabled === true || !active ? '-1' : '0',
+                'data-placeholder': properties.placeholder ?? '',
+            },
+            handlePaste: (view, event) => {
+                if (protectedView)
+                    return true;
+                const clipboard = event.clipboardData;
+                if (clipboard === null)
+                    return true;
+                const projected = buildEditorPlainPaste(clipboard.getData('text/plain'), view.state.selection.$from.parent.type.name === 'codeBlock'
+                    ? 'code'
+                    : 'inline');
+                if (!projected.success) {
+                    setIssue(EDITOR_ERRORS.rejected);
+                    return true;
+                }
+                if (projected.data.length > 0)
+                    applyEditorPlainPaste(view, projected.data);
+                return true;
+            },
+            handleDrop: (view, event) => {
+                if (protectedView) {
+                    drag.cancel();
+                    return true;
+                }
+                const next = drag.drop(properties.value, event.target, event.clientY, view.dom);
+                if (next !== undefined && next !== properties.value)
+                    publishEditorDocument(properties, next, sdkSelectionToDomain(view.state.doc, view.state.selection));
+                return true;
+            },
+        },
+    });
+    useEffect(() => () => drag.cancel(), [drag]);
+    useLayoutEffect(() => {
+        if (editor === null || !ready)
+            return;
+        const value = editor.schema.nodeFromJSON(editorDocumentToSdk(properties.value));
+        const previous = hydrated.current;
+        if (previous !== undefined &&
+            previous.document.eq(value) &&
+            sameEditorSelection(previous.selection, properties.selection) &&
+            previous.protectedView === protectedView &&
+            previous.revision === revision)
+            return;
+        hydrated.current = {
+            document: value,
+            selection: properties.selection,
+            protectedView,
+            revision,
+        };
+        if (editor.isEditable !== !protectedView)
+            editor.setEditable(!protectedView, false);
+        if (protectedView)
+            drag.cancel();
+        const changed = !editor.state.doc.eq(value);
+        const selectedBlock = selectedSdkBlockId(editor.state.selection);
+        const logical = sdkSelectionToDomain(editor.state.doc, editor.state.selection);
+        if (changed)
+            editor
+                .chain()
+                .setMeta(CONTROLLED_TRANSACTION, true)
+                .setMeta('addToHistory', false)
+                .setContent(value, { emitUpdate: false, errorOnInvalidContent: true })
+                .run();
+        const selection = properties.selection ?? logical;
+        const controlled = properties.selection !== undefined;
+        if (selection !== undefined &&
+            ((controlled &&
+                !sameEditorSelection(sdkSelectionToDomain(editor.state.doc, editor.state.selection), selection)) ||
+                (!controlled && changed))) {
+            const structural = !controlled && selectedBlock !== undefined
+                ? sdkBlockPosition(editor.state.doc, selectedBlock)
+                : undefined;
+            const mapped = domainSelectionToSdk(editor.state.doc, selection);
+            if (structural !== undefined)
+                editor
+                    .chain()
+                    .setMeta(CONTROLLED_TRANSACTION, true)
+                    .setMeta('addToHistory', false)
+                    .setNodeSelection(structural)
+                    .run();
+            else if (mapped.success)
+                editor
+                    .chain()
+                    .setMeta(CONTROLLED_TRANSACTION, true)
+                    .setMeta('addToHistory', false)
+                    .setTextSelection({ from: mapped.data.anchor, to: mapped.data.head })
+                    .run();
+        }
+    }, [
+        editor,
+        ready,
+        protectedView,
+        properties.value,
+        properties.selection,
+        drag,
+        revision,
+    ]);
+    return { editor, ready, issue, protectedView, drag, properties };
+}

package/dist/shared/editor-conversion/attribute.d.ts

@@ -0,0 +1,3 @@
+export declare function sdkAttribute(entity: {
+    readonly attrs: Readonly<Record<string, unknown>>;
+}, key: string): unknown;

package/dist/shared/editor-conversion/attribute.js

@@ -0,0 +1,3 @@
+export function sdkAttribute(entity, key) {
+    return entity.attrs[key];
+}

package/dist/shared/editor-conversion/budget.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from '@tiptap/pm/model';
+export declare function boundedSdkDocument(document: Node): boolean;

package/dist/shared/editor-conversion/budget.js

@@ -0,0 +1,61 @@
+import { EDITOR_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { EDITOR_SDK_BLOCK_TYPES } from '../editor-sdk/block-types.js';
+import { sdkProjectionWeight } from './projection-weight.js';
+const BLOCKS = new Set(EDITOR_SDK_BLOCK_TYPES);
+const INLINE_CONTAINERS = new Set(['paragraph', 'heading', 'codeBlock']);
+export function boundedSdkDocument(document) {
+    if (document.type.name !== 'doc')
+        return false;
+    const pending = [];
+    const ancestry = new WeakSet();
+    let values = 0;
+    let characters = 0;
+    let blocks = 0;
+    let positions = 0;
+    function reserve(node, depth, inCode) {
+        if (ancestry.has(node) ||
+            depth > EDITOR_POLICY.maxDepth ||
+            positions >= EDITOR_POLICY.maxValues)
+            return false;
+        const limit = INLINE_CONTAINERS.has(node.type.name)
+            ? EDITOR_POLICY.maxInlines
+            : EDITOR_POLICY.maxChildren;
+        if (node.childCount > limit ||
+            node.marks.length > EDITOR_POLICY.maxMarks + EDITOR_POLICY.maxLinksPerText)
+            return false;
+        const weight = sdkProjectionWeight(node, inCode);
+        values += weight.values;
+        characters += weight.characters;
+        blocks += BLOCKS.has(node.type.name) ? 1 : 0;
+        positions += 1;
+        if (depth + weight.extraDepth > EDITOR_POLICY.maxDepth ||
+            values > EDITOR_POLICY.maxValues ||
+            positions > EDITOR_POLICY.maxValues ||
+            characters > EDITOR_POLICY.maxCharacters ||
+            blocks > EDITOR_POLICY.maxBlocks)
+            return false;
+        pending.push({ node, depth, inCode, leaving: false });
+        return true;
+    }
+    try {
+        if (!reserve(document, 0, false))
+            return false;
+        for (let position = pending.pop(); position !== undefined; position = pending.pop()) {
+            const { node, depth } = position;
+            if (position.leaving) {
+                ancestry.delete(node);
+                continue;
+            }
+            ancestry.add(node);
+            pending.push({ ...position, leaving: true });
+            const inCode = node.type.name === 'codeBlock';
+            for (let index = node.childCount - 1; index >= 0; index -= 1)
+                if (!reserve(node.child(index), depth + (inCode ? 1 : 2), inCode))
+                    return false;
+        }
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/shared/editor-conversion/from-sdk-block.d.ts

@@ -0,0 +1,5 @@
+import type { Node } from '@tiptap/pm/model';
+type Allocator = (node: Node) => string;
+export declare function sdkChildren(node: Node, project: (child: Node) => unknown): unknown[];
+export declare function blockFromSdk(node: Node, identify: Allocator): unknown;
+export {};

package/dist/shared/editor-conversion/from-sdk-block.js

@@ -0,0 +1,73 @@
+import { z } from 'zod';
+import { EDITOR_SDK_BLOCK_TYPES } from '../editor-sdk/block-types.js';
+import { sdkAttribute } from './attribute.js';
+import { inlineContentFromSdk } from './from-sdk-inline.js';
+const blockType = z.enum(EDITOR_SDK_BLOCK_TYPES);
+export function sdkChildren(node, project) {
+    const children = [];
+    node.forEach((child) => {
+        children.push(project(child));
+    });
+    return children;
+}
+const projectors = {
+    paragraph(node, identify) {
+        return {
+            type: 'paragraph',
+            id: identify(node),
+            content: inlineContentFromSdk(node),
+        };
+    },
+    heading(node, identify) {
+        return {
+            type: 'heading',
+            id: identify(node),
+            level: sdkAttribute(node, 'level'),
+            content: inlineContentFromSdk(node),
+        };
+    },
+    blockquote(node, identify) {
+        return {
+            type: 'quote',
+            id: identify(node),
+            children: sdkChildren(node, (child) => blockFromSdk(child, identify)),
+        };
+    },
+    codeBlock(node, identify) {
+        const language = sdkAttribute(node, 'language');
+        return {
+            type: 'codeBlock',
+            id: identify(node),
+            text: node.textContent,
+            ...(language == null ? {} : { language }),
+        };
+    },
+    bulletList(node, identify) {
+        return {
+            type: 'bulletList',
+            id: identify(node),
+            items: sdkChildren(node, (child) => blockFromSdk(child, identify)),
+        };
+    },
+    orderedList(node, identify) {
+        return {
+            type: 'orderedList',
+            id: identify(node),
+            start: sdkAttribute(node, 'start'),
+            items: sdkChildren(node, (child) => blockFromSdk(child, identify)),
+        };
+    },
+    listItem(node, identify) {
+        return {
+            type: 'listItem',
+            id: identify(node),
+            children: sdkChildren(node, (child) => blockFromSdk(child, identify)),
+        };
+    },
+    horizontalRule(node, identify) {
+        return { type: 'separator', id: identify(node) };
+    },
+};
+export function blockFromSdk(node, identify) {
+    return projectors[blockType.parse(node.type.name)](node, identify);
+}

package/dist/shared/editor-conversion/from-sdk-inline.d.ts

@@ -0,0 +1,3 @@
+import type { Node } from '@tiptap/pm/model';
+export declare function inlineFromSdk(node: Node): unknown[];
+export declare function inlineContentFromSdk(node: Node): unknown[];

package/dist/shared/editor-conversion/from-sdk-inline.js

@@ -0,0 +1,57 @@
+import { z } from 'zod';
+import { EDITOR_MARKS } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { sdkAttribute } from './attribute.js';
+import { editorTextChunks } from './text-chunks.js';
+const inlineType = z.enum(['text', 'hardBreak', 'reacdMention', 'reacdEmoji']);
+const markType = z.enum([...EDITOR_MARKS, 'link']);
+const projectors = {
+    text(node) {
+        const marks = [];
+        let link;
+        for (const mark of node.marks) {
+            const type = markType.parse(mark.type.name);
+            if (type === 'link')
+                link = sdkAttribute(mark, 'href');
+            else
+                marks.push(type);
+        }
+        const text = z.string().parse(node.text);
+        return [...editorTextChunks(text)].map(({ from, to }) => ({
+            type: 'text',
+            text: text.slice(from, to),
+            ...(marks.length === 0 ? {} : { marks: [...marks] }),
+            ...(link === undefined ? {} : { link }),
+        }));
+    },
+    hardBreak() {
+        return [{ type: 'hardBreak' }];
+    },
+    reacdMention(node) {
+        return [
+            {
+                type: 'mention',
+                id: sdkAttribute(node, 'id'),
+                label: sdkAttribute(node, 'label'),
+            },
+        ];
+    },
+    reacdEmoji(node) {
+        return [
+            {
+                type: 'emoji',
+                name: sdkAttribute(node, 'name'),
+                value: sdkAttribute(node, 'value'),
+            },
+        ];
+    },
+};
+export function inlineFromSdk(node) {
+    return projectors[inlineType.parse(node.type.name)](node);
+}
+export function inlineContentFromSdk(node) {
+    const content = [];
+    node.forEach((child) => {
+        content.push(...inlineFromSdk(child));
+    });
+    return content;
+}

package/dist/shared/editor-conversion/from-sdk.d.ts

@@ -0,0 +1,4 @@
+import type { Node } from '@tiptap/pm/model';
+import type { EditorDocument } from '@fastsprout/reacd/adapter-runtime/core/editor-document.js';
+import type { Result } from '@fastsprout/reacd/adapter-runtime/core/result.js';
+export declare function editorDocumentFromSdk(document: Node): Result<EditorDocument>;

package/dist/shared/editor-conversion/from-sdk.js

@@ -0,0 +1,35 @@
+import { EDITOR_ERRORS, EDITOR_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { editorDocumentSchema } from '@fastsprout/reacd/adapter-runtime/schema/editor/document/index.js';
+import { boundedSdkDocument } from './budget.js';
+import { blockFromSdk, sdkChildren } from './from-sdk-block.js';
+import { createSdkIdAllocator } from './id-allocator.js';
+function failure() {
+    return {
+        success: false,
+        issues: [{ path: 'Editor.value', message: EDITOR_ERRORS.projection }],
+    };
+}
+export function editorDocumentFromSdk(document) {
+    if (!boundedSdkDocument(document))
+        return failure();
+    try {
+        document.check();
+        const identify = createSdkIdAllocator(document);
+        const parsed = editorDocumentSchema.safeParse({
+            version: EDITOR_POLICY.version,
+            blocks: sdkChildren(document, (node) => blockFromSdk(node, identify)),
+        });
+        return parsed.success
+            ? { success: true, data: parsed.data }
+            : {
+                success: false,
+                issues: parsed.error.issues.map((issue) => ({
+                    path: ['Editor', 'value', ...issue.path].map(String).join('.'),
+                    message: issue.message,
+                })),
+            };
+    }
+    catch {
+        return failure();
+    }
+}

package/dist/shared/editor-conversion/id-allocator.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from '@tiptap/pm/model';
+export declare function createSdkIdAllocator(document: Node): (node: Node) => string;

package/dist/shared/editor-conversion/id-allocator.js

@@ -0,0 +1,29 @@
+import { EDITOR_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { stateKeySchema } from '@fastsprout/reacd/adapter-runtime/schema/state/shared/definition.js';
+import { EDITOR_SDK_BLOCK_TYPES } from '../editor-sdk/block-types.js';
+import { sdkAttribute } from './attribute.js';
+const BLOCKS = new Set(EDITOR_SDK_BLOCK_TYPES);
+const identitySchema = stateKeySchema.nullish();
+export function createSdkIdAllocator(document) {
+    const used = new Set();
+    document.descendants((node) => {
+        if (!BLOCKS.has(node.type.name))
+            return;
+        const id = identitySchema.parse(sdkAttribute(node, 'reacdId'));
+        if (id != null)
+            used.add(id);
+    });
+    let ordinal = 0;
+    return (node) => {
+        const current = identitySchema.parse(sdkAttribute(node, 'reacdId'));
+        if (current != null)
+            return current;
+        let id;
+        do {
+            ordinal += 1;
+            id = `${EDITOR_POLICY.blockIdPrefix}-${ordinal}`;
+        } while (used.has(id));
+        used.add(id);
+        return id;
+    };
+}

package/dist/shared/editor-conversion/projection-weight.d.ts

@@ -0,0 +1,8 @@
+import type { Node } from '@tiptap/pm/model';
+interface Weight {
+    values: number;
+    characters: number;
+    extraDepth: number;
+}
+export declare function sdkProjectionWeight(node: Node, inCode: boolean): Weight;
+export {};