@firecms/core 3.1.0 → 3.2.0-canary.44dc65b

package/src/editor/extensions/drag-and-drop.tsx

@@ -0,0 +1,480 @@
+import { NodeSelection, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Slice } from "prosemirror-model";
+import { serializeForClipboard } from "./clipboard";
+
+export interface DragHandleOptions {
+    /**
+     * The width of the drag handle
+     */
+    dragHandleWidth: number;
+}
+
+function absoluteRect(element: Element) {
+    const data = element.getBoundingClientRect();
+
+    let ancestor = element.parentElement;
+    while (ancestor && window.getComputedStyle(ancestor).position === "static") {
+        ancestor = ancestor.parentElement;
+    }
+    const ancestorRect = ancestor?.getBoundingClientRect();
+
+    return {
+        top: data.top - (ancestorRect?.top ?? 0),
+        left: data.left - (ancestorRect?.left ?? 0),
+        width: data.width
+    };
+}
+
+function nodeDOMAtCoords(coords: { x: number; y: number }, view: EditorView) {
+    const editorRect = view.dom.getBoundingClientRect();
+
+    // 0. Give up if outside vertical bounds or too far horizontally
+    if (coords.y < editorRect.top || coords.y > editorRect.bottom) return undefined;
+    if (coords.x < editorRect.left - 100 || coords.x > editorRect.right + 50) return undefined;
+
+    // 1. First probe exactly at the mouse coordinates
+    let elem = document.elementFromPoint(coords.x, coords.y);
+    let block = elem?.closest('li, p:not(:first-child), pre, blockquote, h1, h2, h3, h4, h5, h6, img, [data-type="taskList"]');
+    if (block && view.dom.contains(block)) {
+        return block.closest('li') || block;
+    }
+
+    // 2. If mouse is in the left gutter, probe horizontally into the editor
+    const probeX = editorRect.left + Math.min(60, editorRect.width / 4);
+    if (coords.x > probeX) return undefined;
+
+    let probeElem = document.elementFromPoint(probeX, coords.y);
+    let probeBlock = probeElem?.closest('li, p:not(:first-child), pre, blockquote, h1, h2, h3, h4, h5, h6, img, [data-type="taskList"]');
+    if (probeBlock) {
+        // Ensure the found block is actually inside our editor
+        if (view.dom.contains(probeBlock)) {
+            return probeBlock.closest('li') || probeBlock;
+        }
+    }
+
+    return undefined;
+}
+
+function nodePosAtDOM(node: Element, view: EditorView, options: DragHandleOptions) {
+    try {
+        if (!view.dom.contains(node)) return null;
+        const pos = view.posAtDOM(node, 0);
+        const $pos = view.state.doc.resolve(pos);
+        // posAtDOM(node, 0) generally returns the position inside the node.
+        // We want the position right before the node to create a NodeSelection.
+        if ($pos.depth > 0) {
+            return $pos.before();
+        }
+        return pos;
+    } catch (e) {
+        return null;
+    }
+}
+
+export function dragHandlePlugin(options: DragHandleOptions = { dragHandleWidth: 24 }) {
+    function handleDragStart(event: DragEvent, view: EditorView) {
+        view.focus();
+
+        if (!event.dataTransfer) return;
+
+        const node = nodeDOMAtCoords({
+            x: event.clientX,
+            y: event.clientY
+        }, view);
+
+        if (!(node instanceof Element)) return;
+
+        const nodePos = nodePosAtDOM(node, view, options);
+        if (nodePos == null || nodePos < 0) return;
+
+        const draggedNodeSelection = NodeSelection.create(view.state.doc, nodePos);
+        view.dispatch(view.state.tr.setSelection(draggedNodeSelection));
+
+        const slice = view.state.selection.content();
+        const {
+            dom,
+            text
+        } = serializeForClipboard(view as any, slice);
+
+        event.dataTransfer.clearData();
+        event.dataTransfer.setData("text/html", dom.innerHTML);
+        event.dataTransfer.setData("text/plain", text);
+        event.dataTransfer.effectAllowed = "copyMove";
+
+        event.dataTransfer.setDragImage(node, 0, 0);
+
+        (view as any).dragging = {
+            slice,
+            move: true,
+            node: draggedNodeSelection
+        } as { slice: Slice, move: boolean, node: NodeSelection };
+    }
+
+    function handleClick(event: MouseEvent, view: EditorView) {
+        view.focus();
+
+        view.dom.classList.remove("dragging");
+
+        const node = nodeDOMAtCoords({
+            x: event.clientX,
+            y: event.clientY
+        }, view);
+
+        if (!(node instanceof Element)) return;
+
+        const nodePos = nodePosAtDOM(node, view, options);
+        if (!nodePos) return;
+
+        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)));
+    }
+
+    let dragHandleElement: HTMLElement | null = null;
+
+    function hideDragHandle() {
+        if (dragHandleElement) {
+            dragHandleElement.classList.add("hide");
+        }
+    }
+
+    function showDragHandle() {
+        if (dragHandleElement) {
+            dragHandleElement.classList.remove("hide");
+        }
+    }
+
+    return new Plugin({
+        view: (view) => {
+            dragHandleElement = document.createElement("div");
+            dragHandleElement.draggable = true;
+            dragHandleElement.dataset.dragHandle = "";
+            dragHandleElement.classList.add("drag-handle");
+            dragHandleElement.addEventListener("dragstart", (e) => {
+                handleDragStart(e, view as any);
+            });
+            dragHandleElement.addEventListener("click", (e) => {
+                handleClick(e, view as any);
+            });
+            const onMouseMove = (event: MouseEvent) => {
+                if (!view.editable) {
+                    return;
+                }
+
+                const node = nodeDOMAtCoords({
+                    x: event.clientX,
+                    y: event.clientY
+                }, view);
+
+                if (!(node instanceof Element)) {
+                    hideDragHandle();
+                    return;
+                }
+
+                const compStyle = window.getComputedStyle(node);
+                const lineHeight = parseInt(compStyle.lineHeight, 10);
+                const paddingTop = parseInt(compStyle.paddingTop, 10);
+
+                const rect = absoluteRect(node);
+                if (!rect) {
+                    hideDragHandle();
+                    return;
+                }
+
+                rect.top += (lineHeight - 24) / 2;
+                rect.top += paddingTop;
+                // Li markers
+                if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+                    rect.left -= options.dragHandleWidth;
+                }
+                rect.width = options.dragHandleWidth;
+
+                if (!dragHandleElement) return;
+
+                dragHandleElement.style.left = `${rect.left - rect.width}px`;
+                dragHandleElement.style.top = `${rect.top}px`;
+                showDragHandle();
+            };
+
+            window.addEventListener("mousemove", onMouseMove);
+
+            hideDragHandle();
+
+            view?.dom?.parentElement?.appendChild(dragHandleElement);
+
+            return {
+                destroy: () => {
+                    window.removeEventListener("mousemove", onMouseMove);
+                    dragHandleElement?.remove?.();
+                    dragHandleElement = null;
+                }
+            };
+        },
+        props: {
+            handleDOMEvents: {
+                keydown: () => {
+                    hideDragHandle();
+                },
+                mousewheel: () => {
+                    hideDragHandle();
+                },
+                // dragging class is used for CSS
+                dragstart: (view) => {
+                    view.dom.classList.add("dragging");
+                },
+                drop: (view) => {
+                    view.dom.classList.remove("dragging");
+                },
+                dragend: (view) => {
+                    view.dom.classList.remove("dragging");
+                }
+            }
+        }
+    });
+}
+
+import { dropPoint } from "prosemirror-transform";
+
+export function globalDragDropPlugin() {
+    let dropCursorElement: HTMLElement | null = null;
+    let cleanup: (() => void) | null = null;
+
+    function updateDropCursorColor(el: HTMLElement) {
+        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+        const varName = isDark ? "--color-surface-accent-300" : "--color-surface-accent-600";
+        const color = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        el.style.backgroundColor = color || (isDark ? "#cbd5e1" : "#475569");
+    }
+
+    return new Plugin({
+        view(editorView) {
+            dropCursorElement = document.createElement("div");
+            dropCursorElement.className = "prosemirror-dropcursor-block";
+            dropCursorElement.style.cssText = "position: absolute; z-index: 50; pointer-events: none; height: 2px;";
+            updateDropCursorColor(dropCursorElement);
+
+            // Watch for theme changes
+            const observer = new MutationObserver(() => {
+                if (dropCursorElement) updateDropCursorColor(dropCursorElement);
+            });
+            observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+
+            const removeCursor = () => {
+                if (dropCursorElement && dropCursorElement.parentNode) {
+                    dropCursorElement.parentNode.removeChild(dropCursorElement);
+                }
+            };
+
+            const getBlockInsertionPoint = (event: DragEvent, clampedX: number) => {
+                const pos = editorView.posAtCoords({ left: clampedX, top: event.clientY });
+                if (!pos) return null;
+
+                let $pos = editorView.state.doc.resolve(pos.pos);
+
+                let blockDepth = 0;
+                for (let i = $pos.depth; i > 0; i--) {
+                    const name = $pos.node(i).type.name;
+                    if (name === "list_item" || name === "taskItem") {
+                        blockDepth = i;
+                        break;
+                    }
+                    if ($pos.node(i).isBlock && name !== "bullet_list" && name !== "ordered_list" && name !== "taskList") {
+                        blockDepth = i;
+                    }
+                }
+
+                if (blockDepth === 0) return pos.pos;
+
+                const nodeBeforePos = $pos.before(blockDepth);
+                const nodeAfterPos = $pos.after(blockDepth);
+
+                const domNode = editorView.nodeDOM(nodeBeforePos);
+                if (domNode instanceof HTMLElement) {
+                    const rect = domNode.getBoundingClientRect();
+                    const isTopHalf = event.clientY < rect.top + rect.height / 2;
+                    return isTopHalf ? nodeBeforePos : nodeAfterPos;
+                }
+                return pos.pos;
+            };
+
+            const handleDragOver = (event: DragEvent) => {
+                if (!editorView.editable || !editorView.dragging) return;
+
+                // If it's a native slice drag (no explicitly captured node from our drag handle)
+                // then we bail out here and let ProseMirror native drop logic and native dropcursor handle it
+                if (!(editorView.dragging as any).node) {
+                    removeCursor();
+                    return;
+                }
+
+                event.preventDefault(); // browser requires this to allow drop
+
+                const editorRect = editorView.dom.getBoundingClientRect();
+                const clampedX = Math.max(editorRect.left + 10, Math.min(event.clientX, editorRect.right - 10));
+
+                let target = getBlockInsertionPoint(event, clampedX);
+                if (target === null) {
+                    removeCursor();
+                    return;
+                }
+
+                const $pos = editorView.state.doc.resolve(target);
+
+                let rect;
+                const before = $pos.nodeBefore;
+                const after = $pos.nodeAfter;
+
+                if (before || after) {
+                    const nodeDOM = editorView.nodeDOM(target - (before ? before.nodeSize : 0));
+                    if (nodeDOM && nodeDOM instanceof HTMLElement) {
+                        const nodeRect = nodeDOM.getBoundingClientRect();
+                        let top = before ? nodeRect.bottom : nodeRect.top;
+                        if (before && after) {
+                            const afterDOM = editorView.nodeDOM(target);
+                            if (afterDOM && afterDOM instanceof HTMLElement) {
+                                top = (top + afterDOM.getBoundingClientRect().top) / 2;
+                            }
+                        }
+                        rect = { left: nodeRect.left, right: nodeRect.right, top: top - 1, bottom: top + 1 };
+                    }
+                }
+
+                if (!rect) {
+                    const coords = editorView.coordsAtPos(target);
+                    rect = { left: editorRect.left + 50, right: editorRect.right - 50, top: coords.top - 1, bottom: coords.top + 1 };
+                }
+
+                const parent = editorView.dom.offsetParent as HTMLElement;
+                let parentLeft = 0;
+                let parentTop = 0;
+                if (parent && parent !== document.body && getComputedStyle(parent).position !== "static") {
+                    const parentRect = parent.getBoundingClientRect();
+                    parentLeft = parentRect.left - parent.scrollLeft;
+                    parentTop = parentRect.top - parent.scrollTop;
+                }
+
+                if (!dropCursorElement!.parentNode) {
+                    parent.appendChild(dropCursorElement!);
+                }
+
+                dropCursorElement!.style.left = `${rect.left - parentLeft}px`;
+                dropCursorElement!.style.top = `${rect.top - parentTop}px`;
+                dropCursorElement!.style.width = `${rect.right - rect.left}px`;
+            };
+
+            const handleDrop = (event: DragEvent) => {
+                if (!editorView.editable || !editorView.dragging) return;
+
+                if (!(editorView.dragging as any).node) {
+                    removeCursor();
+                    return;
+                }
+
+                event.preventDefault();
+                removeCursor();
+                editorView.dom.classList.remove("dragging");
+
+                const editorRect = editorView.dom.getBoundingClientRect();
+                const clampedX = Math.max(editorRect.left + 10, Math.min(event.clientX, editorRect.right - 10));
+
+                let targetPos = getBlockInsertionPoint(event, clampedX);
+                if (targetPos === null) return;
+
+                const dragging = (editorView as any).dragging as { slice: Slice, move: boolean, node?: NodeSelection };
+                if (dragging && dragging.slice) {
+                    let tr = editorView.state.tr;
+                    if (dragging.move) {
+                        const { node } = dragging;
+                        if (node) {
+                            node.replace(tr); // exact native ProseMirror delete
+                        } else {
+                            tr = tr.deleteSelection();
+                        }
+                    }
+
+                    const mappedTarget = tr.mapping.map(targetPos);
+                    const beforeInsert = tr.doc;
+
+                    let { node, slice } = dragging;
+
+                    if (node && node.node) {
+                        let nodeToInsert: any = node.node;
+                        const $mapped = tr.doc.resolve(mappedTarget);
+                        const parentName = $mapped.parent.type.name;
+
+                        const isTargetList = parentName === "bullet_list" || parentName === "ordered_list";
+                        const isTargetTaskList = parentName === "taskList";
+
+                        // 1. Unwrap incoming lists if they don't match the destination perfectly
+                        if (nodeToInsert.type.name === "list_item" && !isTargetList) {
+                            nodeToInsert = nodeToInsert.content;
+                        } else if (nodeToInsert.type.name === "taskItem" && !isTargetTaskList) {
+                            nodeToInsert = nodeToInsert.content;
+                        }
+
+                        // 2. Wrap incoming blocks/fragments into exactly the target list type
+                        const isFragment = !nodeToInsert.type;
+                        const needsWrap = isFragment || (nodeToInsert.type.name !== "list_item" && nodeToInsert.type.name !== "taskItem");
+
+                        if (needsWrap) {
+                            if (isTargetList) {
+                                const listItemType = editorView.state.schema.nodes.list_item;
+                                if (listItemType) nodeToInsert = listItemType.create(null, nodeToInsert);
+                            } else if (isTargetTaskList) {
+                                const taskItemType = editorView.state.schema.nodes.taskItem;
+                                if (taskItemType) nodeToInsert = taskItemType.create({ checked: false }, nodeToInsert);
+                            }
+                        }
+
+                        // 3. Force insertion. tr.replace slices and splits lists. tr.insert preserves the explicit boundary.
+                        try {
+                            tr = tr.insert(mappedTarget, nodeToInsert);
+                        } catch (e) {
+                            console.warn("Could not insert dragged node exactly at target. Attempting fallback.", e);
+                            const point = dropPoint(tr.doc, mappedTarget, slice);
+                            if (point !== null) {
+                                tr = tr.replace(point, point, slice);
+                            }
+                        }
+                    } else if (slice) {
+                        // For generic slices (e.g native image dragging), we MUST use dropPoint
+                        // so ProseMirror finds a schema-valid depth to insert the node structure natively.
+                        const point = dropPoint(tr.doc, mappedTarget, slice);
+                        const finalTarget = point !== null ? point : mappedTarget;
+                        tr = tr.replace(finalTarget, finalTarget, slice);
+                    }
+
+                    if (!tr.doc.eq(beforeInsert)) {
+                        editorView.dispatch(tr.setMeta("uiEvent", "drop"));
+                        editorView.focus();
+                    }
+                }
+
+                (editorView as any).dragging = null;
+            };
+
+            const handleDragEnd = () => {
+                removeCursor();
+            };
+
+            window.addEventListener("dragover", handleDragOver, { capture: true });
+            window.addEventListener("drop", handleDrop, { capture: true });
+            window.addEventListener("dragend", handleDragEnd, { capture: true });
+
+            cleanup = () => {
+                removeCursor();
+                observer.disconnect();
+                window.removeEventListener("dragover", handleDragOver, { capture: true });
+                window.removeEventListener("drop", handleDrop, { capture: true });
+                window.removeEventListener("dragend", handleDragEnd, { capture: true });
+            };
+
+            return {
+                destroy() {
+                    if (cleanup) cleanup();
+                }
+            };
+        }
+    });
+}
+
+

package/src/editor/hooks/useProseMirror.ts

@@ -0,0 +1,124 @@
+import { useState, useEffect, useRef, useLayoutEffect } from "react";
+import { EditorState, Transaction, Plugin } 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";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+
+const trailingNodePlugin = new Plugin({
+    appendTransaction: (_, oldState, newState) => {
+        const doc = newState.doc;
+        if (doc.lastChild && doc.lastChild.type.name !== "paragraph") {
+            return newState.tr.insert(doc.content.size, newState.schema.nodes.paragraph.create());
+        }
+        return null;
+    }
+});
+
+interface UseProseMirrorProps {
+    initialContent?: string | any;
+    editable?: boolean;
+    handleImageUpload?: (file: File) => Promise<string>;
+}
+
+export function useProseMirror({ initialContent, editable = true, handleImageUpload }: UseProseMirrorProps) {
+    const plugins = [
+        ...corePlugins,
+        columnResizing(),
+        tableEditing(),
+        trailingNodePlugin
+    ];
+    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);
+            },
+            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";