WIP - checkboxes checkable in previewer

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -300,8 +300,12 @@ export default class NoteDetail extends React.Component<
   }
 
   appendNewTag = () => {
-    if (includes(this.state.newTagName, this.state.tags)) { return }
-    if (!isTagNameValid(this.state.newTagName)) { return }
+    if (includes(this.state.newTagName, this.state.tags)) {
+      return
+    }
+    if (!isTagNameValid(this.state.newTagName)) {
+      return
+    }
     this.setState(
       prevState => ({
         newTagName: '',
@@ -469,6 +473,7 @@ export default class NoteDetail extends React.Component<
       <CustomizedMarkdownPreviewer
         content={this.state.content}
         storageId={storageId}
+        updateContent={this.updateContent}
       />
     )
 

src/components/atoms/CustomizedMarkdownPreviewer.tsx

@@ -6,11 +6,13 @@ import { usePreviewStyle } from '../../lib/preview'
 interface CustomizedMarkdownPreviewer {
   content: string
   storageId?: string
+  updateContent?: any
 }
 
 const CustomizedMarkdownPreviewer = ({
   content,
-  storageId
+  storageId,
+  updateContent
 }: CustomizedMarkdownPreviewer) => {
   const { preferences } = usePreferences()
   const { previewStyle } = usePreviewStyle()
@@ -22,6 +24,7 @@ const CustomizedMarkdownPreviewer = ({
       codeBlockTheme={preferences['markdown.codeBlockTheme']}
       theme={preferences['general.theme']}
       style={previewStyle}
+      updateContent={updateContent}
     />
   )
 }

src/components/atoms/MarkdownPreviewer.tsx

@@ -159,21 +159,25 @@ interface MarkdownPreviewerProps {
   style?: string
   theme?: string
   storageId?: string
+  updateContent?: any
 }
 
 const MarkdownPreviewer = ({
   content,
   codeBlockTheme,
   style,
   theme,
-  storageId
+  storageId,
+  updateContent
 }: MarkdownPreviewerProps) => {
   const forceUpdate = useForceUpdate()
   const [rendering, setRendering] = useState(false)
   const previousContentRef = useRef('')
   const previousThemeRef = useRef<string | undefined>('')
+  const checkboxIndexes = React.useRef<any>(0)
   const [renderedContent, setRenderedContent] = useState<React.ReactNode>([])
   const { storageMap } = useDb()
+  // console.log(content)
 
   const markdownProcessor = useMemo(() => {
     const options = { codeBlockTheme, storageId }
@@ -214,10 +218,56 @@ const MarkdownPreviewer = ({
                 {children}
               </a>
             )
+          },
+          input: (props: any) => {
+            return (
+              <input
+                onChange={e => {
+                  const regex = {
+                    checked: /^(\s*>?)*\s*[+\-*] \[x]/i,
+                    checkedAndUnchecked: /^(\s*>?)*\s*[+\-*] (\[x]|\[ ])/i
+                  }
+                  const lines = content.split('\n')
+                  let checkboxIndex: any = e.target.getAttribute('id') || ''
+
+                  checkboxIndex = Number(
+                    checkboxIndex.replace(/^checkbox|(\[|\])/gi, '')
+                  )
+
+                  let current = 0
+
+                  for (let index = 0; index < lines.length; index++) {
+                    const line = lines[index]
+                    const matches = line.match(regex.checkedAndUnchecked)
+                    console.log(`matches: ${!!matches}`)
+                    if (matches) {
+                      if (current === checkboxIndex) {
+                        const isChecked = regex.checked.test(matches[0])
+                        lines[index] = line.replace(
+                          isChecked ? '[x]' : '[ ]',
+                          isChecked ? '[ ]' : '[x]'
+                        )
+                        // Bail out early since we're done
+                        break
+                      } else {
+                        current++
+                      }
+                    }
+                  }
+                  const nextContent = lines.join('\n')
+                  console.log(nextContent)
+                  updateContent(nextContent)
+                }}
+                id={`checkbox[${checkboxIndexes.current++}]`}
+                readOnly
+                {...props}
+                disabled={props.type !== 'checkbox'}
+              />
+            )
           }
         }
       })
-  }, [codeBlockTheme, storageId, storageMap])
+  }, [codeBlockTheme, content, storageId, storageMap, updateContent])
 
   const renderContent = useCallback(
     async (content: string) => {