I choose a colorboard instead of a menu

src/plugin/main.ts

@@ -9,6 +9,7 @@ import highlighterMenu from "src/ui/highlighterMenu";
 import { createHighlighterIcons } from "src/icons/customIcons";
 
 import { createStyles } from "src/utils/createStyles";
+import { log } from "console";
 export default class HighlightrPlugin extends Plugin {
  app: App;
  editor: Editor;
@@ -33,12 +34,23 @@ export default class HighlightrPlugin extends Plugin {
  name: "Open Highlightr",
  icon: "highlightr-pen",
  editorCallback: (editor) => {
- !document.querySelector(".menu.highlighterContainer")
- ? highlighterMenu(this.app, this, this.settings, editor)
- : true;
+ let obj = document.querySelector(".colorboard");
+ if (obj == null) {
+ highlighterMenu(this.app, this, this.settings, editor)
+ } else {
+ obj.parentNode.removeChild(obj);
+ }
  },
  });
 
+ let rightBarDOM = document.querySelector(".workspace-split, .mod-horizontal, .mod-right-split");
+ rightBarDOM.addEventListener("resize", function (e) {
+ console.log("resize");
+ console.log(e);
+
+ })
+
+
  addEventListener("Highlightr-NewCommand", () => {
  this.reloadStyles(this.settings);
  this.generateCommands(this.editor);
@@ -117,11 +129,11 @@ export default class HighlightrPlugin extends Plugin {
  }
 
  (selectedText && sufFirst === " ") ||
- (!selectedText && sufFirst === " ")
+  (!selectedText && sufFirst === " ")
  ? editor.replaceSelection(`${prefix}${selectedText}${suffix}`)
  : selectedText && sufFirst !== " "
- ? editor.replaceSelection(`${prefix}${selectedText}${suffix} `)
- : editor.replaceSelection(`${prefix}${selectedText}${suffix} `);
+  ? editor.replaceSelection(`${prefix}${selectedText}${suffix} `)
+  : editor.replaceSelection(`${prefix}${selectedText}${suffix} `);
 
  return setCursor(1);
  };

src/ui/highlighterMenu.ts

@@ -1,32 +1,26 @@
 import type HighlightrPlugin from "src/plugin/main";
-import { App, Menu, Notice, Editor } from "obsidian";
+import { App, Menu, Notice, Editor, ButtonComponent } from "obsidian";
 import { HighlightrSettings } from "src/settings/settingsData";
 import { Coords } from "src/settings/types";
 
 const highlighterMenu = (
  app: App,
  plugin: HighlightrPlugin,
  settings: HighlightrSettings,
- editor: Editor,
- event: MouseEvent
+ editor: Editor
 ): void => {
  if (editor && editor.hasFocus()) {
  const cursor = editor.getCursor("from");
  let coords: Coords;
  const editorCli = editor as any;
 
- const menu = new Menu(plugin.app).addItem((item) => {
- const itemDom = (item as any).dom as HTMLElement;
- itemDom.setAttribute("style", "display: none");
- });
-
- const menuDom = (menu as any).dom as HTMLElement;
- menuDom.addClass("highlighterContainer");
+ const colorboard = createEl("div");
+ colorboard.setAttribute("class", "colorboard")
 
  settings.highlighterOrder.forEach((highlighter) => {
- const colorButton = menuDom.createEl("div");
+ const colorButton = createEl('div')
+ colorboard.appendChild(colorButton)
  colorButton.setAttribute("id", `${highlighter}`);
-
  colorButton.addEventListener("click", function (event) {
  (app as any).commands.executeCommandById(
  `highlightr-plugin:${highlighter}`
@@ -58,11 +52,18 @@ const highlighterMenu = (
  } else {
  return;
  }
+ console.log("ffzdebug colorboard showAtPosition");
+ console.log(colorboard);
 
- menu.showAtPosition({
- x: coords.right + 25,
- y: coords.top + 20,
- });
+ // colorboard.style.left = `${coords.right + 25}px`;
+ // colorboard.style.top = `${coords.top + 20}px`;
+
+ // menu.showAtPosition({
+ // x: coords.right + 25,
+ // y: coords.top + 20,
+ // });
+
+ document.body.appendChild(colorboard);
  } else {
  new Notice("Focus must be in editor");
  }