fix: 1.toolbar style

src/stores/editor.ts

@@ -7,6 +7,7 @@ export const useEditorStore = defineStore('editor', () => {
  const totalTask = ref(0);
 
  const editorState: EditorState = reactive({
+ currentEle: null as unknown as Element,
  position: {
  top: 0,
  bottom: 0,
@@ -26,12 +27,17 @@ export const useEditorStore = defineStore('editor', () => {
  function updateSelection(selection) {
  editorState.selection = selection;
  }
+
+ function updateCurrentEle(ele: Element) {
+ editorState.currentEle = ele;
+ }
  return {
  editorState,
  totalTime: 0,
  totalTask,
  increment,
  updatePosition,
  updateSelection,
+ updateCurrentEle,
  };
 });

src/types/types.ts

@@ -2,7 +2,7 @@ import { App, type Command } from 'obsidian';
 
 // TODO namespace?
 export const eventTypes = {
- openBrowser: 'open-browser',
+ openBrowser: 'open-browser',
  pomodoroChange: 'pomodoro-change',
  calledFunction: 'called-function',
 };
@@ -52,4 +52,8 @@ export class Tag {
  }
 }
 
-export type EditorState = { position: { top: number; bottom: number; left: number; right: number }; selection: string };
+export type EditorState = {
+ currentEle: Element;
+ position: { top: number; bottom: number; left: number; right: number };
+ selection: string;
+};

src/ui/CustomViewContainer.vue

@@ -1,7 +1,9 @@
 <template>
  <div id="customViewContainer">
  <NNotificationProvider :max="3">
- <Toolbar />
+ <Teleport to="body" disable="false">
+ <Toolbar />
+ </Teleport>
  </NNotificationProvider>
  </div>
 </template>

src/ui/Toolbar.vue

@@ -74,6 +74,7 @@ import { storeToRefs } from 'pinia';
 import { customTitle, customContent, customAvatar, customDescription } from './CustomContent';
 import { eventTypes } from '../types/types';
 import Logger from '../utils/logger';
+import { getNumberFromStr } from '../utils/common';
 
 const { editorState: currentState } = storeToRefs(useEditorStore());
 const isShow = ref(false);
@@ -106,10 +107,66 @@ watchEffect(() => {
  oldSelection = currentVal;
 });
 
+function getElementViewLeft(element) {
+ var actualLeft = element.offsetLeft;
+ var current = element.offsetParent;
+
+ while (current !== null) {
+ actualLeft += current.offsetLeft;
+ current = current.offsetParent;
+ }
+
+ if (document.compatMode == 'BackCompat') {
+ var elementScrollLeft = document.body.scrollLeft;
+ } else {
+ var elementScrollLeft = document.documentElement.scrollLeft;
+ }
+
+ return actualLeft - elementScrollLeft;
+}
+
+function getElementViewTop(element) {
+ var actualTop = element.offsetTop;
+ var current = element.offsetParent;
+
+ while (current !== null) {
+ actualTop += current.offsetTop;
+ current = current.offsetParent;
+ }
+
+ if (document.compatMode == 'BackCompat') {
+ var elementScrollTop = document.body.scrollTop;
+ } else {
+ var elementScrollTop = document.documentElement.scrollTop;
+ }
+
+ return actualTop - elementScrollTop;
+}
+
 const getComputedStyle = () => {
+ const activeNode = document.elementFromPoint(currentState.value.position.left, currentState.value.position.top);
+ const getTop = () => {
+ let topOffset = 20;
+ let lineHeight = activeNode?.getCssPropertyValue('line-height');
+ if (lineHeight && lineHeight !== '0') {
+ topOffset = getNumberFromStr(lineHeight)[0] || 20;
+ }
+ return currentState.value.position.top + topOffset;
+ };
+ const getLeft = () => {
+ const activeDoc = activeDocument.querySelector('.workspace-leaf.mod-active .cm-content') as any;
+
+ if (activeDoc.innerWidth < 400) {
+ return getElementViewLeft(activeNode);
+ }
+ return currentState.value.position.left + 4;
+ };
+
  return {
- top: `${currentState.value.position.top + 20}px`,
- left: `${currentState.value.position.left + 5}px`,
+ top: `${getTop()}px`,
+ left: `${getLeft()}px`,
+ width: 'max-content',
+ 'max-width': '390px'
  };
 };
 

src/utils/common.ts

@@ -14,3 +14,8 @@ export function randomColor() {
 export const treeUtil = {
  uniq: (a: any[]) => [...new Set(a)],
 };
+
+export function getNumberFromStr(str: string) {
+ const nums = str.match(/\d+(.\d+)?/g);
+ return nums?.map(num => parseFloat(num)) || [];
+}

src/utils/editor.ts

@@ -50,8 +50,13 @@ export class EditorUtils {
  }
  const editor = this.app.workspace.activeEditor?.editor;
  if (!editor) return;
- useEditorStore().updatePosition(this.getCoords(editor));
- useEditorStore().updateSelection(editor.getSelection());
+ const position = this.getCoords(editor);
+ const activeNode = document.elementFromPoint(position.left, position.top);
+ if (activeNode) {
+ useEditorStore().updateCurrentEle(activeNode);
+ useEditorStore().updatePosition(position);
+ useEditorStore().updateSelection(editor.getSelection());
+ }
  }
 
  getCoords(editor: Editor): { left: number; top: number; right: number; bottom: number } {