npm - @peak-ai/canvas - Versions diffs - 1.2.3-rc.4 → 1.2.3-rc.7 - Mend

@peak-ai/canvas 1.2.3-rc.4 → 1.2.3-rc.7

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.

Files changed (3) hide show

package/GrapesjsCanvas.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _extends from"@babel/runtime/helpers/extends";/* eslint-disable @typescript-eslint/no-explicit-any */import React,{useEffect,useRef}from"react";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 GrapesjsCanvas(_ref2){var json=_ref2.json,_ref2$mode=_ref2.mode,mode=_ref2$mode===void 0?"preview":_ref2$mode,setEditor=_ref2.setEditor;var editorRef=useRef(null);var editorInstance=useRef(null);useEffect(function(){var _json$pages,_json$pages$0$frames;if(!editorRef.current){return function(){// Cleanup if editorRef is not available
-}}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)],storageManager:{type:"none"},richTextEditor:{actions:["bold","italic","underline","strikethrough"]}});// Tailwind CSS rules aren't fully added to our component
+}}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)],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
 // So, adding them from here!
-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, react-hooks/exhaustive-deps
+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
 },[json,mode]);return/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(StyledEditor,{}),/*#__PURE__*/_jsx("div",{ref:editorRef})]})}export default GrapesjsCanvas;
 //# sourceMappingURL=GrapesjsCanvas.js.map

package/GrapesjsCanvas.js.map CHANGED Viewed

	@@ -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","GrapesjsCanvas","_ref2","json","_ref2$mode","mode","setEditor","editorRef","editorInstance","_json$pages","_json$pages$0$frames","current","destroy","currentMode","init","container","height","plugins","storageManager","richTextEditor","on","canvasHead","Canvas","getDocument","head","document","createElement","fullCss","innerHTML","setAttribute","appendChild","_ref3","tagName","DomComponents","getType","addType","model","defaults","view","pages","length","frames","raw","component","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';\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 GrapesjsCanvasProps = {\n json: any;\n mode?: 'editor' \| 'preview';\n setEditor: (editor: Editor) => 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 GrapesjsCanvas({ json, mode = 'preview', setEditor }: GrapesjsCanvasProps) {\n const editorRef = useRef<HTMLDivElement>(null);\n const editorInstance = useRef<any>(null);\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: [tailwind, createGrapesjsShadcnGenericPlugin(currentMode)],\n storageManager: { type: 'none' },\n richTextEditor: {\n actions: ['bold', 'italic', 'underline', 'strikethrough'],\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, react-hooks/exhaustive-deps\n }, [json, mode]);\n\n return (\n <React.Fragment>\n <StyledEditor />\n <div ref={editorRef} />\n </React.Fragment>\n );\n}\n\nexport default GrapesjsCanvas;"],"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","GrapesjsCanvas","_ref2","json","_ref2$mode","mode","setEditor","editorRef","editorInstance","_json$pages","_json$pages$0$frames","current","destroy","currentMode","init","container","height","plugins","storageManager","richTextEditor","canvas","customBadgeLabel","component","tagName","get","on","canvasHead","Canvas","getDocument","head","document","createElement","fullCss","innerHTML","setAttribute","appendChild","_ref3","DomComponents","getType","addType","model","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';\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 GrapesjsCanvasProps = {\n json: any;\n mode?: 'editor' \| 'preview';\n setEditor: (editor: Editor) => 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 GrapesjsCanvas({ json, mode = 'preview', setEditor }: GrapesjsCanvasProps) {\n const editorRef = useRef<HTMLDivElement>(null);\n const editorInstance = useRef<any>(null);\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: [tailwind, createGrapesjsShadcnGenericPlugin(currentMode)],\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;"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@peak-ai/canvas",
   "author": "squad-builder-experience",
   "license": "UNLICENSED",
-  "version": "1.2.3-rc.4",
+  "version": "1.2.3-rc.7",
   "description": "",
   "workspaces": [
     "packages/*"