[WIP] Migrate to CodeMirror

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint --ext .ts,.vue src"
   },
   "dependencies": {
-    "brace": "^0.11.1",
+    "codemirror": "^6.0.1",
     "md5": "^2.3.0",
     "naive-ui": "^2.38.1",
     "pinia": "^2.1.7",

src/components/BSMap.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.map" :style="style">
-    <BSRow v-for="(row, index) in rows" :key="index" :content="row" :row="index" />
+    <BSRow v-for="({ row, offset }, index) in rows" :key="index" :content="row" :row="index" :offset="offset" />
   </div>
 </template>
 
@@ -18,11 +18,18 @@ const props = defineProps<{
   size: number;
 }>();
 
-const rows = computed(() => props.content.split('\n'));
+const rows = computed(() => {
+  let offset = 0;
+  return props.content.split('\n').map((row) => {
+    const o = offset;
+    offset += row.length + 1;
+    return { row, offset: o };
+  })
+});
 
 const cols = computed(() => {
   let cols = 0;
-  for (const row of rows.value) {
+  for (const { row } of rows.value) {
     const c = Math.max(cols, row.split('\\').length);
     if (c > cols) cols = c;
   }

src/components/BSMap/BSCell.vue

@@ -19,7 +19,6 @@ import BSIcon from './BSIcon.vue';
 
 const props = defineProps<{
   content: string;
-  row: number;
   offset: number;
 }>();
 
@@ -41,7 +40,6 @@ const style = computed(() => ({
 
 function handleClick(): void {
   editorStore.selection = {
-    row: props.row,
     offset: props.offset,
     length: props.content.length,
   };

src/components/BSMap/BSRow.vue

@@ -3,12 +3,12 @@
     <div :class="$style.cells">
       <BSCell v-for="({ cell, offset }, index) in cells" :key="index"
         :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, cell.length) }" :content="cell"
-        :row="row" :offset="offset" />
+        :offset="offset" />
     </div>
     <div :class="$style.texts">
       <BSText v-for="({ text, offset, align }, index) in texts" :key="index"
         :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, text.length) }" :content="text"
-        :align="align" :row="row" :offset="offset" />
+        :align="align" :offset="offset" />
     </div>
   </div>
 </template>
@@ -24,12 +24,13 @@ import BSText from './BSText.vue';
 const props = defineProps<{
   content: string;
   row: number;
+  offset: number;
 }>();
 
 const editorStore = useEditorStore();
 
 const parts = computed(() => {
-  let offset = 0;
+  let offset = props.offset;
   return props.content.split('~~').map((part) => {
     const o = offset;
     offset += part.length + 2;
@@ -38,7 +39,7 @@ const parts = computed(() => {
 });
 
 const cells = computed(() => {
-  let offset = 0;
+  let offset = props.offset;
   return parts.value[0].part.split('\\').map((cell) => {
     const o = offset;
     offset += cell.length + 1;
@@ -57,7 +58,6 @@ function isFocused(row: number, offset: number, length: number): boolean {
   const { selection } = editorStore;
   return (
     typeof selection != 'undefined' &&
-    selection.row == row &&
     selection.offset >= offset &&
     selection.offset <= offset + length
   );

src/components/BSMap/BSText.vue

@@ -10,15 +10,13 @@ import { useEditorStore } from '@/stores/editor';
 const props = defineProps<{
   content: string;
   align: number;
-  row: number;
   offset: number;
 }>();
 
 const editorStore = useEditorStore();
 
 function handleClick(): void {
   editorStore.selection = {
-    row: props.row,
     offset: props.offset,
     length: props.content.length,
   };