From aa3479d5083f83faf31c070eec9cd6ffef8ba84e Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 12 Feb 2026 15:52:21 +0530 Subject: [PATCH] code refactor and fix icon hover issue --- src/lib/components/AIGlyphPopup.svelte | 19 ++++--- src/lib/components/DesktopEditor.svelte | 66 ++++++++++++++++--------- src/lib/util/state.ts | 4 +- src/lib/util/util.ts | 16 +++--- 4 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/lib/components/AIGlyphPopup.svelte b/src/lib/components/AIGlyphPopup.svelte index 53950b59..e50bec46 100644 --- a/src/lib/components/AIGlyphPopup.svelte +++ b/src/lib/components/AIGlyphPopup.svelte @@ -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(); @@ -42,8 +42,7 @@ {#if show}
-
- Signup to Mermaid.ai to try AI
diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte index 4e66d2d2..ebe3b422 100644 --- a/src/lib/components/DesktopEditor.svelte +++ b/src/lib/components/DesktopEditor.svelte @@ -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 = ''; diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index c4dc0e05..b52cd78a 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -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 diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index 790d2802..8eb5e2be 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -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; +};