@lofcz/platejs-code-drawing 52.3.0

package/LICENSE

@@ -0,0 +1,24 @@
+The MIT License (MIT)
+
+Copyright (c) Ziad Beyens, Dylan Schiemann, Joe Anderson, Felix Feng
+
+Unless otherwise specified in a LICENSE file within an individual package directory,
+this license applies to all files in this repository outside of those package directories.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# Plate code-drawing plugin
+
+This package implements the code-drawing plugin for Plate, supporting PlantUml, Graphviz, Flowchart, and Mermaid diagrams.
+
+## Documentation
+
+Check out [Code Drawing](https://platejs.org/docs/code-drawing).
+
+## License
+
+[MIT](../../LICENSE)

package/dist/BaseCodeDrawingPlugin-BTeDVejh.js

@@ -0,0 +1,16 @@
+import { createSlatePlugin } from "platejs";
+
+//#region src/lib/BaseCodeDrawingPlugin.ts
+const CODE_DRAWING_KEY = "code_drawing";
+/** Enables support for code drawing (PlantUml, Graphviz, Flowchart, Mermaid) within a Slate document */
+const BaseCodeDrawingPlugin = createSlatePlugin({
+	key: CODE_DRAWING_KEY,
+	node: {
+		isElement: true,
+		isVoid: true
+	}
+});
+
+//#endregion
+export { CODE_DRAWING_KEY as n, BaseCodeDrawingPlugin as t };
+//# sourceMappingURL=BaseCodeDrawingPlugin-BTeDVejh.js.map

package/dist/BaseCodeDrawingPlugin-BTeDVejh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCodeDrawingPlugin-BTeDVejh.js","names":["TElement","createSlatePlugin","CodeDrawingData","CODE_DRAWING_KEY","const","TCodeDrawingElement","data","BaseCodeDrawingPlugin","key","node","isElement","isVoid"],"sources":["../src/lib/BaseCodeDrawingPlugin.ts"],"sourcesContent":["import { type TElement, createSlatePlugin } from 'platejs';\n\nimport type { CodeDrawingData } from './types';\n\nexport const CODE_DRAWING_KEY = 'code_drawing' as const;\n\nexport interface TCodeDrawingElement extends TElement {\n  data?: CodeDrawingData;\n}\n\n/** Enables support for code drawing (PlantUml, Graphviz, Flowchart, Mermaid) within a Slate document */\nexport const BaseCodeDrawingPlugin = createSlatePlugin({\n  key: CODE_DRAWING_KEY,\n  node: { isElement: true, isVoid: true },\n});\n"],"mappings":";;;AAIA,MAAaG,mBAAmB;;AAOhC,MAAaI,wBAAwBN,kBAAkB;CACrDO,KAAKL;CACLM,MAAM;EAAEC,WAAW;EAAMC,QAAQ;EAAK;CACvC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import { InsertNodesOptions, NodeProps, SlateEditor, TElement } from "platejs";
+
+//#region src/lib/constants.d.ts
+declare const CODE_DRAWING_TYPE: {
+  readonly PlantUml: "PlantUml";
+  readonly Graphviz: "Graphviz";
+  readonly Flowchart: "Flowchart";
+  readonly Mermaid: "Mermaid";
+};
+declare const CODE_DRAWING_TYPE_ARRAY: readonly [{
+  readonly value: "PlantUml";
+  readonly label: "PlantUml";
+}, {
+  readonly value: "Graphviz";
+  readonly label: "Graphviz";
+}, {
+  readonly value: "Flowchart";
+  readonly label: "Flowchart";
+}, {
+  readonly value: "Mermaid";
+  readonly label: "Mermaid";
+}];
+type CodeDrawingType = (typeof CODE_DRAWING_TYPE)[keyof typeof CODE_DRAWING_TYPE];
+declare const VIEW_MODE: {
+  readonly Both: "Both";
+  readonly Code: "Code";
+  readonly Image: "Image";
+};
+declare const VIEW_MODE_ARRAY: readonly [{
+  readonly value: "Both";
+  readonly label: "Both";
+}, {
+  readonly value: "Code";
+  readonly label: "Code";
+}, {
+  readonly value: "Image";
+  readonly label: "Image";
+}];
+type ViewMode = (typeof VIEW_MODE)[keyof typeof VIEW_MODE];
+declare const DEFAULT_MIN_HEIGHT = 300;
+declare const RENDER_DEBOUNCE_DELAY = 500;
+declare const DOWNLOAD_FILENAME = "code-drawing.png";
+//#endregion
+//#region src/lib/types.d.ts
+type CodeDrawingData = {
+  drawingType?: CodeDrawingType;
+  drawingMode?: ViewMode;
+  code?: string;
+};
+//#endregion
+//#region src/lib/BaseCodeDrawingPlugin.d.ts
+declare const CODE_DRAWING_KEY: "code_drawing";
+interface TCodeDrawingElement extends TElement {
+  data?: CodeDrawingData;
+}
+/** Enables support for code drawing (PlantUml, Graphviz, Flowchart, Mermaid) within a Slate document */
+declare const BaseCodeDrawingPlugin: any;
+//#endregion
+//#region src/lib/transforms/insertCodeDrawing.d.ts
+declare const insertCodeDrawing: (editor: SlateEditor, props?: NodeProps<TCodeDrawingElement>, options?: InsertNodesOptions) => void;
+//#endregion
+//#region src/lib/utils/download.d.ts
+/**
+ * Download image from data URL
+ */
+declare function downloadImage(imageDataUrl: string, filename?: string): void;
+//#endregion
+//#region src/lib/utils/renderers.d.ts
+/**
+ * Render PlantUml diagram
+ * Uses plantuml-encoder to encode content and fetches SVG from PlantUml server
+ */
+declare function renderPlantUml(content: string): Promise<string>;
+/**
+ * Render Graphviz diagram
+ * Uses viz.js to render Graphviz DOT syntax to SVG
+ */
+declare function renderGraphviz(content: string): Promise<string>;
+/**
+ * Render Flowchart diagram
+ * Uses flowchart.js to parse and render flowchart syntax
+ */
+declare function renderFlowchart(content: string): Promise<string>;
+declare function renderMermaid(content: string): Promise<string>;
+/**
+ * Render code drawing based on type
+ */
+declare function renderCodeDrawing(type: CodeDrawingType, content: string): Promise<string>;
+//#endregion
+export { BaseCodeDrawingPlugin, CODE_DRAWING_KEY, CODE_DRAWING_TYPE, CODE_DRAWING_TYPE_ARRAY, CodeDrawingData, CodeDrawingType, DEFAULT_MIN_HEIGHT, DOWNLOAD_FILENAME, RENDER_DEBOUNCE_DELAY, TCodeDrawingElement, VIEW_MODE, VIEW_MODE_ARRAY, ViewMode, downloadImage, insertCodeDrawing, renderCodeDrawing, renderFlowchart, renderGraphviz, renderMermaid, renderPlantUml };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib/constants.ts","../src/lib/types.ts","../src/lib/BaseCodeDrawingPlugin.ts","../src/lib/transforms/insertCodeDrawing.ts","../src/lib/utils/download.ts","../src/lib/utils/renderers.ts"],"sourcesContent":[],"mappings":";;;cAAa;;;EAAA,SAAA,SAAA,EAKH,WAAA;EAEG,SAAA,OAAA,EAAA,SAiBH;AAEV,CAAA;AAIa,cAvBA,uBA2BH,EAAA,SAAA,CAAA;EAEG,SAAA,KAAA,EAAA,UAaH;EAEE,SAAA,KAAQ,EAAA,UAAW;AAG/B,CAAA,EAAA;EACa,SAAA,KAAA,EAAA,UAAqB;EACrB,SAAA,KAAA,EAAA,UAAiB;;;;ACtD9B,CAAA,EAAA;;;;ACEa,KFsBD,eAAA,GEtB2C,CAAA,OFuB7C,iBEvB6C,CAAA,CAAA,MAAA,OFuBb,iBEvBa,CAAA;AAEtC,cFwBJ,SExBwB,EAAA;EAKxB,SAAA,IAAA,EAAA,MAAA;;;;ACNA,cH+BA,eGPZ,EAAA,SAAA,CAAA;EAvBS,SAAA,KAAA,EAAA,MAAA;EACS,SAAA,KAAA,EAAA,MAAA;CAAV,EAAA;EACE,SAAA,KAAA,EAAA,MAAA;EAAuB,SAAA,KAAA,EAAA,MAAA;;;;ACLlC,CAAA,CAAA;KJgDY,QAAA,WAAmB,wBAAwB;cAG1C,kBAAA;cACA,qBAAA;AKxBS,cLyBT,iBAAA,GKzBiD,kBAAA;;;KJ7BlD,eAAA;gBACI;EDHH,WAAA,CAAA,ECIG,QDCN;EAEG,IAAA,CAAA,EAAA,MAAA;AAmBb,CAAA;;;cEtBa;AFJA,UEMI,mBAAA,SAA4B,QFDnC,CAAA;EAEG,IAAA,CAAA,EEAJ,eFAI;AAmBb;AAIA;AAMa,cEzBA,qBFsCH,EAAA,GAAA;;;cG5CG,4BACH,qBACD,UAAU,gCACR;;;;;;AHRE,iBIGG,aAAA,CJEN,YAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,MAAA,CAAA,EAAA,IAAA;;;;;AALV;AAOA;AAmBY,iBKKU,cAAA,CLJZ,OAAA,EAAA,MAAgC,CAAA,EKIa,OLJb,CAAA,MAAiB,CAAA;AAG3D;AAMA;AAeA;AAGA;AACa,iBKAS,cAAA,CLAY,OAAA,EAAA,MAAA,CAAA,EKAqB,OLArB,CAAA,MAAA,CAAA;AAClC;;;;ACtDY,iBI8FU,eAAA,CJ7FN,OAAA,EAAA,MACA,CAAA,EI4FwC,OJ5FhC,CAAA,MAAA,CAAA;iBIuHF,aAAA,mBAAgC;;;AHvHtD;AAEiB,iBGgJK,iBAAA,CH/Ib,IAAA,EGgJD,eHjJ6C,EAAA,OAAA,EAAA,MAAA,CAAA,EGmJlD,OHnJkD,CAAA,MAAA,CAAA"}

package/dist/index.js

@@ -0,0 +1,215 @@
+import { n as CODE_DRAWING_KEY, t as BaseCodeDrawingPlugin } from "./BaseCodeDrawingPlugin-BTeDVejh.js";
+
+//#region src/lib/constants.ts
+const CODE_DRAWING_TYPE = {
+	PlantUml: "PlantUml",
+	Graphviz: "Graphviz",
+	Flowchart: "Flowchart",
+	Mermaid: "Mermaid"
+};
+const CODE_DRAWING_TYPE_ARRAY = [
+	{
+		value: CODE_DRAWING_TYPE.PlantUml,
+		label: CODE_DRAWING_TYPE.PlantUml
+	},
+	{
+		value: CODE_DRAWING_TYPE.Graphviz,
+		label: CODE_DRAWING_TYPE.Graphviz
+	},
+	{
+		value: CODE_DRAWING_TYPE.Flowchart,
+		label: CODE_DRAWING_TYPE.Flowchart
+	},
+	{
+		value: CODE_DRAWING_TYPE.Mermaid,
+		label: CODE_DRAWING_TYPE.Mermaid
+	}
+];
+const VIEW_MODE = {
+	Both: "Both",
+	Code: "Code",
+	Image: "Image"
+};
+const VIEW_MODE_ARRAY = [
+	{
+		value: VIEW_MODE.Both,
+		label: VIEW_MODE.Both
+	},
+	{
+		value: VIEW_MODE.Code,
+		label: VIEW_MODE.Code
+	},
+	{
+		value: VIEW_MODE.Image,
+		label: VIEW_MODE.Image
+	}
+];
+const DEFAULT_MIN_HEIGHT = 300;
+const RENDER_DEBOUNCE_DELAY = 500;
+const DOWNLOAD_FILENAME = "code-drawing.png";
+
+//#endregion
+//#region src/lib/transforms/insertCodeDrawing.ts
+const insertCodeDrawing = (editor, props = {}, options = {}) => {
+	editor.tf.insertNodes({
+		children: [{ text: "" }],
+		type: editor.getType(CODE_DRAWING_KEY),
+		data: {
+			drawingType: "Mermaid",
+			drawingMode: "Both",
+			code: "",
+			...typeof props.data === "object" && props.data !== null ? props.data : {}
+		},
+		...props && typeof props === "object" ? props : {}
+	}, {
+		nextBlock: true,
+		...options && typeof options === "object" ? options : {}
+	});
+};
+
+//#endregion
+//#region src/lib/utils/download.ts
+/**
+* Download image from data URL
+*/
+function downloadImage(imageDataUrl, filename = "code-drawing.png") {
+	const imageEl = new Image();
+	imageEl.src = imageDataUrl;
+	imageEl.onload = () => {
+		const canvas = document.createElement("canvas");
+		canvas.width = imageEl.width;
+		canvas.height = imageEl.height;
+		const context = canvas.getContext("2d");
+		if (context) {
+			context.drawImage(imageEl, 0, 0);
+			const a = document.createElement("a");
+			a.href = canvas.toDataURL("image/png");
+			a.download = filename;
+			a.click();
+		}
+	};
+}
+
+//#endregion
+//#region src/lib/utils/renderers.ts
+/**
+* Generate a random string for unique IDs
+*/
+function randomString(length, type = "lowerCase") {
+	const chars = type === "lowerCase" ? "abcdefghijklmnopqrstuvwxyz" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+	let result = "";
+	for (let i = 0; i < length; i++) result += chars.charAt(Math.floor(Math.random() * chars.length));
+	return result;
+}
+/**
+* Convert SVG string to data URL
+*/
+function svgToDataUrl(svg) {
+	return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svg)))}`;
+}
+/**
+* Render PlantUml diagram
+* Uses plantuml-encoder to encode content and fetches SVG from PlantUml server
+*/
+async function renderPlantUml(content) {
+	try {
+		const svgUrl = `https://www.plantuml.com/plantuml/svg/${(await import("plantuml-encoder")).default.encode(content)}`;
+		const response = await fetch(svgUrl);
+		if (!response.ok) throw new Error("Failed to fetch PlantUml SVG");
+		return svgToDataUrl(await response.text());
+	} catch (error) {
+		console.error("PlantUml rendering error:", error);
+		throw error;
+	}
+}
+/**
+* Render Graphviz diagram
+* Uses viz.js to render Graphviz DOT syntax to SVG
+*/
+async function renderGraphviz(content) {
+	try {
+		let Viz;
+		let Module;
+		let render;
+		try {
+			const vizModule = await import("viz.js");
+			Viz = vizModule.default || vizModule;
+			const fullRender = await import("viz.js/full.render.js");
+			Module = fullRender.Module;
+			render = fullRender.render;
+		} catch (_importError) {
+			const vizModule = await import("viz.js");
+			Viz = vizModule.default || vizModule;
+			const fullRender = await import("viz.js/full.render");
+			Module = fullRender.Module;
+			render = fullRender.render;
+		}
+		return svgToDataUrl(await new Viz({
+			Module,
+			render
+		}).renderString(content, {
+			format: "svg",
+			engine: "dot"
+		}));
+	} catch (error) {
+		console.error("Graphviz rendering error:", error);
+		throw error;
+	}
+}
+/**
+* Render Flowchart diagram
+* Uses flowchart.js to parse and render flowchart syntax
+*/
+async function renderFlowchart(content) {
+	try {
+		const chart = (await import("flowchart.js")).default.parse(content);
+		const el = document.createElement("div");
+		el.style.display = "none";
+		document.body.appendChild(el);
+		chart.drawSVG(el);
+		const svg = el.innerHTML;
+		document.body.removeChild(el);
+		return svgToDataUrl(svg);
+	} catch (error) {
+		console.error("Flowchart rendering error:", error);
+		throw error;
+	}
+}
+/**
+* Render Mermaid diagram
+* Uses mermaid to render Mermaid syntax
+*/
+let mermaidInitialized = false;
+async function renderMermaid(content) {
+	try {
+		const mermaid = await import("mermaid");
+		if (!mermaidInitialized) {
+			mermaid.default.initialize({ startOnLoad: false });
+			mermaidInitialized = true;
+		}
+		const id = `mermaid-${randomString(6, "lowerCase")}`;
+		const { svg } = await mermaid.default.render(id, content);
+		if (svg) return svgToDataUrl(svg);
+		throw new Error("Mermaid rendering failed");
+	} catch (error) {
+		console.error("Mermaid rendering error:", error);
+		throw error;
+	}
+}
+/**
+* Render code drawing based on type
+*/
+async function renderCodeDrawing(type, content) {
+	if (!content || !content.trim()) return "";
+	switch (type) {
+		case "PlantUml": return renderPlantUml(content);
+		case "Graphviz": return renderGraphviz(content);
+		case "Flowchart": return renderFlowchart(content);
+		case "Mermaid": return renderMermaid(content);
+		default: throw new Error(`Unsupported drawing type: ${type}`);
+	}
+}
+
+//#endregion
+export { BaseCodeDrawingPlugin, CODE_DRAWING_KEY, CODE_DRAWING_TYPE, CODE_DRAWING_TYPE_ARRAY, DEFAULT_MIN_HEIGHT, DOWNLOAD_FILENAME, RENDER_DEBOUNCE_DELAY, VIEW_MODE, VIEW_MODE_ARRAY, downloadImage, insertCodeDrawing, renderCodeDrawing, renderFlowchart, renderGraphviz, renderMermaid, renderPlantUml };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CODE_DRAWING_TYPE","PlantUml","Graphviz","Flowchart","Mermaid","const","CODE_DRAWING_TYPE_ARRAY","value","label","CodeDrawingType","VIEW_MODE","Both","Code","Image","VIEW_MODE_ARRAY","ViewMode","DEFAULT_MIN_HEIGHT","RENDER_DEBOUNCE_DELAY","DOWNLOAD_FILENAME","InsertNodesOptions","NodeProps","SlateEditor","TCodeDrawingElement","CODE_DRAWING_KEY","insertCodeDrawing","editor","props","options","tf","insertNodes","children","text","type","getType","data","drawingType","drawingMode","code","nextBlock","downloadImage","imageDataUrl","filename","imageEl","Image","src","onload","canvas","document","createElement","width","height","context","getContext","drawImage","a","href","toDataURL","download","click","CodeDrawingType","randomString","length","type","chars","result","i","charAt","Math","floor","random","svgToDataUrl","svg","window","btoa","unescape","encodeURIComponent","renderPlantUml","content","Promise","plantumlEncoder","encoded","default","encode","svgUrl","response","fetch","ok","Error","text","error","console","renderGraphviz","Viz","Module","render","vizModule","fullRender","_importError","viz","renderString","format","engine","renderFlowchart","flowchart","chart","parse","el","document","createElement","style","display","body","appendChild","drawSVG","innerHTML","removeChild","mermaidInitialized","renderMermaid","mermaid","initialize","startOnLoad","id","renderCodeDrawing","trim"],"sources":["../src/lib/constants.ts","../src/lib/transforms/insertCodeDrawing.ts","../src/lib/utils/download.ts","../src/lib/utils/renderers.ts"],"sourcesContent":["export const CODE_DRAWING_TYPE = {\n  PlantUml: 'PlantUml',\n  Graphviz: 'Graphviz',\n  Flowchart: 'Flowchart',\n  Mermaid: 'Mermaid',\n} as const;\n\nexport const CODE_DRAWING_TYPE_ARRAY = [\n  {\n    value: CODE_DRAWING_TYPE.PlantUml,\n    label: CODE_DRAWING_TYPE.PlantUml,\n  },\n  {\n    value: CODE_DRAWING_TYPE.Graphviz,\n    label: CODE_DRAWING_TYPE.Graphviz,\n  },\n  {\n    value: CODE_DRAWING_TYPE.Flowchart,\n    label: CODE_DRAWING_TYPE.Flowchart,\n  },\n  {\n    value: CODE_DRAWING_TYPE.Mermaid,\n    label: CODE_DRAWING_TYPE.Mermaid,\n  },\n] as const;\n\nexport type CodeDrawingType =\n  (typeof CODE_DRAWING_TYPE)[keyof typeof CODE_DRAWING_TYPE];\n\n// View mode constants\nexport const VIEW_MODE = {\n  Both: 'Both',\n  Code: 'Code',\n  Image: 'Image',\n} as const;\n\nexport const VIEW_MODE_ARRAY = [\n  {\n    value: VIEW_MODE.Both,\n    label: VIEW_MODE.Both,\n  },\n  {\n    value: VIEW_MODE.Code,\n    label: VIEW_MODE.Code,\n  },\n  {\n    value: VIEW_MODE.Image,\n    label: VIEW_MODE.Image,\n  },\n] as const;\n\nexport type ViewMode = (typeof VIEW_MODE)[keyof typeof VIEW_MODE];\n\n// UI constants\nexport const DEFAULT_MIN_HEIGHT = 300;\nexport const RENDER_DEBOUNCE_DELAY = 500;\nexport const DOWNLOAD_FILENAME = 'code-drawing.png';\n","import type { InsertNodesOptions, NodeProps, SlateEditor } from 'platejs';\n\nimport type { TCodeDrawingElement } from '../BaseCodeDrawingPlugin';\nimport { CODE_DRAWING_KEY } from '../BaseCodeDrawingPlugin';\n\nexport const insertCodeDrawing = (\n  editor: SlateEditor,\n  props: NodeProps<TCodeDrawingElement> = {},\n  options: InsertNodesOptions = {}\n): void => {\n  editor.tf.insertNodes<TCodeDrawingElement>(\n    {\n      children: [{ text: '' }],\n      type: editor.getType(CODE_DRAWING_KEY),\n      data: {\n        drawingType: 'Mermaid',\n        drawingMode: 'Both',\n        code: '',\n        ...(typeof props.data === 'object' && props.data !== null\n          ? props.data\n          : {}),\n      },\n      ...(props && typeof props === 'object' ? props : {}),\n    },\n    {\n      nextBlock: true,\n      ...(options && typeof options === 'object' ? options : {}),\n    }\n  );\n};\n","/**\n * Download image from data URL\n */\nexport function downloadImage(\n  imageDataUrl: string,\n  filename = 'code-drawing.png'\n): void {\n  const imageEl = new Image();\n  imageEl.src = imageDataUrl;\n  imageEl.onload = () => {\n    const canvas = document.createElement('canvas');\n    canvas.width = imageEl.width;\n    canvas.height = imageEl.height;\n    const context = canvas.getContext('2d');\n    if (context) {\n      context.drawImage(imageEl, 0, 0);\n      const a = document.createElement('a');\n      a.href = canvas.toDataURL('image/png');\n      a.download = filename;\n      a.click();\n    }\n  };\n}\n","import type { CodeDrawingType } from '../constants';\n\n/**\n * Generate a random string for unique IDs\n */\nfunction randomString(\n  length: number,\n  type: 'lowerCase' | 'upperCase' = 'lowerCase'\n): string {\n  const chars =\n    type === 'lowerCase'\n      ? 'abcdefghijklmnopqrstuvwxyz'\n      : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n  let result = '';\n  for (let i = 0; i < length; i++) {\n    result += chars.charAt(Math.floor(Math.random() * chars.length));\n  }\n  return result;\n}\n\n/**\n * Convert SVG string to data URL\n */\nfunction svgToDataUrl(svg: string): string {\n  return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svg)))}`;\n}\n\n/**\n * Render PlantUml diagram\n * Uses plantuml-encoder to encode content and fetches SVG from PlantUml server\n */\nexport async function renderPlantUml(content: string): Promise<string> {\n  try {\n    // Dynamic import of plantuml-encoder\n    const plantumlEncoder = await import('plantuml-encoder');\n    const encoded = plantumlEncoder.default.encode(content);\n    const svgUrl = `https://www.plantuml.com/plantuml/svg/${encoded}`;\n\n    // Fetch SVG\n    const response = await fetch(svgUrl);\n    if (!response.ok) {\n      throw new Error('Failed to fetch PlantUml SVG');\n    }\n    const svg = await response.text();\n    return svgToDataUrl(svg);\n  } catch (error) {\n    console.error('PlantUml rendering error:', error);\n    throw error;\n  }\n}\n\n/**\n * Render Graphviz diagram\n * Uses viz.js to render Graphviz DOT syntax to SVG\n */\nexport async function renderGraphviz(content: string): Promise<string> {\n  try {\n    // Dynamic import of viz.js\n    // Try different import patterns for compatibility\n    let Viz: any;\n    let Module: any;\n    let render: any;\n\n    try {\n      const vizModule = await import('viz.js');\n      Viz = vizModule.default || vizModule;\n\n      const fullRender = await import('viz.js/full.render.js');\n      Module = fullRender.Module;\n      render = fullRender.render;\n    } catch (_importError) {\n      // Fallback: try alternative import\n      const vizModule = await import('viz.js');\n      Viz = vizModule.default || vizModule;\n      const fullRender = await import('viz.js/full.render');\n      Module = fullRender.Module;\n      render = fullRender.render;\n    }\n\n    const viz = new Viz({ Module, render });\n    const svg = await viz.renderString(content, {\n      format: 'svg',\n      engine: 'dot',\n    });\n\n    return svgToDataUrl(svg);\n  } catch (error) {\n    console.error('Graphviz rendering error:', error);\n    throw error;\n  }\n}\n\n/**\n * Render Flowchart diagram\n * Uses flowchart.js to parse and render flowchart syntax\n */\nexport async function renderFlowchart(content: string): Promise<string> {\n  try {\n    // Dynamic import of flowchart.js\n    const flowchart = (await import('flowchart.js')).default;\n\n    const chart = flowchart.parse(content);\n    const el = document.createElement('div');\n    el.style.display = 'none';\n    document.body.appendChild(el);\n\n    chart.drawSVG(el);\n    const svg = el.innerHTML;\n    document.body.removeChild(el);\n\n    return svgToDataUrl(svg);\n  } catch (error) {\n    console.error('Flowchart rendering error:', error);\n    throw error;\n  }\n}\n\n/**\n * Render Mermaid diagram\n * Uses mermaid to render Mermaid syntax\n */\nlet mermaidInitialized = false;\n\nexport async function renderMermaid(content: string): Promise<string> {\n  try {\n    // Dynamic import of mermaid\n    const mermaid = await import('mermaid');\n\n    if (!mermaidInitialized) {\n      mermaid.default.initialize({ startOnLoad: false });\n      mermaidInitialized = true;\n    }\n\n    const id = `mermaid-${randomString(6, 'lowerCase')}`;\n    const { svg } = await mermaid.default.render(id, content);\n\n    if (svg) {\n      return svgToDataUrl(svg);\n    }\n\n    throw new Error('Mermaid rendering failed');\n  } catch (error) {\n    console.error('Mermaid rendering error:', error);\n    throw error;\n  }\n}\n\n/**\n * Render code drawing based on type\n */\nexport async function renderCodeDrawing(\n  type: CodeDrawingType,\n  content: string\n): Promise<string> {\n  if (!content || !content.trim()) {\n    return '';\n  }\n\n  switch (type) {\n    case 'PlantUml':\n      return renderPlantUml(content);\n    case 'Graphviz':\n      return renderGraphviz(content);\n    case 'Flowchart':\n      return renderFlowchart(content);\n    case 'Mermaid':\n      return renderMermaid(content);\n    default:\n      throw new Error(`Unsupported drawing type: ${type}`);\n  }\n}\n"],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+//#region src/react/CodeDrawingPlugin.d.ts
+declare const CodeDrawingPlugin: any;
+//#endregion
+export { CodeDrawingPlugin };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/react/CodeDrawingPlugin.tsx"],"sourcesContent":[],"mappings":";cAIa"}

package/dist/react/index.js

@@ -0,0 +1,9 @@
+import { t as BaseCodeDrawingPlugin } from "../BaseCodeDrawingPlugin-BTeDVejh.js";
+import { toPlatePlugin } from "platejs/react";
+
+//#region src/react/CodeDrawingPlugin.tsx
+const CodeDrawingPlugin = toPlatePlugin(BaseCodeDrawingPlugin);
+
+//#endregion
+export { CodeDrawingPlugin };
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["toPlatePlugin","BaseCodeDrawingPlugin","CodeDrawingPlugin"],"sources":["../../src/react/CodeDrawingPlugin.tsx"],"sourcesContent":["import { toPlatePlugin } from 'platejs/react';\n\nimport { BaseCodeDrawingPlugin } from '../lib';\n\nexport const CodeDrawingPlugin = toPlatePlugin(BaseCodeDrawingPlugin);\n"],"mappings":";;;;AAIA,MAAaE,oBAAoBF,cAAcC,sBAAsB"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@lofcz/platejs-code-drawing",
+  "version": "52.3.0",
+  "description": "Code drawing plugin for Plate (PlantUml, Graphviz, Flowchart, Mermaid)",
+  "keywords": [
+    "plate",
+    "plugin",
+    "slate",
+    "code-drawing",
+    "plantuml",
+    "graphviz",
+    "flowchart",
+    "mermaid"
+  ],
+  "homepage": "https://platejs.org",
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lofcz/plate.git",
+    "directory": "packages/code-drawing"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./react": "./dist/react/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "dependencies": {
+    "@codemirror/lang-javascript": "6.2.4",
+    "@codemirror/theme-one-dark": "6.1.3",
+    "@uiw/react-codemirror": "4.25.4",
+    "flowchart.js": "^1.15.0",
+    "lodash": "^4.17.21",
+    "mermaid": "^11.6.1",
+    "plantuml-encoder": "^1.4.0",
+    "react-compiler-runtime": "^1.0.0",
+    "viz.js": "^2.1.2",
+    "@platejs/utils": "npm:@lofcz/platejs-utils@52.3.4"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.13",
+    "@types/plantuml-encoder": "^1.4.2",
+    "@types/viz.js": "^2.1.5",
+    "@plate/scripts": "1.0.0"
+  },
+  "peerDependencies": {
+    "platejs": ">=52.0.11",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "module": "./dist/index.js",
+  "scripts": {
+    "brl": "plate-pkg p:brl",
+    "build": "plate-pkg p:build",
+    "build:watch": "plate-pkg p:build:watch",
+    "clean": "plate-pkg p:clean",
+    "lint": "plate-pkg p:lint",
+    "lint:fix": "plate-pkg p:lint:fix",
+    "test": "plate-pkg p:test",
+    "test:watch": "plate-pkg p:test:watch",
+    "typecheck": "plate-pkg p:typecheck"
+  }
+}