feat: Add visual editor button

src/lib/util/state.ts

@@ -80,7 +80,7 @@ const processState = async (state: State) => {
     processed.error = error as Error;
     errorDebug();
     console.error(error);
-    if ('hash' in error) {
+    if (error && typeof error === 'object' && 'hash' in error) {
       try {
         let errorString = processed.error.toString();
         const errorLineText = extractErrorLineText(errorString);
@@ -137,14 +137,23 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
       ? `[![](${png})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`
       : '',
     mermaidChart: ({
-      medium
+      medium,
+      campaign
     }: {
-      medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share' | 'vibe_diagramming';
+      medium:
+        | 'ai_repair'
+        | 'main_menu'
+        | 'save_diagram'
+        | 'share'
+        | 'vibe_diagramming'
+        | 'visual_edit';
+      campaign?: string;
     }) => {
       const utmSource = getUTMSource();
       const params = new URLSearchParams({
         utm_source: utmSource,
-        utm_medium: medium
+        utm_medium: medium,
+        ...(campaign ? { utm_campaign: campaign } : undefined)
       }).toString();
       return {
         save: `${MCBaseURL}/app/plugin/save?state=${serialized}&${params}`,

src/routes/edit/+page.svelte

@@ -19,12 +19,15 @@
   import VersionSecurityToolbar from '$/components/VersionSecurityToolbar.svelte';
   import View from '$/components/View.svelte';
   import type { EditorMode, Tab } from '$/types';
+  import { standardizeDiagramType } from '$/util/mermaid';
   import { shouldShowEditorChooser } from '$/util/migration/domainMigration';
   import { PanZoomState } from '$/util/panZoom';
   import { stateStore, updateCodeStore, urlsStore } from '$/util/state';
   import { logEvent, logMermaidChartClick } from '$/util/stats';
   import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
+  import { quintInOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
   import CodeIcon from '~icons/custom/code';
   import HistoryIcon from '~icons/material-symbols/history';
   import GearIcon from '~icons/material-symbols/settings-outline-rounded';
@@ -62,6 +65,20 @@
     });
   });
 
+  const visualEditDiagramTypes = new Set([
+    'flowchart',
+    'stateDiagram',
+    'classDiagram',
+    'sequenceDiagram',
+    'er',
+    'requirement',
+    'mindmap'
+  ]);
+  const showVisualEdit = $derived.by(() => {
+    const dt = $stateStore.diagramType;
+    return dt ? visualEditDiagramTypes.has(standardizeDiagramType(dt)) : false;
+  });
+
   let isHistoryOpen = $state(false);
 
   let editorPane: Resizable.Pane | undefined;
@@ -136,6 +153,24 @@
         <Resizable.Handle class="mr-1 hidden opacity-0 sm:block" />
         <Resizable.Pane minSize={15} class="relative flex h-full flex-1 flex-col overflow-hidden">
           <View {panZoomState} shouldShowGrid={$stateStore.grid} />
+          {#if showVisualEdit}
+            <div
+              class="absolute top-0 left-5 hidden md:block"
+              transition:slide={{ axis: 'x', easing: quintInOut }}>
+              <McWrapper>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  href={$urlsStore.mermaidChart({ medium: 'visual_edit', campaign: 'visual_1' })
+                    .save}
+                  target="_blank"
+                  onclick={() => logMermaidChartClick('visualEdit')}>
+                  <MermaidChartIcon />
+                  Edit Visually
+                </Button>
+              </McWrapper>
+            </div>
+          {/if}
           <div class="absolute top-0 right-0"><PanZoomToolbar {panZoomState} /></div>
           <div class="absolute right-0 bottom-0"><VersionSecurityToolbar /></div>
           <div class="absolute bottom-0 left-0 sm:left-5"><SyncRoughToolbar /></div>