Lift/Sink Task List Item

example/ios/Podfile.lock

@@ -1124,7 +1124,7 @@ PODS:
   - RNSVG (14.1.0):
     - React-Core
   - SocketRocket (0.6.1)
-  - tentap (0.4.48):
+  - tentap (0.5.2):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1400,7 +1400,7 @@ SPEC CHECKSUMS:
   RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  tentap: 0f954874f4c976e66198453369308bb0c91b5b77
+  tentap: cd55c8d991abd94603ec17e5304b62a1e36a4cf0
   Yoga: 9e6a04eacbd94f97d94577017e9f23b3ab41cf6c
 
 PODFILE CHECKSUM: 59f02bbde682eb22b765a58d4a0ce59d95964282

src/RichText/Toolbar/actions.ts

@@ -142,21 +142,27 @@ export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
     image: () => Images.bulletList,
   },
   {
+    // Regular list items (li) and task list items both use the
+    // same sink command and button just with a different parameter, so we check both states here
     onPress:
-      ({ editor }) =>
+      ({ editor, editorState }) =>
       () =>
-        editor.sink(),
+        editorState.canSink ? editor.sink() : editor.sinkTaskListItem(),
     active: () => false,
-    disabled: ({ editorState }) => !editorState.canSink,
+    disabled: ({ editorState }) =>
+      !editorState.canSink && !editorState.canSinkTaskListItem,
     image: () => Images.indent,
   },
   {
+    // Regular list items (li) and task list items both use the
+    // same lift command and button just with a different parameter, so we check both states here
     onPress:
-      ({ editor }) =>
+      ({ editor, editorState }) =>
       () =>
-        editor.lift(),
+        editorState.canLift ? editor.lift() : editor.liftTaskListItem(),
     active: () => false,
-    disabled: ({ editorState }) => !editorState.canLift,
+    disabled: ({ editorState }) =>
+      !editorState.canLift && !editorState.canLiftTaskListItem,
     image: () => Images.outdent,
   },
   {

src/bridges/tasklist.ts

@@ -5,10 +5,14 @@ import BridgeExtension from './base';
 type TaskListEditorState = {
   isTaskListActive: boolean;
   canToggleTaskList: boolean;
+  canLiftTaskListItem: boolean;
+  canSinkTaskListItem: boolean;
 };
 
 type TaskListEditorInstance = {
   toggleTaskList: () => void;
+  liftTaskListItem: () => void;
+  sinkTaskListItem: () => void;
 };
 
 declare module '../types/EditorBridge' {
@@ -18,37 +22,71 @@ declare module '../types/EditorBridge' {
 
 export enum TaskListEditorActionType {
   ToggleTaskList = 'toggle-task-list',
+  LiftTaskListItem = 'lift-task-list-item',
+  SinkTaskListItem = 'sink-task-list-item',
 }
 
-type TaskListMessage = {
-  type: TaskListEditorActionType.ToggleTaskList;
-  payload?: undefined;
-};
+type TaskListMessage =
+  | {
+      type: TaskListEditorActionType.ToggleTaskList;
+      payload?: undefined;
+    }
+  | {
+      type: TaskListEditorActionType.LiftTaskListItem;
+      payload?: undefined;
+    }
+  | {
+      type: TaskListEditorActionType.SinkTaskListItem;
+      payload?: undefined;
+    };
 
 export const TaskListBridge = new BridgeExtension<
   TaskListEditorState,
   TaskListEditorInstance,
   TaskListMessage
 >({
   tiptapExtension: TaskList,
-  tiptapExtensionDeps: [TaskItem],
+  tiptapExtensionDeps: [TaskItem.configure({ nested: true })],
   onBridgeMessage: (editor, message) => {
     if (message.type === TaskListEditorActionType.ToggleTaskList) {
       editor.chain().focus().toggleTaskList().run();
     }
-
+    if (message.type === TaskListEditorActionType.LiftTaskListItem) {
+      editor
+        .chain()
+        .focus()
+        .liftListItem(editor.state.schema.nodes.taskItem!.name)
+        .run();
+    }
+    if (message.type === TaskListEditorActionType.SinkTaskListItem) {
+      editor
+        .chain()
+        .focus()
+        .sinkListItem(editor.state.schema.nodes.taskItem!.name)
+        .run();
+    }
     return false;
   },
   extendEditorInstance: (sendBridgeMessage) => {
     return {
       toggleTaskList: () =>
         sendBridgeMessage({ type: TaskListEditorActionType.ToggleTaskList }),
+      liftTaskListItem: () =>
+        sendBridgeMessage({ type: TaskListEditorActionType.LiftTaskListItem }),
+      sinkTaskListItem: () =>
+        sendBridgeMessage({ type: TaskListEditorActionType.SinkTaskListItem }),
     };
   },
   extendEditorState: (editor) => {
     return {
       canToggleTaskList: editor.can().toggleTaskList(),
       isTaskListActive: editor.isActive('taskList'),
+      canLiftTaskListItem: editor
+        .can()
+        .liftListItem(editor.state.schema.nodes.taskItem!.name),
+      canSinkTaskListItem: editor
+        .can()
+        .sinkListItem(editor.state.schema.nodes.taskItem!.name),
     };
   },
   extendCSS: `
@@ -88,11 +126,6 @@ export const TaskListBridge = new BridgeExtension<
 
   ul[data-type="taskList"] li > div {
     flex: 1 1 auto;
-  }
-
-  ul[data-type="taskList"] li ul li,
-  ul[data-type="taskList"] li ol li {
-    display: list-item;
-  }
+  }  
   `,
 });