@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/editor/editor.tsx

@@ -1,8 +1,8 @@
 "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 { EditorState, Selection } from "prosemirror-state";
+import { cls, defaultBorderMixin, Separator, TextareaAutosize, useInjectStyles } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
 import { EditorBubble, ImageBubble, SlashCommandMenu, TableBubble, type JSONContent } from "./components";
 import { NodeSelector } from "./selectors/node-selector";
 import { LinkSelector } from "./selectors/link-selector";
@@ -25,16 +25,17 @@ export interface MarkdownEditorConfig {
   transformPastedText?: boolean;
 }
 
-export type RebaseEditorTextSize = "sm" | "base" | "lg";
+export type RichTextEditorTextSize = "sm" | "base" | "lg";
 
-export type RebaseEditorProps = {
+
+export type RichTextEditorProps = {
   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,
+  textSize?: RichTextEditorTextSize,
   highlight?: { from: number, to: number },
   aiController?: EditorAIController,
   customComponents?: CustomEditorComponent[];
@@ -42,13 +43,14 @@ export type RebaseEditorProps = {
   markdownConfig?: MarkdownEditorConfig;
 };
 
+
 const proseClasses = {
   "sm": "prose-sm",
   "base": "prose-base",
   "lg": "prose-lg"
 }
 
-export const RebaseEditor = ({
+export const RichTextEditor = ({
   content,
   onJsonContentChange,
   onHtmlContentChange,
@@ -60,7 +62,8 @@ export const RebaseEditor = ({
   aiController,
   disabled,
   markdownConfig
-}: RebaseEditorProps) => {
+}: RichTextEditorProps) => {
+
   const { t } = useTranslation();
 
   const [openNode, setOpenNode] = useState(false);
@@ -134,7 +137,7 @@ onJsonContentChange };
         const markdown = serializer.serialize(currentState.doc);
         onMarkdownContentChange(markdown);
       } catch (e) {
-        console.warn("[RebaseEditor] Could not serialize editor state to markdown:", e);
+        console.warn("[RichTextEditor] Could not serialize editor state to markdown:", e);
       }
     }
     if (onJsonContentChange) {
@@ -154,7 +157,7 @@ onJsonContentChange };
   // the reverted value.
   const versionRef = useRef(version);
   useEffect(() => {
-    if (versionRef.current === version) return;   // skip initial render
+    if (versionRef.current === version) return; // skip initial render
     versionRef.current = version;
     if (!view) return;
     try {
@@ -168,7 +171,7 @@ onJsonContentChange };
         view.dispatch(tr);
       }
     } catch (e) {
-      console.warn("[RebaseEditor] Could not reset editor content:", e);
+      console.warn("[RichTextEditor] Could not reset editor content:", e);
     }
     // Also reset raw-markdown textarea if the user is in source mode
     if (isMarkdownMode) {
@@ -236,7 +239,7 @@ onJsonContentChange };
 
 
   return (
-    <div className="relative min-h-[200px] w-full">
+    <div className="relative min-h-[200px] w-full flex flex-col">
       <button
         type="button"
         onClick={handleToggleMarkdown}
@@ -249,10 +252,23 @@ onJsonContentChange };
       <ProseMirrorContext.Provider value={useMemo(() => ({ state,
 view }), [state, view])}>
 
-        <div style={{ display: isMarkdownMode ? "none" : "block" }}>
+        <div style={{ display: isMarkdownMode ? "none" : "flex" }} className="flex-1 flex flex-col">
           <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")}
+            onClick={(e) => {
+              // If the click landed on the wrapper padding (not on the ProseMirror
+              // content), focus the editor and place the cursor at the nearest position.
+              if (view && e.target === e.currentTarget) {
+                view.focus();
+                // Place cursor at end of the document
+                const end = view.state.doc.content.size;
+                const tr = view.state.tr.setSelection(
+                  Selection.near(view.state.doc.resolve(end), -1)
+                );
+                view.dispatch(tr);
+              }
+            }}
+            className={cls("relative prose dark:prose-invert cursor-text flex-1", 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 py-4")}
           />
 
           {view && (
@@ -290,7 +306,7 @@ view }), [state, view])}>
             onChange={handleMarkdownChange}
             onBlur={handleMarkdownBlur}
             className={cls(
-              "w-full h-full min-h-[200px] p-12 bg-transparent resize-none font-mono focus:ring-0",
+              "w-full h-full min-h-[200px] px-12 py-4 bg-transparent resize-none font-mono focus:ring-0",
               proseClass
             )}
             style={{
@@ -311,6 +327,9 @@ view }), [state, view])}>
 const cssStyles = `
 .ProseMirror {
     box-shadow: none !important;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    min-height: 100%;
 }
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);

package/src/editor/extensions/HighlightDecorationExtension.ts

@@ -1,5 +1,6 @@
 import { Plugin, PluginKey, Transaction, EditorState } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { Node as ProseMirrorNode } from "prosemirror-model";
 
 export interface HighlightRange {
     from: number
@@ -13,8 +14,8 @@ interface AutocompleteHighlightState {
 
 export const highlightDecorationKey = new PluginKey<AutocompleteHighlightState>("highlightDecoration");
 
-function buildDecorationSet(highlight: any, doc: any) {
-    const decorations: [any?] = [];
+function buildDecorationSet(highlight: HighlightRange | undefined, doc: ProseMirrorNode) {
+    const decorations: Decoration[] = [];
 
     if (highlight) {
         decorations.push(

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

@@ -5,8 +5,8 @@ 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);
+    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;
@@ -69,7 +69,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
                     const images = files.filter(file => /image/i.test(file.type));
 
                     if (images.length === 0) {
-                        console.log("No images found in dropped files");
+                        console.debug("No images found in dropped files");
                         return false;
                     }
 

package/src/editor/extensions/Image.ts

@@ -8,8 +8,8 @@ export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<Fi
 
     const { schema } = view.state;
 
-    // @ts-ignore
-    const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
+    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;
@@ -99,7 +99,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
                     const images = files.filter(file => /image/i.test(file.type));
 
                     if (images.length === 0) {
-                        console.log("No images found in dropped files");
+                        console.debug("No images found in dropped files");
                         return false;
                     }
 

package/src/editor/extensions/clipboard.ts

@@ -16,8 +16,8 @@ export function serializeForClipboard(view: EditorView, slice: Slice) {
         openStart--
         openEnd--
         const node = content.firstChild!
-        // @ts-ignore
-        context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null)
+        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
     }
 

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

@@ -0,0 +1,24 @@
+/**
+ * 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;
+}

package/src/editor/markdown.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path="./markdown-it-plugins.d.ts" />
 import {
     MarkdownParser,
     MarkdownSerializer,
@@ -5,11 +7,8 @@ import {
     defaultMarkdownSerializer
 } from "prosemirror-markdown";
 import markdownIt from "markdown-it";
-// @ts-expect-error -- markdown-it-task-lists does not ship type declarations
 import markdownItTaskLists from "markdown-it-task-lists";
-// @ts-expect-error -- markdown-it-mark does not ship type declarations
 import markdownItMark from "markdown-it-mark";
-// @ts-expect-error -- markdown-it-ins does not ship type declarations
 import markdownItIns from "markdown-it-ins";
 
 import { schema } from "./schema";

package/src/editor/nodeViews/ReactNodeView.tsx

@@ -80,7 +80,7 @@ export class ReactNodeView implements NodeView {
         this.root.unmount();
     }
 
-    ignoreMutation(mutation: any) {
+    ignoreMutation(mutation: MutationRecord | { type: "selection"; target: Node }) {
         if (!this.contentDOM) {
             return true;
         }

package/src/editor/nodeViews/TaskItemComponent.tsx

@@ -1,29 +1,30 @@
 import React from "react";
+import { Checkbox, Label } from "@rebasepro/ui";
 import { ReactNodeViewProps } from "./ReactNodeView";
 
 export const TaskItemComponent: React.FC<ReactNodeViewProps> = ({ node, view, getPos }) => {
     const checked = node.attrs.checked;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleCheckedChange = (isChecked: boolean) => {
         const pos = getPos();
         if (typeof pos !== "number") return;
 
         view.dispatch(
             view.state.tr.setNodeMarkup(pos, undefined, {
                 ...node.attrs,
-                checked: e.target.checked
+                checked: isChecked
             })
         );
     };
 
     return (
-        <label contentEditable={false} className="flex items-start select-none px-1">
-            <input
-                type="checkbox"
+        <Label contentEditable={false} className="flex items-start select-none px-1 cursor-pointer">
+            <Checkbox
                 checked={checked}
-                onChange={handleChange}
-                className="mt-1 flex-shrink-0 cursor-pointer"
+                onCheckedChange={handleCheckedChange}
+                padding={false}
+                size="small"
             />
-        </label>
+        </Label>
     );
 };

package/src/editor/schema.ts

@@ -23,41 +23,65 @@ const marks: { [key: string]: MarkSpec } = {
             }
         ],
         toDOM(node) {
-            const { href, title, target } = node.attrs;
-            return ["a", { href,
-title,
-target,
-class: "text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" }, 0];
+            const {
+                href,
+                title,
+                target
+            } = node.attrs;
+            return ["a", {
+                href,
+                title,
+                target,
+                class: "text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
+            }, 0];
         }
     },
     bold: {
         parseDOM: [
             { tag: "strong" },
-            { tag: "b",
-getAttrs: (node: HTMLElement | string) => typeof node !== "string" && node.style.fontWeight !== "normal" && null },
-            { style: "font-weight=400",
-clearMark: m => m.type.name === "bold" },
-            { style: "font-weight",
-getAttrs: (value: string | HTMLElement) => typeof value === "string" && /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null }
+            {
+                tag: "b",
+                getAttrs: (node: HTMLElement | string) => typeof node !== "string" && node.style.fontWeight !== "normal" && null
+            },
+            {
+                style: "font-weight=400",
+                clearMark: m => m.type.name === "bold"
+            },
+            {
+                style: "font-weight",
+                getAttrs: (value: string | HTMLElement) => typeof value === "string" && /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+            }
         ],
-        toDOM() { return ["strong", 0]; }
+        toDOM() {
+            return ["strong", 0];
+        }
     },
     italic: {
         parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
-        toDOM() { return ["em", 0]; }
+        toDOM() {
+            return ["em", 0];
+        }
     },
     strike: {
         parseDOM: [{ tag: "s" }, { tag: "del" }, { tag: "strike" }, { style: "text-decoration=line-through" }],
-        toDOM() { return ["s", 0]; }
+        toDOM() {
+            return ["s", 0];
+        }
     },
     underline: {
         parseDOM: [{ tag: "u" }, { style: "text-decoration=underline" }],
-        toDOM() { return ["u", 0]; }
+        toDOM() {
+            return ["u", 0];
+        }
     },
     code: {
         parseDOM: [{ tag: "code" }],
-        toDOM() { return ["code", { class: "rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium",
-spellcheck: "false" }, 0]; }
+        toDOM() {
+            return ["code", {
+                class: "rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium",
+                spellcheck: "false"
+            }, 0];
+        }
     },
     textStyle: {
         attrs: { color: { default: null } },
@@ -88,8 +112,10 @@ spellcheck: "false" }, 0]; }
             }
         ],
         toDOM(mark) {
-            return ["mark", mark.attrs.color ? { style: `background-color: ${mark.attrs.color}; color: inherit;`,
-"data-color": mark.attrs.color } : {}, 0];
+            return ["mark", mark.attrs.color ? {
+                style: `background-color: ${mark.attrs.color}; color: inherit;`,
+                "data-color": mark.attrs.color
+            } : {}, 0];
         }
     }
 };
@@ -102,7 +128,9 @@ const nodes: { [key: string]: NodeSpec } = {
         content: "inline*",
         group: "block",
         parseDOM: [{ tag: "p" }],
-        toDOM() { return ["p", 0]; }
+        toDOM() {
+            return ["p", 0];
+        }
     },
     text: {
         group: "inline"
@@ -112,7 +140,9 @@ const nodes: { [key: string]: NodeSpec } = {
         group: "block",
         defining: true,
         parseDOM: [{ tag: "blockquote" }],
-        toDOM() { return ["blockquote", { class: "border-l-4 border-primary" }, 0]; }
+        toDOM() {
+            return ["blockquote", { class: "border-l-4 border-primary" }, 0];
+        }
     },
     heading: {
         attrs: { level: { default: 1 } },
@@ -120,25 +150,41 @@ const nodes: { [key: string]: NodeSpec } = {
         group: "block",
         defining: true,
         parseDOM: [
-            { tag: "h1",
-attrs: { level: 1 } },
-            { tag: "h2",
-attrs: { level: 2 } },
-            { tag: "h3",
-attrs: { level: 3 } },
-            { tag: "h4",
-attrs: { level: 4 } },
-            { tag: "h5",
-attrs: { level: 5 } },
-            { tag: "h6",
-attrs: { level: 6 } }
+            {
+                tag: "h1",
+                attrs: { level: 1 }
+            },
+            {
+                tag: "h2",
+                attrs: { level: 2 }
+            },
+            {
+                tag: "h3",
+                attrs: { level: 3 }
+            },
+            {
+                tag: "h4",
+                attrs: { level: 4 }
+            },
+            {
+                tag: "h5",
+                attrs: { level: 5 }
+            },
+            {
+                tag: "h6",
+                attrs: { level: 6 }
+            }
         ],
-        toDOM(node) { return ["h" + node.attrs.level, 0]; }
+        toDOM(node) {
+            return ["h" + node.attrs.level, 0];
+        }
     },
     horizontal_rule: {
         group: "block",
         parseDOM: [{ tag: "hr" }],
-        toDOM() { return ["hr", { class: "mt-4 mb-6 border-t border-solid border-gray-200 dark:border-gray-800" }]; }
+        toDOM() {
+            return ["hr", { class: "mt-4 mb-6 border-t border-solid border-gray-200 dark:border-gray-800" }];
+        }
     },
     code_block: {
         content: "text*",
@@ -148,10 +194,14 @@ attrs: { level: 6 } }
         defining: true,
         attrs: { language: { default: null } },
         parseDOM: [
-            { tag: "pre",
-preserveWhitespace: "full" }
+            {
+                tag: "pre",
+                preserveWhitespace: "full"
+            }
         ],
-        toDOM(node) { return ["pre", { class: "rounded bg-blue-50 dark:bg-surface-700 border border-solid border-gray-200 dark:border-gray-800 p-5 font-mono font-medium text-gray-800 dark:text-gray-200" }, ["code", 0]]; }
+        toDOM(node) {
+            return ["pre", { class: "rounded bg-blue-50 dark:bg-surface-700 border border-solid border-gray-200 dark:border-gray-800 p-5 font-mono font-medium text-gray-800 dark:text-gray-200" }, ["code", 0]];
+        }
     },
     image: {
         inline: false,
@@ -176,18 +226,26 @@ preserveWhitespace: "full" }
             }
         ],
         toDOM(node) {
-            const { src, alt, title } = node.attrs;
-            return ["img", { src,
-alt,
-title,
-class: "rounded-lg max-w-full !m-0" }];
+            const {
+                src,
+                alt,
+                title
+            } = node.attrs;
+            return ["img", {
+                src,
+                alt,
+                title,
+                class: "rounded-lg max-w-full !m-0"
+            }];
         }
     },
     bullet_list: {
         content: "list_item+",
         group: "block",
         parseDOM: [{ tag: "ul" }],
-        toDOM() { return ["ul", { class: "list-disc list-outside leading-3 -mt-2" }, 0]; }
+        toDOM() {
+            return ["ul", { class: "list-disc list-outside leading-3 -mt-2" }, 0];
+        }
     },
     ordered_list: {
         content: "list_item+",
@@ -203,22 +261,30 @@ class: "rounded-lg max-w-full !m-0" }];
             }
         ],
         toDOM(node) {
-            return node.attrs.order === 1 ? ["ol", { class: "list-decimal list-outside leading-3 -mt-2" }, 0] : ["ol", { start: node.attrs.order,
-class: "list-decimal list-outside leading-3 -mt-2" }, 0];
+            return node.attrs.order === 1 ? ["ol", { class: "list-decimal list-outside leading-3 -mt-2" }, 0] : ["ol", {
+                start: node.attrs.order,
+                class: "list-decimal list-outside leading-3 -mt-2"
+            }, 0];
         }
     },
     list_item: {
         content: "paragraph block*",
         parseDOM: [{ tag: "li" }],
-        toDOM() { return ["li", { class: "leading-normal -mb-2" }, 0]; },
+        toDOM() {
+            return ["li", { class: "leading-normal -mb-2" }, 0];
+        },
         defining: true
     },
     task_list: {
         group: "block",
         content: "task_item+",
-        parseDOM: [{ tag: 'ul[data-type="taskList"]' }],
-        toDOM() { return ["ul", { "data-type": "taskList",
-class: "not-prose" }, 0]; }
+        parseDOM: [{ tag: "ul[data-type=\"taskList\"]" }],
+        toDOM() {
+            return ["ul", {
+                "data-type": "taskList",
+                class: "not-prose"
+            }, 0];
+        }
     },
     task_item: {
         content: "paragraph block*",
@@ -226,7 +292,7 @@ class: "not-prose" }, 0]; }
         attrs: { checked: { default: false } },
         parseDOM: [
             {
-                tag: 'li[data-type="taskItem"]',
+                tag: "li[data-type=\"taskItem\"]",
                 getAttrs(dom: HTMLElement | string) {
                     if (typeof dom === "string") return false;
                     return { checked: dom.getAttribute("data-checked") === "true" };
@@ -234,9 +300,11 @@ class: "not-prose" }, 0]; }
             }
         ],
         toDOM(node) {
-            return ["li", { "data-type": "taskItem",
-"data-checked": node.attrs.checked ? "true" : "false",
-class: "flex items-start my-4" }, 0];
+            return ["li", {
+                "data-type": "taskItem",
+                "data-checked": node.attrs.checked ? "true" : "false",
+                class: "flex items-start my-4"
+            }, 0];
         }
     },
     hard_break: {
@@ -244,7 +312,9 @@ class: "flex items-start my-4" }, 0];
         group: "inline",
         selectable: false,
         parseDOM: [{ tag: "br" }],
-        toDOM() { return ["br"]; }
+        toDOM() {
+            return ["br"];
+        }
     },
     ...tableNodes({
         tableGroup: "block",
@@ -252,12 +322,18 @@ class: "flex items-start my-4" }, 0];
         cellAttributes: {
             background: {
                 default: null,
-                getFromDOM(dom: HTMLElement) { return dom.style.backgroundColor || null },
-                setDOMAttr(value: any, attrs: any) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
+                getFromDOM(dom: HTMLElement) {
+                    return dom.style.backgroundColor || null
+                },
+                setDOMAttr(value: unknown, attrs: any) {
+                    if (value && typeof value === "string") attrs.style = (attrs.style || "") + `background-color: ${value};`
+                }
             }
         }
     })
 };
 
-export const schema = new Schema({ nodes,
-marks });
+export const schema = new Schema({
+    nodes,
+    marks
+});

package/src/editor/selectors/ai-selector.tsx

@@ -36,7 +36,6 @@
 //   },
 // ];
 //
-// //TODO: I think it makes more sense to create a custom Tiptap extension for this functionality https://tiptap.dev/docs/editor/ai/introduction
 //
 // interface AISelectorProps {
 //   open: boolean;

package/src/editor/selectors/color-selector.tsx

@@ -1,7 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import { EditorBubbleItem } from "../components";
-import { Button, Popover } from "@rebasepro/ui";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { Button, CheckIcon, ChevronDownIcon, Popover } from "@rebasepro/ui";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
 import { isMarkActive, getMarkAttributes, setMark, unsetMark } from "../utils/prosemirror-utils";
 import { schema } from "../schema";