Merge pull request #109 from ketan-10/migrate-codeflask-to-codemirror

Migrate codeflask to codemirror
2025-10-23 05:11:57 +00:00 · 2025-06-21 17:55:18 +05:30
parent 5ea1b9e84c c4fcf6bd91
commit 3fff65150f
4 changed files with 222 additions and 60 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,8 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/theme-one-dark": "^6.1.3",
    "@formkit/auto-animate": "^0.8.2",
    "@internationalized/date": "^3.5.5",
    "@radix-icons/vue": "^1.0.0",
@@ -40,7 +42,7 @@
    "axios": "^1.8.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
-    "codeflask": "^1.4.1",
+    "codemirror": "^6.0.2",
    "date-fns": "^3.6.0",
    "lucide-vue-next": "^0.378.0",
    "mitt": "^3.0.1",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:

  .:
    dependencies:
+      '@codemirror/lang-html':
+        specifier: ^6.4.9
+        version: 6.4.9
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.3
+        version: 6.1.3
      '@formkit/auto-animate':
        specifier: ^0.8.2
        version: 0.8.2
@@ -74,9 +80,9 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
-      codeflask:
-        specifier: ^1.4.1
-        version: 1.4.1
+      codemirror:
+        specifier: ^6.0.2
+        version: 6.0.2
      date-fns:
        specifier: ^3.6.0
        version: 3.6.0
@@ -234,6 +240,39 @@ packages:
  '@bassist/utils@0.4.0':
    resolution: {integrity: sha512-aoFTl0jUjm8/tDZodP41wnEkvB+C5O9NFCuYN/ztL6jSUSsuBkXq90/1ifBm1XhV/zySHgLYlU1+tgo3XtQ+nA==}

+  '@codemirror/autocomplete@6.18.6':
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+
+  '@codemirror/commands@6.8.1':
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-html@6.4.9':
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/language@6.11.1':
+    resolution: {integrity: sha512-5kS1U7emOGV84vxC+ruBty5sUgcD0te6dyupyRVG2zaSjhTDM73LhVKUtVwiqSe6QwmEoA4SCiU8AKPFyumAWQ==}
+
+  '@codemirror/lint@6.8.5':
+    resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
+
+  '@codemirror/search@6.5.11':
+    resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.37.2':
+    resolution: {integrity: sha512-XD3LdgQpxQs5jhOOZ2HRVT+Rj59O4Suc7g2ULvZ+Yi8eCkickrkZ5JFuoDhs2ST1mNI5zSsNYgR3NGa4OUrbnw==}
+
  '@colors/colors@1.5.0':
    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
    engines: {node: '>=0.1.90'}
@@ -508,6 +547,24 @@ packages:
  '@juggle/resize-observer@3.4.0':
    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}

+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/css@1.2.1':
+    resolution: {integrity: sha512-2F5tOqzKEKbCUNraIXc0f6HKeyKlmMWJnBB0i4XW6dJgssrZO/YlZ2pY5xgyqDleqqhiNJ3dQhbrV2aClZQMvg==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+
+  '@lezer/javascript@1.5.1':
+    resolution: {integrity: sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
  '@mapbox/geojson-rewind@0.5.2':
    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
    hasBin: true
@@ -535,6 +592,9 @@ packages:
    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
    engines: {node: '>=6.0.0'}

+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@@ -1109,9 +1169,6 @@ packages:
  '@types/pbf@3.0.5':
    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}

-  '@types/prismjs@1.26.5':
-    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
-
  '@types/sinonjs__fake-timers@8.1.1':
    resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==}

@@ -1532,8 +1589,8 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

-  codeflask@1.4.1:
-    resolution: {integrity: sha512-4vb2IbE/iwvP0Uubhd2ixVeysm3KNC2pl7SoDaisxq1juhZzvap3qbaX7B2CtpQVvv5V9sjcQK8hO0eTcY0V9Q==}
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}

  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -2780,10 +2837,6 @@ packages:
    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
    engines: {node: '>=6'}

-  prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
-    engines: {node: '>=6'}
-
  process@0.11.10:
    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
    engines: {node: '>= 0.6.0'}
@@ -3093,6 +3146,9 @@ packages:
  striptags@3.2.0:
    resolution: {integrity: sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==}

+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
  stylis@4.2.0:
    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}

@@ -3550,6 +3606,89 @@ snapshots:
    dependencies:
      '@withtypes/mime': 0.1.2

+  '@codemirror/autocomplete@6.18.6':
+    dependencies:
+      '@codemirror/language': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.1':
+    dependencies:
+      '@codemirror/language': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.2.1
+
+  '@codemirror/lang-html@6.4.9':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.2.1
+      '@lezer/html': 1.3.10
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.1
+      '@codemirror/lint': 6.8.5
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.5.1
+
+  '@codemirror/language@6.11.1':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@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.37.2
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.11':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      '@lezer/highlight': 1.2.1
+
+  '@codemirror/view@6.37.2':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      crelt: 1.0.6
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
  '@colors/colors@1.5.0':
    optional: true

@@ -3815,6 +3954,34 @@ snapshots:

  '@juggle/resize-observer@3.4.0': {}

+  '@lezer/common@1.2.3': {}
+
+  '@lezer/css@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/html@1.3.10':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/javascript@1.5.1':
+    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
+
  '@mapbox/geojson-rewind@0.5.2':
    dependencies:
      get-stream: 6.0.1
@@ -3836,6 +4003,8 @@ snapshots:

  '@mapbox/whoots-js@3.1.0': {}

+  '@marijn/find-cluster-break@1.0.2': {}
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@@ -4378,8 +4547,6 @@ snapshots:

  '@types/pbf@3.0.5': {}

-  '@types/prismjs@1.26.5': {}
-
  '@types/sinonjs__fake-timers@8.1.1': {}

  '@types/sizzle@2.3.9': {}
@@ -4906,10 +5073,15 @@ snapshots:

  clsx@2.1.1: {}

-  codeflask@1.4.1:
+  codemirror@6.0.2:
    dependencies:
-      '@types/prismjs': 1.26.5
-      prismjs: 1.29.0
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.11.1
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2

  color-convert@2.0.1:
    dependencies:
@@ -6200,8 +6372,6 @@ snapshots:

  pretty-bytes@5.6.0: {}

-  prismjs@1.29.0: {}
-
  process@0.11.10: {}

  prosemirror-changeset@2.2.1:
@@ -6601,6 +6771,8 @@ snapshots:

  striptags@3.2.0: {}

+  style-mod@4.1.2: {}
+
  stylis@4.2.0: {}

  stylus@0.57.0:
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -207,10 +207,6 @@
 }
 // End Scrollbar

-.code-editor {
-  @apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
-}
-
 .show-quoted-text {
  blockquote {
    @apply block;
--- a/frontend/src/components/editor/CodeEditor.vue
+++ b/frontend/src/components/editor/CodeEditor.vue
@@ -1,10 +1,12 @@
 <template>
-    <div ref="codeEditor" id="code-editor" class="code-editor" />
+    <div ref="codeEditor" @click="editorView?.focus()" class="w-full h-[28rem] border overflow-y-scroll" />
 </template>

 <script setup>
-import { ref, onMounted, watch, nextTick } from 'vue'
-import CodeFlask from 'codeflask'
+import { ref, onMounted, watch, nextTick, useTemplateRef } from 'vue'
+import { EditorView, basicSetup } from 'codemirror'
+import { html } from '@codemirror/lang-html'
+import { oneDark } from '@codemirror/theme-one-dark'

 const props = defineProps({
    modelValue: { type: String, default: '' },
@@ -13,45 +15,33 @@ const props = defineProps({
 })

 const emit = defineEmits(['update:modelValue'])
-const codeEditor = ref(null)
 const data = ref('')
-const flask = ref(null)
+let editorView = null 
+const codeEditor = useTemplateRef('codeEditor')

 const initCodeEditor = (body) => {
-    const el = document.createElement('code-flask')
-    el.attachShadow({ mode: 'open' })
-    el.shadowRoot.innerHTML = `
-      <style>
-        .codeflask .codeflask__flatten {
-          font-size: 15px;
-          white-space: pre-wrap;
-          word-break: break-word;
-        }
-        .codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
-        .codeflask .token.tag { font-weight: bold; }
-        .codeflask .token.attr-name { color: #111; }
-        .codeflask .token.attr-value { color: #000 !important; }
-      </style>
-      <div id="area"></div>
-    `
-    codeEditor.value.appendChild(el)
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches

-    flask.value = new CodeFlask(el.shadowRoot.getElementById('area'), {
-        language: props.language,
-        lineNumbers: false,
-        styleParent: el.shadowRoot,
-        readonly: props.disabled
+    editorView = new EditorView({
+        doc: body,
+        extensions: [
+            basicSetup,
+            html(),
+            ...(isDark ? [oneDark] : []),
+            EditorView.editable.of(!props.disabled),
+            EditorView.updateListener.of((update) => {
+                if (!update.docChanged) return
+                const v = update.state.doc.toString()
+                emit('update:modelValue', v)
+                data.value = v
+                
+            })
+        ],
+        parent: codeEditor.value
    })

-    flask.value.onUpdate((v) => {
-        emit('update:modelValue', v)
-        data.value = v
-    })
-
-    flask.value.updateCode(body)
-
    nextTick(() => {
-        document.querySelector('code-flask').shadowRoot.querySelector('textarea').focus()
+        editorView?.focus()
    })
 }

@@ -61,7 +51,9 @@ onMounted(() => {

 watch(() => props.modelValue, (newVal) => {
    if (newVal !== data.value) {
-        flask.value.updateCode(newVal)
+        editorView?.dispatch({
+            changes: { from: 0, to: editorView.state.doc.length, insert: newVal }
+        })
    }
 })
 </script>