@qnroa/qtype 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -13,6 +13,53 @@ can land in any minor bump (`0.x.0`).
 
 ## [Unreleased]
 
+## [0.2.3] — 2026-09-07
+
+Fixes long-standing bugs around Chinese IME input on the typing arena
+and cleans up how "ignore punctuation" behaves. The invisible editor
+is now a `<input>` instead of a contenteditable div, matching the
+pattern every mainstream Chinese typing site uses; character capture
+reads `el.value` on the `input` event, so IME commits arrive as the
+final glyph — no more races between keydown and beforeinput.
+
+### Added
+- **Miss-slot display setting** (Appearance → Miss display). Default
+  keeps the target glyph visible in red (matches Monkeytype / keybr
+  / ohMyType / ptype conventions — user sees *what should have been
+  there*). Flip to "Typed" to render the user's actual keystroke in
+  red at the miss slot instead — useful when reviewing exactly what
+  went wrong.
+
+### Changed
+- **Editor element is now a hidden `<input>`, not `<div
+  contentEditable>`.** IME commits and macOS smart-punctuation
+  substitutions land in `el.value` as the final glyph, which the
+  `input` event reads and emits to the engine. Composition (pinyin
+  preedit) is gated on the event's own `isComposing` /
+  `inputType === 'insertCompositionText'` signals rather than the
+  hook's state machine, so browsers that fire `input` before
+  `compositionstart` can't leak preedit letters through as
+  characters.
+- **`Ignore punctuation` now rewrites punctuation to space at engine
+  construction.** Previously the engine fast-forwarded through
+  punctuation slots inside `onKeyDown`, which left the arena still
+  showing punctuation and the on-screen keyboard still hinting the
+  punctuation key. Now every punctuation codepoint in the target
+  becomes a regular space up-front — the arena, the keyboard hint
+  and the engine all see the same target sequence, no divergence.
+  Toggling the setting mid-card rebuilds the engine via the
+  `useTypingEngine` memo.
+
+### Fixed
+- **Chinese full-width punctuation shown as ASCII.** The old
+  keydown-based capture path picked up whichever of `keydown.key` /
+  `beforeinput.data` fired first and could substitute a half-width
+  glyph. Moving to `<input>` + `input` event and always rendering
+  the target glyph (default) puts an end to this class of bug.
+- **Dead `softInsertText` handler removed** from `INPUT_TYPE_HANDLERS`
+  and the `handleBeforeInput` fast-path; character emission has a
+  single owner now (the `input` event).
+
 ## [0.2.2] — 2026-09-01
 
 A responsive footer, a convention-based way to swap the site logo

package/CHANGELOG.zh.md

@@ -12,6 +12,42 @@ English: [CHANGELOG.md](https://www.npmjs.com/package/@qnroa/qtype?activeTab=cod
 
 ## [Unreleased]
 
+## [0.2.3] — 2026-09-07
+
+修复打字界面在中文输入法下的一系列老问题,并把"忽略标点"的行为
+理顺。隐藏的输入编辑器从 contenteditable 换成 `<input>`,和主流
+中文打字站的做法一致;字符捕获改为在 `input` 事件里读 `el.value`,
+IME 提交后的最终字符直接进引擎 —— 不再有 keydown 和 beforeinput
+的竞态。
+
+### 新增
+- **错误显示设置**(外观 → 错误显示)。默认保持目标字符可见(红色),
+  和 Monkeytype / keybr / ohMyType / ptype 一致 —— 用户看到的是
+  "本来应该是什么"。切到"实际输入"则在错误位置显示用户实际敲入
+  的字符(仍然红色),方便复盘到底敲错在哪。
+
+### 变更
+- **编辑器元素从 `<div contentEditable>` 改为隐藏 `<input>`。** IME
+  提交和 macOS 智能标点替换都会把最终字符写进 `el.value`,由
+  `input` 事件读到再喂给引擎。组词状态(拼音预输入)靠事件自身的
+  `isComposing` / `inputType === 'insertCompositionText'` 判断,
+  不再依赖 hook 状态机的时序;这样即便浏览器先 `input` 后
+  `compositionstart`,预输入的拼音字母也不会以字符形式泄漏出去。
+- **`忽略标点` 改为在引擎构造时把标点重写成空格。** 之前是引擎在
+  `onKeyDown` 里 fast-forward 跳过标点位置,但界面上标点还在显示,
+  键盘还在提示打标点键。现在所有标点 codepoint 上来就变空格 ——
+  arena、键盘提示、引擎看到的目标序列完全一致,不会跑偏。中途切换
+  设置时通过 `useTypingEngine` 的 memo 重建引擎。
+
+### 修复
+- **中文全角标点显示成 ASCII。** 老的 keydown 捕获路径会挑
+  `keydown.key` 或 `beforeinput.data` 里先来的那个,可能替换成半角。
+  改用 `<input>` + `input` 事件、并默认在打错位置显示目标字符,
+  这类问题一次性解决。
+- **删除死代码 `softInsertText`。** `INPUT_TYPE_HANDLERS` 和
+  `handleBeforeInput` 里的 `insertText` 特殊分支一起删掉,字符发射
+  只由 `input` 事件负责。
+
 ## [0.2.2] — 2026-09-01
 
 响应式页脚,约定式自定义 logo 和 favicon(不用改代码),以及把 view

package/dist/core/typing/engine/TypingInput.js

@@ -31,10 +31,28 @@ export class TypingInput {
     #position;
     #listeners = new Set();
     constructor(text, settings) {
-        this.#target = text;
-        this.#targetCodepoints = Array.from(text, (ch) => ch.codePointAt(0) ?? 0);
-        this.#length = this.#targetCodepoints.length;
         this.settings = { ...defaultTypingSettings, ...settings };
+        // ignorePunctuation replaces every punctuation codepoint with a
+        // regular space in the target sequence. The engine, the arena
+        // renderer, and the keyboard hint all just see a space — no
+        // fast-forward machinery, no special-case display, no divergence
+        // between what the user sees and what they need to type.
+        const raw = Array.from(text, (ch) => ch.codePointAt(0) ?? 0);
+        this.#targetCodepoints = this.settings.ignorePunctuation
+            ? raw.map((cp) => (isPunctuation(cp) ? 0x20 : cp))
+            : raw;
+        // The effective target string: rewritten if ignorePunctuation is
+        // on, else identical to `text`. Anything that consumes
+        // `engine.target` (keyboard-hint plans, mini-arena mirrors, etc.)
+        // sees exactly the sequence the engine expects the user to type.
+        // We avoid `String.fromCodePoint(...arr)` here — spreading a large
+        // codepoint array can blow the JS engine's argument-count ceiling
+        // on unusually long targets. Building char-by-char is O(n) with no
+        // fixed upper bound.
+        this.#target = this.settings.ignorePunctuation
+            ? this.#targetCodepoints.map((cp) => String.fromCodePoint(cp)).join('')
+            : text;
+        this.#length = this.#targetCodepoints.length;
         this.#chars = this.#buildInitialChars();
         this.#position = 0;
     }
@@ -60,20 +78,7 @@ export class TypingInput {
         if (this.#position >= this.#length) {
             return Feedback.Correct;
         }
-        let expected = this.#targetCodepoints[this.#position];
-        // ignorePunctuation: fast-forward through any punctuation slots
-        // before matching the user's keystroke against the next
-        // typable character. Uses a broad Unicode range so it works
-        // for both ASCII and CJK punctuation.
-        if (this.settings.ignorePunctuation) {
-            while (this.#position < this.#length &&
-                isPunctuation(this.#targetCodepoints[this.#position])) {
-                this.#autoAdvance(timestamp);
-            }
-            if (this.#position >= this.#length)
-                return Feedback.Correct;
-            expected = this.#targetCodepoints[this.#position];
-        }
+        const expected = this.#targetCodepoints[this.#position];
         // Normalize both sides through the same equivalence table so
         // fullwidth/half-width / smart-quote / CJK-punctuation variants
         // don't cause false misses. Display remains untouched.
@@ -195,28 +200,6 @@ export class TypingInput {
         for (const l of this.#listeners)
             l();
     }
-    /**
-     * Mark the current slot as auto-advanced Hit (used by
-     * `ignorePunctuation`). Records the timestamp so stats include the
-     * auto-advance in `startedAt` timing, but doesn't count it toward
-     * user keystroke totals (still shows as Hit — the punctuation was
-     * "correctly typed" via the auto-advance rule).
-     */
-    #autoAdvance(timestamp) {
-        if (this.#position >= this.#length)
-            return;
-        const expected = this.#targetCodepoints[this.#position];
-        const next = this.#chars.slice();
-        const prev = next[this.#position];
-        next[this.#position] = {
-            target: expected,
-            typed: expected,
-            attrs: (prev.attrs & ~(CharAttr.Miss | CharAttr.Cursor)) | CharAttr.Hit,
-            timestamp,
-        };
-        this.#chars = next;
-        this.#position++;
-    }
 }
 /**
  * ASCII case-insensitive comparison. Non-ASCII (CJK, accented Latin,

package/dist/view/assets/{index-BEGTg0_e.js → index-B_3g67jY.js}

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Dd26zdqJ.js","assets/index-Dzj2d3KO.js","assets/index-C59VhMlk.css"])))=>i.map(i=>d[i]);
-import{r as l,_ as h,u as g,j as f,C as p,M as m,T as y,a as w}from"./index-Dzj2d3KO.js";let o=null,c=null;async function L(){return o||c||(c=h(()=>import("./index-Dd26zdqJ.js"),__vite__mapDeps([0,1,2])).then(async e=>(o=await e.createHighlighter({themes:["github-dark","github-light"],langs:[]}),o)),c)}async function _(e,t){if(!e.getLoadedLanguages().includes(t))try{await e.loadLanguage(t)}catch{}}function x(e){const[t,n]=l.useState(o);return l.useEffect(()=>{if(!e)return;let r=!1;return(async()=>{const s=await L();await _(s,e),r||n(s)})(),()=>{r=!0}},[e]),t}const A=/```(\w+)/;function E(e){const t=e.toLowerCase();return t.includes("typescript")||t.endsWith(".ts")?"typescript":t.includes("python")||t.endsWith(".py")?"python":t.includes("cpp")||t.includes("c++")?"cpp":t.includes("java")&&!t.includes("script")?"java":t.includes("go")?"go":t.includes("rust")||t.endsWith(".rs")?"rust":t.includes("code-c")||t.endsWith(".c")?"c":"javascript"}function j(e,t){if(e){const n=e.match(A);if(n)return n[1]}return E(t)}function k(e,t,n,r){if(!r||!r.getLoadedLanguages().includes(t))return new Array(Array.from(e).length).fill(null);try{const s=r.codeToTokens(e,{lang:t,theme:n}),i=[];for(const u of s.tokens){for(const a of u)for(const d of a.content)i.push(a.color??null);i.push(null)}return!e.endsWith(`
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Cj70GP_V.js","assets/index-CeFBpbIw.js","assets/index-VPadwWzO.css"])))=>i.map(i=>d[i]);
+import{r as l,_ as h,u as g,j as f,C as p,M as m,T as y,a as w}from"./index-CeFBpbIw.js";let o=null,c=null;async function L(){return o||c||(c=h(()=>import("./index-Cj70GP_V.js"),__vite__mapDeps([0,1,2])).then(async e=>(o=await e.createHighlighter({themes:["github-dark","github-light"],langs:[]}),o)),c)}async function _(e,t){if(!e.getLoadedLanguages().includes(t))try{await e.loadLanguage(t)}catch{}}function x(e){const[t,n]=l.useState(o);return l.useEffect(()=>{if(!e)return;let r=!1;return(async()=>{const s=await L();await _(s,e),r||n(s)})(),()=>{r=!0}},[e]),t}const A=/```(\w+)/;function E(e){const t=e.toLowerCase();return t.includes("typescript")||t.endsWith(".ts")?"typescript":t.includes("python")||t.endsWith(".py")?"python":t.includes("cpp")||t.includes("c++")?"cpp":t.includes("java")&&!t.includes("script")?"java":t.includes("go")?"go":t.includes("rust")||t.endsWith(".rs")?"rust":t.includes("code-c")||t.endsWith(".c")?"c":"javascript"}function j(e,t){if(e){const n=e.match(A);if(n)return n[1]}return E(t)}function k(e,t,n,r){if(!r||!r.getLoadedLanguages().includes(t))return new Array(Array.from(e).length).fill(null);try{const s=r.codeToTokens(e,{lang:t,theme:n}),i=[];for(const u of s.tokens){for(const a of u)for(const d of a.content)i.push(a.color??null);i.push(null)}return!e.endsWith(`
 `)&&i.length>Array.from(e).length&&i.pop(),i}catch{return new Array(Array.from(e).length).fill(null)}}function v(e){var d;const{material:t,card:n}=e,[r]=g(),s=l.useMemo(()=>r?j(n.question,t.filePath):"",[n.question,t.filePath,r]),i=typeof document<"u"&&((d=document.documentElement.getAttribute("data-theme"))!=null&&d.includes("latte"))?"github-light":"github-dark",u=x(r?s:""),a=l.useMemo(()=>r?k(n.answer,s,i,u):void 0,[n.answer,s,i,u,r]);return f.jsx(p,{type:"code",variant:"flow",slots:[{role:"title",content:n.title},n.question?{role:"question",content:f.jsx(m,{source:n.question})}:{role:"question",content:null},{role:"arena",content:f.jsx(y,{...w(e),charColors:a},n.id)}]})}export{v as CodeCard};