mustafa-react 2.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+MIT License Copyright (c) 2023-current Artur Arseniev
+
+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,173 @@
+# GrapesJS React
+
+<img width="1075" src="https://github.com/GrapesJS/react/assets/11614725/ca2cdbef-4ad2-4e5e-b0a1-c8218065efca">
+
+> Requires GrapesJS v0.21.3 or higher
+
+The official [GrapesJS](https://grapesjs.com) wrapper for React that allows you to build custom and declarative UI for your editor.
+
+The goal of this library is not to provide UI components but simple wrappers around the core GrapesJS modules and let you define your own UI components and access easily the GrapesJS API.
+
+> **Warning**: This library is NOT intended to render your React components inside the GrapesJS canvas, here it's all about the custom UI around the canvas itself.
+
+## Installation
+
+The core `grapesjs` library is not bundled with the wrapper itself so you have to install it separately.
+
+```sh
+npm i grapesjs @grapesjs/react
+```
+
+## Compatibility
+
+#### @grapesjs/react v1.X
+
+- React v18.X
+- GrapesJS v0.21.3 or higher
+- NextJS v14.X
+
+#### @grapesjs/react v2.X
+
+- React v18.X or v19.X
+- GrapesJS v0.22.5 or higher
+- NextJS v15.X
+
+### Default UI
+
+This is the simplest and more traditional way to use the wrapper with GrapesJS as it relies on the default UI provided by GrapesJS. This approach is less customizable from React perspective and all the UI customization has to be done via GrapesJS (basically how you would do without the wrapper).
+
+```ts
+import grapesjs, { Editor } from 'grapesjs';
+import GjsEditor from '@grapesjs/react';
+
+export default function DefaultEditor() {
+  const onEditor = (editor: Editor) => {
+    console.log('Editor loaded', { editor });
+  };
+
+  return (
+    <GjsEditor
+      // Pass the core GrapesJS library to the wrapper (required).
+      // You can also pass the CDN url (eg. "https://unpkg.com/grapesjs")
+      grapesjs={grapesjs}
+      // Load the GrapesJS CSS file asynchronously from URL.
+      // This is an optional prop, you can always import the CSS directly in your JS if you wish.
+      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
+      // GrapesJS init options
+      options={{
+        height: '100vh',
+        storageManager: false,
+      }}
+      onEditor={onEditor}
+    />
+  );
+}
+```
+
+[Live Example](https://stackblitz.com/edit/grapesjs-react-default-ui)
+
+### Custom UI
+
+This is the more powerful and declarative way to use the wrapper as it gives you full control over the UI of your editor. Using the `<Canvas/>` component inside the main wrapper will disable the core default UI.
+
+```ts
+import grapesjs, { Editor } from 'grapesjs';
+import GjsEditor, { Canvas } from '@grapesjs/react';
+
+export default function CustomEditor() {
+  const onEditor = (editor: Editor) => {
+    console.log('Editor loaded', { editor });
+  };
+
+  return (
+    <GjsEditor
+      grapesjs={grapesjs}
+      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
+      onEditor={onEditor}
+      options={{
+        height: '100vh',
+        storageManager: false,
+      }}
+    >
+        <div>
+        // ... use your UI components
+            <Canvas /> // place the GrapesJS canvas where you wish
+        // ...
+        </div>
+    </GjsEditor>
+  );
+}
+```
+
+Here below you can find a good example (with the usage of all available providers) of how you would build a full custom editor around GrapesJS by using your own React components.
+
+> **Note**: The app doesn't cover all the [GrapesJS API](https://grapesjs.com/docs/api/) but simply provides a good starting point to understand how to create your own custom editor.
+
+[Live Example](https://stackblitz.com/edit/grapesjs-react-custom-ui)
+
+### Get the editor in your components
+
+You can easily access the editor instance in your custom components by using the `useEditor` hook. One only caveat is to use it once the editor is actually created and for this use case, you can rely on the `<WithEditor>` component as a wrapper. Alternatively, you can use `useEditorMaybe` hook and check by yourself if the editor exists.
+
+```ts
+import GjsEditor, { WithEditor, useEditor, useEditorMaybe } from '@grapesjs/react';
+
+function MyComponentWithUseEditor() {
+    // The `editor` is always defined.
+    const editor = useEditor();
+    return (...);
+}
+
+function MyComponentWithUseEditorMaybe() {
+    // The `editor` is not immediately available
+    const editor = useEditorMaybe();
+    return (
+        <div>
+            <div>I will be rendered immediately</div>
+            <div>
+                Editor: { editor ? 'created' : 'not yet created' }.
+            </div>
+        </div>
+    );
+}
+
+export default function CustomEditor() {
+  return (
+    <GjsEditor ...>
+        // ...
+        <WithEditor>
+            // This component won't be rendered until the editor is created
+            <MyComponentWithUseEditor/>
+        </WithEditor>
+        <MyComponentWithUseEditorMaybe/>
+    </GjsEditor>
+  );
+}
+```
+
+> By using components inside the built-in providers, the `editor` is always defined.
+
+## Development
+
+Clone the repository
+
+```sh
+$ git clone https://github.com/GrapesJS/react.git
+$ cd react
+```
+
+Install it
+
+```sh
+$ yarn i
+```
+
+Start the dev server
+
+```sh
+$ yarn start
+```
+
+## 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,43 @@
+{
+  "name": "mustafa-react",
+  "version": "2.0.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/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": {},
+  "peerDependencies": {
+    "grapesjs": "^0.22.5",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}