flex-html-render 1.0.1 → 1.0.3

package/README.md

@@ -41,6 +41,12 @@ console.log(JSON.stringify(flexMessage, null, 2));
 ### `convertHtmlToFlexMessage(htmlString)`
 - **參數**：`htmlString` (string) - Flex Message 對應的 HTML 字串
 - **回傳**：Flex Message JSON 物件陣列
+- **說明**：此函數將 Flex Message HTML 字串轉為 JSON 結構，可用於編輯或顯示目的
+
+### `convertJsonToHtml(json)`
+- **參數**：`json` (object) - Flex Message JSON 物件
+- **回傳**：對應的格式化 HTML 字串
+- **說明**：此函數將 Flex Message JSON 結構轉為 HTML 字串，可用於編輯或顯示目的
 
 
 ## 支援的 Flex Message 元素
@@ -82,6 +88,7 @@ console.log(JSON.stringify(flexMessage, null, 2));
 
 ### 便捷標籤 (Convenience Tags)
 這些是對常用設定的簡寫標籤：
+- `<div>`, `<article>` - 等同於 `<box>`
 - `<baseline>` - 等同於 `<box layout="baseline">`
 - `<row>` - 等同於 `<box layout="horizontal">`
 - `<vertical>` - 等同於 `<box layout="vertical">`

package/dist/flex-html-render.cjs.js

@@ -1 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("htmlparser2"),N={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",ACTION:"action",BACKGROUND:"background"},b=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE];function E(t){const r=Number(t);return isNaN(r)?t:r}function O(t){return t==="true"?!0:t==="false"?!1:t}function T(t){return[E,O].reduce((a,n)=>n(a),t)}function A(t){const r={type:"root",children:[]},a=[r],n=new f.Parser({onopentag(s,u){const g={type:N.ELEMENT,tagName:s,attributes:Object.fromEntries(Object.entries(u).map(([h,m])=>[h,T(m)])),children:[]};a[a.length-1].children.push(g),a.push(g)},ontext(s){s.trim()&&a[a.length-1].children.push({type:N.TEXT,content:s.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(s){console.error("解析錯誤:",s)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return n.write(t),n.end(),r.children}const c=t=>{throw Error(`[Flex Html Render]: ${t}`)},l={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function B(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&c("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function y(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&c("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function i(t){t.attributes=t.attributes||{};const r=y(t);r&&(t.attributes.action=i(r));const a=B(t);if(a&&p.includes(t.tagName)&&(t.attributes.background=i(a)),t.type===N.TEXT)return l.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const n=t.children.find(o=>o.tagName===e.HEADER),s=t.children.find(o=>o.tagName===e.HERO),u=t.children.find(o=>o.tagName===e.BODY),g=t.children.find(o=>o.tagName===e.FOOTER);return l.bubble({...t.attributes,header:n?i(n):void 0,hero:s?i(s):void 0,body:u?i(u):void 0,footer:g?i(g):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(n=>n.tagName!==e.BUBBLE)&&c("Carousel can only have Bubble as children"),t.children.length>12&&c("Carousel can have maximum 12 bubbles"),l.carousel(t.children.map(i));if(b.includes(t.tagName))return t.children.length!==1&&c(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||c("Button component should contain an action node"),l.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&c("Span component can only have one text child");const n=t.children[0];if(n&&n.type===N.TEXT)return l.span(n.content,t.attributes);c("Span component only allowed text child")}if(t.tagName===e.TEXT)return l.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return l.separator(t.attributes);if(t.tagName===e.IMAGE)return l.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&c("Video component should only has one Box or Image as altContent"),[e.BOX,e.IMAGE].includes(t.children[0]?.tagName)||c("Video component should only has Box or Image child as altContent"),t.attributes.altContent=i(t.children[0]),l.video(t.attributes);if(t.tagName===e.ICON)return l.icon(t.attributes);if(t.tagName===e.BOX)return l.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return l.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return l.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function R(t){try{return A(t).map(i)}catch(r){console.error("Error converting HTML to Flex Message:",r)}}exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const J=require("htmlparser2"),E={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",FILLER:"filler",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",DIV:"div",ARTICLE:"article",ACTION:"action",BACKGROUND:"background"},Y=[e.HEADER,e.HERO,e.BODY,e.FOOTER],W=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE,e.DIV,e.ARTICLE],q=[e.TEXT,e.STRONG];function z(t){const r=Number(t);return isNaN(r)?t:r}function _(t){return t==="true"?!0:t==="false"?!1:t}function Q(t){return[z,_].reduce((n,s)=>s(n),t)}function Z(t){const r={type:"root",children:[]},n=[r],s=new J.Parser({onopentag(l,i){const a={type:E.ELEMENT,tagName:l,attributes:Object.fromEntries(Object.entries(i).map(([p,f])=>[p,Q(f)])),children:[]};n[n.length-1].children.push(a),n.push(a)},ontext(l){const i=n[n.length-1];if(i.tagName==="span"){i.children.push({type:E.TEXT,content:l});return}l.trim()&&i.children.push({type:E.TEXT,content:l.replace(/\n/g,"").trim()})},onclosetag(){n.pop()},onerror(l){console.error("解析錯誤:",l)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return s.write(t),s.end(),r.children}const h=t=>{throw Error(`[Flex Html Render]: ${t}`)},c={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),filler:(t={})=>({type:"filler",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t}),postback:(t={})=>({type:"postback",...t}),message:(t={})=>({type:"message",...t}),datetimepicker:(t={})=>({type:"datetimepicker",...t}),camera:(t={})=>({type:"camera",...t}),cameraRoll:(t={})=>({type:"cameraRoll",...t}),location:(t={})=>({type:"location",...t}),richmenuswitch:(t={})=>({type:"richmenuswitch",...t}),clipboard:(t={})=>({type:"clipboard",...t})};function tt(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(n=>n.tagName===e.BACKGROUND);return r.length>1&&h("A box node can only allowed with one background node inside"),t.children=t.children.filter(n=>n.tagName!==e.BACKGROUND),r[0]}return null}function et(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(n=>n.tagName===e.ACTION);return r.length>1&&h("A node can only allowed with one action node inside"),t.children=t.children.filter(n=>n.tagName!==e.ACTION),r[0]}return null}function rt(t){![...q,e.SPAN].includes(t.tagName)&&t.children?.some(l=>l.type===E.TEXT)&&(console.log(t),h("Span component only allowed inside Text component")),t.tagName===e.VIDEO&&t.children?.some(l=>![e.BOX,e.IMAGE].includes(l.tagName))&&h("Video component only allowed Box or Image as altContent child"),!W.includes(t.tagName)&&t.children?.some(l=>l.tagName===e.BACKGROUND)&&h("Only Box component allowed to have Background child")}function m(t){t.attributes=t.attributes||{},rt(t);const r=et(t);r&&(t.attributes.action=m(r));const n=tt(t);if(n&&(t.attributes.background=m(n)),t.type===E.TEXT)return c.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const s=t.children.find(u=>u.tagName===e.HEADER),l=t.children.find(u=>u.tagName===e.HERO),i=t.children.find(u=>u.tagName===e.BODY),a=t.children.find(u=>u.tagName===e.FOOTER);return c.bubble({...t.attributes,header:s?m(s):void 0,hero:l?m(l):void 0,body:i?m(i):void 0,footer:a?m(a):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(s=>s.tagName!==e.BUBBLE)&&h("Carousel can only have Bubble as children"),t.children.length>12&&h("Carousel can have maximum 12 bubbles"),c.carousel(t.children.map(m));if(Y.includes(t.tagName))return t.children.length!==1&&h(`${t.tagName} should have exactly one child node`),m(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||h("Button component should contain an action node"),c.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&h("Span component can only have one text child");const s=t.children[0];if(s&&s.type===E.TEXT)return c.span(s.content,t.attributes);h(s?"Span component only allowed text child":"Span component can not be empty")}if(t.tagName===e.TEXT)return c.text(t.children.map(m),t.attributes);if(t.tagName===e.SEPARATOR)return c.separator(t.attributes);if(t.tagName===e.IMAGE)return c.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&h("Video component should only has one Box or Image as altContent"),t.attributes.altContent=m(t.children[0]),c.video(t.attributes);if(t.tagName===e.ICON)return c.icon(t.attributes);if(t.tagName===e.FILLER)return c.filler(t.attributes);if(t.tagName===e.BOX||t.tagName===e.DIV||t.tagName===e.ARTICLE)return t.attributes.layout||(t.attributes.layout="vertical"),c.box(t.children.map(m),t.attributes);if(t.tagName===e.SPACE)return c.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",m(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",m(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",m(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",m(t);if(t.tagName===e.ACTION){const s=t.attributes.type;switch(s){case"uri":return c.uri(t.attributes);case"postback":return c.postback(t.attributes);case"message":return c.message(t.attributes);case"datetimepicker":return c.datetimepicker(t.attributes);case"camera":return c.camera(t.attributes);case"cameraRoll":return c.cameraRoll(t.attributes);case"location":return c.location(t.attributes);case"richmenuswitch":return c.richmenuswitch(t.attributes);case"clipboard":return c.clipboard(t.attributes);default:h(`Unsupported action type: ${s}`)}}if(t.tagName===e.BACKGROUND)return t.attributes}const o={createElement:(t,r={},n=[],s=0)=>{const i=Object.entries(r).filter(([u,p])=>p!=null).map(([u,p])=>typeof p=="object"?`${u}="${JSON.stringify(p).replace(/"/g,"&quot;")}"`:`${u}="${p}"`).join(" "),a=i?` ${i}`:"";if(n.length===0)return`  <${t}${a} />`;{const u=n.map(p=>typeof p=="string"?p.split(`
+`).map(f=>f?"  "+f:"").join(`
+`):p).join(`
+`);return`  <${t}${a}>
+${u}
+  </${t}>`}},createText:t=>t};function b(t,r=0){if(!t||typeof t!="object")return"";const{type:n,...s}=t,{action:l,...i}=s,a=l?b(l,r+1):"";switch(n){case"carousel":const{contents:u,...p}=i,f=u.map(N=>b(N,r+1));return a&&f.unshift(a),o.createElement(e.CAROUSEL,p,f,r);case"bubble":const{header:A,hero:C,body:R,footer:B,...L}=i,g=[];return a&&g.push(a),A&&g.push(o.createElement(e.HEADER,{},[b(A,r+1)],r+1)),C&&g.push(o.createElement(e.HERO,{},[b(C,r+1)],r+1)),R&&g.push(o.createElement(e.BODY,{},[b(R,r+1)],r+1)),B&&g.push(o.createElement(e.FOOTER,{},[b(B,r+1)],r+1)),o.createElement(e.BUBBLE,L,g,r);case"box":const{contents:w,background:d,...O}=i;O.layout||(O.layout="vertical");const T=[];return a&&T.push(a),d&&T.push(b({type:"background",...d},r+1)),T.push(...(w||[]).map(N=>b(N,r+1))),o.createElement(e.BOX,O,T,r);case"text":const{text:U,contents:y,...k}=i,x=y&&y.length>0?y.map(N=>b(N,r+1)):[U||""];return a&&x.unshift(a),o.createElement(e.TEXT,k,x,r);case"span":const{text:D,...X}=i,S=[D||""];return a&&S.unshift(a),o.createElement(e.SPAN,X,S,r);case"image":const{...$}=i,H=a?[a]:[];return o.createElement(e.IMAGE,$,H,r);case"video":const{altContent:I,...G}=i,v=I?[b(I,r+1)]:[];return a&&v.unshift(a),o.createElement(e.VIDEO,G,v,r);case"icon":const{...M}=i,F=a?[a]:[];return o.createElement(e.ICON,M,F,r);case"button":const{...P}=i,V=a?[a]:[];return o.createElement(e.BUTTON,P,V,r);case"separator":const j=a?[a]:[];return o.createElement(e.SEPARATOR,i,j,r);case"filler":const K=a?[a]:[];return o.createElement(e.FILLER,i,K,r);case"uri":case"message":case"postback":case"datetimepicker":case"camera":case"cameraRoll":case"location":case"richmenuswitch":case"clipboard":return o.createElement(e.ACTION,{type:n,...i},[],r);case"background":return o.createElement(e.BACKGROUND,i,[],r);default:return""}}function at(t){try{return Z(t).map(m)}catch(r){throw console.error("Error converting HTML to Flex Message:",r),r}}exports.convertJsonToHtml=b;exports.default=at;

package/dist/flex-html-render.es.js

@@ -1,5 +1,5 @@
-import { Parser as f } from "htmlparser2";
-const g = {
+import { Parser as Y } from "htmlparser2";
+const E = {
   ELEMENT: "element",
   TEXT: "text"
 }, e = {
@@ -20,6 +20,7 @@ const g = {
   ICON: "icon",
   SEPARATOR: "separator",
   BUTTON: "button",
+  FILLER: "filler",
   // custom render tags
   SPACE: "space",
   STRONG: "strong",
@@ -27,58 +28,73 @@ const g = {
   BASELINE: "baseline",
   ROW: "row",
   VERTICAL: "vertical",
+  DIV: "div",
+  ARTICLE: "article",
   // custom utils tags
   ACTION: "action",
   BACKGROUND: "background"
-}, b = [
+}, J = [
   e.HEADER,
   e.HERO,
   e.BODY,
   e.FOOTER
-], p = [
+], W = [
   e.BOX,
   e.VERTICAL,
   e.ROW,
-  e.BASELINE
+  e.BASELINE,
+  e.DIV,
+  e.ARTICLE
+], z = [
+  e.TEXT,
+  e.STRONG
 ];
-function E(t) {
+function q(t) {
   const r = Number(t);
   return isNaN(r) ? t : r;
 }
-function O(t) {
+function Q(t) {
   return t === "true" ? !0 : t === "false" ? !1 : t;
 }
-function T(t) {
+function Z(t) {
   return [
-    E,
-    O
-  ].reduce((a, n) => n(a), t);
+    q,
+    Q
+  ].reduce((n, s) => s(n), t);
 }
-function A(t) {
-  const r = { type: "root", children: [] }, a = [r], n = new f(
+function _(t) {
+  const r = { type: "root", children: [] }, n = [r], s = new Y(
     {
-      onopentag(s, u) {
-        const N = {
-          type: g.ELEMENT,
-          tagName: s,
+      onopentag(l, i) {
+        const a = {
+          type: E.ELEMENT,
+          tagName: l,
           attributes: Object.fromEntries(
-            Object.entries(u).map(([h, m]) => [h, T(m)])
+            Object.entries(i).map(([p, f]) => [p, Z(f)])
           ),
           children: []
         };
-        a[a.length - 1].children.push(N), a.push(N);
+        n[n.length - 1].children.push(a), n.push(a);
       },
-      ontext(s) {
-        s.trim() && a[a.length - 1].children.push({
-          type: g.TEXT,
-          content: s.replace(/\n/g, "").trim()
+      ontext(l) {
+        const i = n[n.length - 1];
+        if (i.tagName === "span") {
+          i.children.push({
+            type: E.TEXT,
+            content: l
+          });
+          return;
+        }
+        l.trim() && i.children.push({
+          type: E.TEXT,
+          content: l.replace(/\n/g, "").trim()
         });
       },
       onclosetag() {
-        a.pop();
+        n.pop();
       },
-      onerror(s) {
-        console.error("解析錯誤:", s);
+      onerror(l) {
+        console.error("解析錯誤:", l);
       }
     },
     {
@@ -89,9 +105,9 @@ function A(t) {
       lowerCaseAttributeNames: !1
     }
   );
-  return n.write(t), n.end(), r.children;
+  return s.write(t), s.end(), r.children;
 }
-const l = (t) => {
+const h = (t) => {
   throw Error(`[Flex Html Render]: ${t}`);
 }, c = {
   carousel: (t) => ({
@@ -139,66 +155,105 @@ const l = (t) => {
     type: "separator",
     ...t
   }),
+  filler: (t = {}) => ({
+    type: "filler",
+    ...t
+  }),
   uri: (t = {}) => ({
     type: "uri",
     altUri: t.altUri ? {
       desktop: t.altUri
     } : void 0,
     ...t
+  }),
+  postback: (t = {}) => ({
+    type: "postback",
+    ...t
+  }),
+  message: (t = {}) => ({
+    type: "message",
+    ...t
+  }),
+  datetimepicker: (t = {}) => ({
+    type: "datetimepicker",
+    ...t
+  }),
+  camera: (t = {}) => ({
+    type: "camera",
+    ...t
+  }),
+  cameraRoll: (t = {}) => ({
+    type: "cameraRoll",
+    ...t
+  }),
+  location: (t = {}) => ({
+    type: "location",
+    ...t
+  }),
+  richmenuswitch: (t = {}) => ({
+    type: "richmenuswitch",
+    ...t
+  }),
+  clipboard: (t = {}) => ({
+    type: "clipboard",
+    ...t
   })
 };
-function B(t) {
+function tt(t) {
   if (t.tagName !== e.BACKGROUND && t.children && t.children.length > 0) {
-    const r = t.children.filter((a) => a.tagName === e.BACKGROUND);
-    return r.length > 1 && l("A box node can only allowed with one background node inside"), t.children = t.children.filter((a) => a.tagName !== e.BACKGROUND), r[0];
+    const r = t.children.filter((n) => n.tagName === e.BACKGROUND);
+    return r.length > 1 && h("A box node can only allowed with one background node inside"), t.children = t.children.filter((n) => n.tagName !== e.BACKGROUND), r[0];
   }
   return null;
 }
-function y(t) {
+function et(t) {
   if (t.tagName !== e.ACTION && t.children && t.children.length > 0) {
-    const r = t.children.filter((a) => a.tagName === e.ACTION);
-    return r.length > 1 && l("A node can only allowed with one action node inside"), t.children = t.children.filter((a) => a.tagName !== e.ACTION), r[0];
+    const r = t.children.filter((n) => n.tagName === e.ACTION);
+    return r.length > 1 && h("A node can only allowed with one action node inside"), t.children = t.children.filter((n) => n.tagName !== e.ACTION), r[0];
   }
   return null;
 }
-function i(t) {
-  t.attributes = t.attributes || {};
-  const r = y(t);
-  r && (t.attributes.action = i(r));
-  const a = B(t);
-  if (a && p.includes(t.tagName) && (t.attributes.background = i(a)), t.type === g.TEXT)
+function rt(t) {
+  ![...z, e.SPAN].includes(t.tagName) && t.children?.some((l) => l.type === E.TEXT) && (console.log(t), h("Span component only allowed inside Text component")), t.tagName === e.VIDEO && t.children?.some((l) => ![e.BOX, e.IMAGE].includes(l.tagName)) && h("Video component only allowed Box or Image as altContent child"), !W.includes(t.tagName) && t.children?.some((l) => l.tagName === e.BACKGROUND) && h("Only Box component allowed to have Background child");
+}
+function m(t) {
+  t.attributes = t.attributes || {}, rt(t);
+  const r = et(t);
+  r && (t.attributes.action = m(r));
+  const n = tt(t);
+  if (n && (t.attributes.background = m(n)), t.type === E.TEXT)
     return c.span(t.content, t.attributes);
   if (t.tagName === e.BUBBLE) {
-    const n = t.children.find((o) => o.tagName === e.HEADER), s = t.children.find((o) => o.tagName === e.HERO), u = t.children.find((o) => o.tagName === e.BODY), N = t.children.find((o) => o.tagName === e.FOOTER);
+    const s = t.children.find((u) => u.tagName === e.HEADER), l = t.children.find((u) => u.tagName === e.HERO), i = t.children.find((u) => u.tagName === e.BODY), a = t.children.find((u) => u.tagName === e.FOOTER);
     return c.bubble({
       ...t.attributes,
-      header: n ? i(n) : void 0,
-      hero: s ? i(s) : void 0,
-      body: u ? i(u) : void 0,
-      footer: N ? i(N) : void 0
+      header: s ? m(s) : void 0,
+      hero: l ? m(l) : void 0,
+      body: i ? m(i) : void 0,
+      footer: a ? m(a) : void 0
     });
   }
   if (t.tagName === e.CAROUSEL)
-    return t.children.some((n) => n.tagName !== e.BUBBLE) && l("Carousel can only have Bubble as children"), t.children.length > 12 && l("Carousel can have maximum 12 bubbles"), c.carousel(
-      t.children.map(i)
+    return t.children.some((s) => s.tagName !== e.BUBBLE) && h("Carousel can only have Bubble as children"), t.children.length > 12 && h("Carousel can have maximum 12 bubbles"), c.carousel(
+      t.children.map(m)
     );
-  if (b.includes(t.tagName))
-    return t.children.length !== 1 && l(`${t.tagName} should have exactly one child node`), i(t.children[0]);
+  if (J.includes(t.tagName))
+    return t.children.length !== 1 && h(`${t.tagName} should have exactly one child node`), m(t.children[0]);
   if (t.tagName === e.BUTTON)
-    return t.attributes.action || l("Button component should contain an action node"), c.button(t.attributes);
+    return t.attributes.action || h("Button component should contain an action node"), c.button(t.attributes);
   if (t.tagName === e.SPAN) {
-    t.children.length > 1 && l("Span component can only have one text child");
-    const n = t.children[0];
-    if (n && n.type === g.TEXT)
+    t.children.length > 1 && h("Span component can only have one text child");
+    const s = t.children[0];
+    if (s && s.type === E.TEXT)
       return c.span(
-        n.content,
+        s.content,
         t.attributes
       );
-    l("Span component only allowed text child");
+    h(s ? "Span component only allowed text child" : "Span component can not be empty");
   }
   if (t.tagName === e.TEXT)
     return c.text(
-      t.children.map(i),
+      t.children.map(m),
       t.attributes
     );
   if (t.tagName === e.SEPARATOR)
@@ -206,39 +261,136 @@ function i(t) {
   if (t.tagName === e.IMAGE)
     return c.image(t.attributes);
   if (t.tagName === e.VIDEO)
-    return t.children.length !== 1 && l("Video component should only has one Box or Image as altContent"), [
-      e.BOX,
-      e.IMAGE
-    ].includes(t.children[0]?.tagName) || l("Video component should only has Box or Image child as altContent"), t.attributes.altContent = i(t.children[0]), c.video(t.attributes);
+    return t.children.length !== 1 && h("Video component should only has one Box or Image as altContent"), t.attributes.altContent = m(t.children[0]), c.video(t.attributes);
   if (t.tagName === e.ICON)
     return c.icon(t.attributes);
-  if (t.tagName === e.BOX)
-    return c.box(
-      t.children.map(i),
+  if (t.tagName === e.FILLER)
+    return c.filler(t.attributes);
+  if (t.tagName === e.BOX || t.tagName === e.DIV || t.tagName === e.ARTICLE)
+    return t.attributes.layout || (t.attributes.layout = "vertical"), c.box(
+      t.children.map(m),
       t.attributes
     );
   if (t.tagName === e.SPACE)
     return c.span(" ".repeat(t.attributes.size || 1));
   if (t.tagName === e.STRONG)
-    return t.tagName = e.TEXT, t.attributes.weight = "bold", i(t);
+    return t.tagName = e.TEXT, t.attributes.weight = "bold", m(t);
   if (t.tagName === e.BASELINE)
-    return t.tagName = e.BOX, t.attributes.layout = "baseline", i(t);
+    return t.tagName = e.BOX, t.attributes.layout = "baseline", m(t);
   if (t.tagName === e.ROW)
-    return t.tagName = e.BOX, t.attributes.layout = "horizontal", i(t);
+    return t.tagName = e.BOX, t.attributes.layout = "horizontal", m(t);
   if (t.tagName === e.VERTICAL)
-    return t.tagName = e.BOX, t.attributes.layout = "vertical", i(t);
-  if (t.tagName === e.ACTION && t.attributes.type === "uri")
-    return c.uri(t.attributes);
+    return t.tagName = e.BOX, t.attributes.layout = "vertical", m(t);
+  if (t.tagName === e.ACTION) {
+    const s = t.attributes.type;
+    switch (s) {
+      case "uri":
+        return c.uri(t.attributes);
+      case "postback":
+        return c.postback(t.attributes);
+      case "message":
+        return c.message(t.attributes);
+      case "datetimepicker":
+        return c.datetimepicker(t.attributes);
+      case "camera":
+        return c.camera(t.attributes);
+      case "cameraRoll":
+        return c.cameraRoll(t.attributes);
+      case "location":
+        return c.location(t.attributes);
+      case "richmenuswitch":
+        return c.richmenuswitch(t.attributes);
+      case "clipboard":
+        return c.clipboard(t.attributes);
+      default:
+        h(`Unsupported action type: ${s}`);
+    }
+  }
   if (t.tagName === e.BACKGROUND)
     return t.attributes;
 }
-function C(t) {
+const o = {
+  createElement: (t, r = {}, n = [], s = 0) => {
+    const i = Object.entries(r).filter(([u, p]) => p != null).map(([u, p]) => typeof p == "object" ? `${u}="${JSON.stringify(p).replace(/"/g, """)}"` : `${u}="${p}"`).join(" "), a = i ? ` ${i}` : "";
+    if (n.length === 0)
+      return `  <${t}${a} />`;
+    {
+      const u = n.map((p) => typeof p == "string" ? p.split(`
+`).map((f) => f ? "  " + f : "").join(`
+`) : p).join(`
+`);
+      return `  <${t}${a}>
+${u}
+  </${t}>`;
+    }
+  },
+  createText: (t) => t
+};
+function b(t, r = 0) {
+  if (!t || typeof t != "object")
+    return "";
+  const { type: n, ...s } = t, { action: l, ...i } = s, a = l ? b(l, r + 1) : "";
+  switch (n) {
+    case "carousel":
+      const { contents: u, ...p } = i, f = u.map((N) => b(N, r + 1));
+      return a && f.unshift(a), o.createElement(e.CAROUSEL, p, f, r);
+    case "bubble":
+      const { header: y, hero: C, body: R, footer: B, ...L } = i, g = [];
+      return a && g.push(a), y && g.push(o.createElement(e.HEADER, {}, [b(y, r + 1)], r + 1)), C && g.push(o.createElement(e.HERO, {}, [b(C, r + 1)], r + 1)), R && g.push(o.createElement(e.BODY, {}, [b(R, r + 1)], r + 1)), B && g.push(o.createElement(e.FOOTER, {}, [b(B, r + 1)], r + 1)), o.createElement(e.BUBBLE, L, g, r);
+    case "box":
+      const { contents: w, background: d, ...O } = i;
+      O.layout || (O.layout = "vertical");
+      const T = [];
+      return a && T.push(a), d && T.push(b({ type: "background", ...d }, r + 1)), T.push(...(w || []).map((N) => b(N, r + 1))), o.createElement(e.BOX, O, T, r);
+    case "text":
+      const { text: U, contents: A, ...k } = i, x = A && A.length > 0 ? A.map((N) => b(N, r + 1)) : [U || ""];
+      return a && x.unshift(a), o.createElement(e.TEXT, k, x, r);
+    case "span":
+      const { text: D, ...X } = i, I = [D || ""];
+      return a && I.unshift(a), o.createElement(e.SPAN, X, I, r);
+    case "image":
+      const { ...$ } = i, G = a ? [a] : [];
+      return o.createElement(e.IMAGE, $, G, r);
+    case "video":
+      const { altContent: S, ...H } = i, v = S ? [b(S, r + 1)] : [];
+      return a && v.unshift(a), o.createElement(e.VIDEO, H, v, r);
+    case "icon":
+      const { ...F } = i, V = a ? [a] : [];
+      return o.createElement(e.ICON, F, V, r);
+    case "button":
+      const { ...M } = i, P = a ? [a] : [];
+      return o.createElement(e.BUTTON, M, P, r);
+    case "separator":
+      const K = a ? [a] : [];
+      return o.createElement(e.SEPARATOR, i, K, r);
+    case "filler":
+      const j = a ? [a] : [];
+      return o.createElement(e.FILLER, i, j, r);
+    // Action types
+    case "uri":
+    case "message":
+    case "postback":
+    case "datetimepicker":
+    case "camera":
+    case "cameraRoll":
+    case "location":
+    case "richmenuswitch":
+    case "clipboard":
+      return o.createElement(e.ACTION, { type: n, ...i }, [], r);
+    case "background":
+      return o.createElement(e.BACKGROUND, i, [], r);
+    default:
+      return "";
+  }
+}
+function nt(t) {
   try {
-    return A(t).map(i);
+    return _(t).map(m);
   } catch (r) {
-    console.error("Error converting HTML to Flex Message:", r);
+    throw console.error("Error converting HTML to Flex Message:", r), r;
   }
 }
 export {
-  C as default
+  b as convertJsonToHtml,
+  nt as default
 };

package/dist/flex-html-render.umd.js

@@ -1 +1,6 @@
-(function(u,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("htmlparser2")):typeof define=="function"&&define.amd?define(["exports","htmlparser2"],f):(u=typeof globalThis<"u"?globalThis:u||self,f(u.FlexHtmlRender={},u.htmlparser2))})(this,(function(u,f){"use strict";const g={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",ACTION:"action",BACKGROUND:"background"},N=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE];function b(t){const r=Number(t);return isNaN(r)?t:r}function E(t){return t==="true"?!0:t==="false"?!1:t}function T(t){return[b,E].reduce((a,l)=>l(a),t)}function O(t){const r={type:"root",children:[]},a=[r],l=new f.Parser({onopentag(c,h){const m={type:g.ELEMENT,tagName:c,attributes:Object.fromEntries(Object.entries(h).map(([B,R])=>[B,T(R)])),children:[]};a[a.length-1].children.push(m),a.push(m)},ontext(c){c.trim()&&a[a.length-1].children.push({type:g.TEXT,content:c.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(c){console.error("解析錯誤:",c)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return l.write(t),l.end(),r.children}const s=t=>{throw Error(`[Flex Html Render]: ${t}`)},n={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function y(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&s("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function A(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&s("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function i(t){t.attributes=t.attributes||{};const r=A(t);r&&(t.attributes.action=i(r));const a=y(t);if(a&&p.includes(t.tagName)&&(t.attributes.background=i(a)),t.type===g.TEXT)return n.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const l=t.children.find(o=>o.tagName===e.HEADER),c=t.children.find(o=>o.tagName===e.HERO),h=t.children.find(o=>o.tagName===e.BODY),m=t.children.find(o=>o.tagName===e.FOOTER);return n.bubble({...t.attributes,header:l?i(l):void 0,hero:c?i(c):void 0,body:h?i(h):void 0,footer:m?i(m):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(l=>l.tagName!==e.BUBBLE)&&s("Carousel can only have Bubble as children"),t.children.length>12&&s("Carousel can have maximum 12 bubbles"),n.carousel(t.children.map(i));if(N.includes(t.tagName))return t.children.length!==1&&s(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||s("Button component should contain an action node"),n.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&s("Span component can only have one text child");const l=t.children[0];if(l&&l.type===g.TEXT)return n.span(l.content,t.attributes);s("Span component only allowed text child")}if(t.tagName===e.TEXT)return n.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return n.separator(t.attributes);if(t.tagName===e.IMAGE)return n.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&s("Video component should only has one Box or Image as altContent"),[e.BOX,e.IMAGE].includes(t.children[0]?.tagName)||s("Video component should only has Box or Image child as altContent"),t.attributes.altContent=i(t.children[0]),n.video(t.attributes);if(t.tagName===e.ICON)return n.icon(t.attributes);if(t.tagName===e.BOX)return n.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return n.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return n.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function d(t){try{return O(t).map(i)}catch(r){console.error("Error converting HTML to Flex Message:",r)}}u.default=d,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(b,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("htmlparser2")):typeof define=="function"&&define.amd?define(["exports","htmlparser2"],T):(b=typeof globalThis<"u"?globalThis:b||self,T(b.FlexHtmlRender={},b.htmlparser2))})(this,(function(b,T){"use strict";const E={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",FILLER:"filler",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",DIV:"div",ARTICLE:"article",ACTION:"action",BACKGROUND:"background"},U=[e.HEADER,e.HERO,e.BODY,e.FOOTER],k=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE,e.DIV,e.ARTICLE],D=[e.TEXT,e.STRONG];function X(t){const r=Number(t);return isNaN(r)?t:r}function $(t){return t==="true"?!0:t==="false"?!1:t}function H(t){return[X,$].reduce((n,s)=>s(n),t)}function G(t){const r={type:"root",children:[]},n=[r],s=new T.Parser({onopentag(l,i){const a={type:E.ELEMENT,tagName:l,attributes:Object.fromEntries(Object.entries(i).map(([h,g])=>[h,H(g)])),children:[]};n[n.length-1].children.push(a),n.push(a)},ontext(l){const i=n[n.length-1];if(i.tagName==="span"){i.children.push({type:E.TEXT,content:l});return}l.trim()&&i.children.push({type:E.TEXT,content:l.replace(/\n/g,"").trim()})},onclosetag(){n.pop()},onerror(l){console.error("解析錯誤:",l)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return s.write(t),s.end(),r.children}const p=t=>{throw Error(`[Flex Html Render]: ${t}`)},c={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),filler:(t={})=>({type:"filler",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t}),postback:(t={})=>({type:"postback",...t}),message:(t={})=>({type:"message",...t}),datetimepicker:(t={})=>({type:"datetimepicker",...t}),camera:(t={})=>({type:"camera",...t}),cameraRoll:(t={})=>({type:"cameraRoll",...t}),location:(t={})=>({type:"location",...t}),richmenuswitch:(t={})=>({type:"richmenuswitch",...t}),clipboard:(t={})=>({type:"clipboard",...t})};function F(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(n=>n.tagName===e.BACKGROUND);return r.length>1&&p("A box node can only allowed with one background node inside"),t.children=t.children.filter(n=>n.tagName!==e.BACKGROUND),r[0]}return null}function M(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(n=>n.tagName===e.ACTION);return r.length>1&&p("A node can only allowed with one action node inside"),t.children=t.children.filter(n=>n.tagName!==e.ACTION),r[0]}return null}function P(t){![...D,e.SPAN].includes(t.tagName)&&t.children?.some(l=>l.type===E.TEXT)&&(console.log(t),p("Span component only allowed inside Text component")),t.tagName===e.VIDEO&&t.children?.some(l=>![e.BOX,e.IMAGE].includes(l.tagName))&&p("Video component only allowed Box or Image as altContent child"),!k.includes(t.tagName)&&t.children?.some(l=>l.tagName===e.BACKGROUND)&&p("Only Box component allowed to have Background child")}function u(t){t.attributes=t.attributes||{},P(t);const r=M(t);r&&(t.attributes.action=u(r));const n=F(t);if(n&&(t.attributes.background=u(n)),t.type===E.TEXT)return c.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const s=t.children.find(m=>m.tagName===e.HEADER),l=t.children.find(m=>m.tagName===e.HERO),i=t.children.find(m=>m.tagName===e.BODY),a=t.children.find(m=>m.tagName===e.FOOTER);return c.bubble({...t.attributes,header:s?u(s):void 0,hero:l?u(l):void 0,body:i?u(i):void 0,footer:a?u(a):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(s=>s.tagName!==e.BUBBLE)&&p("Carousel can only have Bubble as children"),t.children.length>12&&p("Carousel can have maximum 12 bubbles"),c.carousel(t.children.map(u));if(U.includes(t.tagName))return t.children.length!==1&&p(`${t.tagName} should have exactly one child node`),u(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||p("Button component should contain an action node"),c.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&p("Span component can only have one text child");const s=t.children[0];if(s&&s.type===E.TEXT)return c.span(s.content,t.attributes);p(s?"Span component only allowed text child":"Span component can not be empty")}if(t.tagName===e.TEXT)return c.text(t.children.map(u),t.attributes);if(t.tagName===e.SEPARATOR)return c.separator(t.attributes);if(t.tagName===e.IMAGE)return c.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&p("Video component should only has one Box or Image as altContent"),t.attributes.altContent=u(t.children[0]),c.video(t.attributes);if(t.tagName===e.ICON)return c.icon(t.attributes);if(t.tagName===e.FILLER)return c.filler(t.attributes);if(t.tagName===e.BOX||t.tagName===e.DIV||t.tagName===e.ARTICLE)return t.attributes.layout||(t.attributes.layout="vertical"),c.box(t.children.map(u),t.attributes);if(t.tagName===e.SPACE)return c.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",u(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",u(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",u(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",u(t);if(t.tagName===e.ACTION){const s=t.attributes.type;switch(s){case"uri":return c.uri(t.attributes);case"postback":return c.postback(t.attributes);case"message":return c.message(t.attributes);case"datetimepicker":return c.datetimepicker(t.attributes);case"camera":return c.camera(t.attributes);case"cameraRoll":return c.cameraRoll(t.attributes);case"location":return c.location(t.attributes);case"richmenuswitch":return c.richmenuswitch(t.attributes);case"clipboard":return c.clipboard(t.attributes);default:p(`Unsupported action type: ${s}`)}}if(t.tagName===e.BACKGROUND)return t.attributes}const o={createElement:(t,r={},n=[],s=0)=>{const i=Object.entries(r).filter(([m,h])=>h!=null).map(([m,h])=>typeof h=="object"?`${m}="${JSON.stringify(h).replace(/"/g,"&quot;")}"`:`${m}="${h}"`).join(" "),a=i?` ${i}`:"";if(n.length===0)return`  <${t}${a} />`;{const m=n.map(h=>typeof h=="string"?h.split(`
+`).map(g=>g?"  "+g:"").join(`
+`):h).join(`
+`);return`  <${t}${a}>
+${m}
+  </${t}>`}},createText:t=>t};function f(t,r=0){if(!t||typeof t!="object")return"";const{type:n,...s}=t,{action:l,...i}=s,a=l?f(l,r+1):"";switch(n){case"carousel":const{contents:m,...h}=i,g=m.map(O=>f(O,r+1));return a&&g.unshift(a),o.createElement(e.CAROUSEL,h,g,r);case"bubble":const{header:d,hero:R,body:B,footer:x,...j}=i,N=[];return a&&N.push(a),d&&N.push(o.createElement(e.HEADER,{},[f(d,r+1)],r+1)),R&&N.push(o.createElement(e.HERO,{},[f(R,r+1)],r+1)),B&&N.push(o.createElement(e.BODY,{},[f(B,r+1)],r+1)),x&&N.push(o.createElement(e.FOOTER,{},[f(x,r+1)],r+1)),o.createElement(e.BUBBLE,j,N,r);case"box":const{contents:K,background:S,...A}=i;A.layout||(A.layout="vertical");const y=[];return a&&y.push(a),S&&y.push(f({type:"background",...S},r+1)),y.push(...(K||[]).map(O=>f(O,r+1))),o.createElement(e.BOX,A,y,r);case"text":const{text:J,contents:C,...Y}=i,I=C&&C.length>0?C.map(O=>f(O,r+1)):[J||""];return a&&I.unshift(a),o.createElement(e.TEXT,Y,I,r);case"span":const{text:W,...q}=i,v=[W||""];return a&&v.unshift(a),o.createElement(e.SPAN,q,v,r);case"image":const{...z}=i,_=a?[a]:[];return o.createElement(e.IMAGE,z,_,r);case"video":const{altContent:L,...Q}=i,w=L?[f(L,r+1)]:[];return a&&w.unshift(a),o.createElement(e.VIDEO,Q,w,r);case"icon":const{...Z}=i,tt=a?[a]:[];return o.createElement(e.ICON,Z,tt,r);case"button":const{...et}=i,rt=a?[a]:[];return o.createElement(e.BUTTON,et,rt,r);case"separator":const at=a?[a]:[];return o.createElement(e.SEPARATOR,i,at,r);case"filler":const nt=a?[a]:[];return o.createElement(e.FILLER,i,nt,r);case"uri":case"message":case"postback":case"datetimepicker":case"camera":case"cameraRoll":case"location":case"richmenuswitch":case"clipboard":return o.createElement(e.ACTION,{type:n,...i},[],r);case"background":return o.createElement(e.BACKGROUND,i,[],r);default:return""}}function V(t){try{return G(t).map(u)}catch(r){throw console.error("Error converting HTML to Flex Message:",r),r}}b.convertJsonToHtml=f,b.default=V,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/index.d.ts

@@ -3,9 +3,4 @@
  * @param htmlString - Flex Message 對應的 HTML 字串
  * @returns Flex Message JSON 物件陣列
  */
-export default function convertHtmlToFlexMessage(htmlString: string): any[];
-
-/**
- * 官方範例 HTML 字串
- */
-export const officialDemoString: string;
+export default function convertHtmlToFlexMessage(htmlString: string): any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flex-html-render",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "將 HTML 字串轉換為 LINE Flex Message JSON 結構的工具",
   "type": "module",
   "main": "dist/flex-html-render.cjs.js",