@qarakash/blockwriteai 1.0.7 → 1.0.9

package/README.md

@@ -15,8 +15,8 @@ All public assets, package entry points, and browser globals use the `BlockWrite
 - Multi-image upload, drag and drop, resize, crop, rotate, and gallery layout.
 - Attachment blocks for documents and videos.
 - Code block with formatting, syntax help, language detection, and suggestions.
-- Mermaid-style drawing designer with shapes, arrows, images, text formatting, ruler, workspace resizing, and preview/export support.
-- Charts, LaTeX, audio, drawing, layout columns, signature, signature flow, AI writing, and optional history plugins.
+- Charts, LaTeX, audio, layout columns, code assistance, and optional history plugins in the free plugin set.
+- Premium plugins for Drawing, Mermaid, Signature, Signature Flow, and AI writing, delivered after server-side license verification.
 - Undo, redo, autosave, block actions, drag reordering, and optional JSON save/export buttons.
 - JSON-powered preview mounting for public document pages.
 - JSON save API examples for future database storage.
@@ -65,49 +65,51 @@ BlockWriteAI can be consumed as a CDN/script-link package, an npm package, a Pyt
 
 ### Script Link
 
-Use the GitHub CDN link directly from the current main build:
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/blockwriteai.css">
-
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/blockwriteai.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-code-assist.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-advanced-blocks.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-ai.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-signature.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-signature-flow.js"></script>
+Use the npm CDN for a locked release build:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.css">
+
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-code-assist.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-advanced-blocks.js"></script>
 ```
 
-`blockwriteai-advanced-blocks.js` is kept as the compatibility bundle. New
-licensed delivery can load Drawing and Mermaid separately:
+`blockwriteai-advanced-blocks.js` is the free advanced bundle. It includes Chart,
+LaTeX, Audio, and Columns/Layout. Drawing, Mermaid, Signature, Signature Flow,
+and AI are premium plugins and should not be loaded directly in production.
+
+Load History only when a project needs the history dropdown:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-drawing.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-mermaid.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-history.js"></script>
 ```
 
-Load History only when a project needs the history dropdown:
-
-```html
-<script src="https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/plugins/blockwriteai-history.js"></script>
-```
+For development against the current GitHub branch, replace the npm URLs with the
+GitHub CDN form:
 
-For locked production builds, replace `@main` with a release tag after publishing.
+```html
+https://cdn.jsdelivr.net/gh/qarAkash/BlockWriteAI@main/dist/...
+```
 
 ### Premium License Gating
 
 Drawing, Mermaid drawing, Signature, Signature Flow, and AI can be licensed through
 the BlockWriteAI Platform. Normal editor blocks continue to work without a license.
-Premium tools are shown as locked until the license endpoint returns an active trial
-or subscription.
+Premium plugin scripts are delivered only after the license endpoint returns an
+active trial or subscription. Without a valid license, those tools are not
+registered and do not appear in the insert-block menu.
 
 ```js
 const editor = new BlockWriteAI({
   holder: "#editor",
-  licenseKey: "bwai_live_xxxxx",
   premium: {
+    licenseKey: "bwai_live_xxxxx",
     verifyEndpoint: "http://localhost/blockwriteai-platform/api/license_verify.php",
-    usageEndpoint: "http://localhost/blockwriteai-platform/api/ai_usage.php"
+    pluginEndpoint: "http://localhost/blockwriteai-platform/api/premium_plugins.php",
+    usageEndpoint: "http://localhost/blockwriteai-platform/api/ai_usage.php",
+    autoLoadPlugins: true,
+    features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
   },
   ai: {
     endpoint: "/api/ai.php"
@@ -127,19 +129,20 @@ The verify endpoint must return a `features` object with these keys when enabled
 }
 ```
 
-The AI plugin calls `premium.usageEndpoint` before each AI request so the platform
-can enforce the 7-day trial and daily prompt limits.
+The AI plugin calls `premium.usageEndpoint` before each AI request so the
+platform can enforce the 7-day trial and daily prompt limits.
 
-For stronger production security, do not load premium plugin files directly from a
-public CDN. Load the free core first, request the premium plugins from your
+For stronger production security, do not load premium plugin files directly from
+a public CDN. Load the free core first, request the premium plugins from your
 BlockWriteAI Platform, and create the editor only after the server has verified
 the license. The platform serves Drawing, Mermaid, Signature, Signature Flow,
-and AI as separate plugin files after checking the requested feature flags:
+and AI as a verified bundle after checking the requested feature flags:
 
 ```html
-<link rel="stylesheet" href="/BlockWriteAI/dist/blockwriteai.css">
-<script src="/BlockWriteAI/dist/blockwriteai.js"></script>
-<script src="/BlockWriteAI/dist/plugins/blockwriteai-code-assist.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.css">
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-code-assist.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-advanced-blocks.js"></script>
 <script>
   async function boot() {
     await BlockWriteAI.loadPremiumPlugins({
@@ -150,8 +153,8 @@ and AI as separate plugin files after checking the requested feature flags:
 
     window.editor = new BlockWriteAI({
       holder: "#editor",
-      licenseKey: "bwai_live_xxxxx",
       premium: {
+        licenseKey: "bwai_live_xxxxx",
         verifyEndpoint: "http://localhost/blockwriteai-platform/api/license_verify.php",
         usageEndpoint: "http://localhost/blockwriteai-platform/api/ai_usage.php"
       }
@@ -182,22 +185,19 @@ npm install @qarakash/blockwriteai
 Bundler entry points:
 
 ```js
-import BlockWriteAI from "@qarakash/blockwriteai";
-import "@qarakash/blockwriteai/css";
-import "@qarakash/blockwriteai/plugins/code-assist";
-import "@qarakash/blockwriteai/plugins/advanced";
-import "@qarakash/blockwriteai/plugins/ai";
-import "@qarakash/blockwriteai/plugins/history";
-import "@qarakash/blockwriteai/plugins/signature";
-import "@qarakash/blockwriteai/plugins/signature-flow";
-```
-
-After npm publishing, the same package is also available through npm CDNs:
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.7/dist/blockwriteai.css">
-<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.7/dist/blockwriteai.js"></script>
-```
+import BlockWriteAI from "@qarakash/blockwriteai";
+import "@qarakash/blockwriteai/css";
+import "@qarakash/blockwriteai/plugins/code-assist";
+import "@qarakash/blockwriteai/plugins/advanced";
+import "@qarakash/blockwriteai/plugins/history";
+```
+
+After npm publishing, the same package is also available through npm CDNs:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.css">
+<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.js"></script>
+```
 
 ### Python
 
@@ -221,16 +221,21 @@ from blockwriteai_editor import copy_static
 copy_static("static/blockwriteai")
 ```
 
-Python helpers are also available for generating asset tags. Pass `history=True` only on pages where you want the optional History dropdown:
-
-```python
-from blockwriteai_editor import stylesheet_tag, script_tags
-
-print(stylesheet_tag("/static/blockwriteai"))
-print(script_tags("/static/blockwriteai"))
-print(script_tags("/static/blockwriteai", history=True))
-print(script_tags("/static/blockwriteai", ai=True))
-```
+Python helpers are also available for generating asset tags. `script_tags()` loads
+only core/free plugins by default. Pass `history=True` only on pages where you want
+the optional History dropdown:
+
+```python
+from blockwriteai_editor import premium_script_tags, stylesheet_tag, script_tags
+
+print(stylesheet_tag("/static/blockwriteai"))
+print(script_tags("/static/blockwriteai"))
+print(script_tags("/static/blockwriteai", history=True))
+
+# Only for private/licensed deployments. Public apps should prefer the platform
+# premium bundle endpoint shown in the Premium License Gating section.
+print(premium_script_tags("/static/blockwriteai", ["signature", "ai"]))
+```
 
 ### PHP / Composer
 
@@ -252,15 +257,20 @@ Publish assets into your public folder:
 cp -R vendor/qarakash/blockwriteai/dist public/blockwriteai
 ```
 
-PHP helper. Pass `history: true` only on pages where you want the optional History dropdown, and `ai: true` only on pages where you want the AI drawer:
-
-```php
-use QarAkash\BlockWriteAI\BlockWriteAIAssets;
-
-echo BlockWriteAIAssets::stylesheetTag('/blockwriteai');
-echo BlockWriteAIAssets::scriptTags('/blockwriteai');
-echo BlockWriteAIAssets::scriptTags('/blockwriteai', plugins: true, history: true, ai: true);
-```
+PHP helper. `scriptTags()` loads only core/free plugins by default. Pass
+`history: true` only on pages where you want the optional History dropdown:
+
+```php
+use QarAkash\BlockWriteAI\BlockWriteAIAssets;
+
+echo BlockWriteAIAssets::stylesheetTag('/blockwriteai');
+echo BlockWriteAIAssets::scriptTags('/blockwriteai');
+echo BlockWriteAIAssets::scriptTags('/blockwriteai', plugins: true, history: true);
+
+// Only for private/licensed deployments. Public apps should prefer the platform
+// premium bundle endpoint shown in the Premium License Gating section.
+echo BlockWriteAIAssets::premiumScriptTags('/blockwriteai', ['signature', 'ai']);
+```
 
 ## Local XAMPP Demo
 
@@ -283,40 +293,38 @@ http://localhost/BlockWriteAI/examples/
 
 <div id="editor"></div>
 
-<script src="/BlockWriteAI/dist/blockwriteai.js"></script>
-<script src="/BlockWriteAI/dist/plugins/blockwriteai-code-assist.js"></script>
-<script src="/BlockWriteAI/dist/plugins/blockwriteai-advanced-blocks.js"></script>
-<script src="/BlockWriteAI/dist/plugins/blockwriteai-signature.js"></script>
-<script src="/BlockWriteAI/dist/plugins/blockwriteai-signature-flow.js"></script>
-
-<script>
+<script src="/BlockWriteAI/dist/blockwriteai.js"></script>
+<script src="/BlockWriteAI/dist/plugins/blockwriteai-code-assist.js"></script>
+<script src="/BlockWriteAI/dist/plugins/blockwriteai-advanced-blocks.js"></script>
+
+<script>
 const editor = new BlockWriteAI({
   holder: "#editor",
   maxWidth: "960px", // optional; omit for full-width editor shell
   placeholder: "Write something, or press / for blocks",
-    data: {
-      blocks: [
-        {
-          type: "paragraph",
-          data: {
-            text: "Hello from BlockWriteAI",
-            alignment: "left"
-          }
-        }
-      ]
-    },
-    onChange(data) {
-      console.log("Changed document", data);
-    },
-    async onSave(data) {
-      await fetch("/save-document.php", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(data)
-      });
-    }
+  data: {
+    blocks: [
+      {
+        type: "paragraph",
+        data: {
+          text: "Hello from BlockWriteAI",
+          alignment: "left"
+        }
+      }
+    ]
+  },
+  onChange(data) {
+    console.log("Changed document", data);
+  },
+  async onSave(data) {
+    await fetch("/save-document.php", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(data)
+    });
+  }
 });
 </script>
 ```
@@ -364,23 +372,38 @@ const editor = new BlockWriteAI({
 });
 ```
 
-## AI Plugin
-
-Load the optional AI plugin only on pages where you want writing assistance. The browser plugin never receives your OpenAI API key; it calls your own server endpoint.
-
-```html
-<script src="/blockwriteai/blockwriteai.js"></script>
-<script src="/blockwriteai/plugins/blockwriteai-ai.js"></script>
-
-<script>
-  const editor = new BlockWriteAI({
-    holder: "#editor",
-    ai: {
-      endpoint: "/api/blockwriteai-ai.php"
-    }
-  });
-</script>
-```
+## AI Plugin
+
+AI is a premium plugin. Load it through the platform premium bundle after license
+verification. The browser plugin never receives your OpenAI API key; it calls
+your own server endpoint.
+
+```html
+<script src="/blockwriteai/blockwriteai.js"></script>
+
+<script>
+  async function boot() {
+    await BlockWriteAI.loadPremiumPlugins({
+      licenseKey: "bwai_live_xxxxx",
+      endpoint: "/blockwriteai-platform/api/premium_plugins.php",
+      features: ["ai"]
+    });
+
+    window.editor = new BlockWriteAI({
+      holder: "#editor",
+      premium: {
+        licenseKey: "bwai_live_xxxxx",
+        verifyEndpoint: "/blockwriteai-platform/api/license_verify.php",
+        usageEndpoint: "/blockwriteai-platform/api/ai_usage.php"
+      },
+      ai: {
+        endpoint: "/api/blockwriteai-ai.php"
+      }
+    });
+  }
+  boot();
+</script>
+```
 
 The included demo endpoint is `examples/api/ai.php`. For local development, copy `examples/api/openai.local.example.php` to `examples/api/openai.local.php` and add a development key, or set `OPENAI_API_KEY` in the server environment. Do not expose the key in browser JavaScript.
 
@@ -404,14 +427,27 @@ Create any page in your application and add a preview container. BlockWriteAI wi
 
 <div class="blockwriteai-preview" data-source="/documents/123.json"></div>
 
-<script src="/blockwriteai/blockwriteai.js"></script>
-<script src="/blockwriteai/plugins/blockwriteai-advanced-blocks.js"></script>
-<script src="/blockwriteai/plugins/blockwriteai-signature.js"></script>
-<script src="/blockwriteai/plugins/blockwriteai-signature-flow.js"></script>
-<script>
-  BlockWriteAI.mountPreviews();
-</script>
-```
+<script src="/blockwriteai/blockwriteai.js"></script>
+<script src="/blockwriteai/plugins/blockwriteai-advanced-blocks.js"></script>
+<script>
+  BlockWriteAI.mountPreviews();
+</script>
+```
+
+If the preview page must render premium blocks, load the licensed premium bundle
+before `BlockWriteAI.mountPreviews()`:
+
+```js
+async function mountDocumentPreview() {
+  await BlockWriteAI.loadPremiumPlugins({
+    licenseKey: "bwai_live_xxxxx",
+    endpoint: "/blockwriteai-platform/api/premium_plugins.php",
+    features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
+  });
+  BlockWriteAI.mountPreviews();
+}
+mountDocumentPreview();
+```
 
 The JSON endpoint can return either a BlockWriteAI document directly or an API wrapper such as:
 
@@ -420,7 +456,7 @@ The JSON endpoint can return either a BlockWriteAI document directly or an API w
   "ok": true,
   "data": {
     "time": 1779540000000,
-    "version": "1.0.7",
+    "version": "1.0.9",
     "blocks": []
   }
 }
@@ -524,7 +560,7 @@ BlockWriteAI.mountPreviews(); // Render JSON into .blockwriteai-preview containe
 ```json
 {
   "time": 1779540000000,
-  "version": "1.0.7",
+  "version": "1.0.9",
   "blocks": [
     {
       "id": "block-title",
@@ -614,8 +650,8 @@ After a release is ready, publish each package from the repository root.
 Create a Git release tag for script-link/CDN users:
 
 ```bash
-git tag v1.0.7
-git push origin v1.0.7
+git tag v1.0.9
+git push origin v1.0.9
 ```
 
 Publish npm:

package/dist/blockwriteai.js

@@ -13,7 +13,7 @@
 })(typeof window !== "undefined" ? window : this, function () {
   "use strict";
 
-  var VERSION = "1.0.7";
+  var VERSION = "1.0.9";
   var HISTORY_LIMIT = 80;
   var BLOCK_TYPES = [
     "paragraph",

package/dist/plugins/blockwriteai-advanced-blocks.js

@@ -1,6 +1,6 @@
 /*!
  * BlockWriteAI Advanced Blocks Plugin
- * Adds chart, Mermaid, LaTeX, audio, drawing, and columns/layout blocks.
+ * Adds chart, LaTeX, audio, and columns/layout blocks.
  */
 (function (global) {
   "use strict";
@@ -2017,63 +2017,6 @@
     }
   });
 
-  BlockWriteAI.registerTool("mermaid", {
-    label: "Mermaid",
-    hint: "Visual diagrams and flowcharts",
-    icon: "diagram-project",
-    premiumFeature: "mermaid",
-    defaultData: { code: "", alignment: "center", openOnInsert: true, diagram: { elements: [], workspace: defaultMermaidWorkspace() } },
-    render: function (body, data) {
-      injectStyles();
-      var editor = this;
-      var wrap = el("div", "rbe-plugin-card rbe-mermaid-block rbe-mermaid-card");
-      wrap.tabIndex = 0;
-      var alignment = data.alignment === "left" || data.alignment === "right" ? data.alignment : "center";
-      var workspace = normalizeDiagramWorkspace(data);
-      wrap.innerHTML =
-        '<input type="hidden" class="rbe-mermaid-alignment" value="' + esc(alignment) + '">' +
-        '<input type="hidden" class="rbe-mermaid-diagram-json">' +
-        '<textarea class="rbe-mermaid-code" hidden></textarea>' +
-        '<input class="rbe-mermaid-workspace-w" type="hidden" value="' + esc(workspace.width) + '">' +
-        '<input class="rbe-mermaid-workspace-h" type="hidden" value="' + esc(workspace.height) + '">' +
-        '<input class="rbe-mermaid-zoom" type="hidden" value="' + esc(workspace.zoom) + '">' +
-        '<div class="rbe-mermaid-card-head"><span class="rbe-mermaid-card-title">Mermaid drawing</span><button type="button" class="rbe-mermaid-edit-btn" title="Edit drawing"' + (editor.readOnly ? " hidden" : "") + '>' + faIcon("pen-to-square", "Edit drawing") + '</button></div>' +
-        '<div class="rbe-mermaid-card-preview"></div>';
-      body.appendChild(wrap);
-      var input = wrap.querySelector(".rbe-mermaid-code");
-      input.value = data.code || "";
-      wrap.querySelector(".rbe-mermaid-diagram-json").value = JSON.stringify(diagramElements(data));
-      refreshMermaidCardPreview(wrap);
-      wrap.addEventListener("click", function (event) {
-        if (!event.target.closest(".rbe-mermaid-edit-btn")) return;
-        event.preventDefault();
-        if (!editor.readOnly) openMermaidDesignerModal(editor, wrap);
-      });
-      if (!editor.readOnly && data.openOnInsert === true) {
-        setTimeout(function () { openMermaidDesignerModal(editor, wrap); }, 80);
-      }
-    },
-    serialize: function (block) {
-      var diagram = [];
-      try {
-        diagram = JSON.parse((block.querySelector(".rbe-mermaid-diagram-json") || {}).value || "[]");
-      } catch (error) {}
-      return {
-        code: (block.querySelector(".rbe-mermaid-code") || {}).value || "",
-        alignment: (block.querySelector(".rbe-mermaid-alignment") || {}).value || "center",
-        openOnInsert: false,
-        diagram: { elements: diagram.map(normalizeDiagramElement), workspace: readWorkspaceFromBlock(block) }
-      };
-    },
-    toHTML: function (data) {
-      var alignment = data.alignment === "left" || data.alignment === "right" ? data.alignment : "center";
-      var elements = diagramElements(data);
-      return '<figure class="rbe-output-mermaid-wrap rbe-output-align-' + esc(alignment) + '"><div class="rbe-output-mermaid-diagram">' + diagramSvg(elements, "", normalizeDiagramWorkspace(data), null) + "</div></figure>";
-    },
-    toMarkdown: function (data) {
-      return "```mermaid\n" + (data.code || "") + "\n```";
-    }
-  });
 
   BlockWriteAI.registerTool("latex", {
     label: "LaTeX",
@@ -2164,129 +2107,6 @@
     }
   });
 
-  function drawingTextSvgDataUri(text, color) {
-    var safeColor = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color || "") ? color : "#2f1830";
-    var words = String(text || "Signature text").trim().split(/\s+/);
-    var lineOne = words.slice(0, Math.ceil(words.length / 2)).join(" ");
-    var lineTwo = words.slice(Math.ceil(words.length / 2)).join(" ");
-    var hasTwoLines = !!lineTwo;
-    var svg = [
-      '<svg xmlns="http://www.w3.org/2000/svg" width="900" height="320" viewBox="0 0 900 320">',
-      '<rect width="900" height="320" rx="16" fill="#ffffff"/>',
-      '<text x="450" y="' + (hasTwoLines ? "138" : "176") + '" text-anchor="middle" font-family="Mabriella, \'Brush Script MT\', \'Segoe Script\', \'Lucida Handwriting\', cursive" font-size="' + (hasTwoLines ? "104" : "118") + '" font-weight="400" fill="' + esc(safeColor) + '">' + esc(lineOne) + "</text>",
-      hasTwoLines ? '<text x="450" y="244" text-anchor="middle" font-family="Mabriella, \'Brush Script MT\', \'Segoe Script\', \'Lucida Handwriting\', cursive" font-size="104" font-weight="400" fill="' + esc(safeColor) + '">' + esc(lineTwo) + "</text>" : "",
-      "</svg>"
-    ].join("");
-    return "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
-  }
-
-  BlockWriteAI.registerTool("drawing", {
-    label: "Drawing",
-    hint: "Freehand sketch canvas",
-    icon: "pen-nib",
-    premiumFeature: "drawing",
-    defaultData: { image: "", color: "#172033", size: 4, text: "" },
-    render: function (body, data) {
-      injectStyles();
-      var editor = this;
-      var wrap = el("div", "rbe-plugin-card rbe-drawing-block");
-      wrap.dataset.initialImage = data.image || data.url || data.src || "";
-      if (!wrap.dataset.initialImage && data.text) {
-        wrap.dataset.initialImage = drawingTextSvgDataUri(data.text, data.color || "#2f1830");
-      }
-      wrap.dataset.drawingDirty = "false";
-      wrap.innerHTML = '<div class="rbe-plugin-toolbar"><label>Pen <input class="rbe-drawing-color" type="color"></label><label>Size <input class="rbe-drawing-size" type="range" min="1" max="24"></label><input class="rbe-drawing-text-input" type="text" placeholder="Type name or text"><button type="button" class="rbe-small-btn rbe-drawing-text-apply" title="Convert text to Mabriella style" aria-label="Convert text to Mabriella style">' + faIcon("wand-magic-sparkles", "Convert text") + '</button><button type="button" class="rbe-small-btn rbe-drawing-clear">' + faIcon("eraser", "Clear drawing") + '</button></div><div class="rbe-drawing-shell"><canvas class="rbe-drawing-canvas" width="900" height="320"></canvas></div>';
-      body.appendChild(wrap);
-      var canvas = wrap.querySelector("canvas");
-      var ctx = canvas.getContext("2d");
-      wrap.querySelector(".rbe-drawing-color").value = data.color || "#172033";
-      wrap.querySelector(".rbe-drawing-size").value = data.size || 4;
-      wrap.querySelector(".rbe-drawing-text-input").value = data.text || "";
-      function loadImage(source) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        if (!source) return;
-        var image = new Image();
-        image.onload = function () { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); };
-        image.src = source;
-      }
-      if (wrap.dataset.initialImage) {
-        loadImage(wrap.dataset.initialImage);
-      }
-      var drawing = false;
-      function point(event) {
-        var rect = canvas.getBoundingClientRect();
-        return { x: ((event.clientX - rect.left) / rect.width) * canvas.width, y: ((event.clientY - rect.top) / rect.height) * canvas.height };
-      }
-      canvas.addEventListener("pointerdown", function (event) {
-        drawing = true;
-        wrap.dataset.drawingDirty = "true";
-        canvas.setPointerCapture(event.pointerId);
-        var p = point(event);
-        ctx.beginPath();
-        ctx.moveTo(p.x, p.y);
-      });
-      canvas.addEventListener("pointermove", function (event) {
-        if (!drawing) return;
-        var p = point(event);
-        ctx.strokeStyle = wrap.querySelector(".rbe-drawing-color").value;
-        ctx.lineWidth = Number(wrap.querySelector(".rbe-drawing-size").value || 4);
-        ctx.lineCap = "round";
-        ctx.lineJoin = "round";
-        ctx.lineTo(p.x, p.y);
-        ctx.stroke();
-      });
-      canvas.addEventListener("pointerup", function () {
-        drawing = false;
-        editor.changed(true);
-      });
-      wrap.querySelector(".rbe-drawing-text-apply").addEventListener("click", function () {
-        var input = wrap.querySelector(".rbe-drawing-text-input");
-        var text = (input.value || "").trim();
-        if (!text) {
-          input.focus();
-          return;
-        }
-        wrap.dataset.initialImage = drawingTextSvgDataUri(text, wrap.querySelector(".rbe-drawing-color").value || "#2f1830");
-        wrap.dataset.drawingDirty = "false";
-        loadImage(wrap.dataset.initialImage);
-        editor.changed(true);
-      });
-      wrap.querySelector(".rbe-drawing-clear").addEventListener("click", function () {
-        wrap.dataset.initialImage = "";
-        wrap.dataset.drawingDirty = "true";
-        wrap.querySelector(".rbe-drawing-text-input").value = "";
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        editor.changed(true);
-      });
-    },
-    serialize: function (block) {
-      var canvas = block.querySelector(".rbe-drawing-canvas");
-      var drawingBlock = block.querySelector(".rbe-drawing-block") || block;
-      var initialImage = drawingBlock.dataset.initialImage || "";
-      if (initialImage && drawingBlock.dataset.drawingDirty !== "true") {
-        return {
-          image: initialImage,
-          color: (block.querySelector(".rbe-drawing-color") || {}).value || "#172033",
-          size: Number((block.querySelector(".rbe-drawing-size") || {}).value || 4),
-          text: (block.querySelector(".rbe-drawing-text-input") || {}).value || ""
-        };
-      }
-      return {
-        image: canvas ? canvas.toDataURL("image/png") : "",
-        color: (block.querySelector(".rbe-drawing-color") || {}).value || "#172033",
-        size: Number((block.querySelector(".rbe-drawing-size") || {}).value || 4),
-        text: (block.querySelector(".rbe-drawing-text-input") || {}).value || ""
-      };
-    },
-    toHTML: function (data) {
-      var image = data.image || data.url || data.src || (data.diagram && data.diagram.image) || "";
-      if (!image && data.text) image = drawingTextSvgDataUri(data.text, data.color || "#2f1830");
-      return image ? '<figure class="rbe-output-drawing"><img src="' + esc(image) + '" alt="Drawing"></figure>' : "";
-    },
-    toMarkdown: function () {
-      return "![Drawing](drawing.png)";
-    }
-  });
 
   BlockWriteAI.registerTool("columns", {
     label: "Columns",

package/dist/plugins/blockwriteai-ai.js

@@ -533,38 +533,70 @@
       });
   }
 
+  function ensureAIRefreshListener(editor) {
+    if (!editor || !editor.root || editor.__blockwriteaiAIRefreshBound) return;
+    editor.root.addEventListener("rbe:premium-change", refreshAIAvailability.bind(null, editor));
+    editor.__blockwriteaiAIRefreshBound = true;
+  }
+
+  function ensureTopToolbarAIButton(editor, toolbar) {
+    toolbar = toolbar || (editor && editor.topToolbar);
+    if (!editor || editor.options.ai === false || !toolbar) return toolbar;
+    injectStyles();
+    if (!toolbar.querySelector(".rbe-ai-toolbar-btn")) {
+      toolbar.appendChild(
+        el("button", "rbe-history-btn rbe-ai-toolbar-btn", {
+          type: "button",
+          title: "BlockWriteAI",
+          html: faIcon("wand-magic-sparkles", "BlockWriteAI"),
+          dataset: { aiToolbar: "true", premiumFeature: "ai", unlockedTitle: "BlockWriteAI" }
+        })
+      );
+    }
+    ensureAIRefreshListener(editor);
+    refreshAIAvailability(editor);
+    return toolbar;
+  }
+
+  function ensureInlineAIButton(editor, toolbar) {
+    toolbar = toolbar || (editor && editor.inlineToolbar);
+    if (!editor || editor.options.ai === false || !toolbar) return toolbar;
+    injectStyles();
+    if (!toolbar.querySelector(".rbe-ai-inline-btn")) {
+      toolbar.appendChild(
+        el("button", "rbe-ai-inline-btn", {
+          type: "button",
+          title: "BlockWriteAI",
+          html: faIcon("wand-magic-sparkles", "AI"),
+          dataset: { aiInline: "true", premiumFeature: "ai", unlockedTitle: "BlockWriteAI" }
+        })
+      );
+    }
+    ensureAIRefreshListener(editor);
+    refreshAIAvailability(editor);
+    return toolbar;
+  }
+
+  function hydrateExistingEditors() {
+    if (typeof document === "undefined") return;
+    Array.prototype.slice.call(document.querySelectorAll(".rbe")).forEach(function (root) {
+      var editor = root.__blockwriteaiInstance;
+      if (!editor) return;
+      ensureTopToolbarAIButton(editor);
+      ensureInlineAIButton(editor);
+    });
+  }
+
   var originalCreateTopToolbar = BlockWriteAI.prototype.createTopToolbar;
   BlockWriteAI.prototype.createTopToolbar = function () {
     var toolbar = originalCreateTopToolbar.call(this);
-    if (this.options.ai === false) return toolbar;
-    injectStyles();
-    toolbar.appendChild(
-      el("button", "rbe-history-btn rbe-ai-toolbar-btn", {
-        type: "button",
-        title: "BlockWriteAI",
-        html: faIcon("wand-magic-sparkles", "BlockWriteAI"),
-        dataset: { aiToolbar: "true", premiumFeature: "ai", unlockedTitle: "BlockWriteAI" }
-      })
-    );
-    refreshAIAvailability(this);
-    this.root.addEventListener("rbe:premium-change", refreshAIAvailability.bind(null, this));
-    return toolbar;
+    return ensureTopToolbarAIButton(this, toolbar);
   };
 
   var originalCreateInlineToolbar = BlockWriteAI.prototype.createInlineToolbar;
   BlockWriteAI.prototype.createInlineToolbar = function () {
     var toolbar = originalCreateInlineToolbar.call(this);
-    if (this.options.ai === false) return toolbar;
-    injectStyles();
-    var button = el("button", "rbe-ai-inline-btn", {
-      type: "button",
-      title: "BlockWriteAI",
-      html: faIcon("wand-magic-sparkles", "AI"),
-      dataset: { aiInline: "true", premiumFeature: "ai", unlockedTitle: "BlockWriteAI" }
-    });
-    toolbar.appendChild(button);
-    refreshAIAvailability(this);
-    return toolbar;
+    return ensureInlineAIButton(this, toolbar);
   };
 
   BlockWriteAI.prototype.openAI = function () {
@@ -633,5 +665,7 @@
     return BlockWriteAI;
   };
 
+  hydrateExistingEditors();
+
   return BlockWriteAI;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qarakash/blockwriteai",
-  "version": "1.0.7",
-  "description": "BlockWriteAI JSON-first drop-in block writing editor with media, diagrams, signatures, AI writing, optional history, and preview mounting.",
+  "version": "1.0.9",
+  "description": "BlockWriteAI JSON-first drop-in block writing editor with free core blocks, preview mounting, and license-gated premium plugins.",
   "keywords": [
     "blockwriteai",
     "editor",