chore(publish): release v2.2.5

fix: #1265

.env.example

@@ -0,0 +1,29 @@
+# Usage: 
+# Copy this file as `.env` and fill in the variables below as instructed.
+
+# If you are developing more than one plugin, you can store the bin path and 
+# profile path in the system environment variables, which can be omitted here.
+
+# The path of the Zotero binary file.
+# The path delimiter should be escaped as `\\` for win32. 
+# The path is `*/Zotero.app/Contents/MacOS/zotero` for MacOS.
+ZOTERO_PLUGIN_ZOTERO_BIN_PATH = /path/to/zotero.exe
+
+# The path of the profile used for development.
+# Start the profile manager by `/path/to/zotero.exe -p` to create a profile for development.
+# @see https://www.zotero.org/support/kb/profile_directory
+ZOTERO_PLUGIN_PROFILE_PATH = /path/to/profile
+
+# The directory where the database is located.
+# If this field is kept empty, Zotero will start with the default data.
+# @see https://www.zotero.org/support/zotero_data
+ZOTERO_PLUGIN_DATA_DIR =
+
+# Custom commands to kill Zotero processes.
+# Commands for different platforms are already built into zotero-plugin, 
+# if the built-in commands are not suitable for your needs, please modify this variable.
+# ZOTERO_PLUGIN_KILL_COMMAND = 
+
+# GitHub Token
+# For release-it auto create release and upload assets
+# GITHUB_TOKEN =

.eslintrc.json

@@ -1,41 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "overrides": [],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["@typescript-eslint"],
-  "rules": {
-    "@typescript-eslint/ban-ts-comment": [
-      "warn",
-      {
-        "ts-expect-error": "allow-with-description",
-        "ts-ignore": "allow-with-description",
-        "ts-nocheck": "allow-with-description",
-        "ts-check": "allow-with-description"
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/no-explicit-any": ["off", { "ignoreRestArgs": true }],
-    "@typescript-eslint/no-non-null-assertion": "off"
-  },
-  "ignorePatterns": [
-    "**/build/**",
-    "**/dist/**",
-    "**/node_modules/**",
-    "**/scripts/**",
-    "**/*.js",
-    "**/*.bak"
-  ]
-}

.github/DISCUSSION_TEMPLATE/note-templates.yml

@@ -0,0 +1,70 @@
+title: "[Item/Text] Note Template Name"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to share this!
+        Before you submit, please change the title of this issue to the name of your note template.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Please add a description of this note template here.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: Please add screenshots of this note template here.
+    validations:
+      required: true
+  - type: input
+    id: z_version
+    attributes:
+      label: Test on Zotero version
+      description: Please provide the Zotero version you are using here. You can find this in the menu -> Help -> About Zotero.
+      placeholder: e.g. 6.0.30
+    validations:
+      required: true
+  - type: input
+    id: bn_version
+    attributes:
+      label: Test on Better Notes version
+      description: Please provide the Better Notes version you are using here. You can find this in the Settings -> Better Notes.
+      placeholder: e.g. 1.0.4
+    validations:
+      required: true
+  - type: dropdown
+    id: type
+    attributes:
+      label: Template Type
+      options:
+        - Item
+        - Text
+        - QuickInsert
+        - QuickImport
+        - QuickNote
+        - ExportMDFileName
+        - ExportMDFileHeader
+        - ExportMDFileContent
+    validations:
+      required: true
+  - type: textarea
+    id: data
+    attributes:
+      label: Template Share Code
+      description: |
+        Please paste template share code here.
+        Steps to get the template share code:
+        1. Open the template editor (menu -> Edit -> Note Template Editor)
+        2. Select the template you want to share
+        3. Click the "Options" button on the bottom right corner of the editor
+        4. Click "Copy template share code to clipboard". Paste the code here.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: more
+    attributes:
+      label: Anything else

.github/FUNDING.yml

@@ -6,8 +6,8 @@ open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: windingwind
+liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: ["https://paypal.me/windingwind?country.x=C2&locale.x=zh_XC"]
+custom: ["https://paypal.me/windingwind"]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,40 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[Bug]"
-labels: bug
-assignees: ""
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
-
-- OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
-
-- Device: [e.g. iPhone6]
-- OS: [e.g. iOS8.1]
-- Browser [e.g. stock browser, safari]
-- Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,74 @@
+name: Bug report
+description: File a bug / issue
+title: "[Bug] "
+labels:
+  - bug
+  # - Needs Triage
+assignees: windingwind
+body:
+  - type: checkboxes
+    id: check-search
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: checkboxes
+    id: check-version
+    attributes:
+      label: Are you using the latest Zotero and the latest plugin?
+      description: Only bug reports that can be reproduced on the latest Zotero and plugin will be considered.
+      options:
+        - label: I have confirmed I'm using the latest Zotero and the latest plugin
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Environment
+      description: |
+        examples:
+          - **OS**: Windows 11 22H2
+          - **Zotero Version**: 7.0.0
+          - **Plugin Version**: 1.0.0
+      value: |
+        - OS: 
+        - Zotero Version: 
+        - Plugin Version:
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: |
+        A clear and concise description of what the bug is.
+        If applicable, add screenshots and log to help explain your problem.
+    validations:
+      required: true
+
+  - type: textarea
+    id: debug-output
+    attributes:
+      label: Debug Output
+      description: |
+        Steps to get debug output:
+        1. Disable all other plugins, exit Zotero, and restart Zotero
+        2. menu -> `Help` -> `Debug Output` -> `View Output`
+        3. Do steps to reproduce the bug
+        4. In the debug output window, press `Ctrl/Cmd + S`
+        5. Upload the debug output here
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Note Template Community
+    url: https://github.com/windingwind/zotero-better-notes/discussions/categories/note-templates
+    about: Find & contribute note templates here.
+  - name: Better Notes Q&A
+    url: https://github.com/windingwind/zotero-better-notes/discussions/categories/q-a
+    about: Please ask and answer questions (not feature requests or bug reports) here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[Feature]"
-labels: enhancement
-assignees: ""
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,66 @@
+name: Feature request
+description: Suggest an idea for this project
+title: "[Feature] "
+labels:
+  - enhancement
+assignees: windingwind
+body:
+  - type: checkboxes
+    id: check-search
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for this feature request.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Environment
+      description: |
+        examples:
+          - **OS**: Windows 11 22H2
+          - **Zotero Version**: 7.0.0
+          - **Plugin Version**: 1.0.0
+      value: |
+        - OS: 
+        - Zotero Version: 
+        - Plugin Version:
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the feature request
+      value: |
+        **Is your feature request related to a problem? Please describe.**
+        A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+        **Why do you need this feature?**
+        A clear and concise description of why you need this feature.
+    validations:
+      required: false
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: Describe the solution you'd like
+      value: |
+        **The solution you'd like**
+        A clear and concise description of what you want to happen.
+
+        **Alternatives you've considered**
+        A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/note-template-issue.md

@@ -1,21 +0,0 @@
----
-name: Note Template Issue
-about: Need help with your custom note template
-title: "[Note Template]"
-labels: help wanted
-assignees: ""
----
-
-## Template Type
-
-Item, Note, Quick Import, Quick Insert, ...
-
-## Desired Template Performance
-
-Describe what you want.
-
-## Current Template
-
-```js
-// Paste your template here
-```

.github/renovate.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended",
+    ":semanticPrefixChore",
+    ":prHourlyLimitNone",
+    ":prConcurrentLimitNone",
+    ":enableVulnerabilityAlerts",
+    ":dependencyDashboard",
+    "schedule:weekends"
+  ],
+  "packageRules": [
+    {
+      "matchPackageNames": ["zotero-plugin-toolkit", "zotero-types"],
+      "automerge": true
+    }
+  ],
+  "git-submodules": {
+    "enabled": true
+  }
+}

.github/workflows/CI.yml

@@ -0,0 +1,79 @@
+name: CI
+
+on:
+  push:
+    tags:
+      - v**
+  pull_request:
+    branches:
+      - master
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install deps
+        run: npm install -f
+
+      - name: Test
+        run: npm test
+
+  # If it's triggered by a tag and the test job is successful, release the package
+  release:
+    runs-on: ubuntu-latest
+    needs: test
+    if: github.event_name == 'push' && needs.test.result == 'success'
+    env:
+      # Allow triggering other workflows
+      GITHUB_TOKEN: ${{ secrets.PAT }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install deps
+        run: npm install -f
+
+      - name: Build
+        run: |
+          npm run build
+
+      - name: Release to GitHub
+        run: |
+          npm run release
+          # cp build/update.json update.json
+          # cp build/update-beta.json update-beta.json
+          # git add update.json
+          # git add update-beta.json
+          # git commit -m 'chore(publish): synchronizing `update.json`'
+          # git push
+          sleep 1s
+
+      - name: Notify release
+        uses: apexskier/github-release-commenter@v1
+        continue-on-error: true
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          comment-template: |
+            :rocket: _This ticket has been resolved in {release_tag}. See {release_link} for release notes._

.github/workflows/issuebot.yml

@@ -2,6 +2,9 @@ name: Close inactive issues
 on:
   schedule:
     - cron: "30 1 * * *"
+  issues:
+    types:
+      - labeled
 
 jobs:
   close-issues:
@@ -21,3 +24,31 @@ jobs:
           days-before-pr-stale: -1
           days-before-pr-close: -1
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+  issue-invalid:
+    name: close invalid issue
+    if: github.event.label.name == 'invalid'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions-cool/issues-helper@v3
+        with:
+          actions: close-issue, create-comment
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. This issue is marked as `invalid` and closed. Please make sure you are reporting an issue and following the issue template.
+  issue-duplicate:
+    name: close duplicate issue
+    if: github.event.label.name == 'duplicate'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions-cool/issues-helper@v3
+        with:
+          actions: close-issue, create-comment
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. This issue is marked as `duplicate` and closed. Please make sure you have searched to see if an issue already exists for the bug you encountered.

.github/workflows/tgbot.yml

@@ -0,0 +1,19 @@
+name: Notify Telegram on Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  send_message:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send Telegram Message
+        run: |
+          msg_text='
+          📢 A new release of ${{ github.repository }} is published: ${{ github.event.release.tag_name }}
+          Release Name: ${{ github.event.release.name }}
+          Description: ${{ github.event.release.body }}
+          You can check updates in Zotero to get the latest version, or view on GitHub: ${{ github.event.release.html_url }}'
+          curl -s -X POST 'https://api.telegram.org/bot${{ secrets.TG_BOT_TOKEN }}/sendMessage' \
+          -d "chat_id=${{ secrets.TG_CHAT_ID }}&text=${msg_text}&reply_to_message_id=${{ secrets.TG_MSG_ID }}"

.gitignore

@@ -1,4 +1,9 @@
-**/build
+build
+logs
 node_modules
-package-lock.json
-zotero-cmd.json
+pnpm-lock.yaml
+yarn.lock
+zotero-cmd.json
+.DS_Store
+.env
+.scaffold

.prettierignore

@@ -0,0 +1,8 @@
+build
+logs
+node_modules
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+addon/chrome/content/lib/**
+# zotero-cmd.json

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "tabWidth": 2
-}

.release-it.json

@@ -1,13 +0,0 @@
-{
-  "npm": {
-    "publish": false
-  },
-  "github": {
-    "release": true,
-    "assets": ["build/*.xpi"]
-  },
-  "hooks": {
-    "after:bump": "npm run build",
-    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
-  }
-}

.vscode/launch.json

@@ -1,7 +1,4 @@
 {
-  // 使用 IntelliSense 了解相关属性。
-  // 悬停以查看现有属性的描述。
-  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
@@ -9,28 +6,14 @@
       "request": "launch",
       "name": "StartDev",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "start-watch"]
+      "runtimeArgs": ["run", "start"]
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Restart",
+      "name": "Lint",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "restart"]
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Reload",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "reload"]
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Restart in Prod Mode",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "restart-prod"]
+      "runtimeArgs": ["run", "lint"]
     }
   ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.vscode/toolkit.code-snippets

@@ -18,13 +18,13 @@
       "\tremoveIfExists: ${13:true},",
       "\tcustomCheck: (doc: Document, options: ElementOptions) => ${14:true},",
       "\tchildren: [$15]",
-      "}, ${16:container});"
-    ]
+      "}, ${16:container});",
+    ],
   },
   "appendElement - minimum": {
     "scope": "javascript,typescript",
     "prefix": "appendElement",
-    "body": "appendElement({ tag: '$1' }, $2);"
+    "body": "appendElement({ tag: '$1' }, $2);",
   },
   "register Notifier": {
     "scope": "javascript,typescript",
@@ -39,7 +39,7 @@
       "\t) => {",
       "\t\t$0",
       "\t}",
-      "});"
-    ]
-  }
+      "});",
+    ],
+  },
 }

README.md

@@ -2,12 +2,13 @@
 
 [![zotero target version](https://img.shields.io/badge/Zotero-7-green?style=flat-square&logo=zotero&logoColor=CC2936)](https://www.zotero.org)
 [![Using Zotero Plugin Template](https://img.shields.io/badge/Using-Zotero%20Plugin%20Template-blue?style=flat-square&logo=github)](https://github.com/windingwind/zotero-plugin-template)
+[![telegram group](https://img.shields.io/badge/Join%20Community-@bnzotero-blue?style=flat-square&logo=telegram)](https://t.me/boost/bnzotero)
 
 <div align=center><img src="./docs/res/teaser.png" width="800px"></img></div>
 
 Everything about note management. All in Zotero.
 
-Better Notes Handbook (outdated, for version<=0.8.9): [中文 (provide translation)](https://zotero.yuque.com/staff-gkhviy/better-notes/biigg4?)
+Join the community on Telegram: [@bnzotero](https://t.me/boost/bnzotero)
 
 ## 🧩 Outline
 
@@ -22,7 +23,7 @@ Better Notes Handbook (outdated, for version<=0.8.9): [中文 (provide translati
 <details style="text-indent: 2em">
 <summary>More</summary>
 
-[Getting Started with the _Workspace_](#getting-started-with-the-workspace)
+[Getting Started by Opening a Note Tab](#getting-started-by-opening-a-note-tab)
 
 [Note Editor](#note-editor)
 
@@ -36,6 +37,8 @@ Better Notes Handbook (outdated, for version<=0.8.9): [中文 (provide translati
 
 [GPT Integration](#gpt-integration)
 
+[Action Workflow](#action-workflow)
+
 [Other Features](#other-features)
 
 </details>
@@ -48,10 +51,10 @@ Better Notes Handbook (outdated, for version<=0.8.9): [中文 (provide translati
 
 [🔎 My Zotero Plugins](#-my-zotero-plugins)
 
-[💰 Sponsor Me](#-sponsor-me)
-
 [🫶 Sponsors](#-sponsors)
 
+[🤗 Contributors](#-contributors)
+
 ## 🧐 What is this?
 
 Better Notes (BN) is a plugin for [Zotero](https://zotero.org).
@@ -77,29 +80,23 @@ and:
 
 🗂️ Simplify and automate knowledge analysis with extensive _note templates_. With one click. [Learn more →](#note-template)
 
-🔄️ Keep in sync with your Markdown files. Two-way, automatically. [Learn more →](#syncing-note-🔄️-markdown)
+🔄️ Keep in sync with your Markdown files. Two-way, automatically. [Learn more →](#syncing-note-%EF%B8%8F-markdown)
 
 🖨️ Export notes to different formats: Markdown, Docx, PDF, and mind map. [Learn more →](#note-export)
 
-📝 Enhancements for Zotero's note editor.
+📝 Enhancements for Zotero's note editor with outline, link relation, view images.... Open as much note tabs/windows as you like!
 
 ## 👋 Install
 
-- Download the latest release (.xpi file) from the [Releases Page](https://github.com/windingwind/zotero-better-notes/releases)
-
-  <details style="text-indent: 2em">
-  <summary>More Versions</summary>
+- Download the plugin (.xpi file) from below.
 
+  - [Latest Version: 2.2.5](https://github.com/windingwind/zotero-better-notes/releases/download/v2.2.5/better-notes-for-zotero.xpi)
   - [Latest Stable](https://github.com/windingwind/zotero-better-notes/releases/latest)
-  - [v1.0.4](https://github.com/windingwind/zotero-better-notes/releases/tag/1.0.4) (last for Zotero 6)
-  - [v0.8.9](https://github.com/windingwind/zotero-better-notes/releases/tag/0.8.9) (last with auto-insert, tag-insert, math-ocr, for Zotero 6)
-  - [All Releases](https://github.com/windingwind/zotero-better-notes/releases) (including Beta)
-
-  </details>
+  - [All Releases](https://github.com/windingwind/zotero-better-notes/releases)
 
   _Note_: If you're using Firefox as your browser, right-click the `.xpi` and select "Save As.."
 
-- In Zotero click `Tools` in the top menu bar and then click `Addons`
+- In Zotero click `Tools` in the top menu bar and then click `Plugins`
 - Go to the Extensions page and then click the gear icon in the top right.
 - Select `Install Add-on from file`.
 - Browse to where you downloaded the `.xpi` file and select it.
@@ -111,59 +108,66 @@ BN offers a range of features that can be combined like Lego blocks to build you
 
 Start taking notes in Zotero with BN in **5 minutes**!
 
-### Getting Started with the _Workspace_
+### Getting Started by Opening a Note Tab
 
-The _workspace_ serves as the **central hub** where input flows (papers and annotations) converge with output flows (summaries and comparisons).
+> 💡 In the latest version, the workspace is no longer a thing. You can open an unlimited number of note tabs/windows, which is what we called `workspace` in the past.
 
-To open the _workspace_, click the <img src="addon/chrome/content/icons/favicon.png" alt="icon" width="20px"> button in the tabs bar.
+To open a note in a tab, double-click/press `Enter` on the item in the library, as you would do to open an attachment. Holding `shift` opens the note in a new window.
 
-<div align=center><img src="https://user-images.githubusercontent.com/33902321/236622132-5ed9bd23-3c0e-4775-b273-745824cc4b51.gif" width="800px"></img></div>
+<div align=center><img src="https://github.com/user-attachments/assets/0824293b-765d-47af-8815-66f009adab0e" width="800px"></img></div>
 
-The _workspace_ contains a default note called the _workspace note_. You can create a new note as the _workspace note_ if prompted on opening _workspace_.
-
-> 💡 How to set an existing note as the _workspace note_?
->
-> 1. In the library: select a note item and right-click
-> 2. In the note editor: click on the Tools button
->
-> You can change the _workspace note_ at any time.
-
-The _workspace_ allows you to take notes and write, just like you would in MS Word or a markdown editor (e.g., Obsidian).
-
-> **Explore the _Workspace_!**  
+> **Explore the Note Tab!**  
 > 💡 The layout from left to right is:
 >
 > - Outline
-> - _Workspace note_ editor (main editor)
-> - Note link preview (hidden by default)
-> - Reader notes pane (hidden by default)
->
-> 💡 To toggle these panes, hover the _workspace_ tab and click corresponding buttons.  
-> 💡 To open the _workspace_ in a new window, drag the _workspace_ tab.
+> - Note editor
+> - Context pane (tags, related, relation graph, in/outbound links)
 
 ### Note Editor
 
-The _workspace_ includes the note editor for the _workspace note_. You can use it to take notes and write summaries.
-
-> 💡 How to open note editor?
+> 💡 Where can I find the note editor?
 >
-> - In the library: click to open a note editor and double-click to open note editor in a standalone window.
-> - In the PDF reader: right-side bar
+> - In the note tab/window
+> - In the library: click to open a note editor in the item pane
+> - In the PDF reader: right-side context pane
 >
 > 💡 How to create a new note?  
-> Click the note icon in the library tools bar (the row under the tabs bar).
+> Click the note icon in the library tools bar (the row under the tabs bar), or from the menu - File
 
-<div align=center><img src="https://user-images.githubusercontent.com/33902321/236622355-2b8b2c00-a640-41fa-bb82-372fa10ecc64.png" width="400px"></img></div>
+<div align=center><img src="https://github.com/user-attachments/assets/ec2ba415-8ec9-450d-9d73-d24d177ccd13" width="400px"></img></div>
+
+#### Magic Key
+
+BN enhances the note editor with a _Magic Key_ command palette, which can be opened by typing `/` in the editor. You can type or use the arrow keys to navigate the commands, and press `Enter` to execute.
+
+<div align=center><img src="https://github.com/user-attachments/assets/bdbe244e-c120-4d9b-aa28-5285a25a723a" width="800px"></img></div>
+
+#### Note Link Preview
+
+BN enhances the note editor with link preview. Hover+Ctrl/Cmd or click the link to preview the linked note without leaving the current note.
+
+<div align=center><img width="400px" alt="image" src="https://github.com/user-attachments/assets/b29769a1-3436-42bd-8481-eee1c0b4896a"></div>
+
+#### Direct Markdown Paste
+
+BN supports direct markdown paste. You can paste markdown content into the note editor, and it will be converted to the rich text format automatically.
 
 ### Note Link
 
-To create a _note link_ between current note and the _workspace note_, simply click the ![icon](addon/chrome/content/icons/favicon.png) button in the title bar of current note editor.
+To create a _note link_ between the note you are editing and another note, click the <img src="addon/chrome/content/icons/favicon.png" width="20px"></img> button in the title bar of the note editor.
 
-<div align=center><img src="https://user-images.githubusercontent.com/33902321/236622693-f7c7c82f-7434-4dbf-baf3-d03a72eb51c5.png" width="800px"></img></div>
+<div align=center><img src="https://github.com/user-attachments/assets/e37a694b-613e-4242-9c14-d83708a3d1e7" width="800px"></img></div>
+
+> 💡 What's the difference between `Mention in` and `Link to`?
+>
+> `Mention in` will insert a link of the current note (from which you open the link creator) to another note (which you pick in the link creator), i.e. inbound link.
+> `Link to` will insert links of picked notes to the current note, i.e. outbound link.
+
+You can also manually copy the note link from the note editor menu.
 
 ### Note Template
 
-Still spending a lot of time writing summaries or doing copy-pasting while taking notes? Say hello to _Note Template_!
+Are you spending a lot of time writing summaries and copy-pasting while taking notes? Say hello to _Note Template_!
 
 _Note Template_ is designed for tasks like:
 
@@ -173,13 +177,13 @@ _Note Template_ is designed for tasks like:
 
 > 💡 Need help or looking for community templates? [See here →](https://github.com/windingwind/zotero-better-notes/discussions/categories/note-templates)
 >
-> 💡 Want to write/share your own templates?
+> 💡 Want to write/share your templates?
 >
 > [How to write →](docs/about-note-template.md#write-note-template)
 >
 > [How to share →](docs/about-note-template.md#share-your-template)
 
-<div align=center><img src="https://user-images.githubusercontent.com/33902321/236623159-8f67064b-1fab-4cf1-abf4-0c8243370a14.gif" width="800px"></img></div>
+<div align=center><img src="https://github.com/user-attachments/assets/62e1438f-7910-4f57-ad88-c6a41dd9addf" width="800px"></img></div>
 
 ### Syncing: Note 🔄️ Markdown
 
@@ -207,20 +211,22 @@ You can export your note to the following formats:
 
 Simply click on the corresponding export button in the toolbar and follow the prompts.
 
-### GPT Integration
+### LLM Integration
 
-The [Zotero-GPT](https://github.com/MuiseDestiny/zotero-gpt) plugin provides GPT Integration. If you also have Better Notes installed, you can wake up GPT pane in the _workspace_ note editor with `space` key.
+The [Zotero-GPT](https://github.com/MuiseDestiny/zotero-gpt) plugin provides GPT Integration. If you also have Better Notes installed, you can wake up its chatting pane in the note editor and insert/modify content in the note.
 
-You can:
+### Action Workflow
 
-- Ask GPT questions about current note
-- Summarize/fix spelling and grammar/translate/polish the selection
-- Accept suggestions/modifications from GPT with `enter` key.
+The [Actions & Tags](https://github.com/windingwind/zotero-actions-tags) plugin provides a powerful workflow engine for Zotero. If you also have Better Notes installed, you can use the following actions to automate note generation/editing/syncing/etc.:
+
+- [Auto-generate note from template when opening an item](https://github.com/windingwind/zotero-actions-tags/discussions/108)
+- [Auto-sync note when opening/creating an item](https://github.com/windingwind/zotero-actions-tags/discussions/140)
+- [More...](https://github.com/windingwind/zotero-actions-tags/discussions/categories/action-scripts)
 
 ### Other Features
 
 - Quick Note: convert annotation to note with one click.
-- Resize images with right-click menu.
+- Resize images with a right-click menu.
 - Preview images with double-click/ctrl-click.
 
 ## 🧲 API
@@ -233,13 +239,24 @@ BN provides APIs for other plugin developers in `Zotero.BetterNotes.api.${API_MO
 - `template`: Manipulate note templates
 - `$export`: Export note
 - `$import`: Import note
-- `editor`: Note editor APIs. Give your script the full control of contents in the note editor.
+- `editor`: Note editor APIs. Give your script full control of contents in the note editor.
+- `note`: Note APIs. Parse and manipulate note content.
+- `relation`: Note relation APIs. Get and set note relations.
+- `utils`: Utility functions.
+
+### Concepts about Note-Related APIs
+
+In Zotero, the content of a note is stored as rich text, while when a note is opened in the note editor, it is rendered by ProseMirror as HTML.
+
+Most of the time, it is recommended to use the `editor` API to interact with the content of the note, as it supports undo/redo and other features provided by editor. The `editor` API provides a set of powerful functions to analyze and manipulate the content in the note editor. Most of them needs an `editor` instance as the input, you can get the instance by calling `Zotero.BetterNotes.api.editor.getEditorInstance(noteId)`.
+
+However, if note is not opened in the editor, you cannot get the `editor` instance. In this case, you can use the `note` API to interact with the content of the note.
 
 ## 🔧 Development
 
 This plugin is built based on the [Zotero Plugin Template](https://github.com/windingwind/zotero-plugin-template). See the setup and debug details there.
 
-To startup, run
+To start, run
 
 ```bash
 git clone https://github.com/windingwind/zotero-better-notes.git
@@ -250,23 +267,31 @@ npm run build
 
 The plugin is built to `./builds/*.xpi`.
 
+To debug, run
+
+```bash
+npm run start
+```
+
+This will open a new Zotero instance with the plugin installed.
+
+To test the plugin, run
+
+```bash
+npm run test
+```
+
+This will run the tests in the `./test` directory.
+
 ## 🔔 Disclaimer
 
 Use this code under AGPL. No warranties are provided. Keep the laws of your locality in mind!
 
 ## 🔎 My Zotero Plugins
 
-- [Translate for Zotero](https://github.com/windingwind/zotero-pdf-translate): PDF translation for Zotero
-- [zotero-pdf-preview](https://github.com/windingwind/zotero-tag): PDF preview for Zotero
-- [zotero-tag](https://github.com/windingwind/zotero-tag): Automatically tag items/Batch tagging
-
-## 💰 Sponsor Me
-
-I'm windingwind, an active Zotero(https://www.zotero.org) plugin developer. Devoting to making reading papers easier.
-
-Sponsor me to buy a cup of coffee. I spend more than 24 hours every week coding, debugging, and replying to issues in my plugin repositories. The plugins are open-source and totally free.
-
-If you sponsor more than $10 a month, you can list your name/logo here and have priority for feature requests/bug fixes!
+- [Translate for Zotero](https://github.com/windingwind/zotero-pdf-translate): Translate PDF, EPub, webpage, metadata, annotations, notes to the target language.
+- [Actions & Tags for Zotero](https://github.com/windingwind/zotero-tag): Customize your Zotero workflow.
+- [Bionic for Zotero](https://github.com/windingwind/bionic-for-zotero): Bionic reading experience with Zotero.
 
 ## 🙌 Sponsors
 
@@ -275,3 +300,9 @@ Thanks
 and other anonymous sponsors!
 
 If you want to leave your name here, please email me or leave a message with the donation.
+
+## 🤗 Contributors
+
+<a href="https://github.com/windingwind/zotero-better-notes/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=windingwind/zotero-better-notes" />
+</a>

addon/bootstrap.js

@@ -37,13 +37,14 @@ async function startup({ id, version, resourceURI, rootURI }, reason) {
     `${rootURI}/chrome/content/scripts/__addonRef__.js`,
     ctx,
   );
+  await Zotero.__addonInstance__.hooks.onStartup();
 }
 
-function onMainWindowLoad({ win }) {
+function onMainWindowLoad({ window: win }) {
   Zotero.__addonInstance__.hooks.onMainWindowLoad(win);
 }
 
-function onMainWindowUnload({ win }) {
+function onMainWindowUnload({ window: win }) {
   Zotero.__addonInstance__.hooks.onMainWindowUnload(win);
 }
 

addon/chrome/content/bubbleMap.html

@@ -172,12 +172,12 @@
             ),
             $(go.Panel, "Auto"),
           );
-          window.parent.postMessage({ type: "ready" }, "*");
+          window.postMessage({ type: "ready" }, "*");
           getData();
         }
 
         function getData() {
-          window.parent.postMessage({ type: "getMindMapData" }, "*");
+          window.postMessage({ type: "getMindMapData" }, "*");
         }
 
         function setData(nodes) {
@@ -219,17 +219,16 @@
           var oldnode = adorn.adornedPart;
           var olddata = oldnode.data;
           if (olddata.noteLink) {
-            window.parent.postMessage(
+            window.postMessage(
               { type: "openNote", link: olddata.noteLink, id: olddata.key },
               "*",
             );
           } else {
-            window.parent.postMessage(
+            window.postMessage(
               {
                 type: "jumpNode",
                 lineIndex: olddata.lineIndex,
                 id: olddata.key,
-                workspaceType: window.workspaceType || "tab",
               },
               "*",
             );
@@ -243,12 +242,11 @@
             alert("Link cannot be edited in mind map");
             return false;
           }
-          window.parent.postMessage(
+          window.postMessage(
             {
               type: "editNode",
               lineIndex: data.lineIndex,
               text: data.text,
-              workspaceType: window.workspaceType || "tab",
             },
             "*",
           );
@@ -259,30 +257,31 @@
           switch (e.data.type) {
             case "setMindMapData":
               setData(e.data.nodes);
-              window.workspaceType = e.data.workspaceType;
               break;
             case "saveImage":
               const imgString = Diagram.makeImageData({
                 scale: 1,
               });
-              window.parent.postMessage(
+              window.postMessage(
                 {
                   type: "saveImageReturn",
                   image: imgString,
                 },
                 "*",
               );
+              break;
             case "saveSVG":
               const svgElement = Diagram.makeSvg({
                 scale: 1,
               });
-              window.parent.postMessage(
+              window.postMessage(
                 {
                   type: "saveSVGReturn",
                   image: svgElement.outerHTML,
                 },
                 "*",
               );
+              break;
             default:
               break;
           }

addon/chrome/content/docxExport.html

@@ -6,6 +6,10 @@
       src="chrome://__addonRef__/content/scripts/docxWorker.js"
       type="application/javascript"
     ></script>
+    <script
+      src="chrome://__addonRef__/content/lib/js/SaxonJS2.rt.js"
+      type="application/javascript"
+    ></script>
   </head>
   <body></body>
 </html>

addon/chrome/content/exportNotes.xhtml

@@ -0,0 +1,102 @@
+<?xml version="1.0"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://__addonRef__/content/styles/exportNotes.css" type="text/css"?>
+<!-- prettier-ignore -->
+<!DOCTYPE window>
+<window
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  id="bn-export-notes"
+  data-l10n-id="title"
+  windowtype="__addonRef__-export-notes"
+  persist="screenX screenY width height sizemode"
+  style="min-width: 10em"
+  drawintitlebar-platforms="mac"
+>
+  <xul:linkset>
+    <html:link rel="localization" href="browser/menubar.ftl" />
+    <html:link rel="localization" href="browser/browserSets.ftl" />
+    <html:link rel="localization" href="toolkit/global/textActions.ftl" />
+    <html:link rel="localization" href="zotero.ftl" />
+    <html:link rel="localization" href="__addonRef__-exportNotes.ftl" />
+  </xul:linkset>
+
+  <xul:commandset id="mainCommandSet">
+    <xul:command id="cmd_close" oncommand="window.close();" />
+  </xul:commandset>
+  <xul:keyset id="mainKeyset">
+    <xul:key
+      id="key_close"
+      data-l10n-id="close-shortcut"
+      command="cmd_close"
+      modifiers="accel"
+      reserved="true"
+    />
+  </xul:keyset>
+
+  <script src="chrome://zotero/content/include.js"></script>
+  <script src="chrome://zotero/content/titlebar.js"></script>
+  <script src="chrome://zotero/content/customElements.js"></script>
+  <script src="chrome://__addonRef__/content/scripts/exportNotes.js"></script>
+
+  <dialog
+    buttons="accept, cancel, extra1"
+    buttonlabelextra1="Use System Export..."
+  >
+    <vbox>
+      <hbox>
+        <label id="target" data-l10n-id="target"></label>
+      </hbox>
+      <hbox align="center">
+        <label data-l10n-id="format" for="format"></label>
+        <menulist id="format" native="true">
+          <menupopup>
+            <menuitem
+              value="markdown"
+              data-l10n-id="format-markdown"
+            ></menuitem>
+            <menuitem value="msword" data-l10n-id="format-msword"></menuitem>
+            <menuitem value="pdf" data-l10n-id="format-pdf"></menuitem>
+            <menuitem
+              value="freemind"
+              data-l10n-id="format-freemind"
+            ></menuitem>
+            <menuitem value="note" data-l10n-id="format-note"></menuitem>
+          </menupopup>
+        </menulist>
+      </hbox>
+      <vbox>
+        <radiogroup id="linkMode" orient="vertical">
+          <radio value="keep" data-l10n-id="links-keep"></radio>
+          <radio value="embed" data-l10n-id="links-embed"></radio>
+          <radio value="standalone" data-l10n-id="links-standalone"></radio>
+          <!-- <radio value="remove" data-l10n-id="links-remove"></radio> -->
+        </radiogroup>
+      </vbox>
+      <vbox id="markdown-options">
+        <checkbox
+          id="markdown-autoSync"
+          data-l10n-id="markdown-autoSync"
+          native="true"
+        ></checkbox>
+        <checkbox
+          id="markdown-withYAMLHeader"
+          data-l10n-id="markdown-withYAMLHeader"
+          native="true"
+        ></checkbox>
+        <checkbox
+          id="markdown-autoFilename"
+          data-l10n-id="markdown-autoFilename"
+          native="true"
+        ></checkbox>
+      </vbox>
+    </vbox>
+  </dialog>
+</window>

addon/chrome/content/icons/editor/blockMath.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <polygon
+        points="3.43 9.96 3.43 16.46 6.78 16.46 6.78 15.21 4.68 15.21 4.68 4.79 6.78 4.79 6.78 3.54 3.43 3.54 3.43 9.96"
+        style="stroke-width: 0px;" fill="currentColor" />
+    <polygon
+        points="16.57 10.04 16.57 3.54 13.22 3.54 13.22 4.79 15.32 4.79 15.32 15.21 13.22 15.21 13.22 16.46 16.57 16.46 16.57 10.04"
+        style="stroke-width: 0px;" fill="currentColor" />
+    <path
+        d="m6.23,12.33c0-.38.12-.69.36-.9.24-.22.5-.32.8-.32.21,0,.4.07.55.2.15.13.23.31.23.54,0,.51-.27.87-.81,1.07.2.17.42.26.65.26.4,0,.72-.24.96-.73.15-.27.39-1.07.71-2.4.33-1.34.49-2.13.49-2.37,0-.28-.08-.48-.24-.6-.16-.12-.35-.18-.56-.18-.4,0-.78.17-1.16.5-.38.33-.66.75-.84,1.25-.06.19-.12.31-.17.36-.05.05-.15.08-.3.09h-.08c-.28,0-.41-.08-.41-.25,0-.13.06-.33.19-.59.13-.26.31-.54.54-.84.23-.3.56-.56.98-.78.42-.22.86-.33,1.34-.33.88,0,1.53.29,1.97.87.55-.58,1.1-.87,1.65-.87.46,0,.86.13,1.21.38.35.26.53.61.53,1.05,0,.39-.12.69-.36.91s-.5.33-.8.33c-.22,0-.41-.07-.56-.21-.15-.14-.22-.32-.22-.54,0-.51.27-.87.82-1.07-.2-.17-.42-.26-.66-.26-.15,0-.29.03-.42.09s-.25.18-.35.35c-.11.17-.2.33-.27.49-.08.15-.16.39-.25.7-.09.31-.16.57-.21.79-.05.21-.13.53-.23.96-.1.43-.18.76-.25,1.01-.13.51-.2.88-.2,1.12,0,.28.08.48.25.6.17.12.36.19.57.19.4,0,.78-.17,1.16-.5.38-.33.66-.74.84-1.23.01-.02.02-.05.03-.1.01-.04.02-.07.03-.09s.02-.04.03-.07.02-.05.02-.06c0,0,.02-.03.03-.05s.03-.04.05-.04c.02,0,.04-.01.06-.02.02,0,.05-.02.07-.02h.2c.28,0,.41.08.41.24,0,.4-.29.92-.88,1.56-.59.65-1.31.97-2.16.97-.93,0-1.59-.29-2-.87h-.02c-.47.58-1.01.87-1.63.87-.45,0-.85-.13-1.2-.38-.35-.25-.53-.6-.53-1.05Z"
+        style="stroke-width: 0px;" fill="currentColor" />
+</svg>

addon/chrome/content/icons/editor/blockScript.svg

@@ -0,0 +1,6 @@
+<svg t="1728768259016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4687"
+    width="20" height="20">
+    <path
+        d="M181.333333 509.866667v332.8H352.64v-64H245.333333V245.333333h107.306667v-64H181.333333v328.533334z m672.597334 4.266666v-332.8H682.666667v64h107.306666v533.333334H682.666667v64H853.930667v-328.533334z m-397.568 223.061334l85.930666-214.826667 84.736-211.84-59.434666-23.765333-84.693334 211.84-85.930666 214.826666 59.392 23.765334z"
+        fill="currentColor" p-id="4688"></path>
+</svg>

addon/chrome/content/icons/editor/bold.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8V4.5V2H7.5H12C13.933 2 15.5 3.567 15.5 5.5C15.5 7.433 13.933 9 12 9C14.2091 9 16 10.7909 16 13C16 15.2091 14.2091 17 12 17H7.5H4V14.5V10.5V8ZM7.5 10.5V14.5H10.5C11.6046 14.5 12.5 13.6046 12.5 12.5C12.5 11.3954 11.6046 10.5 10.5 10.5H7.5ZM7.5 8V4.5H10.25C11.2165 4.5 12 5.2835 12 6.25C12 7.2165 11.2165 8 10.25 8H7.5Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/bullet.svg

@@ -0,0 +1,6 @@
+<svg t="1728768172242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4279"
+    width="20" height="20">
+    <path
+        d="M256 426.666667a85.333333 85.333333 0 1 0 0-170.666667 85.333333 85.333333 0 0 0 0 170.666667z m597.333333-53.333334h-379.264v-64H853.333333v64z m0 298.666667h-379.264v-64H853.333333v64zM341.333333 640a85.333333 85.333333 0 1 1-170.666666 0 85.333333 85.333333 0 0 1 170.666666 0z"
+        fill="currentColor" p-id="4280"></path>
+</svg>

addon/chrome/content/icons/editor/code.svg

@@ -0,0 +1,6 @@
+<svg t="1728768054402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3427"
+    width="20" height="20">
+    <path
+        d="M170.666667 170.666667h682.666666v64H170.666667V170.666667z m597.333333 234.666666H256a21.333333 21.333333 0 0 0-21.333333 21.333334v170.666666a21.333333 21.333333 0 0 0 21.333333 21.333334h512a21.333333 21.333333 0 0 0 21.333333-21.333334v-170.666666a21.333333 21.333333 0 0 0-21.333333-21.333334zM256 341.333333h512a85.333333 85.333333 0 0 1 85.333333 85.333334v170.666666a85.333333 85.333333 0 0 1-85.333333 85.333334H256a85.333333 85.333333 0 0 1-85.333333-85.333334v-170.666666a85.333333 85.333333 0 0 1 85.333333-85.333334z m597.333333 448H170.666667V853.333333h682.666666v-64z"
+        fill="currentColor" p-id="3428"></path>
+</svg>

addon/chrome/content/icons/editor/h1.svg

@@ -0,0 +1,6 @@
+<svg t="1728768084775" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633"
+    width="20" height="20">
+    <path
+        d="M469.333333 298.666667h85.333334v426.666666h-85.333334v-170.666666H298.666667v170.666666H213.333333V298.666667h85.333334v170.666666h170.666666V298.666667z m281.6 0c-25.6 38.4-64 72.533333-110.933333 85.333333v42.666667h85.333333v298.666666h85.333334V298.666667h-59.733334z"
+        fill="currentColor" p-id="3634"></path>
+</svg>

addon/chrome/content/icons/editor/h2.svg

@@ -0,0 +1,6 @@
+<svg t="1728768115138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3879"
+    width="20" height="20">
+    <path
+        d="M384 302.933333h85.333333v426.666667H384v-170.666667H213.333333v170.666667H128v-426.666667h85.333333v170.666667h170.666667v-170.666667z m341.333333 341.333334c21.333333-17.066667 25.6-25.6 46.933334-46.933334 17.066667-17.066667 34.133333-34.133333 51.2-55.466666 12.8-17.066667 25.6-34.133333 38.4-55.466667 8.533333-17.066667 12.8-34.133333 12.8-55.466667 0-17.066667-4.266667-38.4-12.8-55.466666-8.533333-17.066667-17.066667-29.866667-34.133334-42.666667-12.8-12.8-29.866667-21.333333-51.2-25.6-21.333333-8.533333-42.666667-8.533333-64-8.533333-17.066667 0-29.866667 0-46.933333 4.266666-12.8 4.266667-29.866667 8.533333-42.666667 12.8-12.8 4.266667-25.6 12.8-38.4 21.333334-12.8 8.533333-25.6 17.066667-34.133333 29.866666l51.2 51.2c12.8-12.8 25.6-21.333333 42.666667-29.866666 17.066667-8.533333 29.866667-12.8 51.2-12.8s38.4 4.266667 55.466666 17.066666c12.8 12.8 21.333333 29.866667 21.333334 46.933334 0 17.066667-4.266667 34.133333-17.066667 46.933333-12.8 21.333333-25.6 38.4-42.666667 51.2-17.066667 17.066667-42.666667 38.4-68.266666 59.733333-25.6 21.333333-59.733333 46.933333-93.866667 68.266667v64h341.333333v-85.333333H725.333333z"
+        fill="currentColor" p-id="3880"></path>
+</svg>

addon/chrome/content/icons/editor/h3.svg

@@ -0,0 +1,6 @@
+<svg t="1728768147139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4077"
+    width="20" height="20">
+    <path
+        d="M601.6 605.866667c17.066667 12.8 34.133333 21.333333 51.2 29.866666 17.066667 8.533333 38.4 12.8 59.733333 12.8 21.333333 0 42.666667-4.266667 59.733334-12.8 12.8-4.266667 21.333333-21.333333 21.333333-34.133333 0-8.533333 0-17.066667-4.266667-25.6-4.266667-8.533333-12.8-12.8-21.333333-17.066667-12.8-4.266667-29.866667-8.533333-42.666667-12.8-21.333333-4.266667-42.666667-4.266667-64-4.266666v-68.266667c29.866667 4.266667 64-4.266667 93.866667-17.066667 17.066667-8.533333 25.6-21.333333 25.6-38.4 0-12.8-4.266667-25.6-17.066667-34.133333-12.8-8.533333-29.866667-12.8-46.933333-12.8-17.066667 0-34.133333 4.266667-46.933333 12.8-17.066667 8.533333-29.866667 17.066667-46.933334 25.6l-51.2-59.733333c21.333333-17.066667 46.933333-29.866667 68.266667-38.4 21.333333-8.533333 51.2-12.8 76.8-12.8 21.333333 0 42.666667 4.266667 68.266667 8.533333 17.066667 4.266667 34.133333 12.8 51.2 21.333333 12.8 8.533333 25.6 21.333333 34.133333 34.133334 8.533333 12.8 12.8 29.866667 12.8 46.933333 0 21.333333-8.533333 38.4-21.333333 55.466667-17.066667 17.066667-38.4 29.866667-64 38.4v4.266666c25.6 4.266667 51.2 17.066667 68.266666 34.133334 17.066667 17.066667 29.866667 38.4 29.866667 64 0 17.066667-4.266667 34.133333-12.8 51.2-8.533333 17.066667-21.333333 29.866667-38.4 38.4-17.066667 12.8-38.4 17.066667-55.466667 21.333333-21.333333 4.266667-42.666667 8.533333-68.266666 8.533333-34.133333 0-68.266667-4.266667-98.133334-17.066666-25.6-8.533333-46.933333-25.6-68.266666-42.666667l46.933333-59.733333zM384 469.333333H213.333333V298.666667H128v426.666666h85.333333v-170.666666h170.666667v170.666666h85.333333V298.666667H384v170.666666z"
+        fill="currentColor" p-id="4078"></path>
+</svg>

addon/chrome/content/icons/editor/inlineMath.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="m6.12,16l.88-.88L1.88,10l5.12-5.12-.88-.88L.12,10l6,6Zm7.77,0l-.88-.88,5.12-5.12-5.12-5.12.88-.88,6,6-6,6Z"
+        style="fill-rule: evenodd; stroke-width: 0px;" fill="currentColor" />
+    <path
+        d="m6.23,12.33c0-.39.12-.69.36-.9s.5-.32.8-.32c.21,0,.4.07.55.2s.23.31.23.54c0,.51-.27.87-.81,1.07.2.17.42.26.65.26.4,0,.72-.25.96-.73.15-.27.39-1.07.71-2.4s.49-2.13.49-2.37c0-.28-.08-.48-.24-.6s-.34-.18-.56-.18c-.4,0-.78.17-1.16.5s-.66.75-.84,1.25c-.06.19-.12.31-.17.36s-.15.08-.3.09h-.08c-.28,0-.41-.08-.41-.25,0-.13.06-.33.19-.59s.31-.54.54-.84.56-.56.98-.78.86-.33,1.34-.33c.88,0,1.53.29,1.97.87.55-.58,1.1-.87,1.65-.87.46,0,.86.13,1.21.38s.53.61.53,1.05c0,.39-.12.69-.36.91s-.5.33-.8.33c-.22,0-.41-.07-.56-.21s-.22-.32-.22-.54c0-.51.27-.87.82-1.07-.2-.17-.42-.26-.66-.26-.15,0-.29.03-.42.09s-.25.18-.35.35-.2.33-.27.49-.16.39-.25.7-.16.57-.21.79-.13.53-.23.96-.18.76-.25,1.01c-.13.51-.2.88-.2,1.12,0,.28.08.48.25.6s.36.19.57.19c.4,0,.78-.17,1.16-.5s.66-.74.84-1.23c.01-.02.02-.05.03-.1s.02-.07.03-.09.02-.04.03-.07.02-.05.02-.06.02-.03.03-.05.03-.04.05-.04.04-.01.06-.02.05-.02.07-.02h.2c.28,0,.41.08.41.24,0,.4-.29.92-.88,1.56s-1.31.97-2.16.97c-.93,0-1.59-.29-2-.87h-.02c-.47.58-1.01.87-1.63.87-.45,0-.85-.13-1.2-.38-.35-.25-.53-.6-.53-1.05Z"
+        style="stroke-width: 0px;" fill="currentColor" />
+</svg>

addon/chrome/content/icons/editor/inlineScript.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path d="m6.12,16l.88-.88L1.88,10l5.12-5.12-.88-.88L.12,10l6,6Zm7.77,0l-.88-.88,5.12-5.12-5.12-5.12.88-.88,6,6-6,6Z"
+    style="fill-rule: evenodd; stroke-width: 0px;" fill="currentColor" />
+  <polygon points="8.91 14.4 10.59 10.2 12.25 6.07 11.09 5.6 9.43 9.74 7.75 13.93 8.91 14.4" style="stroke-width: 0px;"
+    fill="currentColor" />
+</svg>

addon/chrome/content/icons/editor/italic.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2H15V4H12.0164L11.9839 4.17889L10.0164 15H13V17H5V15H7.98361L8.01613 14.8211L9.98361 4H7V2Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/link.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1132_37385)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8.125C0 5.70875 1.95875 3.75 4.375 3.75H9.625C12.0412 3.75 14 5.70875 14 8.125C14 10.5412 12.0412 12.5 9.625 12.5H8.60669C8.5376 12.3045 8.5 12.0941 8.5 11.875C8.5 11.6559 8.5376 11.4455 8.60669 11.25H9.625C11.3509 11.25 12.75 9.85089 12.75 8.125C12.75 6.39911 11.3509 5 9.625 5H4.375C2.64911 5 1.25 6.39911 1.25 8.125C1.25 9.85089 2.64911 11.25 4.375 11.25H4.78433C4.76165 11.4552 4.75 11.6637 4.75 11.875C4.75 12.0863 4.76165 12.2948 4.78433 12.5H4.375C1.95875 12.5 0 10.5412 0 8.125ZM10.3751 7.49999H11.3934C11.4625 7.69547 11.5001 7.90584 11.5001 8.12499C11.5001 8.34413 11.4625 8.5545 11.3934 8.74999H10.3751C8.64919 8.74999 7.25008 10.1491 7.25008 11.875C7.25008 13.6009 8.64919 15 10.3751 15H15.6251C17.351 15 18.7501 13.6009 18.7501 11.875C18.7501 10.1491 17.351 8.74999 15.6251 8.74999H15.2157C15.2384 8.54478 15.2501 8.33624 15.2501 8.12499C15.2501 7.91373 15.2384 7.7052 15.2157 7.49999H15.6251C18.0413 7.49999 20.0001 9.45874 20.0001 11.875C20.0001 14.2912 18.0413 16.25 15.6251 16.25H10.3751C7.95883 16.25 6.00008 14.2912 6.00008 11.875C6.00008 9.45874 7.95883 7.49999 10.3751 7.49999Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1132_37385">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

addon/chrome/content/icons/editor/math.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6179_36208)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0971 9L11.0138 9.50002L9.99326 15.6224C9.62633 17.8241 7.5441 19.3114 5.34247 18.9444C4.24166 18.761 3.31942 18.1487 2.71826 17.307L4.34573 16.1446C4.64939 16.5697 5.11523 16.879 5.67127 16.9716C6.78335 17.157 7.83513 16.4057 8.02048 15.2936L8.98619 9.50002L9.06953 9H4.99999V7H9.40286L10.0066 3.37761C10.3735 1.17599 12.4558 -0.311319 14.6574 0.055618C15.7582 0.239087 16.6804 0.851379 17.2816 1.69301L15.6541 2.85548C15.3505 2.43036 14.8846 2.12108 14.3286 2.02841C13.2165 1.84306 12.1647 2.59433 11.9794 3.70641L11.4305 7H16V9H11.0971Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_6179_36208">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

addon/chrome/content/icons/editor/monospaced.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.11621 16L7.00009 15.1161L1.88398 10L7.00009 4.88388L6.11621 4L0.116211 10L6.11621 16ZM13.884 16L13.0001 15.1161L18.1162 10L13.0001 4.88388L13.884 4L19.884 10L13.884 16Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/numbered.svg

@@ -0,0 +1,6 @@
+<svg t="1728768200791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4481"
+    width="20" height="20">
+    <path
+        d="M256 226.389333V426.666667H213.333333V285.610667l-35.925333 11.946666-13.482667-40.448 64-21.333333 28.074667-9.386667zM853.333333 373.333333h-379.264v-64H853.333333v64z m0 298.666667h-379.264v-64H853.333333v64zM194.730667 530.688c20.565333-6.101333 52.437333-10.410667 72.618666 15.658667 10.794667 13.952 12.202667 31.829333 9.984 46.506666-3.242667 21.418667-17.194667 47.914667-28.928 70.186667-3.712 7.082667-7.253333 13.738667-10.069333 19.626667H277.333333v42.666666H162.816c10.794667-18.645333 20.778667-35.712 30.592-52.522666l31.274667-53.802667c5.376-9.386667 15.786667-33.450667 6.826666-45.013333-3.84-4.949333-13.994667-10.325333-28.501333-5.973334-13.141333 3.84-24.874667 14.378667-33.024 21.674667l-0.298667 0.256-5.546666-46.165333c8.96-4.864 19.626667-9.813333 30.592-13.098667z"
+        fill="currentColor" p-id="4482"></path>
+</svg>

addon/chrome/content/icons/editor/quote.svg

@@ -0,0 +1,6 @@
+<svg t="1728767929805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3225"
+    width="20" height="20">
+    <path
+        d="M170.666667 373.333333h682.666666v-64H170.666667v64z m341.333333 298.666667h341.333333v-64h-341.333333v64z m-342.613333 105.386667l126.72-126.72-126.72-126.72 45.226666-45.226667 149.333334 149.333333 22.613333 22.613334-22.613333 22.613333-149.333334 149.333333-45.226666-45.226666z"
+        fill="currentColor" p-id="3226"></path>
+</svg>

addon/chrome/content/icons/editor/strikethrough.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C8.85166 2 7.64614 2.28406 6.6953 2.91795C5.71482 3.5716 5 4.61209 5 6C5 6.77149 5.16552 7.44802 5.49725 8.02784C5.71987 8.41695 6.00217 8.73606 6.31739 9H2V10.25H9.10026C9.38748 10.3245 9.66916 10.3907 9.93645 10.4535L9.93646 10.4536L10.021 10.4734C11.1302 10.7344 12.0126 10.9532 12.6404 11.3471C12.9309 11.5294 13.1326 11.7308 13.2668 11.9653C13.3999 12.198 13.5 12.5215 13.5 13C13.5 13.9401 13.1463 14.4997 12.6183 14.8653C12.0364 15.2682 11.1404 15.5 10 15.5C7.79256 15.5 6.5 14.2197 6.5 13H4.5C4.5 15.7803 7.20744 17.5 10 17.5C11.3596 17.5 12.7136 17.2318 13.7567 16.5097C14.8537 15.7503 15.5 14.5599 15.5 13C15.5 12.2285 15.3345 11.552 15.0028 10.9722C14.8462 10.6985 14.6602 10.4595 14.4539 10.25H18V9H12.2582C11.6828 8.80946 11.0947 8.67127 10.5635 8.54645L10.5635 8.54645L10.479 8.52658C9.36982 8.26559 8.48741 8.04685 7.85962 7.65294C7.56905 7.47062 7.36738 7.26916 7.23322 7.03466C7.1001 6.80198 7 6.47851 7 6C7 5.38791 7.28518 4.9284 7.8047 4.58205C8.35386 4.21594 9.14834 4 10 4C10.8517 4 11.6461 4.21594 12.1953 4.58205C12.7148 4.9284 13 5.38791 13 6H15C15 4.61209 14.2852 3.5716 13.3047 2.91795C12.3539 2.28406 11.1483 2 10 2Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/subscript.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.809 9.5L1.95605 2H4.33823L8.00008 7.65923L11.6619 2H14.0441L9.19117 9.5L14.0441 17H11.6619L8.00008 11.3408L4.33823 17H1.95605L6.809 9.5ZM17.4697 15.2197L15 17.6893V19H15.5H20V17.5H17.3107L18.5303 16.2803C19.3008 15.5099 20 14.5711 20 13.5C20 12.9749 19.8289 12.3634 19.4242 11.8688C19.0004 11.3508 18.3498 11 17.5 11C16.6502 11 15.9996 11.3508 15.5758 11.8688C15.1711 12.3634 15 12.9749 15 13.5H16.5C16.5 13.2751 16.5789 13.0116 16.7367 12.8187C16.8754 12.6492 17.0998 12.5 17.5 12.5C17.9002 12.5 18.1246 12.6492 18.2633 12.8187C18.4211 13.0116 18.5 13.2751 18.5 13.5C18.5 13.9289 18.1992 14.4901 17.4697 15.2197Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/superscript.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4697 4.21967L15 6.68934V8H15.5H20V6.5H17.3107L18.5303 5.28033C19.3008 4.50988 20 3.57109 20 2.5C20 1.97495 19.8289 1.36341 19.4242 0.868822C19.0004 0.350834 18.3498 0 17.5 0C16.6502 0 15.9996 0.350834 15.5758 0.868822C15.1711 1.36341 15 1.97495 15 2.5H16.5C16.5 2.27505 16.5789 2.01159 16.7367 1.81868C16.8754 1.64917 17.0998 1.5 17.5 1.5C17.9002 1.5 18.1246 1.64917 18.2633 1.81868C18.4211 2.01159 18.5 2.27505 18.5 2.5C18.5 2.92891 18.1992 3.49012 17.4697 4.21967ZM6.809 9.5L1.95605 2H4.33823L8.00008 7.65923L11.6619 2H14.0441L9.19117 9.5L14.0441 17H11.6619L8.00008 11.3408L4.33823 17H1.95605L6.809 9.5Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/table.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 3.25V6.75H3.25V3.25H16.75ZM3.25 8H7V11.75H3.25V8ZM8.25 11.75V8H11.75V11.75H8.25ZM11.75 13H8.25V16.75H11.75V13ZM13 16.75V13H16.75V16.75H13ZM13 11.75V8H16.75V11.75H13ZM3.25 13H7V16.75H3.25V13ZM18 2H2V18H18V2Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/textColor.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 14L11 2H9L4 14H6.16667L7.41667 11H12.5833L13.8333 14H16ZM10 4.8L8.04167 9.5H11.9583L10 4.8ZM2.25 17.75V16.25H17.75V17.75H2.25ZM1 15H2.25H17.75H19V16.25V17.75V19H17.75H2.25H1V17.75V16.25V15Z" fill="currentColor"/>
+</svg>

addon/chrome/content/icons/editor/underline.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H4V11C4 14.5836 6.71815 17 10 17C13.2819 17 16 14.5836 16 11V2H14V11C14 13.4164 12.241 15 10 15C7.75901 15 6 13.4164 6 11V2ZM4 19V17.75H16V19H4Z" fill="currentColor"/>
+</svg>

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/icons/icon-linear-20.svg

@@ -0,0 +1,7 @@
+<svg t="1708762104325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="13462" data-spm-anchor-id="a313x.collections_detail.0.i1.c2273a81JPaGYf" width="20" height="20">
+    <path
+        d="M896.00324 352c70.7 0 128-57.3 128-128 0-70.6-57.4-128-128-128-70.7 0-128 57.3-128 128 0 18.8 4.1 36.7 11.3 52.8 2.7 6 1.4 13.1-3.3 17.8l-24.2 24.2c-5.7 5.7-14.9 6.3-21.2 1.2-38.1-30.1-86.3-48-138.6-48-18.8 0-37.1 2.3-54.6 6.7-6.9 1.7-14.1-1.4-17.7-7.5l-6.6-11.4c-3.4-5.8-2.7-13.1 1.6-18.3 18.6-22.6 29.7-51.6 29.3-83.2C543.10324 89 486.30324 32.6 417.00324 32c-70.6-0.6-128.1 56.1-129 126.3-0.9 69.5 56.5 128.6 126 129.6 9.4 0.1 18.5-0.7 27.4-2.5 6.8-1.4 13.6 1.7 17.1 7.7l2.2 3.8c4 7 2.2 15.9-4.2 20.7-42.4 32.3-73 79.4-84 133.6-1.5 7.4-8.1 12.7-15.7 12.7h-94.1c-6.6 0-12.6-4-14.9-10.2-18.1-48-64.3-82.2-118.5-82.8C58.70324 370.3 0.50324 427.6 0.00324 498.1-0.49676 569.2 57.00324 627 128.00324 627c56.7 0 104.8-36.9 121.6-87.9 2.2-6.6 8.3-11.1 15.2-11.1h92c7.6 0 14.2 5.4 15.7 12.9 9.5 46.7 33.5 88 67 119.2 5.4 5 6.6 13.2 2.9 19.6l-21.7 37.6c-3.7 6.3-11.1 9.4-18.2 7.4-11.1-3.1-22.7-4.7-34.8-4.7-69.7 0.1-127 56.8-127.8 126.6-0.8 71.7 57.4 130 129.1 129.4 69.5-0.6 126.3-57.3 126.9-126.8 0.3-28-8.5-53.9-23.5-75.1-3.6-5.1-3.9-11.8-0.8-17.2l24.9-43.1c3.9-6.7 12-9.7 19.3-7 23.7 8.6 49.3 13.2 76 13.2 34.9 0 67.9-8 97.3-22.2 7.6-3.7 16.7-0.9 20.9 6.4l37 64c-26.3 23.5-43 57.7-43 95.8 0 70.9 58 128.5 128.9 128 69.7-0.5 126.2-56.7 127.1-126.3 0.9-70.1-57-129.3-127.1-129.7-6.2 0-12.3 0.4-18.3 1.2-6.5 0.9-12.8-2.2-16.1-7.8l-39.2-67.9c-3.4-5.9-2.7-13.3 1.7-18.4 34.2-39.3 54.9-90.7 54.9-147 0-38.9-9.9-75.5-27.4-107.4-3.4-6.2-2.2-13.9 2.8-18.9l28.4-28.4c4.9-4.9 12.4-6 18.7-2.9 17.4 8.6 36.9 13.5 57.6 13.5z m0-192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM128.00324 563c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m240 349c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m464-112c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM416.00324 224c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m289.1 385.1C674.90324 639.4 634.70324 656 592.00324 656s-82.9-16.6-113.1-46.9C448.60324 578.9 432.00324 538.7 432.00324 496s16.6-82.9 46.9-113.1C509.10324 352.6 549.30324 336 592.00324 336s82.9 16.6 113.1 46.9C735.40324 413.1 752.00324 453.3 752.00324 496s-16.6 82.9-46.9 113.1z"
+        p-id="13463" fill="#e8af59" data-spm-anchor-id="a313x.collections_detail.0.i2.c2273a81JPaGYf" class="selected">
+    </path>
+</svg>

addon/chrome/content/icons/inbound-link-16.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="16" height="16">
+    <path
+        d="m4.23,2.66c0,.52-.43.94-.95.93-.52,0-.94-.42-.94-.94s.42-.94.94-.94c.52,0,.94.42.95.93v.02h0Zm4.11-.11c1.14.51,2.18,1.29,2.66,2.4,1.27-.33,2.61.17,3.36,1.25.75,1.08.75,2.51,0,3.59-.75,1.08-2.09,1.58-3.36,1.25-.47,1.11-1.52,1.9-2.66,2.4-.94.42-2,.68-3.04.78-.44,1-1.54,1.52-2.59,1.24-1.05-.29-1.74-1.3-1.61-2.38.13-1.08,1.03-1.91,2.11-1.94,1.09-.04,2.04.73,2.24,1.8.82-.11,1.65-.33,2.37-.65,1.03-.46,1.75-1.08,2.03-1.81-.6-.46-1.01-1.12-1.17-1.87h-3.3c-.31,1.05-1.35,1.71-2.43,1.55-1.08-.16-1.88-1.09-1.88-2.18,0-1.09.8-2.02,1.88-2.17,1.08-.16,2.11.5,2.43,1.54h3.3c.15-.74.57-1.4,1.17-1.87-.29-.73-1-1.35-2.03-1.81-.72-.32-1.55-.54-2.37-.65-.2,1.07-1.15,1.84-2.24,1.8-1.09-.03-1.99-.86-2.12-1.94-.13-1.08.56-2.09,1.61-2.38,1.05-.29,2.15.24,2.59,1.24,1.03.11,2.1.37,3.04.78h0Zm-4.11,10.79c0-.52-.43-.94-.95-.93-.52,0-.94.42-.94.94,0,.52.42.94.94.94.52,0,.94-.42.95-.93v-.02Zm9.43-5.34c0-1.04-.84-1.89-1.89-1.89s-1.89.84-1.89,1.89.84,1.89,1.89,1.89,1.89-.84,1.89-1.89h0Zm-9.43,0c0-.52-.42-.94-.94-.94s-.94.42-.94.94.42.94.94.94.94-.42.94-.94h0Zm0,0"
+        fill="#e8af59" />
+</svg>

addon/chrome/content/icons/inbound-link-20.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="20" height="20">
+    <path
+        d="m5.27,3.31c0,.65-.54,1.17-1.19,1.17-.65,0-1.18-.53-1.18-1.18s.53-1.18,1.18-1.18c.65,0,1.18.52,1.19,1.17v.02h0Zm5.15-.14c1.43.63,2.74,1.62,3.33,3.01,1.6-.41,3.28.22,4.22,1.57.94,1.35.94,3.15,0,4.5-.94,1.35-2.62,1.98-4.22,1.57-.6,1.4-1.9,2.38-3.33,3.01-1.18.52-2.51.85-3.81.98-.55,1.25-1.93,1.91-3.25,1.55-1.32-.36-2.18-1.63-2.02-2.98.16-1.36,1.29-2.39,2.65-2.44,1.37-.04,2.56.92,2.8,2.26,1.03-.14,2.07-.41,2.98-.81,1.29-.57,2.19-1.35,2.55-2.26-.75-.58-1.27-1.41-1.46-2.34h-4.14c-.39,1.31-1.69,2.14-3.04,1.94-1.36-.2-2.36-1.36-2.36-2.73,0-1.37,1.01-2.53,2.36-2.72,1.35-.2,2.65.63,3.04,1.94h4.14c.19-.93.71-1.76,1.46-2.34-.36-.91-1.26-1.69-2.55-2.26-.91-.4-1.95-.68-2.98-.81-.25,1.34-1.44,2.31-2.8,2.26-1.37-.04-2.49-1.08-2.65-2.44-.16-1.36.7-2.63,2.02-2.98,1.32-.36,2.7.3,3.25,1.55,1.29.13,2.63.46,3.81.98h0Zm-5.15,13.52c0-.65-.54-1.17-1.19-1.17-.65,0-1.18.53-1.18,1.18s.53,1.18,1.18,1.18c.65,0,1.18-.52,1.19-1.17v-.02Zm11.83-6.69c0-1.31-1.06-2.37-2.37-2.37s-2.37,1.06-2.37,2.37c0,1.31,1.06,2.37,2.37,2.37s2.37-1.06,2.37-2.37h0Zm-11.83,0c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18.53,1.18,1.18,1.18,1.18-.53,1.18-1.18h0Zm0,0"
+        fill="#e8af59" />
+</svg>

addon/chrome/content/icons/outbound-link-16.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="16" height="16">
+    <path
+        d="m11.77,2.66v-.02c0-.52.43-.94.95-.93.52,0,.94.42.94.94s-.42.94-.94.94c-.52,0-.94-.42-.95-.93h0Zm-4.11-.11c.94-.42,2-.68,3.04-.78.44-1,1.54-1.52,2.59-1.24,1.05.29,1.73,1.3,1.61,2.38-.13,1.08-1.03,1.91-2.12,1.94-1.09.03-2.04-.73-2.24-1.8-.82.11-1.65.33-2.37.65-1.03.46-1.75,1.08-2.03,1.81.6.46,1.01,1.12,1.17,1.87h3.3c.31-1.04,1.35-1.7,2.43-1.54,1.08.16,1.88,1.08,1.88,2.17,0,1.09-.8,2.02-1.88,2.18-1.08.16-2.12-.5-2.43-1.55h-3.3c-.15.74-.57,1.4-1.17,1.87.29.73,1,1.35,2.03,1.81.72.32,1.55.54,2.37.65.2-1.07,1.15-1.84,2.24-1.8,1.09.04,1.99.86,2.11,1.94.13,1.08-.56,2.09-1.61,2.38-1.05.29-2.15-.24-2.59-1.24-1.03-.11-2.1-.37-3.04-.78-1.14-.51-2.18-1.29-2.66-2.4-1.27.33-2.61-.17-3.36-1.25-.75-1.08-.75-2.51,0-3.59.75-1.08,2.09-1.58,3.36-1.25.47-1.11,1.52-1.9,2.66-2.4h0Zm4.11,10.8c0,.52.43.94.95.93.52,0,.94-.42.94-.94s-.42-.94-.94-.94c-.52,0-.94.42-.95.93v.02ZM2.34,8c0,1.04.84,1.89,1.89,1.89s1.89-.84,1.89-1.89c0-1.04-.84-1.89-1.89-1.89s-1.89.84-1.89,1.89h0Zm9.43,0c0,.52.42.94.94.94s.94-.42.94-.94-.42-.94-.94-.94-.94.42-.94.94h0Zm0,0"
+        fill="#e8af59" />
+</svg>

addon/chrome/content/icons/outbound-link-20.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="20" height="20">
+    <path
+        d="m14.71,3.28v-.02c0-.65.54-1.17,1.19-1.17.65,0,1.18.53,1.18,1.18s-.53,1.18-1.18,1.18c-.65,0-1.18-.52-1.19-1.17h0Zm-5.15-.14c1.18-.52,2.51-.85,3.81-.98.55-1.25,1.93-1.91,3.25-1.55,1.32.36,2.17,1.63,2.02,2.98-.16,1.36-1.29,2.39-2.65,2.44-1.37.04-2.56-.92-2.8-2.26-1.03.14-2.07.41-2.98.81-1.29.57-2.19,1.35-2.55,2.26.75.58,1.27,1.41,1.46,2.34h4.14c.39-1.31,1.69-2.13,3.04-1.94,1.35.2,2.36,1.36,2.36,2.72,0,1.37-1,2.54-2.36,2.73-1.36.2-2.65-.63-3.04-1.94h-4.14c-.19.93-.71,1.76-1.46,2.34.36.91,1.26,1.69,2.55,2.26.91.4,1.95.68,2.98.81.25-1.34,1.44-2.3,2.8-2.26,1.37.04,2.49,1.08,2.65,2.44.16,1.36-.7,2.63-2.02,2.98-1.32.36-2.7-.3-3.25-1.55-1.29-.13-2.63-.46-3.81-.98-1.43-.63-2.74-1.62-3.33-3.01-1.6.41-3.28-.22-4.22-1.57-.94-1.35-.94-3.15,0-4.5.94-1.35,2.62-1.98,4.22-1.57.6-1.4,1.9-2.38,3.33-3.01h0Zm5.15,13.55c0,.65.54,1.17,1.19,1.17.65,0,1.18-.53,1.18-1.18s-.53-1.18-1.18-1.18c-.65,0-1.18.52-1.19,1.17v.02ZM2.88,9.97c0,1.31,1.06,2.37,2.37,2.37s2.37-1.06,2.37-2.37c0-1.31-1.06-2.37-2.37-2.37s-2.37,1.06-2.37,2.37h0Zm11.83,0c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18-.53-1.18-1.18-1.18-1.18.53-1.18,1.18h0Zm0,0"
+        fill="#e8af59" />
+</svg>

addon/chrome/content/icons/outline-20.svg

@@ -0,0 +1,12 @@
+<svg t="1710401595942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4073"
+    width="20" height="20">
+    <path
+        d="M512 521.216c-24.064 0-45.568-4.608-65.024-9.216l-2.048-0.512-296.96-124.928c-31.232-13.824-50.176-39.424-50.176-66.56s19.456-52.736 50.176-66.56l1.024-0.512L445.44 131.072c39.424-15.872 96.768-15.872 136.192 0L877.056 250.88c31.232 13.824 50.176 39.424 50.176 66.56 0 28.672-19.456 54.272-51.2 66.56l-295.424 123.904c-21.504 8.704-46.592 13.312-68.608 13.312z m-48.128-68.096c14.336 3.584 30.72 7.168 48.128 7.168 14.336 0 31.744-3.072 46.08-8.704L852.48 327.68c8.704-3.584 12.288-7.68 12.8-9.728-1.024-2.048-5.12-6.656-13.312-10.752L558.08 188.416c-24.576-9.728-65.024-9.728-90.112 0L172.032 309.76c-7.68 3.584-11.776 8.192-13.312 10.24 1.024 2.048 5.632 6.656 13.312 10.24l291.84 122.88z"
+        p-id="4074" fill="context-fill"></path>
+    <path
+        d="M512 712.192c-26.624 0-50.176-4.608-69.632-9.216l-2.048-0.512-2.048-1.024-321.024-123.904c-15.872-6.144-23.552-24.064-17.408-39.936 6.144-15.872 24.064-23.552 39.936-17.408l318.976 122.88c15.872 3.584 34.304 7.168 53.76 7.168 16.384 0 35.84-3.072 52.224-8.704l320.512-123.392c15.872-6.144 33.792 1.536 39.936 17.408s-1.536 33.792-17.408 39.936l-322.048 123.904c-23.552 8.192-50.176 12.8-73.728 12.8z"
+        p-id="4075" fill="context-fill"></path>
+    <path
+        d="M512 889.856c-26.624 0-50.176-4.608-69.632-9.216l-2.048-0.512-2.048-1.024-321.024-123.904c-15.872-6.144-23.552-24.064-17.408-39.936 6.144-15.872 24.064-23.552 39.936-17.408l318.976 122.88c15.872 3.584 34.304 7.168 53.76 7.168 16.384 0 35.84-3.072 52.224-8.704l320.512-123.392c15.872-6.144 33.792 1.536 39.936 17.408s-1.536 33.792-17.408 39.936l-322.048 123.904c-23.552 8.704-50.176 12.8-73.728 12.8z"
+        p-id="4076" fill="context-fill"></path>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg t="1712475235724" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6084"
+    width="16" height="16">
+    <path
+        d="M896.244622 765.400781c-32.538127 0-62.261685 12.153822-84.820885 32.154322l-212.542629-190.40988a222.180398 222.180398 0 0 0 39.74513-127.33794c0-35.267407-8.145193-69.340754-23.497389-100.045146l139.363827-114.416508a156.507113 156.507113 0 1 0-23.75326-32.154322l-136.890417 112.369548a226.658122 226.658122 0 0 0-20.725465-23.881194 222.308333 222.308333 0 0 0-158.212913-65.54535 222.095108 222.095108 0 0 0-133.819978 44.43608L218.658377 219.71549a127.807035 127.807035 0 1 0-32.580772 23.113584l65.246835 84.43708a222.180398 222.180398 0 0 0-60.044146 152.498484c0 58.850086 22.601845 114.331218 63.75426 156.379179L200.278387 710.729904a127.807035 127.807035 0 1 0 29.510333 27.292794l55.609067-75.780148a222.137753 222.137753 0 0 0 129.512834 41.237706c59.702986 0 115.909083-23.284165 158.170268-65.502705l0.127935-0.17058 212.798499 190.623105a127.807035 127.807035 0 1 0 110.194654-63.029295z m-28.742723-701.595374c51.429858 0 93.264593 41.79209 93.264593 93.221948s-41.79209 93.264593-93.264593 93.264593A93.307238 93.307238 0 0 1 774.279951 157.027355c0-51.429858 41.79209-93.221948 93.221948-93.221948zM65.520218 128.327276A63.967485 63.967485 0 0 1 129.359768 64.487726a63.967485 63.967485 0 0 1 63.92484 63.882195 63.967485 63.967485 0 0 1-63.92484 63.92484 63.967485 63.967485 0 0 1-63.83955-63.967485z m63.882195 752.641428A63.967485 63.967485 0 0 1 65.520218 817.043864a63.967485 63.967485 0 0 1 63.882195-63.882195 63.967485 63.967485 0 0 1 63.92484 63.882195 63.967485 63.967485 0 0 1-63.92484 63.92484z m285.593498-241.370643a159.961357 159.961357 0 0 1-159.790777-159.790778 159.961357 159.961357 0 0 1 159.790777-159.748132 159.961357 159.961357 0 0 1 159.748132 159.748132 159.961357 159.961357 0 0 1-159.748132 159.748133zM896.244622 957.047366a63.967485 63.967485 0 0 1-63.92484-63.882195 63.967485 63.967485 0 0 1 63.92484-63.92484 63.967485 63.967485 0 0 1 63.882195 63.92484 63.967485 63.967485 0 0 1-63.882195 63.882195z"
+        fill="#e8af59" p-id="6085"></path>
+</svg>

addon/chrome/content/icons/relation-20.svg

@@ -0,0 +1,6 @@
+<svg t="1712475235724" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6084"
+  width="20" height="20">
+  <path
+    d="M896.244622 765.400781c-32.538127 0-62.261685 12.153822-84.820885 32.154322l-212.542629-190.40988a222.180398 222.180398 0 0 0 39.74513-127.33794c0-35.267407-8.145193-69.340754-23.497389-100.045146l139.363827-114.416508a156.507113 156.507113 0 1 0-23.75326-32.154322l-136.890417 112.369548a226.658122 226.658122 0 0 0-20.725465-23.881194 222.308333 222.308333 0 0 0-158.212913-65.54535 222.095108 222.095108 0 0 0-133.819978 44.43608L218.658377 219.71549a127.807035 127.807035 0 1 0-32.580772 23.113584l65.246835 84.43708a222.180398 222.180398 0 0 0-60.044146 152.498484c0 58.850086 22.601845 114.331218 63.75426 156.379179L200.278387 710.729904a127.807035 127.807035 0 1 0 29.510333 27.292794l55.609067-75.780148a222.137753 222.137753 0 0 0 129.512834 41.237706c59.702986 0 115.909083-23.284165 158.170268-65.502705l0.127935-0.17058 212.798499 190.623105a127.807035 127.807035 0 1 0 110.194654-63.029295z m-28.742723-701.595374c51.429858 0 93.264593 41.79209 93.264593 93.221948s-41.79209 93.264593-93.264593 93.264593A93.307238 93.307238 0 0 1 774.279951 157.027355c0-51.429858 41.79209-93.221948 93.221948-93.221948zM65.520218 128.327276A63.967485 63.967485 0 0 1 129.359768 64.487726a63.967485 63.967485 0 0 1 63.92484 63.882195 63.967485 63.967485 0 0 1-63.92484 63.92484 63.967485 63.967485 0 0 1-63.83955-63.967485z m63.882195 752.641428A63.967485 63.967485 0 0 1 65.520218 817.043864a63.967485 63.967485 0 0 1 63.882195-63.882195 63.967485 63.967485 0 0 1 63.92484 63.882195 63.967485 63.967485 0 0 1-63.92484 63.92484z m285.593498-241.370643a159.961357 159.961357 0 0 1-159.790777-159.790778 159.961357 159.961357 0 0 1 159.790777-159.748132 159.961357 159.961357 0 0 1 159.748132 159.748132 159.961357 159.961357 0 0 1-159.748132 159.748133zM896.244622 957.047366a63.967485 63.967485 0 0 1-63.92484-63.882195 63.967485 63.967485 0 0 1 63.92484-63.92484 63.967485 63.967485 0 0 1 63.882195 63.92484 63.967485 63.967485 0 0 1-63.882195 63.882195z"
+    fill="#e8af59" p-id="6085"></path>
+</svg>

addon/chrome/content/icons/save-20.svg

@@ -0,0 +1,9 @@
+<svg t="1710402054079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="16029" width="20" height="20">
+    <path
+        d="M246.153846 194.166154h59.076923v111.064615a118.153846 118.153846 0 0 0 118.153846 118.153846h177.23077a118.153846 118.153846 0 0 0 118.153846-118.153846v-111.064615h59.076923a51.987692 51.987692 0 0 1 51.987692 51.987692v262.301539a33.083077 33.083077 0 1 0 66.166154 0v-262.301539a118.153846 118.153846 0 0 0-118.153846-118.153846h-531.692308a118.153846 118.153846 0 0 0-118.153846 118.153846v531.692308a118.153846 118.153846 0 0 0 118.153846 118.153846h203.224616a33.083077 33.083077 0 1 0 0-66.166154h-203.224616a51.987692 51.987692 0 0 1-51.987692-51.987692v-531.692308a51.987692 51.987692 0 0 1 51.987692-51.987692z m125.243077 111.064615v-111.064615h281.206154v111.064615a51.987692 51.987692 0 0 1-51.987692 51.987693h-177.23077a51.987692 51.987692 0 0 1-51.987692-51.987693z"
+        p-id="16030" fill="context-fill"></path>
+    <path
+        d="M478.916923 692.460308h290.500923l-45.449846-45.449846a33.083077 33.083077 0 1 1 46.788923-46.710154l97.437539 97.437538a39.384615 39.384615 0 0 1 0 55.689846l-97.437539 97.516308a33.083077 33.083077 0 0 1-46.788923-46.788923l45.449846-45.528615H478.916923a33.083077 33.083077 0 1 1 0-66.166154z"
+        p-id="16031" fill="context-fill"></path>
+</svg>

addon/chrome/content/imageViewer.html

@@ -4,7 +4,12 @@
     <title>Image Preview</title>
     <meta charset="utf-8" />
   </head>
-  <body>
+  <body class="zotero-dialog">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="chrome://zotero-platform/content/zotero.css"
+    />
     <style>
       html,
       body {
@@ -12,7 +17,8 @@
         width: 100%;
         padding: 0;
         margin: 0;
-        font-family: initial;
+        overflow: hidden;
+        background: var(--material-background);
       }
       #image {
         position: relative;
@@ -37,7 +43,7 @@
         align-items: center;
       }
     </style>
-    <link rel="stylesheet" href="./tooltip.css" />
+    <link rel="stylesheet" href="./styles/toolbutton.css" />
     <script>
       window.addEventListener("DOMContentLoaded", (e) => {
         document.querySelector(".container").style["line-height"] = `${
@@ -54,162 +60,138 @@
       <img id="image" src="" alt="" />
     </div>
     <div class="toolbar">
-      <div class="tooltip" id="left-container">
-        <button id="left" class="tool-button">
-          <svg
-            t="1668665847719"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="6765"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z"
-              p-id="6766"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Previous</span>
-      </div>
-      <div class="tooltip" id="right-container">
-        <button id="right" class="tool-button">
-          <svg
-            t="1668665870223"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="6907"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z"
-              p-id="6908"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Next</span>
-      </div>
-      <div class="tooltip" id="bigger-container">
-        <button id="bigger" class="tool-button">
-          <svg
-            t="1668693494267"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="14768"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M768 448a320 320 0 1 0-320 320 320 320 0 0 0 320-320z m64 0A384 384 0 1 1 448 64a384 384 0 0 1 384 384z"
-              p-id="14769"
-            ></path>
-            <path
-              d="M681.28 726.72a32 32 0 0 1 45.44-45.44l160 160a32 32 0 0 1-45.44 45.44zM320 480a32 32 0 0 1 0-64h256a32 32 0 0 1 0 64z"
-              p-id="14770"
-            ></path>
-            <path
-              d="M480 576a32 32 0 0 1-64 0V320a32 32 0 0 1 64 0z"
-              p-id="14771"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Zoom In</span>
-      </div>
-      <div class="tooltip" id="smaller-container">
-        <button id="smaller" class="tool-button">
-          <svg
-            t="1668693609992"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="1659"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M768 448a320 320 0 1 0-320 320 320 320 0 0 0 320-320z m64 0A384 384 0 1 1 448 64a384 384 0 0 1 384 384z"
-              p-id="1660"
-            ></path>
-            <path
-              d="M681.28 726.72a32 32 0 0 1 45.44-45.44l160 160a32 32 0 0 1-45.44 45.44zM288 480a32 32 0 0 1 0-64h320a32 32 0 0 1 0 64z"
-              p-id="1661"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Zoom Out</span>
-      </div>
-      <div class="tooltip">
-        <button id="resetwidth" class="tool-button">
-          <svg
-            t="1668693928032"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="4264"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M113.777 819.198 113.777 204.8c0-50.267 40.75-91.022 91.02-91.022l614.376 0c50.29 0 91.045 40.755 91.045 91.022l0 614.398c0 50.27-40.755 91.02-91.045 91.02L204.797 910.218C154.527 910.218 113.777 869.468 113.777 819.198zM796.438 841.953c25.125 0 45.51-20.385 45.51-45.51L841.948 227.554c0-25.122-20.385-45.51-45.505-45.51L227.552 182.044c-25.125 0-45.535 20.387-45.535 45.51l0 568.889c0 25.125 20.39 45.51 45.535 45.51L796.438 841.953zM623.043 603.269l57.115-57.14L344.357 546.129l55.5 55.505c13.31 13.335 13.335 34.93 0 48.265-13.335 13.33-34.95 13.33-48.29 0l-105.765-105.77c-3.415-1.615-6.78-3.525-9.625-6.37-7.08-7.1-10.1-16.475-9.67-25.76-0.46-9.262 2.59-18.66 9.69-25.76 2.85-2.842 6.15-4.8 9.58-6.348l105.79-105.79c13.34-13.335 34.955-13.335 48.29 0 13.31 13.332 13.335 34.927 0 48.262l-55.5 55.502 335.802 0-57.115-57.117c-13.355-13.335-13.335-34.952 0-48.287s34.93-13.335 48.265 0l115.37 115.395c13.335 13.332 13.36 34.927 0 48.262l-115.37 115.395c-13.335 13.335-34.95 13.335-48.265 0C609.708 638.198 609.708 616.583 623.043 603.269z"
-              p-id="4265"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Reset Width</span>
-      </div>
-      <div class="tooltip">
-        <button id="copy" class="tool-button">
-          <svg
-            t="1668688365150"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="5240"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M851.025513 737.324862 400.356301 737.324862c-62.219566 0-112.666535-50.444902-112.666535-112.662943L287.689766 174.012196c0-62.217017 50.446969-112.662943 112.666535-112.662943l450.670235 0c62.219566 0 112.666535 50.444902 112.666535 112.662943l0 450.650747C963.692048 686.879959 913.245079 737.324862 851.025513 737.324862zM907.35878 174.012196c0-31.108508-25.223485-56.33096-56.333268-56.33096L400.356301 117.681236c-31.109783 0-56.334291 25.222451-56.334291 56.33096l0 450.650747c0 31.108508 25.223485 56.331983 56.334291 56.331983l450.670235 0c31.10876 0 56.333268-25.222451 56.333268-56.331983L907.359804 174.012196zM118.687916 399.337057 118.687916 849.988828c0 31.107485 25.223485 56.33096 56.333268 56.33096l450.669212 0c31.109783 0 56.334291-25.222451 56.334291-56.33096l0-56.331983 56.333268 0 0 56.331983c0 62.217017-50.446969 112.660896-112.667559 112.660896L175.021184 962.649723c-62.219566 0-112.667559-50.443879-112.667559-112.660896L62.353625 399.337057c0-62.217017 50.446969-112.662943 112.667559-112.662943l56.334291 0 0 56.33096-56.334291 0C143.9114 343.005075 118.687916 368.228549 118.687916 399.337057z"
-              p-id="5241"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Copy</span>
-      </div>
-      <div class="tooltip">
-        <button id="save" class="tool-button">
-          <svg
-            t="1668693439021"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="13783"
-            width="18"
-            height="18"
-          >
-            <path
-              d="M782.54 912.837H241.46C167.323 912.837 107 852.56 107 778.4V245.623c0-74.16 60.323-134.483 134.46-134.483h541.102C856.678 111.162 917 171.462 917 245.623V778.4c0 74.16-60.3 134.438-134.46 134.438zM241.46 163.632c-45.225 0-82.012 36.765-82.012 82.013V778.4c0 45.225 36.787 82.035 82.012 82.035h541.102c45.225 0 82.013-36.81 82.013-82.035V245.623c0-45.248-36.788-82.013-82.013-82.013H241.46v0.022zM771.312 513.26H252.688V111.163h518.648V513.26h-0.022z m-466.2-52.47h413.775V163.632H305.114v297.159zM589.22 240.808h52.425v174.846H589.22V240.807z m0 0"
-              p-id="13784"
-            ></path>
-          </svg>
-        </button>
-        <span class="tooltiptext">Save</span>
-      </div>
-      <div class="tooltip">
-        <button id="pin" class="tool-button"></button>
-        <span id="pin-tooltip" class="tooltiptext"></span>
-      </div>
+      <button id="left" class="tool-button" title="Previous">
+        <svg
+          t="1668665847719"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="6765"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z"
+            p-id="6766"
+          ></path>
+        </svg>
+      </button>
+      <button id="right" class="tool-button" title="Next">
+        <svg
+          t="1668665870223"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="6907"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z"
+            p-id="6908"
+          ></path>
+        </svg>
+      </button>
+      <button id="bigger" class="tool-button" title="Zoom In">
+        <svg
+          t="1668693494267"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="14768"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M768 448a320 320 0 1 0-320 320 320 320 0 0 0 320-320z m64 0A384 384 0 1 1 448 64a384 384 0 0 1 384 384z"
+            p-id="14769"
+          ></path>
+          <path
+            d="M681.28 726.72a32 32 0 0 1 45.44-45.44l160 160a32 32 0 0 1-45.44 45.44zM320 480a32 32 0 0 1 0-64h256a32 32 0 0 1 0 64z"
+            p-id="14770"
+          ></path>
+          <path
+            d="M480 576a32 32 0 0 1-64 0V320a32 32 0 0 1 64 0z"
+            p-id="14771"
+          ></path>
+        </svg>
+      </button>
+      <button id="smaller" class="tool-button" title="Zoom Out">
+        <svg
+          t="1668693609992"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="1659"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M768 448a320 320 0 1 0-320 320 320 320 0 0 0 320-320z m64 0A384 384 0 1 1 448 64a384 384 0 0 1 384 384z"
+            p-id="1660"
+          ></path>
+          <path
+            d="M681.28 726.72a32 32 0 0 1 45.44-45.44l160 160a32 32 0 0 1-45.44 45.44zM288 480a32 32 0 0 1 0-64h320a32 32 0 0 1 0 64z"
+            p-id="1661"
+          ></path>
+        </svg>
+      </button>
+      <button id="resetwidth" class="tool-button" title="Reset Width">
+        <svg
+          t="1668693928032"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="4264"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M113.777 819.198 113.777 204.8c0-50.267 40.75-91.022 91.02-91.022l614.376 0c50.29 0 91.045 40.755 91.045 91.022l0 614.398c0 50.27-40.755 91.02-91.045 91.02L204.797 910.218C154.527 910.218 113.777 869.468 113.777 819.198zM796.438 841.953c25.125 0 45.51-20.385 45.51-45.51L841.948 227.554c0-25.122-20.385-45.51-45.505-45.51L227.552 182.044c-25.125 0-45.535 20.387-45.535 45.51l0 568.889c0 25.125 20.39 45.51 45.535 45.51L796.438 841.953zM623.043 603.269l57.115-57.14L344.357 546.129l55.5 55.505c13.31 13.335 13.335 34.93 0 48.265-13.335 13.33-34.95 13.33-48.29 0l-105.765-105.77c-3.415-1.615-6.78-3.525-9.625-6.37-7.08-7.1-10.1-16.475-9.67-25.76-0.46-9.262 2.59-18.66 9.69-25.76 2.85-2.842 6.15-4.8 9.58-6.348l105.79-105.79c13.34-13.335 34.955-13.335 48.29 0 13.31 13.332 13.335 34.927 0 48.262l-55.5 55.502 335.802 0-57.115-57.117c-13.355-13.335-13.335-34.952 0-48.287s34.93-13.335 48.265 0l115.37 115.395c13.335 13.332 13.36 34.927 0 48.262l-115.37 115.395c-13.335 13.335-34.95 13.335-48.265 0C609.708 638.198 609.708 616.583 623.043 603.269z"
+            p-id="4265"
+          ></path>
+        </svg>
+      </button>
+      <button id="copy" class="tool-button" title="Copy">
+        <svg
+          t="1668688365150"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="5240"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M851.025513 737.324862 400.356301 737.324862c-62.219566 0-112.666535-50.444902-112.666535-112.662943L287.689766 174.012196c0-62.217017 50.446969-112.662943 112.666535-112.662943l450.670235 0c62.219566 0 112.666535 50.444902 112.666535 112.662943l0 450.650747C963.692048 686.879959 913.245079 737.324862 851.025513 737.324862zM907.35878 174.012196c0-31.108508-25.223485-56.33096-56.333268-56.33096L400.356301 117.681236c-31.109783 0-56.334291 25.222451-56.334291 56.33096l0 450.650747c0 31.108508 25.223485 56.331983 56.334291 56.331983l450.670235 0c31.10876 0 56.333268-25.222451 56.333268-56.331983L907.359804 174.012196zM118.687916 399.337057 118.687916 849.988828c0 31.107485 25.223485 56.33096 56.333268 56.33096l450.669212 0c31.109783 0 56.334291-25.222451 56.334291-56.33096l0-56.331983 56.333268 0 0 56.331983c0 62.217017-50.446969 112.660896-112.667559 112.660896L175.021184 962.649723c-62.219566 0-112.667559-50.443879-112.667559-112.660896L62.353625 399.337057c0-62.217017 50.446969-112.662943 112.667559-112.662943l56.334291 0 0 56.33096-56.334291 0C143.9114 343.005075 118.687916 368.228549 118.687916 399.337057z"
+            p-id="5241"
+          ></path>
+        </svg>
+      </button>
+      <button id="save" class="tool-button" title="Save">
+        <svg
+          t="1668693439021"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="13783"
+          width="18"
+          height="18"
+        >
+          <path
+            d="M782.54 912.837H241.46C167.323 912.837 107 852.56 107 778.4V245.623c0-74.16 60.323-134.483 134.46-134.483h541.102C856.678 111.162 917 171.462 917 245.623V778.4c0 74.16-60.3 134.438-134.46 134.438zM241.46 163.632c-45.225 0-82.012 36.765-82.012 82.013V778.4c0 45.225 36.787 82.035 82.012 82.035h541.102c45.225 0 82.013-36.81 82.013-82.035V245.623c0-45.248-36.788-82.013-82.013-82.013H241.46v0.022zM771.312 513.26H252.688V111.163h518.648V513.26h-0.022z m-466.2-52.47h413.775V163.632H305.114v297.159zM589.22 240.808h52.425v174.846H589.22V240.807z m0 0"
+            p-id="13784"
+          ></path>
+        </svg>
+      </button>
+      <button id="pin" class="tool-button" title="Pin"></button>
     </div>
   </body>
 </html>

addon/chrome/content/lib/js/printUtils.js

@@ -0,0 +1,374 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ var { XPCOMUtils } = ChromeUtils.import(
+   "resource://gre/modules/XPCOMUtils.jsm"
+ );
+ 
+ XPCOMUtils.defineLazyModuleGetters(this, {
+   SubDialogManager: "resource://gre/modules/SubDialog.jsm",
+ });
+ 
+ // Load PrintUtils lazily and modify it to suit.
+ XPCOMUtils.defineLazyGetter(this, "PrintUtils", () => {
+   let scope = {};
+   Services.scriptloader.loadSubScript(
+     "chrome://global/content/printUtils.js",
+     scope
+   );
+   scope.PrintUtils.getTabDialogBox = function(browser) {
+     if (!browser.tabDialogBox) {
+       browser.tabDialogBox = new TabDialogBox(browser);
+     }
+     return browser.tabDialogBox;
+   };
+   scope.PrintUtils.createBrowser = function({
+     remoteType,
+     initialBrowsingContextGroupId,
+     userContextId,
+     skipLoad,
+     initiallyActive,
+   } = {}) {
+     let b = document.createXULElement("browser");
+     // Use the JSM global to create the permanentKey, so that if the
+     // permanentKey is held by something after this window closes, it
+     // doesn't keep the window alive.
+     b.permanentKey = new (Cu.getGlobalForObject(Services).Object)();
+ 
+     const defaultBrowserAttributes = {
+       maychangeremoteness: "true",
+       messagemanagergroup: "browsers",
+       type: "content",
+     };
+     for (let attribute in defaultBrowserAttributes) {
+       b.setAttribute(attribute, defaultBrowserAttributes[attribute]);
+     }
+ 
+     if (userContextId) {
+       b.setAttribute("usercontextid", userContextId);
+     }
+ 
+     if (remoteType) {
+       b.setAttribute("remoteType", remoteType);
+       b.setAttribute("remote", "true");
+     }
+ 
+     // Ensure that the browser will be created in a specific initial
+     // BrowsingContextGroup. This may change the process selection behaviour
+     // of the newly created browser, and is often used in combination with
+     // "remoteType" to ensure that the initial about:blank load occurs
+     // within the same process as another window.
+     if (initialBrowsingContextGroupId) {
+       b.setAttribute(
+         "initialBrowsingContextGroupId",
+         initialBrowsingContextGroupId
+       );
+     }
+ 
+     // We set large flex on both containers to allow the devtools toolbox to
+     // set a flex attribute. We don't want the toolbox to actually take up free
+     // space, but we do want it to collapse when the window shrinks, and with
+     // flex=0 it can't. When the toolbox is on the bottom it's a sibling of
+     // browserStack, and when it's on the side it's a sibling of
+     // browserContainer.
+     let stack = document.createXULElement("stack");
+     stack.className = "browserStack";
+     stack.appendChild(b);
+     stack.setAttribute("flex", "10000");
+ 
+     let browserContainer = document.createXULElement("vbox");
+     browserContainer.className = "browserContainer";
+     browserContainer.appendChild(stack);
+     browserContainer.setAttribute("flex", "10000");
+ 
+     let browserSidebarContainer = document.createXULElement("hbox");
+     browserSidebarContainer.className = "browserSidebarContainer";
+     browserSidebarContainer.appendChild(browserContainer);
+ 
+     // Prevent the superfluous initial load of a blank document
+     // if we're going to load something other than about:blank.
+     if (skipLoad) {
+       b.setAttribute("nodefaultsrc", "true");
+     }
+ 
+     return b;
+   };
+   return scope.PrintUtils;
+ });
+ 
+ /**
+  * The TabDialogBox supports opening window dialogs as SubDialogs on the tab and content
+  * level. Both tab and content dialogs have their own separate managers.
+  * Dialogs will be queued FIFO and cover the web content.
+  * Dialogs are closed when the user reloads or leaves the page.
+  * While a dialog is open PopupNotifications, such as permission prompts, are
+  * suppressed.
+  */
+ class TabDialogBox {
+   constructor(browser) {
+     this._weakBrowserRef = Cu.getWeakReference(browser);
+ 
+     // Create parent element for tab dialogs
+     let template = document.getElementById("dialogStackTemplate");
+     this.dialogStack = template.content.cloneNode(true).firstElementChild;
+     this.dialogStack.classList.add("tab-prompt-dialog");
+ 
+     // This differs from Firefox by using a specific ancestor <stack> rather
+     // than the parent of the <browser>, so that a larger area of the screen
+     // is used for the preview.
+     this.printPreviewStack = document.querySelector(".printPreviewStack");
+     if (this.printPreviewStack && this.printPreviewStack.contains(browser)) {
+       this.printPreviewStack.appendChild(this.dialogStack);
+     } else {
+       this.printPreviewStack = this.browser.parentNode;
+       this.browser.parentNode.insertBefore(
+         this.dialogStack,
+         this.browser.nextElementSibling
+       );
+     }
+ 
+     // Initially the stack only contains the template
+     let dialogTemplate = this.dialogStack.firstElementChild;
+ 
+     // Create dialog manager for prompts at the tab level.
+     this._tabDialogManager = new SubDialogManager({
+       dialogStack: this.dialogStack,
+       dialogTemplate,
+       orderType: SubDialogManager.ORDER_QUEUE,
+       allowDuplicateDialogs: true,
+       dialogOptions: {
+         consumeOutsideClicks: false,
+       },
+     });
+   }
+ 
+   /**
+    * Open a dialog on tab or content level.
+    * @param {String} aURL - URL of the dialog to load in the tab box.
+    * @param {Object} [aOptions]
+    * @param {String} [aOptions.features] - Comma separated list of window
+    *   features.
+    * @param {Boolean} [aOptions.allowDuplicateDialogs] - Whether to allow
+    *   showing multiple dialogs with aURL at the same time. If false calls for
+    *   duplicate dialogs will be dropped.
+    * @param {String} [aOptions.sizeTo] - Pass "available" to stretch dialog to
+    *   roughly content size.
+    * @param {Boolean} [aOptions.keepOpenSameOriginNav] - By default dialogs are
+    *   aborted on any navigation.
+    *   Set to true to keep the dialog open for same origin navigation.
+    * @param {Number} [aOptions.modalType] - The modal type to create the dialog for.
+    *   By default, we show the dialog for tab prompts.
+    * @returns {Promise} - Resolves once the dialog has been closed.
+    */
+   open(
+     aURL,
+     {
+       features = null,
+       allowDuplicateDialogs = true,
+       sizeTo,
+       keepOpenSameOriginNav,
+       modalType = null,
+       allowFocusCheckbox = false,
+     } = {},
+     ...aParams
+   ) {
+     return new Promise(resolve => {
+       // Get the dialog manager to open the prompt with.
+       let dialogManager =
+         modalType === Ci.nsIPrompt.MODAL_TYPE_CONTENT
+           ? this.getContentDialogManager()
+           : this._tabDialogManager;
+       let hasDialogs =
+         this._tabDialogManager.hasDialogs ||
+         this._contentDialogManager?.hasDialogs;
+ 
+       if (!hasDialogs) {
+         this._onFirstDialogOpen();
+       }
+ 
+       let closingCallback = event => {
+         if (!hasDialogs) {
+           this._onLastDialogClose();
+         }
+ 
+         if (allowFocusCheckbox && !event.detail?.abort) {
+           this.maybeSetAllowTabSwitchPermission(event.target);
+         }
+       };
+ 
+       if (modalType == Ci.nsIPrompt.MODAL_TYPE_CONTENT) {
+         sizeTo = "limitheight";
+       }
+ 
+       // Open dialog and resolve once it has been closed
+       let dialog = dialogManager.open(
+         aURL,
+         {
+           features,
+           allowDuplicateDialogs,
+           sizeTo,
+           closingCallback,
+           closedCallback: resolve,
+         },
+         ...aParams
+       );
+ 
+       // Marking the dialog externally, instead of passing it as an option.
+       // The SubDialog(Manager) does not care about navigation.
+       // dialog can be null here if allowDuplicateDialogs = false.
+       if (dialog) {
+         dialog._keepOpenSameOriginNav = keepOpenSameOriginNav;
+       }
+     });
+   }
+ 
+   _onFirstDialogOpen() {
+     for (let element of this.printPreviewStack.children) {
+       if (element != this.dialogStack) {
+         element.setAttribute("tabDialogShowing", true);
+       }
+     }
+ 
+     // Register listeners
+     this._lastPrincipal = this.browser.contentPrincipal;
+     this.browser.addProgressListener(this, Ci.nsIWebProgress.NOTIFY_LOCATION);
+   }
+ 
+   _onLastDialogClose() {
+     for (let element of this.printPreviewStack.children) {
+       if (element != this.dialogStack) {
+         element.removeAttribute("tabDialogShowing");
+       }
+     }
+ 
+     // Clean up listeners
+     this.browser.removeProgressListener(this);
+     this._lastPrincipal = null;
+   }
+ 
+   _buildContentPromptDialog() {
+     let template = document.getElementById("dialogStackTemplate");
+     let contentDialogStack = template.content.cloneNode(true).firstElementChild;
+     contentDialogStack.classList.add("content-prompt-dialog");
+ 
+     // Create a dialog manager for content prompts.
+     let tabPromptDialog = this.browser.parentNode.querySelector(
+       ".tab-prompt-dialog"
+     );
+     this.browser.parentNode.insertBefore(contentDialogStack, tabPromptDialog);
+ 
+     let contentDialogTemplate = contentDialogStack.firstElementChild;
+     this._contentDialogManager = new SubDialogManager({
+       dialogStack: contentDialogStack,
+       dialogTemplate: contentDialogTemplate,
+       orderType: SubDialogManager.ORDER_QUEUE,
+       allowDuplicateDialogs: true,
+       dialogOptions: {
+         consumeOutsideClicks: false,
+       },
+     });
+   }
+ 
+   handleEvent(event) {
+     if (event.type !== "TabClose") {
+       return;
+     }
+     this.abortAllDialogs();
+   }
+ 
+   abortAllDialogs() {
+     this._tabDialogManager.abortDialogs();
+     this._contentDialogManager?.abortDialogs();
+   }
+ 
+   focus() {
+     // Prioritize focusing the dialog manager for tab prompts
+     if (this._tabDialogManager._dialogs.length) {
+       this._tabDialogManager.focusTopDialog();
+       return;
+     }
+     this._contentDialogManager?.focusTopDialog();
+   }
+ 
+   /**
+    * If the user navigates away or refreshes the page, close all dialogs for
+    * the current browser.
+    */
+   onLocationChange(aWebProgress, aRequest, aLocation, aFlags) {
+     if (
+       !aWebProgress.isTopLevel ||
+       aFlags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
+     ) {
+       return;
+     }
+ 
+     // Dialogs can be exempt from closing on same origin location change.
+     let filterFn;
+ 
+     // Test for same origin location change
+     if (
+       this._lastPrincipal?.isSameOrigin(
+         aLocation,
+         this.browser.browsingContext.usePrivateBrowsing
+       )
+     ) {
+       filterFn = dialog => !dialog._keepOpenSameOriginNav;
+     }
+ 
+     this._lastPrincipal = this.browser.contentPrincipal;
+ 
+     this._tabDialogManager.abortDialogs(filterFn);
+     this._contentDialogManager?.abortDialogs(filterFn);
+   }
+ 
+   get tab() {
+     return document.getElementById("tabmail").getTabForBrowser(this.browser);
+   }
+ 
+   get browser() {
+     let browser = this._weakBrowserRef.get();
+     if (!browser) {
+       throw new Error("Stale dialog box! The associated browser is gone.");
+     }
+     return browser;
+   }
+ 
+   getTabDialogManager() {
+     return this._tabDialogManager;
+   }
+ 
+   getContentDialogManager() {
+     if (!this._contentDialogManager) {
+       this._buildContentPromptDialog();
+     }
+     return this._contentDialogManager;
+   }
+ 
+   onNextPromptShowAllowFocusCheckboxFor(principal) {
+     this._allowTabFocusByPromptPrincipal = principal;
+   }
+ 
+   /**
+    * Sets the "focus-tab-by-prompt" permission for the dialog.
+    */
+   maybeSetAllowTabSwitchPermission(dialog) {
+     let checkbox = dialog.querySelector("checkbox");
+ 
+     if (checkbox.checked) {
+       Services.perms.addFromPrincipal(
+         this._allowTabFocusByPromptPrincipal,
+         "focus-tab-by-prompt",
+         Services.perms.ALLOW_ACTION
+       );
+     }
+ 
+     // Don't show the "allow tab switch checkbox" for subsequent prompts.
+     this._allowTabFocusByPromptPrincipal = null;
+   }
+ }
+ 
+ TabDialogBox.prototype.QueryInterface = ChromeUtils.generateQI([
+   "nsIWebProgressListener",
+   "nsISupportsWeakReference",
+ ]);

addon/chrome/content/linkCreator.xhtml

@@ -0,0 +1,74 @@
+<?xml version="1.0"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://__addonRef__/content/styles/linkCreator/toolbar.css" type="text/css"?>
+<!-- prettier-ignore -->
+<?xml-stylesheet href="chrome://__addonRef__/content/styles/linkCreator/linkCreator.css" type="text/css"?>
+<!-- prettier-ignore -->
+<!DOCTYPE window>
+<window
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  id="bn-note-picker"
+  data-l10n-id="title"
+  windowtype="__addonRef__-link-note"
+  persist="screenX screenY width height sizemode"
+  style="min-width: 40em"
+  drawintitlebar-platforms="mac"
+>
+  <xul:linkset>
+    <html:link rel="localization" href="browser/menubar.ftl" />
+    <html:link rel="localization" href="browser/browserSets.ftl" />
+    <html:link rel="localization" href="toolkit/global/textActions.ftl" />
+    <html:link rel="localization" href="zotero.ftl" />
+    <html:link rel="localization" href="__addonRef__-linkCreator.ftl" />
+  </xul:linkset>
+
+  <xul:commandset id="mainCommandSet">
+    <xul:command id="cmd_close" oncommand="window.close();" />
+  </xul:commandset>
+  <xul:keyset id="mainKeyset">
+    <xul:key
+      id="key_close"
+      data-l10n-id="close-shortcut"
+      command="cmd_close"
+      modifiers="accel"
+      reserved="true"
+    />
+  </xul:keyset>
+
+  <script src="chrome://zotero/content/include.js"></script>
+  <script src="chrome://zotero/content/titlebar.js"></script>
+  <script src="chrome://zotero/content/customElements.js"></script>
+  <script src="chrome://__addonRef__/content/scripts/customElements.js"></script>
+  <script src="chrome://__addonRef__/content/scripts/linkCreator.js"></script>
+
+  <dialog buttons="accept, cancel">
+    <tabbox id="top-container" class="container">
+      <tabs>
+        <tab data-l10n-id="tab-inbound"></tab>
+        <tab data-l10n-id="tab-outbound"></tab>
+      </tabs>
+      <tabpanels class="container">
+        <tabpanel class="content-container">
+          <bn-inbound-creator
+            id="bn-inbound-creator"
+            data-bn-type="content"
+          ></bn-inbound-creator>
+        </tabpanel>
+        <tabpanel class="content-container">
+          <bn-outbound-creator
+            id="bn-outbound-creator"
+            data-bn-type="content"
+          ></bn-outbound-creator>
+        </tabpanel>
+      </tabpanels>
+    </tabbox>
+  </dialog>
+</window>

addon/chrome/content/mindMap.html

@@ -146,7 +146,7 @@
           });
 
           // read in the predefined graph using the JSON format data held in the "mySavedModel" textarea
-          window.parent.postMessage({ type: "ready" }, "*");
+          window.postMessage({ type: "ready" }, "*");
           getData();
         }
 
@@ -240,7 +240,7 @@
         }
 
         function getData() {
-          window.parent.postMessage({ type: "getMindMapData" }, "*");
+          window.postMessage({ type: "getMindMapData" }, "*");
         }
 
         function setData(nodes) {
@@ -281,17 +281,16 @@
           var oldnode = adorn.adornedPart;
           var olddata = oldnode.data;
           if (olddata.noteLink) {
-            window.parent.postMessage(
+            window.postMessage(
               { type: "openNote", link: olddata.noteLink, id: olddata.key },
               "*",
             );
           } else {
-            window.parent.postMessage(
+            window.postMessage(
               {
                 type: "jumpNode",
                 lineIndex: olddata.lineIndex,
                 id: olddata.key,
-                workspaceType: window.workspaceType || "tab",
               },
               "*",
             );
@@ -305,12 +304,11 @@
             alert("Link cannot be edited in mind map");
             return false;
           }
-          window.parent.postMessage(
+          window.postMessage(
             {
               type: "editNode",
               lineIndex: data.lineIndex,
               text: data.text,
-              workspaceType: window.workspaceType || "tab",
             },
             "*",
           );
@@ -321,30 +319,31 @@
           switch (e.data.type) {
             case "setMindMapData":
               setData(e.data.nodes);
-              window.workspaceType = e.data.workspaceType;
               break;
             case "saveImage":
               const imgString = Diagram.makeImageData({
                 scale: 1,
               });
-              window.parent.postMessage(
+              window.postMessage(
                 {
                   type: "saveImageReturn",
                   image: imgString,
                 },
                 "*",
               );
+              break;
             case "saveSVG":
               const svgElement = Diagram.makeSvg({
                 scale: 1,
               });
-              window.parent.postMessage(
+              window.postMessage(
                 {
                   type: "saveSVGReturn",
                   image: svgElement.outerHTML,
                 },
                 "*",
               );
+              break;
             default:
               break;
           }
@@ -354,7 +353,7 @@
           try {
             init();
           } catch (e) {
-            window.parent.postMessage({ type: "error", event: e }, "*");
+            window.postMessage({ type: "error", event: e }, "*");
           }
         });
 

addon/chrome/content/preferences.xhtml

@@ -1,73 +1,157 @@
 <linkset>
   <html:link rel="localization" href="__addonRef__-preferences.ftl" />
 </linkset>
-<vbox
-  id="zotero-prefpane-__addonRef__"
-  onload="Zotero.__addonInstance__.hooks.onPrefsEvent('load', {window})"
->
-  <groupbox>
-    <label><html:h2 data-l10n-id="workspace-title"></html:h2></label>
-    <hbox>
-      <html:label
-        for="__addonRef__-workspace-expandLevel"
-        data-l10n-id="workspace-expandLevel-label"
-      ></html:label>
-      <html:input
-        type="number"
-        min="1"
-        max="6"
-        step="1"
-        id="__addonRef__-workspace-expandLevel"
-        preference="__prefsPrefix__.workspace.outline.expandLevel"
-      ></html:input>
-    </hbox>
-  </groupbox>
-  <groupbox>
-    <label><html:h2 data-l10n-id="sync-title"></html:h2></label>
-    <hbox>
-      <html:label
-        for="__addonRef__-sync-period"
-        data-l10n-id="sync-period-label"
-      ></html:label>
-      <html:input
-        type="number"
-        min="-1"
-        max="3600"
-        step="1"
-        placeholder="-1 for disable"
-        id="__addonRef__-sync-period"
-        preference="__prefsPrefix__.syncPeriodSeconds"
-      ></html:input>
-    </hbox>
-    <hbox>
-      <button
-        onclick="Zotero.__addonInstance__.hooks.onShowSyncManager()"
-        data-l10n-id="sync-manager"
-      ></button>
-    </hbox>
-  </groupbox>
-  <groupbox>
-    <label><html:h2 data-l10n-id="template-title"></html:h2></label>
-    <hbox>
-      <button
-        onclick="Zotero.__addonInstance__.hooks.onShowTemplateEditor()"
-        data-l10n-id="template-editor"
-      ></button>
-    </hbox>
-  </groupbox>
-  <groupbox>
-    <label><html:h2 data-l10n-id="annotation-title"></html:h2></label>
-    <!-- <checkbox
-      id="__addonRef__-enableAddToNote"
-      data-l10n-id="annotation-autoAnnotation"
-      native="true"
-      preference="__prefsPrefix__.autoAnnotation"
-    /> -->
-  </groupbox>
-</vbox>
-<vbox>
+<script>
+  Zotero.__addonInstance__.hooks.onPrefsEvent("load", { window });
+</script>
+<groupbox>
+  <label><html:h2 data-l10n-id="basic-title"></html:h2></label>
+  <checkbox
+    data-l10n-id="basic-openNote-takeover"
+    native="true"
+    preference="__prefsPrefix__.openNote.takeover"
+  />
+  <checkbox
+    data-l10n-id="basic-openNote-defaultAsWindow"
+    native="true"
+    preference="__prefsPrefix__.openNote.defaultAsWindow"
+  />
+  <checkbox
+    data-l10n-id="basic-exportNotes-takeover"
+    native="true"
+    preference="__prefsPrefix__.exportNotes.takeover"
+  />
+</groupbox>
+<groupbox>
+  <label><html:h2 data-l10n-id="editor-title"></html:h2></label>
+  <hbox align="center">
+    <html:label
+      for="__addonRef__-editor-expandLevel"
+      data-l10n-id="editor-expandLevel-label"
+    ></html:label>
+    <html:input
+      type="number"
+      min="1"
+      max="6"
+      step="1"
+      id="__addonRef__-editor-expandLevel"
+      preference="__prefsPrefix__.workspace.outline.expandLevel"
+    ></html:input>
+  </hbox>
+  <checkbox
+    data-l10n-id="editor-keepLinks"
+    native="true"
+    preference="__prefsPrefix__.workspace.outline.keepLinks"
+  />
+  <hbox align="center">
+    <html:label
+      data-l10n-id="editor-noteLinkPreviewType"
+      for="__addonRef__-editor-noteLinkPreviewType"
+    ></html:label>
+    <radiogroup
+      id="__addonRef__-editor-noteLinkPreviewType"
+      preference="__prefsPrefix__.editor.noteLinkPreviewType"
+      orient="horizontal"
+      oncommand="Zotero.__addonInstance__.api.utils.requireRestart();"
+    >
+      <radio data-l10n-id="editor-noteLinkPreview-hover" value="hover" />
+      <radio data-l10n-id="editor-noteLinkPreview-ctrl" value="ctrl" />
+      <radio data-l10n-id="editor-noteLinkPreview-disable" value="disable" />
+    </radiogroup>
+  </hbox>
+  <checkbox
+    data-l10n-id="editor-useMagicKey"
+    native="true"
+    preference="__prefsPrefix__.editor.useMagicKey"
+  />
+  <checkbox
+    data-l10n-id="editor-useMarkdownPaste"
+    native="true"
+    preference="__prefsPrefix__.editor.useMarkdownPaste"
+  />
+</groupbox>
+<groupbox>
+  <label><html:h2 data-l10n-id="sync-title"></html:h2></label>
+  <hbox align="center">
+    <html:label
+      for="__addonRef__-sync-period"
+      data-l10n-id="sync-period-label"
+    ></html:label>
+    <html:input
+      type="number"
+      min="-1"
+      max="3600"
+      step="1"
+      placeholder="-1 for disable"
+      id="__addonRef__-sync-period"
+      preference="__prefsPrefix__.syncPeriodSeconds"
+      onchange="Zotero.__addonInstance__.api.utils.requireRestart();"
+    ></html:input>
+  </hbox>
+  <hbox align="center">
+    <html:label
+      for="__addonRef__-sync-attachmentFolder"
+      data-l10n-id="sync-attachmentFolder-label"
+    ></html:label>
+    <html:input
+      id="__addonRef__-sync-attachmentFolder"
+      preference="__prefsPrefix__.syncAttachmentFolder"
+    ></html:input>
+  </hbox>
+  <hbox align="center">
+    <button
+      onclick="Zotero.__addonInstance__.hooks.onShowSyncManager()"
+      data-l10n-id="sync-manager"
+    ></button>
+  </hbox>
+</groupbox>
+<groupbox>
+  <label><html:h2 data-l10n-id="template-title"></html:h2></label>
+  <hbox align="center">
+    <button
+      onclick="Zotero.__addonInstance__.hooks.onShowTemplateEditor()"
+      data-l10n-id="template-editor"
+    ></button>
+  </hbox>
+</groupbox>
+<groupbox>
+  <label><html:h2 data-l10n-id="annotationNote-title"></html:h2></label>
+  <checkbox
+    data-l10n-id="annotationNote-enableTagSync"
+    native="true"
+    preference="__prefsPrefix__.annotationNote.enableTagSync"
+  />
+</groupbox>
+<groupbox>
+  <label><html:h2 data-l10n-id="about-title"></html:h2></label>
+
+  <hbox>
+    <label
+      class="zotero-text-link keyboard-clickable"
+      is="zotero-text-link"
+      role="link"
+      href="https://github.com/windingwind/zotero-better-notes"
+      value="Homepage - GitHub"
+    ></label>
+    <label value="|"></label>
+    <label
+      class="zotero-text-link keyboard-clickable"
+      is="zotero-text-link"
+      role="link"
+      href="https://github.com/windingwind/zotero-better-notes/issues"
+      value="Bug Report, Feature Request"
+    ></label>
+    <label value="|"></label>
+    <label
+      class="zotero-text-link keyboard-clickable"
+      is="zotero-text-link"
+      role="link"
+      href="https://github.com/windingwind/zotero-better-notes/discussions/categories/q-a"
+      value="Q&amp;A"
+    ></label>
+  </hbox>
   <label
     data-l10n-id="help"
     data-l10n-args='{"time": "__buildTime__","name": "__addonName__","version":"__buildVersion__"}'
   ></label>
-</vbox>
+</groupbox>

addon/chrome/content/printTemplate.xhtml

@@ -8,7 +8,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="chrome://__addonRef__/content/lib/css/github-markdown-light.min.css"
+      href="chrome://__addonRef__/content/lib/css/github-markdown.css"
     />
     <link
       rel="stylesheet"
@@ -16,42 +16,20 @@
       crossorigin="anonymous"
     />
     <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        var { Services } = ChromeUtils.import(
-          "resource://gre/modules/Services.jsm",
-        );
-        var { XPCOMUtils } = ChromeUtils.import(
-          "resource://gre/modules/XPCOMUtils.jsm",
-        );
-        window.XPCOMUtils = XPCOMUtils;
-        delete window.PrintPreview;
-        Services.scriptloader.loadSubScript(
-          "chrome://global/content/printUtils.js",
-          window,
-        );
-      });
       // Add message to print window
       window.onmessage = async function (e) {
         if (e.data.type === "print") {
-          document.querySelector(".markdown-body").innerHTML = e.data.html;
-          const settings = PrintUtils.getPrintSettings("", false);
-          const doPrint = await PrintUtils.handleSystemPrintDialog(
-            window.browsingContext.topChromeWindow,
-            false,
-            settings,
-          );
-          if (doPrint) {
-            window.browsingContext.print(settings);
-            // An ugly hack to close the browser window that has a static clone
-            // of the content that is being printed. Without this, the window
-            // will be open while transferring the content into system print queue,
-            // which can take time for large PDF files
-            const emptyWin =
-              Services.wm.getMostRecentWindow("navigator:browser");
-            if (emptyWin?.document?.getElementById("statuspanel")) {
-              emptyWin.close();
-            }
-          }
+          // Serialize the HTMLDocument as an XHTML string
+          var parser = new DOMParser();
+          var serializer = new XMLSerializer();
+          var htmlString = e.data.html;
+          const styleString = e.data.style;
+          const style = document.createElement("style");
+          style.innerHTML = styleString;
+          document.head.appendChild(style);
+          var htmlDoc = parser.parseFromString(htmlString, "text/html");
+          var xhtmlString = serializer.serializeToString(htmlDoc);
+          document.querySelector(".markdown-body").innerHTML = xhtmlString;
         }
       };
     </script>

addon/chrome/content/printWrapper.xhtml

@@ -0,0 +1,73 @@
+<?xml version="1.0"?>
+<!-- prettier-ignore -->
+<!DOCTYPE html>
+<html
+  lang="en"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html,
+      body,
+      browser {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <script>
+      var browser;
+      var { XPCOMUtils } = ChromeUtils.import(
+        "resource://gre/modules/XPCOMUtils.jsm",
+      );
+      window.XPCOMUtils = XPCOMUtils;
+
+      const scope = {};
+      Services.scriptloader.loadSubScript(
+        // Borrowed from https://github.com/mozilla/releases-comm-central/commit/32a80889f13918c8776e2a3cf42abb85f6d84cdd#diff-6bebd8bc8a129ee1f12c757394ed9d549f3a20296277cd95b9cc0c3c5d75b739
+        "chrome://__addonRef__/content/lib/js/printUtils.js",
+        scope,
+      );
+      window.PrintUtils = scope.PrintUtils;
+
+      const args = window.arguments[0];
+      let loaded = false;
+      document.addEventListener("DOMContentLoaded", async (ev) => {
+        if (loaded) {
+          return;
+        }
+        browser = PrintUtils.createBrowser();
+        document.body.appendChild(browser);
+        browser.contentWindow.location.href = args.url;
+        loaded = true;
+        await waitUtilAsync(
+          () => browser.contentWindow?.document.readyState === "complete",
+        );
+        args.browser = browser;
+        args._initPromise.resolve();
+      });
+      async function waitUtilAsync(condition, interval = 100, timeout = 10000) {
+        return new Promise((resolve, reject) => {
+          const start = Date.now();
+          const intervalId = setInterval(() => {
+            if (condition()) {
+              clearInterval(intervalId);
+              resolve();
+            } else if (Date.now() - start > timeout) {
+              clearInterval(intervalId);
+              reject();
+            }
+          }, interval);
+        });
+      }
+      window.print = async () => {
+        PrintUtils.startPrintWindow(browser.browsingContext);
+      };
+    </script>
+  </head>
+  <body></body>
+</html>

addon/chrome/content/relationGraph.html

@@ -0,0 +1,219 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Force-Directed Tree</title>
+    <script src="chrome://__addonRef__/content/lib/js/d3.v7.min.js"></script>
+    <link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css" />
+    <style>
+      html,
+      body {
+        overflow: hidden;
+        background: var(--material-background);
+      }
+
+      .node:hover {
+        cursor: pointer;
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --text-color: black;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --text-color: white;
+        }
+      }
+    </style>
+    <script>
+      window.addEventListener("message", (ev) => {
+        if (ev.data.type === "render") {
+          render(ev.data.graph);
+        }
+      });
+      function render(data) {
+        // Define the data for the nodes and links
+        // Specify the dimensions of the chart.
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+        // 2: 100; 22: 50
+        function distance() {
+          if (data.nodes.length > 22) {
+            return 50;
+          }
+          return 105 - 2.5 * data.nodes.length;
+        }
+
+        // Specify the color scale.
+        const color = d3.scaleOrdinal([1, 2], ["grey", "#A88F6A"]);
+
+        // The force simulation mutates links and nodes, so create a copy
+        // so that re-evaluating this cell produces the same result.
+        const links = data.links.map((d) => ({ ...d }));
+        const nodes = data.nodes.map((d) => ({ ...d }));
+        const linkColor = "#e8af59";
+        // Create a simulation with several forces.
+        const simulation = d3
+          .forceSimulation(nodes)
+          .force(
+            "link",
+            d3
+              .forceLink(links)
+              .id((d) => d.id)
+              .distance(distance()),
+          )
+          .force("charge", d3.forceManyBody().strength(-400))
+          .force("x", d3.forceX())
+          .force("y", d3.forceY());
+
+        // Create the SVG container.
+        const svg = d3
+          .create("svg")
+          .attr("width", width)
+          .attr("height", height)
+          .attr("viewBox", [-width / 2, -height / 2, width, height])
+          .attr("style", "max-width: 100%; height: auto;");
+
+        svg
+          .append("defs")
+          .append("marker")
+          .attr("id", "arrowhead")
+          .attr("refX", 25)
+          .attr("refY", 6)
+          .attr("orient", "auto-start-reverse")
+          .attr("markerWidth", 20)
+          .attr("markerHeight", 12)
+          .attr("markerUnits", "userSpaceOnUse")
+          .append("path")
+          .attr("d", "M 1 1 L 18 6 L 1 11 Z")
+          .attr("fill", linkColor)
+          .attr("stroke", linkColor)
+          .attr("class", "arrow-head");
+
+        const link = svg
+          .append("g")
+          .attr("fill", "none")
+          .selectAll("path")
+          .data(links)
+          .join("line")
+          .attr("stroke-width", (d) => Math.sqrt(d.value))
+          .attr("stroke", linkColor)
+          .attr("marker-start", (d) =>
+            d.type === "both" ? "url(#arrowhead)" : "",
+          )
+          .attr("marker-end", "url(#arrowhead)");
+
+        const node = svg
+          .append("g")
+          .attr("stroke", "#fff")
+          .attr("stroke-width", 1.5)
+          .selectAll("circle")
+          .data(nodes)
+          .join("g") // Append a 'g' element for each node
+          .attr("class", "node"); // Assign a class for styling if needed
+
+        node
+          .append("circle")
+          .attr("r", 7)
+          .attr("fill", (d) => color(d.group));
+
+        node
+          .append("text")
+          .attr("x", 0) // Center the text horizontally
+          .attr("y", 18) // Position the text below the circle
+          .attr("text-anchor", "middle") // Ensure the text is centered
+          .attr("fill", "var(--text-color)")
+          .attr("stroke", "none")
+          .text((d) => (d.group === 1 ? "" : d.shortTitle));
+
+        node.append("title").text((d) => d.title);
+
+        // Add a drag behavior.
+        node.call(
+          d3
+            .drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended),
+        );
+
+        // Set the position attributes of links and nodes each time the simulation ticks.
+        simulation.on("tick", () => {
+          link
+            .attr("x1", (d) => d.source.x)
+            .attr("y1", (d) => d.source.y)
+            .attr("x2", (d) => d.target.x)
+            .attr("y2", (d) => d.target.y);
+
+          node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+        });
+
+        // Reheat the simulation when drag starts, and fix the subject position.
+        function dragstarted(event) {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          event.subject.fx = event.subject.x;
+          event.subject.fy = event.subject.y;
+        }
+
+        // Update the subject (dragged node) position during drag.
+        function dragged(event) {
+          event.subject.fx = event.x;
+          event.subject.fy = event.y;
+        }
+
+        // Restore the target alpha so the simulation cools after dragging ends.
+        // Unfix the subject position now that it’s no longer being dragged.
+        function dragended(event) {
+          if (!event.active) simulation.alphaTarget(0);
+          event.subject.fx = null;
+          event.subject.fy = null;
+        }
+
+        // Add the hover interaction
+        node
+          .on("mouseover", function (event, d) {
+            // Enlarge the node circle
+            d3.select(this)
+              .select("circle")
+              .transition()
+              .duration(200)
+              .attr("r", 10); // New, larger radius
+            d3.select(this)
+              .select("text")
+              .text((d) => d.title);
+          })
+          .on("mouseout", function (event, d) {
+            // Shrink the node circle back to original size
+            d3.select(this)
+              .select("circle")
+              .transition()
+              .duration(500)
+              .attr("r", 7); // Original radius
+            d3.select(this)
+              .select("text")
+              .text((d) => (d.group === 1 ? "" : d.shortTitle));
+          })
+          .on("click", function (event, d) {
+            window.postMessage(
+              { type: "openNote", isShift: !!event.shiftKey, id: d.id },
+              "*",
+            );
+          });
+
+        document.body.replaceChildren(svg.node());
+      }
+
+      d3.select(window).on("resize", function () {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        d3.select(document.querySelector("svg"))
+          .attr("width", width)
+          .attr("height", height)
+          .attr("viewBox", [-width / 2, -height / 2, width, height]);
+      });
+    </script>
+  </head>
+  <body></body>
+</html>

addon/chrome/content/styles/editor.css

@@ -0,0 +1,51 @@
+.primary-editor > h1::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E6%9C%AA%E6%A0%87%E9%A2%98-1%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12.29%2C16.8H11.14V12.33H6.07V16.8H4.92V7H6.07v4.3h5.07V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M18.05%2C16.8H16.93V8.41a4%2C4%2C0%2C0%2C1-.9.53%2C6.52%2C6.52%2C0%2C0%2C1-1.14.44l-.32-1a8.2%2C8.2%2C0%2C0%2C0%2C1.67-.67%2C6.31%2C6.31%2C0%2C0%2C0%2C1.39-1h.42Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > h2::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M11.17%2C16.8H10V12.33H5V16.8H3.8V7H5v4.3H10V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M14.14%2C16.8v-.48a4.1%2C4.1%2C0%2C0%2C1%2C.14-1.11%2C2.86%2C2.86%2C0%2C0%2C1%2C.45-.91%2C5.49%2C5.49%2C0%2C0%2C1%2C.83-.86c.33-.29.75-.61%2C1.24-1a7.43%2C7.43%2C0%2C0%2C0%2C.9-.73%2C3.9%2C3.9%2C0%2C0%2C0%2C.57-.7%2C2.22%2C2.22%2C0%2C0%2C0%2C.3-.66%2C2.87%2C2.87%2C0%2C0%2C0%2C.11-.77%2C1.89%2C1.89%2C0%2C0%2C0-.47-1.32%2C1.66%2C1.66%2C0%2C0%2C0-1.28-.5A3.17%2C3.17%2C0%2C0%2C0%2C15.7%2C8a3.49%2C3.49%2C0%2C0%2C0-1.08.76l-.68-.65a4.26%2C4.26%2C0%2C0%2C1%2C1.39-1A4%2C4%2C0%2C0%2C1%2C17%2C6.84a2.62%2C2.62%2C0%2C0%2C1%2C2.83%2C2.67%2C3.58%2C3.58%2C0%2C0%2C1-.15%2C1%2C3.09%2C3.09%2C0%2C0%2C1-.41.9%2C5.53%2C5.53%2C0%2C0%2C1-.67.81%2C9%2C9%2C0%2C0%2C1-.95.79c-.46.32-.84.59-1.13.82a4.68%2C4.68%2C0%2C0%2C0-.71.64%2C2%2C2%2C0%2C0%2C0-.38.6%2C2.08%2C2.08%2C0%2C0%2C0-.11.69h4.88v1Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > h3::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M11.17%2C16.8H10V12.33H5V16.8H3.8V7H5v4.3H10V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M14%2C16.14l.51-.8a4.75%2C4.75%2C0%2C0%2C0%2C1.1.52%2C4.27%2C4.27%2C0%2C0%2C0%2C1.12.16%2C2.29%2C2.29%2C0%2C0%2C0%2C1.64-.52A1.77%2C1.77%2C0%2C0%2C0%2C19%2C14.17a1.7%2C1.7%2C0%2C0%2C0-.68-1.48%2C3.6%2C3.6%2C0%2C0%2C0-2.06-.48H15.4v-1h.77A3%2C3%2C0%2C0%2C0%2C18%2C10.81a1.65%2C1.65%2C0%2C0%2C0%2C.6-1.41%2C1.47%2C1.47%2C0%2C0%2C0-.47-1.19A1.67%2C1.67%2C0%2C0%2C0%2C17%2C7.79a3.33%2C3.33%2C0%2C0%2C0-2.08.73l-.59-.75a4.4%2C4.4%2C0%2C0%2C1%2C1.28-.71A4.35%2C4.35%2C0%2C0%2C1%2C17%2C6.84a2.84%2C2.84%2C0%2C0%2C1%2C2%2C.65%2C2.21%2C2.21%2C0%2C0%2C1%2C.74%2C1.78%2C2.35%2C2.35%2C0%2C0%2C1-.49%2C1.5%2C2.7%2C2.7%2C0%2C0%2C1-1.46.89v0a2.74%2C2.74%2C0%2C0%2C1%2C1.65.74%2C2.15%2C2.15%2C0%2C0%2C1%2C.66%2C1.65%2C2.64%2C2.64%2C0%2C0%2C1-.9%2C2.12%2C3.44%2C3.44%2C0%2C0%2C1-2.34.78%2C5.3%2C5.3%2C0%2C0%2C1-1.48-.2A5%2C5%2C0%2C0%2C1%2C14%2C16.14Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > h4::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M11.17%2C16.8H10V12.33H5V16.8H3.8V7H5v4.3H10V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M19.43%2C6.92v6.59h1.05v1.05H19.43V16.9H18.31V14.56H13.66v-1c.43-.49.87-1%2C1.31-1.57s.87-1.13%2C1.27-1.7S17%2C9.14%2C17.36%2C8.57a16.51%2C16.51%2C0%2C0%2C0%2C.86-1.65Zm-4.49%2C6.59h3.37V8.63c-.34.61-.67%2C1.15-1%2C1.63s-.6.91-.87%2C1.3-.56.74-.81%2C1Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > h5::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M11.17%2C16.8H10V12.33H5V16.8H3.8V7H5v4.3H10V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M14%2C16l.58-.76a3.67%2C3.67%2C0%2C0%2C0%2C1%2C.58A3.44%2C3.44%2C0%2C0%2C0%2C16.8%2C16a2.17%2C2.17%2C0%2C0%2C0%2C1.58-.6A2%2C2%2C0%2C0%2C0%2C19%2C13.88a1.85%2C1.85%2C0%2C0%2C0-.64-1.5%2C2.83%2C2.83%2C0%2C0%2C0-1.86-.54c-.27%2C0-.55%2C0-.86%2C0s-.58%2C0-.81.06L15.17%2C7H19.7V8H16.14l-.2%2C2.88.47%2C0h.43a3.5%2C3.5%2C0%2C0%2C1%2C2.43.79%2C2.74%2C2.74%2C0%2C0%2C1%2C.88%2C2.16%2C3%2C3%2C0%2C0%2C1-.94%2C2.3%2C3.41%2C3.41%2C0%2C0%2C1-2.4.87%2C4.45%2C4.45%2C0%2C0%2C1-1.5-.24A4.81%2C4.81%2C0%2C0%2C1%2C14%2C16Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > h6::before {
+  margin-left: -64px !important;
+  padding-left: 40px !important;
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2015.56%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23666%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M11.17%2C16.8H10V12.33H5V16.8H3.8V7H5v4.3H10V7h1.15Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M20.18%2C13.7a3.24%2C3.24%2C0%2C0%2C1-.88%2C2.38%2C2.94%2C2.94%2C0%2C0%2C1-2.2.9%2C2.69%2C2.69%2C0%2C0%2C1-2.31-1.17A5.59%2C5.59%2C0%2C0%2C1%2C14%2C12.49a12.18%2C12.18%2C0%2C0%2C1%2C.2-2.14%2C5.16%2C5.16%2C0%2C0%2C1%2C.84-2A3.65%2C3.65%2C0%2C0%2C1%2C16.27%2C7.2%2C3.71%2C3.71%2C0%2C0%2C1%2C18%2C6.84%2C3.14%2C3.14%2C0%2C0%2C1%2C19%2C7a3.59%2C3.59%2C0%2C0%2C1%2C1%2C.5l-.56.77a2.3%2C2.3%2C0%2C0%2C0-1.49-.48A2.3%2C2.3%2C0%2C0%2C0%2C16.79%2C8a3%2C3%2C0%2C0%2C0-.92.85%2C3.79%2C3.79%2C0%2C0%2C0-.56%2C1.25%2C6.56%2C6.56%2C0%2C0%2C0-.19%2C1.65h0a2.61%2C2.61%2C0%2C0%2C1%2C1-.84%2C2.91%2C2.91%2C0%2C0%2C1%2C1.23-.28%2C2.63%2C2.63%2C0%2C0%2C1%2C2%2C.85A3.09%2C3.09%2C0%2C0%2C1%2C20.18%2C13.7ZM19%2C13.78a2.28%2C2.28%2C0%2C0%2C0-.5-1.62%2C1.67%2C1.67%2C0%2C0%2C0-1.29-.54%2C2%2C2%2C0%2C0%2C0-1.5.58%2C2%2C2%2C0%2C0%2C0-.56%2C1.4%2C2.65%2C2.65%2C0%2C0%2C0%2C.55%2C1.74%2C1.85%2C1.85%2C0%2C0%2C0%2C2.78.1A2.38%2C2.38%2C0%2C0%2C0%2C19%2C13.78Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21%2C5a2.25%2C2.25%2C0%2C0%2C1%2C2.25%2C2.25v9.56A2.25%2C2.25%2C0%2C0%2C1%2C21%2C19H3A2.25%2C2.25%2C0%2C0%2C1%2C.75%2C16.78V7.22A2.25%2C2.25%2C0%2C0%2C1%2C3%2C5H21m0-.75H3a3%2C3%2C0%2C0%2C0-3%2C3v9.56a3%2C3%2C0%2C0%2C0%2C3%2C3H21a3%2C3%2C0%2C0%2C0%2C3-3V7.22a3%2C3%2C0%2C0%2C0-3-3Z%22%20transform%3D%22translate(0%20-4.22)%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+.primary-editor > p,
+.primary-editor h1,
+.primary-editor h2,
+.primary-editor h3,
+.primary-editor h4,
+.primary-editor h5,
+.primary-editor h6,
+.primary-editor pre,
+.primary-editor blockquote,
+.primary-editor table,
+.primary-editor ul,
+.primary-editor ol,
+.primary-editor hr {
+  max-width: unset;
+}
+
+.toolbar .end,
+.toolbar .start {
+  width: auto;
+  gap: 4px;
+}

addon/chrome/content/styles/exportNotes.css

@@ -0,0 +1,8 @@
+dialog {
+  -moz-window-dragging: drag;
+}
+
+#markdown-autoSync {
+  margin-inline-start: 18px;
+  margin-block-end: 24px;
+}

addon/chrome/content/styles/linkCreator/inboundCreator.css

@@ -0,0 +1,19 @@
+bn-inbound-creator {
+  gap: 16px;
+  overflow: auto;
+
+  bn-note-picker {
+    border: var(--material-border);
+    min-width: 600px;
+  }
+
+  bn-note-outline {
+    border: var(--material-border);
+    min-width: 300px;
+  }
+
+  bn-note-preview {
+    border: var(--material-border);
+    min-width: 450px;
+  }
+}

addon/chrome/content/styles/linkCreator/linkCreator.css

@@ -0,0 +1,22 @@
+.container {
+  min-height: 0;
+  height: 100%;
+  margin: 0;
+}
+
+.content-container {
+  overflow: auto;
+}
+
+window {
+  -moz-window-dragging: drag;
+}
+
+#top-container {
+  -moz-window-dragging: no-drag;
+}
+
+/* TODO: remove fx115 workaround */
+tab {
+  color: unset !important;
+}

addon/chrome/content/styles/linkCreator/noteOutline.css

@@ -0,0 +1,16 @@
+bn-note-outline {
+  flex-direction: column;
+
+  #bn-select-note-outline-container {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  #bn-select-note-outline-content {
+    min-height: 100%;
+  }
+
+  #bn-link-insert-position-container {
+    align-items: center;
+  }
+}

addon/chrome/content/styles/linkCreator/notePicker.css

@@ -0,0 +1,44 @@
+bn-note-picker {
+  flex-direction: column;
+
+  #collections-items-container {
+    display: flex;
+    height: 100%;
+    max-height: 50%;
+    border-bottom: var(--material-border);
+    user-select: none;
+  }
+
+  #zotero-collections-tree {
+    background: var(--material-sidepane);
+  }
+
+  #select-items-dialog {
+    display: flex;
+    padding: 0;
+
+    #zotero-select-items-container {
+      gap: 0;
+    }
+
+    #collections-items-container {
+      margin-bottom: 0;
+    }
+    #zotero-items-pane-content {
+      min-height: 100%;
+    }
+  }
+
+  #bn-select-opened-notes-container {
+    min-width: 200px;
+    max-height: 50%;
+  }
+
+  .bn-note-list-container {
+    width: 100%;
+  }
+
+  #bn-select-recent-notes-content {
+    border-left: var(--material-border-quarternary);
+  }
+}

addon/chrome/content/styles/linkCreator/notePreview.css

@@ -0,0 +1,3 @@
+bn-note-preview {
+  flex-direction: column;
+}

addon/chrome/content/styles/linkCreator/outboundCreator.css

@@ -0,0 +1,19 @@
+bn-outbound-creator {
+  gap: 16px;
+  overflow: auto;
+
+  bn-note-picker {
+    border: var(--material-border);
+    min-width: 600px;
+  }
+
+  bn-note-outline {
+    border: var(--material-border);
+    min-width: 300px;
+  }
+
+  bn-note-preview {
+    border: var(--material-border);
+    min-width: 450px;
+  }
+}

addon/chrome/content/styles/linkCreator/toolbar.css

@@ -0,0 +1,48 @@
+.toolbar {
+  background: var(--material-toolbar);
+  border-bottom: var(--material-border);
+  padding: 6px;
+  align-items: center;
+  justify-content: space-between !important;
+}
+
+.toolbar-start,
+.toolbar-middle,
+.toolbar-end {
+  align-items: center;
+}
+
+.toolbar-header {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  color: var(--fill-secondary);
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  line-break: anywhere;
+  font-size: calc(var(--zotero-font-size) * 1.2);
+}
+
+.toolbar-header.content {
+  flex-shrink: 0;
+}
+
+.toolbar-header.highlight {
+  font-size: var(--zotero-font-size);
+  padding: 4px;
+  border: var(--material-border);
+  box-shadow: 0 2px 5px
+    color-mix(in srgb, var(--material-background) 15%, transparent);
+  border-radius: 4px;
+  background: var(--material-background);
+  transition: all 0.3s ease;
+}
+.toolbar-header.highlight:hover {
+  box-shadow: 0 5px 15px
+    color-mix(in srgb, var(--material-background) 20%, transparent);
+  background: var(--color-background50);
+}
+.toolbar-header.highlight:empty {
+  display: none;
+}

addon/chrome/content/styles/templateEditor.css

@@ -0,0 +1,133 @@
+html,
+body {
+  min-width: 600px;
+  min-height: 400px;
+}
+html,
+body,
+.viewport {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  word-wrap: break-word;
+}
+.viewport {
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin: 0 5px 0 5px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.viewport-container {
+  padding: 0;
+  margin: 0;
+  height: calc(100% - 50px);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  border-bottom: var(--material-border);
+  background: var(--material-background);
+}
+.footer-container {
+  padding: 5px;
+}
+.list-viewport {
+  width: calc(30% - 10px);
+  height: 100%;
+  overflow: hidden;
+}
+#table-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+#templates-table {
+  height: 100%;
+}
+.editor-viewport {
+  display: flex;
+  flex-direction: column;
+  width: calc(40% - 10px);
+  padding: 5px;
+}
+.preview-viewport {
+  display: flex;
+  flex-direction: column;
+  width: calc(30% - 10px);
+  padding: 5px;
+}
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 0px;
+}
+.help-button {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-help-button;
+  min-width: 0;
+}
+.editor-button-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px;
+}
+.editor-button-container[hidden] {
+  display: none;
+}
+.format {
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.format:hover {
+  background-color: var(--fill-quinary);
+}
+.format:active {
+  background-color: var(--fill-quarternary);
+}
+.snippet {
+  border: var(--material-panedivider);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.916666667em;
+  line-height: 1.272727273;
+  overflow: hidden;
+  padding: 1px 4px;
+  text-overflow: ellipsis;
+  white-space: pre;
+  box-sizing: border-box;
+  color: var(--fill-primary);
+}
+.snippet.syntax {
+  background-color: color-mix(
+    in srgb,
+    var(--accent-yellow) 50%,
+    transparent 50%
+  );
+}
+.snippet.expression {
+  background-color: color-mix(
+    in srgb,
+    var(--accent-green) 50%,
+    transparent 50%
+  );
+}
+.snippet.variable {
+  background-color: color-mix(
+    in srgb,
+    var(--accent-azure) 50%,
+    transparent 50%
+  );
+}
+.snippet:hover {
+  background-color: var(--fill-quinary);
+}

addon/chrome/content/styles/templatePicker.css

@@ -0,0 +1,24 @@
+dialog {
+  -moz-window-dragging: drag;
+  max-height: 700px;
+}
+
+.viewport-container {
+  -moz-window-dragging: no-drag;
+  height: 100%;
+}
+
+.viewport {
+  width: 100%;
+}
+
+#table-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--material-background);
+}
+
+.virtualized-table {
+  height: 100%;
+}

addon/chrome/content/styles/toolbutton.css

@@ -0,0 +1,27 @@
+.tool-button {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  max-width: 36px;
+  min-width: 36px;
+  height: 36px;
+  max-height: 36px;
+  min-height: 36px;
+  border-radius: 5px;
+  background: transparent;
+  border: none;
+  text-decoration: none;
+  user-select: none;
+  -moz-user-select: none;
+  fill: currentColor;
+}
+
+.tool-button:hover {
+  background: var(--fill-quinary);
+  text-decoration: none;
+}
+
+.tool-button:active {
+  background: var(--fill-quarternary);
+  text-decoration: none;
+}

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

@@ -0,0 +1,3 @@
+bn-context {
+  min-width: 360px;
+}

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

@@ -0,0 +1,3 @@
+bn-details pane-header {
+  display: none;
+}

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

@@ -0,0 +1,44 @@
+bn-outline,
+.container {
+  width: 100%;
+  height: 100%;
+  background: var(--material-sidepane);
+}
+
+bn-outline {
+  min-width: 100px;
+  flex-direction: column;
+
+  .zotero-tb-button {
+    width: 28px;
+    height: 28px;
+    margin: 0px 4px 0px 4px;
+    padding: 0px 4px 0px 4px;
+    fill: currentColor;
+    -moz-context-properties: fill, fill-opacity;
+  }
+
+  .zotero-tb-button[type="menu"] {
+    width: 40px;
+  }
+}
+
+@media (-moz-platform: macos) {
+  #__addonRef__-left-toolbar {
+    -moz-window-dragging: drag;
+  }
+}
+
+#__addonRef__-left-toolbar {
+  background: var(--material-toolbar);
+  border-bottom: var(--material-panedivider);
+  padding: 6px 8px;
+}
+
+#__addonRef__-setOutline {
+  list-style-image: url("chrome://__addonRef__/content/icons/outline-20.svg");
+}
+
+#__addonRef__-saveOutline {
+  list-style-image: url("chrome://__addonRef__/content/icons/save-20.svg");
+}

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

@@ -0,0 +1,81 @@
+bn-related-box {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &[readonly] {
+    .add {
+      display: none;
+    }
+  }
+}
+
+bn-related-box .body,
+item-pane-custom-section .bn-link-body {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 12px;
+
+  .row {
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+
+    [zoteroUIDensity="comfortable"] & {
+      padding-block: 2px;
+    }
+
+    .box {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      padding-inline-start: 4px;
+      overflow: hidden;
+      border-radius: 5px;
+
+      &:not([disabled]):hover {
+        background-color: var(--fill-quinary);
+      }
+
+      &:not([disabled]):active {
+        background-color: var(--fill-quarternary);
+      }
+
+      .icon {
+        height: calc(1.3333333333 * var(--zotero-font-size));
+      }
+
+      .label {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 10;
+        width: 0;
+        flex: 1;
+        overflow: hidden;
+
+        .position-label {
+          color: var(--fill-secondary);
+        }
+      }
+
+      .icon,
+      .label {
+        padding-block: 2px;
+      }
+      flex: 1;
+    }
+
+    toolbarbutton {
+      margin-inline-start: auto;
+      visibility: hidden;
+    }
+
+    &:is(:hover, :focus-within) toolbarbutton {
+      visibility: visible;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+#bn-relation-graph {
+  width: 100%;
+  height: 250px;
+  border-radius: 8px;
+}