editor: fix crash on adding a task list

packages/editor/src/extensions/react/react-node-view.tsx

@@ -159,6 +159,7 @@ export class ReactNodeView<P extends ReactNodeViewProps> implements NodeView {
       <EmotionThemeProvider scope="editor" injectCssVars={false}>
         <this.options.component
           {...props}
+          pos={this.getPos()}
           editor={this.editor}
           getPos={this.getPos}
           node={this.node}

packages/editor/src/extensions/react/react-portal-provider.tsx

@@ -51,7 +51,8 @@ export class PortalProviderAPI extends EventDispatcher {
 
   render(
     children: () => React.ReactChild | JSX.Element | null,
-    container: HTMLElement
+    container: HTMLElement,
+    callback?: () => void
   ) {
     if (!this.context) return;
 
@@ -63,7 +64,8 @@ export class PortalProviderAPI extends EventDispatcher {
     unstable_renderSubtreeIntoContainer(
       this.context,
       wrappedChildren,
-      container
+      container,
+      callback
     );
   }
 

packages/editor/src/extensions/react/types.ts

@@ -44,6 +44,7 @@ export type ContentDOM =
   | undefined;
 
 export type ReactNodeViewProps<TAttributes = Attrs> = {
+  pos: number | undefined;
   getPos: GetPosNode;
   node: NodeWithAttrs<TAttributes>;
   editor: Editor;

packages/editor/src/extensions/task-item/component.tsx

@@ -85,7 +85,7 @@ export function TaskItemComponent(
             opacity: [1, 1, 0],
             alignSelf: "start",
             bg: "transparent",
-            mt: "0.36ch",
+            mt: isMobile ? "0.20ch" : "0.36ch",
             cursor: "grab",
             mx: 1,
             fontFamily: "inherit"
@@ -104,7 +104,7 @@ export function TaskItemComponent(
           borderRadius: "default",
           alignSelf: "start",
           p: "1px",
-          mt: "0.40ch",
+          mt: isMobile ? "0.20ch" : "0.36ch",
           marginInlineEnd: 1,
           cursor: editor.isEditable ? "pointer" : "unset",
           ":hover": isMobile
@@ -137,13 +137,6 @@ export function TaskItemComponent(
             textDecorationLine: checked ? "line-through" : "none",
             opacity: checked ? 0.8 : 1
           },
-          // FIXME: this is quite fragile and will break if the structure
-          // changes. We should probably find a better & more robust
-          // solution for this.
-          "> .taskitem-content-wrapper > p:hover ~ div > div.task-list-tools .toggleSublist":
-            {
-              opacity: 1
-            },
           flex: 1,
           mt: ["3px", "3px", 0],
           ml: ["2px", "2px", 0]

packages/editor/src/extensions/task-list/component.tsx

@@ -32,15 +32,18 @@ export function TaskListComponent(
   props: ReactNodeViewProps<TaskListAttributes>
 ) {
   // const isMobile = useIsMobile();
-  const { editor, getPos, node, updateAttributes, forwardRef } = props;
+  const { editor, getPos, node, updateAttributes, forwardRef, pos } = props;
   const taskItemType = getNodeType(TaskItemNode.name, editor.schema);
   const { title, textDirection } = node.attrs;
   const [stats, setStats] = useState({ checked: 0, total: 0, percentage: 0 });
 
   const getParent = useCallback(() => {
-    const pos = editor.state.doc.resolve(getPos());
-    return findParentNodeOfTypeClosestToPos(pos, taskItemType);
-  }, [editor.state.doc, getPos, taskItemType]);
+    if (pos === undefined) return;
+    return findParentNodeOfTypeClosestToPos(
+      editor.state.doc.resolve(pos),
+      taskItemType
+    );
+  }, [editor.state.doc, pos, taskItemType]);
 
   const isNested = useMemo(() => {
     return !!getParent();