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

package/src/editor/components/editor-bubble.tsx

@@ -0,0 +1,118 @@
+import { forwardRef, type ReactNode, useEffect, useRef, useState } from "react";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { NodeSelection } from "prosemirror-state";
+
+export interface EditorBubbleProps {
+    children: ReactNode;
+    options?: any;
+    className?: string;
+}
+
+export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
+    ({ children, options, className }, ref) => {
+        const { view, state } = useProseMirrorContext();
+        const menuRef = useRef<HTMLDivElement>(null);
+        const [show, setShow] = useState(false);
+
+        useEffect(() => {
+            if (!view || !state) return;
+
+            // Delay evaluation slightly to let selection settle
+            const timer = setTimeout(() => {
+                const { selection } = state;
+                const { empty } = selection;
+
+                // check if image is selected
+                let isImage = false;
+                state.doc.nodesBetween(selection.from, selection.to, (node) => {
+                    if (node.type.name === "image") isImage = true;
+                });
+
+                if (isImage || empty || selection instanceof NodeSelection) {
+                    setShow(false);
+                    return;
+                }
+
+                setShow(true);
+            }, 0);
+
+            return () => clearTimeout(timer);
+        }, [view, state]);
+
+        useEffect(() => {
+            if (!show || !view || !state || !menuRef.current) return;
+
+            const { from, to } = state.selection;
+
+            // Fallback for end selection coords
+            let start = view.coordsAtPos(from);
+            let end = view.coordsAtPos(to);
+
+            const virtualEl = {
+                getBoundingClientRect() {
+                    const top = Math.min(start.top, end.top);
+                    const bottom = Math.max(start.bottom, end.bottom);
+                    const left = Math.min(start.left, end.left);
+                    const right = Math.max(start.right, end.right);
+                    return {
+                        width: right - left,
+                        height: bottom - top,
+                        x: left,
+                        y: top,
+                        top,
+                        left,
+                        right,
+                        bottom,
+                    };
+                }
+            };
+
+            const cleanup = autoUpdate(virtualEl as any, menuRef.current, () => {
+                if (!menuRef.current) return;
+
+                // Recompute coords in case of scroll
+                try {
+                    start = view.coordsAtPos(state.selection.from);
+                    end = view.coordsAtPos(state.selection.to);
+                } catch (e) {
+                    // Ignore error if selection is out of bounds
+                }
+
+                computePosition(virtualEl as any, menuRef.current, {
+                    placement: options?.placement || "top",
+                    middleware: [offset(options?.offset || 8), flip(), shift()],
+                    strategy: "fixed"
+                }).then(({ x, y }) => {
+                    if (menuRef.current) {
+                        Object.assign(menuRef.current.style, {
+                            left: `${x}px`,
+                            top: `${y}px`,
+                            visibility: "visible",
+                        });
+                    }
+                });
+            });
+            return () => cleanup();
+        }, [show, view, state, options]);
+
+        if (!show) return null;
+
+        return (
+            <div
+                ref={menuRef}
+                className={className}
+                style={{ position: "fixed", zIndex: 9999, visibility: "hidden" }}
+                onMouseDown={(e) => {
+                    e.preventDefault(); // Don't lose focus inside ProseMirror
+                }}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+EditorBubble.displayName = "EditorBubble";
+
+export default EditorBubble;

package/src/editor/components/index.ts

@@ -0,0 +1,12 @@
+export { EditorBubble } from "./editor-bubble";
+export { EditorBubbleItem } from "./editor-bubble-item";
+export { SlashCommandMenu } from "./SlashCommandMenu";
+
+export type JSONContent = {
+    type?: string;
+    attrs?: Record<string, any>;
+    content?: JSONContent[];
+    marks?: { type: string; attrs?: Record<string, any> }[];
+    text?: string;
+    [key: string]: any;
+};

package/src/editor/editor.tsx

@@ -0,0 +1,307 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { cls, defaultBorderMixin, Separator, useInjectStyles } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
+import { EditorBubble, SlashCommandMenu, type JSONContent } from "./components";
+import { NodeSelector } from "./selectors/node-selector";
+import { LinkSelector } from "./selectors/link-selector";
+import { TextButtons } from "./selectors/text-buttons";
+import { removeClassesFromJson } from "./utils/remove_classes";
+import { parser, serializer } from "./markdown";
+import { EditorAIController } from "./types";
+import { useProseMirror } from "./hooks/useProseMirror";
+import { ProseMirrorContext } from "./hooks/useProseMirrorContext";
+import { highlightCommands } from "./extensions/HighlightDecorationExtension";
+import { schema } from "./schema";
+
+export type CustomEditorComponent = {
+  name: string,
+  component: React.FC
+};
+
+export interface MarkdownEditorConfig {
+  html?: boolean;
+  transformPastedText?: boolean;
+}
+
+export type FireCMSEditorTextSize = "sm" | "base" | "lg";
+
+export type FireCMSEditorProps = {
+  content?: JSONContent | string,
+  onMarkdownContentChange?: (content: string) => void,
+  onJsonContentChange?: (content: JSONContent | null) => void,
+  onHtmlContentChange?: (content: string) => void,
+  handleImageUpload: (file: File) => Promise<string>,
+  version?: number,
+  textSize?: FireCMSEditorTextSize,
+  highlight?: { from: number, to: number },
+  aiController?: EditorAIController,
+  customComponents?: CustomEditorComponent[];
+  disabled?: boolean;
+  markdownConfig?: MarkdownEditorConfig;
+};
+
+const proseClasses = {
+  "sm": "prose-sm",
+  "base": "prose-base",
+  "lg": "prose-lg"
+}
+
+export const FireCMSEditor = ({
+  content,
+  onJsonContentChange,
+  onHtmlContentChange,
+  onMarkdownContentChange,
+  version,
+  textSize = "base",
+  highlight,
+  handleImageUpload,
+  aiController,
+  disabled,
+  markdownConfig
+}: FireCMSEditorProps) => {
+  const { t } = useTranslation();
+
+  const [openNode, setOpenNode] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+
+  useInjectStyles("Editor", cssStyles);
+
+  const { state, view, editorRef } = useProseMirror({
+    initialContent: content,
+    editable: !disabled,
+    handleImageUpload,
+    onChange: (newState, editorView) => {
+      if (onMarkdownContentChange) {
+        try {
+          const markdown = addLineBreakAfterImages(serializer.serialize(newState.doc));
+          onMarkdownContentChange(markdown);
+        } catch (e) {
+          console.warn("[FireCMSEditor] Could not serialize editor state to markdown:", e);
+        }
+      }
+      if (onJsonContentChange) {
+        const jsonContent = removeClassesFromJson(newState.doc.toJSON()) as JSONContent;
+        onJsonContentChange(jsonContent);
+      }
+      if (onHtmlContentChange) {
+        // Not strictly required for FireCMS initially, DOMParser/Serializer can be added if needed
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (version !== undefined && version > -1 && view) {
+      if (!content) return;
+      const newDoc = typeof content === "string" ? parser.parse(content) : schema.nodeFromJSON(content);
+      if (newDoc) {
+        view.dispatch(view.state.tr.replaceWith(0, view.state.doc.content.size, newDoc.content));
+      }
+    }
+  }, [version]);
+
+  useEffect(() => {
+    if (view) {
+      if (highlight) {
+        highlightCommands.toggleAutocompleteHighlight(highlight)(view.state, view.dispatch);
+      } else {
+        highlightCommands.removeAutocompleteHighlight()(view.state, view.dispatch);
+      }
+    }
+  }, [highlight?.from, highlight?.to]);
+
+  const proseClass = proseClasses[textSize];
+
+
+
+  return (
+    <div className="relative min-h-[300px] w-full">
+      <ProseMirrorContext.Provider value={{ state, view }}>
+
+        <div
+          ref={editorRef}
+          className={cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")}
+        />
+
+        {view && (
+          <EditorBubble
+            options={{
+              placement: "top",
+              offset: 6,
+            }}
+            className={cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-surface-900 shadow", defaultBorderMixin)}
+          >
+            <NodeSelector portalContainer={editorRef.current} open={openNode} onOpenChange={setOpenNode} />
+            <Separator orientation="vertical" />
+            <LinkSelector open={openLink} onOpenChange={setOpenLink} />
+            <Separator orientation="vertical" />
+            <TextButtons />
+          </EditorBubble>
+        )}
+
+        <SlashCommandMenu upload={handleImageUpload} aiController={aiController} />
+
+      </ProseMirrorContext.Provider>
+    </div>
+  );
+};
+
+function addLineBreakAfterImages(markdown: string): string {
+  const imageRegex = /!\[.*?\]\((?:[^)\\]|\\.)*\)/g;
+  return markdown.replace(imageRegex, (match) => `${match}\n`);
+}
+
+const cssStyles = `
+.ProseMirror {
+    box-shadow: none !important;
+}
+.ProseMirror .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color:  rgb(100 116 139); //500
+  pointer-events: none;
+  height: 0;
+}
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color:  rgb(100 116 139); //500
+  pointer-events: none;
+  height: 0;
+}
+
+[data-theme="dark"] {
+  .ProseMirror .is-empty::before {
+    color: rgb(100 116 139); //500
+  }
+}
+
+.is-empty {
+  cursor: text;
+  color: rgb(100 116 139); //500
+}
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+  &.ProseMirror-selectednode {
+    filter: brightness(90%);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+  }
+}
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+[data-theme="dark"] {
+  ul[data-type="taskList"] li > label input[type="checkbox"] {
+    background-color: rgb(30 41 59);
+    border: 2px solid #666;
+    &:hover { background-color: rgb(51 65 85); }
+    &:active { background-color: rgb(71 85 105); }
+  }
+}
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: white;
+  margin: 0;
+  cursor: pointer;
+  width: 1.2em;
+  height: 1.2em;
+  position: relative;
+  top: 5px;
+  border: 2px solid #777;
+  border-radius: 0.25em;
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+  &:hover { background-color: rgb(241 245 249); }
+  &:active { background-color: rgb(226 232 240); }
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+  &:checked::before { transform: scale(1); }
+}
+
+[data-theme="dark"] {
+  ul[data-type="taskList"] li[data-checked="true"] > div > p {
+    color: rgb(226 232 240);
+    text-decoration: line-through;
+    text-decoration-thickness: 2px;
+  }
+}
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(51 65 85);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+.tippy-box { max-width: 400px !important; }
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  background-color: rgb(219 234 254);
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+[data-theme="dark"] .ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  background-color:  rgb(51 65 85);
+}
+.prose-base table p { margin: 0; }
+
+.drag-handle {
+  position: absolute;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7,8.44771525 7,9 7,9 C7,9.55228475 7,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1.2rem;
+  height: 1.5rem;
+  z-index: 100;
+  cursor: grab;
+  
+  /* Create a hover area around the handle itself that doesn't overlap text */
+  &::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: -10px;
+    left: -20px; 
+    right: 0px;
+    z-index: -1;
+  }
+  
+  &:hover { background-color: rgb(241 245 249); transition: background-color 0.2s; }
+  &:active { background-color: rgb(226 232 240); transition: background-color 0.2s; }
+  &.hide { opacity: 0; pointer-events: none; }
+  @media screen and (max-width: 600px) { display: none; pointer-events: none; }
+}
+[data-theme="dark"] .drag-handle {
+  &:hover { background-color: rgb(51 65 85); }
+  &:active { background-color: rgb(51 65 85); }
+}
+.prosemirror-dropcursor-block {
+  background-color: var(--color-surface-accent-600);
+}
+[data-theme="dark"] .prosemirror-dropcursor-block {
+  background-color: var(--color-surface-accent-300);
+}
+`;

package/src/editor/extensions/HighlightDecorationExtension.ts

@@ -0,0 +1,114 @@
+import { Plugin, PluginKey, Transaction, EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+export interface HighlightRange {
+    from: number
+    to: number
+}
+
+interface AutocompleteHighlightState {
+    highlight?: HighlightRange
+    decorationSet?: DecorationSet
+}
+
+export const highlightDecorationKey = new PluginKey<AutocompleteHighlightState>("highlightDecoration");
+
+function buildDecorationSet(highlight: any, doc: any) {
+    const decorations: [any?] = [];
+
+    if (highlight) {
+        decorations.push(
+            Decoration.inline(highlight.from, highlight.to, {
+                class: "dark:bg-surface-accent-700 bg-surface-accent-300"
+            })
+        );
+    }
+    const decorationSet = DecorationSet.create(doc, decorations);
+    return decorationSet;
+}
+
+/**
+ * Commands to toggle the highlight
+ */
+export const highlightCommands = {
+    toggleAutocompleteHighlight: (range?: HighlightRange) => (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+        const { selection } = state;
+        const pos = selection.from;
+
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(highlightDecorationKey, {
+            pos,
+            type: "highlightDecoration",
+            remove: false,
+            range
+        });
+
+        dispatch(tr);
+        return true;
+    },
+
+    removeAutocompleteHighlight: () => (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(highlightDecorationKey, {
+            pos: 0,
+            type: "highlightDecoration",
+            remove: true
+        });
+
+        dispatch(tr);
+        return true;
+    }
+}
+
+/**
+ * This plugin is used to highlight the current autocomplete suggestion.
+ * It allows to set a range and remove it.
+ */
+export const highlightDecorationPlugin = (initialHighlight?: HighlightRange) => {
+    return new Plugin<AutocompleteHighlightState>({
+        key: highlightDecorationKey,
+        state: {
+            init: (_, { doc }) => {
+                const decorationSet = initialHighlight && doc ? buildDecorationSet(initialHighlight, doc) : DecorationSet.empty;
+                return {
+                    decorationSet,
+                    highlight: initialHighlight
+                };
+            },
+            apply(transaction, oldState) {
+                const action = transaction.getMeta(highlightDecorationKey);
+                const highlight = action?.range;
+                if (action?.type === "highlightDecoration") {
+
+                    const doc = transaction.doc;
+                    const { remove } = action;
+
+                    if (remove) {
+                        return {
+                            decorationSet: DecorationSet.empty
+                        };
+                    }
+                    const decorationSet = buildDecorationSet(highlight, doc);
+                    return {
+                        decorationSet: decorationSet,
+                        highlight
+                    }
+                } else {
+                    return oldState
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const autocompleteState = this.getState(state);
+                if (autocompleteState?.decorationSet) {
+                    return autocompleteState.decorationSet
+                } else {
+                    return DecorationSet.empty
+                }
+            }
+        }
+    });
+};

package/src/editor/extensions/Image/index.ts

@@ -0,0 +1,133 @@
+import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { schema } from "../../schema";
+
+export type UploadFn = (image: File) => Promise<string>;
+
+export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<FileReader>, pos: number, upload: UploadFn, image: File) {
+    // @ts-ignore
+    const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
+    if (!plugin) {
+        console.error("Image plugin not found");
+        return;
+    }
+    let decorationSet = plugin.getState(view.state);
+
+    const placeholder = document.createElement("div");
+    const imageElement = document.createElement("img");
+    // basic styling for loading state
+    imageElement.setAttribute("class", "opacity-40 rounded-lg border");
+    imageElement.src = readerEvent.target?.result as string;
+    placeholder.appendChild(imageElement);
+
+    const deco = Decoration.widget(pos, placeholder);
+    decorationSet = decorationSet?.add(view.state.doc, [deco]);
+    view.dispatch(view.state.tr.setMeta(plugin, { decorationSet }));
+
+    // Image Upload Logic
+    const src = await upload(image);
+    console.debug("Uploaded image", src);
+
+    // Replace placeholder with actual image
+    const imageNode = schema.nodes.image.create({ src });
+    const tr = view.state.tr.replaceWith(pos, pos, imageNode);
+
+    // Remove placeholder decoration
+    decorationSet = decorationSet?.remove([deco]);
+    tr.setMeta(plugin, { decorationSet });
+    view.dispatch(tr);
+}
+
+export const ImagePluginKey = new PluginKey("imagePlugin");
+
+export const createDropImagePlugin = (upload: UploadFn): Plugin => {
+    const plugin: Plugin = new Plugin({
+        key: ImagePluginKey,
+        state: {
+            // Initialize the plugin state with an empty DecorationSet
+            init: () => DecorationSet.empty,
+            // Apply transactions to update the state
+            apply: (tr, old) => {
+                // Handle custom transaction steps that update decorations
+                const meta = tr.getMeta(plugin);
+                if (meta && meta.decorationSet) {
+                    return meta.decorationSet;
+                }
+                // Map decorations to the new document structure
+                return old.map(tr.mapping, tr.doc);
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                drop: (view, event) => {
+                    if (!event.dataTransfer?.files || event.dataTransfer?.files.length === 0) {
+                        return false;
+                    }
+                    event.preventDefault();
+
+                    const files = Array.from(event.dataTransfer.files);
+                    const images = files.filter(file => /image/i.test(file.type));
+
+                    if (images.length === 0) {
+                        console.log("No images found in dropped files");
+                        return false;
+                    }
+
+                    images.forEach(image => {
+                        const position = view.posAtCoords({
+                            left: event.clientX,
+                            top: event.clientY
+                        });
+                        if (!position) return;
+
+                        const reader = new FileReader();
+                        reader.onload = async (readerEvent) => {
+                            await onFileRead(view, readerEvent, position.pos, upload, image);
+                        };
+                        reader.readAsDataURL(image);
+                    });
+
+                    return true;
+                }
+            },
+            handlePaste(view, event, slice) {
+                const items = Array.from(event.clipboardData?.items || []);
+                const pos = view.state.selection.from;
+                let anyImageFound = false;
+
+                items.forEach((item) => {
+                    const image = item.getAsFile();
+                    if (image && /image/i.test(item.type)) {
+                        anyImageFound = true;
+                        const reader = new FileReader();
+
+                        reader.onload = async (readerEvent) => {
+                            await onFileRead(view, readerEvent, pos, upload, image);
+                        };
+                        reader.readAsDataURL(image);
+                    }
+                });
+
+                return anyImageFound;
+            },
+            decorations(state) {
+                return plugin.getState(state);
+            }
+        },
+        view(editorView) {
+            // This is needed to immediately apply the decoration updates
+            return {
+                update(view, prevState) {
+                    const prevDecos = plugin.getState(prevState);
+                    const newDecos = plugin.getState(view.state);
+
+                    if (prevDecos !== newDecos) {
+                        view.updateState(view.state);
+                    }
+                }
+            };
+        }
+    });
+
+    return plugin;
+};