feat: add editor theming, sorta

src/hooks.ts

@@ -10,6 +10,10 @@ import { createZToolkit } from './utils/ztoolkit'
 import { registerReader } from './modules/ui/registerReader'
 import { switchTheme } from './modules/ui/switchTheme'
 import { getPref, setPref } from './utils/prefs'
+import {
+  attachInitialEditorStyles,
+  registerEditorObserver,
+} from './modules/ui/registerEditor'
 
 async function onStartup() {
   await Promise.all([
@@ -32,6 +36,8 @@ async function onMainWindowLoad(win: Window): Promise<void> {
   UIExampleFactory.registerStyleSheet()
   UIExampleFactory.registerToggleButton()
   await registerReader()
+  await registerEditorObserver()
+  attachInitialEditorStyles()
 }
 
 async function onMainWindowUnload(win: Window): Promise<void> {

src/modules/ui/registerEditor.ts

@@ -0,0 +1,130 @@
+import { TagElementProps } from 'zotero-plugin-toolkit/dist/tools/ui'
+import editor from '../../styles/editor.scss'
+import { getPref } from '../../utils/prefs'
+import { sleep, waitUtilAsync } from '../../utils/wait'
+
+export const EDITOR_WRAPPER_CLASS = 'zotero-context-pane-tab-notes-deck'
+export const ATTACHMENT_NOTE_EDITOR_ID = 'attachment-note-editor'
+export const MAIN_VIEW_EDITOR_ID = 'note-editor'
+export const CONTEXT_PANE_PINNED_NOTE_CLASS = 'zotero-context-pane-pinned-note'
+
+const EDITOR_STYLE_ID = 'editorStyle'
+export function getEditorWrappers() {}
+
+export function attachInitialEditorStyles() {
+  const readerIframeDoc = document.querySelector<HTMLIFrameElement>(
+    `.${EDITOR_WRAPPER_CLASS} iframe`,
+  )?.contentDocument
+
+  const regularViewIframeDoc = document.querySelector<HTMLIFrameElement>(
+    `#${MAIN_VIEW_EDITOR_ID} iframe`,
+  )?.contentDocument
+
+  const attachmentNoteIframeDoc = document.querySelector<HTMLIFrameElement>(
+    `#${ATTACHMENT_NOTE_EDITOR_ID} iframe`,
+  )?.contentDocument
+
+  const pinnedNoteIframeDoc = document.querySelector<HTMLIFrameElement>(
+    `.${CONTEXT_PANE_PINNED_NOTE_CLASS} iframe`,
+  )?.contentDocument
+
+  ;[
+    readerIframeDoc,
+    regularViewIframeDoc,
+    attachmentNoteIframeDoc,
+    pinnedNoteIframeDoc,
+  ].forEach(async (doc, idx) => {
+    if (doc) {
+      registerEditorStylesheet(doc)
+      return
+    }
+
+    if (idx === 3) {
+      await waitUtilAsync(
+        () =>
+          !!document.querySelector<HTMLIFrameElement>(
+            `.${CONTEXT_PANE_PINNED_NOTE_CLASS} iframe`,
+          )?.contentDocument,
+      )
+      const doc = document.querySelector<HTMLIFrameElement>(
+        `.${CONTEXT_PANE_PINNED_NOTE_CLASS} iframe`,
+      )?.contentDocument
+
+      if (doc) {
+        registerEditorStylesheet(doc)
+      }
+    }
+  })
+}
+
+export async function registerEditorObserver() {
+  const prevMutationObserver = cache.mutationObservers['editor']
+
+  if (prevMutationObserver) {
+    prevMutationObserver.disconnect()
+  }
+
+  const editorObserver = new window.MutationObserver((mutations) => {
+    ztoolkit.log('editor observer', mutations)
+    mutations.forEach(async (mutation) => {
+      if (mutation.type !== 'childList' || mutation.addedNodes.length === 0) {
+        ztoolkit.log('editor observer', 'no mutation')
+        return
+      }
+
+      const vbox = mutation.addedNodes[0] as HTMLElement
+
+      if (!vbox.getAttribute('data-tab-id')) {
+        ztoolkit.log('editor observer', 'no tab id on vbox')
+        return
+      }
+
+      const iframe = vbox.querySelector('iframe')
+
+      if (!iframe) {
+        ztoolkit.log('editor observer', 'no iframe')
+        return
+      }
+
+      await sleep(1000)
+      const iframeDoc = iframe.contentDocument!
+
+      registerEditorStylesheet(iframeDoc)
+    })
+  })
+
+  const editorWrapper = document.querySelector(`.${EDITOR_WRAPPER_CLASS}`)
+  ztoolkit.log('editor wrapper', editorWrapper)
+
+  if (editorWrapper) {
+    editorObserver.observe(editorWrapper, { childList: true })
+
+    cache.mutationObservers['editor'] = editorObserver
+  }
+}
+
+export function registerEditorStylesheet(doc: Document) {
+  const alreadyExistingStyle = doc?.querySelector(EDITOR_STYLE_ID)
+
+  const props: TagElementProps = {
+    tag: 'style',
+    attributes: {
+      id: EDITOR_STYLE_ID,
+    },
+    properties: {
+      textContent: editor,
+    },
+  }
+
+  /**
+   * Set the theme to dark
+   */
+  doc.querySelector('html')?.setAttribute('theme', getPref('current_theme'))
+
+  if (alreadyExistingStyle) {
+    ztoolkit.UI.replaceElement(props, alreadyExistingStyle)
+    return
+  }
+
+  ztoolkit.UI.appendElement(props, doc.body)
+}

src/styles/editor.scss

@@ -0,0 +1,124 @@
+@import './nord.scss';
+@import './scrollbar.scss';
+
+[theme='dark'] {
+  .editor {
+    background: var(--nord0);
+    color: var(--nord4) !important;
+    .toolbar {
+      background: var(--nord0);
+      color: var(--nord4);
+
+      button {
+        &.toolbar-button {
+          background-color: var(--nord0);
+          color: var(--nord4) !important;
+          &:hover {
+            background-color: var(--nord1);
+            color: var(--nord6) !important;
+          }
+        }
+        &.toolbar-button-active {
+          background-color: var(--nord3);
+          color: var(--nord6) !important;
+        }
+      }
+    }
+    .popup {
+      background: var(--nord1);
+      color: var(--nord4);
+
+      button {
+        &:hover,
+        &.active {
+          background: var(--nord3) !important;
+        }
+        background: var(--nord1) !important;
+      }
+    }
+  }
+
+  .prosemirror-dropcursor-block {
+    background: var(--nord3) !important;
+  }
+  .primary-editor {
+    background: var(--nord0);
+    color: var(--nord4);
+
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--h6-color) !important;
+    }
+
+    .ProseMirror-selectednode {
+      background: var(--nord1) !important;
+      color: var(--nord6) !important;
+    }
+
+    blockquote {
+      border-left: 3px solid var(--blockquote-border-left) !important;
+      border-right: 3px solid var(--blockquote-border-left) !important;
+    }
+
+    pre {
+      background: var(--pre-background) !important;
+    }
+
+    math-inline,
+    math-display {
+      color: var(--nord6) !important;
+    }
+
+    p code {
+      background: var(--pre-background) !important;
+    }
+
+    table {
+      border: 1px solid var(--table-border) !important;
+
+      td,
+      th {
+        border: 1px solid var(--table-border) !important;
+      }
+
+      .selectedCell:after {
+        background: var(
+          --primary-editor-selectedCell-after-background
+        ) !important;
+      }
+
+      .column-resize-handle {
+        background-color: var(
+          --primary-editor-column-resize-handle-background-color
+        ) !important;
+      }
+    }
+
+    hr {
+      background-color: var(--table-border) !important;
+
+      &.ProseMirror-selectednode {
+        background-color: var(
+          --primary-editor-column-resize-handle-background-color
+        ) !important;
+      }
+    }
+
+    &.column-resize-handle {
+      background-color: var(
+        --primary-editor-column-resize-handle-background-color
+      ) !important;
+    }
+
+    &.selectedCell:after {
+      background: var(
+        --primary-editor-selectedCell-after-background
+      ) !important;
+    }
+  }
+}

src/styles/night.scss

@@ -32,6 +32,11 @@
   #zotero-tb-split {
     background: var(--nord0) !important;
   }
+  .note-row {
+    .body-line {
+      color: var(--nord1) !important;
+    }
+  }
 
   /* ------------------------------- */