From 08888606c1d1085dd1db18ae1eadac33f09054e9 Mon Sep 17 00:00:00 2001
From: Yoji Shidara <dara@shidara.net>
Date: Sat, 9 Mar 2024 10:58:49 +0900
Subject: [PATCH] Update CodeMirrorModifier

---
 frontend/app/modifiers/code-mirror.js | 57 ++++++++++-----------------
 1 file changed, 20 insertions(+), 37 deletions(-)

diff --git a/frontend/app/modifiers/code-mirror.js b/frontend/app/modifiers/code-mirror.js
index 0d98648..547d57e 100644
--- a/frontend/app/modifiers/code-mirror.js
+++ b/frontend/app/modifiers/code-mirror.js
@@ -1,5 +1,3 @@
-import { action } from '@ember/object';
-import { bind } from '@ember/runloop';
 import codemirror from 'codemirror';
 import Modifier from 'ember-modifier';
 
@@ -8,41 +6,26 @@ import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/sparql/sparql';
 
 export default class CodeMirrorModifier extends Modifier {
-  didInstall() {
-    this._setup();
-  }
-
-  didUpdateArguments() {
-    if (this._editor.getValue() !== this.args.named.content) {
-      this._editor.setValue(this.args.named.content);
+  didSetup = false;
+
+  modify(element, _, { content, onUpdate }) {
+    if (!this.didSetup) {
+      const editor = codemirror(element, {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: 'markdown',
+        readOnly: false,
+        styleActiveLine: true,
+        theme: 'base16-light',
+        value: content || '',
+        viewportMargin: Infinity,
+      });
+
+      editor.on('change', () => {
+        onUpdate(editor.getValue());
+      });
+
+      this.didSetup = true;
     }
-
-    this._editor.setOption('readOnly', this.args.named.readOnly);
-  }
-
-  @action
-  _onChange(editor) {
-    this.args.named.onUpdate(editor.getValue());
-  }
-
-  _setup() {
-    if (!this.element) {
-      throw new Error('CodeMirror modifier has no element');
-    }
-
-    const editor = codemirror(this.element, {
-      lineNumbers: true,
-      matchBrackets: true,
-      mode: 'markdown',
-      readOnly: this.args.named.readOnly,
-      styleActiveLine: true,
-      theme: 'base16-light',
-      value: this.args.named.content || '',
-      viewportMargin: Infinity,
-    });
-
-    editor.on('change', bind(this, this._onChange));
-
-    this._editor = editor;
   }
 }