Bug Fixes

package.json

@@ -20,6 +20,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.0",
     "style-loader": "^4.0.0",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",

src/editor/editor.js

@@ -4,7 +4,7 @@ import { python } from "@codemirror/lang-python";
 
 
 const editableCompartment = new Compartment;
-
+const storageKey = 'ModifiedCode';
 
 // Initialize the editor state
 const state = EditorState.create({
@@ -26,7 +26,7 @@ let editor = new EditorView({
 // Function to insert Python code snippet into the editor
 function insertPythonSnippet(snippet) {
   const transaction = editor.state.update({
-    changes: {from: 0, to: editor.state.doc.length, insert: snippet }
+    changes: { from: 0, to: editor.state.doc.length, insert: snippet }
   });
   editor.dispatch(transaction);
 }
@@ -36,9 +36,8 @@ function makeUneditable(state) {
     { effects: editableCompartment.reconfigure(EditorView.editable.of(state)) }
   )
 }
-function saveAsPythonFile() {
+function saveAsPythonFile(content) {
   // Get the content of the editor
-  const content = editor.state.doc.toString();
 
   // Create a Blob with the content
   const blob = new Blob([content], { type: "text/plain" });
@@ -55,5 +54,20 @@ function saveAsPythonFile() {
   URL.revokeObjectURL(anchor.href);
 }
 
+function saveModifideCode() {
+  // Get the content of the editor
+  const content  = editor.state.doc.toString();
+  localStorage.setItem(storageKey, content);
+}
+
+function loadModifiedCode() {
+  const data = localStorage.getItem(storageKey);
+  if (!data) return;
+  const transaction = editor.state.update({
+    changes: { from: 0, to: editor.state.doc.length, insert: data }
+  });
+  editor.dispatch(transaction);
+
+}
 
-export { editor, insertPythonSnippet, makeUneditable ,saveAsPythonFile };
+export { editor, insertPythonSnippet, makeUneditable, saveAsPythonFile, saveModifideCode, loadModifiedCode };

src/index.js

@@ -7,7 +7,7 @@ import oboBlocksLogo from './assets/obo_blocks.webp'
 import academyLogo from './assets/academyLogo.webp'
 
 
-import { editor, insertPythonSnippet, makeUneditable, saveAsPythonFile } from './editor/editor'
+import { editor, insertPythonSnippet, makeUneditable, saveAsPythonFile, loadModifiedCode, saveModifideCode } from './editor/editor'
 
 
 import * as Blockly from 'blockly'
@@ -24,6 +24,7 @@ import { worker, terminal, stopWorker } from './pyodide/loader'
 
 
 let editable = false;
+let ws;
 
 // ------------------ Elements -------------------------
 
@@ -78,8 +79,6 @@ const options = {
     'renderer': 'zelos',
 }
 
-let ws = Blockly.inject(blocklyDiv, options);
-
 // ----------------------- Function defintions --------------------------------
 async function runcode() {
     try {
@@ -116,34 +115,42 @@ function showNotification(message) {
     }, 1500);
 }
 
+function initBlokly(workspace) {
+    workspace = Blockly.inject(blocklyDiv, options);
+    workspace.addChangeListener((e) => {
+        if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING ||
+            workspace.isDragging()) {
+            return;
+        }
+        save(workspace)
+        const code = pythonGenerator.workspaceToCode(workspace);
+        insertPythonSnippet(code)
+    });
+    return workspace
+
+}
+// ------------------------ Initializations -----------------------------------------------------------
+
+ws = initBlokly(ws)
 
 // ------------------------ Event Listners -----------------------------------------------------------
 
 editbutton.addEventListener('click', function () {
     editable = !editable
     makeUneditable(editable)
+
     if (editable) {
         showNotification("Editing enabled");
         editbuttonText.innerHTML = 'Editing'
         save(ws)
+        loadModifiedCode()
         ws.dispose()
     }
     else {
         editbuttonText.innerHTML = 'Edit'
-        ws = Blockly.inject(blocklyDiv, options);
+        saveModifideCode()
+        ws = initBlokly(ws)
         load(ws)
-        ws.addChangeListener((e) => {
-            // Don't run the code when the workspace finishes loading; we're
-            // already running it once when the application starts.
-            // Don't run the code during drags; we might have invalid state.
-            if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING ||
-                ws.isDragging()) {
-                return;
-            }
-            save(ws)
-            const code = pythonGenerator.workspaceToCode(ws);
-            insertPythonSnippet(code)
-        });
         const code = pythonGenerator.workspaceToCode(ws);
         insertPythonSnippet(code)
         showNotification("Editing disabled");
@@ -152,7 +159,11 @@ editbutton.addEventListener('click', function () {
 }
 )
 copyButton.addEventListener('click', () => {
-    let code = editor.state.doc.toString();;
+    let code = editor.state.doc.toString();
+    if (code === '') {
+        showNotification("No code to copy");
+        return;
+    }
     copyTextToClipboard(code);
     showNotification("Code copied to clipboard");
 });
@@ -171,21 +182,13 @@ stopButton.addEventListener('click', () => {
 })
 
 exportButton.addEventListener('click', () => {
-    saveAsPythonFile();
-    showNotification("Code exported as script.py");
-});
-
-ws.addChangeListener((e) => {
-    // Don't run the code when the workspace finishes loading; we're
-    // already running it once when the application starts.
-    // Don't run the code during drags; we might have invalid state.
-    if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING ||
-        ws.isDragging()) {
+    const content = editor.state.doc.toString();
+    if (content === '') {
+        showNotification("No code to export");
         return;
     }
-    save(ws)
-    const code = pythonGenerator.workspaceToCode(ws);
-    insertPythonSnippet(code)
+    saveAsPythonFile(content);
+    showNotification("Code exported as script.py");
 });
 
 document.addEventListener('DOMContentLoaded', () => {

src/pyodide/loader.js

@@ -11,7 +11,6 @@ function startWorker() {
         let responce = event.data.responce
         if (responce === 'result') {
             terminal.innerHTML += event.data.result + '\n>>> ';
-            console.log(event.data.result)
         } else if (responce === 'request') {
            let responce = prompt('Enter the input');
             worker.postMessage({ command: 'input', code: responce });

src/templates/index.html

@@ -8,8 +8,7 @@
     <meta name="keywords"
         content="Obo Blocks,python,google,scratch,Blockly,visual programming,pyodide,web application,roboticgen academy,roboticgen">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" href="favicon.ico">
-        <title>Obo Blocks</title>
+    <title>Obo Blocks</title>
 </head>
 
 <body>
@@ -18,9 +17,8 @@
     </div>
     <div class="container">
         <nav class="nav-bar">
-            <a href="https://oboblocks.roboticgenacademy.com/" aria-label="Obo Blocks Home">
-                <img id="obo-blocks-logo" class="obo-blocks-logo" alt="Obo Blocks Logo">
-            </a>
+            <img id="obo-blocks-logo" class="obo-blocks-logo" alt="Obo Blocks Logo">
+
             <a href="https://roboticgenacademy.com/" aria-label="Roboticgen Academy">
                 <img id="roboticgen-academy-logo" alt="Roboticgen Academy Logo" class="logo">
             </a>
@@ -33,7 +31,7 @@
             <div class="button-row">
                 <p class="code-title">Python Code</p>
                 <div class="button-group">
-                    <a class="button" id="edit-button"><i class="fa fa-pencil"></i> <span id="edit-text">Edit</span></a>
+                    <a class="button" id="edit-button"><i class="fa fa-pencil" style="padding-right: 2px;"></i> <span id="edit-text">Edit</span></a>
                     <a class="button" id="run-button"><i id="run-icon" class="fa fa-flag"></i> <span
                             id="run-text">Run</span></a>
                     <a class="button" id="copy-button"><i class="fa fa-copy"></i><span id="copy-text">Copy</span></a>

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const htmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
 
@@ -18,6 +19,11 @@ module.exports = {
         clean: true,
         assetModuleFilename: '[name][ext]',
     },
+    optimization: {
+        splitChunks: {
+          chunks: 'all',
+        },
+      },
     devtool: 'source-map',
     devServer: {
         static:
@@ -38,7 +44,7 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: [
-                    'style-loader',
+                    MiniCssExtractPlugin.loader,
                     'css-loader',
                 ],
             },
@@ -54,13 +60,17 @@ module.exports = {
                 filename: "index.html",
                 template: 'src/templates/index.html',
                 favicon: "./src/assets/favicon.ico",
+                inject: 'body',
             }
         ),
         new CopyWebpackPlugin({
             patterns: [
                 { from: "src/assets/blockly_media", to: "media" } // Adjust source and destination paths as needed
             ]
         }),
+        new MiniCssExtractPlugin({
+            filename: '[name][contenthash].css',
+        }),
     ]
 };