@heyramzi/ui 2.8.0 → 2.10.0

package/dist/editor/doc-blocks.js

@@ -0,0 +1,181 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { anchorIds } from "./anchors.js";
+const LINK_ICON = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0A54.86 54.86 0 0 1 240 88.23ZM109 185.66l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 54.63 0 8 8 0 0 0 11.31-11.31 54.65 54.65 0 0 0-77.3 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34Z"/></svg>`;
+const anchorsKey = new PluginKey("headingAnchors");
+export const HeadingAnchors = Extension.create({
+    name: "headingAnchors",
+    addOptions () {
+        return {
+            label: "Copy link",
+            oncopy: undefined
+        };
+    },
+    addProseMirrorPlugins () {
+        const options = this.options;
+        return [
+            new Plugin({
+                key: anchorsKey,
+                props: {
+                    decorations (state) {
+                        const found = [];
+                        state.doc.descendants((node, pos)=>{
+                            if (node.type.name !== "heading") return;
+                            found.push({
+                                pos,
+                                size: node.nodeSize,
+                                label: node.textContent.trim()
+                            });
+                        });
+                        if (found.length === 0) return DecorationSet.empty;
+                        const ids = anchorIds(found.map((heading)=>heading.label));
+                        const decorations = found.flatMap((heading, i)=>{
+                            const id = ids[i];
+                            return [
+                                Decoration.node(heading.pos, heading.pos + heading.size, {
+                                    id,
+                                    class: "has-anchor"
+                                }),
+                                Decoration.widget(heading.pos + heading.size - 1, ()=>{
+                                    const button = document.createElement("button");
+                                    button.type = "button";
+                                    button.className = "heading-anchor";
+                                    button.contentEditable = "false";
+                                    button.innerHTML = `${LINK_ICON}<span>${options.label}</span>`;
+                                    button.addEventListener("mousedown", (event)=>event.preventDefault());
+                                    button.addEventListener("click", ()=>{
+                                        const { origin, pathname, search } = window.location;
+                                        const url = `${origin}${pathname}${search}#${id}`;
+                                        void navigator.clipboard?.writeText(url).catch(()=>{});
+                                        button.dataset.copied = "true";
+                                        setTimeout(()=>delete button.dataset.copied, 1400);
+                                        options.oncopy?.(url, id);
+                                    });
+                                    return button;
+                                }, {
+                                    side: 1,
+                                    key: `anchor-${id}`,
+                                    ignoreSelection: true
+                                })
+                            ];
+                        });
+                        return DecorationSet.create(state.doc, decorations);
+                    }
+                }
+            })
+        ];
+    }
+});
+export const CODE_LANGUAGES = [
+    {
+        value: "",
+        label: "Plain text"
+    },
+    {
+        value: "typescript",
+        label: "TypeScript"
+    },
+    {
+        value: "javascript",
+        label: "JavaScript"
+    },
+    {
+        value: "svelte",
+        label: "Svelte"
+    },
+    {
+        value: "html",
+        label: "HTML"
+    },
+    {
+        value: "css",
+        label: "CSS"
+    },
+    {
+        value: "json",
+        label: "JSON"
+    },
+    {
+        value: "bash",
+        label: "Bash"
+    },
+    {
+        value: "sql",
+        label: "SQL"
+    },
+    {
+        value: "python",
+        label: "Python"
+    },
+    {
+        value: "markdown",
+        label: "Markdown"
+    }
+];
+export function lineNumbers(code) {
+    const count = code.split("\n").length;
+    return Array.from({
+        length: count
+    }, (_, i)=>i + 1).join("\n");
+}
+const codeKey = new PluginKey("codeBlockChrome");
+export const CodeBlockChrome = Extension.create({
+    name: "codeBlockChrome",
+    addProseMirrorPlugins () {
+        return [
+            new Plugin({
+                key: codeKey,
+                props: {
+                    decorations (state) {
+                        const decorations = [];
+                        state.doc.descendants((node, pos)=>{
+                            if (node.type.name !== "codeBlock") return;
+                            const language = typeof node.attrs.language === "string" ? node.attrs.language : "";
+                            decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                                "data-lines": lineNumbers(node.textContent)
+                            }), Decoration.widget(pos + 1, (view, getPos)=>{
+                                const select = document.createElement("select");
+                                select.className = "code-language";
+                                select.contentEditable = "false";
+                                select.setAttribute("aria-label", "Language");
+                                const known = CODE_LANGUAGES.some((item)=>item.value === language);
+                                const options = known ? CODE_LANGUAGES : [
+                                    ...CODE_LANGUAGES,
+                                    {
+                                        value: language,
+                                        label: language
+                                    }
+                                ];
+                                for (const item of options){
+                                    const option = document.createElement("option");
+                                    option.value = item.value;
+                                    option.textContent = item.label;
+                                    option.selected = item.value === language;
+                                    select.append(option);
+                                }
+                                select.addEventListener("mousedown", (event)=>event.stopPropagation());
+                                select.addEventListener("change", ()=>{
+                                    const at = (getPos() ?? 1) - 1;
+                                    const target = view.state.doc.nodeAt(at);
+                                    if (!target) return;
+                                    view.dispatch(view.state.tr.setNodeMarkup(at, undefined, {
+                                        ...target.attrs,
+                                        language: select.value || null
+                                    }));
+                                    view.focus();
+                                });
+                                return select;
+                            }, {
+                                side: -1,
+                                key: `lang-${pos}-${language}`,
+                                stopEvent: ()=>true
+                            }));
+                        });
+                        return decorations.length ? DecorationSet.create(state.doc, decorations) : DecorationSet.empty;
+                    }
+                }
+            })
+        ];
+    }
+});

package/dist/editor/extensions.js

@@ -0,0 +1,200 @@
+import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Image } from "@tiptap/extension-image";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { DragHandle } from "@tiptap/extension-drag-handle";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import { BlockIdExtension } from "./block-id.js";
+import { CodeBlockChrome, HeadingAnchors } from "./doc-blocks.js";
+const CmsBlock = TiptapNode.create({
+    name: "cmsBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+    selectable: true,
+    addAttributes () {
+        return {
+            blockType: {
+                default: "unknown"
+            },
+            data: {
+                default: {}
+            }
+        };
+    },
+    parseHTML () {
+        return [
+            {
+                tag: 'div[data-type="cms-block"]'
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes }) {
+        const blockType = typeof HTMLAttributes.blockType === "string" ? HTMLAttributes.blockType : "unknown";
+        const { data: _data, blockType: _blockType, ...attrs } = HTMLAttributes;
+        return [
+            "div",
+            mergeAttributes(attrs, {
+                class: "cms-block-node",
+                "data-type": "cms-block",
+                "data-block-type": blockType
+            }),
+            [
+                "strong",
+                {},
+                "CMS block"
+            ],
+            [
+                "span",
+                {},
+                ` ${blockType}`
+            ]
+        ];
+    }
+});
+const Youtube = TiptapNode.create({
+    name: "youtube",
+    group: "block",
+    atom: true,
+    draggable: true,
+    selectable: true,
+    addAttributes () {
+        return {
+            videoId: {
+                default: null
+            },
+            title: {
+                default: ""
+            },
+            start: {
+                default: 0
+            }
+        };
+    },
+    parseHTML () {
+        return [
+            {
+                tag: "div[data-video-id]"
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes }) {
+        const videoId = typeof HTMLAttributes.videoId === "string" ? HTMLAttributes.videoId : "";
+        const title = typeof HTMLAttributes.title === "string" ? HTMLAttributes.title : "";
+        const start = typeof HTMLAttributes.start === "number" ? HTMLAttributes.start : 0;
+        return [
+            "div",
+            mergeAttributes({
+                class: "tiptap-youtube",
+                "data-video-id": videoId,
+                "data-start": String(start)
+            }),
+            [
+                "button",
+                {
+                    type: "button",
+                    class: "tiptap-youtube-trigger",
+                    "aria-label": `Play video: ${title}`
+                },
+                [
+                    "img",
+                    {
+                        class: "tiptap-youtube-poster",
+                        src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
+                        alt: "",
+                        loading: "lazy",
+                        width: "480",
+                        height: "360"
+                    }
+                ],
+                [
+                    "span",
+                    {
+                        class: "tiptap-youtube-play",
+                        "aria-hidden": "true"
+                    }
+                ],
+                [
+                    "span",
+                    {
+                        class: "tiptap-youtube-title"
+                    },
+                    title
+                ]
+            ]
+        ];
+    }
+});
+function dedupeExtensions(extensions) {
+    const seen = new Set();
+    return extensions.filter((extension)=>{
+        if (!extension || typeof extension !== "object") return false;
+        const name = "name" in extension && typeof extension.name === "string" ? extension.name : "";
+        if (!name) return true;
+        if (seen.has(name)) return false;
+        seen.add(name);
+        return true;
+    });
+}
+const DRAG_DOTS = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="2.5" cy="2.5" r="1" fill="currentColor"/><circle cx="2.5" cy="6" r="1" fill="currentColor"/><circle cx="2.5" cy="9.5" r="1" fill="currentColor"/><circle cx="6" cy="2.5" r="1" fill="currentColor"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="9.5" r="1" fill="currentColor"/></svg>`;
+function dragHandle() {
+    return DragHandle.configure({
+        render () {
+            const el = document.createElement("div");
+            el.classList.add("drag-handle");
+            el.innerHTML = DRAG_DOTS;
+            return el;
+        }
+    });
+}
+export function buildExtensions({ preset, placeholder, blockIds, anchors = false }) {
+    const full = preset === "full";
+    return dedupeExtensions([
+        StarterKit.configure({
+            heading: {
+                levels: full ? [
+                    1,
+                    2,
+                    3,
+                    4
+                ] : [
+                    1,
+                    2,
+                    3
+                ]
+            },
+            link: {
+                openOnClick: false
+            }
+        }),
+        ...full ? [
+            CmsBlock,
+            Youtube,
+            Image.configure({
+                inline: false
+            }),
+            TaskList,
+            TaskItem.configure({
+                nested: true
+            }),
+            Table.configure({
+                resizable: false
+            }),
+            TableRow,
+            TableHeader,
+            TableCell,
+            CodeBlockChrome
+        ] : [],
+        ...anchors ? [
+            HeadingAnchors.configure(anchors)
+        ] : [],
+        Placeholder.configure({
+            placeholder
+        }),
+        dragHandle(),
+        ...blockIds ? [
+            BlockIdExtension
+        ] : []
+    ]);
+}

package/dist/editor/index.js

@@ -0,0 +1,4 @@
+export { default as RichEditor } from "../../src/editor/editor.svelte";
+export { default as RichRenderer } from "../../src/editor/renderer.svelte";
+export { renderTiptapContent, extractHeadings, extractYoutubeVideos } from "./serializer.js";
+export { BlockIdExtension, generateBlockId } from "./block-id.js";

package/dist/editor/markdown-test-helpers.js

@@ -0,0 +1,6 @@
+export function blocks(doc) {
+    return doc.content;
+}
+export function allHaveIds(doc) {
+    return doc.content.every((n)=>typeof n.attrs?.id === "string" && n.attrs.id.length > 0);
+}