@examind/block-sdk 0.1.19 → 0.1.20

package/dist/index.js

@@ -254,6 +254,10 @@ var HorizontalRuleNodeHandler = class extends NodeHandler {
   }
 };
 
+// src/config/constants.ts
+var IMAGE_CONTAINER_ATTRIBUTE = "data-block-image-container";
+var IMAGE_CONTAINER_CLASS = "block-image-container";
+
 // src/typeGuards/isSerializedImageNode.ts
 var isSerializedImageNode = (node) => {
   return node?.type === "image" && "altText" in node && typeof node.altText === "string" && "caption" in node && "showCaption" in node && typeof node.showCaption === "boolean" && "src" in node && typeof node.src === "string" && "width" in node && typeof node.width === "string" && "align" in node && typeof node.align === "string" && "showBorder" in node && typeof node.showBorder === "boolean";
@@ -261,39 +265,62 @@ var isSerializedImageNode = (node) => {
 
 // src/exportToHtml/ImageNodeHandler.ts
 var ImageNodeHandler = class extends NodeHandler {
+  alignItemsAttribute(node) {
+    return node.align === "left" ? "start" : node.align === "right" ? "end" : "center";
+  }
   srcAttribute(node) {
     return `src="${node.src}"`;
   }
   altAttribute(node) {
     return node.altText ? `alt="${node.altText}"` : null;
   }
-  styleAttribute(node) {
-    const styleProps = [];
+  fillStyleWidth(styleProps, node) {
     if (node.width) {
       styleProps.push(`width: ${node.width};`);
       styleProps.push(`max-width: 100%;`);
     }
+    return styleProps;
+  }
+  imageStyleAttribute(node) {
+    const styleProps = this.fillStyleWidth([], node);
     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;
+  captionStyleAttribute(node) {
+    const styleProps = this.fillStyleWidth([], node);
+    return styleProps.length ? `style="${styleProps.join(" ")}"` : null;
   }
-  attributes(node) {
+  imageAttributes(node) {
     const attributes = [
       this.srcAttribute(node),
       this.altAttribute(node),
-      this.styleAttribute(node),
-      this.alignAttribute(node)
+      this.imageStyleAttribute(node)
     ].filter(Boolean).join(" ");
     return attributes;
   }
+  captionAttributes(node) {
+    const attributes = [this.captionStyleAttribute(node)].filter(Boolean).join(" ");
+    return attributes;
+  }
+  wrapContainer(node, imageHtml, captionHtml) {
+    const styles = [
+      "display: flex;",
+      "flex-direction: column;",
+      "justify-content: center;",
+      "width: 100%;",
+      "align-items: " + this.alignItemsAttribute(node) + ";"
+    ];
+    return `<div ${IMAGE_CONTAINER_ATTRIBUTE} class="${IMAGE_CONTAINER_CLASS}" style="${styles.join(" ")}">${imageHtml}${captionHtml}</div>`;
+  }
   processNode(node) {
     if (!isSerializedImageNode(node)) return null;
-    const attributes = this.attributes(node);
-    return `<img ${attributes} />`;
+    return this.wrapContainer(
+      node,
+      `<img ${this.imageAttributes(node)} />`,
+      node.showCaption ? `<p ${this.captionAttributes(node)}>${createHtmlFromNestedEditor(node.caption)}</p>` : ""
+    );
   }
 };
 
@@ -949,7 +976,9 @@ var createNestedNodesFromHtml = (node) => {
   for (const child of node.childNodes) {
     const processedChildren = traverse2(child);
     for (const processedChild of processedChildren) {
-      const isBlockElement = processedChild.type === "paragraph" || processedChild.type === "table" || processedChild.type === "list";
+      const isBlockElement = processedChild.type === "paragraph" || processedChild.type === "table" || processedChild.type === "list" || // Block Editor considers images a block level root node (no wrapping with p)
+      // https://github.com/examind-ai/block-editor/issues/232
+      processedChild.type === "image";
       if (isBlockElement) {
         appendInlinesInParagraphIfNotEmptyBR(
           results,
@@ -968,6 +997,105 @@ var createNestedNodesFromHtml = (node) => {
   else return results;
 };
 
+// src/importFromHtml/createImageNode.ts
+function createImageNode(src, altText, width, align, showBorder, caption) {
+  return {
+    src,
+    altText,
+    width,
+    align,
+    showBorder,
+    showCaption: !!caption,
+    caption: {
+      editorState: {
+        root: {
+          children: caption ? caption.split("\n").reduce((nodes, line, index, lines) => {
+            nodes.push({
+              detail: 0,
+              format: 0,
+              mode: "normal",
+              style: "",
+              text: line,
+              type: "text",
+              version: 1
+            });
+            if (index < lines.length - 1) {
+              nodes.push({
+                type: "linebreak",
+                version: 1
+              });
+            }
+            return nodes;
+          }, []) : [],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      }
+    },
+    type: "image",
+    version: 1
+  };
+}
+
+// src/importFromHtml/extractFlexAlign.ts
+function extractFlexAlign(element) {
+  const style = element.getAttribute("style");
+  if (!style) return "left";
+  const flexAlignMatch = style.match(/align-items:\s*([^;]+);?/i);
+  if (flexAlignMatch && flexAlignMatch[1]) {
+    const value = flexAlignMatch[1].trim();
+    if (value === "start") return "left";
+    if (value === "end") return "right";
+    return value;
+  }
+  return "left";
+}
+
+// src/importFromHtml/extractWidth.ts
+function 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` : "";
+}
+
+// src/importFromHtml/hasBorder.ts
+function hasBorder(element) {
+  const style = element.getAttribute("style");
+  if (!style) return false;
+  return /border\s*:/i.test(style);
+}
+
+// src/importFromHtml/processImageNodeContainer.ts
+function processImageNodeContainer(node) {
+  if (!node.hasAttribute(IMAGE_CONTAINER_ATTRIBUTE)) {
+    return null;
+  }
+  const imageNode = node.querySelector("img");
+  const captionNode = node.querySelector("p");
+  if (!imageNode) {
+    return null;
+  }
+  return [
+    createImageNode(
+      imageNode.attributes["src"] ?? "",
+      imageNode.attributes["alt"] ?? "",
+      extractWidth(imageNode),
+      extractFlexAlign(node),
+      hasBorder(imageNode),
+      captionNode?.text
+    )
+  ];
+}
+
 // src/importFromHtml/types.ts
 var NodeHandler2 = class {
   constructor() {
@@ -995,15 +1123,18 @@ var NodeHandler2 = class {
 };
 
 // src/importFromHtml/DivNodeHandler.ts
-var isHtmlDivElement = (node) => {
-  return node instanceof import_node_html_parser2.HTMLElement && node.tagName === "DIV";
-};
 var DivNodeHandler = class extends NodeHandler2 {
+  isHtmlDivElement(node) {
+    return node instanceof import_node_html_parser2.HTMLElement && node.tagName === "DIV";
+  }
   processNode(node) {
-    if (!isHtmlDivElement(node)) {
+    if (!this.isHtmlDivElement(node)) {
       return null;
     }
-    return createNestedNodesFromHtml(node);
+    return (
+      // Native Block Editor exported image container is a div with a specific attribute
+      processImageNodeContainer(node) ?? createNestedNodesFromHtml(node)
+    );
   }
 };
 
@@ -1336,49 +1467,18 @@ 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 imageNode = {
-      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: {
-          root: {
-            children: [],
-            direction: null,
-            format: "",
-            indent: 0,
-            type: "root",
-            version: 1
-          }
-        }
-      },
-      type: "image",
-      version: 1
-    };
-    return imageNode;
+    return createImageNode(
+      node.getAttribute("src") || "",
+      node.getAttribute("alt") || "",
+      extractWidth(node),
+      node.getAttribute("align") || "left",
+      hasBorder(node),
+      void 0
+    );
   }
 };
 
@@ -1687,9 +1787,23 @@ var ParagraphNodeHandler2 = class extends NodeHandler2 {
     }
     return "";
   }
+  processImageNode(node) {
+    if (node.childNodes.length === 1 && node.childNodes[0] instanceof import_node_html_parser17.HTMLElement && node.childNodes[0].tagName === "IMG") {
+      return traverse2(node.childNodes[0]);
+    }
+    return null;
+  }
+  processSpanImageNode(node) {
+    if (node.childNodes.length === 1 && node.childNodes[0] instanceof import_node_html_parser17.HTMLElement && node.childNodes[0].tagName === "SPAN" && node.childNodes[0].childNodes.length === 1 && node.childNodes[0].childNodes[0] instanceof import_node_html_parser17.HTMLElement && node.childNodes[0].childNodes[0].tagName === "IMG") {
+      return traverse2(node.childNodes[0].childNodes[0]);
+    }
+    return null;
+  }
   processNode(node) {
     if (!(node instanceof import_node_html_parser17.HTMLElement)) return null;
     if (node.tagName !== "P") return null;
+    const imageNode = this.processImageNode(node) ?? this.processSpanImageNode(node);
+    if (imageNode) return imageNode;
     const jsonNode = createEmptyParagraphNode();
     jsonNode.format = this.extractTextAlignment(node);
     if (node.childNodes.length === 1 && node.childNodes[0] instanceof import_node_html_parser17.HTMLElement && node.childNodes[0].tagName === "BR")

package/dist/index.mjs

@@ -227,6 +227,10 @@ var HorizontalRuleNodeHandler = class extends NodeHandler {
   }
 };
 
+// src/config/constants.ts
+var IMAGE_CONTAINER_ATTRIBUTE = "data-block-image-container";
+var IMAGE_CONTAINER_CLASS = "block-image-container";
+
 // src/typeGuards/isSerializedImageNode.ts
 var isSerializedImageNode = (node) => {
   return node?.type === "image" && "altText" in node && typeof node.altText === "string" && "caption" in node && "showCaption" in node && typeof node.showCaption === "boolean" && "src" in node && typeof node.src === "string" && "width" in node && typeof node.width === "string" && "align" in node && typeof node.align === "string" && "showBorder" in node && typeof node.showBorder === "boolean";
@@ -234,39 +238,62 @@ var isSerializedImageNode = (node) => {
 
 // src/exportToHtml/ImageNodeHandler.ts
 var ImageNodeHandler = class extends NodeHandler {
+  alignItemsAttribute(node) {
+    return node.align === "left" ? "start" : node.align === "right" ? "end" : "center";
+  }
   srcAttribute(node) {
     return `src="${node.src}"`;
   }
   altAttribute(node) {
     return node.altText ? `alt="${node.altText}"` : null;
   }
-  styleAttribute(node) {
-    const styleProps = [];
+  fillStyleWidth(styleProps, node) {
     if (node.width) {
       styleProps.push(`width: ${node.width};`);
       styleProps.push(`max-width: 100%;`);
     }
+    return styleProps;
+  }
+  imageStyleAttribute(node) {
+    const styleProps = this.fillStyleWidth([], node);
     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;
+  captionStyleAttribute(node) {
+    const styleProps = this.fillStyleWidth([], node);
+    return styleProps.length ? `style="${styleProps.join(" ")}"` : null;
   }
-  attributes(node) {
+  imageAttributes(node) {
     const attributes = [
       this.srcAttribute(node),
       this.altAttribute(node),
-      this.styleAttribute(node),
-      this.alignAttribute(node)
+      this.imageStyleAttribute(node)
     ].filter(Boolean).join(" ");
     return attributes;
   }
+  captionAttributes(node) {
+    const attributes = [this.captionStyleAttribute(node)].filter(Boolean).join(" ");
+    return attributes;
+  }
+  wrapContainer(node, imageHtml, captionHtml) {
+    const styles = [
+      "display: flex;",
+      "flex-direction: column;",
+      "justify-content: center;",
+      "width: 100%;",
+      "align-items: " + this.alignItemsAttribute(node) + ";"
+    ];
+    return `<div ${IMAGE_CONTAINER_ATTRIBUTE} class="${IMAGE_CONTAINER_CLASS}" style="${styles.join(" ")}">${imageHtml}${captionHtml}</div>`;
+  }
   processNode(node) {
     if (!isSerializedImageNode(node)) return null;
-    const attributes = this.attributes(node);
-    return `<img ${attributes} />`;
+    return this.wrapContainer(
+      node,
+      `<img ${this.imageAttributes(node)} />`,
+      node.showCaption ? `<p ${this.captionAttributes(node)}>${createHtmlFromNestedEditor(node.caption)}</p>` : ""
+    );
   }
 };
 
@@ -922,7 +949,9 @@ var createNestedNodesFromHtml = (node) => {
   for (const child of node.childNodes) {
     const processedChildren = traverse2(child);
     for (const processedChild of processedChildren) {
-      const isBlockElement = processedChild.type === "paragraph" || processedChild.type === "table" || processedChild.type === "list";
+      const isBlockElement = processedChild.type === "paragraph" || processedChild.type === "table" || processedChild.type === "list" || // Block Editor considers images a block level root node (no wrapping with p)
+      // https://github.com/examind-ai/block-editor/issues/232
+      processedChild.type === "image";
       if (isBlockElement) {
         appendInlinesInParagraphIfNotEmptyBR(
           results,
@@ -941,6 +970,105 @@ var createNestedNodesFromHtml = (node) => {
   else return results;
 };
 
+// src/importFromHtml/createImageNode.ts
+function createImageNode(src, altText, width, align, showBorder, caption) {
+  return {
+    src,
+    altText,
+    width,
+    align,
+    showBorder,
+    showCaption: !!caption,
+    caption: {
+      editorState: {
+        root: {
+          children: caption ? caption.split("\n").reduce((nodes, line, index, lines) => {
+            nodes.push({
+              detail: 0,
+              format: 0,
+              mode: "normal",
+              style: "",
+              text: line,
+              type: "text",
+              version: 1
+            });
+            if (index < lines.length - 1) {
+              nodes.push({
+                type: "linebreak",
+                version: 1
+              });
+            }
+            return nodes;
+          }, []) : [],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      }
+    },
+    type: "image",
+    version: 1
+  };
+}
+
+// src/importFromHtml/extractFlexAlign.ts
+function extractFlexAlign(element) {
+  const style = element.getAttribute("style");
+  if (!style) return "left";
+  const flexAlignMatch = style.match(/align-items:\s*([^;]+);?/i);
+  if (flexAlignMatch && flexAlignMatch[1]) {
+    const value = flexAlignMatch[1].trim();
+    if (value === "start") return "left";
+    if (value === "end") return "right";
+    return value;
+  }
+  return "left";
+}
+
+// src/importFromHtml/extractWidth.ts
+function 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` : "";
+}
+
+// src/importFromHtml/hasBorder.ts
+function hasBorder(element) {
+  const style = element.getAttribute("style");
+  if (!style) return false;
+  return /border\s*:/i.test(style);
+}
+
+// src/importFromHtml/processImageNodeContainer.ts
+function processImageNodeContainer(node) {
+  if (!node.hasAttribute(IMAGE_CONTAINER_ATTRIBUTE)) {
+    return null;
+  }
+  const imageNode = node.querySelector("img");
+  const captionNode = node.querySelector("p");
+  if (!imageNode) {
+    return null;
+  }
+  return [
+    createImageNode(
+      imageNode.attributes["src"] ?? "",
+      imageNode.attributes["alt"] ?? "",
+      extractWidth(imageNode),
+      extractFlexAlign(node),
+      hasBorder(imageNode),
+      captionNode?.text
+    )
+  ];
+}
+
 // src/importFromHtml/types.ts
 var NodeHandler2 = class {
   constructor() {
@@ -968,15 +1096,18 @@ var NodeHandler2 = class {
 };
 
 // src/importFromHtml/DivNodeHandler.ts
-var isHtmlDivElement = (node) => {
-  return node instanceof HTMLElement2 && node.tagName === "DIV";
-};
 var DivNodeHandler = class extends NodeHandler2 {
+  isHtmlDivElement(node) {
+    return node instanceof HTMLElement2 && node.tagName === "DIV";
+  }
   processNode(node) {
-    if (!isHtmlDivElement(node)) {
+    if (!this.isHtmlDivElement(node)) {
       return null;
     }
-    return createNestedNodesFromHtml(node);
+    return (
+      // Native Block Editor exported image container is a div with a specific attribute
+      processImageNodeContainer(node) ?? createNestedNodesFromHtml(node)
+    );
   }
 };
 
@@ -1309,49 +1440,18 @@ 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 imageNode = {
-      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: {
-          root: {
-            children: [],
-            direction: null,
-            format: "",
-            indent: 0,
-            type: "root",
-            version: 1
-          }
-        }
-      },
-      type: "image",
-      version: 1
-    };
-    return imageNode;
+    return createImageNode(
+      node.getAttribute("src") || "",
+      node.getAttribute("alt") || "",
+      extractWidth(node),
+      node.getAttribute("align") || "left",
+      hasBorder(node),
+      void 0
+    );
   }
 };
 
@@ -1660,9 +1760,23 @@ var ParagraphNodeHandler2 = class extends NodeHandler2 {
     }
     return "";
   }
+  processImageNode(node) {
+    if (node.childNodes.length === 1 && node.childNodes[0] instanceof HTMLElement17 && node.childNodes[0].tagName === "IMG") {
+      return traverse2(node.childNodes[0]);
+    }
+    return null;
+  }
+  processSpanImageNode(node) {
+    if (node.childNodes.length === 1 && node.childNodes[0] instanceof HTMLElement17 && node.childNodes[0].tagName === "SPAN" && node.childNodes[0].childNodes.length === 1 && node.childNodes[0].childNodes[0] instanceof HTMLElement17 && node.childNodes[0].childNodes[0].tagName === "IMG") {
+      return traverse2(node.childNodes[0].childNodes[0]);
+    }
+    return null;
+  }
   processNode(node) {
     if (!(node instanceof HTMLElement17)) return null;
     if (node.tagName !== "P") return null;
+    const imageNode = this.processImageNode(node) ?? this.processSpanImageNode(node);
+    if (imageNode) return imageNode;
     const jsonNode = createEmptyParagraphNode();
     jsonNode.format = this.extractTextAlignment(node);
     if (node.childNodes.length === 1 && node.childNodes[0] instanceof HTMLElement17 && node.childNodes[0].tagName === "BR")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examind/block-sdk",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "@comment version": [
     "Don't specify package version here. It will be injected by publish workflow."
   ],
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "nanoid": ">=3.0.0",
     "node-html-parser": ">=6.0.0",
-    "@examind/block-types": "^0.1.19"
+    "@examind/block-types": "^0.1.20"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -36,7 +36,7 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
-    "@examind/block-types": "0.1.19"
+    "@examind/block-types": "0.1.20"
   },
   "dependencies": {
     "lodash-es": "4.17.21"