perf: reduce widget render overhead

packages/widgets/src/notebook/notebook.tsx

@@ -874,27 +874,30 @@ function TaskListToggle() {
   );
 }
 
-function ListIndentIncrease() {
+function useActiveListItemType() {
   const { editor } = useRichTextEditorContext();
   const [itemType, setItemType] = useState("listItem");
+
+  useEffect(() => {
+    if (!editor) return;
+    const updateItemType = () => setItemType(editor.isActive("taskItem") ? "taskItem" : "listItem");
+    updateItemType();
+    editor.on("selectionUpdate", updateItemType);
+    return () => {
+      editor.off("selectionUpdate", updateItemType);
+    };
+  }, [editor]);
+
+  return { editor, itemType };
+}
+
+function ListIndentIncrease() {
+  const { editor, itemType } = useActiveListItemType();
   const tControls = useScopedI18n("widget.notebook.controls");
   const handleIncreaseIndent = useCallback(() => {
     editor?.chain().focus().sinkListItem(itemType).run();
   }, [editor, itemType]);
 
-  useEffect(() => {
-    if (!editor) return;
-
-    const handleSelectionUpdate = ({ editor: updatedEditor }: { editor: Editor }) => {
-      setItemType(updatedEditor.isActive("taskItem") ? "taskItem" : "listItem");
-    };
-
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor]);
-
   return (
     <RichTextEditor.Control
       title={tControls("increaseIndent")}
@@ -907,27 +910,13 @@ function ListIndentIncrease() {
 }
 
 function ListIndentDecrease() {
-  const { editor } = useRichTextEditorContext();
-  const [itemType, setItemType] = useState("listItem");
+  const { editor, itemType } = useActiveListItemType();
   const tControls = useScopedI18n("widget.notebook.controls");
 
   const handleDecreaseIndent = useCallback(() => {
     editor?.chain().focus().liftListItem(itemType).run();
   }, [editor, itemType]);
 
-  useEffect(() => {
-    if (!editor) return;
-
-    const handleSelectionUpdate = ({ editor: updatedEditor }: { editor: Editor }) => {
-      setItemType(updatedEditor.isActive("taskItem") ? "taskItem" : "listItem");
-    };
-
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor]);
-
   return (
     <RichTextEditor.Control
       title={tControls("decreaseIndent")}