@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.75005e4

package/src/editor/selectors/node-selector.tsx

@@ -0,0 +1,157 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorBubbleItem } from "../components";
+import { useTranslation } from "../../hooks/useTranslation";
+
+import {
+    Button,
+    CheckBoxIcon,
+    CheckIcon,
+    CodeIcon,
+    FormatListBulletedIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    KeyboardArrowDownIcon,
+    Looks3Icon,
+    LooksOneIcon,
+    LooksTwoIcon,
+    Popover,
+    TextFieldsIcon
+} from "@firecms/ui";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { isNodeActive } from "../utils/prosemirror-utils";
+import { schema } from "../schema";
+import { setBlockType, wrapIn } from "prosemirror-commands";
+import { wrapInList } from "prosemirror-schema-list";
+
+export type SelectorItem = {
+    name: string;
+    labelKey: string;
+    icon: React.ElementType;
+    command: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+    isActive: (state: EditorState) => boolean;
+};
+
+const items: SelectorItem[] = [
+    {
+        name: "Text",
+        labelKey: "editor_text",
+        icon: TextFieldsIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.paragraph)(state, dispatch),
+        isActive: (state) =>
+            isNodeActive(state, schema.nodes.paragraph) &&
+            !isNodeActive(state, schema.nodes.bullet_list) &&
+            !isNodeActive(state, schema.nodes.ordered_list),
+    },
+    {
+        name: "Heading 1",
+        labelKey: "editor_heading_1",
+        icon: LooksOneIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 1 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 1 }),
+    },
+    {
+        name: "Heading 2",
+        labelKey: "editor_heading_2",
+        icon: LooksTwoIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 2 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 2 }),
+    },
+    {
+        name: "Heading 3",
+        labelKey: "editor_heading_3",
+        icon: Looks3Icon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 3 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 3 }),
+    },
+    {
+        name: "To-do List",
+        labelKey: "editor_todo_list",
+        icon: CheckBoxIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.task_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.task_item),
+    },
+    {
+        name: "Bullet List",
+        labelKey: "editor_bullet_list",
+        icon: FormatListBulletedIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.bullet_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.bullet_list),
+    },
+    {
+        name: "Numbered List",
+        labelKey: "editor_numbered_list",
+        icon: FormatListNumberedIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.ordered_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.ordered_list),
+    },
+    {
+        name: "Quote",
+        labelKey: "editor_quote",
+        icon: FormatQuoteIcon,
+        command: (state, dispatch) => wrapIn(schema.nodes.blockquote)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.blockquote),
+    },
+    {
+        name: "Code",
+        labelKey: "editor_code",
+        icon: CodeIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.code_block)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.code_block),
+    },
+];
+
+interface NodeSelectorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    portalContainer: HTMLElement | null;
+}
+
+export const NodeSelector = ({
+    open,
+    onOpenChange,
+    portalContainer
+}: NodeSelectorProps) => {
+    const { state, view } = useProseMirrorContext();
+    const { t } = useTranslation();
+    if (!state || !view) return null;
+
+    const activeItem = items.filter((item) => item.isActive(state)).pop() ?? {
+        name: "Multiple",
+        labelKey: "editor_multiple",
+    };
+
+    return (
+        <Popover
+            sideOffset={5}
+            align="start"
+            portalContainer={portalContainer}
+            className="w-48 p-1"
+            trigger={<Button variant="text"
+                className="gap-2 rounded-none"
+                color="text">
+                <span className="whitespace-nowrap text-sm">{t(activeItem.labelKey)}</span>
+                <KeyboardArrowDownIcon size={"small"} />
+            </Button>}
+            modal={true}
+            open={open}
+            onOpenChange={onOpenChange}>
+            {items.map((item, index) => (
+                <EditorBubbleItem
+                    key={index}
+                    onSelect={() => {
+                        item.command(view.state, view.dispatch);
+                        view.focus();
+                        onOpenChange(false);
+                    }}
+                    className="flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white"
+                >
+                    <div className="flex items-center space-x-2">
+                        <item.icon size="smallest" />
+                        <span>{t(item.labelKey)}</span>
+                    </div>
+                    {activeItem.name === item.name && <CheckIcon size="smallest" />}
+                </EditorBubbleItem>
+            ))}
+        </Popover>
+    );
+};

package/src/editor/selectors/text-buttons.tsx

@@ -0,0 +1,86 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorBubbleItem } from "../components";
+import type { SelectorItem } from "./node-selector";
+import {
+    Button,
+    cls,
+    CodeIcon,
+    FormatBoldIcon,
+    FormatItalicIcon,
+    FormatStrikethroughIcon,
+    FormatUnderlinedIcon
+} from "@firecms/ui";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { isMarkActive } from "../utils/prosemirror-utils";
+import { schema } from "../schema";
+import { toggleMark } from "prosemirror-commands";
+
+export const TextButtons = () => {
+    const { state, view } = useProseMirrorContext();
+    if (!state || !view) return null;
+
+    // We pass state directly to isActive, and dispatch to command
+    const items = [
+        {
+            name: "bold",
+            labelKey: "editor_bold",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.bold),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.bold)(s, dispatch),
+            icon: FormatBoldIcon,
+        },
+        {
+            name: "italic",
+            labelKey: "editor_italic",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.italic),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.italic)(s, dispatch),
+            icon: FormatItalicIcon,
+        },
+        {
+            name: "underline",
+            labelKey: "editor_underline",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.underline),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.underline)(s, dispatch),
+            icon: FormatUnderlinedIcon,
+        },
+        {
+            name: "strike",
+            labelKey: "editor_strikethrough",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.strike),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.strike)(s, dispatch),
+            icon: FormatStrikethroughIcon,
+        },
+        {
+            name: "code",
+            labelKey: "editor_code",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.code),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.code)(s, dispatch),
+            icon: CodeIcon,
+        },
+    ];
+
+    return (
+        <div className="flex">
+            {items.map((item, index) => (
+                <EditorBubbleItem
+                    key={index}
+                    onSelect={() => {
+                        item.command(view.state, view.dispatch);
+                        view.focus();
+                    }}
+                >
+                    <Button size={"small"}
+                        color="text"
+                        className="gap-2 rounded-none h-full"
+                        variant="text">
+                        <item.icon
+                            className={cls({
+                                "text-inherit": !item.isActive(state),
+                                "text-blue-500": item.isActive(state),
+                            })}
+                        />
+                    </Button>
+                </EditorBubbleItem>
+            ))}
+        </div>
+    );
+};

package/src/editor/types.ts

@@ -0,0 +1,6 @@
+import { JSONContent } from "./components";
+export type { JSONContent };
+
+export type EditorAIController = {
+    autocomplete: (textBefore: string, textAfter: string, onUpdate: (delta: string) => void) => Promise<string>;
+}

package/src/editor/useProseMirror.ts

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from "react";
+import { EditorState, Transaction, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "./schema";
+import { markdownParser, markdownSerializer } from "./markdown";
+import { removeClassesFromJson } from "./utils/remove_classes";
+import { DOMParser as ProseMirrorDOMParser, DOMSerializer } from "prosemirror-model";
+
+export interface UseProseMirrorOptions {
+    content?: any;
+    plugins?: Plugin[];
+    editable?: boolean;
+    onMarkdownContentChange?: (content: string) => void;
+    onJsonContentChange?: (content: any | null) => void;
+    onHtmlContentChange?: (content: string) => void;
+    version?: number;
+}
+
+export function useProseMirror(options: UseProseMirrorOptions) {
+    const mountRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView | null>(null);
+    const [editorState, setEditorState] = useState<EditorState | null>(null);
+    const isUpdatingContentRef = useRef(false);
+
+    useEffect(() => {
+        if (!mountRef.current) return;
+
+        let doc;
+        try {
+            if (typeof options.content === "string") {
+                if (options.content.trim() === "") {
+                    doc = schema.node("doc", null, [schema.node("paragraph")]);
+                } else if (options.content.startsWith("<")) {
+                    const temp = document.createElement("div");
+                    temp.innerHTML = options.content;
+                    doc = ProseMirrorDOMParser.fromSchema(schema).parse(temp);
+                } else {
+                    doc = markdownParser.parse(options.content);
+                }
+            } else if (options.content && typeof options.content === "object" && Object.keys(options.content).length > 0) {
+                doc = schema.nodeFromJSON(options.content);
+            } else {
+                doc = schema.node("doc", null, [schema.node("paragraph")]);
+            }
+        } catch (e) {
+            console.warn("Failed to parse initial content, falling back to empty doc", e);
+            doc = schema.node("doc", null, [schema.node("paragraph")]);
+        }
+
+        const state = EditorState.create({
+            doc,
+            schema,
+            plugins: options.plugins || [],
+        });
+
+        const view = new EditorView(mountRef.current, {
+            state,
+            editable: () => options.editable !== false,
+            dispatchTransaction(transaction: Transaction) {
+                const newState = view.state.apply(transaction);
+                view.updateState(newState);
+                setEditorState(newState);
+
+                if (transaction.docChanged && !isUpdatingContentRef.current) {
+
+                    if (options.onMarkdownContentChange) {
+                        options.onMarkdownContentChange(markdownSerializer.serialize(newState.doc));
+                    }
+                    if (options.onJsonContentChange) {
+                        options.onJsonContentChange(removeClassesFromJson(newState.doc.toJSON()));
+                    }
+                    if (options.onHtmlContentChange) {
+                        const div = document.createElement("div");
+                        const fragment = DOMSerializer.fromSchema(schema).serializeFragment(newState.doc.content);
+                        div.appendChild(fragment);
+                        options.onHtmlContentChange(div.innerHTML);
+                    }
+                }
+            },
+        });
+
+
+
+
+
+        viewRef.current = view;
+        setEditorState(state);
+
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []); // Initialize once
+
+    // Handle external content updates (like version change)
+    useEffect(() => {
+        if (!viewRef.current || options.version === undefined || options.version <= 0) return;
+        try {
+            isUpdatingContentRef.current = true;
+            let doc;
+            if (typeof options.content === "string") {
+                doc = markdownParser.parse(options.content) || schema.node("doc", null, [schema.node("paragraph")]);
+            } else if (options.content) {
+                doc = schema.nodeFromJSON(options.content);
+            } else {
+                doc = schema.node("doc", null, [schema.node("paragraph")]);
+            }
+
+            const tr = viewRef.current.state.tr.replaceWith(0, viewRef.current.state.doc.content.size, doc);
+            viewRef.current.dispatch(tr);
+            isUpdatingContentRef.current = false;
+        } catch (e) {
+            console.error("Error updating content manually via version bump:", e);
+            isUpdatingContentRef.current = false;
+        }
+    }, [options.version]);
+
+    // Handle editable prop change
+    useEffect(() => {
+        if (viewRef.current && editorState) {
+            viewRef.current.setProps({ editable: () => options.editable !== false });
+        }
+    }, [options.editable, editorState]);
+
+    return { mountRef, view: viewRef.current, editorState };
+}

package/src/editor/utils/prosemirror-utils.ts

@@ -0,0 +1,78 @@
+import { EditorState } from "prosemirror-state";
+
+export function isMarkActive(state: EditorState, type: any) {
+    if (!state || !type) return false;
+    const { from, $from, to, empty } = state.selection;
+    if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
+    return state.doc.rangeHasMark(from, to, type);
+}
+
+export function isNodeActive(state: EditorState, type: any, attrs: any = {}) {
+    if (!state || !type) return false;
+    const { $from, to, node } = state.selection as any;
+    if (node) {
+        return node.type === type && (!attrs || Object.keys(attrs).every((key) => node.attrs[key] === attrs[key]));
+    }
+    return to <= $from.end() && $from.parent.type === type && (!attrs || Object.keys(attrs).every((key) => $from.parent.attrs[key] === attrs[key]));
+}
+
+export function getMarkAttributes(state: EditorState, type: any) {
+    if (!state || !type) return {};
+    const { from, $from, to, empty } = state.selection;
+    let mark;
+    if (empty) {
+        mark = type.isInSet(state.storedMarks || $from.marks());
+    } else {
+        let found = false;
+        state.doc.nodesBetween(from, to, (node) => {
+            if (found) return false;
+            const m = type.isInSet(node.marks);
+            if (m) {
+                mark = m;
+                found = true;
+            }
+            return true;
+        });
+    }
+    return mark ? mark.attrs : {};
+}
+
+export function setMark(type: any, attrs?: any) {
+    return (state: EditorState, dispatch?: (tr: any) => void) => {
+        const { empty, $cursor, ranges } = state.selection as any;
+        if ((empty && !$cursor) || !type) return false;
+        if (dispatch) {
+            if ($cursor) {
+                dispatch(state.tr.addStoredMark(type.create(attrs)));
+            } else {
+                let tr = state.tr;
+                for (let i = 0; i < ranges.length; i++) {
+                    let { $from, $to } = ranges[i];
+                    tr.addMark($from.pos, $to.pos, type.create(attrs));
+                }
+                dispatch(tr.scrollIntoView());
+            }
+        }
+        return true;
+    };
+}
+
+export function unsetMark(type: any) {
+    return (state: EditorState, dispatch?: (tr: any) => void) => {
+        const { empty, $cursor, ranges } = state.selection as any;
+        if ((empty && !$cursor) || !type) return false;
+        if (dispatch) {
+            if ($cursor) {
+                dispatch(state.tr.removeStoredMark(type));
+            } else {
+                let tr = state.tr;
+                for (let i = 0; i < ranges.length; i++) {
+                    let { $from, $to } = ranges[i];
+                    tr.removeMark($from.pos, $to.pos, type);
+                }
+                dispatch(tr.scrollIntoView());
+            }
+        }
+        return true;
+    };
+}

package/src/editor/utils/remove_classes.ts

@@ -0,0 +1,17 @@
+export function removeClassesFromJson(jsonObj: any): any {
+    // If it's an array, apply the function to each element
+    if (Array.isArray(jsonObj)) {
+        return jsonObj.map(item => removeClassesFromJson(item));
+    } else if (typeof jsonObj === "object" && jsonObj !== null) { // If it's an object, recurse through its properties
+        // If the object has an `attrs` property and `class` field, delete the `class` field
+        if (jsonObj.attrs && typeof jsonObj.attrs === "object" && "class" in jsonObj.attrs) {
+            delete jsonObj.attrs.class;
+        }
+
+        // Apply the function recursively to object properties
+        Object.keys(jsonObj).forEach(key => {
+            jsonObj[key] = removeClassesFromJson(jsonObj[key]);
+        });
+    }
+    return jsonObj;
+}

package/src/editor/utils/useDebouncedCallback.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
+
+    const pendingUpdate = React.useRef(false);
+    const performUpdate = () => {
+        callback();
+        pendingUpdate.current = false;
+    };
+
+    const handlerRef = React.useRef<number | undefined>(undefined);
+
+    React.useEffect(
+        () => {
+            pendingUpdate.current = true;
+            clearTimeout(handlerRef.current);
+            handlerRef.current = setTimeout(performUpdate, timeoutMs) as any;
+            return () => {
+                if (immediate)
+                    performUpdate();
+            };
+        },
+        [immediate, value]
+    );
+}