@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.75005e4

package/src/editor/schema.ts

@@ -0,0 +1,228 @@
+import { Schema, NodeSpec, MarkSpec } from "prosemirror-model";
+
+const marks: { [key: string]: MarkSpec } = {
+    link: {
+        attrs: {
+            href: {},
+            title: { default: null },
+            target: { default: "_blank" },
+        },
+        inclusive: false,
+        parseDOM: [
+            {
+                tag: "a[href]",
+                getAttrs(dom: HTMLElement | string) {
+                    if (typeof dom === "string") return false;
+                    return {
+                        href: dom.getAttribute("href"),
+                        title: dom.getAttribute("title"),
+                        target: dom.getAttribute("target") || "_blank",
+                    };
+                },
+            },
+        ],
+        toDOM(node) {
+            let { 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 },
+        ],
+        toDOM() { return ["strong", 0]; },
+    },
+    italic: {
+        parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
+        toDOM() { return ["em", 0]; },
+    },
+    strike: {
+        parseDOM: [{ tag: "s" }, { tag: "del" }, { tag: "strike" }, { style: "text-decoration=line-through" }],
+        toDOM() { return ["s", 0]; },
+    },
+    underline: {
+        parseDOM: [{ tag: "u" }, { style: "text-decoration=underline" }],
+        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]; },
+    },
+    textStyle: {
+        attrs: { color: { default: null } },
+        parseDOM: [
+            {
+                style: "color",
+                getAttrs: (value: string | HTMLElement) => {
+                    if (typeof value === "string") return { color: value };
+                    return false;
+                },
+            },
+        ],
+        toDOM(mark) {
+            let style = "";
+            if (mark.attrs.color) style += `color: ${mark.attrs.color};`;
+            return ["span", { style }, 0];
+        },
+    },
+    highlight: {
+        attrs: { color: { default: null } },
+        parseDOM: [
+            {
+                tag: "mark",
+                getAttrs: (dom: HTMLElement | string) => {
+                    if (typeof dom === "string") return false;
+                    return { color: dom.style.backgroundColor || dom.getAttribute("data-color") };
+                }
+            },
+        ],
+        toDOM(mark) {
+            return ["mark", mark.attrs.color ? { style: `background-color: ${mark.attrs.color}; color: inherit;`, "data-color": mark.attrs.color } : {}, 0];
+        },
+    },
+};
+
+const nodes: { [key: string]: NodeSpec } = {
+    doc: {
+        content: "block+",
+    },
+    paragraph: {
+        content: "inline*",
+        group: "block",
+        parseDOM: [{ tag: "p" }],
+        toDOM() { return ["p", 0]; },
+    },
+    text: {
+        group: "inline",
+    },
+    blockquote: {
+        content: "block+",
+        group: "block",
+        defining: true,
+        parseDOM: [{ tag: "blockquote" }],
+        toDOM() { return ["blockquote", { class: "border-l-4 border-primary" }, 0]; },
+    },
+    heading: {
+        attrs: { level: { default: 1 } },
+        content: "inline*",
+        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 } },
+        ],
+        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" }]; },
+    },
+    code_block: {
+        content: "text*",
+        marks: "",
+        group: "block",
+        code: true,
+        defining: true,
+        attrs: { language: { default: null } },
+        parseDOM: [
+            { 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" }, ["code", 0]]; },
+    },
+    image: {
+        inline: false,
+        group: "block",
+        attrs: {
+            src: {},
+            alt: { default: null },
+            title: { default: null },
+        },
+        draggable: true,
+        parseDOM: [
+            {
+                tag: "img[src]",
+                getAttrs(dom: HTMLElement | string) {
+                    if (typeof dom === "string") return false;
+                    return {
+                        src: dom.getAttribute("src"),
+                        title: dom.getAttribute("title"),
+                        alt: dom.getAttribute("alt"),
+                    };
+                },
+            },
+        ],
+        toDOM(node) {
+            let { 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]; },
+    },
+    ordered_list: {
+        content: "list_item+",
+        group: "block",
+        attrs: { order: { default: 1 } },
+        parseDOM: [
+            {
+                tag: "ol",
+                getAttrs(dom: HTMLElement | string) {
+                    if (typeof dom === "string") return false;
+                    return { order: dom.hasAttribute("start") ? +dom.getAttribute("start")! : 1 };
+                },
+            },
+        ],
+        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];
+        },
+    },
+    list_item: {
+        content: "paragraph block*",
+        parseDOM: [{ tag: "li" }],
+        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]; },
+    },
+    task_item: {
+        content: "paragraph block*",
+        defining: true,
+        attrs: { checked: { default: false } },
+        parseDOM: [
+            {
+                tag: 'li[data-type="taskItem"]',
+                getAttrs(dom: HTMLElement | string) {
+                    if (typeof dom === "string") return false;
+                    return { checked: dom.getAttribute("data-checked") === "true" };
+                },
+            },
+        ],
+        toDOM(node) {
+            return ["li", { "data-type": "taskItem", "data-checked": node.attrs.checked ? "true" : "false", class: "flex items-start my-4" }, 0];
+        },
+    },
+    hard_break: {
+        inline: true,
+        group: "inline",
+        selectable: false,
+        parseDOM: [{ tag: "br" }],
+        toDOM() { return ["br"]; },
+    },
+};
+
+export const schema = new Schema({ nodes, marks });

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

@@ -0,0 +1,111 @@
+// "use client";
+//
+// import {
+//   Command,
+//   CommandGroup,
+//   CommandInput,
+//   CommandItem,
+// } from "@/components/tailwind/ui/command";
+//
+// import { useCompletion } from "ai/react";
+// import { toast } from "sonner";
+// import { useEditor } from "novel";
+// import { getPrevText } from "./extensions";
+// import { useState } from "react";
+//
+// const options = [
+//   {
+//     value: "improve",
+//     label: "Improve writing",
+//   },
+//   {
+//     value: "continue",
+//     label: "Continue writing",
+//   },
+//   {
+//     value: "fix",
+//     label: "Fix grammar",
+//   },
+//   {
+//     value: "sorter",
+//     label: "Make shorter",
+//   },
+//   {
+//     value: "longer",
+//     label: "Make longer",
+//   },
+// ];
+//
+// //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;
+//   onOpenChange: (open: boolean) => void;
+// }
+//
+// export function AISelector({ open, onOpenChange }: AISelectorProps) {
+//   const { editor } = useEditor();
+//   const [extraPrompt, setExtraPrompt] = useState("");
+//
+//   const { completion, complete } = useCompletion({
+//     // id: "novel",
+//     api: "/api/generate",
+//     onResponse: (response) => {
+//       if (response.status === 429) {
+//         toast.error("You have reached your request limit for the day.");
+//         return;
+//       }
+//     },
+//
+//     onError: (e) => {
+//       toast.error(e.message);
+//     },
+//   });
+//
+//   return (
+//     <div
+//       className="w-full"
+//       onBlur={() => {
+//         editor.chain().unsetHighlight().run();
+//       }}
+//     >
+//       <Command>
+//         {completion && (
+//           <p className="w-full whitespace-pre-wrap p-2 px-4 text-sm">
+//             {completion}
+//           </p>
+//         )}
+//
+//         <CommandInput
+//           onFocus={() => {
+//             editor.chain().setHighlight({ color: "#c1ecf970" }).run();
+//           }}
+//           value={extraPrompt}
+//           onValueChange={setExtraPrompt}
+//           autoFocus
+//           placeholder="Ask AI to edit or generate..."
+//           className="w-[400px]"
+//         />
+//         <CommandGroup>
+//           {options.map((option) => (
+//             <CommandItem
+//               className="px-4"
+//               key={option.value}
+//               value={option.value}
+//               onSelect={(option) => {
+//                 if (option === "continue") {
+//                   getPrevText(editor, {
+//                     chars: 5000,
+//                   });
+//                   complete(editor.getText());
+//                 }
+//               }}
+//             >
+//               {option.label}
+//             </CommandItem>
+//           ))}
+//         </CommandGroup>
+//       </Command>
+//     </div>
+//   );
+// }

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

@@ -0,0 +1,200 @@
+import type { Dispatch, SetStateAction } from "react";
+import { EditorBubbleItem } from "../components";
+import { Button, CheckIcon, KeyboardArrowDownIcon, Popover } from "@firecms/ui";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { isMarkActive, getMarkAttributes, setMark, unsetMark } from "../utils/prosemirror-utils";
+import { schema } from "../schema";
+
+export interface BubbleColorMenuItem {
+    name: string;
+    color: string;
+}
+
+const TEXT_COLORS: BubbleColorMenuItem[] = [
+    {
+        name: "Default",
+        color: "black",
+    },
+    {
+        name: "Purple",
+        color: "#9333EA",
+    },
+    {
+        name: "Red",
+        color: "#E00000",
+    },
+    {
+        name: "Yellow",
+        color: "#EAB308",
+    },
+    {
+        name: "Blue",
+        color: "#2563EB",
+    },
+    {
+        name: "Green",
+        color: "#008A00",
+    },
+    {
+        name: "Orange",
+        color: "#FFA500",
+    },
+    {
+        name: "Pink",
+        color: "#BA4081",
+    },
+    {
+        name: "Gray",
+        color: "#A8A29E",
+    },
+];
+
+const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
+    {
+        name: "Default",
+        color: "inherit",
+    },
+    {
+        name: "Purple",
+        color: "#9333EA",
+    },
+    {
+        name: "Red",
+        color: "#E00000",
+    },
+    {
+        name: "Yellow",
+        color: "#EAB308",
+    },
+    {
+        name: "Blue",
+        color: "#2563EB",
+    },
+    {
+        name: "Green",
+        color: "#008A00",
+    },
+    {
+        name: "Orange",
+        color: "#FFA500",
+    },
+    {
+        name: "Pink",
+        color: "#BA4081",
+    },
+    {
+        name: "Gray",
+        color: "#A8A29E",
+    },
+];
+
+interface ColorSelectorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export const ColorSelector = ({
+    open,
+    onOpenChange
+}: ColorSelectorProps) => {
+
+    const { state, view } = useProseMirrorContext();
+
+    if (!state || !view) return null;
+
+    const currentTextColor = getMarkAttributes(state, schema.marks.textStyle).color;
+    const currentHighlightColor = getMarkAttributes(state, schema.marks.highlight).color;
+
+    const activeColorItem = TEXT_COLORS.find(({ color }) => color === currentTextColor);
+    const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) => color === currentHighlightColor);
+
+    return (
+        <Popover
+            sideOffset={5}
+            align={"start"}
+            className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow"
+            trigger={
+                <Button className="gap-2 rounded-none" variant="text" color={"text"}>
+                    <span
+                        className="rounded px-1"
+                        style={{
+                            color: activeColorItem?.color,
+                            backgroundColor: activeHighlightItem?.color,
+                        }}
+                    >
+                        A
+                    </span>
+                    <KeyboardArrowDownIcon size={"small"} />
+                </Button>}
+            modal={true} open={open} onOpenChange={onOpenChange}>
+
+
+            <div className="flex flex-col">
+                <div className="my-1 px-2 text-sm font-semibold text-surface-400 dark:text-surface-400">
+                    Color
+                </div>
+                {TEXT_COLORS.map(({
+                    name,
+                    color
+                }, index) => (
+                    <EditorBubbleItem
+                        key={index}
+                        onSelect={() => {
+                            unsetMark(schema.marks.textStyle)(view.state, view.dispatch);
+                            if (name !== "Default") {
+                                setMark(schema.marks.textStyle, { color })(view.state, view.dispatch);
+                            }
+                            view.focus();
+                        }}
+                        className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-surface-100 hover:dark:bg-surface-700"
+                    >
+                        <div className="flex items-center gap-2">
+                            <div
+                                className="rounded border px-2 py-px font-medium"
+                                style={{ color }}
+                            >
+                                A
+                            </div>
+                            <span>{name}</span>
+                        </div>
+                    </EditorBubbleItem>
+                ))}
+            </div>
+            <div>
+                <div className="my-1 px-2 text-sm font-semibold text-surface-400 dark:text-surface-400">
+                    Background
+                </div>
+                {HIGHLIGHT_COLORS.map(({
+                    name,
+                    color
+                }, index) => (
+                    <EditorBubbleItem
+                        key={index}
+                        onSelect={() => {
+                            unsetMark(schema.marks.highlight)(view.state, view.dispatch);
+                            if (name !== "Default") {
+                                setMark(schema.marks.highlight, { color })(view.state, view.dispatch);
+                            }
+                            view.focus();
+                        }}
+                        className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-surface-100 hover:dark:bg-surface-700"
+                    >
+                        <div className="flex items-center gap-2">
+                            <div
+                                className="rounded border px-2 py-px font-medium"
+                                style={{ backgroundColor: color }}
+                            >
+                                A
+                            </div>
+                            <span>{name}</span>
+                        </div>
+                        {currentHighlightColor === color && (
+                            <CheckIcon className="h-4 w-4" />
+                        )}
+                    </EditorBubbleItem>
+                ))}
+            </div>
+
+        </Popover>
+    );
+};

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

@@ -0,0 +1,118 @@
+import { useEffect, useRef, } from "react";
+import { Button, CheckIcon, cls, DeleteIcon, focusedDisabled, Popover } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
+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: any) => {
+        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"
+            >
+                <input
+                    ref={inputRef}
+                    autoFocus={open}
+                    placeholder={t("editor_paste_or_type_link")}
+                    defaultValue={href}
+                    className={cls("text-surface-900 dark:text-white flex-grow 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}
+                    >
+                        <DeleteIcon size="small" />
+                    </Button>
+                ) : (
+                    <Button size={"small"}
+                        type="submit"
+                        variant={"text"}>
+                        <CheckIcon size="small" />
+                    </Button>
+                )}
+            </form>
+        </Popover>
+    );
+};