[#68928] sync checkboxes between preview and editor

src/MystEditor.jsx

@@ -12,6 +12,7 @@ import ResolvedComments from "./components/Resolved";
 import { handlePreviewClickToScroll } from "./extensions/syncDualPane";
 import { createMystState, MystState, predefinedButtons, defaultButtons } from "./mystState";
 import { batch, computed, signal, effect } from "@preact/signals";
+import { syncCheckboxes } from "./hooks/markdownCheckboxes";
 
 const EditorParent = styled.div`
   font-family: "Lato";
@@ -183,6 +184,7 @@ const MystEditor = () => {
                 ref={preview}
                 mode={options.mode.value}
                 onClick={(ev) => {
+                  syncCheckboxes(ev, text.lineMap, editorView.value);
                   if (options.syncScroll.value && options.mode.value == "Both")
                     handlePreviewClickToScroll(ev, text.lineMap, preview, editorView.value);
                 }}

src/extensions/syncDualPane.js

@@ -62,7 +62,7 @@ function scrollPreviewElemIntoView({ view, matchingLine, matchingElem, behavior
  * @param {{ target: HTMLElement }} ev
  * @param {{ current: Map<number, string> }} lineMap
  * @param {{ current: HTMLElement }} preview
- * @param { current: EditorView } editor
+ * @param { EditorView } editor
  */
 export function handlePreviewClickToScroll(ev, lineMap, preview, editor) {
   let id = ev.target.getAttribute("data-line-id");

src/hooks/markdownCheckboxes.js

@@ -0,0 +1,24 @@
+import { getLineById } from "./markdownSourceMap";
+import { EditorView } from "codemirror";
+
+/**
+ * @param {{ target: HTMLElement }} ev
+ * @param {{ current: Map<number, string> }} lineMap
+ * @param { EditorView } editor
+ */
+export function syncCheckboxes(ev, lineMap, editor) {
+  if (ev.target.tagName != "INPUT") return;
+  const id = ev.target.getAttribute("data-line-id");
+  const lineNumber = getLineById(lineMap.current, id);
+  const line = editor.state.doc.line(lineNumber);
+  const openIdx = line.text.indexOf("[");
+  const closeIdx = line.text.indexOf("]");
+
+  editor.dispatch({
+    changes: {
+      from: line.from + openIdx + 1,
+      to: line.from + closeIdx,
+      insert: ev.target.checked ? "x" : " ",
+    },
+  });
+}