@examind/block-sdk 0.1.13 → 0.1.14

package/dist/index.js

@@ -261,14 +261,38 @@ var isSerializedImageNode = (node) => {
 
 // src/exportToHtml/ImageNodeHandler.ts
 var ImageNodeHandler = class extends NodeHandler {
-  processNode(node) {
-    if (!isSerializedImageNode(node)) return null;
+  srcAttribute(node) {
+    return `src="${node.src}"`;
+  }
+  altAttribute(node) {
+    return node.altText ? `alt="${node.altText}"` : null;
+  }
+  styleAttribute(node) {
+    const styleProps = [];
+    if (node.width) {
+      styleProps.push(`width: ${node.width};`);
+      styleProps.push(`max-width: 100%;`);
+    }
+    if (node.showBorder) {
+      styleProps.push(`border: 1px solid #ccc;`);
+    }
+    return styleProps.length ? `style="${styleProps.join(" ")}"` : null;
+  }
+  alignAttribute(node) {
+    return node.align !== "left" ? `align="${node.align}"` : null;
+  }
+  attributes(node) {
     const attributes = [
-      `src="${node.src}"`,
-      node.altText ? `alt="${node.altText}"` : null,
-      node.width ? `width="${node.width}"` : null,
-      node.align !== "left" ? `align="${node.align}"` : null
+      this.srcAttribute(node),
+      this.altAttribute(node),
+      this.styleAttribute(node),
+      this.alignAttribute(node)
     ].filter(Boolean).join(" ");
+    return attributes;
+  }
+  processNode(node) {
+    if (!isSerializedImageNode(node)) return null;
+    const attributes = this.attributes(node);
     return `<img ${attributes} />`;
   }
 };
@@ -1312,20 +1336,32 @@ var HorizontalRuleNodeHandler2 = class extends NodeHandler2 {
 var import_node_html_parser9 = require("node-html-parser");
 var TAG_IMG = "img";
 var ImageNodeHandler2 = class extends NodeHandler2 {
+  extractWidth(element) {
+    const style = element.getAttribute("style");
+    if (style) {
+      const widthMatch = style.match(/width:\s*([^;]+);?/i);
+      if (widthMatch && widthMatch[1]) {
+        return widthMatch[1].trim();
+      }
+    }
+    const width = element.getAttribute("width");
+    return width ? `${width}px` : "";
+  }
+  hasBorder(element) {
+    const style = element.getAttribute("style");
+    if (!style) return false;
+    return /border\s*:/i.test(style);
+  }
   processNode(node) {
     if (!(node instanceof import_node_html_parser9.HTMLElement) || node.tagName !== TAG_IMG.toUpperCase()) {
       return null;
     }
-    const src = node.getAttribute("src") || "";
-    const altText = node.getAttribute("alt") || "";
-    const width = node.getAttribute("width") || "";
-    const align = node.getAttribute("align") || "left";
     const imageNode = {
-      src,
-      altText,
-      width,
-      align,
-      showBorder: false,
+      src: node.getAttribute("src") || "",
+      altText: node.getAttribute("alt") || "",
+      width: this.extractWidth(node),
+      align: node.getAttribute("align") || "left",
+      showBorder: this.hasBorder(node),
       showCaption: false,
       caption: {
         editorState: {

package/dist/index.mjs

@@ -234,14 +234,38 @@ var isSerializedImageNode = (node) => {
 
 // src/exportToHtml/ImageNodeHandler.ts
 var ImageNodeHandler = class extends NodeHandler {
-  processNode(node) {
-    if (!isSerializedImageNode(node)) return null;
+  srcAttribute(node) {
+    return `src="${node.src}"`;
+  }
+  altAttribute(node) {
+    return node.altText ? `alt="${node.altText}"` : null;
+  }
+  styleAttribute(node) {
+    const styleProps = [];
+    if (node.width) {
+      styleProps.push(`width: ${node.width};`);
+      styleProps.push(`max-width: 100%;`);
+    }
+    if (node.showBorder) {
+      styleProps.push(`border: 1px solid #ccc;`);
+    }
+    return styleProps.length ? `style="${styleProps.join(" ")}"` : null;
+  }
+  alignAttribute(node) {
+    return node.align !== "left" ? `align="${node.align}"` : null;
+  }
+  attributes(node) {
     const attributes = [
-      `src="${node.src}"`,
-      node.altText ? `alt="${node.altText}"` : null,
-      node.width ? `width="${node.width}"` : null,
-      node.align !== "left" ? `align="${node.align}"` : null
+      this.srcAttribute(node),
+      this.altAttribute(node),
+      this.styleAttribute(node),
+      this.alignAttribute(node)
     ].filter(Boolean).join(" ");
+    return attributes;
+  }
+  processNode(node) {
+    if (!isSerializedImageNode(node)) return null;
+    const attributes = this.attributes(node);
     return `<img ${attributes} />`;
   }
 };
@@ -1285,20 +1309,32 @@ var HorizontalRuleNodeHandler2 = class extends NodeHandler2 {
 import { HTMLElement as HTMLElement9 } from "node-html-parser";
 var TAG_IMG = "img";
 var ImageNodeHandler2 = class extends NodeHandler2 {
+  extractWidth(element) {
+    const style = element.getAttribute("style");
+    if (style) {
+      const widthMatch = style.match(/width:\s*([^;]+);?/i);
+      if (widthMatch && widthMatch[1]) {
+        return widthMatch[1].trim();
+      }
+    }
+    const width = element.getAttribute("width");
+    return width ? `${width}px` : "";
+  }
+  hasBorder(element) {
+    const style = element.getAttribute("style");
+    if (!style) return false;
+    return /border\s*:/i.test(style);
+  }
   processNode(node) {
     if (!(node instanceof HTMLElement9) || node.tagName !== TAG_IMG.toUpperCase()) {
       return null;
     }
-    const src = node.getAttribute("src") || "";
-    const altText = node.getAttribute("alt") || "";
-    const width = node.getAttribute("width") || "";
-    const align = node.getAttribute("align") || "left";
     const imageNode = {
-      src,
-      altText,
-      width,
-      align,
-      showBorder: false,
+      src: node.getAttribute("src") || "",
+      altText: node.getAttribute("alt") || "",
+      width: this.extractWidth(node),
+      align: node.getAttribute("align") || "left",
+      showBorder: this.hasBorder(node),
       showCaption: false,
       caption: {
         editorState: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examind/block-sdk",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "@comment version": [
     "Don't specify package version here. It will be injected by publish workflow."
   ],