@peak-ai/canvas 1.4.10 → 1.4.11-rc.1

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.
@@ -11,6 +11,8 @@ type GrapesjsCanvasProps = {
11
11
  setEditor: (editor: Editor) => void;
12
12
  performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;
13
13
  newDataNotifier: (notifHandler: NotificationHandler) => void;
14
+ setHasChanged: (hasChanged: boolean) => void;
15
+ isStreaming: boolean;
14
16
  };
15
- declare function GrapesjsCanvas({ json, mode, setEditor, performInteraction, newDataNotifier, }: GrapesjsCanvasProps): import("react/jsx-runtime").JSX.Element;
17
+ declare function GrapesjsCanvas({ json, mode, setEditor, performInteraction, newDataNotifier, setHasChanged, isStreaming, }: GrapesjsCanvasProps): import("react/jsx-runtime").JSX.Element;
16
18
  export default GrapesjsCanvas;
package/GrapesjsCanvas.js CHANGED
@@ -1,7 +1,6 @@
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{datePickerCss}from"./helpers/date-picker";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(){// Default empty handler
3
- }:_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(){// Cleanup if editorRef is not available
4
- }}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
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{datePickerCss}from"./helpers/date-picker";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,setHasChanged=_ref2.setHasChanged,isStreaming=_ref2.isStreaming;var editorRef=useRef(null);var editorInstance=useRef(null);var renderedComponents=useRef({});function notificationHandler(props){if(!props){return true}var componentId=props.componentId,newProps=props.newProps,newAttributes=props.newAttributes;var model=renderedComponents.current[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.current,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.current[key];if(model){model.set("componentProps",_extends({},model.get("componentProps"),value))}});return _context.abrupt("return",result);case 10:_context.prev=10;setInteracting(renderedComponents.current,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(){// Cleanup if editorRef is not available
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.current,setHasChanged)],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
5
4
  // So, adding them from here!
6
- editor.on("load",function(){var canvasHead=editor.Canvas.getDocument().head;var style=document.createElement("style");var fullCss="\n "+tailwindCompiledCss+"\n "+datePickerCss+"\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;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 cleanup(){editor.destroy()}},[json,mode]);return/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(StyledEditor,{}),/*#__PURE__*/_jsx("div",{ref:editorRef,id:"grapesjs-editor"})]})}export default GrapesjsCanvas;
5
+ editor.on("load",function(){var canvasHead=editor.Canvas.getDocument().head;var style=document.createElement("style");var fullCss="\n "+tailwindCompiledCss+"\n "+datePickerCss+"\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;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)}if(!isStreaming){editor.on("component:drag:end",function(){return setHasChanged(true)})}return function cleanup(){editor.destroy()}},[json,mode]);return/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(StyledEditor,{}),/*#__PURE__*/_jsx("div",{ref:editorRef,id:"grapesjs-editor"})]})}export default GrapesjsCanvas;
7
6
  //# sourceMappingURL=GrapesjsCanvas.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GrapesjsCanvas.js","names":["React","useEffect","useRef","grapesjs","tailwind","TypesToRegister","toKebabCase","createGrapesjsShadcnGenericPlugin","StyledEditor","tailwindCompiledCss","datePickerCss","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","cleanup","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, useState } 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';\nimport { datePickerCss } from './helpers/date-picker';\n\ntype NotificationHandler = (newData: {\n componentId: string;\n newProps: Record<string, any>;\n newAttributes: Record<string, any>;\n}) => boolean;\n\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 // Default empty handler\n },\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 return true;\n }\n\n\n\n useEffect(() => {\n newDataNotifier(notificationHandler);\n }, []);\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\n useEffect(() => {\n if (!editorRef.current) {\n return function cleanup() {\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 ${datePickerCss}\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 `;\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 function cleanup() {\n editor.destroy();\n };\n }, [json, mode]);\n\n return (\n <React.Fragment>\n <StyledEditor />\n <div ref={editorRef} id=\"grapesjs-editor\" />\n </React.Fragment>\n );\n}\n\nexport default GrapesjsCanvas;\n"],"mappings":"wLAAA,uDACA,MAAO,CAAAA,KAAK,EAAIC,SAAS,CAAEC,MAAM,KAAkB,OAAO,CAC1D;AACA,MAAO,CAAAC,QAAQ,KAA6B,UAAU,CACtD,MAAO,kCAAkC,CACzC,MAAO,CAAAC,QAAQ,KAAM,mBAAmB,CACxC,OAASC,eAAe,KAAQ,aAAa,CAC7C,OAASC,WAAW,KAAQ,WAAW,CACvC,OAASC,iCAAiC,KAAQ,0BAA0B,CAC5E,OAASC,YAAY,KAAQ,gBAAgB,CAC7C,OAASC,mBAAmB,KAAQ,eAAe,CACnD,OAASC,aAAa,KAAQ,uBAAuB,CAAC,OAAAC,GAAA,IAAAC,IAAA,CAAAC,IAAA,IAAAC,KAAA,yBAiBtD,QAAS,CAAAC,sBAAsBA,CAACC,MAAc,CAAEC,SAAkB,CAAE,CAClE,QAAS,CAAAC,wBAAwBA,CAACC,IAAe,CAAE,CACjDA,IAAI,CAACC,GAAG,CAAC,CACPC,QAAQ,CAAE,CAACJ,SAAS,CACpBK,SAAS,CAAE,CAACL,SAAS,CACrBM,SAAS,CAAE,CAACN,SAAS,EAAIE,IAAI,CAACK,OAAO,CAAC,CAAC,GAAK,gBAAgB,CAC5DC,UAAU,CAAE,CAACR,SAAS,CACtBS,SAAS,CAAE,CAACT,SAAS,CACrBU,aAAa,CAAE,CAACV,SAAS,CACzBW,QAAQ,CAAE,KAAK,CACfC,SAAS,CAAE,KAAK,CAChBC,SAAS,CAAE,CAACb,SAAS,CACrBc,QAAQ,CAAE,KACZ,CAAC,CAAC,CAEF,GAAI,CAACd,SAAS,CAAE,CACdE,IAAI,CAACC,GAAG,CAAC,SAAS,CAAE,CAClB,CAAEY,UAAU,CAAE,CAAE,QAAO,cAAe,CAAC,CAAEC,OAAO,CAAE,UAAW,CAAC,CAC9D,CAAED,UAAU,CAAE,CAAE,QAAO,aAAc,CAAC,CAAEC,OAAO,CAAE,YAAa,CAAC,CAChE,CACH,CAEAd,IAAI,CAACe,UAAU,CAAC,CAAC,CAACC,OAAO,CAACjB,wBAAwB,CACpD,CAEA,GAAID,SAAS,CAAE,CACbD,MAAM,CAACoB,UAAU,CAAC,cAAc,CAClC,CAAC,IAAM,CACLpB,MAAM,CAACqB,WAAW,CAAC,cAAc,CACnC,CAEA,GAAM,CAAAC,OAAO,CAAGtB,MAAM,CAACuB,UAAU,CAAC,CAAC,CACnCD,OAAO,QAAPA,OAAO,CAAEE,IAAI,CAAC,GAAG,CAAC,CAACL,OAAO,CAACjB,wBAAwB,CACrD,CAEA,QAAS,CAAAuB,aAAaA,CAACC,WAAkB,CAAU,CACjD,MAAO,CAAAA,WAAW,CACfC,GAAG,CAAC,SAACC,KAAK,CAAK,CACd,GAAM,CAAAC,SAAS,CAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACC,SAAS,CAAC,CAC5CD,KAAK,CAACC,SAAS,CAACG,IAAI,CAAC,IAAI,CAAC,CAC1BJ,KAAK,CAACC,SAAS,CACnB,GAAM,CAAAI,YAAY,CAAGC,MAAM,CAACC,OAAO,CAACP,KAAK,CAACQ,KAAK,CAAC,CAC7CT,GAAG,CAAC,SAAAU,IAAA,KAAE,CAAAC,IAAI,CAAAD,IAAA,IAAEE,KAAK,CAAAF,IAAA,UAAS,CAAA/C,WAAW,CAACgD,IAAI,CAAC,MAAKC,KAAK,KAAG,CAAC,CACzDP,IAAI,CAAC,GAAG,CAAC,CAEZ,MAAU,CAAAH,SAAS,OAAMI,YAAY,KACvC,CAAC,CAAC,CACDD,IAAI,CAAC,IAAI,CACd,CAEA,QAAS,CAAAQ,aAAaA,CAACC,IAAS,CAAO,KAAAC,oBAAA,CACrC,GACED,IAAI,CAACE,IAAI,GAAK,gBAAgB,EAC9BF,IAAI,CAACG,aAAa,GAAK,SAAS,EAChCd,KAAK,CAACC,OAAO,EAAAW,oBAAA,CAACD,IAAI,CAACI,cAAc,eAAnBH,oBAAA,CAAqBI,OAAO,CAAC,CAC3C,CACA,GAAQ,CAAAA,OAAO,CAAKL,IAAI,CAACI,cAAc,CAA/BC,OAAO,CAEf,OAAAC,QAAA,IACKN,IAAI,EACPE,IAAI,CAAE,KAAK,CACXK,OAAO,EAAG,iBAAiB,EAAAC,MAAA,CAAMR,IAAI,CAACO,OAAO,EAAI,EAAE,CAAE,CACrDJ,aAAa,CAAEM,SAAS,CACxBL,cAAc,CAAEK,SAAS,CACzBhC,UAAU,CAAE4B,OAAO,CAACnB,GAAG,CAAC,SAACwB,MAAW,CAAEC,CAAS,CAAK,CAClD,GAAQ,CAAAC,IAAI,CAAyBF,MAAM,CAAnCE,IAAI,CAAEC,KAAK,CAAkBH,MAAM,CAA7BG,KAAK,CAAEC,WAAW,CAAKJ,MAAM,CAAtBI,WAAW,CAEhC,MAAO,CACLC,EAAE,CAAKf,IAAI,CAACe,EAAE,kBAAiBJ,CAAG,CAClCT,IAAI,CAAE,gBAAgB,CACtBC,aAAa,CAAE,YAAY,CAC3B7B,QAAQ,CAAE,KAAK,CACfH,QAAQ,CAAE,KAAK,CACfiC,cAAc,CAAE,CACdQ,IAAI,CAAJA,IAAI,CACJI,aAAa,CAAEH,KAAK,CACpBI,WAAW,CAAEH,WACf,CACF,CACF,CAAC,CAAC,EAEN,CAEA,GAAIzB,KAAK,CAACC,OAAO,CAACU,IAAI,CAACvB,UAAU,CAAC,CAAE,CAClC,OAAA6B,QAAA,IACKN,IAAI,EACPvB,UAAU,CAAEuB,IAAI,CAACvB,UAAU,CAACS,GAAG,CAACa,aAAa,CAAC,EAElD,CAEA,MAAO,CAAAC,IACT,CAEA,QAAS,CAAAkB,cAAcA,CACrBC,kBAA6C,CAC7C1C,UAA0D,CAC1D2C,UAAmB,CACnB,CACA3C,UAAU,CAACC,OAAO,CAAC,SAAC2C,SAAS,CAAK,CAChC,GAAQ,CAAAC,WAAW,CAAiBD,SAAS,CAArCC,WAAW,CAAEC,UAAU,CAAKF,SAAS,CAAxBE,UAAU,CAE/B,GAAI,CAACA,UAAU,CAAE,CACf,MACF,CAEA,GAAM,CAAAC,QAAQ,CAAGL,kBAAkB,CAACG,WAAW,CAAC,CAEhD,GAAIE,QAAQ,CAAE,CACZA,QAAQ,CAAC7D,GAAG,CAAC,YAAY,CAAA2C,QAAA,IACpBkB,QAAQ,CAACC,GAAG,CAAC,YAAY,CAAC,EAC7BC,wBAAwB,CAAEN,UAAU,EACrC,CACH,CACF,CAAC,CACH,CAEA,QAAS,CAAAO,cAAcA,CAAAC,KAAA,CAQC,IAPtB,CAAAC,IAAI,CAAAD,KAAA,CAAJC,IAAI,CAAAC,UAAA,CAAAF,KAAA,CACJG,IAAI,CAAJA,IAAI,CAAAD,UAAA,UAAG,SAAS,CAAAA,UAAA,CAChBE,SAAS,CAAAJ,KAAA,CAATI,SAAS,CACTC,kBAAkB,CAAAL,KAAA,CAAlBK,kBAAkB,CAAAC,qBAAA,CAAAN,KAAA,CAClBO,eAAe,CAAfA,eAAe,CAAAD,qBAAA,UAAG,UAAM,CACtB;AAAA,CACD,CAAAA,qBAAA,CAED,GAAM,CAAAE,SAAS,CAAG3F,MAAM,CAAiB,IAAI,CAAC,CAC9C,GAAM,CAAA4F,cAAc,CAAG5F,MAAM,CAAM,IAAI,CAAC,CACxC,GAAM,CAAA0E,kBAA6C,CAAG,CAAC,CAAC,CAExD,QAAS,CAAAmB,mBAAmBA,CAACC,KAAyC,CAAoC,CACxG,GAAI,CAACA,KAAK,CAAE,CACV,MAAO,KACT,CAEA,GACE,CAAAjB,WAAW,CAGTiB,KAAK,CAHPjB,WAAW,CACXkB,QAAQ,CAEND,KAAK,CAFPC,QAAQ,CACRC,aAAa,CACXF,KAAK,CADPE,aAAa,CAEf,GAAM,CAAAC,KAAK,CAAGvB,kBAAkB,CAACG,WAAW,CAAC,CAE7C,GAAI,CAACoB,KAAK,CAAE,CACV,MAAO,MACT,CAEA,GAAM,CAAAC,cAAc,CAAArC,QAAA,IACfkC,QAAQ,CACZ,CAED,GAAIA,QAAQ,CAACI,UAAU,CAAE,CACvBD,cAAc,CAACC,UAAU,CAAAtC,QAAA,IACnBoC,KAAK,CAACjB,GAAG,CAAC,gBAAgB,CAAC,CAACmB,UAAU,EAAI,CAAC,CAAC,CAC7CJ,QAAQ,CAACI,UAAU,CAE1B,CAEAF,KAAK,CAAC/E,GAAG,CAAC,gBAAgB,CAAA2C,QAAA,IACrBoC,KAAK,CAACjB,GAAG,CAAC,gBAAgB,CAAC,CAC3BkB,cAAc,CAClB,CAAC,CAEFD,KAAK,CAAC/E,GAAG,CAAC,YAAY,CAAA2C,QAAA,IACjBoC,KAAK,CAACjB,GAAG,CAAC,YAAY,CAAC,CACvBgB,aAAa,CACjB,CAAC,CACF,MAAO,KACT,CAIAjG,SAAS,CAAC,UAAM,CACd2F,eAAe,CAACG,mBAAmB,CACrC,CAAC,CAAE,EAAE,CAAC,CAAC,QAGQ,CAAAO,yBAAyBA,CAAAC,EAAA,SAAAC,0BAAA,CAAAC,KAAA,MAAAC,SAAA,WAAAF,2BAAA,EAAAA,0BAAA,CAAAG,iBAAA,cAAAC,mBAAA,CAAAC,IAAA,CAAxC,SAAAC,QAAyCC,OAA4B,MAAAC,qBAAA,KAAAC,WAAA,CAAAC,MAAA,QAAAN,mBAAA,CAAAO,IAAA,UAAAC,SAAAC,QAAA,iBAAAA,QAAA,CAAAC,IAAA,CAAAD,QAAA,CAAAE,IAAA,SAAAF,QAAA,CAAAE,IAAA,UAAAP,qBAAA,CACzClB,cAAc,CAAC0B,OAAO,eAAtBR,qBAAA,CAAwBS,KAAK,CAAC,CAAC,QAAnDR,WAAW,CAAAI,QAAA,CAAAK,IAAA,CACjB/C,cAAc,CAACC,kBAAkB,CAAEmC,OAAO,CAACY,kBAAkB,CAAE,IAAI,CAAC,CAACN,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA,SAG9C,CAAA7B,kBAAkB,CAAA3B,QAAA,IAClCgD,OAAO,EACVzB,IAAI,CAAE2B,WAAW,EAClB,CAAC,QAHIC,MAAM,CAAAG,QAAA,CAAAK,IAAA,CAKZxE,MAAM,CAACC,OAAO,CAAC+D,MAAM,EAAI,CAAC,CAAC,CAAC,CAAC/E,OAAO,CAAC,SAAAyF,KAAA,CAAkB,IAAhB,CAAAC,GAAG,CAAAD,KAAA,IAAErE,KAAK,CAAAqE,KAAA,IAC/C,GAAM,CAAAzB,KAAK,CAAGvB,kBAAkB,CAACiD,GAAG,CAAC,CAErC,GAAI1B,KAAK,CAAE,CACTA,KAAK,CAAC/E,GAAG,CAAC,gBAAgB,CAAA2C,QAAA,IACrBoC,KAAK,CAACjB,GAAG,CAAC,gBAAgB,CAAC,CAC3B3B,KAAK,CACT,CACH,CACF,CAAC,CAAC,CAAC,OAAA8D,QAAA,CAAAS,MAAA,UAEIZ,MAAM,UAAAG,QAAA,CAAAC,IAAA,IAEb3C,cAAc,CAACC,kBAAkB,CAAEmC,OAAO,CAACY,kBAAkB,CAAE,KAAK,CAAC,CAAC,OAAAN,QAAA,CAAAU,MAAA,8BAAAV,QAAA,CAAAW,IAAA,KAAAlB,OAAA,oBAEzE,UAAAN,0BAAA,CAAAC,KAAA,MAAAC,SAAA,EAGDzG,SAAS,CAAC,UAAM,KAAAgI,WAAA,CAAAC,oBAAA,CACd,GAAI,CAACrC,SAAS,CAAC2B,OAAO,CAAE,CACtB,MAAO,SAAS,CAAAW,OAAOA,CAAA,CAAG,CACxB;AAAA,CAEJ,CAEA,GAAIrC,cAAc,CAAC0B,OAAO,CAAE,CAC1B1B,cAAc,CAAC0B,OAAO,CAACY,OAAO,CAAC,CAAC,CAChCtC,cAAc,CAAC0B,OAAO,CAAG,IAC3B,CAEA,GAAM,CAAAa,WAAW,CAAG7C,IAAI,CAExB,GAAM,CAAAxE,MAAM,CAAGb,QAAQ,CAACmI,IAAI,CAAC,CAC3BC,SAAS,CAAE1C,SAAS,CAAC2B,OAAO,CAC5BgB,MAAM,CAAE,MAAM,CACdC,OAAO,CAAE,CACPrI,QAAQ,CACRG,iCAAiC,CAC/B8H,WAAW,CACX/B,yBAAyB,CACzB1B,kBACF,CAAC,CACF,CACD8D,cAAc,CAAE,CAAE/E,IAAI,CAAE,MAAO,CAAC,CAChCgF,cAAc,CAAE,CACd7E,OAAO,CAAE,CAAC,MAAM,CAAE,QAAQ,CAAE,WAAW,CAAE,eAAe,CAC1D,CAAC,CACD8E,MAAM,CAAE,CACNC,gBAAgB,CAAE,QAAlB,CAAAA,gBAAgBA,CAAG/D,SAAS,CAAK,CAC/B,GAAM,CAAAgE,OAAO,CAAGhE,SAAS,CAACI,GAAG,CAAC,SAAS,CAAC,CAExC,MAAO,CAAA4D,OAAO,GAAK,MAAM,CAAG,EAAE,CAAGA,OAAO,EAAI,EAC9C,CACF,CACF,CAAC,CAAC,CAEF;AACA;AACA9H,MAAM,CAAC+H,EAAE,CAAC,MAAM,CAAE,UAAM,CACtB,GAAM,CAAAC,UAAU,CAAGhI,MAAM,CAACiI,MAAM,CAACC,WAAW,CAAC,CAAC,CAACC,IAAI,CACnD,GAAM,CAAA/F,KAAK,CAAGgG,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,CAC7C,GAAM,CAAAC,OAAO,cACT7I,mBAAmB,cACnBC,aAAa,yRAWhB,CACD0C,KAAK,CAACmG,SAAS,CAAGD,OAAO,CACzBlG,KAAK,CAACoG,YAAY,CAAC,MAAM,CAAE,UAAU,CAAC,CACtCR,UAAU,CAACS,WAAW,CAACrG,KAAK,CAC9B,CAAC,CAAC,CAEF0C,cAAc,CAAC0B,OAAO,CAAGxG,MAAM,CAE/B,GAAIyE,SAAS,CAAE,CACbA,SAAS,CAACzE,MAAM,CAClB,CAEAX,eAAe,CAAC8B,OAAO,CAAC,SAAAuH,KAAA,CAAuB,IAApB,CAAA/F,IAAI,CAAA+F,KAAA,CAAJ/F,IAAI,CAAEmF,OAAO,CAAAY,KAAA,CAAPZ,OAAO,CACtC,GAAI,CAAC9H,MAAM,CAAC2I,aAAa,CAACC,OAAO,CAACjG,IAAI,CAAC,CAAE,CACvC3C,MAAM,CAAC2I,aAAa,CAACE,OAAO,CAAClG,IAAI,CAAE,CACjCwC,KAAK,CAAE,CACL2D,QAAQ,CAAE,CAAEhB,OAAO,CAAPA,OAAQ,CACtB,CAAC,CACDiB,IAAI,CAAE,CAAC,CACT,CAAC,CACH,CACF,CAAC,CAAC,CAEF,GAAIzE,IAAI,EAAI,EAAA2C,WAAA,CAAA3C,IAAI,CAAC0E,KAAK,eAAV/B,WAAA,CAAYgC,MAAM,EAAG,CAAC,EAAI,EAAA/B,oBAAA,CAAA5C,IAAI,CAAC0E,KAAK,CAAC,CAAC,CAAC,CAACE,MAAM,eAApBhC,oBAAA,CAAsB+B,MAAM,EAAG,CAAC,CAAE,CACtE,GAAM,CAAAE,GAAG,CAAG7E,IAAI,CAAC0E,KAAK,CAAC,CAAC,CAAC,CAACE,MAAM,CAAC,CAAC,CAAC,CAACpF,SAAS,CAC7C,GAAM,CAAAsF,SAAS,CAAG5G,aAAa,CAAC2G,GAAG,CAAC,CACpCnJ,MAAM,CAACqJ,aAAa,CAACD,SAAS,CAAC,CAE/B,GAAM,CAAAE,OAAO,CAAG7H,aAAa,CAAC6C,IAAI,CAACiF,MAAM,EAAI,EAAE,CAAC,CAChDvJ,MAAM,CAACwJ,QAAQ,CAACF,OAAO,CACzB,CAEAtJ,MAAM,CAAC+H,EAAE,CAAC,MAAM,CAAE,UAAM,CACtBhI,sBAAsB,CAACC,MAAM,CAAEwE,IAAI,GAAK,SAAS,CACnD,CAAC,CAAC,CAEF,MAAO,SAAS,CAAA2C,OAAOA,CAAA,CAAG,CACxBnH,MAAM,CAACoH,OAAO,CAAC,CACjB,CACF,CAAC,CAAE,CAAC9C,IAAI,CAAEE,IAAI,CAAC,CAAC,CAEhB,mBACE1E,KAAA,CAACd,KAAK,CAACyK,QAAQ,EAAAC,QAAA,eACb9J,IAAA,CAACJ,YAAY,GAAE,CAAC,cAChBI,IAAA,QAAK+J,GAAG,CAAE9E,SAAU,CAACrB,EAAE,CAAC,iBAAiB,CAAE,CAAC,EAC9B,CAEpB,CAEA,cAAe,CAAAY,cAAc","ignoreList":[]}
1
+ {"version":3,"file":"GrapesjsCanvas.js","names":["React","useEffect","useRef","grapesjs","tailwind","TypesToRegister","toKebabCase","createGrapesjsShadcnGenericPlugin","StyledEditor","tailwindCompiledCss","datePickerCss","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","setHasChanged","isStreaming","editorRef","editorInstance","notificationHandler","props","newProps","newAttributes","model","current","parsedNewProps","pagination","performInteractionWrapper","_x","_performInteractionWrapper","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","payload","_editorInstance$curre","updatedJson","result","wrap","_callee$","_context","prev","next","store","sent","affectedComponents","_ref4","key","abrupt","finish","stop","_json$pages","_json$pages$0$frames","cleanup","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, useState } 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';\nimport { datePickerCss } from './helpers/date-picker';\n\ntype NotificationHandler = (newData: {\n componentId: string;\n newProps: Record<string, any>;\n newAttributes: Record<string, any>;\n}) => boolean;\n\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 setHasChanged: (hasChanged: boolean) => void;\n isStreaming: boolean;\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 setHasChanged,\n isStreaming,\n}: GrapesjsCanvasProps) {\n const editorRef = useRef<HTMLDivElement>(null);\n const editorInstance = useRef<any>(null);\n const renderedComponents = useRef<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.current[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\n\n useEffect(() => {\n newDataNotifier(notificationHandler);\n }, []);\n\n\n async function performInteractionWrapper(payload: Record<string, any>) {\n const updatedJson = await editorInstance.current?.store();\n setInteracting(renderedComponents.current, 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.current[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.current, payload.affectedComponents, false);\n }\n }\n\n\n useEffect(() => {\n if (!editorRef.current) {\n return function cleanup() {\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.current,\n setHasChanged,\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 ${datePickerCss}\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 `;\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 if (!isStreaming) {\n editor.on('component:drag:end', () => setHasChanged(true));\n }\n\n return function cleanup() {\n editor.destroy();\n };\n }, [json, mode]);\n\n return (\n <React.Fragment>\n <StyledEditor />\n <div ref={editorRef} id=\"grapesjs-editor\" />\n </React.Fragment>\n );\n}\n\nexport default GrapesjsCanvas;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@peak-ai/canvas",
3
3
  "author": "squad-builder-experience",
4
4
  "license": "UNLICENSED",
5
- "version": "1.4.10",
5
+ "version": "1.4.11-rc.1",
6
6
  "description": "",
7
7
  "dependencies": {
8
8
  "@emotion/react": "^11.11.4",
@@ -1,2 +1,2 @@
1
1
  import { Editor, Component } from 'grapesjs';
2
- export declare function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview', performInteraction: (payload: Record<string, any>) => void, renderedComponents?: Record<string, Component>): (editor: Editor) => void;
2
+ export declare function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview', performInteraction: (payload: Record<string, any>) => void, renderedComponents: Record<string, Component> | undefined, setHasChanged: (hasChanged: boolean) => void): (editor: Editor) => void;
@@ -1,4 +1,4 @@
1
- import _extends from"@babel/runtime/helpers/extends";/* eslint-disable import/no-named-as-default-member *//* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";import{jsx as _jsx}from"react/jsx-runtime";export function createGrapesjsShadcnGenericPlugin(mode,performInteraction,renderedComponents){if(renderedComponents===void 0){renderedComponents={}}return function grapesjsShadcnGenericPlugin(editor){editor.DomComponents.addType("shadcn-generic",{model:{defaults:{tagName:"div",droppable:false,componentName:"Card",componentProps:{},traits:[]}},view:{events:{"input [data-slot]":"handleSlotInput"},handleSlotInput:function handleSlotInput(e){var target=e.target;var slot=target.dataset.slot;var text=target.innerText;var props=this.model.get("componentProps")||{};if(!slot){return}if(slot.startsWith("table-header-")){var _props$data;var idx=parseInt(slot.split("-")[2],10);var dataKeys=Object.keys(((_props$data=props.data)==null?void 0:_props$data[0])||{});if(!props.headerMapper){props.headerMapper={}}var key=dataKeys[idx];if(key){props.headerMapper[key]=text}}else{props[slot]=text}this.model.set("componentProps",_extends({},props))},render:function render(){var _this=this;var compName=this.model.get("componentName");var compProps=this.model.get("componentProps");if(typeof compProps==="string"){try{compProps=JSON.parse(compProps)}catch(err){// eslint-disable-next-line no-console
1
+ import _extends from"@babel/runtime/helpers/extends";/* eslint-disable import/no-named-as-default-member *//* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";import{jsx as _jsx}from"react/jsx-runtime";export function createGrapesjsShadcnGenericPlugin(mode,performInteraction,renderedComponents,setHasChanged){if(renderedComponents===void 0){renderedComponents={}}return function grapesjsShadcnGenericPlugin(editor){editor.DomComponents.addType("shadcn-generic",{model:{defaults:{tagName:"div",droppable:false,componentName:"Card",componentProps:{},traits:[]}},view:{events:{"input [data-slot]":"handleSlotInput"},handleSlotInput:function handleSlotInput(e){var target=e.target;var slot=target.dataset.slot;var text=target.innerText;var props=this.model.get("componentProps")||{};if(!slot){return}if(slot.startsWith("table-header-")){var _props$data;var idx=parseInt(slot.split("-")[2],10);var dataKeys=Object.keys(((_props$data=props.data)==null?void 0:_props$data[0])||{});if(!props.headerMapper){props.headerMapper={}}var key=dataKeys[idx];if(key){props.headerMapper[key]=text}}else{props[slot]=text}this.model.set("componentProps",_extends({},props));setHasChanged(true)},render:function render(){var _this=this;var compName=this.model.get("componentName");var compProps=this.model.get("componentProps");if(typeof compProps==="string"){try{compProps=JSON.parse(compProps)}catch(err){// eslint-disable-next-line no-console
2
2
  console.error("Invalid JSON in componentProps",err);compProps={}}}compProps.isEditable=mode==="editor";compProps.performInteraction=performInteraction;compProps.onChange=function(data){_this.model.set("componentProps",_extends({},_this.model.get("componentProps"),data))};var renderers=getRenderers();var Renderer=renderers[compName];if(Renderer){if(compName==="Tabs"){ReactDOM.render(/*#__PURE__*/_jsx(Renderer,_extends({},compProps,{gjsModel:this.model})),this.el);var children=this.model.components();var tabsContent=this.el.querySelectorAll(".tabs-content");children.each(function(childModel,i){var childView=_this.createView(childModel);if(childView){childView.render();tabsContent[i].appendChild(childView.el)}})}else{ReactDOM.render(/*#__PURE__*/_jsx(Renderer,_extends({},compProps,{gjsModel:this.model})),this.el)}}else{this.el.innerHTML="<div>Unsupported component: "+compName+"</div>"}renderedComponents[this.model.get("id")]=this.model;return this},createView:function createView(model){var _this$em$get$getType;var ComponentView=(_this$em$get$getType=this.em.get("DomComponents").getType(model.get("type")))==null?void 0:_this$em$get$getType.view;if(!ComponentView){// eslint-disable-next-line no-console
3
3
  console.warn("No view found for component type:",model.get("type"));return null}var view=new ComponentView({model:model,config:this.config,componentTypes:this.componentTypes});return view},remove:function remove(){// eslint-disable-next-line import/no-named-as-default-member
4
4
  ReactDOM.unmountComponentAtNode(this.el);return this}}})}}
@@ -1 +1 @@
1
- {"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","jsx","_jsx","createGrapesjsShadcnGenericPlugin","mode","performInteraction","renderedComponents","grapesjsShadcnGenericPlugin","editor","DomComponents","addType","model","defaults","tagName","droppable","componentName","componentProps","traits","view","events","handleSlotInput","e","target","slot","dataset","text","innerText","props","get","startsWith","_props$data","idx","parseInt","split","dataKeys","Object","keys","data","headerMapper","key","set","_extends","render","_this","compName","compProps","JSON","parse","err","console","error","isEditable","onChange","renderers","Renderer","gjsModel","el","children","components","tabsContent","querySelectorAll","each","childModel","i","childView","createView","appendChild","innerHTML","_this$em$get$getType","ComponentView","em","getType","warn","config","componentTypes","remove","unmountComponentAtNode"],"sources":["../../src/plugins/grapejs-plugin.tsx"],"sourcesContent":["/* eslint-disable import/no-named-as-default-member */\n/* eslint-disable func-names */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport ReactDOM from 'react-dom';\nimport { Editor, Component } from 'grapesjs';\nimport { getRenderers } from './helpers/render-components';\n\nexport function createGrapesjsShadcnGenericPlugin(\n mode: 'editor' | 'preview',\n performInteraction: (payload: Record<string, any>) => void,\n renderedComponents: Record<string, Component> = {},\n) {\n return function grapesjsShadcnGenericPlugin(editor: Editor): void {\n editor.DomComponents.addType('shadcn-generic', {\n model: {\n defaults: {\n tagName: 'div',\n droppable: false,\n componentName: 'Card',\n componentProps: {},\n traits: [],\n },\n },\n view: {\n events: {\n 'input [data-slot]': 'handleSlotInput',\n } as any,\n handleSlotInput(e: Event) {\n const target = e.target as HTMLElement;\n const slot = target.dataset.slot;\n const text = target.innerText;\n\n const props = this.model.get('componentProps') || {};\n\n if (!slot) {\n return;\n }\n\n if (slot.startsWith('table-header-')) {\n const idx = parseInt(slot.split('-')[2], 10);\n const dataKeys = Object.keys(props.data?.[0] || {});\n\n if (!props.headerMapper) {\n props.headerMapper = {};\n }\n\n const key = dataKeys[idx];\n\n if (key) {\n props.headerMapper[key] = text;\n }\n } else {\n props[slot] = text;\n }\n\n this.model.set('componentProps', {\n ...props,\n });\n },\n render: function () {\n const compName: string = this.model.get('componentName');\n let compProps: any = this.model.get('componentProps');\n\n if (typeof compProps === 'string') {\n try {\n compProps = JSON.parse(compProps);\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Invalid JSON in componentProps', err);\n compProps = {};\n }\n }\n\n compProps.isEditable = mode === 'editor';\n compProps.performInteraction = performInteraction;\n\n compProps.onChange = (data: Record<string, any>) => {\n this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...data,\n });\n };\n\n const renderers = getRenderers();\n const Renderer = renderers[compName];\n\n if (Renderer) {\n if (compName === 'Tabs') {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n\n const children = this.model.components();\n const tabsContent = this.el.querySelectorAll('.tabs-content');\n children.each((childModel, i) => {\n const childView = this.createView(childModel);\n\n if (childView) {\n childView.render();\n tabsContent[i].appendChild(childView.el);\n }\n });\n } else {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n }\n } else {\n this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;\n }\n\n renderedComponents[this.model.get('id')] = this.model;\n\n return this;\n },\n createView(model: any) {\n const ComponentView = this.em.get('DomComponents').getType(model.get('type'))?.view;\n\n if (!ComponentView) {\n // eslint-disable-next-line no-console\n console.warn('No view found for component type:', model.get('type'));\n\n return null;\n }\n\n const view = new ComponentView({\n model,\n config: this.config,\n componentTypes: this.componentTypes,\n });\n\n return view;\n },\n remove: function () {\n // eslint-disable-next-line import/no-named-as-default-member\n ReactDOM.unmountComponentAtNode(this.el);\n\n return this;\n },\n },\n });\n };\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","jsx","_jsx","createGrapesjsShadcnGenericPlugin","mode","performInteraction","renderedComponents","setHasChanged","grapesjsShadcnGenericPlugin","editor","DomComponents","addType","model","defaults","tagName","droppable","componentName","componentProps","traits","view","events","handleSlotInput","e","target","slot","dataset","text","innerText","props","get","startsWith","_props$data","idx","parseInt","split","dataKeys","Object","keys","data","headerMapper","key","set","_extends","render","_this","compName","compProps","JSON","parse","err","console","error","isEditable","onChange","renderers","Renderer","gjsModel","el","children","components","tabsContent","querySelectorAll","each","childModel","i","childView","createView","appendChild","innerHTML","_this$em$get$getType","ComponentView","em","getType","warn","config","componentTypes","remove","unmountComponentAtNode"],"sources":["../../src/plugins/grapejs-plugin.tsx"],"sourcesContent":["/* eslint-disable import/no-named-as-default-member */\n/* eslint-disable func-names */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport ReactDOM from 'react-dom';\nimport { Editor, Component } from 'grapesjs';\nimport { getRenderers } from './helpers/render-components';\n\nexport function createGrapesjsShadcnGenericPlugin(\n mode: 'editor' | 'preview',\n performInteraction: (payload: Record<string, any>) => void,\n renderedComponents: Record<string, Component> = {},\n setHasChanged: (hasChanged: boolean) => void,\n) {\n return function grapesjsShadcnGenericPlugin(editor: Editor): void {\n editor.DomComponents.addType('shadcn-generic', {\n model: {\n defaults: {\n tagName: 'div',\n droppable: false,\n componentName: 'Card',\n componentProps: {},\n traits: [],\n },\n },\n view: {\n events: {\n 'input [data-slot]': 'handleSlotInput',\n } as any,\n handleSlotInput(e: Event) {\n const target = e.target as HTMLElement;\n const slot = target.dataset.slot;\n const text = target.innerText;\n\n const props = this.model.get('componentProps') || {};\n\n if (!slot) {\n return;\n }\n\n if (slot.startsWith('table-header-')) {\n const idx = parseInt(slot.split('-')[2], 10);\n const dataKeys = Object.keys(props.data?.[0] || {});\n\n if (!props.headerMapper) {\n props.headerMapper = {};\n }\n\n const key = dataKeys[idx];\n\n if (key) {\n props.headerMapper[key] = text;\n }\n } else {\n props[slot] = text;\n }\n\n this.model.set('componentProps', {\n ...props,\n });\n setHasChanged(true);\n },\n render: function () {\n const compName: string = this.model.get('componentName');\n let compProps: any = this.model.get('componentProps');\n\n if (typeof compProps === 'string') {\n try {\n compProps = JSON.parse(compProps);\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Invalid JSON in componentProps', err);\n compProps = {};\n }\n }\n\n compProps.isEditable = mode === 'editor';\n compProps.performInteraction = performInteraction;\n\n compProps.onChange = (data: Record<string, any>) => {\n this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...data,\n });\n };\n\n const renderers = getRenderers();\n const Renderer = renderers[compName];\n\n if (Renderer) {\n if (compName === 'Tabs') {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n\n const children = this.model.components();\n const tabsContent = this.el.querySelectorAll('.tabs-content');\n children.each((childModel, i) => {\n const childView = this.createView(childModel);\n\n if (childView) {\n childView.render();\n tabsContent[i].appendChild(childView.el);\n }\n });\n } else {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n }\n } else {\n this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;\n }\n\n renderedComponents[this.model.get('id')] = this.model;\n\n return this;\n },\n createView(model: any) {\n const ComponentView = this.em.get('DomComponents').getType(model.get('type'))?.view;\n\n if (!ComponentView) {\n // eslint-disable-next-line no-console\n console.warn('No view found for component type:', model.get('type'));\n\n return null;\n }\n\n const view = new ComponentView({\n model,\n config: this.config,\n componentTypes: this.componentTypes,\n });\n\n return view;\n },\n remove: function () {\n // eslint-disable-next-line import/no-named-as-default-member\n ReactDOM.unmountComponentAtNode(this.el);\n\n return this;\n },\n },\n });\n };\n}\n"],"mappings":"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","ignoreList":[]}