add: itemBox examples

README.md

@@ -76,6 +76,7 @@ Search `@example` in `src/examples.ts`. The examples are called in `src/hooks.ts
 - registerWindowMenuWithSeprator
 - registerExtraColumn
 - registerExtraColumnWithCustomCell
+- registerCustomItemBoxRow
 - registerCustomCellRenderer
 - registerLibraryTabPanel
 - registerReaderTabPanel

package.json

@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/windingwind/zotero-addon-template#readme",
   "dependencies": {
-    "zotero-plugin-toolkit": "^2.0.0"
+    "zotero-plugin-toolkit": "^2.0.1"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",

src/hooks.ts

@@ -50,7 +50,7 @@ async function onStartup() {
 
   UIExampleFactory.registerRightClickMenuPopup();
 
-  UIExampleFactory.registerWindowMenuWithSeprator();
+  UIExampleFactory.registerWindowMenuWithSeparator();
 
   await UIExampleFactory.registerExtraColumn();
 
@@ -58,6 +58,8 @@ async function onStartup() {
 
   await UIExampleFactory.registerCustomCellRenderer();
 
+  await UIExampleFactory.registerCustomItemBoxRow();
+
   UIExampleFactory.registerLibraryTabPanel();
 
   await UIExampleFactory.registerReaderTabPanel();

src/modules/examples.ts

@@ -233,7 +233,7 @@ export class UIExampleFactory {
   }
 
   @example
-  static registerWindowMenuWithSeprator() {
+  static registerWindowMenuWithSeparator() {
     ztoolkit.Menu.register("menuFile", {
       tag: "menuseparator",
     });
@@ -302,11 +302,49 @@ export class UIExampleFactory {
         return span;
       }
     );
-    // @ts-ignore
-    // This is a private method. Make it public in toolkit.
     await ztoolkit.ItemTree.refresh();
   }
 
+  @example
+  static async registerCustomItemBoxRow() {
+    await ztoolkit.ItemBox.register(
+      "itemBoxFieldEditable",
+      "Editable Custom Field",
+      (field, unformatted, includeBaseMapped, item, original) => {
+        return (
+          ztoolkit.ExtraField.getExtraField(item, "itemBoxFieldEditable") || ""
+        );
+      },
+      {
+        editable: true,
+        setFieldHook: (field, value, loadIn, item, original) => {
+          window.alert("Custom itemBox value is changed and saved to extra!");
+          ztoolkit.ExtraField.setExtraField(
+            item,
+            "itemBoxFieldEditable",
+            value
+          );
+          return true;
+        },
+        index: 1,
+      }
+    );
+
+    await ztoolkit.ItemBox.register(
+      "itemBoxFieldNonEditable",
+      "Non-Editable Custom Field",
+      (field, unformatted, includeBaseMapped, item, original) => {
+        return (
+          "[CANNOT EDIT THIS]" + (item.getField("title") as string).slice(0, 10)
+        );
+      },
+      {
+        editable: false,
+        index: 2,
+      }
+    );
+  }
+
   @example
   static registerLibraryTabPanel() {
     const tabId = ztoolkit.LibraryTabPanel.register(