diff --git a/src/MystEditor.jsx b/src/MystEditor.jsx index 975164a..c96ca6f 100644 --- a/src/MystEditor.jsx +++ b/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); }} diff --git a/src/extensions/syncDualPane.js b/src/extensions/syncDualPane.js index 41fb8f7..a9b0635 100644 --- a/src/extensions/syncDualPane.js +++ b/src/extensions/syncDualPane.js @@ -62,7 +62,7 @@ function scrollPreviewElemIntoView({ view, matchingLine, matchingElem, behavior * @param {{ target: HTMLElement }} ev * @param {{ current: Map }} 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"); diff --git a/src/hooks/markdownCheckboxes.js b/src/hooks/markdownCheckboxes.js new file mode 100644 index 0000000..b27e86f --- /dev/null +++ b/src/hooks/markdownCheckboxes.js @@ -0,0 +1,24 @@ +import { getLineById } from "./markdownSourceMap"; +import { EditorView } from "codemirror"; + +/** + * @param {{ target: HTMLElement }} ev + * @param {{ current: Map }} 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" : " ", + }, + }); +}