@peak-ai/canvas 1.3.8-rc.2 → 1.3.8-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GrapesjsCanvas.js +1 -1
- package/GrapesjsCanvas.js.map +1 -1
- package/package.json +1 -1
package/GrapesjsCanvas.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _extends from"@babel/runtime/helpers/extends";import _regeneratorRuntime from"@babel/runtime/regenerator";/* eslint-disable @typescript-eslint/no-explicit-any */import React,{useEffect,useRef}from"react";// eslint-disable-next-line import/no-named-as-default
|
|
2
|
-
import grapesjs from"grapesjs";import"grapesjs/dist/css/grapes.min.css";import tailwind from"grapesjs-tailwind";import{TypesToRegister}from"./constants";import{toKebabCase}from"./helpers";import{createGrapesjsShadcnGenericPlugin}from"./plugins/grapejs-plugin";import{StyledEditor}from"./index.styles";import{tailwindCompiledCss}from"./helpers/css";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function setComponentProperties(editor,isPreview){function setPropertiesRecursively(comp){comp.set({editable:!isPreview,draggable:!isPreview,droppable:!isPreview&&comp.getName()!=="Shadcn-generic",selectable:!isPreview,hoverable:!isPreview,highlightable:!isPreview,copyable:false,resizable:false,removable:!isPreview,badgable:false});if(!isPreview){comp.set("toolbar",[{attributes:{"class":"fa fa-arrows"},command:"tlb-move"},{attributes:{"class":"fa fa-trash"},command:"tlb-delete"}])}comp.components().forEach(setPropertiesRecursively)}if(isPreview){editor.runCommand("core:preview")}else{editor.stopCommand("core:preview")}var wrapper=editor.getWrapper();wrapper==null||wrapper.find("*").forEach(setPropertiesRecursively)}function convertStyles(stylesArray){return stylesArray.map(function(block){var selectors=Array.isArray(block.selectors)?block.selectors.join(", "):block.selectors;var declarations=Object.entries(block.style).map(function(_ref){var prop=_ref[0],value=_ref[1];return toKebabCase(prop)+": "+value+";"}).join(" ");return selectors+" { "+declarations+" }"}).join("\n")}function expandActions(node){var _node$componentProps;if(node.type==="shadcn-generic"&&node.componentName==="Actions"&&Array.isArray((_node$componentProps=node.componentProps)==null?void 0:_node$componentProps.actions)){var actions=node.componentProps.actions;return _extends({},node,{type:"div",classes:["dashboard-cards"].concat(node.classes||[]),componentName:undefined,componentProps:undefined,components:actions.map(function(action,i){var icon=action.icon,title=action.title,description=action.description;return{id:node.id+"--action-card-"+i,type:"shadcn-generic",componentName:"ActionCard",badgable:false,copyable:false,componentProps:{icon:icon,headerContent:title,bodyContent:description}}})})}if(Array.isArray(node.components)){return _extends({},node,{components:node.components.map(expandActions)})}return node}function setInteracting(renderedComponents,components,inProgress){components.forEach(function(component){var componentId=component.componentId,showLoader=component.showLoader;if(!showLoader){return}var gjsModel=renderedComponents[componentId];if(gjsModel){gjsModel.set("attributes",_extends({},gjsModel.get("attributes"),{interactionApiInProgress:inProgress}))}})}function GrapesjsCanvas(_ref2){var json=_ref2.json,_ref2$mode=_ref2.mode,mode=_ref2$mode===void 0?"preview":_ref2$mode,setEditor=_ref2.setEditor,performInteraction=_ref2.performInteraction,_ref2$newDataNotifier=_ref2.newDataNotifier,newDataNotifier=_ref2$newDataNotifier===void 0?function(){}:_ref2$newDataNotifier;var editorRef=useRef(null);var editorInstance=useRef(null);var renderedComponents={};function notificationHandler(props){if(!props){return true}var componentId=props.componentId,newProps=props.newProps,newAttributes=props.newAttributes;var model=renderedComponents[componentId];if(!model){return false}model.set("componentProps",_extends({},model.get("componentProps"),
|
|
2
|
+
import grapesjs from"grapesjs";import"grapesjs/dist/css/grapes.min.css";import tailwind from"grapesjs-tailwind";import{TypesToRegister}from"./constants";import{toKebabCase}from"./helpers";import{createGrapesjsShadcnGenericPlugin}from"./plugins/grapejs-plugin";import{StyledEditor}from"./index.styles";import{tailwindCompiledCss}from"./helpers/css";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function setComponentProperties(editor,isPreview){function setPropertiesRecursively(comp){comp.set({editable:!isPreview,draggable:!isPreview,droppable:!isPreview&&comp.getName()!=="Shadcn-generic",selectable:!isPreview,hoverable:!isPreview,highlightable:!isPreview,copyable:false,resizable:false,removable:!isPreview,badgable:false});if(!isPreview){comp.set("toolbar",[{attributes:{"class":"fa fa-arrows"},command:"tlb-move"},{attributes:{"class":"fa fa-trash"},command:"tlb-delete"}])}comp.components().forEach(setPropertiesRecursively)}if(isPreview){editor.runCommand("core:preview")}else{editor.stopCommand("core:preview")}var wrapper=editor.getWrapper();wrapper==null||wrapper.find("*").forEach(setPropertiesRecursively)}function convertStyles(stylesArray){return stylesArray.map(function(block){var selectors=Array.isArray(block.selectors)?block.selectors.join(", "):block.selectors;var declarations=Object.entries(block.style).map(function(_ref){var prop=_ref[0],value=_ref[1];return toKebabCase(prop)+": "+value+";"}).join(" ");return selectors+" { "+declarations+" }"}).join("\n")}function expandActions(node){var _node$componentProps;if(node.type==="shadcn-generic"&&node.componentName==="Actions"&&Array.isArray((_node$componentProps=node.componentProps)==null?void 0:_node$componentProps.actions)){var actions=node.componentProps.actions;return _extends({},node,{type:"div",classes:["dashboard-cards"].concat(node.classes||[]),componentName:undefined,componentProps:undefined,components:actions.map(function(action,i){var icon=action.icon,title=action.title,description=action.description;return{id:node.id+"--action-card-"+i,type:"shadcn-generic",componentName:"ActionCard",badgable:false,copyable:false,componentProps:{icon:icon,headerContent:title,bodyContent:description}}})})}if(Array.isArray(node.components)){return _extends({},node,{components:node.components.map(expandActions)})}return node}function setInteracting(renderedComponents,components,inProgress){components.forEach(function(component){var componentId=component.componentId,showLoader=component.showLoader;if(!showLoader){return}var gjsModel=renderedComponents[componentId];if(gjsModel){gjsModel.set("attributes",_extends({},gjsModel.get("attributes"),{interactionApiInProgress:inProgress}))}})}function GrapesjsCanvas(_ref2){var json=_ref2.json,_ref2$mode=_ref2.mode,mode=_ref2$mode===void 0?"preview":_ref2$mode,setEditor=_ref2.setEditor,performInteraction=_ref2.performInteraction,_ref2$newDataNotifier=_ref2.newDataNotifier,newDataNotifier=_ref2$newDataNotifier===void 0?function(){}:_ref2$newDataNotifier;var editorRef=useRef(null);var editorInstance=useRef(null);var renderedComponents={};function notificationHandler(props){if(!props){return true}var componentId=props.componentId,newProps=props.newProps,newAttributes=props.newAttributes;var model=renderedComponents[componentId];if(!model){return false}var parsedNewProps=_extends({},newProps);if(newProps.pagination){parsedNewProps.pagination=_extends({},model.get("componentProps").pagination||{},newProps.pagination)}model.set("componentProps",_extends({},model.get("componentProps"),parsedNewProps));model.set("attributes",_extends({},model.get("attributes"),newAttributes));return true}useEffect(function(){newDataNotifier(notificationHandler)},[]);function performInteractionWrapper(_x){return _performInteractionWrapper.apply(this,arguments)}function _performInteractionWrapper(){_performInteractionWrapper=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(payload){var _editorInstance$curre;var updatedJson,result;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return(_editorInstance$curre=editorInstance.current)==null?void 0:_editorInstance$curre.store();case 2:updatedJson=_context.sent;setInteracting(renderedComponents,payload.affectedComponents,true);_context.prev=4;_context.next=7;return performInteraction(_extends({},payload,{json:updatedJson}));case 7:result=_context.sent;Object.entries(result||{}).forEach(function(_ref4){var key=_ref4[0],value=_ref4[1];var model=renderedComponents[key];if(model){model.set("componentProps",_extends({},model.get("componentProps"),value))}});return _context.abrupt("return",result);case 10:_context.prev=10;setInteracting(renderedComponents,payload.affectedComponents,false);return _context.finish(10);case 13:case"end":return _context.stop()}},_callee,null,[[4,,10,13]])}));return _performInteractionWrapper.apply(this,arguments)}useEffect(function(){var _json$pages,_json$pages$0$frames;if(!editorRef.current){return function(){// Cleanup if editorRef is not available
|
|
3
3
|
}}if(editorInstance.current){editorInstance.current.destroy();editorInstance.current=null}var currentMode=mode;var editor=grapesjs.init({container:editorRef.current,height:"100%",plugins:[tailwind,createGrapesjsShadcnGenericPlugin(currentMode,performInteractionWrapper,renderedComponents)],storageManager:{type:"none"},richTextEditor:{actions:["bold","italic","underline","strikethrough"]},canvas:{customBadgeLabel:function customBadgeLabel(component){var tagName=component.get("tagName");return tagName==="body"?"":tagName||""}}});// Tailwind CSS rules aren't fully added to our component
|
|
4
4
|
// So, adding them from here!
|
|
5
5
|
editor.on("load",function(){var canvasHead=editor.Canvas.getDocument().head;var style=document.createElement("style");var fullCss="\n "+tailwindCompiledCss+"\n ::-webkit-scrollbar {\n width: 0px;\n height: 0px;\n }\n html, body {\n overflow: auto !important;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n ";style.innerHTML=fullCss;style.setAttribute("type","text/css");canvasHead.appendChild(style)});editorInstance.current=editor;if(setEditor){setEditor(editor)}TypesToRegister.forEach(function(_ref3){var type=_ref3.type,tagName=_ref3.tagName;if(!editor.DomComponents.getType(type)){editor.DomComponents.addType(type,{model:{defaults:{tagName:tagName}},view:{}})}});if(json&&((_json$pages=json.pages)==null?void 0:_json$pages.length)>0&&((_json$pages$0$frames=json.pages[0].frames)==null?void 0:_json$pages$0$frames.length)>0){var raw=json.pages[0].frames[0].component;var processed=expandActions(raw);editor.setComponents(processed);var cssText=convertStyles(json.styles||[]);editor.setStyle(cssText)}editor.on("load",function(){setComponentProperties(editor,mode==="preview")});return function(){editor.destroy()};// eslint-disable-next-line @typescript-eslint/no-empty-function
|
package/GrapesjsCanvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrapesjsCanvas.js","names":["React","useEffect","useRef","grapesjs","tailwind","TypesToRegister","toKebabCase","createGrapesjsShadcnGenericPlugin","StyledEditor","tailwindCompiledCss","jsx","_jsx","jsxs","_jsxs","setComponentProperties","editor","isPreview","setPropertiesRecursively","comp","set","editable","draggable","droppable","getName","selectable","hoverable","highlightable","copyable","resizable","removable","badgable","attributes","command","components","forEach","runCommand","stopCommand","wrapper","getWrapper","find","convertStyles","stylesArray","map","block","selectors","Array","isArray","join","declarations","Object","entries","style","_ref","prop","value","expandActions","node","_node$componentProps","type","componentName","componentProps","actions","_extends","classes","concat","undefined","action","i","icon","title","description","id","headerContent","bodyContent","setInteracting","renderedComponents","inProgress","component","componentId","showLoader","gjsModel","get","interactionApiInProgress","GrapesjsCanvas","_ref2","json","_ref2$mode","mode","setEditor","performInteraction","_ref2$newDataNotifier","newDataNotifier","editorRef","editorInstance","notificationHandler","props","newProps","newAttributes","model","performInteractionWrapper","_x","_performInteractionWrapper","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","payload","_editorInstance$curre","updatedJson","result","wrap","_callee$","_context","prev","next","current","store","sent","affectedComponents","_ref4","key","abrupt","finish","stop","_json$pages","_json$pages$0$frames","destroy","currentMode","init","container","height","plugins","storageManager","richTextEditor","canvas","customBadgeLabel","tagName","on","canvasHead","Canvas","getDocument","head","document","createElement","fullCss","innerHTML","setAttribute","appendChild","_ref3","DomComponents","getType","addType","defaults","view","pages","length","frames","raw","processed","setComponents","cssText","styles","setStyle","Fragment","children","ref"],"sources":["../src/GrapesjsCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useRef } from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport grapesjs, { Component, Editor } from 'grapesjs';\nimport 'grapesjs/dist/css/grapes.min.css';\nimport tailwind from 'grapesjs-tailwind';\nimport { TypesToRegister } from './constants';\nimport { toKebabCase } from './helpers';\nimport { createGrapesjsShadcnGenericPlugin } from './plugins/grapejs-plugin';\nimport { StyledEditor } from './index.styles';\nimport { tailwindCompiledCss } from './helpers/css';\n\ntype NotificationHandler = (newData: {\n componentId: string;\n newProps: Record<string, any>;\n newAttributes: Record<string, any>;\n}) => boolean;\n\ntype GrapesjsCanvasProps = {\n json: any;\n mode?: 'editor' | 'preview';\n setEditor: (editor: Editor) => void;\n performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;\n newDataNotifier: (notifHandler: NotificationHandler) => void\n};\n\nfunction setComponentProperties(editor: Editor, isPreview: boolean) {\n function setPropertiesRecursively(comp: Component) {\n comp.set({\n editable: !isPreview,\n draggable: !isPreview,\n droppable: !isPreview && comp.getName() !== 'Shadcn-generic',\n selectable: !isPreview,\n hoverable: !isPreview,\n highlightable: !isPreview,\n copyable: false,\n resizable: false,\n removable: !isPreview,\n badgable: false,\n });\n\n if (!isPreview) {\n comp.set('toolbar', [\n { attributes: { class: 'fa fa-arrows' }, command: 'tlb-move' },\n { attributes: { class: 'fa fa-trash' }, command: 'tlb-delete' },\n ]);\n }\n\n comp.components().forEach(setPropertiesRecursively);\n }\n\n if (isPreview) {\n editor.runCommand('core:preview');\n } else {\n editor.stopCommand('core:preview');\n }\n\n const wrapper = editor.getWrapper();\n wrapper?.find('*').forEach(setPropertiesRecursively);\n}\n\nfunction convertStyles(stylesArray: any[]): string {\n return stylesArray\n .map((block) => {\n const selectors = Array.isArray(block.selectors)\n ? block.selectors.join(', ')\n : block.selectors;\n const declarations = Object.entries(block.style)\n .map(([prop, value]) => `${toKebabCase(prop)}: ${value};`)\n .join(' ');\n\n return `${selectors} { ${declarations} }`;\n })\n .join('\\n');\n}\n\nfunction expandActions(node: any): any {\n if (\n node.type === 'shadcn-generic' &&\n node.componentName === 'Actions' &&\n Array.isArray(node.componentProps?.actions)\n ) {\n const { actions } = node.componentProps;\n\n return {\n ...node,\n type: 'div',\n classes: ['dashboard-cards', ...(node.classes || [])],\n componentName: undefined,\n componentProps: undefined,\n components: actions.map((action: any, i: number) => {\n const { icon, title, description } = action;\n\n return {\n id: `${node.id}--action-card-${i}`,\n type: 'shadcn-generic',\n componentName: 'ActionCard',\n badgable: false,\n copyable: false,\n componentProps: {\n icon,\n headerContent: title,\n bodyContent: description,\n },\n };\n }),\n };\n }\n\n if (Array.isArray(node.components)) {\n return {\n ...node,\n components: node.components.map(expandActions),\n };\n }\n\n return node;\n}\n\nfunction setInteracting(\n renderedComponents: Record<string, Component>,\n components: { componentId: string; showLoader: boolean }[],\n inProgress: boolean,\n) {\n components.forEach((component) => {\n const { componentId, showLoader } = component;\n\n if (!showLoader) {\n return;\n }\n\n const gjsModel = renderedComponents[componentId];\n \n if (gjsModel) {\n gjsModel.set('attributes', {\n ...gjsModel.get('attributes'),\n interactionApiInProgress: inProgress,\n });\n }\n });\n}\n\nfunction GrapesjsCanvas({\n json,\n mode = 'preview',\n setEditor,\n performInteraction,\n newDataNotifier = () => {},\n}: GrapesjsCanvasProps) {\n const editorRef = useRef<HTMLDivElement>(null);\n const editorInstance = useRef<any>(null);\n const renderedComponents: Record<string, Component> = {};\n\n function notificationHandler(props: Parameters<NotificationHandler>[0]): ReturnType<NotificationHandler> {\n if (!props) {\n return true;\n }\n\n const {\n componentId,\n newProps,\n newAttributes,\n } = props;\n const model = renderedComponents[componentId];\n\n if (!model) {\n return false;\n }\n\n model.set('componentProps', {\n ...model.get('componentProps'),\n ...newProps,\n });\n\n model.set('attributes', {\n ...model.get('attributes'),\n ...newAttributes,\n });\n\n return true;\n }\n\n useEffect(() => {\n newDataNotifier(notificationHandler);\n }, []);\n\n async function performInteractionWrapper(payload: Record<string, any>) {\n const updatedJson = await editorInstance.current?.store();\n setInteracting(renderedComponents, payload.affectedComponents, true);\n\n try {\n const result = await performInteraction({\n ...payload,\n json: updatedJson,\n });\n\n Object.entries(result || {}).forEach(([key, value]) => {\n const model = renderedComponents[key];\n\n if (model) {\n model.set('componentProps', {\n ...model.get('componentProps'),\n ...value,\n });\n }\n });\n\n return result;\n } finally {\n setInteracting(renderedComponents, payload.affectedComponents, false);\n }\n }\n\n useEffect(() => {\n if (!editorRef.current) {\n return () => {\n // Cleanup if editorRef is not available\n };\n }\n\n if (editorInstance.current) {\n editorInstance.current.destroy();\n editorInstance.current = null;\n }\n\n const currentMode = mode;\n\n const editor = grapesjs.init({\n container: editorRef.current,\n height: '100%',\n plugins: [\n tailwind,\n createGrapesjsShadcnGenericPlugin(\n currentMode,\n performInteractionWrapper,\n renderedComponents,\n ),\n ],\n storageManager: { type: 'none' },\n richTextEditor: {\n actions: ['bold', 'italic', 'underline', 'strikethrough'],\n },\n canvas: {\n customBadgeLabel: (component) => {\n const tagName = component.get('tagName');\n \n return tagName === 'body' ? '' : (tagName || '');\n },\n },\n });\n\n // Tailwind CSS rules aren't fully added to our component\n // So, adding them from here!\n editor.on('load', () => {\n const canvasHead = editor.Canvas.getDocument().head;\n const style = document.createElement('style');\n const fullCss = `\n ${tailwindCompiledCss}\n ::-webkit-scrollbar {\n width: 0px;\n height: 0px;\n }\n html, body {\n overflow: auto !important;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n `;\n style.innerHTML = fullCss;\n style.setAttribute('type', 'text/css');\n canvasHead.appendChild(style);\n });\n\n editorInstance.current = editor;\n\n if (setEditor) {\n setEditor(editor);\n }\n\n TypesToRegister.forEach(({ type, tagName }) => {\n if (!editor.DomComponents.getType(type)) {\n editor.DomComponents.addType(type, {\n model: {\n defaults: { tagName },\n },\n view: {},\n });\n }\n });\n\n if (json && json.pages?.length > 0 && json.pages[0].frames?.length > 0) {\n const raw = json.pages[0].frames[0].component;\n const processed = expandActions(raw);\n editor.setComponents(processed);\n\n const cssText = convertStyles(json.styles || []);\n editor.setStyle(cssText);\n }\n\n editor.on('load', () => {\n setComponentProperties(editor, mode === 'preview');\n });\n\n return () => {\n editor.destroy();\n };\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n }, [json, mode]);\n\n return (\n <React.Fragment>\n <StyledEditor />\n <div ref={editorRef} />\n </React.Fragment>\n );\n}\n\nexport default GrapesjsCanvas;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"GrapesjsCanvas.js","names":["React","useEffect","useRef","grapesjs","tailwind","TypesToRegister","toKebabCase","createGrapesjsShadcnGenericPlugin","StyledEditor","tailwindCompiledCss","jsx","_jsx","jsxs","_jsxs","setComponentProperties","editor","isPreview","setPropertiesRecursively","comp","set","editable","draggable","droppable","getName","selectable","hoverable","highlightable","copyable","resizable","removable","badgable","attributes","command","components","forEach","runCommand","stopCommand","wrapper","getWrapper","find","convertStyles","stylesArray","map","block","selectors","Array","isArray","join","declarations","Object","entries","style","_ref","prop","value","expandActions","node","_node$componentProps","type","componentName","componentProps","actions","_extends","classes","concat","undefined","action","i","icon","title","description","id","headerContent","bodyContent","setInteracting","renderedComponents","inProgress","component","componentId","showLoader","gjsModel","get","interactionApiInProgress","GrapesjsCanvas","_ref2","json","_ref2$mode","mode","setEditor","performInteraction","_ref2$newDataNotifier","newDataNotifier","editorRef","editorInstance","notificationHandler","props","newProps","newAttributes","model","parsedNewProps","pagination","performInteractionWrapper","_x","_performInteractionWrapper","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","payload","_editorInstance$curre","updatedJson","result","wrap","_callee$","_context","prev","next","current","store","sent","affectedComponents","_ref4","key","abrupt","finish","stop","_json$pages","_json$pages$0$frames","destroy","currentMode","init","container","height","plugins","storageManager","richTextEditor","canvas","customBadgeLabel","tagName","on","canvasHead","Canvas","getDocument","head","document","createElement","fullCss","innerHTML","setAttribute","appendChild","_ref3","DomComponents","getType","addType","defaults","view","pages","length","frames","raw","processed","setComponents","cssText","styles","setStyle","Fragment","children","ref"],"sources":["../src/GrapesjsCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useRef } from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport grapesjs, { Component, Editor } from 'grapesjs';\nimport 'grapesjs/dist/css/grapes.min.css';\nimport tailwind from 'grapesjs-tailwind';\nimport { TypesToRegister } from './constants';\nimport { toKebabCase } from './helpers';\nimport { createGrapesjsShadcnGenericPlugin } from './plugins/grapejs-plugin';\nimport { StyledEditor } from './index.styles';\nimport { tailwindCompiledCss } from './helpers/css';\n\ntype NotificationHandler = (newData: {\n componentId: string;\n newProps: Record<string, any>;\n newAttributes: Record<string, any>;\n}) => boolean;\n\ntype GrapesjsCanvasProps = {\n json: any;\n mode?: 'editor' | 'preview';\n setEditor: (editor: Editor) => void;\n performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;\n newDataNotifier: (notifHandler: NotificationHandler) => void\n};\n\nfunction setComponentProperties(editor: Editor, isPreview: boolean) {\n function setPropertiesRecursively(comp: Component) {\n comp.set({\n editable: !isPreview,\n draggable: !isPreview,\n droppable: !isPreview && comp.getName() !== 'Shadcn-generic',\n selectable: !isPreview,\n hoverable: !isPreview,\n highlightable: !isPreview,\n copyable: false,\n resizable: false,\n removable: !isPreview,\n badgable: false,\n });\n\n if (!isPreview) {\n comp.set('toolbar', [\n { attributes: { class: 'fa fa-arrows' }, command: 'tlb-move' },\n { attributes: { class: 'fa fa-trash' }, command: 'tlb-delete' },\n ]);\n }\n\n comp.components().forEach(setPropertiesRecursively);\n }\n\n if (isPreview) {\n editor.runCommand('core:preview');\n } else {\n editor.stopCommand('core:preview');\n }\n\n const wrapper = editor.getWrapper();\n wrapper?.find('*').forEach(setPropertiesRecursively);\n}\n\nfunction convertStyles(stylesArray: any[]): string {\n return stylesArray\n .map((block) => {\n const selectors = Array.isArray(block.selectors)\n ? block.selectors.join(', ')\n : block.selectors;\n const declarations = Object.entries(block.style)\n .map(([prop, value]) => `${toKebabCase(prop)}: ${value};`)\n .join(' ');\n\n return `${selectors} { ${declarations} }`;\n })\n .join('\\n');\n}\n\nfunction expandActions(node: any): any {\n if (\n node.type === 'shadcn-generic' &&\n node.componentName === 'Actions' &&\n Array.isArray(node.componentProps?.actions)\n ) {\n const { actions } = node.componentProps;\n\n return {\n ...node,\n type: 'div',\n classes: ['dashboard-cards', ...(node.classes || [])],\n componentName: undefined,\n componentProps: undefined,\n components: actions.map((action: any, i: number) => {\n const { icon, title, description } = action;\n\n return {\n id: `${node.id}--action-card-${i}`,\n type: 'shadcn-generic',\n componentName: 'ActionCard',\n badgable: false,\n copyable: false,\n componentProps: {\n icon,\n headerContent: title,\n bodyContent: description,\n },\n };\n }),\n };\n }\n\n if (Array.isArray(node.components)) {\n return {\n ...node,\n components: node.components.map(expandActions),\n };\n }\n\n return node;\n}\n\nfunction setInteracting(\n renderedComponents: Record<string, Component>,\n components: { componentId: string; showLoader: boolean }[],\n inProgress: boolean,\n) {\n components.forEach((component) => {\n const { componentId, showLoader } = component;\n\n if (!showLoader) {\n return;\n }\n\n const gjsModel = renderedComponents[componentId];\n \n if (gjsModel) {\n gjsModel.set('attributes', {\n ...gjsModel.get('attributes'),\n interactionApiInProgress: inProgress,\n });\n }\n });\n}\n\nfunction GrapesjsCanvas({\n json,\n mode = 'preview',\n setEditor,\n performInteraction,\n newDataNotifier = () => {},\n}: GrapesjsCanvasProps) {\n const editorRef = useRef<HTMLDivElement>(null);\n const editorInstance = useRef<any>(null);\n const renderedComponents: Record<string, Component> = {};\n\n function notificationHandler(props: Parameters<NotificationHandler>[0]): ReturnType<NotificationHandler> {\n if (!props) {\n return true;\n }\n\n const {\n componentId,\n newProps,\n newAttributes,\n } = props;\n const model = renderedComponents[componentId];\n\n if (!model) {\n return false;\n }\n\n const parsedNewProps = {\n ...newProps,\n };\n\n if (newProps.pagination) {\n parsedNewProps.pagination = {\n ...(model.get('componentProps').pagination || {}),\n ...newProps.pagination,\n }\n }\n\n model.set('componentProps', {\n ...model.get('componentProps'),\n ...parsedNewProps,\n });\n\n model.set('attributes', {\n ...model.get('attributes'),\n ...newAttributes,\n });\n\n return true;\n }\n\n useEffect(() => {\n newDataNotifier(notificationHandler);\n }, []);\n\n async function performInteractionWrapper(payload: Record<string, any>) {\n const updatedJson = await editorInstance.current?.store();\n setInteracting(renderedComponents, payload.affectedComponents, true);\n\n try {\n const result = await performInteraction({\n ...payload,\n json: updatedJson,\n });\n\n Object.entries(result || {}).forEach(([key, value]) => {\n const model = renderedComponents[key];\n\n if (model) {\n model.set('componentProps', {\n ...model.get('componentProps'),\n ...value,\n });\n }\n });\n\n return result;\n } finally {\n setInteracting(renderedComponents, payload.affectedComponents, false);\n }\n }\n\n useEffect(() => {\n if (!editorRef.current) {\n return () => {\n // Cleanup if editorRef is not available\n };\n }\n\n if (editorInstance.current) {\n editorInstance.current.destroy();\n editorInstance.current = null;\n }\n\n const currentMode = mode;\n\n const editor = grapesjs.init({\n container: editorRef.current,\n height: '100%',\n plugins: [\n tailwind,\n createGrapesjsShadcnGenericPlugin(\n currentMode,\n performInteractionWrapper,\n renderedComponents,\n ),\n ],\n storageManager: { type: 'none' },\n richTextEditor: {\n actions: ['bold', 'italic', 'underline', 'strikethrough'],\n },\n canvas: {\n customBadgeLabel: (component) => {\n const tagName = component.get('tagName');\n \n return tagName === 'body' ? '' : (tagName || '');\n },\n },\n });\n\n // Tailwind CSS rules aren't fully added to our component\n // So, adding them from here!\n editor.on('load', () => {\n const canvasHead = editor.Canvas.getDocument().head;\n const style = document.createElement('style');\n const fullCss = `\n ${tailwindCompiledCss}\n ::-webkit-scrollbar {\n width: 0px;\n height: 0px;\n }\n html, body {\n overflow: auto !important;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n `;\n style.innerHTML = fullCss;\n style.setAttribute('type', 'text/css');\n canvasHead.appendChild(style);\n });\n\n editorInstance.current = editor;\n\n if (setEditor) {\n setEditor(editor);\n }\n\n TypesToRegister.forEach(({ type, tagName }) => {\n if (!editor.DomComponents.getType(type)) {\n editor.DomComponents.addType(type, {\n model: {\n defaults: { tagName },\n },\n view: {},\n });\n }\n });\n\n if (json && json.pages?.length > 0 && json.pages[0].frames?.length > 0) {\n const raw = json.pages[0].frames[0].component;\n const processed = expandActions(raw);\n editor.setComponents(processed);\n\n const cssText = convertStyles(json.styles || []);\n editor.setStyle(cssText);\n }\n\n editor.on('load', () => {\n setComponentProperties(editor, mode === 'preview');\n });\n\n return () => {\n editor.destroy();\n };\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n }, [json, mode]);\n\n return (\n <React.Fragment>\n <StyledEditor />\n <div ref={editorRef} />\n </React.Fragment>\n );\n}\n\nexport default GrapesjsCanvas;\n"],"mappings":"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","ignoreList":[]}
|