colanode · Moonlanced · Feb 3, 2026 · Feb 7, 2026 · Feb 7, 2026
diff --git a/packages/core/src/lib/constants.ts b/packages/core/src/lib/constants.ts
@@ -19,6 +19,8 @@ export const EditorNodeTypes = {
   TableHeader: 'tableHeader',
   TableCell: 'tableCell',
   TableRow: 'tableRow',
+  ToggleList: 'toggleList',
+  ToggleItem: 'toggleItem',
 };
 
 export type SortDirection = 'asc' | 'desc';

diff --git a/packages/ui/src/components/documents/document-editor.tsx b/packages/ui/src/components/documents/document-editor.tsx
@@ -7,7 +7,7 @@ import {
   useEditor,
 } from '@tiptap/react';
 import { debounce, isEqual } from 'lodash-es';
-import { Fragment, useEffect, useMemo, useRef } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
 
 import {
@@ -39,6 +39,7 @@ import {
   ParagraphCommand,
   TableCommand,
   TodoCommand,
+  ToggleListCommand,
   DatabaseCommand,
   DatabaseInlineCommand,
 } from '@colanode/ui/editor/commands';
@@ -77,6 +78,8 @@ import {
   TableCellNode,
   TaskItemNode,
   TaskListNode,
+  ToggleItemNode,
+  ToggleListNode,
   TextNode,
   TrailingNode,
   UnderlineMark,
@@ -107,84 +110,6 @@ const buildYDoc = (
   return ydoc;
 };
 
-interface UndoRedoParams {
-  editor: ReturnType<typeof useEditor>;
-  ydoc: YDoc;
-  nodeId: string;
-  userId: string;
-}
-
-const performUndo = async ({
-  editor,
-  ydoc,
-  nodeId,
-  userId,
-}: UndoRedoParams) => {
-  const beforeContent = ydoc.getObject<RichTextContent>();
-  const update = ydoc.undo();
-
-  if (!update) {
-    return;
-  }
-
-  const afterContent = ydoc.getObject<RichTextContent>();
-
-  if (isEqual(beforeContent, afterContent)) {
-    return;
-  }
-
-  const editorContent = buildEditorContent(nodeId, afterContent);
-  editor.chain().setContent(editorContent).run();
-
-  const result = await window.colanode.executeMutation({
-    type: 'document.update',
-    userId,
-    documentId: nodeId,
-    update: encodeState(update),
-  });
-
-  if (!result.success) {
-    toast.error(result.error.message);
-  }
-};
-
-const performRedo = async ({
-  editor,
-  ydoc,
-  nodeId,
-  userId,
-}: UndoRedoParams) => {
-  const beforeContent = ydoc.getObject<RichTextContent>();
-  console.log('beforeContent', beforeContent);
-  const update = ydoc.redo();
-  console.log('afterContent', ydoc.getObject<RichTextContent>());
-  console.log('update', update);
-
-  if (!update) {
-    return;
-  }
-
-  const afterContent = ydoc.getObject<RichTextContent>();
-
-  if (isEqual(beforeContent, afterContent)) {
-    return;
-  }
-
-  const editorContent = buildEditorContent(nodeId, afterContent);
-  editor.chain().setContent(editorContent).run();
-
-  const result = await window.colanode.executeMutation({
-    type: 'document.update',
-    userId,
-    documentId: nodeId,
-    update: encodeState(update),
-  });
-
-  if (!result.success) {
-    toast.error(result.error.message);
-  }
-};
-
 export const DocumentEditor = ({
   node,
   state,
@@ -197,7 +122,6 @@ export const DocumentEditor = ({
   const hasPendingChanges = useRef(false);
   const revisionRef = useRef(state?.revision ?? 0);
   const ydocRef = useRef<YDoc>(buildYDoc(state, updates));
-  const editorRef = useRef<ReturnType<typeof useEditor>>(null);
 
   const debouncedSave = useMemo(
     () =>
@@ -283,6 +207,8 @@ export const DocumentEditor = ({
         }),
         TaskListNode,
         TaskItemNode,
+        ToggleListNode,
+        ToggleItemNode,
         TableNode,
         TableRowNode,
         TableCellNode,
@@ -310,6 +236,7 @@ export const DocumentEditor = ({
             DatabaseCommand,
             DividerCommand,
             TodoCommand,
+            ToggleListCommand,
             FileCommand,
             FolderCommand,
           ],
@@ -339,7 +266,6 @@ export const DocumentEditor = ({
           if (!editorRef.current) {
             return false;
           }
-
           if (event.key === 'z' && event.metaKey && !event.shiftKey) {
             event.preventDefault();
             performUndo({
@@ -348,7 +274,6 @@ export const DocumentEditor = ({
               nodeId: node.id,
               userId: workspace.userId,
             });
-            return true;
           }
           if (event.key === 'z' && event.metaKey && event.shiftKey) {
             event.preventDefault();
@@ -358,7 +283,6 @@ export const DocumentEditor = ({
               nodeId: node.id,
               userId: workspace.userId,
             });
-            return true;
           }
           if (event.key === 'y' && event.metaKey) {
             event.preventDefault();
@@ -368,7 +292,6 @@ export const DocumentEditor = ({
               nodeId: node.id,
               userId: workspace.userId,
             });
-            return true;
           }
         },
       },
@@ -430,9 +353,75 @@ export const DocumentEditor = ({
     }
   }, [state, updates, editor]);
 
-  // Keep editorRef updated so handleKeyDown can access the current editor
+    // Keep editorRef updated so handleKeyDown can access the current editor
   editorRef.current = editor;
 
+  const undo = useCallback(async () => {
+    if (!editor) {
+      return;
+    }
+
+    const beforeContent = ydocRef.current.getObject<RichTextContent>();
+    const update = ydocRef.current.undo();
+
+    if (!update) {
+      return;
+    }
+
+    const afterContent = ydocRef.current.getObject<RichTextContent>();
+
+    if (isEqual(beforeContent, afterContent)) {
+      return;
+    }
+
+    const editorContent = buildEditorContent(node.id, afterContent);
+    editor.chain().setContent(editorContent).run();
+
+    const result = await window.colanode.executeMutation({
+      type: 'document.update',
+      userId: workspace.userId,
+      documentId: node.id,
+      update: encodeState(update),
+    });
+
+    if (!result.success) {
+      toast.error(result.error.message);
+    }
+  }, [node.id, editor]);
+
+  const redo = useCallback(async () => {
+    if (!editor) {
+      return;
+    }
+
+    const beforeContent = ydocRef.current.getObject<RichTextContent>();
+    const update = ydocRef.current.redo();
+
+    if (!update) {
+      return;
+    }
+
+    const afterContent = ydocRef.current.getObject<RichTextContent>();
+
+    if (isEqual(beforeContent, afterContent)) {
+      return;
+    }
+
+    const editorContent = buildEditorContent(node.id, afterContent);
+    editor.chain().setContent(editorContent).run();
+
+    const result = await window.colanode.executeMutation({
+      type: 'document.update',
+      userId: workspace.userId,
+      documentId: node.id,
+      update: encodeState(update),
+    });
+
+    if (!result.success) {
+      toast.error(result.error.message);
+    }
+  }, [node.id, editor]);
+
   return (
     <>
       {editor && canEdit && (
@@ -444,4 +433,4 @@ export const DocumentEditor = ({
       <EditorContent editor={editor} />
     </>
   );
-};
+};
diff --git a/packages/ui/src/editor/classes.tsx b/packages/ui/src/editor/classes.tsx
@@ -26,4 +26,6 @@ export const defaultClasses = {
   tableCell: 'flex p-1 px-2 items-center',
   tableHeaderWrapper: 'border',
   tableHeader: 'flex p-1 px-2 items-center font-semibold bg-muted',
-};
+  toggleList: 'list-none pl-0 my-1',
+  toggleItem: 'my-0.5',
+};
diff --git a/packages/ui/src/editor/commands/index.tsx b/packages/ui/src/editor/commands/index.tsx
@@ -15,6 +15,7 @@ import { PageCommand } from '@colanode/ui/editor/commands/page';
 import { ParagraphCommand } from '@colanode/ui/editor/commands/paragraph';
 import { TableCommand } from '@colanode/ui/editor/commands/table';
 import { TodoCommand } from '@colanode/ui/editor/commands/todo';
+import { ToggleListCommand } from '@colanode/ui/editor/commands/toggle-list';
 
 export type { EditorCommand, EditorCommandProps };
 
@@ -33,6 +34,7 @@ export {
   ParagraphCommand,
   TableCommand,
   TodoCommand,
+  ToggleListCommand,
   DatabaseCommand,
   DatabaseInlineCommand,
-};
+};
diff --git a/packages/ui/src/editor/commands/toggle-list.tsx b/packages/ui/src/editor/commands/toggle-list.tsx
@@ -0,0 +1,29 @@
+import { ChevronRight } from 'lucide-react';
+
+import { EditorCommand } from '@colanode/client/types';
+
+export const ToggleListCommand: EditorCommand = {
+  key: 'toggle-list',
+  name: 'Toggle List',
+  description: 'Insert a toggle list',
+  keywords: ['toggle', 'collapsible', 'expand', 'collapse'],
+  icon: ChevronRight,
+  disabled: false,
+  handler: ({ editor, range }) => {
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .insertContent({
+        type: 'toggleList',
+        content: [
+          {
+            type: 'toggleItem',
+            attrs: { expanded: false },
+            content: [{ type: 'paragraph' }],
+          },
+        ],
+      })
+      .run();
+  },
+};
diff --git a/packages/ui/src/editor/extensions/index.tsx b/packages/ui/src/editor/extensions/index.tsx
@@ -42,6 +42,8 @@ import { TableHeaderNode } from '@colanode/ui/editor/extensions/table-header';
 import { TableRowNode } from '@colanode/ui/editor/extensions/table-row';
 import { TaskItemNode } from '@colanode/ui/editor/extensions/task-item';
 import { TaskListNode } from '@colanode/ui/editor/extensions/task-list';
+import { ToggleItemNode } from '@colanode/ui/editor/extensions/toggle-item';
+import { ToggleListNode } from '@colanode/ui/editor/extensions/toggle-list';
 import { TempFileNode } from '@colanode/ui/editor/extensions/temp-file';
 import { TrailingNode } from '@colanode/ui/editor/extensions/trailing-node';
 
@@ -82,6 +84,8 @@ export {
   TableCellNode,
   TaskItemNode,
   TaskListNode,
+  ToggleItemNode,
+  ToggleListNode,
   TextNode,
   TrailingNode,
   UnderlineMark,
@@ -91,4 +95,4 @@ export {
   HardBreakNode,
   ParserExtension,
   Markdown,
-};
+};
diff --git a/packages/ui/src/editor/extensions/list-keymap.tsx b/packages/ui/src/editor/extensions/list-keymap.tsx
@@ -10,5 +10,9 @@ export const ListKeymapExtension = ListKeymap.configure({
       itemName: 'taskItem',
       wrapperNames: ['taskList'],
     },
+    {
+      itemName: 'toggleItem',
+      wrapperNames: ['toggleList'],
+    },
   ],
-});
+});