@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.75005e4

package/src/editor/hooks/useProseMirror.ts

@@ -0,0 +1,115 @@
+import { useState, useEffect, useRef, useLayoutEffect } from "react";
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "../schema";
+import { corePlugins } from "../plugins";
+import { parser } from "../markdown";
+import { nodeViews } from "../nodeViews";
+import { createDropImagePlugin } from "../extensions/Image";
+
+interface UseProseMirrorProps {
+    initialContent?: string | any;
+    onChange?: (state: EditorState, view: EditorView) => void;
+    editable?: boolean;
+    handleImageUpload?: (file: File) => Promise<string>;
+}
+
+export function useProseMirror({ initialContent, onChange, editable = true, handleImageUpload }: UseProseMirrorProps) {
+    // Store onChange in a ref so that the latest version is always called inside
+    // the dispatchTransaction closure (which only runs once at mount with [] deps).
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    const plugins = [...corePlugins];
+    if (handleImageUpload) {
+        plugins.push(createDropImagePlugin(handleImageUpload));
+    }
+
+    const defaultState = EditorState.create({
+        doc: typeof initialContent === "string"
+            ? parser.parse(initialContent)
+            : initialContent
+                ? schema.nodeFromJSON(initialContent)
+                : schema.node("doc", null, [schema.node("paragraph")]),
+        schema,
+        plugins
+    });
+
+    const [state, setState] = useState<EditorState>(defaultState);
+    const [view, setView] = useState<EditorView | null>(null);
+
+    const editorRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView | null>(null);
+
+    useLayoutEffect(() => {
+        if (!editorRef.current) return;
+
+        const editorView = new EditorView(editorRef.current, {
+            state: defaultState,
+            editable: () => editable,
+            dispatchTransaction: (tr: Transaction) => {
+                const newState = editorView.state.apply(tr);
+                editorView.updateState(newState);
+                setState(newState);
+                onChangeRef.current?.(newState, editorView);
+            },
+            nodeViews: nodeViews,
+            transformPastedHTML(html: string) {
+                // Strip inline styles and classes from pasted HTML so we don't
+                // get textStyle marks (color, font-size, etc.) that have no
+                // markdown representation. This makes paste look consistent.
+                const div = document.createElement("div");
+                div.innerHTML = html;
+                div.querySelectorAll("*").forEach((el) => {
+                    el.removeAttribute("style");
+                    el.removeAttribute("class");
+                    el.removeAttribute("color");
+                    el.removeAttribute("bgcolor");
+                    el.removeAttribute("face");
+                });
+                return div.innerHTML;
+            },
+        });
+
+        // Patch posAtCoords to allow dropping/interacting anywhere horizontally natively
+        const originalPosAtCoords = editorView.posAtCoords.bind(editorView);
+        editorView.posAtCoords = (coords: { left: number, top: number }) => {
+            let res = originalPosAtCoords(coords);
+            if (!res) {
+                const editorRect = editorView.dom.getBoundingClientRect();
+                // If it's literally anywhere to the left of the actual ProseMirror content block
+                if (coords.left <= editorRect.left) {
+                    const probeX = editorRect.left + Math.min(60, editorRect.width / 4);
+                    return originalPosAtCoords({ left: probeX, top: coords.top });
+                }
+                // Or if it's anywhere to the right
+                if (coords.left >= editorRect.right) {
+                    const probeX = editorRect.right - Math.min(60, editorRect.width / 4);
+                    return originalPosAtCoords({ left: probeX, top: coords.top });
+                }
+            }
+            return res;
+        };
+
+        viewRef.current = editorView;
+        setView(editorView);
+
+        return () => {
+            editorView.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+
+    // Effect to update editable status without re-mounting
+    useEffect(() => {
+        if (viewRef.current) {
+            viewRef.current.setProps({ editable: () => editable });
+        }
+    }, [editable]);
+
+    return {
+        state,
+        view,
+        editorRef
+    };
+}

package/src/editor/hooks/useProseMirrorContext.ts

@@ -0,0 +1,15 @@
+import React, { createContext, useContext } from "react";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+
+export interface ProseMirrorContextType {
+    state: EditorState | null;
+    view: EditorView | null;
+}
+
+export const ProseMirrorContext = createContext<ProseMirrorContextType>({
+    state: null,
+    view: null,
+});
+
+export const useProseMirrorContext = () => useContext(ProseMirrorContext);

package/src/editor/index.ts

@@ -0,0 +1,2 @@
+export * from "./editor";
+export * from "./types";

package/src/editor/markdown.ts

@@ -0,0 +1,110 @@
+import {
+    MarkdownParser,
+    MarkdownSerializer,
+    defaultMarkdownParser,
+    defaultMarkdownSerializer
+} from "prosemirror-markdown";
+import markdownIt from "markdown-it";
+// @ts-ignore
+import markdownItTaskLists from "markdown-it-task-lists";
+// @ts-ignore
+import markdownItMark from "markdown-it-mark";
+// @ts-ignore
+import markdownItIns from "markdown-it-ins";
+
+import { schema } from "./schema";
+
+const parserTokens: any = {
+    ...defaultMarkdownParser.tokens,
+    em: { mark: "italic" },
+    strong: { mark: "bold" },
+    html_inline: { ignore: true, noCloseToken: true },
+    html_block: { ignore: true, noCloseToken: true },
+    s: {
+        mark: "strike",
+    },
+    task_list: {
+        block: "task_list",
+    },
+    task_item: {
+        block: "task_item",
+        getAttrs: (tok: any) => ({ checked: tok.attrGet("checked") === "true" }),
+    },
+    mark: {
+        mark: "highlight"
+    },
+    ins: {
+        mark: "underline"
+    }
+};
+
+const md = markdownIt({ html: false })
+    .use(markdownItTaskLists)
+    .use(markdownItMark)
+    .use(markdownItIns);
+
+// Unwrap images from paragraphs so they can be parsed as block nodes by ProseMirror
+md.core.ruler.after("inline", "image-to-block", (state: any) => {
+    const tokens = state.tokens;
+    for (let i = tokens.length - 2; i >= 1; i--) {
+        if (
+            tokens[i - 1] && tokens[i - 1].type === "paragraph_open" &&
+            tokens[i] && tokens[i].type === "inline" &&
+            tokens[i + 1] && tokens[i + 1].type === "paragraph_close"
+        ) {
+            const inlineTokens = tokens[i].children || [];
+            if (inlineTokens.length === 1 && inlineTokens[0].type === "image") {
+                state.tokens.splice(i - 1, 3, inlineTokens[0]);
+                // No need to adjust index when looping backward!
+            }
+        }
+    }
+});
+
+export const markdownParser = new MarkdownParser(schema, md, parserTokens);
+
+
+export const markdownSerializer = new MarkdownSerializer(
+    {
+        ...defaultMarkdownSerializer.nodes,
+        // Add custom serialization for task lists
+        task_list(state, node) {
+            state.renderList(node, "  ", () => "- ");
+        },
+        task_item(state, node) {
+            state.write(`[${node.attrs.checked ? "x" : " "}] `);
+            state.renderContent(node);
+        },
+        horizontal_rule(state, node) {
+            state.write(node.attrs.markup || "---");
+            state.closeBlock(node);
+        },
+        image(state, node) {
+            const src = node.attrs.src.replace(/ /g, "%20");
+            state.write("![" + state.esc(node.attrs.alt || "") + "](" + src.replace(/[\(\)]/g, "\\$&") +
+                (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : "") + ")");
+        }
+    },
+    {
+        ...defaultMarkdownSerializer.marks,
+        bold: defaultMarkdownSerializer.marks.strong,
+        italic: defaultMarkdownSerializer.marks.em,
+        strike: { open: "~~", close: "~~", mixable: true, expelEnclosingWhitespace: true },
+        highlight: { open: "==", close: "==", mixable: true, expelEnclosingWhitespace: true },
+        underline: { open: "++", close: "++", mixable: true, expelEnclosingWhitespace: true },
+        link: {
+            ...defaultMarkdownSerializer.marks.link,
+            close(state: any, mark, parent, index) {
+                const inAutolink = state.inAutolink;
+                state.inAutolink = undefined;
+                const href = mark.attrs.href.replace(/ /g, "%20");
+                return inAutolink ? ">"
+                    : "](" + href.replace(/[\(\)"]/g, "\\$&") + (mark.attrs.title ? ` "${mark.attrs.title.replace(/"/g, '\\"')}"` : "") + ")";
+            }
+        },
+        // textStyle (colored text from HTML) has no markdown equivalent — emit content as-is
+        textStyle: { open: "", close: "", mixable: true, expelEnclosingWhitespace: true },
+    }
+);
+export const parser = markdownParser;
+export const serializer = markdownSerializer;

package/src/editor/nodeViews/ImageComponent.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ReactNodeViewProps } from "./ReactNodeView";
+import { cls, defaultBorderMixin } from "@firecms/ui";
+
+export const ImageComponent: React.FC<ReactNodeViewProps> = ({ node, view, getPos }) => {
+    // If the node is selected
+    const selected = view.state.selection.from === getPos();
+
+    return (
+        <img
+            src={node.attrs.src}
+            alt={node.attrs.alt || ""}
+            title={node.attrs.title || ""}
+            className={cls(
+                "rounded-lg max-w-full !m-0",
+                selected ? "" : ""
+            )}
+        />
+    );
+};

package/src/editor/nodeViews/ReactNodeView.tsx

@@ -0,0 +1,89 @@
+import React, { ReactNode } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { Node as ProseMirrorNode } from "prosemirror-model";
+import { EditorView, NodeView } from "prosemirror-view";
+
+export interface ReactNodeViewProps {
+    node: ProseMirrorNode;
+    view: EditorView;
+    getPos: () => number | undefined;
+}
+
+export type ReactNodeViewComponent = React.FC<ReactNodeViewProps>;
+
+/**
+ * A utility class that implements the ProseMirror NodeView interface but delegates rendering
+ * to a React component.
+ * Note: This uses createRoot, so it does not automatically inherit React Contexts.
+ * If contexts are needed, wrap them manually or use a portal-based approach instead.
+ */
+export class ReactNodeView implements NodeView {
+    public node: ProseMirrorNode;
+    public view: EditorView;
+    public getPos: () => number | undefined;
+    public dom: HTMLElement;
+    public contentDOM?: HTMLElement;
+    private root: Root;
+    private Component: ReactNodeViewComponent;
+
+    constructor(
+        node: ProseMirrorNode,
+        view: EditorView,
+        getPos: () => number | undefined,
+        Component: ReactNodeViewComponent,
+        as: string = "div",
+        className?: string,
+        contentDOMElement?: HTMLElement
+    ) {
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.Component = Component;
+
+        this.dom = document.createElement(as);
+        if (className) this.dom.className = className;
+        if (contentDOMElement) {
+            this.contentDOM = contentDOMElement;
+        }
+
+        const container = document.createElement("div");
+        // We render React next to contentDOM
+        this.dom.appendChild(container);
+        if (this.contentDOM) {
+            this.dom.appendChild(this.contentDOM);
+        }
+
+        this.root = createRoot(container);
+        this.render();
+    }
+
+    private render() {
+        this.root.render(
+            <this.Component
+                node={this.node}
+                view={this.view}
+                getPos={this.getPos}
+            />
+        );
+    }
+
+    update(node: ProseMirrorNode): boolean {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        this.node = node;
+        this.render();
+        return true;
+    }
+
+    destroy() {
+        this.root.unmount();
+    }
+
+    ignoreMutation(mutation: any) {
+        if (!this.contentDOM) {
+            return true;
+        }
+        return !this.contentDOM.contains(mutation.target);
+    }
+}

package/src/editor/nodeViews/TaskItemComponent.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { ReactNodeViewProps } from "./ReactNodeView";
+
+export const TaskItemComponent: React.FC<ReactNodeViewProps> = ({ node, view, getPos }) => {
+    const checked = node.attrs.checked;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const pos = getPos();
+        if (typeof pos !== "number") return;
+
+        view.dispatch(
+            view.state.tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                checked: e.target.checked
+            })
+        );
+    };
+
+    return (
+        <label contentEditable={false} className="flex items-start select-none px-1">
+            <input
+                type="checkbox"
+                checked={checked}
+                onChange={handleChange}
+                className="mt-1 flex-shrink-0 cursor-pointer"
+            />
+        </label>
+    );
+};

package/src/editor/nodeViews/index.ts

@@ -0,0 +1,35 @@
+import { Node as ProseMirrorNode } from "prosemirror-model";
+import { EditorView, NodeView } from "prosemirror-view";
+import { ReactNodeView, ReactNodeViewComponent } from "./ReactNodeView";
+import { TaskItemComponent } from "./TaskItemComponent";
+import { ImageComponent } from "./ImageComponent";
+
+function createReactNodeView(
+    Component: ReactNodeViewComponent,
+    as: string = "div",
+    className?: string,
+    createContentDOM?: () => HTMLElement
+) {
+    return (node: ProseMirrorNode, view: EditorView, getPos: () => number | undefined): NodeView => {
+        const contentDOM = createContentDOM ? createContentDOM() : undefined;
+        return new ReactNodeView(node, view, getPos, Component, as, className, contentDOM);
+    };
+}
+
+export const nodeViews = {
+    task_item: createReactNodeView(
+        TaskItemComponent,
+        "li",
+        "flex items-start",
+        () => {
+            const dom = document.createElement("div");
+            dom.className = "flex-grow min-w-0";
+            return dom;
+        }
+    ),
+    image: createReactNodeView(
+        ImageComponent,
+        "span",
+        "inline-block w-full"
+    )
+};

package/src/editor/plugins/index.ts

@@ -0,0 +1,55 @@
+import { keymap } from "prosemirror-keymap";
+import { history, undo, redo } from "prosemirror-history";
+import { slashCommandPlugin } from "./slashCommandPlugin";
+import { dragHandlePlugin, globalDragDropPlugin } from "../extensions/drag-and-drop";
+import { baseKeymap, setBlockType, toggleMark, chainCommands, exitCode, joinUp, joinDown, lift, selectParentNode } from "prosemirror-commands";
+import { highlightDecorationPlugin } from "../extensions/HighlightDecorationExtension";
+import { textLoadingDecorationPlugin } from "../extensions/TextLoadingDecorationExtension";
+import { splitListItem, liftListItem, sinkListItem } from "prosemirror-schema-list";
+import { schema } from "../schema";
+import { Plugin } from "prosemirror-state";
+import { gapCursor } from "prosemirror-gapcursor";
+import { dropCursor } from "prosemirror-dropcursor";
+import { markdownInputRules } from "./inputrules";
+import { placeholderPlugin } from "./placeholderPlugin";
+
+const customKeymap = {
+    "Mod-z": undo,
+    "Mod-y": redo,
+    "Shift-Mod-z": redo,
+    "Mod-b": toggleMark(schema.marks.bold),
+    "Mod-i": toggleMark(schema.marks.italic),
+    "Mod-u": toggleMark(schema.marks.underline),
+    "Mod-Shift-s": toggleMark(schema.marks.strike),
+    "Mod-e": toggleMark(schema.marks.code),
+    "Mod-Shift-h": toggleMark(schema.marks.highlight),
+
+    "Enter": splitListItem(schema.nodes.list_item),
+    "Shift-Enter": splitListItem(schema.nodes.task_item),
+
+    "Mod-[": liftListItem(schema.nodes.list_item),
+    "Mod-]": sinkListItem(schema.nodes.list_item),
+
+    "Shift-Mod-8": setBlockType(schema.nodes.bullet_list),
+    "Shift-Mod-9": setBlockType(schema.nodes.ordered_list),
+
+    "Mod-Alt-1": setBlockType(schema.nodes.heading, { level: 1 }),
+    "Mod-Alt-2": setBlockType(schema.nodes.heading, { level: 2 }),
+    "Mod-Alt-3": setBlockType(schema.nodes.heading, { level: 3 }),
+
+    "Mod-Alt-0": setBlockType(schema.nodes.paragraph),
+};
+
+export const corePlugins: Plugin[] = [
+    history(),
+    keymap(customKeymap),
+    keymap(baseKeymap),
+    globalDragDropPlugin(),
+    gapCursor(),
+    slashCommandPlugin(),
+    dragHandlePlugin(),
+    highlightDecorationPlugin(),
+    textLoadingDecorationPlugin(),
+    markdownInputRules,
+    placeholderPlugin("Press '/' for commands")
+];

package/src/editor/plugins/inputrules.ts

@@ -0,0 +1,82 @@
+import {
+    inputRules,
+    wrappingInputRule,
+    textblockTypeInputRule,
+    smartQuotes,
+    emDash,
+    ellipsis,
+    InputRule,
+} from "prosemirror-inputrules";
+import { schema } from "../schema";
+import { MarkType } from "prosemirror-model";
+
+const blockQuoteRule = wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote);
+
+const orderedListRule = wrappingInputRule(
+    /^(\d+)\.\s$/,
+    schema.nodes.ordered_list,
+    (match) => ({ order: +match[1] }),
+    (match, node) => node.childCount + node.attrs.order === +match[1]
+);
+
+const bulletListRule = wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);
+
+const taskListRule = wrappingInputRule(/^\s*(\[ \])\s$/, schema.nodes.task_list);
+
+const codeBlockRule = textblockTypeInputRule(/^```$/, schema.nodes.code_block);
+
+const headingRule = textblockTypeInputRule(
+    new RegExp("^(#{1,6})\\s$"),
+    schema.nodes.heading,
+    (match) => ({ level: match[1].length })
+);
+
+const horizontalRuleInputRule = new InputRule(
+    /^(?:---|—-|___\s|\*\*\*\s)$/,
+    (state, match, start, end) => {
+        const tr = state.tr;
+        tr.replaceWith(start - 1, end, schema.nodes.horizontal_rule.create());
+        return tr;
+    }
+);
+
+function markInputRule(regexp: RegExp, markType: MarkType, getAttrs?: (match: RegExpMatchArray) => Record<string, any>) {
+    return new InputRule(regexp, (state, match, start, end) => {
+        const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
+        const tr = state.tr;
+        if (match[1]) {
+            const textStart = start + match[0].indexOf(match[1]);
+            const textEnd = textStart + match[1].length;
+            if (textEnd < end) tr.delete(textEnd, end);
+            if (textStart > start) tr.delete(start, textStart);
+            end = start + match[1].length;
+        }
+        tr.addMark(start, end, markType.create(attrs));
+        tr.removeStoredMark(markType);
+        return tr;
+    });
+}
+
+const strongRule = markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, schema.marks.bold);
+const emRule = markInputRule(/(?:^|[^*_])(?:\*|_)([^*_]+)(?:\*|_)$/, schema.marks.italic);
+const codeRule = markInputRule(/(?:`)([^`]+)(?:`)$/, schema.marks.code);
+const strikeRule = markInputRule(/(?:~~)([^~]+)(?:~~)$/, schema.marks.strike);
+
+export const markdownInputRules = inputRules({
+    rules: [
+        ...smartQuotes,
+        ellipsis,
+        emDash,
+        blockQuoteRule,
+        orderedListRule,
+        bulletListRule,
+        codeBlockRule,
+        headingRule,
+        taskListRule,
+        horizontalRuleInputRule,
+        strongRule,
+        emRule,
+        codeRule,
+        strikeRule
+    ],
+});

package/src/editor/plugins/placeholderPlugin.ts

@@ -0,0 +1,55 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Node } from "prosemirror-model";
+
+export const placeholderPluginKey = new PluginKey("placeholderPlugin");
+
+function isNodeEmpty(node: Node) {
+    const defaultContent = node.type.createAndFill()
+    if (!defaultContent) return true
+    return node.content.eq(defaultContent.content)
+}
+
+export function placeholderPlugin(text: string) {
+    return new Plugin({
+        key: placeholderPluginKey,
+        props: {
+            decorations: (state) => {
+                const doc = state.doc;
+                const decorations: Decoration[] = [];
+                const isEmptyDoc = doc.childCount === 1 && doc.firstChild?.isTextblock && doc.firstChild.content.size === 0;
+                const { anchor } = state.selection;
+
+                doc.descendants((node, pos) => {
+                    const isEmpty = !node.isLeaf && isNodeEmpty(node);
+
+                    if (isEmpty) {
+                        // Only show placeholder on the node that contains the cursor.
+                        // For a single-node empty doc, always show it (editor-empty state).
+                        const nodeEnd = pos + node.nodeSize;
+                        const hasCursor = anchor >= pos && anchor <= nodeEnd;
+
+                        if (!hasCursor && !isEmptyDoc) {
+                            return false;
+                        }
+
+                        const classes = ["is-empty"];
+                        if (isEmptyDoc) {
+                            classes.push("is-editor-empty");
+                        }
+
+                        decorations.push(
+                            Decoration.node(pos, pos + node.nodeSize, {
+                                class: classes.join(" "),
+                                "data-placeholder": text
+                            })
+                        );
+                    }
+                    return false; // Stop descending
+                });
+
+                return DecorationSet.create(doc, decorations);
+            }
+        }
+    });
+}

package/src/editor/plugins/slashCommandPlugin.ts

@@ -0,0 +1,49 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+
+export const SlashCommandPluginKey = new PluginKey("slash-command");
+
+export interface SlashCommandState {
+    active: boolean;
+    range?: { from: number; to: number };
+    query?: string;
+}
+
+export function slashCommandPlugin() {
+    return new Plugin({
+        key: SlashCommandPluginKey,
+        state: {
+            init(): SlashCommandState {
+                return { active: false };
+            },
+            apply(tr, value, oldState, newState): SlashCommandState {
+                const { selection } = newState;
+                if (!(selection instanceof TextSelection) || !selection.empty) {
+                    return { active: false };
+                }
+
+                // Make sure we are in a paragraph or heading block, not a code_block for example
+                const $anchor = selection.$anchor;
+                if ($anchor.parent.type.name === "code_block") {
+                    return { active: false };
+                }
+
+                const textBefore = $anchor.parent.textBetween(
+                    Math.max(0, $anchor.parentOffset - 20),
+                    $anchor.parentOffset,
+                    undefined,
+                    "\ufffc"
+                );
+                const match = textBefore.match(/(?:\s|^)(\/)([a-zA-Z0-9]*)$/);
+
+                if (match) {
+                    // match[1] is the slash, match[2] is the query
+                    const query = match[2];
+                    const from = $anchor.pos - query.length - 1;
+                    const to = $anchor.pos;
+                    return { active: true, range: { from, to }, query };
+                }
+                return { active: false };
+            },
+        }
+    });
+}