feat: added lighbox markup in import html

src/core/import-html/html-to-json.ts

@@ -71,7 +71,10 @@ const ATTRIBUTE_MAP: Record<string, Record<string, string>> = {
 const shouldAddText = (node: Node, block: any) => {
   return (
     node.children.length === 1 &&
-    includes(["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link"], block._type)
+    includes(
+      ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
+      block._type,
+    )
   );
 };
 
@@ -151,6 +154,20 @@ const getStyles = (node: Node, propKey: string = "styles"): Record<string, strin
 };
 
 const getBlockProps = (node: Node): Record<string, any> => {
+  const attributes = get(node, "attributes", []);
+  const isRichText = attributes.find((attr) => attr.key === "data-chai-richtext");
+  const isLightboxLink = attributes.find((attr) => attr.key === "data-chai-lightbox");
+
+  // Check for special attributes first
+  if (isRichText) {
+    return { _type: "RichText" };
+  }
+
+  if (isLightboxLink) {
+    return { _type: "LightBoxLink" };
+  }
+
+  // Default block props based on tag
   switch (node.tagName) {
     // self closing tags
     case "img":
@@ -199,8 +216,10 @@ const getBlockProps = (node: Node): Record<string, any> => {
       return { _type: "Span", tag: node.tagName };
     case "p":
       return { _type: "Paragraph", content: "" };
-    case "a":
-      return { _type: "Link" };
+    case "a": {
+      const isLightboxLink = get(node, "attributes", []).find((attr) => attr.key === "data-chai-lightbox");
+      return { _type: isLightboxLink ? "LightBoxLink" : "Link" };
+    }
     case "form":
       return { _type: "Form" };
     case "label":
@@ -229,14 +248,14 @@ const getBlockProps = (node: Node): Record<string, any> => {
       return { _type: "TableBody" };
     case "tfoot":
       return { _type: "TableFooter" };
-
-    default:
+    case "div": {
       const type = get(node, "children", []).length > 0 ? "Box" : "EmptyBox";
       return {
         _type: type,
         tag: node.tagName,
         _name: type == "EmptyBox" ? type : node.tagName === "div" ? type : capitalize(node.tagName),
       };
+    }
   }
 };
 
@@ -255,7 +274,7 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
     let block: Partial<ChaiBlock> = { _id: generateUUID() };
     if (parent) block._parent = parent.block._id;
 
-    /**
+     /**
      * @handling_textcontent
      * Checking if parent exist
      * If parent has only one children and current node type is text
@@ -291,6 +310,47 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
       }
     }
 
+    const style_attributes = get(node, "attributes", []);
+    const isRichText = style_attributes.find((attr) => attr.key === "data-chai-richtext");
+    const isLightboxLink = style_attributes.find((attr) => attr.key === "data-chai-lightbox");
+
+    if (isRichText) {
+      block.content = stringify(node.children);
+      // Remove richtext attribute
+      delete block.attrs?.['data-chai-richtext'];
+      block.styles_attrs = style_attributes.filter(attr => attr.key !== "data-chai-richtext");
+      return [block] as ChaiBlock[];
+    }
+
+    if (isLightboxLink) {
+      const lightboxAttrs = [
+        'data-chai-lightbox',
+        'data-vbtype',
+        'data-autoplay',
+        'data-maxwidth',
+        'data-overlay',
+        'data-gall'
+      ];
+
+      block = {
+        ...block,
+        href: style_attributes.find((attr) => attr.key === "href")?.value || "",
+        hrefType: style_attributes.find((attr) => attr.key === "data-vbtype")?.value || "video",
+        autoplay: style_attributes.find((attr) => attr.key === "data-autoplay")?.value === "true",
+        maxWidth: style_attributes.find((attr) => attr.key === "data-maxwidth")?.value?.replace("px", "") || "",
+        backdropColor: style_attributes.find((attr) => attr.key === "data-overlay")?.value || "",
+        galleryName: style_attributes.find((attr) => attr.key === "data-gall")?.value || "",
+      };
+
+      // Remove from attrs
+      lightboxAttrs.forEach(attr => {
+        if (block.attrs) delete block.attrs[attr];
+      });
+
+      // Remove from style_attributes
+      block.styles_attrs = style_attributes.filter(attr => !lightboxAttrs.includes(attr.key));
+    }
+
     if (block._type === "Input") {
       /**
        * hanlding input tag mapping type to input type
@@ -314,7 +374,6 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
        * handling svg tag
        * if svg tag just pass html stringify content as icon
        */
-
       const svgHeight = find(node.attributes, { key: "height" });
       const svgWidth = find(node.attributes, { key: "width" });
       const height = get(svgHeight, "value") ? `[${get(svgHeight, "value")}px]` : "24px";