From 236c424d544bd0985497c22c91cde1745e386b0c Mon Sep 17 00:00:00 2001
From: RyotaUshio <ushio@ms.k.u-tokyo.ac.jp>
Date: Sun, 3 Dec 2023 04:13:50 +0900
Subject: [PATCH] Add a care for IME to math-in-callout decoration

---
 src/decorations.ts | 17 +++++++++--------
 src/main.ts        |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/decorations.ts b/src/decorations.ts
index 907a91e..827d358 100644
--- a/src/decorations.ts
+++ b/src/decorations.ts
@@ -1,5 +1,5 @@
 import { Range, StateField, Transaction, Extension } from '@codemirror/state';
-import { syntaxTree } from '@codemirror/language';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
 import { EditorView, Decoration, DecorationSet, WidgetType } from '@codemirror/view';
 import { editorEditorField, editorLivePreviewField } from 'obsidian';
 import { getQuoteInfo, rangesHaveOverlap } from 'utils';
@@ -15,19 +15,21 @@ import { BuiltInMathWidgetConstructor } from 'patch-widget-type';
  * The implementation of this function was deeply inspired by the state field
  * defined in the "QF" function in Obsidian's app.js.
  */
-export const createCalloutDecorator = (plugin: MathInCalloutPlugin, BuiltInMathWidget: BuiltInMathWidgetConstructor) => StateField.define<DecorationSet>({
+export const createCalloutDecorator = (BuiltInMathWidget: BuiltInMathWidgetConstructor) => StateField.define<DecorationSet>({
     create() {
         return Decoration.none;
     },
 
     update(prev: DecorationSet, tr: Transaction): DecorationSet {
         const { state } = tr;
-        const isSourceMode = !state.field(editorLivePreviewField);
-
         const view = state.field(editorEditorField);
-        const tree = syntaxTree(state);
+
+        if (view.composing) return prev.map(tr.changes); // User is using IME
+
+        const isSourceMode = !state.field(editorLivePreviewField);
         const doc = state.doc;
         const ranges = view.hasFocus ? state.selection.ranges : [];
+        const tree = syntaxTree(state);
         const decorations: Range<Decoration>[] = [];
 
         const makeDeco = (decorationSpec: { widget: WidgetType, block?: boolean, inclusiveEnd?: boolean, side?: number }, from: number, to: number) => {
@@ -117,14 +119,13 @@ export const createCalloutDecorator = (plugin: MathInCalloutPlugin, BuiltInMathW
                                             block: false,
                                             side: 1
                                         }).range(mathEnd, mathEnd)
-                                    );    
+                                    );
                                 }
                             } else {
                                 decorations.push(
                                     makeDeco({
                                         widget,
-                                        block: false,
-                                        side: 1
+                                        block: false
                                     }, mathBegin, mathEnd).range(mathBegin, mathEnd)
                                 );
                             }
diff --git a/src/main.ts b/src/main.ts
index 7a937f1..b20772c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,7 +24,7 @@ export default class MathInCalloutPlugin extends Plugin {
 			setTimeout(() => {
 				if (notReadyNotice) notReadyNotice.hide();
 				new Notice(`${this.manifest.name}: You're ready!`, 1500);
-				this.registerEditorExtension(createCalloutDecorator(this, builtInMathWidget));
+				this.registerEditorExtension(createCalloutDecorator(builtInMathWidget));
 				this.rerender()
 			}, 100);
 		});