@leochen0204/grapesjs-react 2.0.0-react17-rc.0

package/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 2023-current Artur Arseniev (Original work)
+Copyright (c) 2026 Leo Chen (Modifications for React 17 compatibility)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# GrapesJS React
+
+> **React 17 compatible fork** optimized for React 17.X projects.
+> Based on the official [GrapesJS React wrapper](https://github.com/GrapesJS/react).
+
+A [GrapesJS](https://grapesjs.com) wrapper for React that allows you to build custom and declarative UI for your editor.
+
+## Installation
+
+```sh
+npm i grapesjs @leochen0204/grapesjs-react
+```
+
+## Compatibility
+
+- React v17.X, v18.X, v19.X
+- GrapesJS v0.22.5 or higher
+
+## Usage
+
+```tsx
+import grapesjs from 'grapesjs';
+import GjsEditor from '@leochen0204/grapesjs-react';
+
+export default function Editor() {
+  return (
+    <GjsEditor
+      grapesjs={grapesjs}
+      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
+      options={{
+        height: '100vh',
+        storageManager: false,
+      }}
+    />
+  );
+}
+```
+
+For more details, see the [official documentation](https://github.com/GrapesJS/react).
+
+## Credits
+
+Based on the official [GrapesJS React wrapper](https://github.com/GrapesJS/react) by the GrapesJS team.
+
+## License
+
+MIT

package/dist/AssetsProvider.d.ts

@@ -0,0 +1,44 @@
+import { Asset } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type AssetsState = {
+    /**
+     * Array of assets.
+     */
+    assets: Asset[];
+    /**
+     * Asset types.
+     */
+    types: string[];
+    /**
+     * Select asset.
+     */
+    select: (asset: Asset, complete?: boolean) => void;
+    /**
+     * Close assets.
+     */
+    close: () => void;
+    /**
+     * Asset Manager container.
+     */
+    Container: PortalContainerResult;
+};
+export type AssetsResultProps = AssetsState & {
+    /**
+     * Indicates if the Asset Manager is open.
+     */
+    open: boolean;
+};
+export interface AssetsProviderProps {
+    children: (props: AssetsResultProps) => ReactElement<any>;
+}
+export interface AssetsEventProps {
+    open: boolean;
+    assets: Asset[];
+    types: string[];
+    select: () => void;
+    close: () => void;
+    container: HTMLElement;
+}
+declare const _default: (props: AssetsProviderProps) => JSX.Element;
+export default _default;

package/dist/BlocksProvider.d.ts

@@ -0,0 +1,39 @@
+import { Block } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type BlocksState = {
+    /**
+     * Array of blocks.
+     */
+    blocks: Block[];
+    /**
+     * Enable drag for a block.
+     */
+    dragStart: (block: Block, ev?: Event) => void;
+    /**
+     * Disable drag.
+     */
+    dragStop: (cancel?: boolean) => void;
+    /**
+     * Default Block Manager container.
+     */
+    Container: PortalContainerResult;
+    /**
+     * Map of blocks by category.
+     */
+    mapCategoryBlocks: MapCategoryBlocks;
+};
+export type BlocksResultProps = BlocksState;
+export interface BlocksProviderProps {
+    children: (props: BlocksResultProps) => ReactElement<any>;
+}
+export interface BlocksEventProps {
+    blocks: Block[];
+    container: HTMLElement;
+    dragStart: (block: Block, ev?: Event) => void;
+    drag: (ev: Event) => void;
+    dragStop: (cancel?: boolean) => void;
+}
+export type MapCategoryBlocks = Map<string, Block[]>;
+declare const _default: (props: BlocksProviderProps) => JSX.Element;
+export default _default;

package/dist/Canvas.d.ts

@@ -0,0 +1,2 @@
+import { HTMLProps } from 'react';
+export default function Canvas({ children, ...rest }: HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/DevicesProvider.d.ts

@@ -0,0 +1,22 @@
+import { Device } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+export type DevicesState = {
+    /**
+     * Array of devices.
+     */
+    devices: Device[];
+    /**
+     * Selected device id.
+     */
+    selected: string;
+    /**
+     * Select new device by id.
+     */
+    select: (deviceId: string) => void;
+};
+export type DevicesResultProps = DevicesState;
+export interface DevicesProviderProps {
+    children: (props: DevicesResultProps) => ReactElement<any>;
+}
+declare const _default: (props: DevicesProviderProps) => JSX.Element;
+export default _default;

package/dist/Editor.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react';
+import { EditorProps } from './EditorInstance';
+declare const _default: (props: EditorProps) => JSX.Element;
+export default _default;

package/dist/EditorInstance.d.ts

@@ -0,0 +1,53 @@
+import { default as gjs, Editor, EditorConfig, ProjectData } from 'grapesjs';
+import { HTMLProps, ReactNode, JSX } from 'react';
+import { PluginTypeToLoad } from './utils/plugins';
+export interface EditorProps extends HTMLProps<HTMLDivElement> {
+    grapesjs: string | typeof gjs;
+    /**
+     * GrapesJS options.
+     */
+    options?: EditorConfig;
+    /**
+     * Load GrapesJS CSS file asynchronously from URL.
+     * @example 'https://unpkg.com/grapesjs/dist/css/grapes.min.css'
+     */
+    grapesjsCss?: string;
+    /**
+     * Array of plugins.
+     * Differently from the GrapesJS `plugins` option, this one allows also you to load plugins
+     * asynchronously from a CDN URL.
+     * @example
+     * plugins: [
+     *  {
+     *    // The id should be name of the plugin that will be actually loaded
+     *    id: 'gjs-blocks-basic',
+     *    src: 'https://unpkg.com/grapesjs-blocks-basic',
+     *    options: {}
+     *  }
+     *  // plugin already loaded in the global scope (eg. loaded via CND in HTML)
+     *  'grapesjs-plugin-forms',
+     *  // plugin as a function
+     *  myPlugin,
+     * ]
+     */
+    plugins?: PluginTypeToLoad[];
+    /**
+     * Callback triggered once the editor instance is created.
+     */
+    onEditor?: (editor: Editor) => void;
+    /**
+     * Callback triggered once the editor is ready (mounted and loaded data from the Storage).
+     */
+    onReady?: (editor: Editor) => void;
+    /**
+     * Callback triggered on each update in the editor project.
+     * The updated ProjectData (JSON) is passed as a first argument.
+     */
+    onUpdate?: (projectData: ProjectData, editor: Editor) => void;
+    /**
+     * Avoid showing children of the editor until the editor is ready (mounted and loaded data from the Storage).
+     */
+    waitReady?: boolean | ReactNode;
+}
+declare const _default: (props: EditorProps) => JSX.Element;
+export default _default;

package/dist/EditorReady.d.ts

@@ -0,0 +1,2 @@
+declare const EditorReady: import('react').NamedExoticComponent<object>;
+export default EditorReady;

package/dist/LayersProvider.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type LayersState = {
+    /**
+     * Root layer component.
+     */
+    root?: Component;
+    /**
+     * Default Layers Manager container.
+     */
+    Container: PortalContainerResult;
+};
+export type LayersResultProps = LayersState;
+export interface LayersProviderProps {
+    children: (props: LayersResultProps) => ReactElement<any>;
+}
+declare const _default: (props: LayersProviderProps) => JSX.Element;
+export default _default;

package/dist/ModalProvider.d.ts

@@ -0,0 +1,37 @@
+import { ReactElement, JSX } from 'react';
+export interface ModalState {
+    /**
+     * Modal title
+     */
+    title: ReactElement<any>;
+    /**
+     * Modal content
+     */
+    content: ReactElement<any>;
+    /**
+     * Modal attributes
+     */
+    attributes: Record<string, any>;
+    /**
+     * Callback for closing the modal
+     */
+    close: () => void;
+}
+export interface ModalResultProps extends ModalState {
+    /**
+     * Indicates if the modal is open.
+     */
+    open: boolean;
+}
+export interface ModalProviderProps {
+    children: (props: ModalResultProps) => ReactElement<any>;
+}
+export interface ModalEventProps {
+    open: boolean;
+    title: string | HTMLElement;
+    content: string | HTMLElement;
+    attributes: Record<string, any>;
+    close: () => void;
+}
+declare const _default: (props: ModalProviderProps) => JSX.Element;
+export default _default;

package/dist/PagesProvider.d.ts

@@ -0,0 +1,30 @@
+import { Editor, Page } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+export type PagesState = {
+    /**
+     * Array of pages.
+     */
+    pages: Page[];
+    /**
+     * Selected page.
+     */
+    selected?: Page;
+    /**
+     * Select page.
+     */
+    select: Editor['Pages']['select'];
+    /**
+     * Add new page.
+     */
+    add: Editor['Pages']['add'];
+    /**
+     * Remove page.
+     */
+    remove: Editor['Pages']['remove'];
+};
+export type PagesResultProps = PagesState;
+export interface PagesProviderProps {
+    children: (props: PagesResultProps) => ReactElement<any>;
+}
+declare const _default: (props: PagesProviderProps) => JSX.Element;
+export default _default;

package/dist/SelectorsProvider.d.ts

@@ -0,0 +1,43 @@
+import { Selector, State, Editor } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type SelectorsState = {
+    /**
+     * Array of current selectors.
+     */
+    selectors: Selector[];
+    /**
+     * Array of available states.
+     */
+    states: State[];
+    /**
+     * Current selected state.
+     */
+    selectedState: string;
+    /**
+     * Selector strings of currently selected targets.
+     */
+    targets: string[];
+    /**
+     * Add new selector to selected targets.
+     */
+    addSelector: (...args: Parameters<Editor['Selectors']['addSelected']>) => void;
+    /**
+     * Remove selector from selected targets.
+     */
+    removeSelector: (...args: Parameters<Editor['Selectors']['removeSelected']>) => void;
+    /**
+     * Update current state.
+     */
+    setState: (...args: Parameters<Editor['Selectors']['setState']>) => void;
+    /**
+     * Default Selectors container.
+     */
+    Container: PortalContainerResult;
+};
+export type SelectorsResultProps = SelectorsState;
+export interface SelectorsProviderProps {
+    children: (props: SelectorsResultProps) => ReactElement<any>;
+}
+declare const _default: (props: SelectorsProviderProps) => JSX.Element;
+export default _default;

package/dist/StylesProvider.d.ts

@@ -0,0 +1,19 @@
+import { Sector } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type StylesState = {
+    /**
+     * Array of visible sectors.
+     */
+    sectors: Sector[];
+    /**
+     * Default Styles container.
+     */
+    Container: PortalContainerResult;
+};
+export type StylesResultProps = StylesState;
+export interface StylesProviderProps {
+    children: (props: StylesResultProps) => ReactElement<any>;
+}
+declare const _default: (props: StylesProviderProps) => JSX.Element;
+export default _default;

package/dist/TraitsProvider.d.ts

@@ -0,0 +1,19 @@
+import { Trait } from 'grapesjs';
+import { ReactElement, JSX } from 'react';
+import { PortalContainerResult } from './utils/react';
+export type TraitsState = {
+    /**
+     * Current selected traits.
+     */
+    traits: Trait[];
+    /**
+     * Default Trait Manager container.
+     */
+    Container: PortalContainerResult;
+};
+export type TraitsResultProps = TraitsState;
+export interface TraitsProviderProps {
+    children: (props: TraitsResultProps) => ReactElement<any>;
+}
+declare const _default: (props: TraitsProviderProps) => JSX.Element;
+export default _default;

package/dist/WithEditor.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Load children once the editor is available
+ */
+declare const WithEditor: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
+export default WithEditor;

package/dist/context/EditorInstance.d.ts

@@ -0,0 +1,24 @@
+import { Editor } from 'grapesjs';
+import { ReactNode } from 'react';
+declare const EditorInstanceContext: import('react').Context<EditorInstanceState | null>;
+export interface EditorInstanceState {
+    editor?: Editor;
+    setEditor: (editor: Editor) => void;
+}
+export declare const EditorInstanceProvider: ({ children }: {
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Context used to keep the editor instance once initialized
+ */
+export declare const useEditorInstance: () => EditorInstanceState;
+/**
+ * Get the current editor instance.
+ * @returns Editor
+ */
+export declare const useEditor: () => Editor;
+/**
+ * Similar to useEditor, but in this case, the editor might be undefined.
+ */
+export declare const useEditorMaybe: () => Editor | undefined;
+export default EditorInstanceContext;

package/dist/context/EditorOptions.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+declare const EditorOptionsContext: import('react').Context<EditorOptionsState | null>;
+export interface EditorOptionsState {
+    refCanvas?: HTMLElement;
+    customModal?: boolean;
+    customAssets?: boolean;
+    customStyles?: boolean;
+    customBlocks?: boolean;
+    customLayers?: boolean;
+    customSelectors?: boolean;
+    customTraits?: boolean;
+    customRte?: boolean;
+    ready?: boolean;
+    setRefCanvas: (ref: HTMLElement) => void;
+    setCustomModal: (value: boolean) => void;
+    setCustomAssets: (value: boolean) => void;
+    setCustomBlocks: (value: boolean) => void;
+    setCustomRte: (value: boolean) => void;
+    setCustomStyles: (value: boolean) => void;
+    setCustomLayers: (value: boolean) => void;
+    setCustomSelectors: (value: boolean) => void;
+    setCustomTraits: (value: boolean) => void;
+    setReady: (value: boolean) => void;
+}
+export declare const EditorOptionsProvider: ({ children }: {
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Context used to keep the editor instance once initialized
+ */
+export declare const useEditorOptions: () => EditorOptionsState;
+export default EditorOptionsContext;

package/dist/context/index.d.ts

@@ -0,0 +1,2 @@
+export { EditorInstanceProvider } from './EditorInstance';
+export { EditorOptionsProvider } from './EditorOptions';

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("react"),G=require("react-dom"),_=r.createContext(null),J=({children:e})=>{const[t,c]=r.useState({setEditor:s=>{c(n=>({...n,editor:s}))}});return o.jsx(_.Provider,{value:t,children:e})},m=()=>{const e=r.useContext(_);if(!e)throw new Error("useEditorInstance must be used within EditorInstanceProvider");return e},K=()=>{const{editor:e}=m();if(!e)throw new Error("useEditor used before the load of the editor instance. You can wrap your component in `<WithEditor>` or make use of `useEditorMaybe` hook and ensure the `editor` exists.");return e},D=()=>m().editor,W=r.createContext(null),Q=({children:e})=>{const[t,c]=r.useState(()=>({setRefCanvas(s){c(n=>({...n,refCanvas:s}))},setCustomModal(s){c(n=>({...n,customModal:s}))},setCustomAssets(s){c(n=>({...n,customAssets:s}))},setCustomBlocks(s){c(n=>({...n,customBlocks:s}))},setCustomRte(s){c(n=>({...n,customRte:s}))},setCustomStyles(s){c(n=>({...n,customStyles:s}))},setCustomLayers(s){c(n=>({...n,customLayers:s}))},setCustomSelectors(s){c(n=>({...n,customSelectors:s}))},setCustomTraits(s){c(n=>({...n,customTraits:s}))},setReady(s){c(n=>({...n,ready:s}))}}));return o.jsx(W.Provider,{value:t,children:e})},S=()=>{const e=r.useContext(W);if(!e)throw new Error("useEditorOptions must be used within EditorOptionsProvider");return e};function U(...e){return(Array.isArray(e[0])?e[0]:[...e]).filter(Boolean).join(" ")}function x(e){return typeof e=="function"}function p(){}const q=e=>typeof e=="string",V=async e=>{const t=document.createElement("link");t.href=e,t.rel="stylesheet",document.head.appendChild(t)},N=e=>{const t=q(e)?{id:e,src:e}:e;return new Promise((c,s)=>{const n=document.createElement("script");if(document.querySelector(`script[src="${t.src}"]`))return c(t.id);n.src=t.src,n.onload=()=>c(t.id),n.onerror=()=>s(t.id),document.head.appendChild(n)})},X=e=>{const t=e.map(c=>N(c));return Promise.allSettled(t)},A=e=>function(){const c=r.useRef(null);return r.useEffect(()=>{const{current:s}=c;s&&(q(e)?s.innerHTML=e:s.appendChild(e))},[c.current]),o.jsx("div",{ref:c})},I=new WeakMap;function j(e){if(!e)return()=>o.jsx(o.Fragment,{});const t=I.get(e);if(t)return t;const c=function({children:n}){return G.createPortal(r.createElement("div",null,n),e)};return I.set(e,c),c}const Z=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(!1),[i,a]=r.useState({assets:[],types:[],close:()=>{},select:()=>{},Container:()=>o.jsx(o.Fragment,{})});return r.useEffect(()=>{if(!t)return;const u=t.Assets.events.custom,d=({open:f,assets:v,types:C,select:E,close:l,container:y})=>{f&&a({assets:v,types:C,select:E,close:l,Container:j(y)}),n(f)};return t.on(u,d),()=>{t.off(u,d)}},[t]),r.useEffect(()=>c.setCustomAssets(!0),[]),t?x(e)?e({open:s,...i}):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),tt=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(()=>({blocks:[],dragStart:p,dragStop:p,mapCategoryBlocks:new Map,Container:()=>o.jsx(o.Fragment,{})}));return r.useEffect(()=>{if(!t)return;const i=t.Blocks.events.custom,a=({blocks:u,container:d,dragStart:f,dragStop:v})=>{const C=u.reduce((E,l)=>{const y=l.getCategoryLabel(),P=E.get(y);return P?P.push(l):E.set(y,[l]),E},new Map);n({blocks:u,dragStart:f,dragStop:v,mapCategoryBlocks:C,Container:j(d)})};return t.on(i,a),t.Blocks.__trgCustom(),()=>{t.off(i,a)}},[t]),r.useEffect(()=>c.setCustomBlocks(!0),[]),t?x(e)?e(s):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})});function et({children:e,...t}){const c=S(),s=r.useRef(null);return r.useEffect(()=>{s.current&&c.setRefCanvas(s.current)},[s.current]),o.jsx("div",{...t,ref:s,children:e})}const st=r.memo(function({children:e}){const{editor:t}=m(),[c,s]=r.useState(()=>({devices:[],selected:"",select:p}));return r.useEffect(()=>{if(!t)return;const{Devices:n}=t,i=n.events.all,a=()=>{var u;s({devices:n.getDevices(),selected:(u=n.getSelected())==null?void 0:u.id,select:d=>n.select(d)})};return t.on(i,a),a(),()=>{t.off(i,a)}},[t]),t?x(e)?e(c):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),ot=e=>!!(e&&!Array.isArray(e)&&typeof e=="object");async function nt(e){const t=e.map(({id:a,src:u})=>({id:a,src:u})),c=e.reduce((a,u)=>(a[u.id]=u,a),{}),s=[],n=[];return(await X(t)).forEach(a=>{a.status==="fulfilled"?s.push(c[a.value]):n.push(c[a.reason])}),{loaded:s,failed:n}}const rt=async e=>{const t=[...e],c={};if(t.length){const s={},n=[];if(t.forEach((i,a)=>{ot(i)&&(s[i.id]={index:a},n.push(i))}),n.length){const{loaded:i}=await nt(n);i.forEach(({id:a,options:u})=>{s[a].loaded=!0,c[a]=u||{}})}Object.keys(s).forEach(i=>{const a=s[i];a.loaded?t[a.index]=i:t[a.index]=!1})}return{plugins:t.filter(Boolean),pluginOptions:c}},ct=r.memo(function({children:e,className:t,style:c,options:s={},plugins:n=[],grapesjs:i,grapesjsCss:a,onEditor:u=p,onReady:d,onUpdate:f,waitReady:v,...C}){const{setEditor:E}=m(),l=S(),[y,P]=r.useState(!1),F=r.useRef(null);r.useEffect(()=>{if(!l.ready||!F.current)return;const $=F.current,w=l.refCanvas;let g,T={},b=[];const B=h=>{const z={height:"100%",...s,plugins:[...b,...s.plugins||[]],pluginsOpts:{...s.pluginsOpts,...T},modal:{custom:!!l.customModal,...s.modal},assetManager:{custom:!!l.customAssets,...s.assetManager},styleManager:{custom:!!l.customStyles,...s.styleManager},blockManager:{custom:!!l.customBlocks,...s.blockManager},richTextEditor:{custom:!!l.customRte,...s.richTextEditor},layerManager:{custom:!!l.customLayers,...s.layerManager},traitManager:{custom:!!l.customTraits,...s.traitManager},selectorManager:{custom:!!l.customSelectors,...s.selectorManager},container:w||$,customUI:!!w,...w?{panels:{defaults:[]}}:{}};g=h.init(z),E(g),u(g),f&&g.on("update",()=>{f(g.getProjectData(),g)}),g.onReady(()=>{P(!0),d==null||d(g)})};return(async()=>{a&&await V(a);const h=await rt(n);b=h.plugins,T=h.pluginOptions,typeof i=="string"?(await N(i),B(window.grapesjs)):B(i)})(),()=>g==null?void 0:g.destroy()},[l.ready]);const O=s.height??"100%",k=s.width??"100%",L=U("gjs-editor-wrapper",t),R=v&&!y,M=r.useMemo(()=>({...c,height:O,width:k}),[O,k,c]),Y=r.useMemo(()=>({...M,...R?{opacity:0,width:0,height:0}:{}}),[M,R]);return o.jsxs(o.Fragment,{children:[v&&!y?o.jsx("div",{className:L,style:M,children:v}):null,o.jsx("div",{...C,ref:F,className:L,style:Y,children:e})]})}),at=r.memo(function(){const e=S();return r.useEffect(()=>e.setReady(!0),[]),o.jsx(o.Fragment,{})}),H=r.memo(function({children:t,...c}){return o.jsx(J,{children:o.jsx(Q,{children:o.jsxs(ct,{...c,children:[t,o.jsx(at,{})]})})})}),it=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(()=>({root:void 0,Container:()=>o.jsx(o.Fragment,{})}));return r.useEffect(()=>{if(!t)return;const{Layers:i}=t,a=i.events.custom,u=({container:d})=>{n({root:i.getRoot(),Container:j(d)})};return t.on(a,u),i.__trgCustom({}),()=>{t.off(a,u)}},[t]),r.useEffect(()=>c.setCustomLayers(!0),[]),t?x(e)?e(s):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),ut=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(!1),[i,a]=r.useState({title:o.jsx(o.Fragment,{}),content:o.jsx(o.Fragment,{}),attributes:{},close:p});return r.useEffect(()=>{if(!t)return;const u="modal",d=({open:f,title:v,content:C,close:E,attributes:l})=>{f&&a({title:r.createElement(A(v)),content:r.createElement(A(C)),attributes:l,close:E}),n(f)};return t.on(u,d),()=>{t.off(u,d)}},[t]),r.useEffect(()=>c.setCustomModal(!0),[]),t?typeof e=="function"?e({open:s,...i}):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),dt=r.memo(function({children:e}){const{editor:t}=m(),[c,s]=r.useState(()=>({pages:[],selected:void 0,select:p,add:p,remove:p}));return r.useEffect(()=>{if(!t)return;const{Pages:n}=t,i=n.events.all,a=()=>{s({pages:n.getAll(),selected:n.getSelected(),select:(...u)=>n.select(...u),add:(...u)=>n.add(...u),remove:(...u)=>n.remove(...u)})};return t.on(i,a),a(),()=>{t.off(i,a)}},[t]),t?x(e)?e(c):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),lt=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(()=>({selectors:[],states:[],selectedState:"",targets:[],addSelector:p,removeSelector:p,setState:p,Container:()=>o.jsx(o.Fragment,{})}));return r.useEffect(()=>{if(!t)return;const{Selectors:i}=t,a=i.events.custom,u=({container:d})=>{n({selectors:i.getSelected(),states:i.getStates(),selectedState:i.getState(),targets:i.getSelectedTargets().map(f=>f.getSelectorsString()),addSelector:(...f)=>i.addSelected(...f),removeSelector:(...f)=>i.removeSelected(...f),setState:(...f)=>i.setState(...f),Container:j(d)})};return t.on(a,u),()=>{t.off(a,u)}},[t]),r.useEffect(()=>c.setCustomSelectors(!0),[]),t?x(e)?e(s):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),ft=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(()=>({sectors:[],Container:()=>o.jsx(o.Fragment,{})}));return r.useEffect(()=>{if(!t)return;const{Styles:i}=t,a=i.events.custom,u=({container:d})=>{n({sectors:i.getSectors({visible:!0}),Container:j(d)})};return t.on(a,u),()=>{t.off(a,u)}},[t]),r.useEffect(()=>c.setCustomStyles(!0),[]),t?x(e)?e(s):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),mt=r.memo(function({children:e}){const{editor:t}=m(),c=S(),[s,n]=r.useState(()=>({traits:[],Container:()=>o.jsx(o.Fragment,{})}));return r.useEffect(()=>{if(!t)return;const{Traits:i}=t,a=i.events.custom,u=({container:d})=>{n({traits:i.getCurrent(),Container:j(d)})};return t.on(a,u),i.__trgCustom(),()=>{t.off(a,u)}},[t]),r.useEffect(()=>c.setCustomTraits(!0),[]),t?x(e)?e(s):o.jsx(o.Fragment,{}):o.jsx(o.Fragment,{})}),gt=({children:e})=>D()?o.jsx(o.Fragment,{children:e}):o.jsx(o.Fragment,{});exports.AssetsProvider=Z;exports.BlocksProvider=tt;exports.Canvas=et;exports.DevicesProvider=st;exports.Editor=H;exports.LayersProvider=it;exports.ModalProvider=ut;exports.PagesProvider=dt;exports.SelectorsProvider=lt;exports.StylesProvider=ft;exports.TraitsProvider=mt;exports.WithEditor=gt;exports.default=H;exports.useEditor=K;exports.useEditorMaybe=D;

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export { default as AssetsProvider } from './AssetsProvider';
+export type { AssetsResultProps } from './AssetsProvider';
+export { default as BlocksProvider } from './BlocksProvider';
+export type { BlocksResultProps } from './BlocksProvider';
+export { default as Canvas } from './Canvas';
+export { default as DevicesProvider } from './DevicesProvider';
+export type { DevicesResultProps } from './DevicesProvider';
+export { default as Editor, default } from './Editor';
+export type * from './EditorInstance';
+export { default as LayersProvider } from './LayersProvider';
+export type { LayersResultProps } from './LayersProvider';
+export { default as ModalProvider } from './ModalProvider';
+export { default as PagesProvider } from './PagesProvider';
+export type { PagesResultProps } from './PagesProvider';
+export { default as SelectorsProvider } from './SelectorsProvider';
+export type { SelectorsResultProps } from './SelectorsProvider';
+export { default as StylesProvider } from './StylesProvider';
+export type { StylesResultProps } from './StylesProvider';
+export { default as TraitsProvider } from './TraitsProvider';
+export type { TraitsResultProps } from './TraitsProvider';
+export { default as WithEditor } from './WithEditor';
+export { useEditor, useEditorMaybe } from './context/EditorInstance';

package/dist/index.js

@@ -0,0 +1,473 @@
+import { jsx as i, Fragment as u, jsxs as Y } from "react/jsx-runtime";
+import { createContext as $, useState as m, useContext as z, useRef as B, useEffect as l, createElement as b, memo as g, useMemo as N } from "react";
+import { createPortal as Z } from "react-dom";
+const G = $(null), tt = ({ children: e }) => {
+  const [t, n] = m({
+    setEditor: (o) => {
+      n((s) => ({ ...s, editor: o }));
+    }
+  });
+  return /* @__PURE__ */ i(G.Provider, { value: t, children: e });
+}, v = () => {
+  const e = z(G);
+  if (!e)
+    throw new Error("useEditorInstance must be used within EditorInstanceProvider");
+  return e;
+}, gt = () => {
+  const { editor: e } = v();
+  if (!e)
+    throw new Error(
+      "useEditor used before the load of the editor instance. You can wrap your component in `<WithEditor>` or make use of `useEditorMaybe` hook and ensure the `editor` exists."
+    );
+  return e;
+}, et = () => v().editor, J = $(null), ot = ({ children: e }) => {
+  const [t, n] = m(() => ({
+    setRefCanvas(o) {
+      n((s) => ({ ...s, refCanvas: o }));
+    },
+    setCustomModal(o) {
+      n((s) => ({ ...s, customModal: o }));
+    },
+    setCustomAssets(o) {
+      n((s) => ({ ...s, customAssets: o }));
+    },
+    setCustomBlocks(o) {
+      n((s) => ({ ...s, customBlocks: o }));
+    },
+    setCustomRte(o) {
+      n((s) => ({ ...s, customRte: o }));
+    },
+    setCustomStyles(o) {
+      n((s) => ({ ...s, customStyles: o }));
+    },
+    setCustomLayers(o) {
+      n((s) => ({ ...s, customLayers: o }));
+    },
+    setCustomSelectors(o) {
+      n((s) => ({ ...s, customSelectors: o }));
+    },
+    setCustomTraits(o) {
+      n((s) => ({ ...s, customTraits: o }));
+    },
+    setReady(o) {
+      n((s) => ({ ...s, ready: o }));
+    }
+  }));
+  return /* @__PURE__ */ i(J.Provider, { value: t, children: e });
+}, y = () => {
+  const e = z(J);
+  if (!e)
+    throw new Error("useEditorOptions must be used within EditorOptionsProvider");
+  return e;
+};
+function st(...e) {
+  return (Array.isArray(e[0]) ? e[0] : [...e]).filter(Boolean).join(" ");
+}
+function P(e) {
+  return typeof e == "function";
+}
+function C() {
+}
+const K = (e) => typeof e == "string", nt = async (e) => {
+  const t = document.createElement("link");
+  t.href = e, t.rel = "stylesheet", document.head.appendChild(t);
+}, Q = (e) => {
+  const t = K(e) ? { id: e, src: e } : e;
+  return new Promise((n, o) => {
+    const s = document.createElement("script");
+    if (document.querySelector(`script[src="${t.src}"]`))
+      return n(t.id);
+    s.src = t.src, s.onload = () => n(t.id), s.onerror = () => o(t.id), document.head.appendChild(s);
+  });
+}, rt = (e) => {
+  const t = e.map((n) => Q(n));
+  return Promise.allSettled(t);
+}, q = (e) => function() {
+  const n = B(null);
+  return l(() => {
+    const { current: o } = n;
+    o && (K(e) ? o.innerHTML = e : o.appendChild(e));
+  }, [n.current]), /* @__PURE__ */ i("div", { ref: n });
+}, H = /* @__PURE__ */ new WeakMap();
+function O(e) {
+  if (!e)
+    return () => /* @__PURE__ */ i(u, {});
+  const t = H.get(e);
+  if (t)
+    return t;
+  const n = function({ children: s }) {
+    return Z(b("div", null, s), e);
+  };
+  return H.set(e, n), n;
+}
+const vt = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(!1), [c, r] = m({
+    assets: [],
+    types: [],
+    close: () => {
+    },
+    select: () => {
+    },
+    Container: () => /* @__PURE__ */ i(u, {})
+  });
+  return l(() => {
+    if (!t)
+      return;
+    const a = t.Assets.events.custom, d = ({ open: p, assets: E, types: M, select: h, close: f, container: w }) => {
+      p && r({
+        assets: E,
+        types: M,
+        select: h,
+        close: f,
+        Container: O(w)
+      }), s(p);
+    };
+    return t.on(a, d), () => {
+      t.off(a, d);
+    };
+  }, [t]), l(() => n.setCustomAssets(!0), []), t ? P(e) ? e({ open: o, ...c }) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), St = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(() => ({
+    blocks: [],
+    dragStart: C,
+    dragStop: C,
+    mapCategoryBlocks: /* @__PURE__ */ new Map(),
+    Container: () => /* @__PURE__ */ i(u, {})
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const c = t.Blocks.events.custom, r = ({ blocks: a, container: d, dragStart: p, dragStop: E }) => {
+      const M = a.reduce((h, f) => {
+        const w = f.getCategoryLabel(), k = h.get(w);
+        return k ? k.push(f) : h.set(w, [f]), h;
+      }, /* @__PURE__ */ new Map());
+      s({
+        blocks: a,
+        dragStart: p,
+        dragStop: E,
+        mapCategoryBlocks: M,
+        Container: O(d)
+      });
+    };
+    return t.on(c, r), t.Blocks.__trgCustom(), () => {
+      t.off(c, r);
+    };
+  }, [t]), l(() => n.setCustomBlocks(!0), []), t ? P(e) ? e(o) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+});
+function Ct({ children: e, ...t }) {
+  const n = y(), o = B(null);
+  return l(() => {
+    o.current && n.setRefCanvas(o.current);
+  }, [o.current]), /* @__PURE__ */ i("div", { ...t, ref: o, children: e });
+}
+const yt = g(function({ children: e }) {
+  const { editor: t } = v(), [n, o] = m(() => ({
+    devices: [],
+    selected: "",
+    select: C
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Devices: s } = t, c = s.events.all, r = () => {
+      var a;
+      o({
+        devices: s.getDevices(),
+        selected: (a = s.getSelected()) == null ? void 0 : a.id,
+        select: (d) => s.select(d)
+      });
+    };
+    return t.on(c, r), r(), () => {
+      t.off(c, r);
+    };
+  }, [t]), t ? P(e) ? e(n) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), ct = (e) => !!(e && !Array.isArray(e) && typeof e == "object");
+async function it(e) {
+  const t = e.map(({ id: r, src: a }) => ({ id: r, src: a })), n = e.reduce(
+    (r, a) => (r[a.id] = a, r),
+    {}
+  ), o = [], s = [];
+  return (await rt(t)).forEach((r) => {
+    r.status === "fulfilled" ? o.push(n[r.value]) : s.push(n[r.reason]);
+  }), { loaded: o, failed: s };
+}
+const at = async (e) => {
+  const t = [...e], n = {};
+  if (t.length) {
+    const o = {}, s = [];
+    if (t.forEach((c, r) => {
+      ct(c) && (o[c.id] = { index: r }, s.push(c));
+    }), s.length) {
+      const { loaded: c } = await it(s);
+      c.forEach(({ id: r, options: a }) => {
+        o[r].loaded = !0, n[r] = a || {};
+      });
+    }
+    Object.keys(o).forEach((c) => {
+      const r = o[c];
+      r.loaded ? t[r.index] = c : t[r.index] = !1;
+    });
+  }
+  return {
+    plugins: t.filter(Boolean),
+    pluginOptions: n
+  };
+}, ut = g(function({
+  children: e,
+  className: t,
+  style: n,
+  options: o = {},
+  plugins: s = [],
+  grapesjs: c,
+  grapesjsCss: r,
+  onEditor: a = C,
+  onReady: d,
+  onUpdate: p,
+  waitReady: E,
+  ...M
+}) {
+  const { setEditor: h } = v(), f = y(), [w, k] = m(!1), L = B(null);
+  l(() => {
+    if (!f.ready || !L.current)
+      return;
+    const V = L.current, R = f.refCanvas;
+    let S, j = {}, D = [];
+    const F = (x) => {
+      const X = {
+        height: "100%",
+        ...o,
+        plugins: [...D, ...o.plugins || []],
+        pluginsOpts: {
+          ...o.pluginsOpts,
+          ...j
+        },
+        modal: {
+          custom: !!f.customModal,
+          ...o.modal
+        },
+        assetManager: {
+          custom: !!f.customAssets,
+          ...o.assetManager
+        },
+        styleManager: {
+          custom: !!f.customStyles,
+          ...o.styleManager
+        },
+        blockManager: {
+          custom: !!f.customBlocks,
+          ...o.blockManager
+        },
+        richTextEditor: {
+          custom: !!f.customRte,
+          ...o.richTextEditor
+        },
+        layerManager: {
+          custom: !!f.customLayers,
+          ...o.layerManager
+        },
+        traitManager: {
+          custom: !!f.customTraits,
+          ...o.traitManager
+        },
+        selectorManager: {
+          custom: !!f.customSelectors,
+          ...o.selectorManager
+        },
+        container: R || V,
+        customUI: !!R,
+        // Disables all default panels if Canvas is used
+        ...R ? {
+          panels: { defaults: [] }
+        } : {}
+      };
+      S = x.init(X), h(S), a(S), p && S.on("update", () => {
+        p(S.getProjectData(), S);
+      }), S.onReady(() => {
+        k(!0), d == null || d(S);
+      });
+    };
+    return (async () => {
+      r && await nt(r);
+      const x = await at(s);
+      D = x.plugins, j = x.pluginOptions, typeof c == "string" ? (await Q(c), F(window.grapesjs)) : F(c);
+    })(), () => S == null ? void 0 : S.destroy();
+  }, [f.ready]);
+  const A = o.height ?? "100%", I = o.width ?? "100%", W = st("gjs-editor-wrapper", t), _ = E && !w, T = N(
+    () => ({
+      ...n,
+      height: A,
+      width: I
+    }),
+    [A, I, n]
+  ), U = N(
+    () => ({
+      ...T,
+      ..._ ? {
+        opacity: 0,
+        width: 0,
+        height: 0
+      } : {}
+    }),
+    [T, _]
+  );
+  return /* @__PURE__ */ Y(u, { children: [
+    E && !w ? /* @__PURE__ */ i("div", { className: W, style: T, children: E }) : null,
+    /* @__PURE__ */ i("div", { ...M, ref: L, className: W, style: U, children: e })
+  ] });
+}), dt = g(function() {
+  const e = y();
+  return l(() => e.setReady(!0), []), /* @__PURE__ */ i(u, {});
+}), Et = g(function({ children: t, ...n }) {
+  return /* @__PURE__ */ i(tt, { children: /* @__PURE__ */ i(ot, { children: /* @__PURE__ */ Y(ut, { ...n, children: [
+    t,
+    /* @__PURE__ */ i(dt, {})
+  ] }) }) });
+}), ht = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(() => ({
+    root: void 0,
+    Container: () => /* @__PURE__ */ i(u, {})
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Layers: c } = t, r = c.events.custom, a = ({ container: d }) => {
+      s({
+        root: c.getRoot(),
+        Container: O(d)
+      });
+    };
+    return t.on(r, a), c.__trgCustom({}), () => {
+      t.off(r, a);
+    };
+  }, [t]), l(() => n.setCustomLayers(!0), []), t ? P(e) ? e(o) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), Pt = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(!1), [c, r] = m({
+    title: /* @__PURE__ */ i(u, {}),
+    content: /* @__PURE__ */ i(u, {}),
+    attributes: {},
+    close: C
+  });
+  return l(() => {
+    if (!t)
+      return;
+    const a = "modal", d = ({ open: p, title: E, content: M, close: h, attributes: f }) => {
+      p && r({
+        title: b(q(E)),
+        content: b(q(M)),
+        attributes: f,
+        close: h
+      }), s(p);
+    };
+    return t.on(a, d), () => {
+      t.off(a, d);
+    };
+  }, [t]), l(() => n.setCustomModal(!0), []), t ? typeof e == "function" ? e({ open: o, ...c }) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), Mt = g(function({ children: e }) {
+  const { editor: t } = v(), [n, o] = m(() => ({
+    pages: [],
+    selected: void 0,
+    select: C,
+    add: C,
+    remove: C
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Pages: s } = t, c = s.events.all, r = () => {
+      o({
+        pages: s.getAll(),
+        selected: s.getSelected(),
+        select: (...a) => s.select(...a),
+        add: (...a) => s.add(...a),
+        remove: (...a) => s.remove(...a)
+      });
+    };
+    return t.on(c, r), r(), () => {
+      t.off(c, r);
+    };
+  }, [t]), t ? P(e) ? e(n) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), wt = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(() => ({
+    selectors: [],
+    states: [],
+    selectedState: "",
+    targets: [],
+    addSelector: C,
+    removeSelector: C,
+    setState: C,
+    Container: () => /* @__PURE__ */ i(u, {})
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Selectors: c } = t, r = c.events.custom, a = ({ container: d }) => {
+      s({
+        selectors: c.getSelected(),
+        states: c.getStates(),
+        selectedState: c.getState(),
+        targets: c.getSelectedTargets().map((p) => p.getSelectorsString()),
+        addSelector: (...p) => c.addSelected(...p),
+        removeSelector: (...p) => c.removeSelected(...p),
+        setState: (...p) => c.setState(...p),
+        Container: O(d)
+      });
+    };
+    return t.on(r, a), () => {
+      t.off(r, a);
+    };
+  }, [t]), l(() => n.setCustomSelectors(!0), []), t ? P(e) ? e(o) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), Ot = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(() => ({
+    sectors: [],
+    Container: () => /* @__PURE__ */ i(u, {})
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Styles: c } = t, r = c.events.custom, a = ({ container: d }) => {
+      s({
+        sectors: c.getSectors({ visible: !0 }),
+        Container: O(d)
+      });
+    };
+    return t.on(r, a), () => {
+      t.off(r, a);
+    };
+  }, [t]), l(() => n.setCustomStyles(!0), []), t ? P(e) ? e(o) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), kt = g(function({ children: e }) {
+  const { editor: t } = v(), n = y(), [o, s] = m(() => ({
+    traits: [],
+    Container: () => /* @__PURE__ */ i(u, {})
+  }));
+  return l(() => {
+    if (!t)
+      return;
+    const { Traits: c } = t, r = c.events.custom, a = ({ container: d }) => {
+      s({
+        traits: c.getCurrent(),
+        Container: O(d)
+      });
+    };
+    return t.on(r, a), c.__trgCustom(), () => {
+      t.off(r, a);
+    };
+  }, [t]), l(() => n.setCustomTraits(!0), []), t ? P(e) ? e(o) : /* @__PURE__ */ i(u, {}) : /* @__PURE__ */ i(u, {});
+}), xt = ({ children: e }) => et() ? /* @__PURE__ */ i(u, { children: e }) : /* @__PURE__ */ i(u, {});
+export {
+  vt as AssetsProvider,
+  St as BlocksProvider,
+  Ct as Canvas,
+  yt as DevicesProvider,
+  Et as Editor,
+  ht as LayersProvider,
+  Pt as ModalProvider,
+  Mt as PagesProvider,
+  wt as SelectorsProvider,
+  Ot as StylesProvider,
+  kt as TraitsProvider,
+  xt as WithEditor,
+  Et as default,
+  gt as useEditor,
+  et as useEditorMaybe
+};

package/dist/utils/dom.d.ts

@@ -0,0 +1,15 @@
+export declare const isDef: (value: any) => boolean;
+export declare const isString: (value: any) => value is string;
+export declare const prevent: (ev?: Event) => void | undefined;
+export declare const stop: (ev?: Event) => void | undefined;
+export declare const loadStyle: (href: string) => Promise<void>;
+type ScriptToLoad = {
+    id: string;
+    src: string;
+};
+export declare const loadScript: (src: string | ScriptToLoad) => Promise<string>;
+export declare const loadScripts: (scripts: {
+    id: string;
+    src: string;
+}[]) => Promise<PromiseSettledResult<string>[]>;
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+type ClassNameInput = string | number | boolean | null | undefined;
+type ClassNameInputs = ClassNameInput | Array<ClassNameInput>;
+export declare function cx(...inputs: ClassNameInputs[]): string;
+export declare function isFunction(value: any): value is Function;
+export declare function noop(): void;
+export declare function useTraceUpdate(props: Record<string, any>): void;
+export {};

package/dist/utils/plugins.d.ts

@@ -0,0 +1,16 @@
+import { Plugin, PluginOptions } from 'grapesjs';
+export type GrapesPlugins = string | Plugin<any>;
+export type PluginTypeToLoad = GrapesPlugins | PluginToLoad | false | null | undefined;
+export type PluginToLoad = {
+    id: string;
+    src: string;
+    options?: PluginOptions;
+};
+export declare function loadPlugins(plugins: PluginToLoad[]): Promise<{
+    loaded: PluginToLoad[];
+    failed: PluginToLoad[];
+}>;
+export declare const initPlugins: (plugins: PluginTypeToLoad[]) => Promise<{
+    plugins: GrapesPlugins[];
+    pluginOptions: PluginOptions;
+}>;

package/dist/utils/react.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare const WrapDom: (el: HTMLElement | string) => () => import("react/jsx-runtime").JSX.Element;
+export interface PortalContainerProps {
+    children: ReactNode;
+}
+export type PortalContainerResult = (props: PortalContainerProps) => ReactNode | any;
+export declare function portalContainer(el?: HTMLElement): PortalContainerResult;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@leochen0204/grapesjs-react",
+  "version": "2.0.0-react17-rc.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leochen0204/grapesjs-react.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "build": "tsc && vite build",
+    "build-watch": "tsc && vite build --watch",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependencies": {
+    "grapesjs": "^0.22.5",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}