@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/editor-conversion/projection-weight.js

@@ -0,0 +1,124 @@
+import { z } from 'zod';
+import { EDITOR_MARKS, EDITOR_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { CONTENT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { linkSchema } from '@fastsprout/reacd/adapter-runtime/schema/link/link.schema.js';
+import { stateKeySchema } from '@fastsprout/reacd/adapter-runtime/schema/state/shared/definition.js';
+import { editorTextChunks } from './text-chunks.js';
+const markSchema = z.enum(EDITOR_MARKS);
+const optionalId = stateKeySchema.nullish();
+function attribute(node, key) {
+    return node.attrs[key];
+}
+function textAttribute(node, key) {
+    return z.string().parse(attribute(node, key));
+}
+function identity(node) {
+    const parsed = optionalId.parse(attribute(node, 'reacdId'));
+    return parsed ?? `${EDITOR_POLICY.blockIdPrefix}-${EDITOR_POLICY.maxBlocks}`;
+}
+function fieldsWeight(fields) {
+    const entries = Object.entries(fields);
+    return {
+        values: entries.length + 1,
+        characters: entries.reduce((size, [key, value]) => size + key.length + (typeof value === 'string' ? value.length : 0), 0),
+        extraDepth: 1,
+    };
+}
+export function sdkProjectionWeight(node, inCode) {
+    const type = node.type.name;
+    if (inCode) {
+        if (type !== 'text')
+            throw new Error('Invalid code child.');
+        const text = z.string().max(EDITOR_POLICY.maxTextLength).parse(node.text);
+        return { values: 0, characters: text.length, extraDepth: 0 };
+    }
+    switch (type) {
+        case 'doc':
+            return fieldsWeight({ version: EDITOR_POLICY.version, blocks: null });
+        case 'paragraph':
+            return fieldsWeight({ type, id: identity(node), content: null });
+        case 'heading':
+            return fieldsWeight({
+                type,
+                id: identity(node),
+                content: null,
+                level: z.number().parse(attribute(node, 'level')),
+            });
+        case 'blockquote':
+            return fieldsWeight({ type: 'quote', id: identity(node), children: null });
+        case 'bulletList':
+            return fieldsWeight({ type, id: identity(node), items: null });
+        case 'orderedList':
+            return fieldsWeight({
+                type,
+                id: identity(node),
+                items: null,
+                start: z.number().parse(attribute(node, 'start')),
+            });
+        case 'listItem':
+            return fieldsWeight({ type, id: identity(node), children: null });
+        case 'horizontalRule':
+            return fieldsWeight({ type: 'separator', id: identity(node) });
+        case 'codeBlock': {
+            const language = z.string().nullish().parse(attribute(node, 'language'));
+            return fieldsWeight({
+                type,
+                id: identity(node),
+                text: '',
+                ...(language == null ? {} : { language }),
+            });
+        }
+        case 'hardBreak':
+            return fieldsWeight({ type });
+        case 'reacdMention':
+            return fieldsWeight({
+                type: 'mention',
+                id: textAttribute(node, 'id'),
+                label: textAttribute(node, 'label'),
+            });
+        case 'reacdEmoji':
+            return fieldsWeight({
+                type: 'emoji',
+                name: textAttribute(node, 'name'),
+                value: textAttribute(node, 'value'),
+            });
+        case 'text': {
+            const text = z.string().min(1).max(EDITOR_POLICY.maxCharacters).parse(node.text);
+            const result = fieldsWeight({ type, text: '' });
+            let marks = 0;
+            for (const mark of node.marks) {
+                if (mark.type.name === 'link') {
+                    const target = mark.attrs['href'];
+                    if (typeof target !== 'string' ||
+                        target.length > CONTENT_POLICY.maxLinkLength)
+                        throw new Error('Invalid editor link.');
+                    const href = linkSchema.shape.href.parse(target);
+                    result.values += 1;
+                    result.characters += 'link'.length + href.length;
+                }
+                else {
+                    const name = markSchema.parse(mark.type.name);
+                    marks += 1;
+                    result.values += 1;
+                    result.characters += name.length;
+                }
+            }
+            if (marks > 0) {
+                result.values += 1;
+                result.characters += 'marks'.length;
+                result.extraDepth = 2;
+            }
+            let chunks = 0;
+            let characters = 0;
+            for (const chunk of editorTextChunks(text)) {
+                chunks += 1;
+                characters += chunk.to - chunk.from;
+            }
+            result.values *= chunks;
+            result.characters = result.characters * chunks + characters;
+            return result;
+        }
+        default:
+            throw new Error('Unsupported editor node.');
+    }
+}

package/dist/shared/editor-conversion/text-chunks.d.ts

@@ -0,0 +1,6 @@
+interface TextChunk {
+    readonly from: number;
+    readonly to: number;
+}
+export declare function editorTextChunks(text: string): Generator<TextChunk>;
+export {};

package/dist/shared/editor-conversion/text-chunks.js

@@ -0,0 +1,18 @@
+import { EDITOR_POLICY, EDITOR_UNICODE, } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+export function* editorTextChunks(text) {
+    let from = 0;
+    while (from < text.length) {
+        let to = Math.min(from + EDITOR_POLICY.maxTextLength, text.length);
+        if (to < text.length) {
+            const previous = text.charCodeAt(to - 1);
+            const next = text.charCodeAt(to);
+            if (previous >= EDITOR_UNICODE.highSurrogateMin &&
+                previous <= EDITOR_UNICODE.highSurrogateMax &&
+                next >= EDITOR_UNICODE.lowSurrogateMin &&
+                next <= EDITOR_UNICODE.lowSurrogateMax)
+                to -= 1;
+        }
+        yield { from, to };
+        from = to;
+    }
+}

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

@@ -0,0 +1,3 @@
+import type { JSONContent } from '@tiptap/core';
+import type { EditorDocument } from '@fastsprout/reacd/adapter-runtime/core/editor-document.js';
+export declare function editorDocumentToSdk(document: EditorDocument): JSONContent;

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

@@ -0,0 +1,58 @@
+function inlineToSdk(inline) {
+    if (inline.type === 'hardBreak')
+        return { type: 'hardBreak' };
+    if (inline.type === 'mention')
+        return { type: 'reacdMention', attrs: { id: inline.id, label: inline.label } };
+    if (inline.type === 'emoji')
+        return { type: 'reacdEmoji', attrs: { name: inline.name, value: inline.value } };
+    const marks = (inline.marks ?? []).map((mark) => ({
+        type: mark,
+    }));
+    if (inline.link !== undefined)
+        marks.push({ type: 'link', attrs: { href: inline.link } });
+    return { type: 'text', text: inline.text, ...(marks.length === 0 ? {} : { marks }) };
+}
+function itemToSdk(item) {
+    return {
+        type: 'listItem',
+        attrs: { reacdId: item.id },
+        content: item.children.map(blockToSdk),
+    };
+}
+function blockToSdk(block) {
+    const attrs = { reacdId: block.id };
+    switch (block.type) {
+        case 'paragraph':
+            return { type: 'paragraph', attrs, content: block.content.map(inlineToSdk) };
+        case 'heading':
+            return {
+                type: 'heading',
+                attrs: { ...attrs, level: block.level },
+                content: block.content.map(inlineToSdk),
+            };
+        case 'quote':
+            return { type: 'blockquote', attrs, content: block.children.map(blockToSdk) };
+        case 'codeBlock':
+            return {
+                type: 'codeBlock',
+                attrs: {
+                    ...attrs,
+                    ...(block.language === undefined ? {} : { language: block.language }),
+                },
+                content: block.text.length === 0 ? [] : [{ type: 'text', text: block.text }],
+            };
+        case 'bulletList':
+            return { type: 'bulletList', attrs, content: block.items.map(itemToSdk) };
+        case 'orderedList':
+            return {
+                type: 'orderedList',
+                attrs: { ...attrs, start: block.start },
+                content: block.items.map(itemToSdk),
+            };
+        case 'separator':
+            return { type: 'horizontalRule', attrs };
+    }
+}
+export function editorDocumentToSdk(document) {
+    return { type: 'doc', content: document.blocks.map(blockToSdk) };
+}

package/dist/shared/editor-drag-handle/editor-drag-handle.adapter.d.ts

@@ -0,0 +1,2 @@
+import type * as Handle from '@fastsprout/reacd/adapter-runtime/components/editor-drag-handle/index.js';
+export declare function SharedEditorDragHandle({ label, blockId, disabled, }: Handle.EditorDragHandleProps): import("react").JSX.Element;

package/dist/shared/editor-drag-handle/editor-drag-handle.adapter.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { editorBlockIds } from '@fastsprout/reacd/adapter-runtime/core/editor-blocks.js';
+import { EDITOR_DRAG_POLICY as P } from '@fastsprout/reacd/adapter-runtime/core/editor-drag-handle-policy.js';
+import { EditorScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/editor/editor-context.js';
+import { Issues } from '@fastsprout/reacd/adapter-runtime/renderer/issues/issues.renderer.js';
+import { Button } from '../primitives/button.js';
+import { useDragSession } from './use-drag-session.js';
+function issue(message) {
+    return _jsx(Issues, { issues: [{ path: 'EditorDragHandle', message }] });
+}
+export function SharedEditorDragHandle({ label, blockId, disabled, }) {
+    const id = useId();
+    const port = useContext(EditorScopeContext);
+    const target = blockId ?? port?.selectedBlockId;
+    const known = port !== null &&
+        target !== undefined &&
+        editorBlockIds(port.document).includes(target);
+    const blocked = disabled === true || port === null || port.disabled || !known;
+    const session = useDragSession(target, blocked);
+    if (port === null)
+        return issue(P.scopeError);
+    if (target === undefined)
+        return issue(P.selectionError);
+    if (!known)
+        return issue(P.unknownError);
+    const moves = port.blockMoves(target);
+    const canDrag = !blocked && (moves.up || moves.down);
+    const selectLabel = canDrag ? P.selectAndDrag : P.select;
+    return (_jsxs("div", { className: "reacd-node reacd-editor-drag-handle", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": `${id}-help`, "aria-disabled": blocked || undefined, children: [_jsx("p", { id: `${id}-label`, children: label }), _jsx("p", { id: `${id}-help`, children: blocked
+                    ? P.protectedInstructions
+                    : canDrag
+                        ? P.instructions
+                        : P.fixedInstructions }), _jsxs("div", { className: "reacd-editor-drag-controls", children: [_jsx(Button, { type: "button", className: "reacd-button", variant: "outline", disabled: blocked, draggable: canDrag, "aria-label": `${label}: ${selectLabel}`, onClick: () => port.selectBlock(target), onDragStart: (event) => {
+                            session.finish();
+                            if (!canDrag || !port.beginBlockDrag(target)) {
+                                event.preventDefault();
+                                return;
+                            }
+                            session.start({ id: target, cancel: () => port.cancelBlockDrag() });
+                            try {
+                                event.dataTransfer.effectAllowed = P.moveEffect;
+                                event.dataTransfer.setData(P.mimeType, target);
+                            }
+                            catch {
+                                session.finish();
+                                event.preventDefault();
+                            }
+                        }, onDragEnd: () => session.finish(), onKeyDown: (event) => {
+                            if (event.key === 'Escape' && session.finish()) {
+                                event.preventDefault();
+                            }
+                        }, children: selectLabel }), _jsx(Button, { type: "button", className: "reacd-button", variant: "outline", disabled: blocked || !moves.up, "aria-label": `${label}: ${P.up}`, onClick: () => port.moveBlock(target, 'up'), children: P.up }), _jsx(Button, { type: "button", className: "reacd-button", variant: "outline", disabled: blocked || !moves.down, "aria-label": `${label}: ${P.down}`, onClick: () => port.moveBlock(target, 'down'), children: P.down })] })] }));
+}

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

@@ -0,0 +1,9 @@
+interface DragOwner {
+    readonly id: string;
+    readonly cancel: () => void;
+}
+export declare function useDragSession(id: string | undefined, blocked: boolean): {
+    start: (session: DragOwner) => void;
+    finish: () => boolean;
+};
+export {};

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

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+export function useDragSession(id, blocked) {
+    const owner = useRef(null);
+    const finish = useCallback(() => {
+        const previous = owner.current;
+        owner.current = null;
+        previous?.cancel();
+        return previous !== null;
+    }, []);
+    useEffect(() => () => {
+        finish();
+    }, [finish]);
+    useLayoutEffect(() => {
+        if (owner.current && (owner.current.id !== id || blocked))
+            finish();
+    }, [id, blocked, finish]);
+    function start(session) {
+        finish();
+        owner.current = session;
+    }
+    return { start, finish };
+}

package/dist/shared/editor-emoji-menu/editor-emoji-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { EditorEmojiMenuProps } from '@fastsprout/reacd/adapter-runtime/components/editor-emoji-menu/index.js';
+export declare function SharedEditorEmojiMenu(properties: EditorEmojiMenuProps): import("react").JSX.Element;

package/dist/shared/editor-emoji-menu/editor-emoji-menu.adapter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useEditorMenu } from '../editor-menu/use-editor-menu.js';
+import { EditorMenuPanel } from '../editor-menu/menu-panel.js';
+export function SharedEditorEmojiMenu(properties) {
+    const items = useMemo(() => properties.items.map((item) => ({ ...item, kind: 'emoji' })), [properties.items]);
+    const menu = useEditorMenu('emoji', items, properties.disabled);
+    return _jsx(EditorMenuPanel, { label: properties.label, ...menu });
+}

package/dist/shared/editor-mention-menu/editor-mention-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { EditorMentionMenuProps } from '@fastsprout/reacd/adapter-runtime/components/editor-mention-menu/index.js';
+export declare function SharedEditorMentionMenu(properties: EditorMentionMenuProps): import("react").JSX.Element;

package/dist/shared/editor-mention-menu/editor-mention-menu.adapter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useEditorMenu } from '../editor-menu/use-editor-menu.js';
+import { EditorMenuPanel } from '../editor-menu/menu-panel.js';
+const EMPTY = Object.freeze([]);
+export function SharedEditorMentionMenu(properties) {
+    const catalog = properties.items ?? EMPTY;
+    const items = useMemo(() => catalog.map((item) => ({ ...item, kind: 'mention' })), [catalog]);
+    const lookup = useMemo(() => properties.onQueryChange === undefined
+        ? undefined
+        : {
+            results: properties.results,
+            onQueryChange: properties.onQueryChange,
+        }, [properties.results, properties.onQueryChange]);
+    const menu = useEditorMenu('mention', items, properties.disabled, lookup);
+    return _jsx(EditorMenuPanel, { label: properties.label, ...menu });
+}

package/dist/shared/editor-menu/lookup-controller.d.ts

@@ -0,0 +1,24 @@
+import type { EditorMentionLookupRequest, EditorMentionLookupResult } from '@fastsprout/reacd/adapter-runtime/schema/editor-mention-menu/lookup.schema.js';
+import type * as mention from '@fastsprout/reacd/adapter-runtime/schema/editor-mention-menu/item.schema.js';
+export interface EditorMentionLookupView {
+    readonly request: EditorMentionLookupRequest | undefined;
+    readonly status: 'loading' | 'ready' | 'error';
+    readonly items: readonly mention.EditorMentionItem[];
+    readonly error: string | undefined;
+}
+export interface EditorMentionLookupState {
+    readonly scope: string;
+    readonly ordinal: bigint;
+    readonly current: EditorMentionLookupRequest | undefined;
+    readonly accepted: EditorMentionLookupResult | undefined;
+}
+interface LookupTransition {
+    readonly state: EditorMentionLookupState;
+    readonly view: EditorMentionLookupView;
+}
+export declare function advanceMentionLookup(state: EditorMentionLookupState, query: string, result: EditorMentionLookupResult | null): LookupTransition;
+export declare function createMentionLookupController(scope: string): {
+    close(): void;
+    update(query: string, result: EditorMentionLookupResult | null): EditorMentionLookupView;
+};
+export {};

package/dist/shared/editor-menu/lookup-controller.js

@@ -0,0 +1,83 @@
+import { EDITOR_LOOKUP_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-lookup-policy.js';
+import { editorMentionLookupScopeSchema, editorMentionLookupQuerySchema, editorMentionLookupRequestSchema, } from '@fastsprout/reacd/adapter-runtime/schema/editor-mention-menu/lookup.schema.js';
+const EMPTY_ITEMS = Object.freeze([]);
+function closeState(state, ordinal) {
+    return Object.freeze({
+        scope: state.scope,
+        ordinal,
+        current: undefined,
+        accepted: undefined,
+    });
+}
+function errorTransition(state, ordinal, error) {
+    return Object.freeze({
+        state: closeState(state, ordinal),
+        view: Object.freeze({
+            request: undefined,
+            status: 'error',
+            items: EMPTY_ITEMS,
+            error,
+        }),
+    });
+}
+function resultView(request, result) {
+    return Object.freeze({
+        request,
+        status: result?.status ?? 'loading',
+        items: result?.status === 'ready' ? result.items : EMPTY_ITEMS,
+        error: result?.status === 'error' ? result.error : undefined,
+    });
+}
+export function advanceMentionLookup(state, query, result) {
+    const parsedScope = editorMentionLookupScopeSchema.safeParse(state.scope);
+    if (!parsedScope.success)
+        return errorTransition(state, state.ordinal, EDITOR_LOOKUP_POLICY.invalidScopeMessage);
+    const parsedQuery = editorMentionLookupQuerySchema.safeParse(query);
+    if (!parsedQuery.success)
+        return errorTransition(state, state.ordinal, EDITOR_LOOKUP_POLICY.invalidQueryMessage);
+    let ordinal = state.ordinal;
+    let current = state.current;
+    let accepted = state.accepted;
+    let request;
+    if (current === undefined || current.query !== parsedQuery.data) {
+        ordinal += 1n;
+        const generated = editorMentionLookupRequestSchema.safeParse({
+            key: `${parsedScope.data}${EDITOR_LOOKUP_POLICY.keySeparator}${ordinal}`,
+            query: parsedQuery.data,
+        });
+        if (!generated.success)
+            return errorTransition(state, ordinal, EDITOR_LOOKUP_POLICY.invalidRequestMessage);
+        current = generated.data;
+        accepted = undefined;
+        request = current;
+    }
+    if (result !== null &&
+        result.key === current.key &&
+        result.query === current.query &&
+        (result.status !== 'loading' ||
+            accepted === undefined ||
+            accepted.status === 'loading'))
+        accepted = result;
+    return Object.freeze({
+        state: Object.freeze({ scope: state.scope, ordinal, current, accepted }),
+        view: resultView(request, accepted),
+    });
+}
+export function createMentionLookupController(scope) {
+    let state = Object.freeze({
+        scope,
+        ordinal: BigInt(EDITOR_LOOKUP_POLICY.initialOrdinal),
+        current: undefined,
+        accepted: undefined,
+    });
+    return {
+        close() {
+            state = closeState(state, state.ordinal);
+        },
+        update(query, result) {
+            const next = advanceMentionLookup(state, query, result);
+            state = next.state;
+            return next.view;
+        },
+    };
+}

package/dist/shared/editor-menu/menu-panel.d.ts

@@ -0,0 +1,10 @@
+import type { EditorMenuSnapshot } from './menu-store.js';
+interface MenuPanelProps {
+    readonly label: string;
+    readonly listId: string;
+    readonly orphan: boolean;
+    readonly snapshot: EditorMenuSnapshot;
+    readonly choose: (index: number) => void;
+}
+export declare function EditorMenuPanel({ label, listId, orphan, snapshot, choose, }: MenuPanelProps): import("react").JSX.Element | null;
+export {};

package/dist/shared/editor-menu/menu-panel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EDITOR_MENU_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-menu-policy.js';
+import { Issues } from '@fastsprout/reacd/adapter-runtime/renderer/issues/issues.renderer.js';
+export function EditorMenuPanel({ label, listId, orphan, snapshot, choose, }) {
+    if (orphan)
+        return (_jsx(Issues, { issues: [{ path: 'EditorMenu', message: EDITOR_MENU_POLICY.scopeError }] }));
+    if (snapshot === undefined)
+        return null;
+    if ('issues' in snapshot)
+        return _jsx(Issues, { issues: snapshot.issues });
+    const { items, selected, status, error } = snapshot.view;
+    return (_jsxs("div", { className: "reacd-node reacd-editor-menu", children: [_jsx("p", { id: `${listId}-label`, children: label }), _jsx("div", { role: "listbox", id: listId, "aria-labelledby": `${listId}-label`, "aria-busy": status === 'loading', children: items.map((item, index) => (_jsx("button", { type: "button", role: "option", id: `${listId}-${index}`, tabIndex: -1, "aria-selected": index === selected, disabled: item.disabled === true, onMouseDown: (event) => event.preventDefault(), onClick: () => choose(index), children: item.label }, item.kind === 'suggestion'
+                    ? item.value.command
+                    : item.kind === 'mention'
+                        ? item.id
+                        : item.name))) }), status === 'loading' && _jsx("p", { role: "status", children: EDITOR_MENU_POLICY.loading }), status === 'error' && _jsx("p", { role: "alert", children: error }), status === 'ready' && items.length === 0 && (_jsx("p", { role: "status", children: EDITOR_MENU_POLICY.empty }))] }));
+}

package/dist/shared/editor-menu/menu-plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from '@tiptap/core';
+import type { EditorMenuLease, EditorMenuRequest } from '@fastsprout/reacd/adapter-runtime/renderer/editor/menu-context.js';
+export declare function mountEditorMenu(editor: Editor, request: EditorMenuRequest, released: () => void): EditorMenuLease;