@rebasepro/cms 0.17.3 → 0.18.0

package/src/editor/markdown.ts

@@ -1,204 +0,0 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
-/// <reference path="./markdown-it-plugins.d.ts" />
-import {
-    MarkdownParser,
-    MarkdownSerializer,
-    defaultMarkdownParser,
-    defaultMarkdownSerializer
-} from "prosemirror-markdown";
-import markdownIt from "markdown-it";
-import markdownItTaskLists from "markdown-it-task-lists";
-import markdownItMark from "markdown-it-mark";
-import markdownItIns from "markdown-it-ins";
-
-import { schema } from "./schema";
-
-/**
- * ProseMirror's MarkdownSerializerState exposes an `out` string property
- * that accumulates the serialised output. The published typings do not
- * include it, so we extend the type locally to avoid `as any` casts.
- */
-interface MarkdownSerializerStateWithOutput {
-    out: string;
-}
-
-const parserTokens: any = {
-    ...defaultMarkdownParser.tokens,
-    em: { mark: "italic" },
-    strong: { mark: "bold" },
-    html_inline: { ignore: true,
-noCloseToken: true },
-    html_block: { ignore: true,
-noCloseToken: true },
-    s: {
-        mark: "strike"
-    },
-    task_list: {
-        block: "task_list"
-    },
-    task_item: {
-        block: "task_item",
-        getAttrs: (tok: any) => ({ checked: tok.attrGet("checked") === "true" })
-    },
-    mark: {
-        mark: "highlight"
-    },
-    ins: {
-        mark: "underline"
-    },
-    table: { block: "table" },
-    thead: { ignore: true },
-    tbody: { ignore: true },
-    tr: { block: "table_row" },
-    th: { block: "table_header" },
-    td: { block: "table_cell" }
-};
-
-const md = markdownIt({ html: false })
-    .use(markdownItTaskLists)
-    .use(markdownItMark)
-    .use(markdownItIns);
-
-// Unwrap images from paragraphs so they can be parsed as block nodes by ProseMirror
-md.core.ruler.after("inline", "image-to-block", (state: any) => {
-    const tokens = state.tokens;
-    for (let i = tokens.length - 2; i >= 1; i--) {
-        if (
-            tokens[i - 1] && tokens[i - 1].type === "paragraph_open" &&
-            tokens[i] && tokens[i].type === "inline" &&
-            tokens[i + 1] && tokens[i + 1].type === "paragraph_close"
-        ) {
-            const inlineTokens = tokens[i].children || [];
-            if (inlineTokens.length === 1 && inlineTokens[0].type === "image") {
-                state.tokens.splice(i - 1, 3, inlineTokens[0]);
-                // No need to adjust index when looping backward!
-            }
-        }
-    }
-});
-
-// Wrap inline tokens inside table cells into paragraphs to satisfy ProseMirror table cell schema (block+)
-md.core.ruler.after("inline", "tables-wrap-paragraphs", (state: any) => {
-    const tokens = state.tokens;
-    for (let i = tokens.length - 1; i >= 0; i--) {
-        if (tokens[i].type === "td_open" || tokens[i].type === "th_open") {
-            let closeIndex = i + 1;
-            while (closeIndex < tokens.length && tokens[closeIndex].type !== "td_close" && tokens[closeIndex].type !== "th_close") {
-                closeIndex++;
-            }
-            if (closeIndex < tokens.length) {
-                const pOpen = new state.Token("paragraph_open", "p", 1);
-                pOpen.block = true;
-                const pClose = new state.Token("paragraph_close", "p", -1);
-                pClose.block = true;
-
-                state.tokens.splice(closeIndex, 0, pClose);
-                state.tokens.splice(i + 1, 0, pOpen);
-            }
-        }
-    }
-});
-
-export const markdownParser = new MarkdownParser(schema, md, parserTokens);
-
-
-export const markdownSerializer = new MarkdownSerializer(
-    {
-        ...defaultMarkdownSerializer.nodes,
-        // Use "-" as bullet character to match markdown-it output and prevent
-        // serialization round-trip from changing "- " to "* " and dirtying the form.
-        bullet_list(state, node) {
-            state.renderList(node, "  ", () => "- ");
-        },
-        // Add custom serialization for task lists
-        task_list(state, node) {
-            state.renderList(node, "  ", () => "- ");
-        },
-        task_item(state, node) {
-            state.write(`[${node.attrs.checked ? "x" : " "}] `);
-            state.renderContent(node);
-        },
-        horizontal_rule(state, node) {
-            state.write(node.attrs.markup || "---");
-            state.closeBlock(node);
-        },
-        image(state, node) {
-            const rawSrc = node.attrs.src || "";
-            const src = rawSrc.replace(/ /g, "%20");
-            state.write("![" + state.esc(node.attrs.alt || "") + "](" + src.replace(/[\(\)]/g, "\\$&") +
-                (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : "") + ")");
-            state.closeBlock(node);
-        },
-        table(state, node) {
-            // Access the internal `.out` accumulator with a typed cast (see MarkdownSerializerStateWithOutput).
-            const stateInternal = state as unknown as MarkdownSerializerStateWithOutput;
-            node.forEach((row, _, i) => {
-                row.forEach((cell, _, j) => {
-                    if (j === 0) state.write("| ");
-                    else state.write(" ");
-
-                    // Capture cell content by tracking state.out length.
-                    // This avoids monkey-patching state.write which loses
-                    // flushClose/delim handling and can produce "undefined" text.
-                    const startLen = stateInternal.out.length;
-                    let first = true;
-                    cell.forEach((block) => {
-                        if (!first) stateInternal.out += "<br>";
-                        state.renderInline(block);
-                        first = false;
-                    });
-                    const cellContent = stateInternal.out.slice(startLen);
-                    // Remove the rendered content from state.out; we'll re-add it escaped
-                    stateInternal.out = stateInternal.out.slice(0, startLen);
-                    state.write(cellContent.replace(/\|/g, "\\|").replace(/\n/g, " "));
-                    state.write(" |");
-                });
-                state.write("\n");
-                if (i === 0) {
-                    row.forEach((cell, _, j) => {
-                        state.write(j === 0 ? "|---|" : "---|");
-                    });
-                    state.write("\n");
-                }
-            });
-            state.closeBlock(node);
-        },
-        table_row() {},
-        table_cell() {},
-        table_header() {}
-    },
-    {
-        ...defaultMarkdownSerializer.marks,
-        bold: defaultMarkdownSerializer.marks.strong,
-        italic: defaultMarkdownSerializer.marks.em,
-        strike: { open: "~~",
-close: "~~",
-mixable: true,
-expelEnclosingWhitespace: true },
-        highlight: { open: "==",
-close: "==",
-mixable: true,
-expelEnclosingWhitespace: true },
-        underline: { open: "++",
-close: "++",
-mixable: true,
-expelEnclosingWhitespace: true },
-        link: {
-            ...defaultMarkdownSerializer.marks.link,
-            close(state: any, mark, parent, index) {
-                const inAutolink = state.inAutolink;
-                state.inAutolink = undefined;
-                const href = mark.attrs.href.replace(/ /g, "%20");
-                return inAutolink ? ">"
-                    : "](" + href.replace(/[\(\)"]/g, "\\$&") + (mark.attrs.title ? ` "${mark.attrs.title.replace(/"/g, '\\"')}"` : "") + ")";
-            }
-        },
-        // textStyle (colored text from HTML) has no markdown equivalent — emit content as-is
-        textStyle: { open: "",
-close: "",
-mixable: true,
-expelEnclosingWhitespace: true }
-    }
-);
-export const parser = markdownParser;
-export const serializer = markdownSerializer;

package/src/editor/nodeViews/ImageComponent.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { ReactNodeViewProps } from "./ReactNodeView";
-import { cls, defaultBorderMixin } from "@rebasepro/ui";
-
-export const ImageComponent: React.FC<ReactNodeViewProps> = ({ node, view, getPos }) => {
-    // If the node is selected
-    const selected = view.state.selection.from === getPos();
-
-    return (
-        <img
-            src={node.attrs.src}
-            alt={node.attrs.alt || ""}
-            title={node.attrs.title || ""}
-            className={cls(
-                "rounded-lg max-w-full !m-0",
-                selected ? "" : ""
-            )}
-        />
-    );
-};

package/src/editor/nodeViews/ReactNodeView.tsx

@@ -1,89 +0,0 @@
-import React, { ReactNode } from "react";
-import { createRoot, Root } from "react-dom/client";
-import { Node as ProseMirrorNode } from "prosemirror-model";
-import { EditorView, NodeView } from "prosemirror-view";
-
-export interface ReactNodeViewProps {
-    node: ProseMirrorNode;
-    view: EditorView;
-    getPos: () => number | undefined;
-}
-
-export type ReactNodeViewComponent = React.FC<ReactNodeViewProps>;
-
-/**
- * A utility class that implements the ProseMirror NodeView interface but delegates rendering
- * to a React component.
- * Note: This uses createRoot, so it does not automatically inherit React Contexts.
- * If contexts are needed, wrap them manually or use a portal-based approach instead.
- */
-export class ReactNodeView implements NodeView {
-    public node: ProseMirrorNode;
-    public view: EditorView;
-    public getPos: () => number | undefined;
-    public dom: HTMLElement;
-    public contentDOM?: HTMLElement;
-    private root: Root;
-    private Component: ReactNodeViewComponent;
-
-    constructor(
-        node: ProseMirrorNode,
-        view: EditorView,
-        getPos: () => number | undefined,
-        Component: ReactNodeViewComponent,
-        as = "div",
-        className?: string,
-        contentDOMElement?: HTMLElement
-    ) {
-        this.node = node;
-        this.view = view;
-        this.getPos = getPos;
-        this.Component = Component;
-
-        this.dom = document.createElement(as);
-        if (className) this.dom.className = className;
-        if (contentDOMElement) {
-            this.contentDOM = contentDOMElement;
-        }
-
-        const container = document.createElement("div");
-        // We render React next to contentDOM
-        this.dom.appendChild(container);
-        if (this.contentDOM) {
-            this.dom.appendChild(this.contentDOM);
-        }
-
-        this.root = createRoot(container);
-        this.render();
-    }
-
-    private render() {
-        this.root.render(
-            <this.Component
-                node={this.node}
-                view={this.view}
-                getPos={this.getPos}
-            />
-        );
-    }
-
-    update(node: ProseMirrorNode): boolean {
-        if (node.type !== this.node.type) {
-            return false;
-        }
-        this.node = node;
-        this.render();
-        return true;
-    }
-
-    destroy() {
-        this.root.unmount();
-    }
-
-    ignoreMutation(mutation: MutationRecord | { type: "selection"; target: Node }) {
-        if (!this.contentDOM) {
-            return true;
-        }
-        return !this.contentDOM.contains(mutation.target);
-    }
-}

package/src/editor/nodeViews/TaskItemComponent.tsx

@@ -1,30 +0,0 @@
-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 handleCheckedChange = (isChecked: boolean) => {
-        const pos = getPos();
-        if (typeof pos !== "number") return;
-
-        view.dispatch(
-            view.state.tr.setNodeMarkup(pos, undefined, {
-                ...node.attrs,
-                checked: isChecked
-            })
-        );
-    };
-
-    return (
-        <Label contentEditable={false} className="flex items-start select-none px-1 cursor-pointer">
-            <Checkbox
-                checked={checked}
-                onCheckedChange={handleCheckedChange}
-                padding={false}
-                size="small"
-            />
-        </Label>
-    );
-};

package/src/editor/nodeViews/index.ts

@@ -1,35 +0,0 @@
-import { Node as ProseMirrorNode } from "prosemirror-model";
-import { EditorView, NodeView } from "prosemirror-view";
-import { ReactNodeView, ReactNodeViewComponent } from "./ReactNodeView";
-import { TaskItemComponent } from "./TaskItemComponent";
-import { ImageComponent } from "./ImageComponent";
-
-function createReactNodeView(
-    Component: ReactNodeViewComponent,
-    as = "div",
-    className?: string,
-    createContentDOM?: () => HTMLElement
-) {
-    return (node: ProseMirrorNode, view: EditorView, getPos: () => number | undefined): NodeView => {
-        const contentDOM = createContentDOM ? createContentDOM() : undefined;
-        return new ReactNodeView(node, view, getPos, Component, as, className, contentDOM);
-    };
-}
-
-export const nodeViews = {
-    task_item: createReactNodeView(
-        TaskItemComponent,
-        "li",
-        "flex items-start",
-        () => {
-            const dom = document.createElement("div");
-            dom.className = "flex-grow min-w-0";
-            return dom;
-        }
-    ),
-    image: createReactNodeView(
-        ImageComponent,
-        "span",
-        "inline-block w-full"
-    )
-};

package/src/editor/plugins/index.ts

@@ -1,58 +0,0 @@
-import { keymap } from "prosemirror-keymap";
-import { history, undo, redo } from "prosemirror-history";
-import { slashCommandPlugin } from "./slashCommandPlugin";
-import { dragHandlePlugin, globalDragDropPlugin } from "../extensions/drag-and-drop";
-import { baseKeymap, setBlockType, toggleMark, chainCommands, exitCode, joinUp, joinDown, lift, selectParentNode } from "prosemirror-commands";
-import { highlightDecorationPlugin } from "../extensions/HighlightDecorationExtension";
-import { textLoadingDecorationPlugin } from "../extensions/TextLoadingDecorationExtension";
-import { splitListItem, liftListItem, sinkListItem } from "prosemirror-schema-list";
-import { schema } from "../schema";
-import { Plugin } from "prosemirror-state";
-import { gapCursor } from "prosemirror-gapcursor";
-import { dropCursor } from "prosemirror-dropcursor";
-import { markdownInputRules } from "./inputrules";
-import { placeholderPlugin } from "./placeholderPlugin";
-import { goToNextCell } from "prosemirror-tables";
-
-const customKeymap = {
-    "Tab": goToNextCell(1),
-    "Shift-Tab": goToNextCell(-1),
-    "Mod-z": undo,
-    "Mod-y": redo,
-    "Shift-Mod-z": redo,
-    "Mod-b": toggleMark(schema.marks.bold),
-    "Mod-i": toggleMark(schema.marks.italic),
-    "Mod-u": toggleMark(schema.marks.underline),
-    "Mod-Shift-s": toggleMark(schema.marks.strike),
-    "Mod-e": toggleMark(schema.marks.code),
-    "Mod-Shift-h": toggleMark(schema.marks.highlight),
-
-    "Enter": splitListItem(schema.nodes.list_item),
-    "Shift-Enter": splitListItem(schema.nodes.task_item),
-
-    "Mod-[": liftListItem(schema.nodes.list_item),
-    "Mod-]": sinkListItem(schema.nodes.list_item),
-
-    "Shift-Mod-8": setBlockType(schema.nodes.bullet_list),
-    "Shift-Mod-9": setBlockType(schema.nodes.ordered_list),
-
-    "Mod-Alt-1": setBlockType(schema.nodes.heading, { level: 1 }),
-    "Mod-Alt-2": setBlockType(schema.nodes.heading, { level: 2 }),
-    "Mod-Alt-3": setBlockType(schema.nodes.heading, { level: 3 }),
-
-    "Mod-Alt-0": setBlockType(schema.nodes.paragraph)
-};
-
-export const getCorePlugins = (): Plugin[] => [
-    history(),
-    keymap(customKeymap),
-    keymap(baseKeymap),
-    globalDragDropPlugin(),
-    gapCursor(),
-    slashCommandPlugin(),
-    dragHandlePlugin(),
-    highlightDecorationPlugin(),
-    textLoadingDecorationPlugin(),
-    markdownInputRules,
-    placeholderPlugin("Press '/' for commands")
-];

package/src/editor/plugins/inputrules.ts

@@ -1,82 +0,0 @@
-import {
-    inputRules,
-    wrappingInputRule,
-    textblockTypeInputRule,
-    smartQuotes,
-    emDash,
-    ellipsis,
-    InputRule
-} from "prosemirror-inputrules";
-import { schema } from "../schema";
-import { MarkType } from "prosemirror-model";
-
-const blockQuoteRule = wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote);
-
-const orderedListRule = wrappingInputRule(
-    /^(\d+)\.\s$/,
-    schema.nodes.ordered_list,
-    (match) => ({ order: +match[1] }),
-    (match, node) => node.childCount + node.attrs.order === +match[1]
-);
-
-const bulletListRule = wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);
-
-const taskListRule = wrappingInputRule(/^\s*(\[ \])\s$/, schema.nodes.task_list);
-
-const codeBlockRule = textblockTypeInputRule(/^```$/, schema.nodes.code_block);
-
-const headingRule = textblockTypeInputRule(
-    new RegExp("^(#{1,6})\\s$"),
-    schema.nodes.heading,
-    (match) => ({ level: match[1].length })
-);
-
-const horizontalRuleInputRule = new InputRule(
-    /^(?:---|—-|___\s|\*\*\*\s)$/,
-    (state, match, start, end) => {
-        const tr = state.tr;
-        tr.replaceWith(start - 1, end, schema.nodes.horizontal_rule.create());
-        return tr;
-    }
-);
-
-function markInputRule(regexp: RegExp, markType: MarkType, getAttrs?: (match: RegExpMatchArray) => Record<string, any>) {
-    return new InputRule(regexp, (state, match, start, end) => {
-        const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
-        const tr = state.tr;
-        if (match[1]) {
-            const textStart = start + match[0].indexOf(match[1]);
-            const textEnd = textStart + match[1].length;
-            if (textEnd < end) tr.delete(textEnd, end);
-            if (textStart > start) tr.delete(start, textStart);
-            end = start + match[1].length;
-        }
-        tr.addMark(start, end, markType.create(attrs));
-        tr.removeStoredMark(markType);
-        return tr;
-    });
-}
-
-const strongRule = markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, schema.marks.bold);
-const emRule = markInputRule(/(?:^|[^*_])(?:\*|_)([^*_]+)(?:\*|_)$/, schema.marks.italic);
-const codeRule = markInputRule(/(?:`)([^`]+)(?:`)$/, schema.marks.code);
-const strikeRule = markInputRule(/(?:~~)([^~]+)(?:~~)$/, schema.marks.strike);
-
-export const markdownInputRules = inputRules({
-    rules: [
-        ...smartQuotes,
-        ellipsis,
-        emDash,
-        blockQuoteRule,
-        orderedListRule,
-        bulletListRule,
-        codeBlockRule,
-        headingRule,
-        taskListRule,
-        horizontalRuleInputRule,
-        strongRule,
-        emRule,
-        codeRule,
-        strikeRule
-    ]
-});

package/src/editor/plugins/placeholderPlugin.ts

@@ -1,55 +0,0 @@
-import { Plugin, PluginKey } from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import { Node } from "prosemirror-model";
-
-export const placeholderPluginKey = new PluginKey("placeholderPlugin");
-
-function isNodeEmpty(node: Node) {
-    const defaultContent = node.type.createAndFill()
-    if (!defaultContent) return true
-    return node.content.eq(defaultContent.content)
-}
-
-export function placeholderPlugin(text: string) {
-    return new Plugin({
-        key: placeholderPluginKey,
-        props: {
-            decorations: (state) => {
-                const doc = state.doc;
-                const decorations: Decoration[] = [];
-                const isEmptyDoc = doc.childCount === 1 && doc.firstChild?.isTextblock && doc.firstChild.content.size === 0;
-                const { anchor } = state.selection;
-
-                doc.descendants((node, pos) => {
-                    const isEmpty = !node.isLeaf && isNodeEmpty(node);
-
-                    if (isEmpty) {
-                        // Only show placeholder on the node that contains the cursor.
-                        // For a single-node empty doc, always show it (editor-empty state).
-                        const nodeEnd = pos + node.nodeSize;
-                        const hasCursor = anchor >= pos && anchor <= nodeEnd;
-
-                        if (!hasCursor && !isEmptyDoc) {
-                            return false;
-                        }
-
-                        const classes = ["is-empty"];
-                        if (isEmptyDoc) {
-                            classes.push("is-editor-empty");
-                        }
-
-                        decorations.push(
-                            Decoration.node(pos, pos + node.nodeSize, {
-                                class: classes.join(" "),
-                                "data-placeholder": text
-                            })
-                        );
-                    }
-                    return false; // Stop descending
-                });
-
-                return DecorationSet.create(doc, decorations);
-            }
-        }
-    });
-}

package/src/editor/plugins/slashCommandPlugin.ts

@@ -1,65 +0,0 @@
-import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
-
-export const SlashCommandPluginKey = new PluginKey("slash-command");
-
-export interface SlashCommandState {
-    active: boolean;
-    range?: { from: number; to: number };
-    query?: string;
-    dismissed?: boolean;
-}
-
-export function slashCommandPlugin() {
-    return new Plugin({
-        key: SlashCommandPluginKey,
-        state: {
-            init(): SlashCommandState {
-                return { active: false };
-            },
-            apply(tr, value, oldState, newState): SlashCommandState {
-                const meta = tr.getMeta(SlashCommandPluginKey);
-                if (meta !== undefined) {
-                    return meta;
-                }
-
-                const { selection } = newState;
-                if (!(selection instanceof TextSelection) || !selection.empty) {
-                    return { active: false };
-                }
-
-                // Make sure we are in a paragraph or heading block, not a code_block for example
-                const $anchor = selection.$anchor;
-                if ($anchor.parent.type.name === "code_block") {
-                    return { active: false };
-                }
-
-                const textBefore = $anchor.parent.textBetween(
-                    Math.max(0, $anchor.parentOffset - 20),
-                    $anchor.parentOffset,
-                    undefined,
-                    "\ufffc"
-                );
-                const match = textBefore.match(/(?:\s|^)(\/)([a-zA-Z0-9]*)$/);
-
-                if (!match) {
-                    return { active: false };
-                }
-
-                // If the user previously dismissed this slash command, keep it dismissed
-                if (value.dismissed) {
-                    return { active: false,
-dismissed: true };
-                }
-
-                // match[1] is the slash, match[2] is the query
-                const query = match[2];
-                const from = $anchor.pos - query.length - 1;
-                const to = $anchor.pos;
-                return { active: true,
-range: { from,
-to },
-query };
-            }
-        }
-    });
-}