fix: registerLibraryTabPanel and registerReaderTabPanel

addon/locale/en-US/mainWindow.ftl

@@ -0,0 +1,10 @@
+item-section-example1-head-text =
+    .label = Plugin Template: Item Info
+item-section-example1-sidenav-tooltip =
+    .tooltiptext = This is Plugin Template section (item info)
+item-section-example2-head-text =
+    .label = Plugin Template: Reader [{$status}]
+item-section-example2-sidenav-tooltip =
+    .tooltiptext = This is Plugin Template section (reader)
+item-section-example2-button-tooltip =
+    .tooltiptext = Unregister this section

addon/locale/zh-CN/mainWindow.ftl

@@ -0,0 +1,10 @@
+item-section-example1-head-text =
+    .label = 插件模板: 条目信息
+item-section-example1-sidenav-tooltip =
+    .tooltiptext = 这是插件模板面板(条目信息)
+item-section-example2-head-text =
+    .label = 插件模板: 阅读器[{$status}]
+item-section-example2-sidenav-tooltip =
+    .tooltiptext = 这是插件模板面板(阅读器)
+item-section-example2-button-tooltip =
+    .tooltiptext = 移除此面板

package.json

@@ -32,22 +32,22 @@
   },
   "homepage": "https://github.com/windingwind/zotero-addon-template#readme",
   "dependencies": {
-    "zotero-plugin-toolkit": "^2.3.15"
+    "zotero-plugin-toolkit": "^2.3.29"
   },
   "devDependencies": {
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.12.8",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/parser": "^7.8.0",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "compressing": "^1.10.0",
-    "esbuild": "^0.20.1",
+    "esbuild": "^0.20.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
-    "release-it": "^17.0.1",
+    "release-it": "^17.2.1",
-    "replace-in-file": "^7.0.2",
+    "replace-in-file": "^7.1.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
-    "zotero-types": "^1.3.10"
+    "zotero-types": "^1.3.24"
   },
   "eslintConfig": {
     "env": {

src/hooks.ts

@@ -39,6 +39,9 @@ async function onMainWindowLoad(win: Window): Promise<void> {
   // Create ztoolkit for every window
   addon.data.ztoolkit = createZToolkit();
 
+  // @ts-ignore
+  window.MozXULElement.insertFTLIfNeeded(`${config.addonRef}-mainWindow.ftl`);
+
   const popupWin = new ztoolkit.ProgressWindow(config.addonName, {
     closeOnClick: true,
     closeTime: -1,
@@ -72,7 +75,7 @@ async function onMainWindowLoad(win: Window): Promise<void> {
 
   UIExampleFactory.registerLibraryTabPanel();
 
-  await UIExampleFactory.registerReaderTabPanel();
+  UIExampleFactory.registerReaderTabPanel();
 
   PromptExampleFactory.registerNormalCommandExample();
 

src/modules/examples.ts

@@ -89,7 +89,7 @@ export class KeyExampleFactory {
     // Register an event key for Alt+L
     ztoolkit.Keyboard.register((ev, keyOptions) => {
       ztoolkit.log(ev, keyOptions.keyboard);
-      if (keyOptions.keyboard.equals("shift,l")) {
+      if (keyOptions.keyboard?.equals("shift,l")) {
         addon.hooks.onShortcuts("larger");
       }
       if (ev.shiftKey && ev.key === "S") {
@@ -280,118 +280,110 @@ export class UIExampleFactory {
 
   @example
   static registerLibraryTabPanel() {
-    const tabId = ztoolkit.LibraryTabPanel.register(
+    Zotero.ItemPaneManager.registerSection({
-      getString("tabpanel-lib-tab-label"),
+      paneID: "example",
-      (panel: XUL.Element, win: Window) => {
+      pluginID: config.addonID,
-        const elem = ztoolkit.UI.createElement(win.document, "vbox", {
+      header: {
-          children: [
+        l10nID: `${config.addonRef}-item-section-example1-head-text`,
-            {
+        icon: "chrome://zotero/skin/16/universal/book.svg",
-              tag: "h2",
+      },
-              properties: {
+      sidenav: {
-                innerText: "Hello World!",
+        l10nID: `${config.addonRef}-item-section-example1-sidenav-tooltip`,
-              },
+        icon: "chrome://zotero/skin/20/universal/save.svg",
-            },
+      },
-            {
+      onRender: ({ body, item, editable, tabType }) => {
-              tag: "div",
+        body.textContent = JSON.stringify({
-              properties: {
+          id: item?.id,
-                innerText: "This is a library tab.",
+          editable,
-              },
+          tabType,
-            },
-            {
-              tag: "button",
-              namespace: "html",
-              properties: {
-                innerText: "Unregister",
-              },
-              listeners: [
-                {
-                  type: "click",
-                  listener: () => {
-                    ztoolkit.LibraryTabPanel.unregister(tabId);
-                  },
-                },
-              ],
-            },
-          ],
         });
-        panel.append(elem);
       },
-      {
+    });
-        targetIndex: 1,
-      },
-    );
   }
 
   @example
   static async registerReaderTabPanel() {
-    const tabId = await ztoolkit.ReaderTabPanel.register(
+    Zotero.ItemPaneManager.registerSection({
-      getString("tabpanel-reader-tab-label"),
+      paneID: "reader-example",
-      (
+      pluginID: config.addonID,
-        panel: XUL.TabPanel | undefined,
+      header: {
-        deck: XUL.Deck,
+        l10nID: `${config.addonRef}-item-section-example2-head-text`,
-        win: Window,
+        // Optional
-        reader: _ZoteroTypes.ReaderInstance,
+        l10nArgs: `{"status": "Initialized"}`,
-      ) => {
+        // Can also have a optional dark icon
-        if (!panel) {
+        icon: "chrome://zotero/skin/16/universal/book.svg",
-          ztoolkit.log(
-            "This reader do not have right-side bar. Adding reader tab skipped.",
-          );
-          return;
-        }
-        ztoolkit.log(reader);
-        const elem = ztoolkit.UI.createElement(win.document, "vbox", {
-          id: `${config.addonRef}-${reader._instanceID}-extra-reader-tab-div`,
-          // This is important! Don't create content for multiple times
-          // ignoreIfExists: true,
-          removeIfExists: true,
-          children: [
-            {
-              tag: "h2",
-              properties: {
-                innerText: "Hello World!",
-              },
-            },
-            {
-              tag: "div",
-              properties: {
-                innerText: "This is a reader tab.",
-              },
-            },
-            {
-              tag: "div",
-              properties: {
-                innerText: `Reader: ${reader._title.slice(0, 20)}`,
-              },
-            },
-            {
-              tag: "div",
-              properties: {
-                innerText: `itemID: ${reader.itemID}.`,
-              },
-            },
-            {
-              tag: "button",
-              namespace: "html",
-              properties: {
-                innerText: "Unregister",
-              },
-              listeners: [
-                {
-                  type: "click",
-                  listener: () => {
-                    ztoolkit.ReaderTabPanel.unregister(tabId);
-                  },
-                },
-              ],
-            },
-          ],
-        });
-        panel.append(elem);
       },
-      {
+      sidenav: {
-        targetIndex: 1,
+        l10nID: `${config.addonRef}-item-section-example2-sidenav-tooltip`,
+        icon: "chrome://zotero/skin/20/universal/save.svg",
       },
-    );
+      // Optional
+      bodyXHTML: '<html:h1 id="test">THIS IS TEST</html:h1>',
+      // Optional, Called when the section is first created, must be synchronous
+      onInit: ({ item }) => {
+        ztoolkit.log("Section init!", item?.id);
+      },
+      // Optional, Called when the section is destroyed, must be synchronous
+      onDestroy: (props) => {
+        ztoolkit.log("Section destroy!");
+      },
+      // Optional, Called when the section data changes (setting item/mode/tabType/inTrash), must be synchronous. return false to cancel the change
+      onItemChange: ({ item, setEnabled, tabType }) => {
+        ztoolkit.log(`Section item data changed to ${item?.id}`);
+        setEnabled(tabType === "reader");
+        return true;
+      },
+      // Called when the section is asked to render, must be synchronous.
+      onRender: ({
+        body,
+        item,
+        setL10nArgs,
+        setSectionSummary,
+        setSectionButtonStatus,
+      }) => {
+        ztoolkit.log("Section rendered!", item?.id);
+        const title = body.querySelector("#test") as HTMLElement;
+        title.style.color = "red";
+        title.textContent = "LOADING";
+        setL10nArgs(`{ "status": "Loading" }`);
+        setSectionSummary("loading!");
+        setSectionButtonStatus("test", { hidden: true });
+      },
+      // Optional, can be asynchronous.
+      onAsyncRender: async ({
+        body,
+        item,
+        setL10nArgs,
+        setSectionSummary,
+        setSectionButtonStatus,
+      }) => {
+        ztoolkit.log("Section secondary render start!", item?.id);
+        await Zotero.Promise.delay(1000);
+        ztoolkit.log("Section secondary render finish!", item?.id);
+        const title = body.querySelector("#test") as HTMLElement;
+        title.style.color = "green";
+        title.textContent = item.getField("title");
+        setL10nArgs(`{ "status": "Loaded" }`);
+        setSectionSummary("rendered!");
+        setSectionButtonStatus("test", { hidden: false });
+      },
+      // Optional, Called when the section is toggled. Can happen anytime even if the section is not visible or not rendered
+      onToggle: ({ item }) => {
+        ztoolkit.log("Section toggled!", item?.id);
+      },
+      // Optional, Buttons to be shown in the section header
+      sectionButtons: [
+        {
+          type: "test",
+          icon: "chrome://zotero/skin/16/universal/empty-trash.svg",
+          l10nID: "make-it-red-item-section-example2-button-tooltip",
+          onClick: ({ item, paneID }) => {
+            ztoolkit.log("Section clicked!", item?.id);
+            Zotero.ItemPaneManager.unregisterSection(paneID);
+          },
+        },
+      ],
+    });
   }
 }