@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.css

@@ -0,0 +1,156 @@
+/* ============================================================
+   co-rich-text-viewer  —  read-only renderer (shadow DOM)
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  line-height: 1.5;
+}
+
+.co-rich-text-viewer {
+  padding: var(--co-spacing-md) 0;
+}
+.co-rich-text-viewer--compact {
+  padding: var(--co-spacing-sm) 0;
+}
+
+.co-rich-text-viewer--empty {
+  color: var(--co-semantic-text-muted);
+  font-style: italic;
+}
+
+.co-rich-text-viewer p { margin: 0 0 var(--co-spacing-sm); }
+.co-rich-text-viewer p:last-child { margin-bottom: 0; }
+
+.co-rich-text-viewer h1,
+.co-rich-text-viewer h2,
+.co-rich-text-viewer h3,
+.co-rich-text-viewer h4 {
+  margin: var(--co-spacing-md) 0 var(--co-spacing-sm);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.co-rich-text-viewer ul,
+.co-rich-text-viewer ol {
+  padding-left: var(--co-spacing-xl);
+  margin: 0 0 var(--co-spacing-sm);
+}
+
+.co-rich-text-viewer blockquote {
+  border-left: 3px solid var(--co-semantic-border-subtle);
+  padding-left: var(--co-spacing-md);
+  margin: 0 0 var(--co-spacing-sm);
+  color: var(--co-semantic-text-secondary);
+}
+
+.co-rich-text-viewer a {
+  color: var(--co-color-primary-azul);
+  text-decoration: underline;
+}
+
+.co-rich-text-viewer img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--co-border-radius-xs);
+  margin: var(--co-spacing-sm) 0;
+}
+
+/* ---- Responsive image layout (mirrors the editor; keyed on data-image-layout) ---- */
+.co-rich-text-viewer img[data-image-layout="wrap-left"] {
+  float: left;
+  max-width: 50%;
+  margin: 4px 16px 8px 0;
+}
+.co-rich-text-viewer img[data-image-layout="wrap-right"] {
+  float: right;
+  max-width: 50%;
+  margin: 4px 0 8px 16px;
+}
+.co-rich-text-viewer img[data-image-layout="center"] {
+  display: block;
+  margin: 12px auto;
+}
+.co-rich-text-viewer img[data-image-layout="full-width"] {
+  display: block;
+  width: 100%;
+  margin: 12px 0;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer img[data-image-layout="wrap-left"],
+  .co-rich-text-viewer img[data-image-layout="wrap-right"] {
+    float: none;
+    max-width: 100%;
+    display: block;
+    margin: 12px 0;
+  }
+}
+
+/* Defensive: neutralise absolute positioning baked by the old fixed-page model
+   so legacy content reflows in-flow instead of overlapping the text. */
+.co-rich-text-viewer img[style*="position:absolute"],
+.co-rich-text-viewer img[style*="position: absolute"] {
+  position: static !important;
+  left: auto !important;
+  top: auto !important;
+  z-index: auto !important;
+}
+
+/* Embeds (YouTube + generic iframe) — the iframe fills its wrapper; the wrapper
+   ([data-iframe] / [data-youtube-video]) carries an optional inline px width
+   (set when the author resized it). No width = full width (responsive 16:9). */
+.co-rich-text-viewer iframe {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  display: block;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  margin: 0;
+}
+.co-rich-text-viewer .co-rte-iframe,
+.co-rich-text-viewer [data-youtube-video] {
+  display: block;
+  max-width: 100%;
+  margin: var(--co-spacing-sm) 0;
+}
+
+.co-rich-text-viewer code {
+  font-family: var(--co-font-family-mono);
+  font-size: 0.9em;
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));
+  padding: 0.1em 0.3em;
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-rich-text-viewer .co-rte-variable,
+.co-rich-text-viewer [data-variable] {
+  display: inline-block;
+  padding: 0.05em 0.4em;
+  border-radius: var(--co-border-radius-xxs);
+  background: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-size: 0.9em;
+}
+
+/* ============================================================
+   Fluid content width (document / "site" preset)
+
+   Mirrors the editor: the content fills ~80% of its container on desktop and the
+   full width on mobile, so it reflows to fit any device. Host apps can tune the
+   desktop measure via --co-rte-content-width.
+   ============================================================ */
+.co-rich-text-viewer--site {
+  width: var(--co-rte-content-width, 80%);
+  max-width: 100%;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer--site {
+    width: 100%;
+  }
+}

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.js

@@ -0,0 +1,237 @@
+import { h } from "@stencil/core";
+import DOMPurify from "dompurify";
+/**
+ * Read-only renderer for rich-text content. For `format="html"` it only runs
+ * DOMPurify (no Tiptap import → tiny). `format="json"` lazily pulls the
+ * serializer to turn a ProseMirror document into sanitized HTML.
+ *
+ * The HTML path sanitizes inline (mirrors the rich-text package's whitelist)
+ * so the viewer never pulls the editor engine into its bundle.
+ *
+ * @part content - The rendered content container
+ * @part empty - The empty-state element
+ */
+const ALLOWED_TAGS = {
+    comment: ['p', 'br', 'strong', 'em', 'a', 'span'],
+    task: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote'],
+    email: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
+    document: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'hr', 'div', 'mark', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'iframe'],
+};
+/** iframes are permitted only with an https: source (blocks javascript:/data:/http:). */
+const SAFE_IFRAME_SRC_RE = /^https:\/\/[^\s"'<>]+$/i;
+export class CoRichTextViewer {
+    constructor() {
+        /** HTML string (default) or ProseMirror JSON string. */
+        this.value = null;
+        /** Input format. `html` is the lightweight path. */
+        this.format = 'html';
+        /** Sanitization profile to apply. */
+        this.preset = 'document';
+        /** Reduced padding. */
+        this.compact = false;
+        this.html = '';
+    }
+    componentWillLoad() {
+        return this.compute();
+    }
+    watchInputs() {
+        return this.compute();
+    }
+    sanitizeHtml(html) {
+        var _a;
+        DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+            var _a, _b;
+            // Only allow <input type="checkbox"> (task list checkboxes); strip others.
+            if (data.tagName === 'input' && node.type !== 'checkbox') {
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            }
+            // Allow only https iframes (YouTube, Vimeo, …); strip anything else.
+            if (data.tagName === 'iframe') {
+                const src = node.getAttribute('src') || '';
+                if (!SAFE_IFRAME_SRC_RE.test(src))
+                    (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(node);
+            }
+        });
+        try {
+            const clean = DOMPurify.sanitize(html, {
+                ALLOWED_TAGS: (_a = ALLOWED_TAGS[this.preset]) !== null && _a !== void 0 ? _a : ALLOWED_TAGS.document,
+                ALLOWED_ATTR: ['href', 'target', 'rel', 'data-variable', 'data-mention-id', 'data-mention-label', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'allowfullscreen', 'frameborder', 'allow', 'loading', 'data-youtube-video', 'data-iframe', 'data-image-layout', 'data-file-id', 'type', 'checked', 'disabled'],
+                ALLOW_DATA_ATTR: false,
+                FORBID_TAGS: ['script', 'object', 'embed', 'form', 'textarea', 'style'],
+                ADD_ATTR: ['allowfullscreen', 'frameborder', 'allow', 'loading'],
+            });
+            return clean;
+        }
+        finally {
+            DOMPurify.removeHook('uponSanitizeElement');
+        }
+    }
+    async compute() {
+        if (!this.value) {
+            this.html = '';
+            return;
+        }
+        if (this.format === 'html') {
+            this.html = this.sanitizeHtml(this.value);
+            return;
+        }
+        // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
+        try {
+            const doc = JSON.parse(this.value);
+            const rt = await import('@prolibu-suite/cobalt-rich-text');
+            this.html = rt.jsonToHtml(doc, this.preset);
+        }
+        catch (_a) {
+            this.html = '';
+        }
+    }
+    render() {
+        if (!this.html) {
+            return (h("div", { class: "co-rich-text-viewer co-rich-text-viewer--empty", part: "empty" }, this.emptyText || ''));
+        }
+        return (h("div", { class: {
+                'co-rich-text-viewer': true,
+                'co-rich-text-viewer--compact': this.compact,
+                'co-rich-text-viewer--site': this.preset === 'document',
+            }, part: "content", innerHTML: this.html }));
+    }
+    static get is() { return "co-rich-text-viewer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-rich-text-viewer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-rich-text-viewer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML string (default) or ProseMirror JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'html' | 'json'",
+                    "resolved": "\"html\" | \"json\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input format. `html` is the lightweight path."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'html'"
+            },
+            "preset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RichTextPreset",
+                    "resolved": "\"comment\" | \"document\" | \"email\" | \"task\"",
+                    "references": {
+                        "RichTextPreset": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::RichTextPreset",
+                            "referenceLocation": "RichTextPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sanitization profile to apply."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset",
+                "defaultValue": "'document'"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown when there is no content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduced padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "html": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchInputs"
+            }, {
+                "propName": "format",
+                "methodName": "watchInputs"
+            }, {
+                "propName": "preset",
+                "methodName": "watchInputs"
+            }];
+    }
+}

package/dist/collection/components/co-row/co-row.js

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '368c70a0173c99d0b7f2b6438008998271a9bf42', class: {
+        return (h("div", { key: '75c5a2693135e21a3a4379d8bbb6d9be5bdf6bf5', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '4766e3f0de343b06de936b61871e0c1e35703d52', class: "co-row__prefix" }, h("slot", { key: 'c705ca6d95787f4a5dd58fd82bf45eb81c1ab245', name: "prefix" })), h("div", { key: '73f07efd56ca95cf11196d87e292fb75b0f38fea', class: "co-row__content" }, h("slot", { key: '46c58feb7e058233707fc4f7aa3b8fcfe52f8e5e' })), h("div", { key: '58b87d77d70d0a0142963059cec5c36f947cb418', class: "co-row__suffix" }, h("slot", { key: '67562449f840f81bf30b611badd6e8d45858f449', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: 'beb274682f02b428b93315b057fbfe11bf2be037', class: "co-row__prefix" }, h("slot", { key: '0c9381d277795df7230da6eb05b9a5fa46726cf2', name: "prefix" })), h("div", { key: '2753f7c221e17d9eb91a685567a16470210652de', class: "co-row__content" }, h("slot", { key: '257befca88d731c4b6c3b8545fa3f2db6c56482c' })), h("div", { key: '934ecc29de8822bf084a4d49e828aa64481dbbe3', class: "co-row__suffix" }, h("slot", { key: 'baa9de54437b45d4fe54f3e2faaf28d9b8cc8ed0', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }