@rebasepro/cms 0.17.3 → 0.18.0

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

@@ -1,508 +0,0 @@
-import { NodeSelection, Plugin } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { Slice } from "prosemirror-model";
-import { serializeForClipboard } from "./clipboard";
-
-/** ProseMirror internal drag state — not exposed in type definitions */
-interface ProseMirrorDragState {
-    slice: Slice;
-    move: boolean;
-    node?: NodeSelection;
-}
-
-/** EditorView with access to the internal `dragging` property */
-interface EditorViewWithDrag extends EditorView {
-    dragging: ProseMirrorDragState | null;
-}
-
-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;
-
-    const blockSelector = 'li, p, pre, blockquote, h1, h2, h3, h4, h5, h6, img, [data-type="taskList"]';
-
-    // 1. First probe exactly at the mouse coordinates
-    const elem = document.elementFromPoint(coords.x, coords.y);
-    const block = elem?.closest(blockSelector);
-    if (block && view.dom.contains(block) && block.textContent?.trim()) {
-        const li = block.closest("li");
-        return (li && view.dom.contains(li)) ? 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;
-
-    const probeElem = document.elementFromPoint(probeX, coords.y);
-    const probeBlock = probeElem?.closest(blockSelector);
-    if (probeBlock && probeBlock.textContent?.trim()) {
-        // Ensure the found block is actually inside our editor
-        if (view.dom.contains(probeBlock)) {
-            const li = probeBlock.closest("li");
-            return (li && view.dom.contains(li)) ? 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 EditorViewWithDrag, 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 EditorViewWithDrag).dragging = {
-            slice,
-            move: true,
-            node: draggedNodeSelection
-        };
-    }
-
-    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");
-            dragHandleElement.style.opacity = "0";
-            dragHandleElement.style.pointerEvents = "none";
-        }
-    }
-
-    function showDragHandle() {
-        if (dragHandleElement) {
-            dragHandleElement.classList.remove("hide");
-            dragHandleElement.style.opacity = "1";
-            dragHandleElement.style.pointerEvents = "auto";
-        }
-    }
-
-    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);
-            });
-            dragHandleElement.addEventListener("click", (e) => {
-                handleClick(e, view);
-            });
-            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;
-
-                const $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 as EditorViewWithDrag).dragging as ProseMirrorDragState | null & { node?: unknown })?.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));
-
-                const 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 as EditorViewWithDrag).dragging as ProseMirrorDragState | null & { node?: unknown })?.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));
-
-                const targetPos = getBlockInsertionPoint(event, clampedX);
-                if (targetPos === null) return;
-
-                const dragging = (editorView as EditorViewWithDrag).dragging;
-                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;
-
-                    const { node, slice } = dragging;
-
-                    if (node && node.node) {
-                        let nodeToInsert: import("prosemirror-model").Node | import("prosemirror-model").Fragment = 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 ("type" in nodeToInsert && nodeToInsert.type.name === "list_item" && !isTargetList) {
-                            nodeToInsert = nodeToInsert.content;
-                        } else if ("type" in nodeToInsert && nodeToInsert.type.name === "taskItem" && !isTargetTaskList) {
-                            nodeToInsert = nodeToInsert.content;
-                        }
-
-                        // 2. Wrap incoming blocks/fragments into exactly the target list type
-                        const isFragment = !("type" in nodeToInsert);
-                        const needsWrap = isFragment || ("type" in nodeToInsert && 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 EditorViewWithDrag).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

@@ -1,126 +0,0 @@
-import { useState, useEffect, useRef, useLayoutEffect } from "react";
-import { EditorState, Transaction, Plugin } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { schema } from "../schema";
-import { getCorePlugins } 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 = [
-        ...getCorePlugins(),
-        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 }) => {
-            const 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

@@ -1,15 +0,0 @@
-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

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

package/src/editor/markdown-it-plugins.d.ts

@@ -1,24 +0,0 @@
-/**
- * Ambient module declarations for markdown-it plugins that do not ship
- * their own type declarations and have no DefinitelyTyped packages.
- *
- * Each plugin exports a default function that is a standard markdown-it
- * plugin: it receives a MarkdownIt instance and optional options.
- */
-declare module "markdown-it-task-lists" {
-    import type MarkdownIt from "markdown-it";
-    const markdownItTaskLists: MarkdownIt.PluginSimple;
-    export default markdownItTaskLists;
-}
-
-declare module "markdown-it-mark" {
-    import type MarkdownIt from "markdown-it";
-    const markdownItMark: MarkdownIt.PluginSimple;
-    export default markdownItMark;
-}
-
-declare module "markdown-it-ins" {
-    import type MarkdownIt from "markdown-it";
-    const markdownItIns: MarkdownIt.PluginSimple;
-    export default markdownItIns;
-}