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

Author: lirenjie95

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -3,13 +3,37 @@ import { Decode } from 'console-feed';
 import { dispatchConsoleEvent } from '../actions/console';
 import { stopSketch, expandConsole } from '../actions/ide';
 
+// Helper function to restore p5.Font objects
+function restoreP5Font(obj) {
+  if (obj && obj._isP5Font) {
+    // Return a simplified font-like object for console display
+    return {
+      _isP5Font: true,
+      name: obj.name,
+      path: obj.path,
+      face: {
+        family: obj.face.family,
+        style: obj.face.style,
+        weight: obj.face.weight
+      }
+    };
+  }
+  return obj;
+}
+
 export default function useHandleMessageEvent() {
   const dispatch = useDispatch();
 
   const handleMessageEvent = (data) => {
     const { source, messages } = data;
     if (source === 'sketch' && Array.isArray(messages)) {
-      const decodedMessages = messages.map((message) => Decode(message.log));
+      const decodedMessages = messages.map((message) => {
+        const decoded = Decode(message.log);
+        if (decoded.data) {
+          decoded.data = decoded.data.map(restoreP5Font);
+        }
+        return decoded;
+      });
       decodedMessages.every((message, index, arr) => {
         const { data: args } = message;
         let hasInfiniteLoop = false;

client/utils/previewEntry.js

@@ -44,7 +44,7 @@ function handleMessageEvent(e) {
     const decodedMessages = messages.map((message) => Decode(message.log));
     decodedMessages.forEach((message) => {
       const { data: args } = message;
-      const { result, error } = evaluateExpression(args);
+      const { result, error } = evaluateExpression(args.map(handleP5Font));
       const resultMessages = [
         { log: Encode({ method: error ? 'error' : 'result', data: [result] }) }
       ];
@@ -179,3 +179,23 @@ if (_report) {
     _report.apply(window.p5, [newMessage, method, color]);
   };
 }
+
+// Helper function to handle p5.Font objects
+function handleP5Font(obj) {
+  // Check for p5.Font instances in multiple ways
+  const isFontName = obj && obj.constructor && (obj.constructor.name === 'Font' || obj.constructor.name === 'p5.Font');
+  const isFontInstance = window.p5 && obj instanceof window.p5.Font;
+  if (isFontName || isFontInstance) {
+    return {
+      _isP5Font: true,
+      name: obj.name,
+      path: obj.path,
+      face: {
+        family: obj.face?.family,
+        style: obj.face?.style,
+        weight: obj.face?.weight
+      }
+    };
+  }
+  return obj;
+}