set enter key type (#8)

harmony/harmony.ts

@@ -1,23 +1,21 @@
 import type { VirtualKeyboardEvent } from '../src/api'
-import { setBuiltInLayout } from '../src/keyboard'
+import { onMessage, setBuiltInLayout } from '../src/keyboard'
 import { setClient } from '../src/ux'
 
-let port: MessagePort
-
-function onMessage(event: MessageEvent<string>) {
-  console.log(event.data) // eslint-disable-line no-console
-}
+let port: MessagePort | null = null
 
 window.addEventListener('message', (event: MessageEvent<string>) => {
   if (event.data === '__init_port__') {
     port = event.ports[0]
-    port.onmessage = onMessage
+    port.onmessage = (event: MessageEvent<string>) => {
+      onMessage(event.data)
+    }
   }
 })
 
 setClient({
   sendEvent(event: VirtualKeyboardEvent) {
-    port.postMessage(JSON.stringify(event))
+    port?.postMessage(JSON.stringify(event))
   },
 })
 

layouts/qwerty.json

@@ -51,7 +51,7 @@
             { "type": "key", "label": ",", "key": "," },
             { "type": "key", "label": "␣", "key": " ", "flex": "5" },
             { "type": "key", "label": ".", "key": "." },
-            { "type": "placeholder", "flex": "1.5" }
+            { "type": "enter", "flex": "1.5" }
           ]
         }
       ]
@@ -107,7 +107,7 @@
             { "type": "key", "label": ",", "key": "," },
             { "type": "key", "label": "␣", "key": " ", "flex": "5" },
             { "type": "key", "label": ".", "key": "." },
-            { "type": "placeholder", "flex": "1.5" }
+            { "type": "enter", "flex": "1.5" }
           ]
         }
       ]

preview/global.d.ts

@@ -3,5 +3,6 @@ import type { VirtualKeyboardEvent } from '../src/api'
 declare global {
   interface Window {
     sentEvents: VirtualKeyboardEvent[]
+    onMessage: (message: string) => void
   }
 }

preview/main.ts

@@ -1,8 +1,9 @@
 import type { VirtualKeyboardEvent } from '../src/api'
-import { setBuiltInLayout } from '../src/keyboard'
+import { onMessage, setBuiltInLayout } from '../src/keyboard'
 import { setClient } from '../src/ux'
 
 window.sentEvents = []
+window.onMessage = onMessage
 
 setClient({
   sendEvent(event: VirtualKeyboardEvent) {

src/api.d.ts

@@ -1,3 +1,8 @@
+export interface SystemEvent {
+  type: 'ENTER_KEY_TYPE'
+  data: string
+}
+
 export interface VirtualKeyboardEvent {
   type: 'KEY_DOWN' | 'KEY_UP'
   data: {

src/key.ts

@@ -4,6 +4,7 @@ import ShiftFiled from 'bundle-text:../svg/shift-filled.svg'
 import ShiftUppercaseFiled from 'bundle-text:../svg/shift-uppercase-filled.svg'
 import Shift from 'bundle-text:../svg/shift.svg'
 import { DATA_KEY, div } from './util'
+import { getEnterKeyLabel } from './ux'
 
 export function renderKey(key: Key, context: Context) {
   const dataKey = JSON.stringify(key)
@@ -29,6 +30,14 @@ export function renderKey(key: Key, context: Context) {
       container.setAttribute(DATA_KEY, dataKey)
       break
     }
+    case 'enter': {
+      const el = div('fcitx-keyboard-key')
+      el.classList.add('fcitx-keyboard-enter')
+      el.innerHTML = getEnterKeyLabel()
+      container.appendChild(el)
+      container.setAttribute(DATA_KEY, dataKey)
+      break
+    }
     case 'shift': {
       const el = div('fcitx-keyboard-key')
       el.classList.add('fcitx-keyboard-shift')

src/keyboard.ts

@@ -1,9 +1,10 @@
+import type { SystemEvent } from './api'
 import type { BUILTIN_LAYOUT, Layout } from './layout'
 import presetCss from 'bundle-text:./preset.css'
 import qwerty from '../layouts/qwerty.json'
 import { renderRow } from './key'
 import { div } from './util'
-import { onTouchEnd, onTouchStart, setLayout as setLayout_ } from './ux'
+import { onTouchEnd, onTouchStart, setEnterKeyType, setLayout as setLayout_ } from './ux'
 
 const builtInLayoutMap = { qwerty } as { [key: string]: Layout }
 
@@ -24,6 +25,7 @@ export function setLayout(id: string, layout: Layout) {
           locked: false,
         }))
       }
+      break
     }
   }
 
@@ -43,3 +45,12 @@ export function setLayout(id: string, layout: Layout) {
 export function setBuiltInLayout(id: string, name: BUILTIN_LAYOUT) {
   setLayout(id, builtInLayoutMap[name])
 }
+
+export function onMessage(message: string) {
+  const event = JSON.parse(message) as SystemEvent
+  switch (event.type) {
+    case 'ENTER_KEY_TYPE':
+      setEnterKeyType(event.data)
+      break
+  }
+}

src/layout.d.ts

@@ -15,9 +15,14 @@ export interface BackspaceKey {
   type: 'backspace'
 }
 
+export interface EnterKey {
+  type: 'enter'
+}
+
 export type Key = {
   flex?: string
 } & (NormalKey |
+  EnterKey |
   BackspaceKey |
   ShiftKey | {
     type: 'placeholder'

src/preset.css

@@ -48,14 +48,22 @@
   height: 50%;
 }
 
-.fcitx-keyboard-key:is(.fcitx-keyboard-shift, .fcitx-keyboard-backspace) {
+.fcitx-keyboard-key:is(.fcitx-keyboard-shift, .fcitx-keyboard-backspace, .fcitx-keyboard-enter) {
   background-color: #bcc0c7;
 }
 
-.fcitx-keyboard-pressed .fcitx-keyboard-key:is(.fcitx-keyboard-shift, .fcitx-keyboard-backspace) {
+.fcitx-keyboard-pressed .fcitx-keyboard-key:is(.fcitx-keyboard-shift, .fcitx-keyboard-backspace, .fcitx-keyboard-enter) {
   background-color: white;
 }
 
 .fcitx-keyboard-key.fcitx-keyboard-backspace svg {
   height: 60%;
 }
+
+.fcitx-keyboard-key.fcitx-keyboard-enter {
+  font-size: 36cqh;
+}
+
+.fcitx-keyboard-key.fcitx-keyboard-enter svg {
+  height: 80%;
+}

src/ux.ts

@@ -1,12 +1,14 @@
 import type { Key, Layout } from '../src/layout'
 import type { VirtualKeyboardClient } from './api'
+import Enter from 'bundle-text:../svg/enter.svg'
 import { renderRow } from './key'
 import { DATA_KEY } from './util'
 
 let layout_: Layout
 let currentLayer = 'default'
 let layerLocked = false
 let shiftReleaseTime = 0
+let enterKeyType = ''
 
 const DOUBLE_TAP_INTERVAL = 300 // Same with f5a.
 
@@ -57,6 +59,10 @@ export function onTouchEnd() {
           setLayer('default', false)
         }
         break
+      case 'enter': {
+        client_.sendEvent({ type: 'KEY_DOWN', data: { key: '\r', code: 'Enter' } })
+        break
+      }
       case 'backspace': {
         client_.sendEvent({ type: 'KEY_DOWN', data: { key: '', code: 'Backspace' } })
         break
@@ -102,3 +108,19 @@ export function setLayer(id: string, locked: boolean) {
     }
   }
 }
+
+export function getEnterKeyLabel() {
+  if (enterKeyType) {
+    return enterKeyType
+  }
+  return Enter
+}
+
+export function setEnterKeyType(label: string) {
+  enterKeyType = label || Enter
+  const enter = document.querySelector('.fcitx-keyboard-enter')
+  if (!enter) {
+    return
+  }
+  enter.innerHTML = label
+}

tests/test-generic.spec.ts

@@ -2,7 +2,7 @@ import {
   expect,
   test,
 } from '@playwright/test'
-import { getSentEvents, GRAY, init, tap, WHITE } from './util'
+import { getSentEvents, GRAY, init, sendSystemEvent, tap, WHITE } from './util'
 
 test('Click', async ({ page }) => {
   await init(page)
@@ -39,6 +39,22 @@ test('Backspace', async ({ page }) => {
   await expect(backspace).toHaveCSS('background-color', GRAY)
 })
 
+test('Enter', async ({ page }) => {
+  await init(page)
+
+  const enter = page.locator('.fcitx-keyboard-enter')
+  await expect(enter.locator('svg')).toBeVisible()
+
+  await tap(enter)
+  expect(await getSentEvents(page)).toEqual([{
+    type: 'KEY_DOWN',
+    data: { key: '\r', code: 'Enter' },
+  }])
+
+  await sendSystemEvent(page, { type: 'ENTER_KEY_TYPE', data: '搜索' })
+  await expect(enter).toHaveText('搜索')
+})
+
 test('Shift', async ({ page }) => {
   await init(page)
 

tests/util.ts

@@ -2,6 +2,7 @@ import type {
   Locator,
   Page,
 } from '@playwright/test'
+import type { SystemEvent } from '../src/api'
 import { dirname, join } from 'node:path'
 
 export const WHITE = 'rgb(255, 255, 255)'
@@ -20,3 +21,9 @@ export async function tap(locator: Locator) {
 export function getSentEvents(page: Page) {
   return page.evaluate(() => window.sentEvents)
 }
+
+export function sendSystemEvent(page: Page, event: SystemEvent) {
+  return page.evaluate((event: SystemEvent) => {
+    window.onMessage(JSON.stringify(event))
+  }, event)
+}