diff --git a/main.ts b/main.ts
index efff215..590681e 100644
--- a/main.ts
+++ b/main.ts
@@ -1,4 +1,4 @@
-import { App, Editor, Modal, Notice, Plugin, Setting, sanitizeHTMLToDom } from 'obsidian';
+import { App, Editor, Modal, EditorTransaction, Plugin, Setting, TextComponent, sanitizeHTMLToDom } from 'obsidian';
 import { replacements, combiningmarks, subsuperscripts } from './data.ts';
 
 export default class LaTeXtoUnicode extends Plugin {
@@ -7,11 +7,8 @@ export default class LaTeXtoUnicode extends Plugin {
       id: "latex-to-unicode",
       name: "LaTeX to Unicode",
       editorCallback: (editor: Editor) => {
-
         const onSubmit = (res: string) => {
-          const pos = editor.getCursor();
-          editor.replaceRange(`${res}`, pos);
-          editor.setCursor(pos);
+          insertRange(editor,res)
         };
 
         new LaTeXToUnicodeModal(this.app, onSubmit).open();
@@ -20,9 +17,18 @@ export default class LaTeXtoUnicode extends Plugin {
   }
 }
 
+function insertRange(editor : Editor, text : string)
+{
+  var pos = editor.getCursor()
+  var offset = editor.posToOffset(pos);
+
+  editor.replaceRange(text, pos); // Replace (cursor will NOT be pushed by the length of the text)
+
+  editor.setCursor(editor.offsetToPos(offset+text.length)) // Go forward to the end of the replace, for the "insert" effect
+}
 
 export class LaTeXToUnicodeModal extends Modal {
-  res: string;
+  res: string = "";
 
   onSubmit: (res: string) => void;
 
@@ -38,22 +44,35 @@ export class LaTeXToUnicodeModal extends Modal {
     const { contentEl } = this;
 
     contentEl.createEl("h1", { text: "LaTeX to Unicode" });
-
-    const elContainer = contentEl.createEl('table');
-    elContainer.className = 'latexInputTable';
-    const first = elContainer.createEl('tr');
-    first.createEl('td', {text: 'LaTeX command'});
-    const elInput = first.createEl('td').createEl('input', {type: 'text'});
-    elInput.id = 'userInput';
-    elInput.addEventListener("input", (e) => {
-      this.res = replace(e.target.value);
-      document.getElementById('resDisp').value = this.res;
-    });
-    const second = elContainer.createEl('tr');
-    second.createEl('td', {text: 'Result'});
-    const elRes = second.createEl('td').createEl('input', {type: 'text'});
-    elRes.id = 'resDisp';
-    elRes.readOnly = true;
+    type Action = () => {}
+    var valueChanged : Action
+
+    new Setting(contentEl)
+      .setName("LaTeX command")
+      .addText((text)=>
+        text.onChange((value) => {
+          this.res = replace(value)
+          valueChanged?.()
+        })
+        .inputEl
+        .addEventListener('keyup',
+        (e : KeyboardEvent) => {
+          if(e.key == "Enter")
+          {
+            this.onSubmit(this.res)
+            this.close()
+          }
+        })
+      )
+      
+        
+
+    new Setting(contentEl)
+      .setName("Result")
+      .addText((text) => {
+        text.setDisabled(true)
+        valueChanged = () => text.setValue(this.res)
+      })
 
     new Setting(contentEl).addButton((btn) =>
       btn