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

package/src/editor/extensions/TextLoadingDecorationExtension.tsx

@@ -0,0 +1,107 @@
+import { Plugin, PluginKey, Transaction, EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+// Define and export the plugin key
+export const loadingDecorationKey = new PluginKey<LoadingDecorationState>("loadingDecoration");
+
+interface LoadingDecorationState {
+    decorationSet: DecorationSet;
+    hasDecoration: boolean;
+}
+
+export const textLoadingCommands = {
+    toggleLoadingDecoration: (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined, loadingHtml?: string): boolean => {
+        const { selection } = state;
+        const pos = selection.from;
+
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(loadingDecorationKey, {
+            pos,
+            type: "loadingDecoration",
+            remove: false,
+            loadingHtml
+        });
+
+        dispatch(tr);
+        return true;
+    },
+
+    removeLoadingDecoration: (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined): boolean => {
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(loadingDecorationKey, {
+            pos: 0, // We can pass any position as it will remove the entire decoration set
+            type: "loadingDecoration",
+            remove: true
+        });
+
+        dispatch(tr);
+        return true;
+    }
+};
+
+/**
+ * This plugin is used to display streaming content from an LLM.
+ */
+export const textLoadingDecorationPlugin = () => {
+    return new Plugin<LoadingDecorationState>({
+        key: loadingDecorationKey,
+
+        state: {
+            init() {
+                return {
+                    decorationSet: DecorationSet.empty,
+                    hasDecoration: false
+                };
+            },
+
+            apply(tr, oldState) {
+                const action = tr.getMeta(loadingDecorationKey);
+
+                if (action?.type === "loadingDecoration") {
+                    const { pos, remove, loadingHtml } = action;
+
+                    if (remove) {
+                        return {
+                            decorationSet: DecorationSet.empty,
+                            hasDecoration: false
+                        };
+                    }
+
+                    const decoration = Decoration.widget(pos, () => {
+                        const container = document.createElement("span");
+                        container.className = "loading-decoration";
+
+                        // Sanitize and append HTML
+                        if (loadingHtml) {
+                            container.innerHTML = loadingHtml;
+                        } else {
+                            const span = document.createElement("span");
+                            span.innerText = "loading...";
+                            container.appendChild(span);
+                        }
+
+                        return container;
+                    });
+
+                    return {
+                        decorationSet: DecorationSet.empty.add(tr.doc, [decoration]),
+                        hasDecoration: true
+                    };
+                }
+
+                return {
+                    decorationSet: oldState.decorationSet.map(tr.mapping, tr.doc),
+                    hasDecoration: oldState.hasDecoration
+                };
+            }
+        },
+
+        props: {
+            decorations(state) {
+                return this.getState(state)?.decorationSet || DecorationSet.empty;
+            }
+        }
+    });
+};

package/src/editor/extensions/clipboard.ts

@@ -0,0 +1,72 @@
+import { DOMSerializer, Slice } from "prosemirror-model"
+import { EditorView } from "prosemirror-view";
+
+export function serializeForClipboard(view: EditorView, slice: Slice) {
+    view.someProp("transformCopied", f => {
+        slice = f(slice!, view)
+    })
+
+    const context = [];
+    let {
+        content,
+        openStart,
+        openEnd
+    } = slice
+    while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) {
+        openStart--
+        openEnd--
+        const node = content.firstChild!
+        // @ts-ignore
+        context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null)
+        content = node.content
+    }
+
+    const serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema)
+    const doc = detachedDoc(), wrap = doc.createElement("div")
+    wrap.appendChild(serializer.serializeFragment(content, { document: doc }))
+
+    let firstChild = wrap.firstChild, needsWrap, wrappers = 0
+    while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
+        for (let i = needsWrap.length - 1; i >= 0; i--) {
+            const wrapper = doc.createElement(needsWrap[i])
+            while (wrap.firstChild) wrapper.appendChild(wrap.firstChild)
+            wrap.appendChild(wrapper)
+            wrappers++
+        }
+        firstChild = wrap.firstChild
+    }
+
+    if (firstChild && firstChild.nodeType == 1)
+        (firstChild as HTMLElement).setAttribute(
+            "data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`)
+
+    const text = view.someProp("clipboardTextSerializer", f => f(slice, view)) ||
+        slice.content.textBetween(0, slice.content.size, "\n\n")
+
+    return {
+        dom: wrap,
+        text,
+        slice
+    }
+}
+
+// Trick from jQuery -- some elements must be wrapped in other
+// elements for innerHTML to work. I.e. if you do `div.innerHTML =
+// "<td>..</td>"` the table cells are ignored.
+const wrapMap: { [node: string]: string[] } = {
+    thead: ["table"],
+    tbody: ["table"],
+    tfoot: ["table"],
+    caption: ["table"],
+    colgroup: ["table"],
+    col: ["table", "colgroup"],
+    tr: ["table", "tbody"],
+    td: ["table", "tbody", "tr"],
+    th: ["table", "tbody", "tr"]
+}
+
+let _detachedDoc: Document | null = null
+
+function detachedDoc() {
+    return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"))
+}

package/src/editor/extensions/custom-keymap.ts

@@ -0,0 +1,24 @@
+import { keymap } from "prosemirror-keymap";
+
+export const customKeymapPlugin = () => {
+  return keymap({
+    "Mod-a": (state, dispatch) => {
+      const { tr } = state;
+      const startSelectionPos = tr.selection.from;
+      const endSelectionPos = tr.selection.to;
+      const startNodePos = tr.selection.$from.start();
+      const endNodePos = tr.selection.$to.end();
+
+      const isCurrentTextSelectionNotExtendedToNodeBoundaries =
+        startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+
+      if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+        if (dispatch) {
+          dispatch(tr.setSelection((state.selection.constructor as any).create(state.doc, startNodePos, endNodePos)));
+        }
+        return true;
+      }
+      return false;
+    },
+  });
+};

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

@@ -0,0 +1,472 @@
+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.
+                        tr = tr.insert(mappedTarget, nodeToInsert);
+                    } 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();
+                }
+            };
+        }
+    });
+}
+
+