@paroicms/tiptap-editor-plugin 1.0.0

package/backend/dist/clean-tiptap-json.js

@@ -0,0 +1,53 @@
+/**
+ * Remove empty attrs objects and marks with null values from Tiptap JSON to reduce storage size.
+ * When no attributes are set, the attrs object is omitted entirely.
+ * Marks with null or undefined values in their attributes are removed.
+ */
+export function cleanTiptapJson(json) {
+    function cleanNode(node) {
+        const cleaned = {
+            type: node.type,
+        };
+        // Only include attrs if it has properties with non-null values
+        if (node.attrs && Object.keys(node.attrs).length > 0) {
+            const cleanedAttrs = {};
+            for (const [key, value] of Object.entries(node.attrs)) {
+                if (value !== null && value !== undefined) {
+                    cleanedAttrs[key] = value;
+                }
+            }
+            if (Object.keys(cleanedAttrs).length > 0) {
+                cleaned.attrs = cleanedAttrs;
+            }
+        }
+        // Recursively clean child nodes
+        if (node.content) {
+            cleaned.content = node.content.map(cleanNode);
+        }
+        // Clean marks: remove marks with null/undefined values or empty attrs
+        if (node.marks) {
+            const cleanedMarks = node.marks.filter((mark) => {
+                // Keep marks without attrs
+                if (!mark.attrs)
+                    return true;
+                // Remove marks with empty attrs object
+                if (Object.keys(mark.attrs).length === 0)
+                    return false;
+                // Remove marks where all attribute values are null or undefined
+                const hasValidValue = Object.values(mark.attrs).some((value) => value !== null && value !== undefined);
+                return hasValidValue;
+            });
+            if (cleanedMarks.length > 0) {
+                cleaned.marks = cleanedMarks;
+            }
+        }
+        if (node.text !== undefined) {
+            cleaned.text = node.text;
+        }
+        return cleaned;
+    }
+    return {
+        type: "doc",
+        content: json.content?.map(cleanNode),
+    };
+}

package/backend/dist/extensions/html-snippet-node.js

@@ -0,0 +1,28 @@
+import { Node } from "@tiptap/core";
+import { type } from "arktype";
+export const HtmlSnippetInputAT = type({
+    "html?": "string|undefined|null",
+    "+": "reject",
+}).pipe((data) => ({
+    html: data.html ?? undefined,
+}));
+export function createHtmlSnippetNodeBackend() {
+    return Node.create({
+        name: "htmlSnippet",
+        group: "block",
+        atom: true,
+        addAttributes() {
+            return {
+                html: { default: "" },
+            };
+        },
+        parseHTML() {
+            return [{ tag: 'button[data-pa-node="htmlSnippet"]' }];
+        },
+        renderHTML() {
+            // Return a simple placeholder structure.
+            // The actual HTML injection is handled via nodeMapping in renderToHTMLString options.
+            return ["div", { "data-html-snippet": "true" }, 0];
+        },
+    });
+}

package/backend/dist/extensions/internal-link-node.js

@@ -0,0 +1,57 @@
+import { Node } from "@tiptap/core";
+export async function preloadInternalLinkDocuments(service, json, options) {
+    const documentMap = new Map();
+    async function walkNodes(nodes) {
+        for (const node of nodes) {
+            if (node.type === "internalLink" && node.attrs?.documentId) {
+                const documentId = node.attrs.documentId;
+                if (!documentMap.has(documentId)) {
+                    try {
+                        const doc = await service.getDocument(documentId);
+                        if (doc) {
+                            const url = await doc.getUrl({
+                                absoluteUrl: options?.absoluteUrls,
+                            });
+                            documentMap.set(documentId, {
+                                title: doc.title ?? "",
+                                url: url,
+                            });
+                        }
+                    }
+                    catch (_error) {
+                        service.pluginService.logger.warn(`Failed to load document '${documentId}'`);
+                    }
+                }
+            }
+            if (node.content) {
+                await walkNodes(node.content);
+            }
+        }
+    }
+    if (json.content) {
+        await walkNodes(json.content);
+    }
+    return documentMap;
+}
+export function createInternalLinkNodeBackend(_service, documentMap, _options) {
+    return Node.create({
+        name: "internalLink",
+        group: "inline",
+        inline: true,
+        atom: true,
+        addAttributes() {
+            return { documentId: { default: "" } };
+        },
+        parseHTML() {
+            return [{ tag: "span[data-internal-link]" }];
+        },
+        renderHTML({ node }) {
+            const { documentId } = node.attrs;
+            const data = documentMap.get(documentId);
+            if (!data) {
+                return ["span", { class: "InternalLink" }, ""];
+            }
+            return ["a", { class: "InternalLink", href: data.url }, data.title];
+        },
+    });
+}

package/backend/dist/extensions/media-node.js

@@ -0,0 +1,110 @@
+import { isResizeRule } from "@paroicms/public-anywhere-lib";
+import { Node } from "@tiptap/core";
+import { type } from "arktype";
+export const MediaNodeInputAT = type({
+    mediaId: "string",
+    resizeRule: "string",
+    "align?": '"center"|"left"|"right"|undefined|null',
+    "href?": "string|undefined|null",
+    "zoomable?": "boolean|undefined|null",
+    "+": "reject",
+}).pipe((data) => {
+    if (!isResizeRule(data.resizeRule))
+        throw new Error(`Invalid resizeRule: ${data.resizeRule}`);
+    return {
+        mediaId: data.mediaId,
+        resizeRule: data.resizeRule,
+        align: data.align ?? undefined,
+        href: data.href ?? undefined,
+        zoomable: data.zoomable ?? undefined,
+    };
+});
+export async function preloadMediaImages(service, json, options) {
+    const mediaMap = new Map();
+    async function walkNodes(nodes) {
+        for (const node of nodes) {
+            if (node.type === "media" && node.attrs) {
+                const { mediaId, resizeRule } = node.attrs;
+                const key = `${mediaId}:${resizeRule}`;
+                if (mediaMap.has(key))
+                    continue;
+                const media = await service.pluginService.getMedia({ mediaId }, { withAttachedData: { language: service.language } });
+                if (media?.kind === "image") {
+                    const image = await service.useImage(media, resizeRule, {
+                        absoluteUrl: options?.absoluteUrls,
+                    });
+                    if (image) {
+                        mediaMap.set(key, { image, media });
+                    }
+                    else {
+                        service.pluginService.logger.warn(`failed to load image '${mediaId}' with resize rule '${resizeRule}'`);
+                    }
+                }
+                else {
+                    service.pluginService.logger.warn(`media '${mediaId}' is not an image`);
+                }
+            }
+            if (node.content) {
+                await walkNodes(node.content);
+            }
+        }
+    }
+    if (json.content) {
+        await walkNodes(json.content);
+    }
+    return mediaMap;
+}
+export function createMediaNodeBackend(service, mediaMap) {
+    return Node.create({
+        name: "media",
+        group: "block",
+        atom: true,
+        addAttributes() {
+            return {
+                mediaId: { default: null },
+                resizeRule: { default: null },
+                align: { default: "center" },
+                zoomable: { default: false },
+                href: { default: null },
+            };
+        },
+        parseHTML() {
+            return [{ tag: 'figure[data-pa-node="media"]' }];
+        },
+        renderHTML({ node }) {
+            const { mediaId, resizeRule, align, href, zoomable } = node.attrs;
+            const key = `${mediaId}:${resizeRule}`;
+            const data = mediaMap.get(key);
+            if (!data) {
+                return ["div", { class: "media-error" }, ""];
+            }
+            const { image, media } = data;
+            const caption = media.attachedData?.[service.language]?.caption;
+            const figClass = `Fig${align ? ` ${align}` : ""}`;
+            const figAttrs = { class: figClass };
+            if (zoomable) {
+                figAttrs["data-zoomable"] = mediaId;
+                service.setRenderState("paZoom:enabled", true);
+            }
+            const imgSpec = [
+                "img",
+                {
+                    class: "Fig-media",
+                    src: image.url,
+                    width: String(image.width),
+                    height: String(image.height),
+                    loading: "lazy",
+                    alt: "",
+                },
+            ];
+            const captionSpec = caption ? ["figcaption", { class: "Fig-caption" }, caption] : null;
+            if (href) {
+                const linkSpec = ["a", { href }, imgSpec];
+                const children = [linkSpec, captionSpec].filter(Boolean);
+                return ["figure", figAttrs, ...children];
+            }
+            const children = [imgSpec, captionSpec].filter(Boolean);
+            return ["figure", figAttrs, ...children];
+        },
+    });
+}

package/backend/dist/extensions/obfuscate-mark.js

@@ -0,0 +1,59 @@
+import { generateObfuscatedHtml, obfuscateAsHtmlLink } from "@paroicms/public-server-lib";
+import { Mark } from "@tiptap/core";
+/**
+ * Creates the obfuscate mark for backend rendering.
+ * The actual obfuscation logic is handled via markMapping in renderToHTMLString options,
+ * similar to how htmlSnippet uses nodeMapping.
+ */
+export function createObfuscateMarkBackend() {
+    return Mark.create({
+        name: "obfuscate",
+        addAttributes() {
+            return {
+                asALink: {
+                    default: "raw",
+                    parseHTML: (element) => element.getAttribute("data-as-a-link") || "raw",
+                    renderHTML: (attributes) => {
+                        return {
+                            "data-as-a-link": attributes.asALink,
+                        };
+                    },
+                },
+            };
+        },
+        parseHTML() {
+            return [
+                {
+                    tag: "span.Obfuscate",
+                },
+            ];
+        },
+        renderHTML({ HTMLAttributes }) {
+            // Return a simple placeholder - the actual rendering is handled by markMapping
+            // Note: HTMLAttributes will contain { "data-as-a-link": "..." } from addAttributes
+            return [
+                "span",
+                {
+                    ...HTMLAttributes,
+                    class: "Obfuscate",
+                },
+                0,
+            ];
+        },
+    });
+}
+/**
+ * Creates the mark renderer function for use with markMapping in renderToHTMLString.
+ * This function receives the mark and its children (text content) and returns the obfuscated HTML.
+ */
+export function createObfuscateMarkRenderer() {
+    return ({ mark, children }) => {
+        // Get the text content from children
+        const textContent = Array.isArray(children) ? children.join("") : (children ?? "");
+        const asALink = mark.attrs?.asALink;
+        if (asALink === "mailto" || asALink === "tel") {
+            return obfuscateAsHtmlLink(textContent);
+        }
+        return generateObfuscatedHtml(textContent);
+    };
+}

package/backend/dist/extensions/platform-video-node.js

@@ -0,0 +1,45 @@
+import { Node } from "@tiptap/core";
+import { type } from "arktype";
+const PlatformVideoInputAT = type({
+    videoId: "string",
+    platform: "string",
+    "+": "reject",
+});
+export function createPlatformVideoNodeBackend() {
+    return Node.create({
+        name: "platformVideo",
+        group: "block",
+        atom: true,
+        addAttributes() {
+            return {
+                videoId: { default: "" },
+                platform: { default: "youtube" },
+            };
+        },
+        parseHTML() {
+            return [
+                {
+                    tag: 'div[data-pa-node="platformVideo"]',
+                },
+            ];
+        },
+        renderHTML({ node }) {
+            const { videoId, platform } = PlatformVideoInputAT.assert(node.attrs);
+            if (platform !== "youtube") {
+                console.error(`Unsupported video platform "${platform}"`);
+                return ["span", { "data-unsupported-video-platform": platform }, 0];
+            }
+            return [
+                "iframe",
+                {
+                    width: "420",
+                    height: "315",
+                    src: `https://www.youtube-nocookie.com/embed/${videoId}`,
+                    frameborder: "0",
+                    allowfullscreen: "true",
+                },
+                0,
+            ];
+        },
+    });
+}

package/backend/dist/index.js

@@ -0,0 +1,86 @@
+import { isJsonFieldValue, isObj } from "@paroicms/public-anywhere-lib";
+import { makeStylesheetLinkAsyncTag } from "@paroicms/public-server-lib";
+import { esmDirName, extractPackageNameAndVersionSync } from "@paroicms/script-lib";
+import { dirname, join } from "node:path";
+import { cleanTiptapJson } from "./clean-tiptap-json.js";
+import { normalizeTypographyInTiptapJson } from "./normalize-typography-in-tiptap.js";
+import { convertTiptapJsonToHtml, convertTiptapJsonToPlainText } from "./tiptap-json.js";
+const projectDir = dirname(esmDirName(import.meta.url));
+const packageDir = dirname(projectDir);
+const { name: pluginName, version } = extractPackageNameAndVersionSync(packageDir);
+const plugin = {
+    version,
+    siteInit(service) {
+        service.setPublicAssetsDirectory(join(packageDir, "public-assets", "dist"));
+        service.setAdminUiAssetsDirectory(join(packageDir, "admin-ui-plugin", "dist"));
+        service.registerSiteSchemaLibrary(join(packageDir, "site-schema-lib"));
+        service.registerRenderingHook("fieldPreprocessor", ({ service, value, options }) => {
+            const { fieldType } = options;
+            if (fieldType.pluginName !== pluginName)
+                return value;
+            if (!isJsonFieldValue(value))
+                return value;
+            if (!isObj(value.j) || value.j.type !== "doc") {
+                throw new Error("Invalid TiptapJsonValue");
+            }
+            const json = value.j;
+            if (options.outputType === "plainText") {
+                return convertTiptapJsonToPlainText(service, json);
+            }
+            service.setRenderState("paTiptapEditor:html", true);
+            return convertTiptapJsonToHtml(service, json);
+        });
+        service.registerHook("beforeSaveValue", async ({ service, value, options }) => {
+            const { fieldType, language } = options;
+            if (fieldType.pluginName !== pluginName)
+                return value;
+            if (fieldType.dataType !== "json")
+                return value;
+            if (!isJsonFieldValue(value) || !isObj(value.j) || value.j.type !== "doc") {
+                return value;
+            }
+            let newJson = value.j;
+            if (fieldType.normalizeTypography) {
+                newJson = await normalizeTypographyInTiptapJson(service, newJson, language);
+            }
+            newJson = cleanTiptapJson(newJson);
+            return { j: newJson };
+        });
+        service.registerHeadTags(({ state }) => {
+            if (!state.get("paTiptapEditor:html"))
+                return;
+            return [makeStylesheetLinkAsyncTag(`${service.pluginAssetsUrl}/text.css`)];
+        });
+        if (service.configuration.adminUi?.code) {
+            service.registerHeadTags(({ state }) => {
+                if (!state.get("paTiptapEditor:html"))
+                    return;
+                const usedLanguages = state.get("paTiptapEditor:languages");
+                if (!usedLanguages || usedLanguages.length === 0)
+                    return;
+                const scripts = [
+                    makeStylesheetLinkAsyncTag("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/styles/github.min.css"),
+                    '<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/highlight.min.js" defer></script>',
+                ];
+                for (const lang of usedLanguages) {
+                    scripts.push(`<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/${lang}.min.js" defer></script>`);
+                }
+                scripts.push(`<script>
+document.addEventListener("DOMContentLoaded", () => {
+  hljs.highlightAll();
+  const list = document.querySelectorAll("pre[data-language]");
+  for (const el of list) {
+    const code = el.querySelector("code");
+    if (code) {
+      code.classList.add(\`language-\${el.dataset.language}\`);
+      hljs.highlightElement(code);
+    }
+  }
+});
+</script>`);
+                return scripts;
+            });
+        }
+    },
+};
+export default plugin;

package/backend/dist/normalize-typography-in-tiptap.js

@@ -0,0 +1,39 @@
+import { isPromise } from "node:util/types";
+// Whitelist of node types where typography normalization should be applied.
+// These are standard textual nodes from StarterKit and related extensions.
+// Custom nodes (media, htmlSnippet, platformVideo, internalLink) and code blocks
+// are intentionally excluded to preserve their content as-is.
+const TEXTUAL_NODE_TYPES = new Set([
+    "doc",
+    "paragraph",
+    "heading",
+    "blockquote",
+    "listItem",
+    "bulletList",
+    "orderedList",
+]);
+export async function normalizeTypographyInTiptapJson(service, json, language) {
+    async function processNode(node) {
+        if (node.text !== undefined) {
+            const result = service.executeHook("normalizeTypography", {
+                value: node.text,
+                options: { language },
+            });
+            const normalizedValue = isPromise(result) ? await result : result;
+            const normalizedText = typeof normalizedValue === "string" ? normalizedValue : node.text;
+            return { ...node, text: normalizedText };
+        }
+        // Only recursively process children if this is a textual node type.
+        // This prevents normalization in codeBlock, htmlSnippet, media, platformVideo, etc.
+        if (node.content && TEXTUAL_NODE_TYPES.has(node.type)) {
+            const processedContent = await Promise.all(node.content.map(processNode));
+            return { ...node, content: processedContent };
+        }
+        return node;
+    }
+    if (!json.content) {
+        return json;
+    }
+    const processedContent = await Promise.all(json.content.map(processNode));
+    return { ...json, content: processedContent };
+}