add: toggle pane buttons in workspace

addon/chrome/content/styles/workspace/workspace.css

@@ -11,6 +11,14 @@ bn-workspace #__addonRef__-editor-main #links-container,
  display: none;
 }
 
+bn-workspace #__addonRef__-center-container {
+ min-width: fit-content;
+}
+
+bn-workspace #__addonRef__-center-container #__addonRef__-editor-main {
+ min-width: 370px;
+}
+
 .bn-note-preview iframe {
  height: var(--details-height, 450px);
  border-radius: 8px;

src/elements/workspace/workspace.ts

@@ -1,4 +1,5 @@
 import { config } from "../../../package.json";
+import { ICONS } from "../../utils/config";
 import {
  getPrefJSON,
  registerPrefObserver,
@@ -108,6 +109,8 @@ export class Workspace extends PluginCEBase {
  this._persistState();
  });
 
+ this._initEditor();
+
  this.resizeOb = new ResizeObserver(() => {
  if (!this.editor) return;
  this._addon.api.editor.scroll(
@@ -160,14 +163,75 @@ export class Workspace extends PluginCEBase {
  }
  }
 
- toggleContext(open: boolean) {
+ toggleOutline(open?: boolean) {
+ if (typeof open !== "boolean") {
+ open = this._leftSplitter.getAttribute("state") === "collapsed";
+ }
+
+ this._leftSplitter.setAttribute("state", open ? "open" : "collapsed");
+ }
+
+ toggleContext(open?: boolean) {
  if (typeof open !== "boolean") {
  open = this._rightSplitter.getAttribute("state") === "collapsed";
  }
 
  this._rightSplitter.setAttribute("state", open ? "open" : "collapsed");
  }
 
+ async _initEditor() {
+ await waitUtilAsync(() => !!this._editorElement._editorInstance);
+ const editor = this._editorElement._editorInstance;
+ await editor._initPromise;
+
+ const _document = editor._iframeWindow.document;
+ const toolbar = _document.querySelector(".toolbar") as HTMLDivElement;
+
+ const toggleOutline = this._addon.data.ztoolkit.UI.createElement(
+ _document,
+ "button",
+ {
+ classList: ["toolbar-button"],
+ properties: {
+ innerHTML: ICONS.workspaceToggleLeft,
+ title: "Toggle left pane",
+ },
+ listeners: [
+ {
+ type: "click",
+ listener: (e) => {
+ this.toggleOutline();
+ },
+ },
+ ],
+ },
+ );
+
+ toolbar.querySelector(".start")?.append(toggleOutline);
+
+ const toggleContext = this._addon.data.ztoolkit.UI.createElement(
+ _document,
+ "button",
+ {
+ classList: ["toolbar-button"],
+ properties: {
+ innerHTML: ICONS.workspaceToggleRight,
+ title: "Toggle right pane",
+ },
+ listeners: [
+ {
+ type: "click",
+ listener: (e) => {
+ this.toggleContext();
+ },
+ },
+ ],
+ },
+ );
+
+ toolbar.querySelector(".end")?.prepend(toggleContext);
+ }
+
  _persistState() {
  const state = {
  leftState: this._leftSplitter.getAttribute("state"),

src/modules/editor/toolbar.ts

@@ -11,14 +11,16 @@ export async function initEditorToolbar(editor: Zotero.EditorInstance) {
  const noteItem = editor._item;
 
  const _document = editor._iframeWindow.document;
+ const toolbar = _document.querySelector(".toolbar") as HTMLDivElement;
+ // Link creator
  registerEditorToolbarElement(
  editor,
-  _document.querySelector(".toolbar") as HTMLDivElement,
+ toolbar,
  "start",
  ztoolkit.UI.createElement(_document, "button", {
  classList: ["toolbar-button"],
  properties: {
- innerHTML: ICONS.addon,
+ innerHTML: ICONS.linkCreator,
  title: "Link creator",
  },
  listeners: [
@@ -293,9 +295,17 @@ async function registerEditorToolbarElement(
  toolbar: HTMLDivElement,
  position: "start" | "middle" | "end",
  elem: HTMLElement,
+ after: boolean = false,
 ) {
  await editor._initPromise;
- toolbar.querySelector(`.${position}`)?.append(elem);
+ const target = toolbar.querySelector(`.${position}`);
+ if (target) {
+ if (after) {
+ target.append(elem);
+ } else {
+ target.prepend(elem);
+ }
+ }
  return elem;
 }