add debug input

README.md

@@ -54,6 +54,9 @@ pnpm run wasm
 ```sh
 pnpm run dev
 ```
+The app is accessible at http://localhost:5173
+
+Optionally, go to http://localhost:5173/?debug=on so that you can send raw key sequences to librime, e.g. `{Shift+Delete}`, `{Release+a}`. This feature is better used when you set `ENABLE_LOGGING=ON` in the previous step.
 ### Lint
 ```sh
 pnpm run lint:fix

doc/customize.md

@@ -13,7 +13,8 @@ However, you are more than welcomed to host a customized version of My RIME to d
 * Clone the repo. Do not use `--recurse-submodules`.
 * Replicate build steps locally. You may reference [README](../README.md) or `build` job of [CI script](../.github/workflows/build.yml). Those steps work on Ubuntu latest stable and LTS release.
 * Customize [schemas.json](../schemas.json).
-* Run `pnpm run schema` and test by `pnpm run dev`.
+* Run `pnpm run schema`. If the end of the output asks to run `pnpm run wasm`, please do.
+* Test by `pnpm run dev`.
 * Once everything works fine, run `pnpm run build`.
 * The artifact is in `dist`, and you may deploy it to a static web server.
 
@@ -27,7 +28,7 @@ For each object, here are key and value definitions:
 * `id: string`, the schema id that you place in `default.yaml` for desktop RIME.
 * `name: string`, the label you want to show as IME name for user to select.
 * `emoji?: boolean`, whether integrate [emoji](https://github.com/rime/rime-emoji). Default `false`.
-* `target: string`, the repository name that you use in `rime-install`.
+* `target: string`, the same argument you use when installing by plum: `bash rime-install <target>`.
 * `dependencies?: string[]`, schema ids that are either a hard dependency (e.g. `luna_pinyin` for `double_pinyin`) or a soft (required by reverse-lookup) dependency (e.g. `stroke` for `luna_pinyin`). Make sure you have them defined in other objects. Default `[]`.
 * `variants?: object[]`, simplified/traditional/... variants. Default `undefined` means the table is traditional, and simplified variant is available by OpenCC, e.g. `luna_pinyin`. An empty `[]` means there are no variants and the variant switch button is disabled, e.g. `stroke`.
   * `id: string`, the corresponding `option` in `.schema.yaml`.

src/components/MyMenu.vue

@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import { ref, computed, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
 import { NButton, NButtonGroup, NIcon, NSpace, NSelect } from 'naive-ui'
 import { WeatherMoon16Regular, Circle16Regular } from '@vicons/fluent'
 import { init, schemaId, options, variants, variant, isEnglish, isFullWidth, isExtendedCharset, isEnglishPunctuation, schemaExtended, changeLanguage, changeVariant, changeWidth, changeCharset, changePunctuation, changeIME } from '../control'
-import { getTextarea } from '../util'
+import { getTextarea, getQueryString } from '../util'
 
 const ime = ref<string>('') // visual vs internal
 const showVariant = ref<boolean>(true)
 
-const route = useRoute()
+// const route = useRoute()
 
-function getKey (key: string) {
-  const queryValue = route.query[key]
-  const param = typeof queryValue === 'string' ? queryValue : ''
-  return param || localStorage.getItem(key) || ''
-}
-
-init(getKey('schemaId'), getKey('variantName')).then(() => {
+init(getQueryString('schemaId'), getQueryString('variantName')).then(() => {
   ime.value = schemaId.value
 })
 

src/components/MyPanel.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { nextTick, ref, toRef, onMounted, onUnmounted, watch } from 'vue'
-import { NPopover, NMenu, MenuOption, NText, NButton, NIcon } from 'naive-ui'
+import { NPopover, NMenu, MenuOption, NText, NButton, NIcon, NInput } from 'naive-ui'
 import { CaretLeft, CaretRight } from '@vicons/fa'
 // @ts-ignore
 import getCaretCoordinates from 'textarea-caret'
 import emojiRegex from 'emoji-regex'
 import { process } from '../workerAPI'
 import { changeLanguage } from '../control'
-import { isMobile, getTextarea } from '../util'
+import { isMobile, getTextarea, getQueryString } from '../util'
 
 const props = defineProps<{
   textareaSelector: string
@@ -37,11 +37,21 @@ const highlighted = ref<string>('1')
 const prevDisabled = ref<boolean>(true)
 const nextDisabled = ref<boolean>(false)
 
+// Call to librime is async so there's a delay from editing=true to showMenu=true
 const editing = ref<boolean>(false)
 const showMenu = ref<boolean>(false)
 const xOverflow = ref<boolean>(false)
 const exclusiveShift = ref<boolean>(false)
 
+const debugEnabled = Boolean(getQueryString('debug'))
+const debugMode = ref<boolean>(false)
+const debugCode = ref<string>('')
+async function debug (e: KeyboardEvent) {
+  editing.value = true
+  await input(debugCode.value);
+  (e.target as HTMLElement).focus()
+}
+
 const modifiers = ['Control', 'Alt', 'Meta']
 
 const RIME_KEY_MAP = {
@@ -154,6 +164,9 @@ watch(text, (acNewText, acText) => {
 // end: code specific to Android Chromium
 
 function onKeydown (e: KeyboardEvent) {
+  if (debugMode.value) {
+    return
+  }
   const { key } = e
   const textarea = getTextarea(textareaSelector)
   // begin: code specific to Android Chromium
@@ -213,6 +226,9 @@ function onKeydown (e: KeyboardEvent) {
 }
 
 function onKeyup (e: KeyboardEvent) {
+  if (debugMode.value) {
+    return
+  }
   const { key } = e
   if (key === 'Shift' && exclusiveShift.value) {
     changeLanguage()
@@ -294,6 +310,15 @@ onUnmounted(() => { // Cleanup for HMR
 </script>
 
 <template>
+  <n-input
+    v-if="debugEnabled"
+    v-model:value="debugCode"
+    clearable
+    placeholder="Send key sequence to librime"
+    @keyup.enter="debug"
+    @focus="debugMode = true"
+    @blur="debugMode = false"
+  />
   <n-popover
     :show="showMenu"
     :show-arrow="false"

src/util.ts

@@ -1,4 +1,5 @@
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useBreakpoint } from 'vooks'
 
 const breakpoint = useBreakpoint()
@@ -8,4 +9,11 @@ function getTextarea (selector: string) {
   return document.querySelector(selector) as HTMLTextAreaElement
 }
 
-export { isMobile, getTextarea }
+function getQueryString (key: string) {
+  const route = useRoute()
+  const queryValue = route.query[key]
+  const param = typeof queryValue === 'string' ? queryValue : ''
+  return param || localStorage.getItem(key) || ''
+}
+
+export { isMobile, getTextarea, getQueryString }

src/views/MainView.vue

@@ -87,12 +87,12 @@ async function copyLink () {
         <n-icon :component="ClipboardLink20Regular" />
       </n-button>
     </n-button-group>
+    <my-panel
+      :textarea-selector="textareaSelector"
+      :text="text"
+      :update-text="updateText"
+    />
   </n-space>
-  <my-panel
-    :textarea-selector="textareaSelector"
-    :text="text"
-    :update-text="updateText"
-  />
 </template>
 
 <style scoped>

test/test-basic.spec.ts

@@ -207,3 +207,17 @@ test('Copy link button', async ({ page }) => {
   const copiedURL = `${baseURL}?schemaId=luna_pinyin&variantName=%E7%B9%81`
   while (await page.evaluate(() => navigator.clipboard.readText()) !== copiedURL);
 })
+
+test('Debug', async ({ page }) => {
+  await page.goto(`${baseURL}?debug=on`)
+
+  const debugInput = page.locator('input')
+
+  await debugInput.fill('d')
+  await page.keyboard.press('Enter')
+  await expect(item(page, '1 的')).toBeVisible()
+  await expect(debugInput).toBeFocused()
+  await debugInput.fill('{Page_Down}')
+  await page.keyboard.press('Enter')
+  await expect(item(page, '1 等')).toBeVisible()
+})