diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 8cb304e..8280445 100644 --- a/example/ios/Podfile.lock +++ b/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 diff --git a/src/RichText/Toolbar/actions.ts b/src/RichText/Toolbar/actions.ts index 883aefb..bd6ae59 100644 --- a/src/RichText/Toolbar/actions.ts +++ b/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, }, { diff --git a/src/bridges/tasklist.ts b/src/bridges/tasklist.ts index c25dd35..742f906 100644 --- a/src/bridges/tasklist.ts +++ b/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,12 +22,23 @@ 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, @@ -31,24 +46,47 @@ export const TaskListBridge = new BridgeExtension< 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; - } + } `, });