@peak-ai/canvas 1.2.3-rc.3 → 1.2.3-rc.4
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
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
|
|
2
|
-
}}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"]}
|
|
2
|
+
}}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
|
|
3
3
|
// So, adding them from here!
|
|
4
|
-
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
|
|
4
|
+
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
|
|
5
5
|
},[json,mode]);return/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(StyledEditor,{}),/*#__PURE__*/_jsx("div",{ref:editorRef})]})}export default GrapesjsCanvas;
|
|
6
6
|
//# sourceMappingURL=GrapesjsCanvas.js.map
|
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","GrapesjsCanvas","_ref2","json","_ref2$mode","mode","setEditor","editorRef","editorInstance","_json$pages","_json$pages$0$frames","current","destroy","currentMode","init","container","height","plugins","storageManager","richTextEditor","showOffsets","showToolbar","noticeOnUnload","canvas","customBadgeLabel","on","canvasHead","Canvas","getDocument","head","document","createElement","fullCss","innerHTML","setAttribute","appendChild","_ref3","tagName","DomComponents","getType","addType","model","defaults","badge","label","view","defaultType","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 showOffsets: false,\n showToolbar: false,\n noticeOnUnload: false,\n canvas: {\n customBadgeLabel: () => '',\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: { \n tagName,\n badge: {\n label: '',\n },\n },\n },\n view: {},\n });\n }\n });\n\n const defaultType = editor.DomComponents.getType('default');\n \n if (defaultType) {\n editor.DomComponents.addType('default', {\n ...defaultType,\n model: {\n ...defaultType.model,\n defaults: {\n ...defaultType.model.defaults,\n badge: {\n label: '',\n },\n },\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":[]}
|
|
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":[]}
|
package/index.styles.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createGlobalStyle}from"styled-components";export var StyledEditor=createGlobalStyle([".gs-sidebar-left,.gs-sidebar-top,.gs-sidebar-right,.gjs-pn-panels,.gjs-pn-views,.gjs-off-prv,.gjs-pn-devices{display:none !important;}.gjs-badge
|
|
1
|
+
import{createGlobalStyle}from"styled-components";export var StyledEditor=createGlobalStyle([".gs-sidebar-left,.gs-sidebar-top,.gs-sidebar-right,.gjs-pn-panels,.gjs-pn-views,.gjs-off-prv,.gjs-pn-devices{display:none !important;}.gjs-badge-label{display:none !important;}.gjs-cv-canvas{height:100% !important;width:100% !important;top:0 !important;}"]);
|
|
2
2
|
//# sourceMappingURL=index.styles.js.map
|
package/index.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.styles.js","names":["createGlobalStyle","StyledEditor"],"sources":["../src/index.styles.ts"],"sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\nexport const StyledEditor = createGlobalStyle`\n /* Hide GrapesJS panels */\n .gs-sidebar-left,\n .gs-sidebar-top,\n .gs-sidebar-right,\n .gjs-pn-panels,\n .gjs-pn-views,\n .gjs-off-prv,\n .gjs-pn-devices {\n display: none !important;\n }\n\n .gjs-badge
|
|
1
|
+
{"version":3,"file":"index.styles.js","names":["createGlobalStyle","StyledEditor"],"sources":["../src/index.styles.ts"],"sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\nexport const StyledEditor = createGlobalStyle`\n /* Hide GrapesJS panels */\n .gs-sidebar-left,\n .gs-sidebar-top,\n .gs-sidebar-right,\n .gjs-pn-panels,\n .gjs-pn-views,\n .gjs-off-prv,\n .gjs-pn-devices {\n display: none !important;\n }\n\n .gjs-badge-label {\n display: none !important;\n }\n\n .gjs-cv-canvas {\n height: 100% !important;\n width: 100% !important;\n top: 0 !important;\n }\n`;\n"],"mappings":"AAAA,OAASA,iBAAiB,KAAQ,mBAAmB,CAErD,MAAO,IAAM,CAAAC,YAAY,CAAGD,iBAAiB,oQAqB5C","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _extends from"@babel/runtime/helpers/extends";/* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";export function createGrapesjsShadcnGenericPlugin(mode){return function grapesjsShadcnGenericPlugin(editor){editor.
|
|
1
|
+
import _extends from"@babel/runtime/helpers/extends";/* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";export function createGrapesjsShadcnGenericPlugin(mode){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 _ref;var target=e.target;var slot=target.dataset.slot;var text=target.innerText;this.model.set("componentProps",_extends({},this.model.get("componentProps"),slot?(_ref={},_ref[slot]=text,_ref):{}))},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.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(renderer(compProps),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(renderer(compProps),this.el)}}else{this.el.innerHTML="<div>Unsupported component: "+compName+"</div>"}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(){ReactDOM.unmountComponentAtNode(this.el);return this}}})}}
|
|
4
4
|
//# sourceMappingURL=grapejs-plugin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","createGrapesjsShadcnGenericPlugin","mode","grapesjsShadcnGenericPlugin","editor","
|
|
1
|
+
{"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","createGrapesjsShadcnGenericPlugin","mode","grapesjsShadcnGenericPlugin","editor","DomComponents","addType","model","defaults","tagName","droppable","componentName","componentProps","traits","view","events","handleSlotInput","e","_ref","target","slot","dataset","text","innerText","set","_extends","get","render","_this","compName","compProps","JSON","parse","err","console","error","isEditable","onChange","data","renderers","renderer","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 func-names */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport ReactDOM from 'react-dom';\nimport { Editor } from 'grapesjs';\nimport { getRenderers } from './helpers/render-components';\n\nexport function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview') {\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 this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...(slot ? { [slot]: text } : {}),\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\n compProps.onChange = (data: Record<string, string>) => {\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), 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), this.el);\n }\n } else {\n this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;\n }\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 ReactDOM.unmountComponentAtNode(this.el);\n\n return this;\n },\n },\n });\n };\n}"],"mappings":"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","ignoreList":[]}
|