@paroicms/tiptap-editor-plugin 1.0.0

package/backend/dist/tiptap-json.js

@@ -0,0 +1,211 @@
+import { stripHtmlTags } from "@paroicms/public-server-lib";
+import { Mark } from "@tiptap/core";
+import Code from "@tiptap/extension-code";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TextAlign from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import StarterKit from "@tiptap/starter-kit";
+import { renderToHTMLString } from "@tiptap/static-renderer";
+import { createHtmlSnippetNodeBackend } from "./extensions/html-snippet-node.js";
+import { createInternalLinkNodeBackend, preloadInternalLinkDocuments, } from "./extensions/internal-link-node.js";
+import { createMediaNodeBackend, preloadMediaImages, } from "./extensions/media-node.js";
+import { createObfuscateMarkBackend, createObfuscateMarkRenderer, } from "./extensions/obfuscate-mark.js";
+import { createPlatformVideoNodeBackend } from "./extensions/platform-video-node.js";
+import { shouldOpenInBlankTab } from "./url-blank-tab.js";
+const TextSize = Mark.create({
+    name: "textSize",
+    addAttributes() {
+        return {
+            value: {
+                default: null,
+                parseHTML: (element) => {
+                    if (element.classList.contains("text-size-small"))
+                        return "small";
+                    if (element.classList.contains("text-size-large"))
+                        return "large";
+                    if (element.classList.contains("text-size-huge"))
+                        return "huge";
+                    return null;
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes.value)
+                        return {};
+                    return { class: `text-size-${attributes.value}` };
+                },
+            },
+        };
+    },
+    keepOnSplit: false,
+    parseHTML() {
+        return [
+            { tag: "span.text-size-small" },
+            { tag: "span.text-size-large" },
+            { tag: "span.text-size-huge" },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["span", HTMLAttributes, 0];
+    },
+});
+export async function convertTiptapJsonToHtml(service, json, options) {
+    const processedJson = addTargetBlankToLinks(service, json);
+    const mediaMap = await preloadMediaImages(service, processedJson, options);
+    const documentMap = await preloadInternalLinkDocuments(service, processedJson, options);
+    const hasCodeInConf = service.pluginService.configuration.adminUi?.code ?? false;
+    const usedLanguages = collectCodeBlockLanguages(processedJson);
+    if (usedLanguages.size > 0) {
+        service.setRenderState("paTiptapEditor:languages", Array.from(usedLanguages));
+    }
+    const extensions = [
+        StarterKit.configure({
+            code: hasCodeInConf ? false : undefined,
+            codeBlock: hasCodeInConf ? false : undefined,
+        }),
+        ...(hasCodeInConf ? [Code, CodeBlockLowlight] : []),
+        TextAlign.configure({
+            types: ["heading", "paragraph"],
+            defaultAlignment: undefined,
+        }),
+        TextStyle,
+        TextSize,
+        Subscript,
+        Superscript,
+        createMediaNodeBackend(service, mediaMap),
+        createHtmlSnippetNodeBackend(),
+        createObfuscateMarkBackend(),
+        createPlatformVideoNodeBackend(),
+        createInternalLinkNodeBackend(service, documentMap, options),
+    ];
+    const html = renderToHTMLString({
+        content: processedJson,
+        extensions,
+        options: {
+            nodeMapping: {
+                htmlSnippet: ({ node }) => {
+                    return node.attrs.html || "";
+                },
+            },
+            markMapping: {
+                obfuscate: createObfuscateMarkRenderer(),
+            },
+        },
+    });
+    return html;
+}
+function addTargetBlankToLinks(service, json) {
+    if (!json.content)
+        return json;
+    function processNodes(nodes) {
+        return nodes.map((node) => {
+            let processedNode = node;
+            if (node.marks) {
+                processedNode = {
+                    ...processedNode,
+                    marks: node.marks.map((mark) => {
+                        if (mark.type === "link" && mark.attrs?.href) {
+                            if (shouldOpenInBlankTab(service.pluginService, mark.attrs.href)) {
+                                return {
+                                    ...mark,
+                                    attrs: {
+                                        ...mark.attrs,
+                                        target: "_blank",
+                                    },
+                                };
+                            }
+                        }
+                        return mark;
+                    }),
+                };
+            }
+            if (node.content) {
+                return {
+                    ...processedNode,
+                    content: processNodes(node.content),
+                };
+            }
+            return processedNode;
+        });
+    }
+    return {
+        ...json,
+        content: processNodes(json.content),
+    };
+}
+export function convertTiptapJsonToPlainText(service, json) {
+    const cleanedJson = removeObfuscatedText(json);
+    const hasCodeInConf = service.pluginService.configuration.adminUi?.code ?? false;
+    const emptyMediaMap = new Map();
+    const emptyDocumentMap = new Map();
+    const extensions = [
+        StarterKit.configure({
+            code: hasCodeInConf ? false : undefined,
+            codeBlock: hasCodeInConf ? false : undefined,
+        }),
+        ...(hasCodeInConf ? [Code, CodeBlockLowlight] : []),
+        TextAlign.configure({
+            types: ["heading", "paragraph"],
+            defaultAlignment: undefined,
+        }),
+        TextStyle,
+        TextSize,
+        Subscript,
+        Superscript,
+        createMediaNodeBackend(service, emptyMediaMap),
+        createHtmlSnippetNodeBackend(),
+        createPlatformVideoNodeBackend(),
+        createInternalLinkNodeBackend(service, emptyDocumentMap),
+    ];
+    const html = renderToHTMLString({
+        content: cleanedJson,
+        extensions,
+    });
+    return stripHtmlTags(html, { blockSeparator: " – " });
+}
+function removeObfuscatedText(json) {
+    function processNodes(nodes) {
+        return nodes
+            .filter((node) => {
+            // Filter out internal link nodes
+            if (node.type === "internalLink") {
+                return false;
+            }
+            // Remove text nodes with obfuscate mark
+            if (node.marks?.some((m) => m.type === "obfuscate")) {
+                return false;
+            }
+            return true;
+        })
+            .map((node) => {
+            if (node.content) {
+                return {
+                    ...node,
+                    content: processNodes(node.content),
+                };
+            }
+            return node;
+        });
+    }
+    return {
+        ...json,
+        content: json.content ? processNodes(json.content) : undefined,
+    };
+}
+function collectCodeBlockLanguages(json) {
+    const languages = new Set();
+    function traverse(nodes) {
+        if (!nodes)
+            return;
+        for (const node of nodes) {
+            if (node.type === "codeBlock" && node.attrs?.language) {
+                languages.add(node.attrs.language);
+            }
+            if (node.content) {
+                traverse(node.content);
+            }
+        }
+    }
+    traverse(json.content);
+    return languages;
+}

package/backend/dist/tiptap-types.js

@@ -0,0 +1 @@
+export {};

package/backend/dist/url-blank-tab.js

@@ -0,0 +1,21 @@
+const forceBlankTabExtensions = ["pdf", "txt"];
+export function shouldOpenInBlankTab(service, url) {
+    const extensionMatch = url.match(/\.([^./?#]+)(?:[?#]|$)/);
+    if (extensionMatch) {
+        const extension = extensionMatch[1].toLowerCase();
+        if (forceBlankTabExtensions.includes(extension)) {
+            return true;
+        }
+    }
+    if (url.startsWith("/"))
+        return false; // path-only url
+    const regex = /^https?:\/\/([^/]+)/;
+    const match = url.match(regex);
+    if (!match)
+        return false;
+    const [, domainAndPort] = match;
+    const domain = domainAndPort.split(":")[0];
+    if (domain !== service.fqdn)
+        return true;
+    return false;
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@paroicms/tiptap-editor-plugin",
+  "version": "1.0.0",
+  "description": "Tiptap editor plugin for ParoiCMS",
+  "keywords": [
+    "paroicms",
+    "tiptap",
+    "plugin",
+    "editor"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/paroi/opensource/paroicms.git",
+    "directory": "plugins/tiptap-editor-plugin"
+  },
+  "author": "Paroi Team",
+  "license": "MIT",
+  "scripts": {
+    "build": "npm run build:backend && npm run build:admin-ui && npm run build:public-assets",
+    "build:backend": "(cd backend && tsc)",
+    "build:admin-ui": "(cd admin-ui-plugin && npm run build)",
+    "build:public-assets": "npm run _scss -- --no-source-map --style=compressed",
+    "build:backend:watch": "(cd backend && tsc --watch --preserveWatchOutput)",
+    "build:admin-ui:watch": "(cd admin-ui-plugin && npm run build:watch)",
+    "build:public-assets:watch": "npm run _scss && npm run _scss -- --watch",
+    "_scss": "sass public-assets/src/text.scss public-assets/dist/text.css",
+    "clear": "rimraf backend/dist/* admin-ui-plugin/dist/*",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@paroicms/script-lib": "0.3.3",
+    "@tiptap/core": "~3.7.2",
+    "@tiptap/extension-code": "~3.7.2",
+    "@tiptap/extension-code-block-lowlight": "~3.7.2",
+    "@tiptap/extension-subscript": "~3.7.2",
+    "@tiptap/extension-superscript": "~3.7.2",
+    "@tiptap/extension-text-align": "~3.7.2",
+    "@tiptap/extension-text-style": "~3.7.2",
+    "@tiptap/starter-kit": "~3.7.2",
+    "@tiptap/static-renderer": "~3.7.2",
+    "arktype": "~2.1.23"
+  },
+  "peerDependencies": {
+    "@paroicms/public-anywhere-lib": "0",
+    "@paroicms/public-server-lib": "0"
+  },
+  "devDependencies": {
+    "@paroicms/public-anywhere-lib": "0.37.1",
+    "@paroicms/public-server-lib": "0.47.1",
+    "@types/node": "~24.8.1",
+    "rimraf": "~6.0.1",
+    "sass": "~1.93.2",
+    "typescript": "~5.9.3",
+    "vitest": "~3.2.4"
+  },
+  "type": "module",
+  "main": "backend/dist/index.js",
+  "types": "types/html-editor-public-types.d.ts",
+  "files": [
+    "backend/dist",
+    "admin-ui-plugin/dist",
+    "public-assets/dist",
+    "site-schema-lib",
+    "types/html-editor-public-types.d.ts"
+  ]
+}

package/public-assets/dist/text.css

@@ -0,0 +1 @@
+.Text .Fig{display:table;margin:0}.Text .Fig.left{float:left;margin:5px 20px 10px 0}.Text .Fig.right{float:right;margin:5px 0 10px 20px}.Text .Fig.center{clear:both;margin:20px auto}.Text .Fig-media{display:block;height:auto;max-width:100%}.Text .Fig-caption{caption-side:bottom;display:table-caption;font-size:.875em;margin-top:8px;opacity:.6;text-align:center}.Text .Fig a{display:block}.Text .Fig a:hover{opacity:.9}.Text .text-align-center{text-align:center}.Text .text-align-right{text-align:right}.Text .text-align-justify{text-align:justify}.Text .text-size-small{font-size:.5625em}.Text .text-size-large{font-size:2em}.Text .text-size-huge{font-size:4em}.Text iframe{display:block;margin:20px auto}

package/site-schema-lib/field-lib.site-schema.json

@@ -0,0 +1,56 @@
+{
+  "ParoiCMSSiteSchemaFormatVersion": "10",
+  "languages": ["en", "fr", "es", "de", "it", "pt"],
+  "fieldTypes": [
+    {
+      "name": "leadParagraph",
+      "localized": true,
+      "storedAs": "text",
+      "dataType": "json",
+      "renderAs": "html",
+      "normalizeTypography": true,
+      "useAsExcerpt": 1,
+      "adminUi": {
+        "editorRows": 4
+      },
+      "plugin": "@paroicms/tiptap-editor-plugin"
+    },
+    {
+      "name": "htmlContent",
+      "localized": true,
+      "storedAs": "text",
+      "dataType": "json",
+      "renderAs": "html",
+      "normalizeTypography": true,
+      "withGallery": true,
+      "useAsExcerpt": 2,
+      "useAsDefaultImage": 2,
+      "plugin": "@paroicms/tiptap-editor-plugin"
+    },
+    {
+      "name": "introduction",
+      "localized": true,
+      "storedAs": "text",
+      "dataType": "json",
+      "renderAs": "html",
+      "normalizeTypography": true,
+      "useAsExcerpt": 1,
+      "adminUi": {
+        "editorRows": 8
+      },
+      "plugin": "@paroicms/tiptap-editor-plugin"
+    },
+    {
+      "name": "footerMention",
+      "localized": true,
+      "storedAs": "text",
+      "dataType": "json",
+      "renderAs": "html",
+      "normalizeTypography": true,
+      "adminUi": {
+        "editorRows": 4
+      },
+      "plugin": "@paroicms/tiptap-editor-plugin"
+    }
+  ]
+}

package/site-schema-lib/field-lib.site-schema.l10n.en.json

@@ -0,0 +1,16 @@
+{
+  "fieldTypes": {
+    "leadParagraph": {
+      "label": "Lead paragraph"
+    },
+    "htmlContent": {
+      "label": "Content"
+    },
+    "introduction": {
+      "label": "Introduction"
+    },
+    "footerMention": {
+      "label": "Footer mention"
+    }
+  }
+}

package/site-schema-lib/field-lib.site-schema.l10n.fr.json

@@ -0,0 +1,16 @@
+{
+  "fieldTypes": {
+    "leadParagraph": {
+      "label": "Chapeau"
+    },
+    "htmlContent": {
+      "label": "Contenu"
+    },
+    "introduction": {
+      "label": "Introduction"
+    },
+    "footerMention": {
+      "label": "Mention de bas de page"
+    }
+  }
+}

package/types/html-editor-public-types.d.ts

@@ -0,0 +1,34 @@
+export interface PlatformVideoValue {
+  videoId: string;
+  platform: string;
+}
+
+export interface HtmlEditorInitService {
+  registerVideoPlugin(plugin: HtmlEditorVideoPlugin): void;
+  registerInternalLinkPlugin(plugin: HtmlEditorInternalLinkPlugin): void;
+}
+
+export interface HtmlEditorVideoPlugin {
+  recognizeUrl(url: string): PlatformVideoValue | undefined;
+  getThumbnailUrl(value: PlatformVideoValue): string;
+  createComponent(
+    value: PlatformVideoValue,
+    options: {
+      getLanguage: () => string;
+      onChange: (newVal: PlatformVideoValue | null) => void;
+    },
+  ): {
+    element: HTMLElement;
+    dispose: () => void;
+  };
+}
+
+export interface HtmlEditorInternalLinkPlugin {
+  getDocumentTitle(lNodeId: string): Promise<string | undefined>;
+  openDialog(
+    documentId: string | undefined,
+    options: {
+      getLanguage: () => string;
+    },
+  ): Promise<{ documentId: string | undefined } | undefined>;
+}