fix(font): avoid serializing full p5.Font data in previewEntry and IDE hook

client/modules/IDE/components/Console.jsx

@@ -1,24 +1,21 @@
 import React, { useRef, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import ConsoleInput from './ConsoleInput';
-
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
-
 import * as IDEActions from '../../IDE/actions/ide';
-import * as ConsoleActions from '../../IDE/actions/console';
 import { useDidUpdate } from '../hooks/custom-hooks';
 import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
 import { listen } from '../../../utils/dispatcher';
 import getConsoleFeedStyle from '../utils/consoleStyles';
+import { useConsole } from '../context/ConsoleContext';
 
 const Console = () => {
   const { t } = useTranslation();
-  const consoleEvents = useSelector((state) => state.console);
+  const { consoleEvents, clearConsole: clearConsoleContext } = useConsole();
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
   const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
@@ -44,7 +41,7 @@ const Console = () => {
     };
   });
 
-  const handleClearConsole = () => dispatch(ConsoleActions.clearConsole());
+  const handleClearConsole = () => clearConsoleContext();
   const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole());
   const handleExpandConsole = () => dispatch(IDEActions.expandConsole());
 

client/modules/IDE/context/ConsoleContext.jsx

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+const ConsoleContext = createContext(null);
+
+export function ConsoleProvider({ children }) {
+  const [consoleEvents, setConsoleEvents] = useState([]);
+
+  const dispatchConsoleEvent = useCallback((messages) => {
+    setConsoleEvents(prev => [...prev, ...messages]);
+  }, []);
+
+  const clearConsole = useCallback(() => {
+    setConsoleEvents([]);
+  }, []);
+
+  return (
+    <ConsoleContext.Provider value={{ consoleEvents, dispatchConsoleEvent, clearConsole }}>
+      {children}
+    </ConsoleContext.Provider>
+  );
+}
+
+export function useConsole() {
+  const context = useContext(ConsoleContext);
+  if (!context) {
+    throw new Error('useConsole must be used within a ConsoleProvider');
+  }
+  return context;
+} 

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -1,10 +1,11 @@
 import { useDispatch } from 'react-redux';
 import { Decode } from 'console-feed';
-import { dispatchConsoleEvent } from '../actions/console';
 import { stopSketch, expandConsole } from '../actions/ide';
+import { useConsole } from '../context/ConsoleContext';
 
 export default function useHandleMessageEvent() {
   const dispatch = useDispatch();
+  const { dispatchConsoleEvent } = useConsole();
 
   const safeStringify = (
     obj,
@@ -62,7 +63,7 @@ export default function useHandleMessageEvent() {
       return;
     }
 
-    dispatch(dispatchConsoleEvent(decodedMessages));
+    dispatchConsoleEvent(decodedMessages);
   };
 
   return handleMessageEvent;

client/modules/IDE/pages/IDEView.jsx

@@ -10,6 +10,7 @@ import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import { updateFileContent } from '../actions/files';
+import { ConsoleProvider } from '../context/ConsoleContext';
 
 import {
   autosaveProject,
@@ -167,127 +168,130 @@ const IDEView = () => {
     : consoleCollapsedSize;
 
   return (
-    <RootPage>
-      <Helmet>
-        <title>{getTitle(project)}</title>
-      </Helmet>
-      <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
-      <WarnIfUnsavedChanges />
-      <Toast />
-      <P5VersionProvider>
-        <CmControllerContext.Provider value={cmRef}>
-          <Header syncFileContent={syncFileContent} />
-        </CmControllerContext.Provider>
-        {isMobile ? (
-          <>
-            <FloatingActionButton
-              syncFileContent={syncFileContent}
-              offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
-            />
-            <PreviewWrapper show={ide.isPlaying}>
-              <SplitPane
-                style={{ position: 'static' }}
-                split="horizontal"
-                primary="second"
-                size={currentConsoleSize}
-                minSize={consoleCollapsedSize}
-                onChange={(size) => {
-                  setConsoleSize(size);
-                  setIsOverlayVisible(true);
-                }}
-                onDragFinished={() => {
-                  setIsOverlayVisible(false);
-                }}
-                allowResize={ide.consoleIsExpanded}
-                className="editor-preview-subpanel"
-              >
-                <PreviewFrame
-                  fullView
-                  hide={!ide.isPlaying}
-                  cmController={cmRef.current}
-                  isOverlayVisible={isOverlayVisible}
-                />
-                <Console />
-              </SplitPane>
-            </PreviewWrapper>
-            <EditorSidebarWrapper show={!ide.isPlaying}>
-              <Sidebar />
-              <Editor
-                provideController={(ctl) => {
-                  cmRef.current = ctl;
-                }}
+    <ConsoleProvider>
+      <RootPage>
+        <Helmet>
+          <title>{getTitle(project)}</title>
+        </Helmet>
+        <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
+        <WarnIfUnsavedChanges />
+        <Toast />
+        <P5VersionProvider>
+          <CmControllerContext.Provider value={cmRef}>
+            <Header syncFileContent={syncFileContent} />
+          </CmControllerContext.Provider>
+          {isMobile ? (
+            <>
+              <FloatingActionButton
+                syncFileContent={syncFileContent}
+                offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
               />
-            </EditorSidebarWrapper>
-          </>
-        ) : (
-          <main className="editor-preview-container">
-            <SplitPane
-              split="vertical"
-              size={ide.sidebarIsExpanded ? sidebarSize : 20}
-              onChange={(size) => {
-                setSidebarSize(size);
-              }}
-              allowResize={ide.sidebarIsExpanded}
-              minSize={150}
-            >
-              <Sidebar />
-              <SplitPane
-                split="vertical"
-                maxSize={MaxSize * 0.965}
-                defaultSize="50%"
-                onChange={() => {
-                  setIsOverlayVisible(true);
-                }}
-                onDragFinished={() => {
-                  setIsOverlayVisible(false);
-                }}
-                resizerStyle={{
-                  borderLeftWidth: '2px',
-                  borderRightWidth: '2px',
-                  width: '2px',
-                  margin: '0px 0px'
-                }}
-              >
+              <PreviewWrapper show={ide.isPlaying}>
                 <SplitPane
+                  style={{ position: 'static' }}
                   split="horizontal"
                   primary="second"
                   size={currentConsoleSize}
                   minSize={consoleCollapsedSize}
                   onChange={(size) => {
                     setConsoleSize(size);
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    setIsOverlayVisible(false);
                   }}
                   allowResize={ide.consoleIsExpanded}
                   className="editor-preview-subpanel"
                 >
-                  <Editor
-                    provideController={(ctl) => {
-                      cmRef.current = ctl;
-                    }}
+                  <PreviewFrame
+                    fullView
+                    hide={!ide.isPlaying}
+                    cmController={cmRef.current}
+                    isOverlayVisible={isOverlayVisible}
                   />
                   <Console />
                 </SplitPane>
-                <section className="preview-frame-holder">
-                  <header className="preview-frame__header">
-                    <h2 className="preview-frame__title">
-                      {t('Toolbar.Preview')}
-                    </h2>
-                  </header>
-                  <div className="preview-frame__content">
-                    <PreviewFrame
-                      cmController={cmRef.current}
-                      isOverlayVisible={isOverlayVisible}
+              </PreviewWrapper>
+              <EditorSidebarWrapper show={!ide.isPlaying}>
+                <Sidebar />
+                <Editor
+                  provideController={(ctl) => {
+                    cmRef.current = ctl;
+                  }}
+                />
+              </EditorSidebarWrapper>
+            </>
+          ) : (
+            <main className="editor-preview-container">
+              <SplitPane
+                split="vertical"
+                size={ide.sidebarIsExpanded ? sidebarSize : 20}
+                onChange={(size) => {
+                  setSidebarSize(size);
+                }}
+                allowResize={ide.sidebarIsExpanded}
+                minSize={150}
+              >
+                <Sidebar />
+                <SplitPane
+                  split="vertical"
+                  maxSize={MaxSize * 0.965}
+                  defaultSize="50%"
+                  onChange={() => {
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    setIsOverlayVisible(false);
+                  }}
+                  resizerStyle={{
+                    borderLeftWidth: '2px',
+                    borderRightWidth: '2px',
+                    width: '2px',
+                    margin: '0px 0px'
+                  }}
+                >
+                  <SplitPane
+                    split="horizontal"
+                    primary="second"
+                    size={currentConsoleSize}
+                    minSize={consoleCollapsedSize}
+                    onChange={(size) => {
+                      setConsoleSize(size);
+                    }}
+                    allowResize={ide.consoleIsExpanded}
+                    className="editor-preview-subpanel"
+                  >
+                    <Editor
+                      provideController={(ctl) => {
+                        cmRef.current = ctl;
+                      }}
                     />
-                  </div>
-                </section>
+                    <Console />
+                  </SplitPane>
+                  <section className="preview-frame-holder">
+                    <header className="preview-frame__header">
+                      <h2 className="preview-frame__title">
+                        {t('Toolbar.Preview')}
+                      </h2>
+                    </header>
+                    <div className="preview-frame__content">
+                      <PreviewFrame
+                        cmController={cmRef.current}
+                        isOverlayVisible={isOverlayVisible}
+                      />
+                    </div>
+                  </section>
+                </SplitPane>
               </SplitPane>
-            </SplitPane>
-          </main>
-        )}
-        <CmControllerContext.Provider value={cmRef}>
-          <IDEOverlays />
-        </CmControllerContext.Provider>
-      </P5VersionProvider>
-    </RootPage>
+            </main>
+          )}
+          <CmControllerContext.Provider value={cmRef}>
+            <IDEOverlays />
+          </CmControllerContext.Provider>
+        </P5VersionProvider>
+        <Console />
+      </RootPage>
+    </ConsoleProvider>
   );
 };