add: note preview full-height

addon/chrome/content/icons/full-16.svg

@@ -0,0 +1,6 @@
+<svg t="1712588638016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4980"
+    width="16" height="16">
+    <path
+        d="M848 128H608c-17.67 0-32 14.33-32 32s14.33 32 32 32h178.75L553.38 425.38c-12.5 12.5-12.5 32.75 0 45.25 6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38L832 237.25V416c0 17.67 14.33 32 32 32s32-14.33 32-32V176c0-26.47-21.53-48-48-48zM425.38 553.38L192 786.75V608c0-17.67-14.33-32-32-32s-32 14.33-32 32v240c0 26.47 21.53 48 48 48h240c17.67 0 32-14.33 32-32s-14.33-32-32-32H237.25l233.38-233.38c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.49-45.25 0.01z"
+        fill="context-fill" p-id="4981"></path>
+</svg>

addon/chrome/content/styles/workspace.css

@@ -11,10 +11,7 @@ bn-workspace #__addonRef__-editor-main #links-container,
   display: none;
 }
 
-.bn-note-preview {
-  height: 450px;
-}
-
 .bn-note-preview iframe {
+  height: var(--details-height, 450px);
   border-radius: 8px;
 }

addon/locale/en-US/notePreview.ftl

@@ -6,3 +6,5 @@ note-preview-open =
     .tooltiptext = Open note
 note-preview-close =
     .tooltiptext = Close
+note-preview-full =
+    .tooltiptext = Toggle full height

addon/locale/it-IT/notePreview.ftl

@@ -6,3 +6,5 @@ note-preview-open =
     .tooltiptext = Open note
 note-preview-close =
     .tooltiptext = Close
+note-preview-full =
+    .tooltiptext = Toggle full height

addon/locale/ru-RU/notePreview.ftl

@@ -6,3 +6,5 @@ note-preview-open =
     .tooltiptext = Open note
 note-preview-close =
     .tooltiptext = Close
+note-preview-full =
+    .tooltiptext = Toggle full height

addon/locale/tr-TR/notePreview.ftl

@@ -6,3 +6,5 @@ note-preview-open =
     .tooltiptext = Open note
 note-preview-close =
     .tooltiptext = Close
+note-preview-full =
+    .tooltiptext = Toggle full height

addon/locale/zh-CN/notePreview.ftl

@@ -6,3 +6,5 @@ note-preview-open =
     .tooltiptext = 打开笔记
 note-preview-close =
     .tooltiptext = 关闭
+note-preview-full =
+    .tooltiptext = 切换全屏高度

src/addon.ts

@@ -45,6 +45,9 @@ class Addon {
       };
     };
     notify: Array<Parameters<_ZoteroTypes.Notifier.Notify>>;
+    workspace: {
+      instances: Record<string, WeakRef<HTMLElement>>;
+    };
     imageViewer: {
       window?: Window;
       srcList: string[];
@@ -89,6 +92,9 @@ class Addon {
       diff: {},
     },
     notify: [],
+    workspace: {
+      instances: {},
+    },
     imageViewer: {
       window: undefined,
       srcList: [],

src/elements/workspace.ts

@@ -70,6 +70,8 @@ export class Workspace extends PluginCEBase {
     // For note preview section enabled decision
     this.dataset.uid = Zotero.Utilities.randomString(8);
 
+    this._addon.data.workspace.instances[this.dataset.uid] = new WeakRef(this);
+
     this._outline = this._queryID("left-container") as unknown as OutlinePane;
     this._editorElement = this._queryID("editor-main") as EditorElement;
     this._outline._editorElement = this._editorElement;

src/modules/workspace/preview.ts

@@ -1,5 +1,6 @@
 import { config } from "../../../package.json";
 import { waitUtilAsync } from "../../utils/wait";
+import { getWorkspaceByUID } from "../../utils/workspace";
 
 export function openNotePreview(
   noteItem: Zotero.Item,
@@ -40,6 +41,36 @@ export function openNotePreview(
           Zotero.ItemPaneManager.unregisterSection(key || "");
         },
       },
+      {
+        type: "fullHeight",
+        icon: `chrome://${config.addonRef}/content/icons/full-16.svg`,
+        l10nID: `${config.addonRef}-note-preview-full`,
+        onClick: ({ body }) => {
+          const iframe = body.querySelector("iframe");
+          const details = body.closest("bn-details");
+          const head = body
+            .closest("item-pane-custom-section")
+            ?.querySelector(".head");
+          const heightKey = "--details-height";
+          if (iframe?.style.getPropertyValue(heightKey)) {
+            iframe.style.removeProperty(heightKey);
+            // @ts-ignore
+            if (details.pinnedPane === key) {
+              // @ts-ignore
+              details.pinnedPane = "";
+            }
+          } else {
+            iframe?.style.setProperty(
+              heightKey,
+              `${details!.clientHeight - head!.clientHeight - 8}px`,
+            );
+            // @ts-ignore
+            details.pinnedPane = key;
+            // @ts-ignore
+            details.scrollToPane(key);
+          }
+        },
+      },
     ],
     onItemChange: ({ body, setEnabled }) => {
       if (
@@ -82,6 +113,14 @@ export function openNotePreview(
     },
   });
 
+  const workspace = getWorkspaceByUID(workspaceUID);
+  setTimeout(
+    () =>
+      // @ts-ignore
+      workspace?.querySelector("bn-details")?.scrollToPane(key),
+    500,
+  );
+
   if (!key) {
     scrollPreviewEditorTo(noteItem, workspaceUID, options);
   }
@@ -95,8 +134,10 @@ function scrollPreviewEditorTo(
     sectionName?: string;
   } = {},
 ) {
-  const editor = document.querySelector(
-    `bn-workspace[data-uid="${workspaceUID}"] note-editor[data-id="${item.id}"]`,
+  const workspace = getWorkspaceByUID(workspaceUID);
+  if (!workspace) return;
+  const editor = workspace.querySelector(
+    `note-editor[data-id="${item.id}"]`,
   ) as EditorElement;
   if (!editor) return;
   if (typeof options.lineIndex === "number") {

src/utils/workspace.ts

@@ -4,3 +4,12 @@ export enum OutlineType {
   mindMap,
   bubbleMap,
 }
+
+export function getWorkspaceByUID(uid: string): HTMLElement | undefined {
+  const workspace = addon.data.workspace.instances[uid]?.deref();
+  if (!workspace?.ownerDocument) {
+    delete addon.data.workspace.instances[uid];
+    return undefined;
+  }
+  return workspace;
+}