@rebasepro/cms 0.17.3 → 0.18.0

package/src/editor/extensions/Image.ts

@@ -1,159 +0,0 @@
-import { cls, defaultBorderMixin } from "@rebasepro/ui";
-import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import { Plugin, PluginKey } from "prosemirror-state";
-
-export type UploadFn = (image: File) => Promise<string>;
-
-export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<FileReader>, pos: number, upload: UploadFn, image: File) {
-
-    const { schema } = view.state;
-
-    const state = view.state as typeof view.state & { plugins: Plugin[] };
-    const plugin = state.plugins.find((p: Plugin) => p.spec.key === ImagePluginKey);
-    if (!plugin) {
-        console.error("Image plugin not found");
-        return;
-    }
-
-    const decoId = Math.random().toString(36).substring(7);
-    const placeholder = document.createElement("div");
-    const imageElement = document.createElement("img");
-    imageElement.setAttribute("class", "opacity-40 rounded-lg border " + defaultBorderMixin);
-    imageElement.src = readerEvent.target?.result as string;
-    placeholder.appendChild(imageElement);
-
-    const deco = Decoration.widget(pos, placeholder, { id: decoId });
-    let decorationSet = plugin.getState(view.state);
-    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);
-
-    const replacePlaceholder = () => {
-        // Retrieve the LATEST state after the async upload
-        let currentDecos = plugin.getState(view.state) as DecorationSet;
-        const foundDecos = currentDecos.find(undefined, undefined, spec => spec.id === decoId);
-
-        if (foundDecos.length === 0) {
-            console.warn("Image placeholder removed before upload completed.");
-            return;
-        }
-
-        // Get the mapped position of the decoration
-        const currentPos = foundDecos[0].from;
-
-        // Replace placeholder with actual image at the correct mapped position
-        const imageNode = view.state.schema.nodes.image.create({ src });
-        const tr = view.state.tr.replaceWith(currentPos, currentPos, imageNode);
-
-        // Remove placeholder decoration using the LATEST decorationSet
-        currentDecos = currentDecos.remove(foundDecos);
-        tr.setMeta(plugin, { decorationSet: currentDecos });
-        view.dispatch(tr);
-    };
-
-    // Preload the image so it doesn't cause a layout shift when replacing the placeholder
-    const preloader = new Image();
-    preloader.src = src;
-    preloader.onload = replacePlaceholder;
-    preloader.onerror = replacePlaceholder;
-}
-
-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: {
-                dragover: (view: EditorView, event: DragEvent) => {
-                    if (event.dataTransfer?.types?.includes("Files")) {
-                        event.preventDefault();
-                        return true;
-                    }
-                    return false;
-                },
-                drop: (view: EditorView, event: DragEvent) => {
-                    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.debug("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: EditorView, event: ClipboardEvent) {
-                const html = event.clipboardData?.getData("text/html");
-                if (html && html.includes("<img")) {
-                    // Let ProseMirror handle the HTML paste natively (e.g. copy-pasted from the editor itself or a webpage)
-                    return false;
-                }
-
-                const items = Array.from(event.clipboardData?.items || []);
-                const pos = view.state.selection.from;
-                let anyImageFound = false;
-
-                items
-                    .filter((item) => item.type.startsWith("image/"))
-                    .forEach((item) => {
-                        const image = item.getAsFile();
-                        if (image) {
-                            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);
-            }
-        }
-    });
-
-    return plugin;
-};
-
-

package/src/editor/extensions/TextLoadingDecorationExtension.tsx

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

@@ -1,72 +0,0 @@
-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!
-        const nodeType = node.type as typeof node.type & { defaultAttrs?: unknown };
-        context.push(node.type.name, node.attrs != nodeType.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

@@ -1,25 +0,0 @@
-import { keymap } from "prosemirror-keymap";
-import { TextSelection } from "prosemirror-state";
-
-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(TextSelection.create(state.doc, startNodePos, endNodePos)));
-        }
-        return true;
-      }
-      return false;
-    }
-  });
-};