diff --git a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx index 91761054..a83177e7 100644 --- a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx +++ b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx @@ -72,8 +72,15 @@ interface RichTextProps extends InternalNoCodeComponentProps { function RichTextEditor(props: RichTextProps) { // const { editorContext } = (window.parent as any).editorWindowAPI; + + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + const { formValues, locales, locale, focussedField, definitions } = - useEasyblocksCanvasContext(); + canvasContext; // const { // actions, diff --git a/packages/core/src/compiler/builtins/$text/$text.editor.tsx b/packages/core/src/compiler/builtins/$text/$text.editor.tsx index 61a467c6..514ed3b8 100644 --- a/packages/core/src/compiler/builtins/$text/$text.editor.tsx +++ b/packages/core/src/compiler/builtins/$text/$text.editor.tsx @@ -17,7 +17,12 @@ function TextEditor(props: TextProps) { __easyblocks: { path, runtime }, } = props; - const { formValues } = useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + const { formValues } = canvasContext; const valuePath = `${path}.value`; const configValue = dotNotationGet(formValues, valuePath); diff --git a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx index f2a09631..d008cef6 100644 --- a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx +++ b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx @@ -18,7 +18,14 @@ export function InlineTextarea({ }: InlineTextProps) { const [isEnabled, setIsEnabled] = useState(false); const textAreaRef = useRef>(null); - const { formValues, locale, locales } = useEasyblocksCanvasContext(); + + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { formValues, locale, locales } = canvasContext; const valuePath = `${path}.value`; const value = dotNotationGet(formValues, valuePath); diff --git a/packages/core/src/components/EasyblocksCanvasProvider.tsx b/packages/core/src/components/EasyblocksCanvasProvider.tsx index 59ab6c6b..8fb59cb9 100644 --- a/packages/core/src/components/EasyblocksCanvasProvider.tsx +++ b/packages/core/src/components/EasyblocksCanvasProvider.tsx @@ -25,22 +25,9 @@ type EasyblocksCanvasState = { focussedField: EditorContextType["focussedField"]; }; -const initialState: EasyblocksCanvasState = { - meta: null, - compiled: null, - externalData: null, - formValues: null, - definitions: null, - locale: "", - locales: [], - isEditing: false, - devices: null, - focussedField: [], -}; - -const EasyblocksCanvasContext = createContext< - EasyblocksCanvasState | undefined ->(undefined); +const EasyblocksCanvasContext = createContext( + null +); type EasyblocksCanvasProviderProps = { children: ReactNode; @@ -49,7 +36,7 @@ type EasyblocksCanvasProviderProps = { const EasyblocksCanvasProvider: React.FC = ({ children, }) => { - const [state, setState] = useState(initialState); + const [state, setState] = useState(null); useEffect(() => { const handler = (event: any) => { @@ -72,13 +59,7 @@ const EasyblocksCanvasProvider: React.FC = ({ }; const useEasyblocksCanvasContext = () => { - const context = useContext(EasyblocksCanvasContext); - if (!context) { - throw new Error( - "useEasyblocksCanvasContext must be used within a EasyblocksCanvasProvider" - ); - } - return context; + return useContext(EasyblocksCanvasContext); }; export { EasyblocksCanvasProvider, useEasyblocksCanvasContext }; diff --git a/packages/editor/src/CanvasRoot/CanvasRoot.tsx b/packages/editor/src/CanvasRoot/CanvasRoot.tsx index 9b0c1004..a5c5dde4 100644 --- a/packages/editor/src/CanvasRoot/CanvasRoot.tsx +++ b/packages/editor/src/CanvasRoot/CanvasRoot.tsx @@ -7,7 +7,13 @@ type CanvasRootProps = { }; function CanvasRoot(props: CanvasRootProps) { - const { isEditing } = useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { isEditing } = canvasContext; useCanvasGlobalKeyboardShortcuts(); diff --git a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx index 14641636..69e22e43 100644 --- a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx +++ b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx @@ -44,7 +44,13 @@ export function BlocksControls({ index, length, }: BlocksControlsProps) { - const { focussedField, formValues } = useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { focussedField, formValues } = canvasContext; const meta = useEasyblocksMetadata(); const dndContext = useDndContext(); diff --git a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx index be8c1904..af0d0878 100644 --- a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx +++ b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx @@ -110,7 +110,13 @@ function SelectionFrameController({ }, }); - const { focussedField } = useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { focussedField } = canvasContext; useEffect(() => { return () => { diff --git a/packages/editor/src/EditorChildWindow.tsx b/packages/editor/src/EditorChildWindow.tsx index 37ffd189..b169af0f 100644 --- a/packages/editor/src/EditorChildWindow.tsx +++ b/packages/editor/src/EditorChildWindow.tsx @@ -75,8 +75,14 @@ export function EasyblocksCanvas({ ); }, []); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + const { meta, compiled, externalData, formValues, definitions } = - useEasyblocksCanvasContext(); + canvasContext; const shouldNotRender = !enabled || diff --git a/packages/editor/src/Placeholder.tsx b/packages/editor/src/Placeholder.tsx index 25388ef1..b0c61947 100644 --- a/packages/editor/src/Placeholder.tsx +++ b/packages/editor/src/Placeholder.tsx @@ -121,7 +121,13 @@ type TypePlaceholderComponentBuilderProps = { export default function TypePlaceholder( props: TypePlaceholderComponentBuilderProps ) { - const { formValues } = useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { formValues } = canvasContext; const meta = useEasyblocksMetadata(); const dndContext = useDndContext(); diff --git a/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts b/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts index 147cab6f..eadbc654 100644 --- a/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts +++ b/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts @@ -67,8 +67,13 @@ const actions = { }; function useCanvasGlobalKeyboardShortcuts() { - const { formValues, definitions, focussedField } = - useEasyblocksCanvasContext(); + const canvasContext = useEasyblocksCanvasContext(); + + if (!canvasContext) { + return null; + } + + const { formValues, definitions, focussedField } = canvasContext; useEffect(() => { function handleKeydown(event: KeyboardEvent): void {