feat(repo): canvascontext dont expose context null

Author: maarten2424

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,

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);

packages/core/src/compiler/builtins/$text/InlineTextarea.tsx

@@ -18,7 +18,14 @@ export function InlineTextarea({
 }: InlineTextProps) {
   const [isEnabled, setIsEnabled] = useState(false);
   const textAreaRef = useRef<ElementRef<"textarea">>(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);

packages/core/src/components/EasyblocksCanvasProvider.tsx

@@ -13,34 +13,21 @@ import {
 } from "../types";
 
 type EasyblocksCanvasState = {
-  meta: CompilationMetadata | null;
-  compiled: CompiledShopstoryComponentConfig | null;
-  externalData: FetchOutputResources | null;
-  formValues: EditorContextType["form"]["values"] | null;
-  definitions: EditorContextType["definitions"] | null;
+  meta: CompilationMetadata;
+  compiled: CompiledShopstoryComponentConfig;
+  externalData: FetchOutputResources;
+  formValues: EditorContextType["form"]["values"];
+  definitions: EditorContextType["definitions"];
   locale: EditorContextType["contextParams"]["locale"];
   locales: EditorContextType["locales"];
   isEditing: EditorContextType["isEditing"];
-  devices: EditorContextType["devices"] | null;
+  devices: EditorContextType["devices"];
   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<EasyblocksCanvasState | null>(
+  null
+);
 
 type EasyblocksCanvasProviderProps = {
   children: ReactNode;
@@ -49,7 +36,7 @@ type EasyblocksCanvasProviderProps = {
 const EasyblocksCanvasProvider: React.FC<EasyblocksCanvasProviderProps> = ({
   children,
 }) => {
-  const [state, setState] = useState<EasyblocksCanvasState>(initialState);
+  const [state, setState] = useState<EasyblocksCanvasState | null>(null);
 
   useEffect(() => {
     const handler = (event: any) => {
@@ -72,13 +59,7 @@ const EasyblocksCanvasProvider: React.FC<EasyblocksCanvasProviderProps> = ({
 };
 
 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 };

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();
 

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();

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 () => {

packages/editor/src/EditorChildWindow.tsx

@@ -75,21 +75,17 @@ export function EasyblocksCanvas({
     );
   }, []);
 
-  const { meta, compiled, externalData, formValues, definitions } =
-    useEasyblocksCanvasContext();
+  const canvasContext = useEasyblocksCanvasContext();
 
-  const shouldNotRender =
-    !enabled ||
-    !meta ||
-    !compiled ||
-    !externalData ||
-    !formValues ||
-    !definitions;
+  const shouldNotRender = !enabled || !canvasContext;
 
   if (shouldNotRender) {
     return <div>Loading...</div>;
   }
 
+  const { meta, compiled, externalData, formValues, definitions } =
+    canvasContext;
+
   const sortableItems = getSortableItems(formValues, definitions);
 
   return (

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();
 

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 {