diff --git a/src/Editor.tsx b/src/Editor.tsx index 5520b9a2..22efad9b 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -39,7 +39,7 @@ function ChaiBuilderDefault() { // languages={["en"]} unsplashAccessKey={"import.meta.env.VITE_UNSPLASH_ACCESS_KEY"} autoSaveSupport={true} - autoSaveInterval={5} + autoSaveInterval={15} previewComponent={PreviewWeb} blocks={blocks} brandingOptions={brandingOptions} diff --git a/src/__dev/mock/template.html b/src/__dev/mock/template.html new file mode 100644 index 00000000..718ea0ca --- /dev/null +++ b/src/__dev/mock/template.html @@ -0,0 +1,10 @@ + + + Image + + + +
+

Hello World

+

Hello World

+
diff --git a/src/core/import-html/html-to-json.ts b/src/core/import-html/html-to-json.ts index 92406617..deefec5a 100644 --- a/src/core/import-html/html-to-json.ts +++ b/src/core/import-html/html-to-json.ts @@ -155,8 +155,8 @@ const getStyles = (node: Node, propKey: string = "styles"): Record => { 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"); + const isRichText = attributes.find((attr) => attr.key === "data-chai-richtext" || attr.key === "chai-richtext"); + const isLightboxLink = attributes.find((attr) => attr.key === "data-chai-lightbox" || attr.key === "chai-lightbox"); // Check for special attributes first if (isRichText) { @@ -216,10 +216,8 @@ const getBlockProps = (node: Node): Record => { return { _type: "Span", tag: node.tagName }; case "p": return { _type: "Paragraph", content: "" }; - case "a": { - const isLightboxLink = get(node, "attributes", []).find((attr) => attr.key === "data-chai-lightbox"); - return { _type: isLightboxLink ? "LightBoxLink" : "Link" }; - } + case "a": + return { _type: "Link" }; case "form": return { _type: "Form" }; case "label": @@ -274,7 +272,7 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => { let block: Partial = { _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 @@ -293,6 +291,14 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => { return { ...block, _type: "Text", content: get(node, "content", "") }; } + const styleAttributes = get(node, "attributes", []); + const isRichText = styleAttributes.find( + (attr) => attr.key === "data-chai-richtext" || attr.key === "chai-richtext", + ); + const isLightboxLink = styleAttributes.find( + (attr) => attr.key === "data-chai-lightbox" || attr.key === "chai-lightbox", + ); + // * Adding default block props, default attrs and default style block = { ...block, @@ -310,45 +316,41 @@ 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"); + if (has(block, "styles_attrs.data-chai-richtext")) { + delete block.styles_attrs["data-chai-richtext"]; + } + if (has(block, "styles_attrs.chai-richtext")) { + delete block.styles_attrs["chai-richtext"]; + } return [block] as ChaiBlock[]; } if (isLightboxLink) { const lightboxAttrs = [ - 'data-chai-lightbox', - 'data-vbtype', - 'data-autoplay', - 'data-maxwidth', - 'data-overlay', - 'data-gall' + "data-chai-lightbox", + "chai-lightbox", + "data-vbtype", + "data-autoplay", + "data-maxwidth", + "data-overlay", + "data-gall", + "href", ]; 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 || "", + href: styleAttributes.find((attr) => attr.key === "href")?.value || "", + hrefType: styleAttributes.find((attr) => attr.key === "data-vbtype")?.value || "video", + autoplay: styleAttributes.find((attr) => attr.key === "data-autoplay")?.value === "true", + maxWidth: styleAttributes.find((attr) => attr.key === "data-maxwidth")?.value?.replace("px", "") || "", + backdropColor: styleAttributes.find((attr) => attr.key === "data-overlay")?.value || "", + galleryName: styleAttributes.find((attr) => attr.key === "data-gall")?.value || "", }; - - // Remove from attrs - lightboxAttrs.forEach(attr => { - if (block.attrs) delete block.attrs[attr]; + forEach(lightboxAttrs, (attr) => { + if (has(block, `styles_attrs.${attr}`)) delete block.styles_attrs[attr]; }); - - // Remove from style_attributes - block.styles_attrs = style_attributes.filter(attr => !lightboxAttrs.includes(attr.key)); } if (block._type === "Input") { @@ -396,6 +398,8 @@ const traverseNodes = (nodes: Node[], parent: any = null): ChaiBlock[] => { return [] as any; } + console.log(block); + const children = traverseNodes(node.children, { block, node }); return [block, ...children] as ChaiBlock[]; });