diff --git a/package-lock.json b/package-lock.json
index 9ee4d5a..c74f281 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "rdt-editor",
       "version": "5.0",
       "dependencies": {
-        "brace": "^0.11.1",
+        "codemirror": "^6.0.1",
         "md5": "^2.3.0",
         "naive-ui": "^2.38.1",
         "pinia": "^2.1.7",
@@ -61,6 +61,82 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.15.0.tgz",
+      "integrity": "sha512-G2Zm0mXznxz97JhaaOdoEG2cVupn4JjPaS4AcNvZzhOsnnG9YVN68VzfoUw6dYTsIxT6a/cmoFEN47KAWhXaOg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.3.tgz",
+      "integrity": "sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz",
+      "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.5.0.tgz",
+      "integrity": "sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.0.tgz",
+      "integrity": "sha512-nSSmzONpqsNzshPOxiKhK203R6BvABepugAe34QfQDbNDslyjkqBuKgrK5ZBvqNXpfxz5iLrlGTmEfhbQyH46A==",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@css-render/plugin-bem": {
       "version": "0.15.12",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.12.tgz",
@@ -593,6 +669,27 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz",
+      "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.0.tgz",
+      "integrity": "sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1294,11 +1391,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/brace": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
-      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1398,6 +1490,20 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1422,6 +1528,11 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3032,6 +3143,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3269,6 +3385,11 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index d3ff18a..c412d41 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/BSMap.vue b/src/components/BSMap.vue
index f751841..0f419bc 100644
--- a/src/components/BSMap.vue
+++ b/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;
   }
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
index b542bd5..f4f4dc8 100644
--- a/src/components/BSMap/BSCell.vue
+++ b/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,
   };
diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
index 3aa760c..a999ac3 100644
--- a/src/components/BSMap/BSRow.vue
+++ b/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
   );
diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
index b8e66da..d468101 100644
--- a/src/components/BSMap/BSText.vue
+++ b/src/components/BSMap/BSText.vue
@@ -10,7 +10,6 @@ import { useEditorStore } from '@/stores/editor';
 const props = defineProps<{
   content: string;
   align: number;
-  row: number;
   offset: number;
 }>();
 
@@ -18,7 +17,6 @@ const editorStore = useEditorStore();
 
 function handleClick(): void {
   editorStore.selection = {
-    row: props.row,
     offset: props.offset,
     length: props.content.length,
   };
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 8cc80e1..6ad63e3 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -1,9 +1,5 @@
 <template>
-  <div ref="holder" :style="{
-    width: `100%`,
-    height: `100%`,
-    lineHeight: `${size}px`,
-  }" />
+  <div ref="holder" :class="$style.editor" :style="{ '--bs-map-line-height': `${props.size}px` }" />
 </template>
 
 <script lang="ts" setup>
@@ -12,24 +8,15 @@ import {
   defineModel,
   onBeforeUnmount,
   onMounted,
-  watch,
   ref,
-  useCssModule,
 } from 'vue';
 
-import brace, {
-  type Position,
-  type IEditSession,
-  type Editor,
-} from 'brace';
-import 'brace/theme/tomorrow';
-import 'brace/ext/language_tools';
-import '@/editor/rdt';
+import { basicSetup } from 'codemirror'
+import { EditorView } from '@codemirror/view';
 
 import type ISelection from '@/types/selection';
 import type IIcon from '@/types/icon';
 
-import useClientSize from '@/composables/useClientSize';
 import bindEditorValue from '@/composables/bindEditorValue';
 import bindEditorSelection from '@/composables/bindEditorSelection';
 import bindEditorScroll from '@/composables/bindEditorScroll';
@@ -40,55 +27,60 @@ const props = defineProps<{
 }>();
 
 const holder = ref<HTMLElement>();
-const editor = ref<Editor>();
+const editor = ref<EditorView>();
 
 const content = defineModel<string>('content');
-bindEditorValue(editor, content);
-
 const selection = defineModel<ISelection>('selection');
-bindEditorSelection(editor, selection);
-
 const scroll = defineModel<number>('scroll');
-bindEditorScroll(editor, scroll);
-
-onMounted(() => {
-  editor.value = brace.edit(holder.value!);
-  editor.value.$blockScrolling = Infinity;
 
-  const session = editor.value.getSession();
-  session.setMode('ace/mode/rdt');
+const editorTheme = EditorView.baseTheme({
+  '&': {
+    height: '100%',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    lineHeight: 'var(--bs-map-line-height)',
+  },
+  '.cm-content': {
+    padding: '0',
+    lineHeight: 'var(--bs-map-line-height)',
+  },
+  '.cm-line': {
+    height: 'var(--bs-map-line-height)',
+    lineHeight: 'var(--bs-map-line-height)',
+  },
+  '.cm-gutterElement': {
+    height: 'var(--bs-map-line-height)',
+    lineHeight: 'var(--bs-map-line-height)',
+  },
+});
 
-  editor.value.setTheme('ace/theme/tomorrow');
-  editor.value.setOption('enableLiveAutocompletion', [{ getCompletions, getDocTooltip }]);
+onMounted(() => {
+  editor.value = new EditorView({
+    parent: holder.value,
+    doc: content.value,
+    extensions: [
+      editorTheme,
+      basicSetup,
+      bindEditorSelection(editor, selection),
+      bindEditorScroll(editor, scroll),
+      bindEditorValue(editor, content),
+    ],
+  });
 });
 
 onBeforeUnmount(() => {
   editor.value?.destroy();
   editor.value = undefined;
 });
-
-const holderSize = useClientSize(holder);
-watch(holderSize, () => editor.value?.resize());
-
-function getCompletions(
-  _editor: Editor,
-  _session: IEditSession,
-  _pos: Position,
-  _prefix: string,
-  callback: (err: Error | null, completions?: { value: string }[]) => void
-): void {
-  callback(null, Object.keys(props.icons)
-    .filter((icon) => !!props.icons[icon])
-    .map((icon) => ({ value: icon })));
-}
-
-const style = useCssModule();
-function getDocTooltip(item: { value: string; docHTML: string }): void {
-  item.docHTML = `<img src="${props.icons[item.value]?.data}" class="${style.preview}" />`;
-}
 </script>
 
 <style lang="scss" module>
+.editor {
+  width: 100%;
+  height: 100%;
+}
+
 .preview {
   height: 120px;
   display: block;
diff --git a/src/composables/bindEditorScroll.ts b/src/composables/bindEditorScroll.ts
index a767b13..c97e514 100644
--- a/src/composables/bindEditorScroll.ts
+++ b/src/composables/bindEditorScroll.ts
@@ -1,25 +1,21 @@
 import { watch, type Ref } from 'vue';
-import type { Editor } from 'brace';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 
-import onRefAssigned from './onRefAssigned';
+export default function bindEditorScroll(editor: Ref<EditorView | undefined>, scroll: Ref<number | undefined>): Extension {
+  watch(scroll, (value) => {
+    if (typeof editor.value != 'undefined' && typeof value != 'undefined' &&
+      editor.value.scrollDOM.scrollTop != value) {
+      editor.value.scrollDOM.scrollTop = value;
+    }
+  });
 
-export default function bindEditorScroll(editor: Ref<Editor | undefined>, scroll: Ref<number | undefined>): void {
-  onRefAssigned(editor, (value) => {
-    const session = value.getSession();
-    session.on('changeScrollTop', () => {
-      const scrollTop = session.getScrollTop();
+  return EditorView.domEventHandlers({
+    scroll: () => {
+      const scrollTop = editor.value?.scrollDOM.scrollTop;
       if (scroll.value != scrollTop) {
         scroll.value = scrollTop;
       }
-    });
-  });
-
-  watch(scroll, (value) => {
-    if (typeof value != 'undefined' && editor.value) {
-      const session = editor.value.getSession();
-      if (session.getScrollTop() !== value) {
-        session.setScrollTop(value);
-      }
-    }
+    },
   });
 }
diff --git a/src/composables/bindEditorSelection.ts b/src/composables/bindEditorSelection.ts
index a1a9969..a1cbd0a 100644
--- a/src/composables/bindEditorSelection.ts
+++ b/src/composables/bindEditorSelection.ts
@@ -1,72 +1,46 @@
 import { watch, type Ref } from 'vue';
-import type { Editor, Range, VirtualRenderer } from 'brace';
-
-import onRefAssigned from './onRefAssigned';
+import { EditorSelection, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 
 import type ISelection from '@/types/selection';
 
-interface Renderer extends VirtualRenderer {
-  scrollTop: number;
-  scrollSelectionIntoView(): void;
-}
-
-export default function bindEditorSelection(editorRef: Ref<Editor | undefined>, selection: Ref<ISelection | undefined>): void {
-  onRefAssigned(editorRef, (editor) => {
-    applyRange(editor, toRange({ row: 0, offset: 0, length: 0 }));
-
-    editor.selection.on('changeCursor', () => {
-      const range = editor.getSelection().getRange();
-      const sel = toSelection(range);
-      if (typeof selection.value == 'undefined' || !isSelectionEqual(selection.value, sel)) {
-        selection.value = sel;
-      }
-    });
-  });
-
+export default function bindEditorSelection(editorRef: Ref<EditorView | undefined>, selection: Ref<ISelection | undefined>): Extension {
   watch(selection, (selection) => {
     const editor = editorRef.value;
     if (selection && editor) {
-      const currentRange = editor.selection.getRange();
-      const settingRange = toRange(selection);
-      if (!isRangeEqual(currentRange, settingRange)) {
-        applyRange(editor, settingRange);
+      const currentSelection = editor.state.selection;
+      const settingSelection = toEditorSelection(selection);
+      if (!currentSelection.eq(settingSelection)) {
+        editor.dispatch({ selection: settingSelection });
+        editor.focus();
       }
     }
   });
-}
 
-function toRange({ row, offset, length }: ISelection): Range {
-  return {
-    start: { row: row, column: offset },
-    end: { row: row, column: offset + length },
-  } as Range;
-}
-
-function isRangeEqual(a: Range, b: Range): boolean {
-  return (
-    a.start.row == b.start.row &&
-    a.start.column == b.start.column &&
-    a.end.row == b.end.row &&
-    a.end.column == b.end.column
-  );
+  return EditorView.updateListener.of((update) => {
+    if (update.selectionSet) {
+      const sel = toSelection(update.state.selection);
+      if (typeof selection.value == 'undefined' || !isSelectionEqual(selection.value, sel)) {
+        selection.value = sel;
+      }
+    }
+  });
 }
 
-function applyRange(editor: Editor, range: Range) {
-  const renderer = editor.renderer as Renderer;
-  editor.selection.setRange(range, false);
-  renderer.scrollToX(0);
-  renderer.scrollSelectionIntoView();
-  editor.focus();
+function toEditorSelection(selection: ISelection): EditorSelection {
+  return EditorSelection.create([
+    EditorSelection.range(selection.offset, selection.offset + selection.length),
+  ]);
 }
 
-function toSelection(range: Range): ISelection {
+function toSelection(editorSelection: EditorSelection): ISelection {
+  const { anchor, head } = editorSelection.main;
   return {
-    row: range.start.row,
-    offset: range.start.column,
-    length: range.end.column - range.start.column,
-  } as ISelection;
+    offset: anchor,
+    length: head - anchor,
+  };
 }
 
 function isSelectionEqual(a: ISelection, b: ISelection): boolean {
-  return a.row == b.row && a.offset == b.offset && a.length == b.length;
+  return a.offset == b.offset && a.length == b.length;
 }
diff --git a/src/composables/bindEditorValue.ts b/src/composables/bindEditorValue.ts
index 2fe47f8..a5e1ffa 100644
--- a/src/composables/bindEditorValue.ts
+++ b/src/composables/bindEditorValue.ts
@@ -1,18 +1,11 @@
 import type { Ref } from 'vue';
-import type { Editor } from 'brace';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 
-import onRefAssigned from './onRefAssigned';
-
-export default function bindEditorValue(editor: Ref<Editor | undefined>, val: Ref<string | undefined>): void {
-  onRefAssigned(editor, (value) => {
-    if (val.value) {
-      value.setValue(val.value);
+export default function bindEditorValue(editor: Ref<EditorView | undefined>, val: Ref<string | undefined>): Extension {
+  return EditorView.updateListener.of((update) => {
+    if (update.docChanged) {
+      val.value = update.state.doc.toString();
     }
-
-    value.on('change', () => {
-      val.value = value.getValue();
-    });
   });
-
-  // only one way binding
 }
diff --git a/src/composables/onRefAssigned.ts b/src/composables/onRefAssigned.ts
deleted file mode 100644
index f223e42..0000000
--- a/src/composables/onRefAssigned.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type WatchSource, type WatchStopHandle, watch } from 'vue';
-
-export default function onRefAssigned<T>(value: WatchSource<T | undefined>, callback: (newValue: T) => void): WatchStopHandle {
-  return watch(value, (newValue, oldValue) => {
-    if (typeof newValue != 'undefined' && typeof oldValue == 'undefined') {
-      callback(newValue);
-    }
-  });
-}
diff --git a/src/composables/onRefUnassigned.ts b/src/composables/onRefUnassigned.ts
deleted file mode 100644
index 604035f..0000000
--- a/src/composables/onRefUnassigned.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type WatchSource, type WatchStopHandle, watch } from 'vue';
-
-export default function onRefUnassigned<T>(value: WatchSource<T | undefined>, callback: (oldValue: T) => void): WatchStopHandle {
-  return watch(value, (newValue, oldValue) => {
-    if (typeof newValue == 'undefined' && typeof oldValue != 'undefined') {
-      callback(oldValue);
-    }
-  });
-}
diff --git a/src/composables/useClientSize.ts b/src/composables/useClientSize.ts
deleted file mode 100644
index b77e44d..0000000
--- a/src/composables/useClientSize.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
-
-interface Size {
-  width: number;
-  height: number;
-}
-
-export default function useClientSize(elementRef: Ref<HTMLElement | undefined>): Ref<Size | undefined> {
-  const getSize = (target: HTMLElement | undefined): Size | undefined => target && {
-    width: target.clientWidth,
-    height: target.clientHeight,
-  };
-
-  const size = ref<Size | undefined>(getSize(elementRef.value));
-
-  const observer = new ResizeObserver(() => {
-    size.value = getSize(elementRef.value);
-  });
-
-  onMounted(() => {
-    observer.observe(elementRef.value!);
-  });
-
-  onBeforeUnmount(() => {
-    observer.unobserve(elementRef.value!);
-  });
-
-  return size;
-}
diff --git a/src/editor/rdt.js b/src/editor/rdt.js
deleted file mode 100644
index 8fabcaf..0000000
--- a/src/editor/rdt.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import ace from 'brace';
-
-ace.define('ace/mode/rdt_highlight_rules',
-  ['require', 'exports', 'ace/mode/text_highlight_rules'],
-  (acequire, exports) => {
-    const { TextHighlightRules } = acequire('./text_highlight_rules');
-
-    class RDTHighlightRules extends TextHighlightRules {
-
-      static metaData = {
-        name: 'RDT File',
-        scopeName: 'source.rdt',
-        fileTypes: ['rdt'],
-      };
-
-      $rules = {
-        start: [
-          {
-            token: 'keyword.operator.rdt',
-            regex: '(?:\\\\|!~)',
-          },
-          {
-            token: 'punctuation.definition.string',
-            regex: '(?:~~.*$)',
-          },
-          {
-            token: 'keyword.control.statement.rdt',
-            regex: '(?:[^\\\\(~~)(!~)]+)',
-          },
-        ],
-      };
-
-      constructor() {
-        super();
-        this.normalizeRules();
-      }
-
-    }
-
-    exports.RDTHighlightRules = RDTHighlightRules;
-  });
-
-ace.define('ace/mode/rdt',
-  ['require', 'exports', 'ace/mode/text', 'ace/mode/rdt_highlight_rules'],
-  (acequire, exports) => {
-    const { Mode: TextMode } = acequire('./text');
-    const { RDTHighlightRules } = acequire('./rdt_highlight_rules');
-
-    class Mode extends TextMode {
-
-      $id = 'ace/mode/rdt';
-      HighlightRules = RDTHighlightRules;
-
-    }
-
-    exports.Mode = Mode;
-  });
diff --git a/src/types/selection.ts b/src/types/selection.ts
index 232acd4..7d342ec 100644
--- a/src/types/selection.ts
+++ b/src/types/selection.ts
@@ -1,5 +1,4 @@
 export default interface ISelection {
-  row: number;
   offset: number;
   length: number;
 }