@paroicms/quill-editor-plugin 1.44.0 → 1.45.1

package/backend/dist/index.js

@@ -1,21 +1,16 @@
 import { isJsonFieldValue, isObj } from "@paroicms/public-anywhere-lib";
-import { escapeHtml, makeStylesheetLinkAsyncTag, } from "@paroicms/public-server-lib";
+import { makeStylesheetLinkAsyncTag } from "@paroicms/public-server-lib";
 import { esmDirName, extractPackageNameAndVersionSync } from "@paroicms/script-lib";
-import { type } from "arktype";
 import { dirname, join } from "node:path";
 import { normalizeTypographyInQuillDelta } from "./normalize-typography-in-delta.js";
 import { convertQuillDeltaToHtml, convertQuillDeltaToPlainText } from "./quill-delta.js";
-const MediaIdQueryAT = type({
-    "mediaId?": "string|undefined",
-    "+": "reject",
-});
 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, "frontend", "dist"));
+        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 }) => {
@@ -48,13 +43,7 @@ const plugin = {
         service.registerHeadTags(({ state }) => {
             if (!state.get("paQuillEditor:html"))
                 return;
-            const tags = [
-                makeStylesheetLinkAsyncTag(`${service.pluginAssetsUrl}/quill-editor-plugin.css`),
-            ];
-            if (state.get("paQuillEditor:zoomable")) {
-                tags.push(`<script type="module" src="${escapeHtml(`${service.pluginAssetsUrl}/quill-editor-plugin.mjs`)}" async></script>`);
-            }
-            return tags;
+            return [makeStylesheetLinkAsyncTag(`${service.pluginAssetsUrl}/text.css`)];
         });
         if (service.configuration.adminUi?.code) {
             service.registerHeadTags(({ state }) => {
@@ -80,53 +69,6 @@ document.addEventListener("DOMContentLoaded", () => {
                 ];
             });
         }
-        service.registerLiquidFilter("imageZoomUrl", (service) => {
-            service.pluginService.logger.warn(`"imageZoomUrl" filter is deprecated, use instead: <img ... {{ media | zoomable }}>`);
-            return "";
-        });
-        service.registerLiquidFilter("zoomable", async (service, val) => {
-            if (!val)
-                return "";
-            service.setRenderState("paQuillEditor:zoomable", true);
-            const mediaId = typeof val === "string"
-                ? val
-                : val && typeof val === "object" && "mediaId" in val && typeof val.mediaId === "string"
-                    ? val.mediaId
-                    : undefined;
-            if (!mediaId)
-                return "";
-            return `data-zoomable="${encodeURIComponent(mediaId)}"`;
-        }, { raw: true });
-        service.setPublicApiHandler(async (service, httpContext, relativePath) => {
-            const { req, res } = httpContext;
-            if (relativePath === "/zoom-image") {
-                const { mediaId } = MediaIdQueryAT.assert(req.query);
-                if (!mediaId) {
-                    res.append("Content-Type", "application/json; charset=utf-8");
-                    res.status(400).send({ error: "mediaId parameter is required" });
-                    return;
-                }
-                const renderService = await service.openRenderingService({
-                    language: service.siteSchema.defaultLanguage,
-                    urlLike: relativePath,
-                });
-                try {
-                    const image = await renderService.useImage(mediaId, "x1900x", { pixelRatio: 1 });
-                    res.append("Content-Type", "application/json; charset=utf-8");
-                    res.status(200).send(image);
-                }
-                catch (error) {
-                    service.logger.warn(`Failed to get zoom image for mediaId '${mediaId}':`, error);
-                    res.append("Content-Type", "application/json; charset=utf-8");
-                    res.status(404).send({ error: "Image not found" });
-                }
-                await renderService.close();
-                return;
-            }
-            res.append("Content-Type", "application/json; charset=utf-8");
-            res.status(404).send({ status: 404 });
-            return;
-        });
     },
 };
 export default plugin;

package/backend/dist/quill-delta.js

@@ -24,9 +24,9 @@ export async function convertQuillDeltaToHtml(service, delta, options) {
             return obfuscateBlotProcessing(value, customOp.attributes);
         if (type === "media")
             return await mediaBlotProcessing(service, value, options);
-        if (type === "video-plugin")
-            return videoPluginBlotProcessing(service, value, options);
-        if (type === "internal-link-plugin") {
+        if (type === "platform-video")
+            return platformVideoBlotProcessing(service, value, options);
+        if (type === "internal-link") {
             return await internalLinkPluginBlotProcessing(service, value, options);
         }
         pluginService.logger.warn(`Invalid blot '${type}'`);
@@ -44,9 +44,9 @@ export function convertQuillDeltaToPlainText(service, delta) {
             return "";
         if (type === "media")
             return "";
-        if (type === "video-plugin")
+        if (type === "platform-video")
             return "";
-        if (type === "internal-link-plugin")
+        if (type === "internal-link")
             return "";
         service.pluginService.logger.warn(`Invalid blot '${type}'`);
         return "";
@@ -71,7 +71,7 @@ async function mediaBlotProcessing(service, obj, options) {
     const figureAttributes = [`class="Fig${value.align ? ` ${escapeHtml(value.align)}` : ""}"`];
     if (value.zoomable) {
         figureAttributes.push(`data-zoomable="${escapeHtml(media.mediaId)}"`);
-        service.setRenderState("paQuillEditor:zoomable", true);
+        service.setRenderState("paZoom:enabled", true); // State of @paroicms/plugin-zoom
     }
     const imgTagAttributes = [
         `class="Fig-media"`,
@@ -99,9 +99,9 @@ export function preprocessDelta(ops) {
                 obfuscate: op.insert,
             };
         }
-        else if (op.attributes?.["internal-link-plugin"]) {
+        else if (op.attributes?.["internal-link"]) {
             op.insert = {
-                "internal-link-plugin": op.attributes?.["internal-link-plugin"],
+                "internal-link": op.attributes?.["internal-link"],
             };
         }
     }
@@ -140,15 +140,22 @@ function formatObfuscateAsALink(val) {
         return "tel";
     throw new Error(`invalid link-type '${val}'`);
 }
-function videoPluginBlotProcessing(_service, value, _options) {
-    const videoId = StringOrUndefinedAT.assert(value);
-    if (!videoId)
+const PlatformVideoValueAT = type({
+    videoId: "string",
+    platform: "string",
+    "+": "reject",
+});
+function platformVideoBlotProcessing(service, value, _options) {
+    const videoValue = PlatformVideoValueAT.assert(value);
+    if (videoValue.platform !== "youtube") {
+        service.pluginService.logger.warn(`Unsupported video platform "${videoValue.platform}"`);
         return "";
+    }
     return `
 <iframe
   width="420"
   height="315"
-  src="https://www.youtube.com/embed/${encodeURIComponent(videoId)}"
+  src="https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoValue.videoId)}"
 ></iframe>
 `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/quill-editor-plugin",
-  "version": "1.44.0",
+  "version": "1.45.1",
   "description": "Quill Editor plugin for ParoiCMS",
   "keywords": [
     "paroicms",
@@ -17,39 +17,41 @@
   "license": "MIT",
   "scripts": {
     "dev:admin-ui": "(cd admin-ui-plugin && vite)",
-    "build": "npm run build:backend && npm run build:admin-ui && npm run build:frontend",
+    "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:frontend": "(cd frontend && npm run build)",
-    "build:frontend:watch": "(cd frontend && npm run build:watch)",
     "build:admin-ui:watch": "(cd admin-ui-plugin && npm run build:watch)",
-    "clear": "rimraf backend/dist/* frontend/dist/* admin-ui-plugin/dist/*"
+    "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/* public-assets/dist/*"
   },
   "dependencies": {
     "@paroi/quill-delta-to-html": "~0.12.3",
-    "@paroicms/script-lib": "0.3.2",
-    "arktype": "~2.1.20"
+    "@paroicms/script-lib": "0.3.3",
+    "arktype": "~2.1.23"
   },
   "peerDependencies": {
     "@paroicms/public-anywhere-lib": "0",
     "@paroicms/public-server-lib": "0"
   },
   "devDependencies": {
-    "@paroicms/public-anywhere-lib": "0.37.0",
-    "@paroicms/public-server-lib": "0.47.0",
-    "@types/node": "~24.0.1",
+    "@paroicms/public-anywhere-lib": "0.37.1",
+    "@paroicms/public-server-lib": "0.47.1",
+    "@types/node": "~24.8.1",
     "rimraf": "~6.0.1",
-    "typescript": "~5.9.2"
+    "sass": "~1.93.2",
+    "typescript": "~5.9.3"
   },
   "type": "module",
   "main": "backend/dist/index.js",
   "types": "types/html-editor-public-types.d.ts",
   "files": [
     "backend/dist",
-    "frontend/dist",
     "admin-ui-plugin/dist",
+    "public-assets/dist",
     "site-schema-lib",
-    "types"
+    "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 .ql-align-center{text-align:center}.Text .ql-align-right{text-align:right}.Text .ql-size-small{font-size:.5625em}.Text .ql-size-large{font-size:2em}.Text .ql-size-huge{font-size:4em}

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

@@ -1,16 +1,21 @@
+export interface PlatformVideoValue {
+  videoId: string;
+  platform: string;
+}
+
 export interface HtmlEditorInitService {
   registerVideoPlugin(plugin: HtmlEditorVideoPlugin): void;
   registerInternalLinkPlugin(plugin: HtmlEditorInternalLinkPlugin): void;
 }
 
 export interface HtmlEditorVideoPlugin {
-  recognizeUrl(url: string): boolean;
-  getThumbnailUrl(videoId: string): string;
+  recognizeUrl(url: string): PlatformVideoValue | undefined;
+  getThumbnailUrl(value: PlatformVideoValue): string;
   createComponent(
-    urlOrId: string,
+    value: PlatformVideoValue,
     options: {
       getLanguage: () => string;
-      onChange: (newVal: string) => void;
+      onChange: (newVal: PlatformVideoValue | null) => void;
     },
   ): {
     element: HTMLElement;

package/frontend/dist/cross.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon" aria-hidden="true"><path d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z" fill="#fff"></path></svg>

package/frontend/dist/quill-editor-plugin.css

@@ -1 +0,0 @@
-.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 .ql-align-center{text-align:center}.Text .ql-align-right{text-align:right}.Text .ql-size-small{font-size:.5625em}.Text .ql-size-large{font-size:1.125em}.Text .ql-size-huge{font-size:2em}.PaZoomable{cursor:pointer}.PaZoomable:hover,.PaZoomable:focus{outline:1px solid var(--paInteractiveColor)}.PaZoomableViewer{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999}.PaZoomableViewer-img{height:100%;object-fit:contain;width:100%}.PaZoomableViewer-closeButton.PaButton{position:absolute;right:8px;top:5px}.PaZoomableViewer-spinner{animation:spin 1s linear infinite;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid white;height:40px;width:40px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/frontend/dist/quill-editor-plugin.mjs

@@ -1 +0,0 @@
-import{delegateEvents as $,template as w,setAttribute as c,effect as Z}from"https://esm.sh/solid-js@1.9.7/web";function k(o){let e=o;const t=e.indexOf("?");t!==-1&&(e=e.substring(0,t));const r=e.indexOf("#");r!==-1&&(e=e.substring(0,r));const n=e.lastIndexOf("/");return n===-1?void 0:e.slice(0,n)}const b=k(import.meta.url),E="/api/plugin/quill-editor-plugin",P=E;var V=w('<div class=PaZoomableViewer><button type=button class="PaZoomableViewer-closeButton PaButton"><img alt=⨯ width=30 height=30></button><div class=PaZoomableViewer-spinner>'),x=w('<div class=PaZoomableViewer><button type=button class="PaZoomableViewer-closeButton PaButton"><img alt=⨯ width=30 height=30></button><img class=PaZoomableViewer-img alt>');function L(){const o=document.querySelectorAll("[data-zoomable]");for(const e of o){if(!(e instanceof HTMLElement))continue;const t=e.dataset.zoomable?.trim();t&&C(e,{mediaId:t})}}function C(o,{mediaId:e}){o.classList.add("PaZoomable"),o.setAttribute("tabindex","0"),o.addEventListener("click",async t=>{t.preventDefault(),await _(e)})}async function _(o){const e=document.body,t=(()=>{var i=V(),s=i.firstChild,l=s.firstChild;return s.$$click=n,c(l,"src",`${b}/cross.svg`),i})();function r(i){i.key==="Escape"&&n()}function n(){t.remove(),e.removeEventListener("keyup",r)}e.addEventListener("keyup",r),e.appendChild(t);try{let i=function(d){d.key==="Escape"&&s()},s=function(){p.remove(),e.removeEventListener("keyup",i)};const l=await fetch(`${P}/zoom-image?mediaId=${encodeURIComponent(o)}`);if(!l.ok){console.error("Failed to fetch zoom image:",l.statusText),n();return}const m=await l.json();n();const p=(()=>{var d=x(),u=d.firstChild,y=u.firstChild,f=u.nextSibling;return u.$$click=s,c(y,"src",`${b}/cross.svg`),Z(a=>{var h=m.url,v=m.width,g=m.height;return h!==a.e&&c(f,"src",a.e=h),v!==a.t&&c(f,"width",a.t=v),g!==a.a&&c(f,"height",a.a=g),a},{e:void 0,t:void 0,a:void 0}),d})();e.addEventListener("keyup",i),e.appendChild(p)}catch(i){console.error("Error fetching zoom image:",i),n()}}$(["click"]);L();