turn off spellcheck when having preedit (#35)

Author: eagleoflqj

page/client.ts

@@ -1,5 +1,5 @@
 import getCaretCoordinates from 'textarea-caret'
-import { getInputElement } from './focus'
+import { getInputElement, setSpellCheck } from './focus'
 
 let x = 0
 let y = 0
@@ -72,6 +72,7 @@ ____ commit pre|edit ____
   input.dispatchEvent(new Event('change'))
   preedit = preeditText
   preeditIndex = i
+  setSpellCheck(!preedit)
 }
 
 export function setPreedit(text: string, index: number) {

page/focus.ts

@@ -5,6 +5,15 @@ type Input = HTMLInputElement | HTMLTextAreaElement
 
 let input: Input | null = null
 let userClick = false
+let originalSpellCheck = true
+
+// false means disable, true means respect the original value.
+export function setSpellCheck(spellCheck: boolean) {
+  if (!input) {
+    return
+  }
+  input.spellcheck = spellCheck ? originalSpellCheck : false
+}
 
 export function clickPanel() {
   userClick = true
@@ -20,6 +29,7 @@ export function focus() {
   }
   input = <Input>document.activeElement
   input.addEventListener('mousedown', resetInput)
+  originalSpellCheck = input.spellcheck
   Module.ccall('focus_in', 'void', [], [])
 }
 
@@ -33,6 +43,7 @@ export function blur() {
     return
   }
   input.removeEventListener('mousedown', resetInput)
+  input.spellcheck = originalSpellCheck
   input = null
   Module.ccall('focus_out', 'void', [], [])
   resetPreedit()

tests/test-preedit.spec.ts

@@ -0,0 +1,44 @@
+import type { Locator } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import { init } from './util'
+
+function getSpellCheck(locator: Locator) {
+  return locator.evaluate((el: HTMLElement) => el.spellcheck)
+}
+
+test('Disable spellcheck', async ({ page }) => {
+  await init(page)
+
+  const textarea = page.locator('textarea')
+  expect(await getSpellCheck(textarea), 'Original value set by browser is true').toBe(true)
+
+  await textarea.click()
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('pin xie', 7)
+  })
+  expect(await getSpellCheck(textarea), 'Spellcheck is turned off when there is preedit').toBe(false)
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('', 0)
+  })
+  expect(await getSpellCheck(textarea), 'Original spellcheck value is restored').toBe(true)
+})
+
+test('Respect original spellcheck value (manually set false)', async ({ page }) => {
+  await init(page)
+
+  const textarea = page.locator('textarea')
+  await textarea.evaluate((el: HTMLElement) => {
+    el.spellcheck = false
+  })
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('pin xie', 7)
+  })
+  expect(await getSpellCheck(textarea), 'Spellcheck is turned off when there is preedit').toBe(false)
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('', 0)
+  })
+  expect(await getSpellCheck(textarea), 'Original spellcheck value is restored').toBe(false)
+})