@rebasepro/admin 0.0.1-canary.4f204c2

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

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

package/src/editor/extensions/Image.ts

@@ -0,0 +1,159 @@
+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;
+
+    // @ts-ignore
+    const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
+    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.log("No images found in dropped files");
+                        return false;
+                    }
+
+                    images.forEach(image => {
+                        const position = view.posAtCoords({
+                            left: event.clientX,
+                            top: event.clientY
+                        });
+                        if (!position) return;
+
+                        const reader = new FileReader();
+                        reader.onload = async (readerEvent) => {
+                            await onFileRead(view, readerEvent, position.pos, upload, image);
+                        };
+                        reader.readAsDataURL(image);
+                    });
+
+                    return true;
+                }
+            },
+            handlePaste(view: 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

@@ -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,25 @@
+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;
+    }
+  });
+};