blixify-ui-web 1.2.116 → 1.2.118

package/lib/components/input/markdown/mermaid.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Mermaid diagrams for fenced ```mermaid code blocks.
+ *
+ * INFO: mermaid is never imported here. This library compiles to CommonJS, so
+ * an `import("mermaid")` would become a plain require and pull the whole
+ * renderer into every app that uses a markdown field. The host passes a loader
+ * instead — `lib.mermaid: () => import("mermaid")` — and its bundler splits the
+ * chunk so it is only fetched by a page that actually holds a diagram. A host
+ * that passes nothing gets the source shown as an ordinary code block.
+ */
+export type MermaidLoader = () => Promise<any>;
+export interface MermaidResult {
+    svg?: string;
+    error?: string;
+}
+export declare const MERMAID_LANGUAGE = "mermaid";
+export declare const MERMAID_STARTER = "flowchart LR\n  A[Start] --> B[Next step]";
+/**
+ * Renders one diagram's source to an svg string.
+ *
+ * INFO: never throws — a typo in a diagram is an everyday edit, and it must
+ * show a readable message in place of the diagram rather than break the page
+ * or the editor around it.
+ */
+export declare const handleRenderMermaid: (loader: MermaidLoader, source: string) => Promise<MermaidResult>;
+/**
+ * Replaces every rendered ```mermaid block inside a container with its diagram.
+ *
+ * INFO: used by the static renderer, which sets raw html — so this runs over the
+ * DOM after mount. The error is written as text, never as html, because it can
+ * echo the diagram source back.
+ */
+export declare const handleRenderMermaidBlocks: (container: HTMLElement | null, loader?: MermaidLoader) => Promise<void>;
+//# sourceMappingURL=mermaid.d.ts.map

package/lib/components/input/markdown/mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../../../src/components/input/markdown/mermaid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;AAE/C,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C,eAAO,MAAM,eAAe,8CAA8C,CAAC;AAiC3E;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,WACtB,aAAa,UACb,MAAM,KACb,OAAO,CAAC,aAAa,CAgBvB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,cACzB,WAAW,GAAG,IAAI,WACpB,aAAa,kBA+BvB,CAAC"}

package/lib/components/input/markdown/mermaid.js

@@ -0,0 +1,186 @@
+"use strict";
+/**
+ * Mermaid diagrams for fenced ```mermaid code blocks.
+ *
+ * INFO: mermaid is never imported here. This library compiles to CommonJS, so
+ * an `import("mermaid")` would become a plain require and pull the whole
+ * renderer into every app that uses a markdown field. The host passes a loader
+ * instead — `lib.mermaid: () => import("mermaid")` — and its bundler splits the
+ * chunk so it is only fetched by a page that actually holds a diagram. A host
+ * that passes nothing gets the source shown as an ordinary code block.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRenderMermaidBlocks = exports.handleRenderMermaid = exports.MERMAID_STARTER = exports.MERMAID_LANGUAGE = void 0;
+exports.MERMAID_LANGUAGE = "mermaid";
+exports.MERMAID_STARTER = "flowchart LR\n  A[Start] --> B[Next step]";
+// INFO: one initialisation per loaded module. initialize is global mermaid
+// state, so repeating it per diagram would be wasted work at best.
+var initialised = new WeakSet();
+var renderCount = 0;
+var handleResolveMermaid = function (loader) { return __awaiter(void 0, void 0, void 0, function () {
+    var loaded, mermaid;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, loader()];
+            case 1:
+                loaded = _b.sent();
+                mermaid = (_a = loaded === null || loaded === void 0 ? void 0 : loaded.default) !== null && _a !== void 0 ? _a : loaded;
+                if (!(mermaid === null || mermaid === void 0 ? void 0 : mermaid.render))
+                    throw new Error("Mermaid could not be loaded");
+                if (!initialised.has(mermaid)) {
+                    mermaid.initialize({
+                        startOnLoad: false,
+                        // INFO: documents can be published to anyone with a link. "strict" keeps
+                        // mermaid sanitising labels and refusing click handlers, so a diagram's
+                        // source cannot put script into the reader's page.
+                        securityLevel: "strict",
+                        // INFO: html labels stay on so inline formatting (<b>, <i>, <sup>) draws
+                        // instead of showing as literal tags. Strict still keeps sanitised tags
+                        // there, and an <img> would be a remote image any author can make every
+                        // reader of a public page fetch, so it is removed outright.
+                        dompurifyConfig: { FORBID_TAGS: ["img"] },
+                        // INFO: on a syntax error mermaid otherwise appends its own "Syntax error
+                        // in text" graphic to document.body — outside the block, and left behind
+                        // at the bottom of the page after the message here has replaced it
+                        suppressErrorRendering: true,
+                    });
+                    initialised.add(mermaid);
+                }
+                return [2 /*return*/, mermaid];
+        }
+    });
+}); };
+/**
+ * Renders one diagram's source to an svg string.
+ *
+ * INFO: never throws — a typo in a diagram is an everyday edit, and it must
+ * show a readable message in place of the diagram rather than break the page
+ * or the editor around it.
+ */
+var handleRenderMermaid = function (loader, source) { return __awaiter(void 0, void 0, void 0, function () {
+    var trimmed, mermaid, svg, err_1, message;
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                trimmed = (source !== null && source !== void 0 ? source : "").trim();
+                if (!trimmed)
+                    return [2 /*return*/, { error: "This diagram is empty." }];
+                _c.label = 1;
+            case 1:
+                _c.trys.push([1, 4, , 5]);
+                return [4 /*yield*/, handleResolveMermaid(loader)];
+            case 2:
+                mermaid = _c.sent();
+                renderCount += 1;
+                return [4 /*yield*/, mermaid.render("mermaid-diagram-".concat(renderCount), trimmed)];
+            case 3:
+                svg = (_c.sent()).svg;
+                return [2 /*return*/, { svg: svg }];
+            case 4:
+                err_1 = _c.sent();
+                message = String((_b = (_a = err_1 === null || err_1 === void 0 ? void 0 : err_1.message) !== null && _a !== void 0 ? _a : err_1) !== null && _b !== void 0 ? _b : "").split("\n")[0];
+                return [2 /*return*/, {
+                        error: message
+                            ? "This diagram could not be drawn: ".concat(message)
+                            : "This diagram could not be drawn.",
+                    }];
+            case 5: return [2 /*return*/];
+        }
+    });
+}); };
+exports.handleRenderMermaid = handleRenderMermaid;
+/**
+ * Replaces every rendered ```mermaid block inside a container with its diagram.
+ *
+ * INFO: used by the static renderer, which sets raw html — so this runs over the
+ * DOM after mount. The error is written as text, never as html, because it can
+ * echo the diagram source back.
+ */
+var handleRenderMermaidBlocks = function (container, loader) { return __awaiter(void 0, void 0, void 0, function () {
+    var blocks, _i, blocks_1, eachCode, pre, result, figure;
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                if (!container || !loader)
+                    return [2 /*return*/];
+                blocks = Array.from(container.querySelectorAll("pre > code.language-".concat(exports.MERMAID_LANGUAGE)));
+                _i = 0, blocks_1 = blocks;
+                _c.label = 1;
+            case 1:
+                if (!(_i < blocks_1.length)) return [3 /*break*/, 4];
+                eachCode = blocks_1[_i];
+                pre = eachCode.parentElement;
+                // INFO: a failed block stays in the DOM, so it is marked to keep a second
+                // pass over the same html from stacking another error above it
+                if (!pre || !pre.isConnected || pre.hasAttribute("data-mermaid-failed"))
+                    return [3 /*break*/, 3];
+                return [4 /*yield*/, (0, exports.handleRenderMermaid)(loader, (_a = eachCode.textContent) !== null && _a !== void 0 ? _a : "")];
+            case 2:
+                result = _c.sent();
+                // INFO: the html may have been replaced while the diagram was rendering
+                if (!pre.isConnected)
+                    return [3 /*break*/, 3];
+                figure = document.createElement("div");
+                figure.setAttribute("data-mermaid", "");
+                if (result.svg) {
+                    figure.className = "not-prose my-3 overflow-x-auto";
+                    figure.innerHTML = result.svg;
+                    pre.replaceWith(figure);
+                    return [3 /*break*/, 3];
+                }
+                // INFO: a failed diagram keeps its source on screen under the message, so
+                // the reader still gets the content the diagram was meant to show
+                figure.className =
+                    "not-prose my-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700";
+                figure.textContent = (_b = result.error) !== null && _b !== void 0 ? _b : "This diagram could not be drawn.";
+                pre.setAttribute("data-mermaid-failed", "");
+                pre.before(figure);
+                _c.label = 3;
+            case 3:
+                _i++;
+                return [3 /*break*/, 1];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+exports.handleRenderMermaidBlocks = handleRenderMermaidBlocks;
+//# sourceMappingURL=mermaid.js.map

package/lib/components/input/markdown/mermaid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.js","sourceRoot":"","sources":["../../../../src/components/input/markdown/mermaid.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASU,QAAA,gBAAgB,GAAG,SAAS,CAAC;AAE7B,QAAA,eAAe,GAAG,2CAA2C,CAAC;AAE3E,2EAA2E;AAC3E,mEAAmE;AACnE,IAAM,WAAW,GAAG,IAAI,OAAO,EAAU,CAAC;AAC1C,IAAI,WAAW,GAAG,CAAC,CAAC;AAEpB,IAAM,oBAAoB,GAAG,UAAO,MAAqB;;;;;oBACxC,qBAAM,MAAM,EAAE,EAAA;;gBAAvB,MAAM,GAAG,SAAc;gBACvB,OAAO,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,mCAAI,MAAM,CAAC;gBAC1C,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA;oBAAE,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;gBACrE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC9B,OAAO,CAAC,UAAU,CAAC;wBACjB,WAAW,EAAE,KAAK;wBAClB,yEAAyE;wBACzE,wEAAwE;wBACxE,mDAAmD;wBACnD,aAAa,EAAE,QAAQ;wBACvB,yEAAyE;wBACzE,wEAAwE;wBACxE,wEAAwE;wBACxE,4DAA4D;wBAC5D,eAAe,EAAE,EAAE,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE;wBACzC,0EAA0E;wBAC1E,yEAAyE;wBACzE,mEAAmE;wBACnE,sBAAsB,EAAE,IAAI;qBAC7B,CAAC,CAAC;oBACH,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBAC3B,CAAC;gBACD,sBAAO,OAAO,EAAC;;;KAChB,CAAC;AAEF;;;;;;GAMG;AACI,IAAM,mBAAmB,GAAG,UACjC,MAAqB,EACrB,MAAc;;;;;;gBAER,OAAO,GAAG,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;gBACtC,IAAI,CAAC,OAAO;oBAAE,sBAAO,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAC;;;;gBAEvC,qBAAM,oBAAoB,CAAC,MAAM,CAAC,EAAA;;gBAA5C,OAAO,GAAG,SAAkC;gBAClD,WAAW,IAAI,CAAC,CAAC;gBACD,qBAAM,OAAO,CAAC,MAAM,CAAC,0BAAmB,WAAW,CAAE,EAAE,OAAO,CAAC,EAAA;;gBAAvE,GAAG,GAAK,CAAA,SAA+D,CAAA,IAApE;gBACX,sBAAO,EAAE,GAAG,KAAA,EAAE,EAAC;;;gBAET,OAAO,GAAG,MAAM,CAAC,MAAA,MAAA,KAAG,aAAH,KAAG,uBAAH,KAAG,CAAE,OAAO,mCAAI,KAAG,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjE,sBAAO;wBACL,KAAK,EAAE,OAAO;4BACZ,CAAC,CAAC,2CAAoC,OAAO,CAAE;4BAC/C,CAAC,CAAC,kCAAkC;qBACvC,EAAC;;;;KAEL,CAAC;AAnBW,QAAA,mBAAmB,uBAmB9B;AAEF;;;;;;GAMG;AACI,IAAM,yBAAyB,GAAG,UACvC,SAA6B,EAC7B,MAAsB;;;;;;gBAEtB,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;oBAAE,sBAAO;gBAC5B,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,SAAS,CAAC,gBAAgB,CAAC,8BAAuB,wBAAgB,CAAE,CAAC,CACtE,CAAC;sBAC2B,EAAN,iBAAM;;;qBAAN,CAAA,oBAAM,CAAA;gBAAlB,QAAQ;gBACX,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC;gBACnC,0EAA0E;gBAC1E,+DAA+D;gBAC/D,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,GAAG,CAAC,YAAY,CAAC,qBAAqB,CAAC;oBACrE,wBAAS;gBACI,qBAAM,IAAA,2BAAmB,EAAC,MAAM,EAAE,MAAA,QAAQ,CAAC,WAAW,mCAAI,EAAE,CAAC,EAAA;;gBAAtE,MAAM,GAAG,SAA6D;gBAC5E,wEAAwE;gBACxE,IAAI,CAAC,GAAG,CAAC,WAAW;oBAAE,wBAAS;gBACzB,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC7C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;gBACxC,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC;oBACf,MAAM,CAAC,SAAS,GAAG,gCAAgC,CAAC;oBACpD,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;oBAC9B,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;oBACxB,wBAAS;gBACX,CAAC;gBACD,0EAA0E;gBAC1E,kEAAkE;gBAClE,MAAM,CAAC,SAAS;oBACd,0FAA0F,CAAC;gBAC7F,MAAM,CAAC,WAAW,GAAG,MAAA,MAAM,CAAC,KAAK,mCAAI,kCAAkC,CAAC;gBACxE,GAAG,CAAC,YAAY,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;;;gBAvBE,IAAM,CAAA;;;;;KAyB9B,CAAC;AAjCW,QAAA,yBAAyB,6BAiCpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web",
-  "version": "1.2.116",
+  "version": "1.2.118",
   "license": "MIT",
   "main": "lib/index.js",
   "private": false,
@@ -93,6 +93,7 @@
     "commit-message-validator": "^1.0.2",
     "copyfiles": "^2.4.1",
     "husky": "^8.0.2",
+    "mermaid": "^11.17.2",
     "papaparse": "^5.4.0",
     "postcss": "^8.4.18",
     "prop-types": "^15.8.1",
@@ -125,6 +126,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.13",
     "@tiptap/core": "^3.22.5",
+    "@tiptap/extension-code-block": "^3.22.5",
     "@tiptap/extension-image": "^3.22.5",
     "@tiptap/extension-list": "^3.22.5",
     "@tiptap/extension-subscript": "^3.22.5",