draw caret on mobile for readonly text field (#44)

Author: eagleoflqj

page/caret.ts

@@ -0,0 +1,41 @@
+import getCaretCoordinates from 'textarea-caret'
+
+// Compared with macOS pinyin on font-size: 14px.
+export const UNDERLINE_OFFSET_RATIO = 1 / 6
+
+export function getFontSize(element: HTMLElement) {
+  return Number.parseFloat(getComputedStyle(element).fontSize)
+}
+
+let timer: number | null = null
+let show = false
+
+export function removeCaret() {
+  if (timer) {
+    window.clearInterval(timer)
+  }
+  document.querySelectorAll('.fcitx-mobile-caret').forEach(div => div.remove())
+}
+
+export function redrawCaret(event: { target: EventTarget | null }) {
+  const input = event.target as HTMLInputElement | HTMLTextAreaElement
+  const color = getComputedStyle(input).caretColor
+  const box = input.getBoundingClientRect()
+  const { top, left } = getCaretCoordinates(input, input.selectionStart!)
+  const caretHeight = getFontSize(input) * (1 + UNDERLINE_OFFSET_RATIO)
+  removeCaret()
+  const div = document.createElement('div')
+  div.classList.add('fcitx-mobile-caret')
+  div.style.position = 'absolute'
+  div.style.top = `${box.top + top}px`
+  div.style.left = `${box.left + left}px`
+  div.style.height = `${caretHeight}px`
+  div.style.width = '1px'
+  div.style.backgroundColor = color
+  document.body.appendChild(div)
+  show = true
+  timer = window.setInterval(() => {
+    show = !show
+    div.style.opacity = show ? '1' : '0'
+  }, 500)
+}

page/client.ts

@@ -1,4 +1,5 @@
 import getCaretCoordinates from 'textarea-caret'
+import { getFontSize, UNDERLINE_OFFSET_RATIO } from './caret'
 import { getInputElement, setSpellCheck } from './focus'
 import { graphemeIndices } from './unicode'
 
@@ -9,15 +10,10 @@ let preedit = ''
 let preeditIndex = 0
 
 // compared with macOS pinyin
-const UNDERLINE_OFFSET = 1
 const CANDIDATE_WINDOW_OFFSET = 6
 
 const textEncoder = new TextEncoder()
 
-function getFontSize(element: HTMLElement) {
-  return Number.parseFloat(getComputedStyle(element).fontSize)
-}
-
 export function placePanel(dx: number, dy: number, anchorTop: number, anchorLeft: number, dragging: boolean) {
   const input = getInputElement()
   if (!input) {
@@ -92,14 +88,14 @@ function drawPreeditUnderline(input: HTMLElement, start: number) {
       // getCaretCoordinates can't tell the position of the end of previous line,
       // because it's equivalent to the start of next line, which is the actual place
       // that new character is written. So we need to calculate width of the last character.
-      drawUnderline(box.top + rowTop + fontSize + UNDERLINE_OFFSET, box.left + rowLeft, lastLeft - rowLeft + getTextWidth(input, preedit[i - 1]), color)
+      drawUnderline(box.top + rowTop + fontSize * (1 + UNDERLINE_OFFSET_RATIO), box.left + rowLeft, lastLeft - rowLeft + getTextWidth(input, preedit[i - 1]), color)
       rowTop = top
       rowLeft = lastLeft
     }
     lastLeft = left
   }
   if (lastLeft !== endLeft) {
-    drawUnderline(box.top + endTop + fontSize + UNDERLINE_OFFSET, box.left + lastLeft, endLeft - lastLeft, color)
+    drawUnderline(box.top + endTop + fontSize * (1 + UNDERLINE_OFFSET_RATIO), box.left + lastLeft, endLeft - lastLeft, color)
   }
 }
 

page/focus.ts

@@ -1,3 +1,4 @@
+import { redrawCaret, removeCaret } from './caret'
 import { resetPreedit } from './client'
 import { hasTouch, hideKeyboard, showKeyboard } from './keyboard'
 import Module from './module'
@@ -33,9 +34,12 @@ export function focus() {
   input.addEventListener('mousedown', resetInput)
   if (hasTouch) {
     input.addEventListener('touchstart', resetInput)
+    input.addEventListener('selectionchange', redrawCaret)
+    input.addEventListener('change', redrawCaret) // Needed when deleting the only character.
     originalReadOnly = input.readOnly
     input.readOnly = true
     showKeyboard()
+    redrawCaret({ target: input })
   }
   originalSpellCheck = input.spellcheck
   Module.ccall('focus_in', 'void', [], [])
@@ -55,8 +59,11 @@ export function blur() {
   input.removeEventListener('mousedown', resetInput)
   if (hasTouch) {
     input.removeEventListener('touchstart', resetInput)
+    input.removeEventListener('selectionchange', redrawCaret)
+    input.removeEventListener('change', redrawCaret)
     input.readOnly = originalReadOnly
     hideKeyboard()
+    removeCaret()
   }
   input.spellcheck = originalSpellCheck
   input = null

page/keyboard.ts

@@ -9,8 +9,9 @@ const hiddenBottom = 'max(calc(-200vw / 3), -50vh)'
 
 export const hasTouch = /Android|iPhone|iPad|iPod/.test(navigator.userAgent)
 
-function updateInput(input: HTMLInputElement | HTMLTextAreaElement, value: string) {
+function updateInput(input: HTMLInputElement | HTMLTextAreaElement, value: string, selectionStart?: number) {
   input.value = value
+  input.selectionStart = input.selectionEnd = selectionStart ?? value.length
   input.dispatchEvent(new Event('change'))
 }
 
@@ -30,7 +31,8 @@ function simulate(key: string, code: string) {
     case 'Backspace':
       if (preText) {
         const indices = graphemeIndices(preText)
-        updateInput(input, preText.slice(0, indices[indices.length - 1]) + postText)
+        const selectionStart = indices[indices.length - 1]
+        updateInput(input, preText.slice(0, selectionStart) + postText, selectionStart)
       }
       break
   }

tests/test-caret.mobile.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test'
+import { expectKeyboardShown, getBox, init, tapKeyboard } from './util'
+
+test('Focus, blink and blur', async ({ page }) => {
+  await init(page)
+
+  const caret = page.locator('.fcitx-mobile-caret')
+  await expect(caret).not.toBeInViewport()
+
+  const textarea = page.locator('textarea')
+  await textarea.tap()
+  await expect(caret).toHaveCSS('opacity', '1')
+  await expect(caret).toHaveCSS('opacity', '0')
+  await expect(caret).toHaveCSS('opacity', '1')
+
+  await page.locator('button').tap()
+  await expect(caret).not.toBeInViewport()
+})
+
+test('Input and Backspace', async ({ page }) => {
+  await init(page)
+
+  const textarea = page.locator('textarea')
+  await textarea.tap()
+  await expectKeyboardShown(page)
+  const caret = page.locator('.fcitx-mobile-caret')
+  const { x: x0 } = await getBox(caret)
+
+  await tapKeyboard(page, 'a@')
+  const { x: x1 } = await getBox(caret)
+  expect(x1).toBeGreaterThan(x0)
+
+  await tapKeyboard(page, page.locator('.fcitx-keyboard-key.fcitx-keyboard-backspace'))
+  const { x } = await getBox(caret)
+  expect(x).toEqual(x0)
+})
+
+test('Touch', async ({ page }) => {
+  await init(page)
+  const textarea = page.locator('textarea')
+  await textarea.tap()
+  await expectKeyboardShown(page)
+  const caret = page.locator('.fcitx-mobile-caret')
+  const { x: x0 } = await getBox(caret)
+
+  await tapKeyboard(page, 'a@')
+  await textarea.evaluate((el: HTMLTextAreaElement) => el.selectionStart = el.selectionEnd = 0)
+  const { x } = await getBox(caret)
+  expect(x).toEqual(x0)
+
+  await textarea.tap()
+  const { x: x1 } = await getBox(caret)
+  expect(x1, 'Tapping on center should effectively change caret position').toBeGreaterThan(x0)
+})