caret blink (#42)

Author: eagleoflqj

src/api.d.ts

@@ -41,6 +41,7 @@ export type SystemEvent = {
   data: {
     auxUp: string
     preedit: string
+    caret: number
   }
 } | {
   type: 'CANDIDATES'

src/candidates.ts

@@ -32,15 +32,54 @@ function cancelLongPress() {
   }
 }
 
-export function setPreedit(auxUp: string, preedit: string) {
+const textEncoder = new TextEncoder()
+const textDecoder = new TextDecoder()
+let timer: number | null = null
+let show = false
+
+export function setPreedit(auxUp: string, preedit: string, caret: number) {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
   const container = getCandidateBar().querySelector('.fcitx-keyboard-candidates-container')!
   let element = container.querySelector('.fcitx-keyboard-preedit')
   if (auxUp || preedit) {
     if (!element) {
       element = div('fcitx-keyboard-preedit')
       container.prepend(element)
     }
-    element.innerHTML = auxUp + preedit
+    element.innerHTML = ''
+    if (auxUp) {
+      const auxUpElement = div('fcitx-keyboard-aux-up')
+      auxUpElement.innerHTML = auxUp
+      element.appendChild(auxUpElement)
+    }
+    if (preedit) {
+      const preCaretElement = div('fcitx-keyboard-pre-caret')
+      if (caret >= 0) {
+        const preeditBytes = textEncoder.encode(preedit)
+        const preCaret = textDecoder.decode(preeditBytes.subarray(0, caret))
+        const postCaret = textDecoder.decode(preeditBytes.subarray(caret, preeditBytes.length))
+        preCaretElement.innerHTML = preCaret
+        const caretElement = div('fcitx-keyboard-caret')
+        element.append(preCaretElement, caretElement)
+        show = true
+        timer = window.setInterval(() => {
+          show = !show
+          caretElement.style.opacity = show ? '1' : '0'
+        }, 500)
+        if (postCaret) {
+          const postCaretElement = div('fcitx-keyboard-post-caret')
+          postCaretElement.innerHTML = postCaret
+          element.appendChild(postCaretElement)
+        }
+      }
+      else {
+        preCaretElement.innerHTML = preedit
+        element.appendChild(preCaretElement)
+      }
+    }
   }
   else {
     element?.remove()

src/keyboard.ts

@@ -117,7 +117,7 @@ export function onMessage(message: string) {
       removeCandidatesFromStack()
       break
     case 'PREEDIT':
-      setPreedit(event.data.auxUp, event.data.preedit)
+      setPreedit(event.data.auxUp, event.data.preedit, event.data.caret)
       break
     case 'CANDIDATES':
       setCandidates(event.data.candidates, event.data.highlighted, event.data.scrollState, event.data.scrollStart, event.data.scrollEnd)

src/preset.css

@@ -143,6 +143,15 @@
 .fcitx-keyboard-preedit {
   height: 32cqh;
   font-size: 24cqh;
+  line-height: 24cqh;
+  display: flex;
+  align-items: center;
+}
+
+.fcitx-keyboard-caret {
+  width: 1px;
+  height: 24cqh;
+  background-color: black;
 }
 
 .fcitx-keyboard-candidates-container {

tests/test-candidates.spec.ts

@@ -139,6 +139,7 @@ test('Preedit', async ({ page }) => {
   await sendSystemEvent(page, { type: 'PREEDIT', data: {
     auxUp: 'Quick Phrase: ',
     preedit: 'vah',
+    caret: -1,
   } })
   const preedit = page.locator('.fcitx-keyboard-preedit')
   await expect(preedit).toHaveText('Quick Phrase: vah')
@@ -157,6 +158,22 @@ test('Preedit', async ({ page }) => {
   expect(newBox, 'No layout shift').toEqual(box)
 })
 
+test('Caret blink', async ({ page }) => {
+  await init(page)
+
+  await sendSystemEvent(page, { type: 'PREEDIT', data: {
+    auxUp: '',
+    preedit: '🐦‍🔥she',
+    caret: 13,
+  } })
+  await expect(page.locator('.fcitx-keyboard-pre-caret')).toHaveText('🐦‍🔥sh')
+  await expect(page.locator('.fcitx-keyboard-post-caret')).toHaveText('e')
+  const caret = page.locator('.fcitx-keyboard-caret')
+  await expect(caret).toHaveCSS('opacity', '1')
+  await expect(caret).toHaveCSS('opacity', '0')
+  await expect(caret).toHaveCSS('opacity', '1')
+})
+
 test('Horizontal scroll', async ({ page }) => {
   await init(page)