@rebasepro/cms 0.17.3 → 0.18.0

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

@@ -1,122 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Button, CheckIcon, cls, focusedDisabled, iconSize, Popover, TextField, Trash2Icon } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { getMarkAttributes, isMarkActive, setMark, unsetMark } from "../utils/prosemirror-utils";
-import { schema } from "../schema";
-
-export function isValidUrl(url: string) {
-    try {
-        new URL(url);
-        return true;
-    } catch (e) {
-        return false;
-    }
-}
-
-export function getUrlFromString(str: string) {
-    if (isValidUrl(str)) return str;
-    try {
-        if (str.includes(".") && !str.includes(" ")) {
-            return new URL(`https://${str}`).toString();
-        }
-        return null;
-    } catch (e) {
-        return null;
-    }
-}
-
-interface LinkSelectorProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-}
-
-export const LinkSelector = ({
-    open,
-    onOpenChange
-}: LinkSelectorProps) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const { state, view } = useProseMirrorContext();
-    const { t } = useTranslation();
-
-    // Autofocus on input by default
-    useEffect(() => {
-        if (open && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [open]);
-
-    if (!state || !view) return null;
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        const value = inputRef.current?.value;
-        if (!value) return;
-        const url = getUrlFromString(value);
-        if (url) {
-            setMark(schema.marks.link, { href: url })(view.state, view.dispatch);
-            view.focus();
-            onOpenChange(false);
-        }
-    };
-
-    const handleRemoveLink = () => {
-        unsetMark(schema.marks.link)(view.state, view.dispatch);
-        view.focus();
-        onOpenChange(false);
-    };
-
-    const isActive = isMarkActive(state, schema.marks.link);
-    const href = getMarkAttributes(state, schema.marks.link).href || "";
-
-    return (
-        <Popover modal={true}
-            open={open}
-            onOpenChange={onOpenChange}
-            trigger={<Button variant="text"
-                type="button"
-                className="gap-2 rounded-none"
-                color={"text"}>
-                <p className={cls("underline decoration-stone-400 underline-offset-4", {
-                    "text-blue-500": isActive
-                })}>
-                    {t("editor_link")}
-                </p>
-            </Button>}>
-            <form
-                onSubmit={handleSubmit}
-                className="flex p-1 gap-1"
-            >
-                <TextField
-                    inputRef={inputRef}
-                    autoFocus={open}
-                    aria-label={t("editor_paste_or_type_link")}
-                    placeholder={t("editor_paste_or_type_link")}
-                    defaultValue={href}
-                    size="small"
-                    className="flex-grow text-surface-900 dark:text-white"
-                    inputClassName={cls("bg-transparent p-1 text-sm outline-none", focusedDisabled)}
-                />
-
-                {href ? (
-                    <Button
-                        size={"small"}
-                        variant="text"
-                        type="button"
-                        color={"text"}
-                        className="flex items-center"
-                        onClick={handleRemoveLink}
-                    >
-                        <Trash2Icon size={iconSize.small}/>
-                    </Button>
-                ) : (
-                    <Button size={"small"}
-                        type="submit"
-                        variant={"text"}>
-                        <CheckIcon size={iconSize.small}/>
-                    </Button>
-                )}
-            </form>
-        </Popover>
-    );
-};

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

@@ -1,159 +0,0 @@
-
-import { EditorState, Transaction } from "prosemirror-state";
-import { EditorBubbleItem } from "../components/editor-bubble-item";
-import { useTranslation } from "@rebasepro/app";
-
-import {
-    Button,
-    CheckIcon,
-    CheckSquareIcon,
-    ChevronDownIcon,
-    CodeIcon,
-    Heading1Icon,
-    Heading2Icon,
-    Heading3Icon,
-    iconSize,
-    ListIcon,
-    ListOrderedIcon,
-    Popover,
-    QuoteIcon,
-    TypeIcon
-} from "@rebasepro/ui";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { isNodeActive } from "../utils/prosemirror-utils";
-import { schema } from "../schema";
-import { setBlockType, wrapIn } from "prosemirror-commands";
-import { wrapInList } from "prosemirror-schema-list";
-
-export type SelectorItem = {
-    name: string;
-    labelKey: string;
-    icon: React.ElementType;
-    command: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
-    isActive: (state: EditorState) => boolean;
-};
-
-const items: SelectorItem[] = [
-    {
-        name: "Text",
-        labelKey: "editor_text",
-        icon: TypeIcon,
-        command: (state, dispatch) => setBlockType(schema.nodes.paragraph)(state, dispatch),
-        isActive: (state) =>
-            isNodeActive(state, schema.nodes.paragraph) &&
-            !isNodeActive(state, schema.nodes.bullet_list) &&
-            !isNodeActive(state, schema.nodes.ordered_list)
-    },
-    {
-        name: "Heading 1",
-        labelKey: "editor_heading_1",
-        icon: Heading1Icon,
-        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 1 })(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 1 })
-    },
-    {
-        name: "Heading 2",
-        labelKey: "editor_heading_2",
-        icon: Heading2Icon,
-        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 2 })(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 2 })
-    },
-    {
-        name: "Heading 3",
-        labelKey: "editor_heading_3",
-        icon: Heading3Icon,
-        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 3 })(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 3 })
-    },
-    {
-        name: "To-do List",
-        labelKey: "editor_todo_list",
-        icon: CheckSquareIcon,
-        command: (state, dispatch) => wrapInList(schema.nodes.task_list)(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.task_item)
-    },
-    {
-        name: "Bullet List",
-        labelKey: "editor_bullet_list",
-        icon: ListIcon,
-        command: (state, dispatch) => wrapInList(schema.nodes.bullet_list)(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.bullet_list)
-    },
-    {
-        name: "Numbered List",
-        labelKey: "editor_numbered_list",
-        icon: ListOrderedIcon,
-        command: (state, dispatch) => wrapInList(schema.nodes.ordered_list)(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.ordered_list)
-    },
-    {
-        name: "Quote",
-        labelKey: "editor_quote",
-        icon: QuoteIcon,
-        command: (state, dispatch) => wrapIn(schema.nodes.blockquote)(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.blockquote)
-    },
-    {
-        name: "Code",
-        labelKey: "editor_code",
-        icon: CodeIcon,
-        command: (state, dispatch) => setBlockType(schema.nodes.code_block)(state, dispatch),
-        isActive: (state) => isNodeActive(state, schema.nodes.code_block)
-    }
-];
-
-interface NodeSelectorProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    portalContainer: HTMLElement | null;
-}
-
-export const NodeSelector = ({
-    open,
-    onOpenChange,
-    portalContainer
-}: NodeSelectorProps) => {
-    const { state, view } = useProseMirrorContext();
-    const { t } = useTranslation();
-    if (!state || !view) return null;
-
-    const activeItem = items.filter((item) => item.isActive(state)).pop() ?? {
-        name: "Multiple",
-        labelKey: "editor_multiple"
-    };
-
-    return (
-        <Popover
-            sideOffset={5}
-            align="start"
-            portalContainer={portalContainer}
-            className="w-48 p-1"
-            trigger={<Button variant="text"
-                className="gap-2 rounded-none"
-                color="text">
-                <span className="whitespace-nowrap text-sm">{t(activeItem.labelKey)}</span>
-                <ChevronDownIcon size={iconSize.small}/>
-            </Button>}
-            modal={true}
-            open={open}
-            onOpenChange={onOpenChange}>
-            {items.map((item, index) => (
-                <EditorBubbleItem
-                    key={index}
-                    onSelect={() => {
-                        item.command(view.state, view.dispatch);
-                        view.focus();
-                        onOpenChange(false);
-                    }}
-                    className="flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white"
-                >
-                    <div className="flex items-center space-x-2">
-                        <item.icon size={iconSize.smallest}/>
-                        <span>{t(item.labelKey)}</span>
-                    </div>
-                    {activeItem.name === item.name && <CheckIcon size={iconSize.smallest}/>}
-                </EditorBubbleItem>
-            ))}
-        </Popover>
-    );
-};

package/src/editor/selectors/text-buttons.tsx

@@ -1,79 +0,0 @@
-
-import { EditorState, Transaction } from "prosemirror-state";
-import { EditorBubbleItem } from "../components/editor-bubble-item";
-import type { SelectorItem } from "./node-selector";
-import { BoldIcon, Button, cls, CodeIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from "@rebasepro/ui";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { isMarkActive } from "../utils/prosemirror-utils";
-import { schema } from "../schema";
-import { toggleMark } from "prosemirror-commands";
-
-export const TextButtons = () => {
-    const { state, view } = useProseMirrorContext();
-    if (!state || !view) return null;
-
-    // We pass state directly to isActive, and dispatch to command
-    const items = [
-        {
-            name: "bold",
-            labelKey: "editor_bold",
-            isActive: (s: EditorState) => isMarkActive(s, schema.marks.bold),
-            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.bold)(s, dispatch),
-            icon: BoldIcon
-        },
-        {
-            name: "italic",
-            labelKey: "editor_italic",
-            isActive: (s: EditorState) => isMarkActive(s, schema.marks.italic),
-            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.italic)(s, dispatch),
-            icon: ItalicIcon
-        },
-        {
-            name: "underline",
-            labelKey: "editor_underline",
-            isActive: (s: EditorState) => isMarkActive(s, schema.marks.underline),
-            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.underline)(s, dispatch),
-            icon: UnderlineIcon
-        },
-        {
-            name: "strike",
-            labelKey: "editor_strikethrough",
-            isActive: (s: EditorState) => isMarkActive(s, schema.marks.strike),
-            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.strike)(s, dispatch),
-            icon: StrikethroughIcon
-        },
-        {
-            name: "code",
-            labelKey: "editor_code",
-            isActive: (s: EditorState) => isMarkActive(s, schema.marks.code),
-            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.code)(s, dispatch),
-            icon: CodeIcon
-        }
-    ];
-
-    return (
-        <div className="flex">
-            {items.map((item, index) => (
-                <EditorBubbleItem
-                    key={index}
-                    onSelect={() => {
-                        item.command(view.state, view.dispatch);
-                        view.focus();
-                    }}
-                >
-                    <Button size={"small"}
-                        color="text"
-                        className="gap-2 rounded-none h-full"
-                        variant="text">
-                        <item.icon
-                            className={cls({
-                                "text-inherit": !item.isActive(state),
-                                "text-blue-500": item.isActive(state)
-                            })}
-                        />
-                    </Button>
-                </EditorBubbleItem>
-            ))}
-        </div>
-    );
-};

package/src/editor/types.ts

@@ -1,6 +0,0 @@
-import { JSONContent } from "./components";
-export type { JSONContent };
-
-export type EditorAIController = {
-    autocomplete: (textBefore: string, textAfter: string, onUpdate: (delta: string) => void) => Promise<string>;
-}

package/src/editor/useProseMirror.ts

@@ -1,125 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { EditorState, Transaction, Plugin } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { schema } from "./schema";
-import { markdownParser, markdownSerializer } from "./markdown";
-import { removeClassesFromJson } from "./utils/remove_classes";
-import { DOMParser as ProseMirrorDOMParser, DOMSerializer } from "prosemirror-model";
-
-export interface UseProseMirrorOptions {
-    content?: unknown;
-    plugins?: Plugin[];
-    editable?: boolean;
-    onMarkdownContentChange?: (content: string) => void;
-    onJsonContentChange?: (content: unknown | null) => void;
-    onHtmlContentChange?: (content: string) => void;
-    version?: number;
-}
-
-export function useProseMirror(options: UseProseMirrorOptions) {
-    const mountRef = useRef<HTMLDivElement>(null);
-    const viewRef = useRef<EditorView | null>(null);
-    const [editorState, setEditorState] = useState<EditorState | null>(null);
-    const isUpdatingContentRef = useRef(false);
-
-    useEffect(() => {
-        if (!mountRef.current) return;
-
-        let doc;
-        try {
-            if (typeof options.content === "string") {
-                if (options.content.trim() === "") {
-                    doc = schema.node("doc", null, [schema.node("paragraph")]);
-                } else if (options.content.startsWith("<")) {
-                    const temp = document.createElement("div");
-                    temp.innerHTML = options.content;
-                    doc = ProseMirrorDOMParser.fromSchema(schema).parse(temp);
-                } else {
-                    doc = markdownParser.parse(options.content);
-                }
-            } else if (options.content && typeof options.content === "object" && Object.keys(options.content).length > 0) {
-                doc = schema.nodeFromJSON(options.content);
-            } else {
-                doc = schema.node("doc", null, [schema.node("paragraph")]);
-            }
-        } catch (e) {
-            console.warn("Failed to parse initial content, falling back to empty doc", e);
-            doc = schema.node("doc", null, [schema.node("paragraph")]);
-        }
-
-        const state = EditorState.create({
-            doc,
-            schema,
-            plugins: options.plugins || []
-        });
-
-        const view = new EditorView(mountRef.current, {
-            state,
-            editable: () => options.editable !== false,
-            dispatchTransaction(transaction: Transaction) {
-                const newState = view.state.apply(transaction);
-                view.updateState(newState);
-                setEditorState(newState);
-
-                if (transaction.docChanged && !isUpdatingContentRef.current) {
-
-                    if (options.onMarkdownContentChange) {
-                        options.onMarkdownContentChange(markdownSerializer.serialize(newState.doc));
-                    }
-                    if (options.onJsonContentChange) {
-                        options.onJsonContentChange(removeClassesFromJson(newState.doc.toJSON()));
-                    }
-                    if (options.onHtmlContentChange) {
-                        const div = document.createElement("div");
-                        const fragment = DOMSerializer.fromSchema(schema).serializeFragment(newState.doc.content);
-                        div.appendChild(fragment);
-                        options.onHtmlContentChange(div.innerHTML);
-                    }
-                }
-            }
-        });
-
-
-        viewRef.current = view;
-        setEditorState(state);
-
-        return () => {
-            view.destroy();
-            viewRef.current = null;
-        };
-    }, []); // Initialize once
-
-    // Handle external content updates (like version change)
-    useEffect(() => {
-        if (!viewRef.current || options.version === undefined || options.version <= 0) return;
-        try {
-            isUpdatingContentRef.current = true;
-            let doc;
-            if (typeof options.content === "string") {
-                doc = markdownParser.parse(options.content) || schema.node("doc", null, [schema.node("paragraph")]);
-            } else if (options.content) {
-                doc = schema.nodeFromJSON(options.content);
-            } else {
-                doc = schema.node("doc", null, [schema.node("paragraph")]);
-            }
-
-            const tr = viewRef.current.state.tr.replaceWith(0, viewRef.current.state.doc.content.size, doc);
-            viewRef.current.dispatch(tr);
-            isUpdatingContentRef.current = false;
-        } catch (e) {
-            console.error("Error updating content manually via version bump:", e);
-            isUpdatingContentRef.current = false;
-        }
-    }, [options.version]);
-
-    // Handle editable prop change
-    useEffect(() => {
-        if (viewRef.current && editorState) {
-            viewRef.current.setProps({ editable: () => options.editable !== false });
-        }
-    }, [options.editable, editorState]);
-
-    return { mountRef,
-view: viewRef.current,
-editorState };
-}

package/src/editor/utils/prosemirror-utils.ts

@@ -1,113 +0,0 @@
-import { EditorState, TextSelection, Transaction } from "prosemirror-state";
-import { MarkType, NodeType, Node as ProseMirrorNode } from "prosemirror-model";
-
-export function isMarkActive(state: EditorState, type: MarkType) {
-    if (!state || !type) return false;
-    const { from, $from, to, empty } = state.selection;
-    if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
-    return state.doc.rangeHasMark(from, to, type);
-}
-
-export function isNodeActive(state: EditorState, type: NodeType, attrs: Record<string, unknown> = {}) {
-    if (!state || !type) return false;
-    const selection = state.selection;
-    const { $from, to } = selection;
-    const node = selection instanceof TextSelection ? undefined : (selection as { node?: ProseMirrorNode }).node;
-    if (node) {
-        return node.type === type && (!attrs || Object.keys(attrs).every((key) => node.attrs[key] === attrs[key]));
-    }
-    return to <= $from.end() && $from.parent.type === type && (!attrs || Object.keys(attrs).every((key) => $from.parent.attrs[key] === attrs[key]));
-}
-
-export function getMarkAttributes(state: EditorState, type: MarkType) {
-    if (!state || !type) return {};
-    const { from, $from, to, empty } = state.selection;
-    let mark;
-    if (empty) {
-        mark = type.isInSet(state.storedMarks || $from.marks());
-    } else {
-        let found = false;
-        state.doc.nodesBetween(from, to, (node) => {
-            if (found) return false;
-            const m = type.isInSet(node.marks);
-            if (m) {
-                mark = m;
-                found = true;
-            }
-            return true;
-        });
-    }
-    return mark ? mark.attrs : {};
-}
-
-export function setMark(type: MarkType, attrs?: Record<string, unknown>) {
-    return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
-        const selection = state.selection as TextSelection;
-        const { empty, $cursor, ranges } = selection;
-        if ((empty && !$cursor) || !type) return false;
-        if (dispatch) {
-            if ($cursor) {
-                dispatch(state.tr.addStoredMark(type.create(attrs)));
-            } else {
-                const tr = state.tr;
-                for (let i = 0; i < ranges.length; i++) {
-                    const { $from, $to } = ranges[i];
-                    tr.addMark($from.pos, $to.pos, type.create(attrs));
-                }
-                dispatch(tr.scrollIntoView());
-            }
-        }
-        return true;
-    };
-}
-
-export function unsetMark(type: MarkType) {
-    return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
-        const selection = state.selection as TextSelection;
-        const { empty, $cursor, ranges } = selection;
-        if ((empty && !$cursor) || !type) return false;
-        if (dispatch) {
-            const tr = state.tr;
-            if ($cursor) {
-                const parent = $cursor.parent;
-                let markStart = -1;
-                let markEnd = -1;
-                let currentMarkStart = -1;
-
-                parent.forEach((child: ProseMirrorNode, offset: number) => {
-                    const childStart = $cursor.start() + offset;
-                    const childEnd = childStart + child.nodeSize;
-
-                    if (type.isInSet(child.marks)) {
-                        if (currentMarkStart === -1) currentMarkStart = childStart;
-                        if ($cursor.pos >= childStart && $cursor.pos <= childEnd) {
-                            markStart = currentMarkStart;
-                        }
-                    } else {
-                        if (currentMarkStart !== -1) {
-                            if (markStart !== -1 && markEnd === -1) markEnd = childStart;
-                            currentMarkStart = -1;
-                        }
-                    }
-                });
-
-                if (markStart !== -1 && markEnd === -1) {
-                    markEnd = $cursor.end();
-                }
-
-                if (markStart !== -1 && markEnd !== -1) {
-                    tr.removeMark(markStart, markEnd, type);
-                }
-                tr.removeStoredMark(type);
-                dispatch(tr.scrollIntoView());
-            } else {
-                for (let i = 0; i < ranges.length; i++) {
-                    const { $from, $to } = ranges[i];
-                    tr.removeMark($from.pos, $to.pos, type);
-                }
-                dispatch(tr.scrollIntoView());
-            }
-        }
-        return true;
-    };
-}

package/src/editor/utils/remove_classes.ts

@@ -1,18 +0,0 @@
-export function removeClassesFromJson(jsonObj: unknown): unknown {
-    // If it's an array, apply the function to each element
-    if (Array.isArray(jsonObj)) {
-        return jsonObj.map(item => removeClassesFromJson(item));
-    } else if (typeof jsonObj === "object" && jsonObj !== null) { // If it's an object, recurse through its properties
-        const obj = jsonObj as Record<string, unknown>;
-        // If the object has an `attrs` property and `class` field, delete the `class` field
-        if (obj.attrs && typeof obj.attrs === "object" && obj.attrs !== null && "class" in (obj.attrs as Record<string, unknown>)) {
-            delete (obj.attrs as Record<string, unknown>).class;
-        }
-
-        // Apply the function recursively to object properties
-        Object.keys(obj).forEach(key => {
-            obj[key] = removeClassesFromJson(obj[key]);
-        });
-    }
-    return jsonObj;
-}

package/src/editor/utils/useDebouncedCallback.ts

@@ -1,25 +0,0 @@
-import React from "react";
-
-export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
-
-    const pendingUpdate = React.useRef(false);
-    const performUpdate = () => {
-        callback();
-        pendingUpdate.current = false;
-    };
-
-    const handlerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-    React.useEffect(
-        () => {
-            pendingUpdate.current = true;
-            clearTimeout(handlerRef.current);
-            handlerRef.current = setTimeout(performUpdate, timeoutMs);
-            return () => {
-                if (immediate)
-                    performUpdate();
-            };
-        },
-        [immediate, value]
-    );
-}