Make check for code fences more robust per spec

Author: nicolleromero

src/drafts/MarkdownViewer/MarkdownViewer.test.tsx

@@ -51,6 +51,32 @@ text before list
 - [x] item 1
 - [ ] item 2
 
+text after list`
+    const hierarchyBeforeTaskListNoItemsCheckedTildes = `
+text before list
+
+~~~[tasklist]
+- [ ] item A
+- [ ] item B
+\`\`\`
+~~~~~~
+
+- [ ] item 1
+- [ ] item 2
+
+text after list`
+    const hierarchyBeforeTaskListOneItemCheckedTildes = `
+text before list
+
+~~~[tasklist]
+- [ ] item A
+- [ ] item B
+\`\`\`
+~~~~~~
+
+- [x] item 1
+- [ ] item 2
+
 text after list`
 
     it('enables checklists by default', () => {
@@ -107,13 +133,28 @@ text after list`
           markdownValue={hierarchyBeforeTaskListNoItemsChecked}
           onChange={onChangeMock}
           disabled
-        />
+        />,
       )
       const items = getAllByRole('checkbox')
       fireEvent.change(items[0])
       await waitFor(() => expect(onChangeMock).toHaveBeenCalledWith(hierarchyBeforeTaskListOneItemChecked))
     })
 
+    it('calls `onChange` with the updated Markdown when a task is checked and hierarchy is present with tildes', async () => {
+      const onChangeMock = jest.fn()
+      const {getAllByRole} = render(
+        <MarkdownViewer
+          dangerousRenderedHTML={htmlObject}
+          markdownValue={hierarchyBeforeTaskListNoItemsCheckedTildes}
+          onChange={onChangeMock}
+          disabled
+        />,
+      )
+      const items = getAllByRole('checkbox')
+      fireEvent.change(items[0])
+      await waitFor(() => expect(onChangeMock).toHaveBeenCalledWith(hierarchyBeforeTaskListOneItemCheckedTildes))
+    })
+
     it('calls `onChange` with the updated Markdown when a task is unchecked', async () => {
       const onChangeMock = jest.fn()
       const {getAllByRole} = render(
@@ -199,7 +240,7 @@ text after list`
       expect(spy).toHaveBeenCalledTimes(1)
       expect(spy).toHaveBeenCalledWith(
         expect.objectContaining({
-          message: 'Not implemented: navigation (except hash changes)',
+          message: 'Not implemented: navigation (except hash changes)'
         }),
       )
       spy.mockRestore()

src/drafts/MarkdownViewer/_useListInteraction.ts

@@ -4,7 +4,16 @@ import {ListItem, listItemToString, parseListItem} from '../MarkdownEditor/_useL
 
 type TaskListItem = ListItem & {taskBox: '[ ]' | '[x]'}
 
-const isCodeBlockDelimiter = (line: string) => line.trimStart().startsWith('```')
+// Make check for code fences more robust per spec: https://github.github.com/gfm/#fenced-code-blocks
+const parseCodeFenceBegin = (line: string) => {
+  const match = line.match(/^ {0,3}(`{3,}|~{3,})[^`]*$/)
+  return match ? match[1] : null
+}
+
+const isCodeFenceEnd = (line: string, fence: string) => {
+  const match = line.match(new RegExp(`^ {0,3}${fence}${fence[0]}* *$`))
+  return match !== null
+}
 
 const isTaskListItem = (item: ListItem | null): item is TaskListItem => typeof item?.taskBox === 'string'
 
@@ -45,17 +54,23 @@ export const useListInteraction = ({
   const onToggleItem = useCallback(
     (toggledItemIndex: number) => () => {
       const lines = markdownRef.current.split('\n')
-      let inCodeBlock = false
+      let currentCodeFence: string | null = null
 
       for (let lineIndex = 0, taskIndex = 0; lineIndex < lines.length; lineIndex++) {
-        if (isCodeBlockDelimiter(lines[lineIndex])) {
-          inCodeBlock = !inCodeBlock
+        const line = lines[lineIndex]
+
+        if (!currentCodeFence) {
+          currentCodeFence = parseCodeFenceBegin(line)
+        } else if (isCodeFenceEnd(line, currentCodeFence)) {
+          currentCodeFence = null
           continue
         }
 
-        const parsedLine = parseListItem(lines[lineIndex])
+        if (currentCodeFence) continue
+
+        const parsedLine = parseListItem(line)
 
-        if (!isTaskListItem(parsedLine) || inCodeBlock) continue
+        if (!isTaskListItem(parsedLine)) continue
 
         if (taskIndex === toggledItemIndex) {
           const updatedLine = listItemToString(toggleTaskListItem(parsedLine))