support multi-line candidate

README.md

@@ -28,12 +28,14 @@ Execute the following JavaScript code to show candidates and more:
 _select = console.log
 _page = console.log
 _resize = console.log
+_action = console.log
 
 // Show candidates with labels, and highlight the first one.
 setCandidates([
-  { text: "虚假的", label: "1", comment: "comment" },
-  { text: "🀄", label: "2", comment: "" },
-  { text: "candidates", label: "3", comment: "" }], 0, "")
+  { text: "虚假的", label: "1", comment: "comment", actions: [{ "id": 1, "text": "删词" }] },
+  { text: "🀄", label: "2", comment: "", actions: [] },
+  { text: "candidates", label: "3", comment: "", actions: [] }], 0, "",
+  true, true, false)
 
 // Set vertical layout. 0 means horizontal.
 setLayout(1)

page/api.ts

@@ -19,6 +19,11 @@ import { setStyle } from './customize'
 
 window._onload && window._onload()
 
+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('divider')
   // Is this divider between candidates and paging buttons?
@@ -91,17 +96,17 @@ function setCandidates (cands: Candidate[], highlighted: number, markText: strin
 
     if (cands[i].label) {
       const label = div('label')
-      label.innerHTML = cands[i].label
+      label.innerHTML = escapeWS(cands[i].label)
       candidateInner.append(label)
     }
 
     const text = div('text')
-    text.innerHTML = cands[i].text
+    text.innerHTML = escapeWS(cands[i].text)
     candidateInner.append(text)
 
     if (cands[i].comment) {
       const comment = div('comment')
-      comment.innerHTML = cands[i].comment
+      comment.innerHTML = escapeWS(cands[i].comment)
       candidateInner.append(comment)
     }
 

page/generic.scss

@@ -48,6 +48,11 @@ body {
   }
 }
 
+.candidate {
+  /* When horizontal and there is multi-line candidate, make sure other candidates are vertical centered. */
+  display: flex;
+}
+
 .candidate-inner {
   display: flex;
   gap: 6px;

preview/preview.mm

@@ -28,7 +28,8 @@ int main(int argc, const char *argv[]) {
             candidateWindow->set_paging_buttons(true, false, true);
             candidateWindow->set_candidates(
                 {{"<h1>防注入</h1>", "1", "注释"},
-                 {"候选词", "2", "", {{1, "删词"}, {2, "置顶"}}}},
+                 {"候选词", "2", "", {{1, "删词"}, {2, "置顶"}}},
+                 {"制\t表\t符\n多 空  格", "2", ""}},
                 0);
             candidateWindow->set_theme(candidate_window::theme_t::light);
             candidateWindow->show(100, 200);