drop some escapes; fix \t render

Author: eagleoflqj

include/webview_candidate_window.hpp

@@ -119,9 +119,9 @@ class WebviewCandidateWindow {
     void update_input_panel(const formatted<std::string> &preedit, int caret,
                             const formatted<std::string> &auxUp,
                             const formatted<std::string> &auxDown);
-    void set_candidates(const std::vector<Candidate> &candidates,
-                        int highlighted, scroll_state_t scroll_state,
-                        bool scroll_start, bool scroll_end);
+    void set_candidates(std::vector<Candidate> candidates, int highlighted,
+                        scroll_state_t scroll_state, bool scroll_start,
+                        bool scroll_end);
     void set_layout(layout_t layout) { layout_ = layout; }
     void set_writing_mode(writing_mode_t mode) { writing_mode_ = mode; }
 

page/generic.scss

@@ -101,6 +101,7 @@
   line-height: 1em; /* align label and candidates */
   position: relative; /* for absolute position of mark */
   box-sizing: content-box; /* f5j: vitepress sets border-box for * which makes candidate shorter */
+  white-space: pre-wrap; /* Don't collapse spaces and newlines of candidates. */
 }
 
 .fcitx-label {

page/panel.ts

@@ -13,11 +13,6 @@ function isSingleEmoji(text: string) {
   return Array.from(segmenter.segment(text)).length === 1 && regex.test(text)
 }
 
-function escapeWS(s: string) {
-  // XXX:   is broken in Safari
-  return s.replaceAll(' ', '&nbsp;').replaceAll('\n', '<br>').replaceAll('\t', '&emsp;')
-}
-
 function divider(paging: boolean = false) {
   const e = div('fcitx-divider')
   // Is this divider between candidates and paging buttons?
@@ -113,19 +108,19 @@ export function setCandidates(cands: Candidate[], highlighted: number, markText:
         mark.classList.add('fcitx-no-text')
       }
       else {
-        mark.innerHTML = markText
+        mark.textContent = markText
       }
       candidateInner.append(mark)
     }
 
     if (cands[i].label || scrollState === SCROLLING) {
       const label = div('fcitx-label')
-      label.innerHTML = escapeWS(cands[i].label || label0)
+      label.textContent = cands[i].label || label0
       candidateInner.append(label)
     }
 
     const text = div('fcitx-text')
-    text.innerHTML = escapeWS(cands[i].text)
+    text.textContent = cands[i].text
     if (isSingleEmoji(cands[i].text)) {
       // Hack: for vertical-lr writing mode, 🙅‍♂️ is rotated on Safari and split to 🙅 and ♂ on Chrome.
       // Can't find a way that works for text that contains not only emoji (e.g. for preedit) but
@@ -136,7 +131,7 @@ export function setCandidates(cands: Candidate[], highlighted: number, markText:
 
     if (cands[i].comment) {
       const comment = div('fcitx-comment')
-      comment.innerHTML = escapeWS(cands[i].comment)
+      comment.textContent = cands[i].comment
       candidateInner.append(comment)
     }
 

page/ux.ts

@@ -189,7 +189,7 @@ export function showContextmenu(x: number, y: number, index: number, actions: Ca
   contextmenu.innerHTML = ''
   for (const action of actions) {
     const item = div('fcitx-menu-item')
-    item.innerHTML = action.text
+    item.textContent = action.text
     item.addEventListener('click', () => {
       window.fcitx._action(index, action.id)
       hideContextmenu()

src/webview_candidate_window.cpp

@@ -21,19 +21,6 @@ void to_json(nlohmann::json &j, const Candidate &c) {
                        {"actions", c.actions}};
 }
 
-CandidateAction escape_action(const CandidateAction &a) {
-    return CandidateAction{a.id, escape_html(a.text)};
-}
-
-Candidate escape_candidate(const Candidate &c) {
-    std::vector<CandidateAction> escaped_actions;
-    escaped_actions.reserve(c.actions.size());
-    std::transform(c.actions.begin(), c.actions.end(),
-                   std::back_inserter(escaped_actions), escape_action);
-    return Candidate{escape_html(c.text), escape_html(c.label),
-                     escape_html(c.comment), std::move(escaped_actions)};
-}
-
 WebviewCandidateWindow::WebviewCandidateWindow()
 #ifndef __EMSCRIPTEN__
     : main_thread_id_(std::this_thread::get_id()),
@@ -115,14 +102,12 @@ void WebviewCandidateWindow::set_accent_color() const {
     }
 }
 
-void WebviewCandidateWindow::set_candidates(
-    const std::vector<Candidate> &candidates, int highlighted,
-    scroll_state_t scroll_state, bool scroll_start, bool scroll_end) {
-    candidates_.clear();
-    candidates_.reserve(candidates.size());
-    std::transform(candidates.begin(), candidates.end(),
-                   std::back_inserter(candidates_), escape_candidate);
-    candidates_.shrink_to_fit();
+void WebviewCandidateWindow::set_candidates(std::vector<Candidate> candidates,
+                                            int highlighted,
+                                            scroll_state_t scroll_state,
+                                            bool scroll_start,
+                                            bool scroll_end) {
+    candidates_ = std::move(candidates);
     highlighted_ = highlighted;
     scroll_state_ = scroll_state;
     scroll_start_ = scroll_start;
@@ -136,11 +121,7 @@ void WebviewCandidateWindow::scroll_key_action(
 
 void WebviewCandidateWindow::answer_actions(
     const std::vector<CandidateAction> &actions) const {
-    std::vector<CandidateAction> escaped_actions;
-    escaped_actions.reserve(actions.size());
-    std::transform(actions.begin(), actions.end(),
-                   std::back_inserter(escaped_actions), escape_action);
-    invoke_js("answerActions", escaped_actions);
+    invoke_js("answerActions", actions);
 }
 
 void WebviewCandidateWindow::set_theme(theme_t theme) const {
@@ -166,9 +147,9 @@ void WebviewCandidateWindow::show(double x, double y, double height) const {
     invoke_js("setLayout", layout_);
     invoke_js("setWritingMode", writing_mode_);
     invoke_js("updateInputPanel", preedit_, auxUp_, auxDown_);
-    invoke_js("setCandidates", candidates_, highlighted_,
-              escape_html(highlight_mark_text_), pageable_, has_prev_,
-              has_next_, scroll_state_, scroll_start_, scroll_end_);
+    invoke_js("setCandidates", candidates_, highlighted_, highlight_mark_text_,
+              pageable_, has_prev_, has_next_, scroll_state_, scroll_start_,
+              scroll_end_);
     invoke_js("resize", epoch, 0., 0., false);
 }
 

tests/test-corner-case.spec.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 import test, { expect } from '@playwright/test'
-import { candidate, followHostTheme, getBox, hover, init, panel, scrollExpand, setCandidates, setStyle, transparent, updateInputPanel } from './util'
+import { candidate, followHostTheme, getBox, getTextBox, hover, init, panel, scrollExpand, setCandidates, setStyle, transparent, updateInputPanel } from './util'
 
 test('Horizontal multi-line candidate', async ({ page }) => {
   await init(page)
@@ -25,6 +25,26 @@ test('Horizontal multi-line candidate', async ({ page }) => {
   expect((commentBox.y + commentBox.height / 2), 'Comment is centralized vertically').toEqual(middleY)
 })
 
+test('Multi-space and tab', async ({ page }) => {
+  await init(page)
+
+  await setCandidates(page, [{ text: '基准 单空格  双空格\t制表符' }], 0)
+  const text = panel(page).locator('.fcitx-text')
+  const rects: Record<number, DOMRect> = {}
+  for (const i of [0, 1, 3, 5, 8, 11]) {
+    rects[i] = await getTextBox(text, i)
+  }
+  const base = rects[1].left - rects[0].right
+  const single = rects[3].left - rects[1].right
+  const double = rects[8].left - rects[5].right
+  const tab = rects[11].width
+
+  expect(base).toBe(0)
+  expect(single).toBe(4)
+  expect(double).toBe(8)
+  expect(tab).toBeGreaterThan(double)
+})
+
 test.describe('Ghost stripe default positive margin', () => {
   const cases = [
     { name: 'System (macOS 26)', preset: (page: Page) => followHostTheme(page, 'macOS', 26) },