code refactor and fix icon hover issue

2026-02-12 15:52:21 +05:30
parent 830df8c44b
commit aa3479d508
4 changed files with 61 additions and 44 deletions
@@ -7,11 +7,11 @@
    top: number;
    show: boolean;
    suggestion: string;
-    onclose: () => void;
-    ontryFree: () => void;
+    onClose: () => void;
+    onTryFree: () => void;
  }

-  let { top, show, suggestion = $bindable(), onclose, ontryFree }: Props = $props();
+  let { top, show, suggestion = $bindable(), onClose, onTryFree }: Props = $props();

  let textarea = $state<HTMLTextAreaElement>();

@@ -42,8 +42,7 @@
 {#if show}
  <div
    class={cn(
-      'button-container-for-animation absolute right-4 left-12 z-50 flex flex-col gap-2 rounded-xl border-2 bg-white p-2 shadow-xl',
-      'border-primary-200 dark:border-secondary-700 dark:bg-secondary-900',
+      'button-container-for-animation absolute right-4 left-12 z-50 flex flex-col gap-2 rounded-xl border-2 border-border bg-background p-2 shadow-xl dark:border-border-dark dark:bg-secondary',
      !suggestion.trim() && 'rainbow-border'
    )}
    style="top: {top}px;"
@@ -58,26 +57,26 @@
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            if (suggestion.trim()) {
-              ontryFree();
+              onTryFree();
            }
          }
        }}
        placeholder="Describe what to add or change"
        rows="1"
-        class="focus font-recursive flex-1 resize-none border-none bg-transparent px-1 text-sm font-normal text-foreground placeholder:text-muted-foreground focus:ring-0 focus:outline-none disabled:opacity-50 dark:text-muted-foreground dark:placeholder:text-muted-foreground"
+        class="focus font-recursive min-h-0 flex-1 resize-none border-none bg-transparent px-1 text-sm font-normal text-foreground placeholder:text-muted-foreground focus:ring-0 focus:outline-none disabled:opacity-50 dark:text-foreground dark:placeholder:text-muted-foreground"
        style="height: 20px; overflow-y: hidden;"></textarea>
-      <button onclick={onclose} class="text-muted-foreground hover:text-foreground">
+      <button onclick={onClose} class="text-muted-foreground hover:text-foreground">
        <CloseIcon class="size-4" />
      </button>
    </div>

    <div class="flex items-center justify-between">
-      <span class="font-recursive text-xs font-normal text-foreground"
+      <span class="font-recursive text-xs font-normal text-foreground dark:text-foreground"
        >Signup to Mermaid.ai to try AI</span>
      <Button
        disabled={!suggestion.trim()}
        class="font-recursive h-6 w-16 gap-1.5 rounded-sm bg-accent p-1 text-xs font-medium text-white no-underline hover:bg-accent/90 hover:text-white hover:no-underline active:bg-accent/80 dark:bg-accent dark:text-white! dark:hover:bg-accent/90 dark:active:bg-accent/80"
-        onclick={ontryFree}>
+        onclick={onTryFree}>
        Try free
      </Button>
    </div>
@@ -29,6 +29,7 @@
  let decorationsCollection: monaco.editor.IEditorDecorationsCollection | undefined;
  let hintCollection: monaco.editor.IEditorDecorationsCollection | undefined;
  let suggestion = $state('');
+  let lastMouseLine = 0;

  const quickEditHintStyle = `--quick-edit-hint-text: '${isMac ? 'Quick edit (⌘⏎)' : 'Quick edit (Ctrl+⏎)'}'`;

@@ -45,27 +46,42 @@

  const renderQuickEditHint = () => {
    hintCollection?.clear();
+    decorationsCollection?.clear();
    if (!editor || showPopup) {
      return;
    }
    const model = editor.getModel();
    const position = editor.getPosition();
-    if (!model || !position) {
+    if (!model) {
      return;
    }

-    const { lineNumber } = position;
-    if (model.getLineContent(lineNumber).trim() === '') {
-      const column = model.getLineMaxColumn(lineNumber);
-      hintCollection?.set([
+    if (lastMouseLine > 0 && model.id === mermaidModel.id) {
+      decorationsCollection?.set([
        {
-          range: new monaco.Range(lineNumber, column, lineNumber, column),
+          range: new monaco.Range(lastMouseLine, 1, lastMouseLine, 1),
          options: {
-            afterContentClassName: 'quick-edit-hint'
+            isWholeLine: true,
+            glyphMarginClassName: 'suggestion-icon'
          }
        }
      ]);
    }
+
+    if (position) {
+      const { lineNumber } = position;
+      if (model.getLineContent(lineNumber).trim() === '') {
+        const column = model.getLineMaxColumn(lineNumber);
+        hintCollection?.set([
+          {
+            range: new monaco.Range(lineNumber, column, lineNumber, column),
+            options: {
+              afterContentClassName: 'quick-edit-hint'
+            }
+          }
+        ]);
+      }
+    }
  };

  onMount(() => {
@@ -115,6 +131,19 @@
      }
    });

+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+      const position = editor?.getPosition();
+      if (position) {
+        popupPosition = {
+          top:
+            (editor?.getTopForLineNumber(position.lineNumber) ?? 0) - (editor?.getScrollTop() ?? 0)
+        };
+        showPopup = true;
+      }
+
+      renderQuickEditHint();
+    });
+
    editor.onDidChangeCursorPosition(() => {
      renderQuickEditHint();
    });
@@ -164,24 +193,13 @@
      if (showPopup) return;
      if (editor.getModel()?.id !== mermaidModel.id) return;

-      if (e.target.position?.lineNumber) {
-        const line = e.target.position.lineNumber;
-        decorationsCollection?.set([
-          {
-            range: new monaco.Range(line, 1, line, 1),
-            options: {
-              isWholeLine: true,
-              glyphMarginClassName: 'suggestion-icon'
-            }
-          }
-        ]);
-      } else {
-        decorationsCollection?.clear();
-      }
+      lastMouseLine = e.target.position?.lineNumber ?? 0;
+      renderQuickEditHint();
    });

    editor.onMouseLeave(() => {
-      decorationsCollection?.clear();
+      lastMouseLine = 0;
+      renderQuickEditHint();
    });

    const unsubscribeMode = mode.subscribe((mode) => {
@@ -219,12 +237,12 @@
    top={popupPosition.top}
    show={showPopup}
    bind:suggestion
-    onclose={() => {
+    onClose={() => {
      showPopup = false;
      suggestion = '';
      renderQuickEditHint();
    }}
-    ontryFree={() => {
+    onTryFree={() => {
      window.open($urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save, '_blank');
      showPopup = false;
      suggestion = '';
@@ -11,7 +11,7 @@ import {
 import { parse } from './mermaid';
 import { localStorage, persist } from './persist';
 import { deserializeState, pakoSerde, serializeState } from './serde';
-import { errorDebug, formatJSON, getSource, MCBaseURL } from './util';
+import { errorDebug, formatJSON, getUTMSource, MCBaseURL } from './util';

 export const defaultState: State = {
  code: `flowchart TD
@@ -141,7 +141,7 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
    }: {
      medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share' | 'vibe_diagramming';
    }) => {
-      const utmSource = getSource();
+      const utmSource = getUTMSource();
      const params = new URLSearchParams({
        utm_source: utmSource,
        utm_medium: medium
@@ -1,4 +1,4 @@
-import { C } from '../constants';
+import { C } from '$/constants';
 import { env } from './env';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
@@ -12,13 +12,6 @@ export const getDomain = (url?: string): string => {
  return domain;
 };

-export const getSource = (): string => {
-  if (typeof window !== 'undefined' && window.location.host.includes('mermaid.ai')) {
-    return C.aiLiveEditor;
-  }
-  return C.utmSource;
-};
-
 export const loadStateFromURL = (): void => {
  loadState(window.location.hash.slice(1));
 };
@@ -96,3 +89,10 @@ function fallbackCopyToClipboard(text: string) {
    textArea.remove();
  }
 }
+
+export const getUTMSource = (): string => {
+  if (typeof window !== 'undefined' && window.location.host.includes('mermaid.ai')) {
+    return C.aiLiveEditor;
+  }
+  return C.utmSource;
+};