fix: Fixed check list indentation in Super notes

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent, UIEventHandler, useCallback, useState } from 'react'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin'
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin'
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin'
@@ -28,6 +27,7 @@ import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin'
 import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin'
 import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
 import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
+import { CheckListPlugin } from './Plugins/CheckListPlugin'
 
 type BlocksEditorProps = {
   onChange?: (value: string, preview: string) => void

packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss

@@ -303,14 +303,18 @@
     margin-right: 16px;
   }
 }
+.Lexical__checkList {
+  margin-left: 0;
+  .Lexical__nestedListItem & {
+    margin-left: 16px;
+  }
+}
 .Lexical__listItem {
   margin: 0 0px;
 }
 .Lexical__listItemChecked,
 .Lexical__listItemUnchecked {
   position: relative;
-  margin-left: 8px;
-  margin-right: 8px;
   padding-left: 24px;
   padding-right: 24px;
   list-style-type: none;
@@ -327,7 +331,7 @@
   width: 16px;
   height: 16px;
   left: 0;
-  top: 5px;
+  top: 7px;
   cursor: pointer;
   background-size: cover;
   position: absolute;
@@ -359,7 +363,7 @@
   border-style: solid;
   position: absolute;
   display: block;
-  top: 7px;
+  top: 9px;
   width: 5px;
   left: 6px;
   height: 10px;
@@ -368,6 +372,9 @@
 }
 .Lexical__nestedListItem {
   list-style-type: none;
+  &.Lexical__listItemUnchecked {
+    padding-left: 0;
+  }
 }
 .Lexical__nestedListItem:before,
 .Lexical__nestedListItem:after {

packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx

@@ -0,0 +1,25 @@
+import { CheckListPlugin as LexicalCheckListPlugin } from '@lexical/react/LexicalCheckListPlugin'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { ListNode } from '@lexical/list'
+import { useEffect } from 'react'
+
+export function CheckListPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return editor.registerNodeTransform(ListNode, (node) => {
+      if (node.getListType() !== 'check') {
+        return
+      }
+      editor.getEditorState().read(() => {
+        const element = editor.getElementByKey(node.getKey())
+        if (!element) {
+          return
+        }
+        element.classList.add('Lexical__checkList')
+      })
+    })
+  }, [editor])
+
+  return <LexicalCheckListPlugin />
+}