@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/editor/editor.tsx

@@ -0,0 +1,510 @@
+"use client";
+import React, { useEffect, useState, useRef, useMemo } from "react";
+import { EditorState } from "prosemirror-state";
+import { cls, defaultBorderMixin, Separator, useInjectStyles, TextareaAutosize } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { EditorBubble, ImageBubble, SlashCommandMenu, TableBubble, type JSONContent } from "./components";
+import { NodeSelector } from "./selectors/node-selector";
+import { LinkSelector } from "./selectors/link-selector";
+import { TextButtons } from "./selectors/text-buttons";
+import { removeClassesFromJson } from "./utils/remove_classes";
+import { parser, serializer } from "./markdown";
+import { EditorAIController } from "./types";
+import { useProseMirror } from "./hooks/useProseMirror";
+import { ProseMirrorContext } from "./hooks/useProseMirrorContext";
+import { highlightCommands } from "./extensions/HighlightDecorationExtension";
+import { schema } from "./schema";
+
+export type CustomEditorComponent = {
+  name: string,
+  component: React.FC
+};
+
+export interface MarkdownEditorConfig {
+  html?: boolean;
+  transformPastedText?: boolean;
+}
+
+export type RebaseEditorTextSize = "sm" | "base" | "lg";
+
+export type RebaseEditorProps = {
+  content?: JSONContent | string,
+  onMarkdownContentChange?: (content: string) => void,
+  onJsonContentChange?: (content: JSONContent | null) => void,
+  onHtmlContentChange?: (content: string) => void,
+  handleImageUpload: (file: File) => Promise<string>,
+  version?: number,
+  textSize?: RebaseEditorTextSize,
+  highlight?: { from: number, to: number },
+  aiController?: EditorAIController,
+  customComponents?: CustomEditorComponent[];
+  disabled?: boolean;
+  markdownConfig?: MarkdownEditorConfig;
+};
+
+const proseClasses = {
+  "sm": "prose-sm",
+  "base": "prose-base",
+  "lg": "prose-lg"
+}
+
+export const RebaseEditor = ({
+  content,
+  onJsonContentChange,
+  onHtmlContentChange,
+  onMarkdownContentChange,
+  version,
+  textSize = "base",
+  highlight,
+  handleImageUpload,
+  aiController,
+  disabled,
+  markdownConfig
+}: RebaseEditorProps) => {
+  const { t } = useTranslation();
+
+  const [openNode, setOpenNode] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+
+  const [isMarkdownMode, setIsMarkdownMode] = useState(false);
+  const [internalMarkdown, setInternalMarkdown] = useState<string>("");
+
+  useEffect(() => {
+    if (!isMarkdownMode) return;
+    const timeout = setTimeout(() => {
+      if (callbacksRef.current.onMarkdownContentChange) {
+        callbacksRef.current.onMarkdownContentChange(internalMarkdown);
+      }
+    }, 250);
+    return () => clearTimeout(timeout);
+  }, [internalMarkdown, isMarkdownMode]);
+
+  const handleToggleMarkdown = () => {
+    if (!isMarkdownMode) {
+      if (view) {
+        setInternalMarkdown(serializer.serialize(view.state.doc));
+      }
+      setIsMarkdownMode(true);
+    } else {
+      if (view) {
+        const newDoc = parser.parse(internalMarkdown);
+        if (newDoc) {
+          const tr = view.state.tr.replaceWith(0, view.state.doc.content.size, newDoc.content);
+          view.dispatch(tr);
+        }
+      }
+      setIsMarkdownMode(false);
+    }
+  };
+
+  const handleMarkdownChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInternalMarkdown(e.target.value);
+  };
+
+  const handleMarkdownBlur = () => {
+    const { onMarkdownContentChange, onJsonContentChange } = callbacksRef.current;
+    if (onMarkdownContentChange) {
+      onMarkdownContentChange(internalMarkdown);
+    }
+    if (onJsonContentChange) {
+      try {
+        const newDoc = parser.parse(internalMarkdown);
+        if (newDoc) {
+          onJsonContentChange(removeClassesFromJson(newDoc.toJSON()) as JSONContent);
+        }
+      } catch (e) {
+        console.warn("Could not parse markdown to JSON", e);
+      }
+    }
+  };
+
+  useInjectStyles("Editor", cssStyles);
+
+  const callbacksRef = useRef({ onMarkdownContentChange,
+onJsonContentChange });
+  useEffect(() => {
+    callbacksRef.current = { onMarkdownContentChange,
+onJsonContentChange };
+  }, [onMarkdownContentChange, onJsonContentChange]);
+
+  const flushChanges = (currentState: EditorState) => {
+    const { onMarkdownContentChange, onJsonContentChange } = callbacksRef.current;
+    if (onMarkdownContentChange) {
+      try {
+        const markdown = serializer.serialize(currentState.doc);
+        onMarkdownContentChange(markdown);
+      } catch (e) {
+        console.warn("[RebaseEditor] Could not serialize editor state to markdown:", e);
+      }
+    }
+    if (onJsonContentChange) {
+      const jsonContent = removeClassesFromJson(currentState.doc.toJSON()) as JSONContent;
+      onJsonContentChange(jsonContent);
+    }
+  };
+
+  const { state, view, editorRef } = useProseMirror({
+    initialContent: content,
+    editable: !disabled,
+    handleImageUpload
+  });
+
+  // When `version` changes externally (e.g. form discard/reset), re-parse the
+  // `content` prop and replace the ProseMirror document so the editor reflects
+  // the reverted value.
+  const versionRef = useRef(version);
+  useEffect(() => {
+    if (versionRef.current === version) return;   // skip initial render
+    versionRef.current = version;
+    if (!view) return;
+    try {
+      const newDoc = typeof content === "string"
+        ? parser.parse(content ?? "")
+        : content
+          ? schema.nodeFromJSON(content)
+          : schema.node("doc", null, [schema.node("paragraph")]);
+      if (newDoc) {
+        const tr = view.state.tr.replaceWith(0, view.state.doc.content.size, newDoc.content);
+        view.dispatch(tr);
+      }
+    } catch (e) {
+      console.warn("[RebaseEditor] Could not reset editor content:", e);
+    }
+    // Also reset raw-markdown textarea if the user is in source mode
+    if (isMarkdownMode) {
+      setInternalMarkdown(typeof content === "string" ? content : "");
+    }
+    // Reset the settling window so the replacement dispatch above is NOT
+    // treated as a user edit (which would fire onChange back to the form).
+    mountTimeRef.current = Date.now();
+    hasUserEditedRef.current = false;
+  }, [version]);
+
+  const doc = state?.doc;
+  // Use a time-based settling window instead of a single-skip flag.
+  // The trailingNodePlugin fires appendTransaction on mount (adding a trailing
+  // paragraph), which creates a second doc change after the initial parse.
+  // A single-skip flag misses that second change. Instead, we skip ALL doc
+  // changes within the first 500ms after the view is created.
+  const mountTimeRef = useRef(Date.now());
+  const hasUserEditedRef = useRef(false);
+  useEffect(() => {
+    if (!state) return;
+    // Skip all doc changes during the initial settling window (500ms).
+    // This covers both the initial parse AND the trailingNodePlugin's
+    // appendTransaction that adds a trailing paragraph.
+    const elapsed = Date.now() - mountTimeRef.current;
+    if (elapsed < 500 && !hasUserEditedRef.current) {
+      return;
+    }
+    hasUserEditedRef.current = true;
+    const timeout = setTimeout(() => {
+      flushChanges(state);
+    }, 250);
+    return () => clearTimeout(timeout);
+  }, [doc]);
+
+  useEffect(() => {
+    if (!view) return;
+    const dom = view.dom;
+    const handleBlur = () => {
+      // Don't flush during the initial settling window — the editor
+      // hasn't been interacted with yet, and the serialized output
+      // may differ from the input due to parse→serialize normalization.
+      if (!hasUserEditedRef.current) {
+        const elapsed = Date.now() - mountTimeRef.current;
+        if (elapsed < 500) return;
+      }
+      flushChanges(view.state);
+    };
+    dom.addEventListener("blur", handleBlur);
+    return () => dom.removeEventListener("blur", handleBlur);
+  }, [view]);
+
+
+  useEffect(() => {
+    if (view) {
+      if (highlight) {
+        highlightCommands.toggleAutocompleteHighlight(highlight)(view.state, view.dispatch);
+      } else {
+        highlightCommands.removeAutocompleteHighlight()(view.state, view.dispatch);
+      }
+    }
+  }, [highlight?.from, highlight?.to]);
+
+  const proseClass = proseClasses[textSize];
+
+
+  return (
+    <div className="relative min-h-[200px] w-full">
+      <button
+        type="button"
+        onClick={handleToggleMarkdown}
+        title={isMarkdownMode ? "Switch to Visual Editor" : "Switch to Markdown"}
+        className="absolute top-2 right-2 z-10 px-2 py-1 text-xs font-medium text-surface-400 hover:text-surface-700 dark:text-surface-600 dark:hover:text-surface-300 transition-colors opacity-50 hover:opacity-100 bg-transparent rounded"
+      >
+        {isMarkdownMode ? "Visual" : "Markdown"}
+      </button>
+
+      <ProseMirrorContext.Provider value={useMemo(() => ({ state,
+view }), [state, view])}>
+
+        <div style={{ display: isMarkdownMode ? "none" : "block" }}>
+          <div
+            ref={editorRef}
+            className={cls("relative prose dark:prose-invert", proseClass, "prose-headings:font-title prose-headings:font-normal prose-strong:font-semibold prose-code:font-normal prose-blockquote:font-normal prose-a:font-normal font-default focus:outline-none max-w-full p-12")}
+          />
+
+          {view && (
+          <>
+            <EditorBubble
+              options={{
+                placement: "top",
+                offset: 6
+              }}
+              className={cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-surface-800 shadow", defaultBorderMixin)}
+            >
+              <NodeSelector portalContainer={editorRef.current} open={openNode} onOpenChange={setOpenNode}/>
+              <Separator orientation="vertical"/>
+              <LinkSelector open={openLink} onOpenChange={setOpenLink}/>
+              <Separator orientation="vertical"/>
+              <TextButtons/>
+            </EditorBubble>
+
+            <ImageBubble
+               options={{
+                placement: "bottom",
+                offset: 6
+              }}
+            />
+            <TableBubble/>
+          </>
+        )}
+
+        <SlashCommandMenu upload={handleImageUpload} aiController={aiController}/>
+        </div>
+
+        {isMarkdownMode && (
+          <TextareaAutosize
+            value={internalMarkdown}
+            onChange={handleMarkdownChange}
+            onBlur={handleMarkdownBlur}
+            className={cls(
+              "w-full h-full min-h-[200px] p-12 bg-transparent resize-none font-mono focus:ring-0",
+              proseClass
+            )}
+            style={{
+              tabSize: 4,
+              outline: "none",
+              border: "none",
+              boxShadow: "none"
+            }}
+          />
+        )}
+
+      </ProseMirrorContext.Provider>
+    </div>
+  );
+};
+
+
+const cssStyles = `
+.ProseMirror {
+    box-shadow: none !important;
+}
+.ProseMirror .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color:  rgb(100 116 139); //500
+  pointer-events: none;
+  height: 0;
+}
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color:  rgb(100 116 139); //500
+  pointer-events: none;
+  height: 0;
+}
+
+[data-theme="dark"] {
+  .ProseMirror .is-empty::before {
+    color: rgb(100 116 139); //500
+  }
+}
+
+.is-empty {
+  cursor: text;
+  color: rgb(100 116 139); //500
+}
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+}
+.ProseMirror img:hover {
+  cursor: pointer;
+  filter: brightness(90%);
+}
+.ProseMirror img.ProseMirror-selectednode {
+  filter: brightness(90%);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+[data-theme="dark"] ul[data-type="taskList"] li > label input[type="checkbox"] {
+    background-color: rgb(30 41 59);
+    border: 2px solid #666;
+}
+[data-theme="dark"] ul[data-type="taskList"] li > label input[type="checkbox"]:hover { background-color: rgb(51 65 85); }
+[data-theme="dark"] ul[data-type="taskList"] li > label input[type="checkbox"]:active { background-color: rgb(71 85 105); }
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: white;
+  margin: 0;
+  cursor: pointer;
+  width: 1.2em;
+  height: 1.2em;
+  position: relative;
+  top: 5px;
+  border: 2px solid #777;
+  border-radius: 0.25em;
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+}
+ul[data-type="taskList"] li > label input[type="checkbox"]:hover { background-color: rgb(241 245 249); }
+ul[data-type="taskList"] li > label input[type="checkbox"]:active { background-color: rgb(226 232 240); }
+ul[data-type="taskList"] li > label input[type="checkbox"]::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before { transform: scale(1); }
+
+[data-theme="dark"] {
+  ul[data-type="taskList"] li[data-checked="true"] > div > p {
+    color: rgb(226 232 240);
+    text-decoration: line-through;
+    text-decoration-thickness: 2px;
+  }
+}
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(51 65 85);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+.tippy-box { max-width: 400px !important; }
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  background-color: rgb(219 234 254);
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+[data-theme="dark"] .ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  background-color:  rgb(51 65 85);
+}
+.prose-base table p { margin: 0; }
+
+.drag-handle {
+  position: absolute;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7,8.44771525 7,9 7,9 C7,9.55228475 7,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1.2rem;
+  height: 1.5rem;
+  z-index: 100;
+  cursor: grab;
+}
+.drag-handle::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  bottom: -10px;
+  left: -20px; 
+  right: 0px;
+  z-index: -1;
+}
+.drag-handle:hover { background-color: rgb(241 245 249); transition: background-color 0.2s; }
+.drag-handle:active { background-color: rgb(226 232 240); transition: background-color 0.2s; }
+.drag-handle.hide { opacity: 0; pointer-events: none; }
+@media screen and (max-width: 600px) { .drag-handle { display: none; pointer-events: none; } }
+[data-theme="dark"] .drag-handle:hover { background-color: rgb(51 65 85); }
+[data-theme="dark"] .drag-handle:active { background-color: rgb(51 65 85); }
+.prosemirror-dropcursor-block {
+  background-color: var(--color-surface-accent-600);
+}
+[data-theme="dark"] .prosemirror-dropcursor-block {
+  background-color: var(--color-surface-accent-300);
+}
+
+.ProseMirror table {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+  margin: 1em 0;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border: 1px solid #e5e7eb;
+}
+[data-theme="dark"] .ProseMirror table {
+  border-color: #374151;
+}
+
+.ProseMirror td, .ProseMirror th {
+  min-width: 1em;
+  padding: 8px 10px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  border-right: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+}
+[data-theme="dark"] .ProseMirror td, [data-theme="dark"] .ProseMirror th {
+  border-right-color: #374151;
+  border-bottom-color: #374151;
+}
+
+.ProseMirror tr:last-child td, .ProseMirror tr:last-child th {
+  border-bottom: none;
+}
+.ProseMirror th:last-child, .ProseMirror td:last-child {
+  border-right: none;
+}
+
+.ProseMirror td {
+  background-color: transparent;
+}
+
+.ProseMirror th {
+  font-weight: 600;
+  text-align: left;
+  background-color: #f3f4f6;
+  color: #374151;
+}
+[data-theme="dark"] .ProseMirror td {
+  background-color: transparent;
+}
+[data-theme="dark"] .ProseMirror th {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: #d1d5db;
+}
+`;

package/src/editor/extensions/HighlightDecorationExtension.ts

@@ -0,0 +1,114 @@
+import { Plugin, PluginKey, Transaction, EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+export interface HighlightRange {
+    from: number
+    to: number
+}
+
+interface AutocompleteHighlightState {
+    highlight?: HighlightRange
+    decorationSet?: DecorationSet
+}
+
+export const highlightDecorationKey = new PluginKey<AutocompleteHighlightState>("highlightDecoration");
+
+function buildDecorationSet(highlight: any, doc: any) {
+    const decorations: [any?] = [];
+
+    if (highlight) {
+        decorations.push(
+            Decoration.inline(highlight.from, highlight.to, {
+                class: "dark:bg-surface-accent-700 bg-surface-accent-300"
+            })
+        );
+    }
+    const decorationSet = DecorationSet.create(doc, decorations);
+    return decorationSet;
+}
+
+/**
+ * Commands to toggle the highlight
+ */
+export const highlightCommands = {
+    toggleAutocompleteHighlight: (range?: HighlightRange) => (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+        const { selection } = state;
+        const pos = selection.from;
+
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(highlightDecorationKey, {
+            pos,
+            type: "highlightDecoration",
+            remove: false,
+            range
+        });
+
+        dispatch(tr);
+        return true;
+    },
+
+    removeAutocompleteHighlight: () => (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+        if (!dispatch) return false;
+
+        const tr = state.tr.setMeta(highlightDecorationKey, {
+            pos: 0,
+            type: "highlightDecoration",
+            remove: true
+        });
+
+        dispatch(tr);
+        return true;
+    }
+}
+
+/**
+ * This plugin is used to highlight the current autocomplete suggestion.
+ * It allows to set a range and remove it.
+ */
+export const highlightDecorationPlugin = (initialHighlight?: HighlightRange) => {
+    return new Plugin<AutocompleteHighlightState>({
+        key: highlightDecorationKey,
+        state: {
+            init: (_, { doc }) => {
+                const decorationSet = initialHighlight && doc ? buildDecorationSet(initialHighlight, doc) : DecorationSet.empty;
+                return {
+                    decorationSet,
+                    highlight: initialHighlight
+                };
+            },
+            apply(transaction, oldState) {
+                const action = transaction.getMeta(highlightDecorationKey);
+                const highlight = action?.range;
+                if (action?.type === "highlightDecoration") {
+
+                    const doc = transaction.doc;
+                    const { remove } = action;
+
+                    if (remove) {
+                        return {
+                            decorationSet: DecorationSet.empty
+                        };
+                    }
+                    const decorationSet = buildDecorationSet(highlight, doc);
+                    return {
+                        decorationSet: decorationSet,
+                        highlight
+                    }
+                } else {
+                    return oldState
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const autocompleteState = this.getState(state);
+                if (autocompleteState?.decorationSet) {
+                    return autocompleteState.decorationSet
+                } else {
+                    return DecorationSet.empty
+                }
+            }
+        }
+    });
+};