@examind/block-sdk 0.1.12 → 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: {
@@ -1730,29 +1766,39 @@ var SpanNodeHandler = class extends NodeHandler2 {
     if (node.childNodes.length === 1 && node.childNodes[0] instanceof TextNode) {
       return this.createTextNode(node.text, styleAttr);
     }
-    let childResult = null;
+    const results = [];
+    const textNodes = [];
     for (const childNode of node.childNodes) {
       for (const child of traverse2(childNode)) {
-        if (child.type !== "text") continue;
-        const textNode = child;
-        if (!childResult) {
-          childResult = {
-            ...textNode,
-            style: this.mergeStyles(textNode.style, styleAttr)
-          };
+        if (child.type === "text") {
+          const textNode = child;
+          textNodes.push(textNode);
         } else {
-          childResult.text += textNode.text;
-          childResult.format |= textNode.format || 0;
-          childResult.style = this.mergeStyles(
-            childResult.style,
-            textNode.style
-          );
+          results.push(child);
         }
       }
     }
-    if (childResult) return childResult;
-    const textContent = node.text.trim();
-    return textContent ? this.createTextNode(node.text, styleAttr) : null;
+    if (textNodes.length > 0) {
+      const mergedTextNode = this.mergeTextNodes(
+        textNodes,
+        styleAttr
+      );
+      results.push(mergedTextNode);
+    } else if (node.text.trim()) {
+      results.push(this.createTextNode(node.text, styleAttr));
+    }
+    return results;
+  }
+  mergeTextNodes(textNodes, spanStyle) {
+    const result = { ...textNodes[0] };
+    result.style = this.mergeStyles(result.style, spanStyle);
+    for (let i = 1; i < textNodes.length; i++) {
+      const node = textNodes[i];
+      result.text += node.text;
+      result.format |= node.format || 0;
+      result.style = this.mergeStyles(result.style, node.style);
+    }
+    return result;
   }
   createTextNode(text, style) {
     return {

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: {
@@ -1703,29 +1739,39 @@ var SpanNodeHandler = class extends NodeHandler2 {
     if (node.childNodes.length === 1 && node.childNodes[0] instanceof TextNode) {
       return this.createTextNode(node.text, styleAttr);
     }
-    let childResult = null;
+    const results = [];
+    const textNodes = [];
     for (const childNode of node.childNodes) {
       for (const child of traverse2(childNode)) {
-        if (child.type !== "text") continue;
-        const textNode = child;
-        if (!childResult) {
-          childResult = {
-            ...textNode,
-            style: this.mergeStyles(textNode.style, styleAttr)
-          };
+        if (child.type === "text") {
+          const textNode = child;
+          textNodes.push(textNode);
         } else {
-          childResult.text += textNode.text;
-          childResult.format |= textNode.format || 0;
-          childResult.style = this.mergeStyles(
-            childResult.style,
-            textNode.style
-          );
+          results.push(child);
         }
       }
     }
-    if (childResult) return childResult;
-    const textContent = node.text.trim();
-    return textContent ? this.createTextNode(node.text, styleAttr) : null;
+    if (textNodes.length > 0) {
+      const mergedTextNode = this.mergeTextNodes(
+        textNodes,
+        styleAttr
+      );
+      results.push(mergedTextNode);
+    } else if (node.text.trim()) {
+      results.push(this.createTextNode(node.text, styleAttr));
+    }
+    return results;
+  }
+  mergeTextNodes(textNodes, spanStyle) {
+    const result = { ...textNodes[0] };
+    result.style = this.mergeStyles(result.style, spanStyle);
+    for (let i = 1; i < textNodes.length; i++) {
+      const node = textNodes[i];
+      result.text += node.text;
+      result.format |= node.format || 0;
+      result.style = this.mergeStyles(result.style, node.style);
+    }
+    return result;
   }
   createTextNode(text, style) {
     return {

package/package.json

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