feat: added lighbox markup in import html

src/__dev/preview/WebPreview.tsx

@@ -95,7 +95,7 @@ export const IframeInitialContent = (fonts: string, html: string): string => `<!
     <script>
       AOS.init();
       new VenoBox({
-        selector: '.cb-lightbox',
+        selector: '[chai-lightbox]',
       });
       function addClickEventToLinks() {
         document.querySelectorAll('a').forEach(link => {

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 === "chai-richtext");
+  const isLightboxLink = attributes.find((attr) => attr.key === "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 === "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,14 +274,6 @@ 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
-     * checking does parent block type support content
-     * setting parent content to current node text content
-     * returning empty node
-     */
     if (node.type === "text") {
       if (isEmpty(get(node, "content", ""))) return [] as any;
       if (parent) {
@@ -282,20 +293,39 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
       ...getStyles(node),
     };
 
-    // node has a x-name attribute. set the _name of the block to the value of x-name and
-    // remove the attribute from the node
+    // Handle x-name attribute
     if (node.attributes) {
       const xName = node.attributes.find((attr) => attr.key === NAME_ATTRIBUTE);
       if (xName) {
         block._name = xName.value;
       }
     }
 
+    // Check for special attributes
+    const attributes = get(node, "attributes", []);
+    const isRichText = attributes.find((attr) => attr.key === "chai-richtext");
+    const isLightboxLink = attributes.find((attr) => attr.key === "chai-lightbox");
+
+    if (isRichText) {
+      block._type = "RichText";
+      block.content = stringify(node.children);
+      return [block] as ChaiBlock[];
+    }
+
+    if (isLightboxLink) {
+      block._type = "LightBoxLink";
+      block = {
+        ...block,
+        href: attributes.find((attr) => attr.key === "href")?.value || "",
+        hrefType: attributes.find((attr) => attr.key === "data-vbtype")?.value || "video",
+        autoplay: attributes.find((attr) => attr.key === "data-autoplay")?.value === "true",
+        maxWidth: attributes.find((attr) => attr.key === "data-maxwidth")?.value?.replace("px", "") || "",
+        backdropColor: attributes.find((attr) => attr.key === "data-overlay")?.value || "",
+        galleryName: attributes.find((attr) => attr.key === "data-gall")?.value || "",
+      };
+    }
+
     if (block._type === "Input") {
-      /**
-       * hanlding input tag mapping type to input type
-       * setting block _type to non-standard inputs like checkbox, radio, range, file
-       */
       const inputType = block.inputType || "text";
       if (inputType === "checkbox") set(block, "_type", "Checkbox");
       else if (inputType === "radio") set(block, "_type", "Radio");
@@ -310,11 +340,6 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
       block.content = innerHTML;
       return [block] as ChaiBlock[];
     } else if (node.tagName === "svg") {
-      /**
-       * 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";
@@ -326,10 +351,6 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => {
       block.icon = stringify([node]);
       return [block] as ChaiBlock[];
     } else if (node.tagName == "option" && parent && parent.block?._type === "Select") {
-      /**
-       * mapping select options as underscore options
-       * for label extracting string from all option child and mapping all attributes
-       */
       parent.block.options.push({
         label: getTextContent(node.children),
         ...getAttrs(node),