From 74ad9f44d0cbc900afe665e24576bcf4b3c10b03 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 12 Apr 2025 20:00:52 +0530
Subject: [PATCH] feat: Add mobile support

---
 package.json                              |   5 +
 pnpm-lock.yaml                            | 160 ++++++++++++++++++++++
 src/lib/components/DesktopEditor.svelte   | 108 +++++++++++++++
 src/lib/components/Editor.svelte          | 114 ++-------------
 src/lib/components/FloatingToolbar.svelte |   2 +-
 src/lib/components/MobileEditor.svelte    |  84 ++++++++++++
 src/lib/components/Navbar.svelte          |   8 +-
 src/routes/+layout.svelte                 |   2 +-
 src/routes/edit/+page.svelte              | 108 +++++++++------
 9 files changed, 443 insertions(+), 148 deletions(-)
 create mode 100644 src/lib/components/DesktopEditor.svelte
 create mode 100644 src/lib/components/MobileEditor.svelte

diff --git a/package.json b/package.json
index ecac47b1..b7ce7b12 100644
--- a/package.json
+++ b/package.json
@@ -81,9 +81,14 @@
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.36.5",
     "@fontsource-variable/recursive": "^5.2.5",
     "@mermaid-js/layout-elk": "^0.1.7",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.13",
     "js-base64": "3.7.7",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 569913ed..79cf390f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/state':
+        specifier: ^6.5.2
+        version: 6.5.2
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
+      '@codemirror/view':
+        specifier: ^6.36.5
+        version: 6.36.5
       '@fontsource-variable/recursive':
         specifier: ^5.2.5
         version: 5.2.5
@@ -17,6 +29,9 @@ importers:
       '@mermaid-js/mermaid-zenuml':
         specifier: ^0.2.0
         version: 0.2.0(mermaid@11.6.0)(typescript@5.8.2)
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -284,6 +299,33 @@ packages:
   '@chevrotain/utils@11.0.3':
     resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
 
+  '@codemirror/autocomplete@6.18.6':
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+
+  '@codemirror/commands@6.8.1':
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+
+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/language@6.11.0':
+    resolution: {integrity: sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==}
+
+  '@codemirror/lint@6.8.5':
+    resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
+
+  '@codemirror/search@6.5.10':
+    resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
+  '@codemirror/view@6.36.5':
+    resolution: {integrity: sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==}
+
   '@csstools/color-helpers@5.0.2':
     resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
     engines: {node: '>=18'}
@@ -559,6 +601,21 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@mermaid-js/layout-elk@0.1.7':
     resolution: {integrity: sha512-G3AJ2jMaCAqky2CT3z/sf3pK5UuS3tne98GsXDl3PkKByCmPmOYmJPf+6oX5PUlV3HNWWHuSgtZ9NU/CZDSuHQ==}
     peerDependencies:
@@ -1279,6 +1336,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1340,6 +1400,9 @@ packages:
   cose-base@2.2.0:
     resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3259,6 +3322,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
@@ -3679,6 +3745,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -3842,6 +3911,63 @@ snapshots:
 
   '@chevrotain/utils@11.0.3': {}
 
+  '@codemirror/autocomplete@6.18.6':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/json': 1.0.3
+
+  '@codemirror/language@6.11.0':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.5':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.10':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/highlight': 1.2.1
+
+  '@codemirror/view@6.36.5':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@csstools/color-helpers@5.0.2': {}
 
   '@csstools/css-calc@2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
@@ -4064,6 +4190,24 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@mermaid-js/layout-elk@0.1.7(mermaid@11.6.0)':
     dependencies:
       d3: 7.9.0
@@ -4901,6 +5045,16 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  codemirror@6.0.1:
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.10
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -4950,6 +5104,8 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
+  crelt@1.0.6: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -6859,6 +7015,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-mod@4.1.2: {}
+
   style-to-object@1.0.8:
     dependencies:
       inline-style-parser: 0.2.4
@@ -7249,6 +7407,8 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.8.2)
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte
new file mode 100644
index 00000000..42f6d7ee
--- /dev/null
+++ b/src/lib/components/DesktopEditor.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { EditorMode } from '$/types';
+  import { stateStore, updateCode, updateConfig } from '$/util/state';
+  import { initEditor } from '$lib/util/monacoExtra';
+  import { errorDebug } from '$lib/util/util';
+  import { mode } from 'mode-watcher';
+  import * as monaco from 'monaco-editor';
+  import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+  import { onMount } from 'svelte';
+
+  let divElement: HTMLDivElement | undefined = $state();
+  let editor: monaco.editor.IStandaloneCodeEditor | undefined;
+  let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+    minimap: {
+      enabled: false
+    },
+    theme: 'mermaid',
+    overviewRulerLanes: 0
+  };
+  let currentText = '';
+
+  const handleUpdate = (text: string, mode: EditorMode) => {
+    if (mode === 'code') {
+      updateCode(text);
+    } else {
+      updateConfig(text);
+    }
+  };
+
+  onMount(() => {
+    self.MonacoEnvironment = {
+      getWorker(_, label) {
+        if (label === 'json') {
+          return new monacoJsonWorker();
+        }
+        return new monacoEditorWorker();
+      }
+    };
+
+    if (!divElement) {
+      throw new Error('divEl is undefined');
+    }
+
+    initEditor(monaco);
+    errorDebug();
+    editor = monaco.editor.create(divElement, editorOptions);
+    editor.onDidChangeModelContent(({ isFlush }) => {
+      const newText = editor?.getValue();
+      if (!newText || currentText === newText || isFlush) {
+        return;
+      }
+      currentText = newText;
+      handleUpdate(currentText, $stateStore.editorMode);
+    });
+
+    const unsubscribeState = stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
+      if (!editor) {
+        return;
+      }
+
+      // Update editor text if it's different
+      const newText = editorMode === 'code' ? code : mermaid;
+      if (newText !== currentText) {
+        editor.setScrollTop(0);
+        editor.setValue(newText);
+        currentText = newText;
+      }
+
+      // Update editor mode if it's different
+      const language = editorMode === 'code' ? 'mermaid' : 'json';
+      const model = editor.getModel();
+      if (!model) {
+        console.error("editor model doesn't exist");
+        return;
+      }
+      if (model.getLanguageId() !== language) {
+        monaco.editor.setModelLanguage(model, language);
+      }
+
+      // Display/clear errors
+      monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
+    });
+
+    const unsubscribeMode = mode.subscribe((mode) => {
+      editor && monaco.editor.setTheme(`mermaid${mode === 'dark' ? '-dark' : ''}`);
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      editor?.layout({
+        height: entries[0].contentRect.height,
+        width: entries[0].contentRect.width
+      });
+    });
+
+    if (divElement.parentElement) {
+      resizeObserver.observe(divElement);
+    }
+
+    return () => {
+      unsubscribeState();
+      unsubscribeMode();
+      resizeObserver.disconnect();
+      editor?.dispose();
+    };
+  });
+</script>
+
+<div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index d09d1198..94c80bed 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -1,117 +1,23 @@
 <script lang="ts">
+  import DesktopEditor from '$/components/DesktopEditor.svelte';
   import McWrapper from '$/components/McWrapper.svelte';
   import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
+  import MobileEditor from '$/components/MobileEditor.svelte';
   import { Button } from '$/components/ui/button';
   import { TID } from '$/constants';
   import { env } from '$/util/env';
-  import type { EditorMode } from '$lib/types';
-  import { initEditor } from '$lib/util/monacoExtra';
-  import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state';
-  import { errorDebug } from '$lib/util/util';
-  import { mode } from 'mode-watcher';
-  import * as monaco from 'monaco-editor';
-  import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-  import { onMount } from 'svelte';
+  import { stateStore, urlsStore } from '$lib/util/state';
   import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';
 
-  let divElement: HTMLDivElement | undefined = $state();
-  let editor: monaco.editor.IStandaloneCodeEditor | undefined;
-  let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
-    minimap: {
-      enabled: false
-    },
-    theme: 'mermaid',
-    overviewRulerLanes: 0
-  };
-  let currentText = '';
-
-  const unsubscribeState = stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
-    if (!editor) {
-      return;
-    }
-
-    // Update editor text if it's different
-    const newText = editorMode === 'code' ? code : mermaid;
-    if (newText !== currentText) {
-      editor.setScrollTop(0);
-      editor.setValue(newText);
-      currentText = newText;
-    }
-
-    // Update editor mode if it's different
-    const language = editorMode === 'code' ? 'mermaid' : 'json';
-    const model = editor.getModel();
-    if (!model) {
-      console.error("editor model doesn't exist");
-      return;
-    }
-    if (model.getLanguageId() !== language) {
-      monaco.editor.setModelLanguage(model, language);
-    }
-
-    // Display/clear errors
-    monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
-  });
-
-  const handleUpdate = (text: string, mode: EditorMode) => {
-    if (mode === 'code') {
-      updateCode(text);
-    } else {
-      updateConfig(text);
-    }
-  };
-
-  onMount(() => {
-    self.MonacoEnvironment = {
-      getWorker(_, label) {
-        if (label === 'json') {
-          return new monacoJsonWorker();
-        }
-        return new monacoEditorWorker();
-      }
-    };
-
-    if (!divElement) {
-      throw new Error('divEl is undefined');
-    }
-
-    initEditor(monaco);
-    errorDebug();
-    editor = monaco.editor.create(divElement, editorOptions);
-    editor.onDidChangeModelContent(({ isFlush }) => {
-      const newText = editor?.getValue();
-      if (!newText || currentText === newText || isFlush) {
-        return;
-      }
-      currentText = newText;
-      handleUpdate(currentText, $stateStore.editorMode);
-    });
-    const unsubscribeMode = mode.subscribe((mode) => {
-      editor && monaco.editor.setTheme(`mermaid${mode === 'dark' ? '-dark' : ''}`);
-    });
-    const resizeObserver = new ResizeObserver((entries) => {
-      editor?.layout({
-        height: entries[0].contentRect.height,
-        width: entries[0].contentRect.width
-      });
-    });
-
-    if (divElement.parentElement) {
-      resizeObserver.observe(divElement);
-    }
-
-    return () => {
-      unsubscribeState();
-      unsubscribeMode();
-      resizeObserver.disconnect();
-      editor?.dispose();
-    };
-  });
+  export let isMobile: boolean;
 </script>
 
-<div class="flex h-full flex-col pt-1">
-  <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
+<div class="flex h-full flex-col">
+  {#if isMobile}
+    <MobileEditor />
+  {:else}
+    <DesktopEditor />
+  {/if}
   {#if $stateStore.error instanceof Error}
     <div class="flex flex-col text-sm" data-testid={TID.errorContainer}>
       <div class="flex items-center justify-between gap-2 bg-slate-900 p-2 text-white">
diff --git a/src/lib/components/FloatingToolbar.svelte b/src/lib/components/FloatingToolbar.svelte
index 128078b8..c2e3f645 100644
--- a/src/lib/components/FloatingToolbar.svelte
+++ b/src/lib/components/FloatingToolbar.svelte
@@ -8,6 +8,6 @@
   let { children }: Props = $props();
 </script>
 
-<div class="hidden h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3 md:flex">
+<div class="flex h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3">
   {@render children()}
 </div>
diff --git a/src/lib/components/MobileEditor.svelte b/src/lib/components/MobileEditor.svelte
new file mode 100644
index 00000000..5fa8f6e8
--- /dev/null
+++ b/src/lib/components/MobileEditor.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { stateStore, updateCode, updateConfig } from '$/util/state';
+  import { Compartment, EditorState } from '@codemirror/state';
+  import { oneDark } from '@codemirror/theme-one-dark';
+  import { EditorView } from '@codemirror/view';
+  import { basicSetup } from 'codemirror';
+  import { mode } from 'mode-watcher';
+  import { onMount } from 'svelte';
+
+  let editorView: EditorView;
+  let editorContainer: HTMLDivElement;
+  let currentText = $state(
+    $stateStore.editorMode === 'code' ? $stateStore.code : $stateStore.mermaid
+  );
+
+  onMount(() => {
+    const themeCompartment = new Compartment();
+
+    editorView = new EditorView({
+      state: EditorState.create({
+        doc: currentText,
+        extensions: [
+          basicSetup,
+          themeCompartment.of($mode === 'dark' ? oneDark : []),
+          EditorView.updateListener.of((update) => {
+            console.log('update', update);
+            if (update.docChanged) {
+              const newText = update.state.doc.toString();
+              if (currentText === newText) {
+                return;
+              }
+              currentText = newText;
+              if ($stateStore.editorMode === 'code') {
+                updateCode(currentText);
+              } else {
+                updateConfig(currentText);
+              }
+            }
+          }),
+          EditorView.theme({
+            '&.cm-focused': {
+              outline: 'none'
+            },
+            '&.cm-editor': {
+              height: '100%'
+            },
+            '&.cm-scroller': {
+              overflow: 'auto'
+            }
+          })
+        ]
+      }),
+      parent: editorContainer
+    });
+
+    const unsubscribeMode = mode.subscribe((mode) => {
+      editorView.dispatch({
+        effects: themeCompartment.reconfigure(mode === 'dark' ? oneDark : [])
+      });
+    });
+
+    return () => {
+      unsubscribeMode();
+      editorView?.destroy();
+    };
+  });
+
+  stateStore.subscribe(({ editorMode, code, mermaid }) => {
+    const text = editorMode === 'code' ? code : mermaid;
+    if (currentText === text) {
+      return;
+    }
+    currentText = text;
+    editorView?.dispatch({
+      changes: {
+        from: 0,
+        to: editorView.state.doc.length,
+        insert: text
+      }
+    });
+  });
+</script>
+
+<div bind:this={editorContainer} class="h-full w-full"></div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 25148bce..8d3b4653 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -22,10 +22,11 @@
   import DropdownNavMenu from './DropdownNavMenu.svelte';
 
   interface Props {
+    mobileToggle?: Snippet;
     children: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children, mobileToggle }: Props = $props();
 
   const isReferral = document.referrer.includes(MCBaseURL);
 
@@ -81,7 +82,7 @@
   </div>
 {/if}
 
-<nav class="z-50 flex p-6">
+<nav class="z-50 flex p-4 md:p-6">
   <div class="flex flex-1 items-center gap-4">
     <MainMenu />
     <div
@@ -89,7 +90,7 @@
       class="flex items-center justify-center gap-4 font-medium"
       class:flex-row-reverse={isReferral}>
       <a href="/" class="whitespace-nowrap text-accent">
-        {#if !isReferral}
+        {#if !isReferral && !mobileToggle}
           Mermaid
         {/if}
         Live Editor
@@ -132,4 +133,5 @@
     <Separator orientation="vertical" />
     {@render children()}
   </div>
+  {@render mobileToggle?.()}
 </nav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 76ef2c6d..a6b48d0d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -42,7 +42,7 @@
 <ModeWatcher />
 <Toaster />
 
-<main class="h-screen">
+<main class="h-[100dvh]">
   {@render children()}
 </main>
 
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index dc8c797a..f9455467 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -13,6 +13,7 @@
   import SyncRoughToolbar from '$/components/SyncRoughToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import * as Resizable from '$/components/ui/resizable';
+  import { Switch } from '$/components/ui/switch';
   import { Toggle } from '$/components/ui/toggle';
   import VersionSecurityToolbar from '$/components/VersionSecurityToolbar.svelte';
   import View from '$/components/View.svelte';
@@ -45,6 +46,10 @@
     }
   ];
 
+  let width = $state(0);
+  let isMobile = $derived(width < 540);
+  let isViewMode = $state(true);
+
   onMount(async () => {
     await initHandler();
   });
@@ -53,7 +58,16 @@
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
-  <Navbar>
+  {#snippet mobileToggle()}
+    <div class="flex items-center gap-2">
+      Edit <Switch
+        id="editorMode"
+        class="data-[state=checked]:bg-accent"
+        bind:checked={isViewMode} /> View
+    </div>
+  {/snippet}
+
+  <Navbar mobileToggle={isMobile ? mobileToggle : undefined}>
     <Toggle bind:pressed={isHistoryOpen} size="sm">
       <HistoryIcon />
     </Toggle>
@@ -70,47 +84,63 @@
     </McWrapper>
   </Navbar>
 
-  <div class="flex flex-1 overflow-hidden">
-    <Resizable.PaneGroup direction="horizontal" autoSaveId="liveEditor" class="p-6 pt-0">
-      <Resizable.Pane defaultSize={30} minSize={15} class="hidden md:block">
-        <div class="flex h-full flex-col gap-6" id="editorPane">
-          <Card
-            onselect={tabSelectHandler}
-            isOpen
-            tabs={editorTabs}
-            activeTabID={$stateStore.editorMode}
-            isClosable={false}>
-            {#snippet actions()}
-              <DiagramDocButton />
-            {/snippet}
-            <Editor />
-          </Card>
+  {#snippet editorPane()}
+    <div class="flex h-full flex-col gap-6" id="editorPane">
+      <Card
+        onselect={tabSelectHandler}
+        isOpen
+        tabs={editorTabs}
+        activeTabID={$stateStore.editorMode}
+        isClosable={false}>
+        {#snippet actions()}
+          <DiagramDocButton />
+        {/snippet}
+        <Editor {isMobile} />
+      </Card>
 
-          <div class="group flex flex-wrap justify-between gap-6">
-            <Preset />
-            <Actions />
-          </div>
+      <div class="group flex flex-wrap justify-between gap-6">
+        <Preset />
+        <Actions />
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet viewPane()}
+    <View {panZoomState} shouldShowGrid={$stateStore.grid} />
+    <div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
+    <div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
+    <div class="absolute bottom-0 left-5"><SyncRoughToolbar /></div>
+  {/snippet}
+
+  <div class="flex flex-1 flex-col overflow-hidden" bind:clientWidth={width}>
+    {#if isMobile}
+      <div class={['viewport flex h-full w-[200%] duration-300', isViewMode && '-translate-x-1/2']}>
+        <div class="w-1/2 p-2 pt-0">
+          {@render editorPane()}
         </div>
-      </Resizable.Pane>
-      <Resizable.Handle class="mr-1 opacity-0" />
-      <Resizable.Pane minSize={15} class="relative flex h-full flex-1 flex-col overflow-hidden">
-        <View {panZoomState} shouldShowGrid={$stateStore.grid} />
-        <div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
-        <div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
-        <div class="absolute bottom-0 left-5"><SyncRoughToolbar /></div>
-        <div class="rounded bg-primary p-2 text-center shadow md:hidden">
-          Code editing not supported on mobile. Please use a desktop browser.
+        <div class="relative w-1/2 p-2 pt-0">
+          {@render viewPane()}
         </div>
-      </Resizable.Pane>
-      {#if isHistoryOpen}
-        <Resizable.Handle class="ml-1 hidden opacity-0 md:block" />
-        <Resizable.Pane
-          minSize={15}
-          defaultSize={30}
-          class="hidden h-full flex-grow flex-col md:flex">
-          <History />
+      </div>
+    {:else}
+      <Resizable.PaneGroup direction="horizontal" autoSaveId="liveEditor" class="p-6 pt-0">
+        <Resizable.Pane defaultSize={30} minSize={15} class="hiddent md:block">
+          {@render editorPane()}
         </Resizable.Pane>
-      {/if}
-    </Resizable.PaneGroup>
+        <Resizable.Handle class="mr-1 opacity-0" />
+        <Resizable.Pane minSize={15} class="relative flex h-full flex-1 flex-col overflow-hidden">
+          {@render viewPane()}
+        </Resizable.Pane>
+        {#if isHistoryOpen}
+          <Resizable.Handle class="ml-1 hidden opacity-0 md:block" />
+          <Resizable.Pane
+            minSize={15}
+            defaultSize={30}
+            class="hidden h-full flex-grow flex-col md:flex">
+            <History />
+          </Resizable.Pane>
+        {/if}
+      </Resizable.PaneGroup>
+    {/if}
   </div>
 </div>