diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index ff50607..baffa35 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1538,6 +1538,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -3563,6 +3569,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "http-range",
  "jni",
  "libc",
  "log",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index fee5a0f..6dfab0d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["protocol-asset"] }
 tauri-plugin-opener = "2"
 tauri-plugin-dialog = "2"
 serde = { version = "1", features = ["derive"] }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f46498f..6c593e3 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -18,7 +18,13 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": {
+          "allow": ["**"]
+        }
+      }
     }
   },
   "bundle": {
diff --git a/src/__tests__/setup.ts b/src/__tests__/setup.ts
index 40fe1da..13df897 100644
--- a/src/__tests__/setup.ts
+++ b/src/__tests__/setup.ts
@@ -3,6 +3,7 @@ import { vi } from 'vitest'
 // Mock @tauri-apps/api/core
 vi.mock('@tauri-apps/api/core', () => ({
   invoke: vi.fn().mockResolvedValue(''),
+  convertFileSrc: vi.fn((path: string) => `http://asset.localhost/${path}`),
 }))
 
 // Mock @tauri-apps/plugin-dialog
diff --git a/src/__tests__/utils/imagePathResolver.test.ts b/src/__tests__/utils/imagePathResolver.test.ts
new file mode 100644
index 0000000..0085ad0
--- /dev/null
+++ b/src/__tests__/utils/imagePathResolver.test.ts
@@ -0,0 +1,244 @@
+import { describe, it, expect, vi } from 'vitest'
+import {
+  resolveImagePaths,
+  unresolveImagePaths,
+  resolveRelativeSrc,
+  getDocumentDir,
+  isAbsoluteSrc,
+} from '../../utils/imagePathResolver'
+
+// Mock convertFileSrc to simulate Tauri's asset protocol
+vi.mock('@tauri-apps/api/core', async () => {
+  const actual = await vi.importActual<Record<string, unknown>>('@tauri-apps/api/core')
+  return {
+    ...actual,
+    invoke: vi.fn().mockResolvedValue(''),
+    convertFileSrc: vi.fn((path: string) => `http://asset.localhost/${path}`),
+  }
+})
+
+describe('getDocumentDir', () => {
+  it('returns directory for a file path', () => {
+    expect(getDocumentDir('/Users/foo/notes/doc.md')).toBe('/Users/foo/notes')
+  })
+
+  it('returns directory for nested path', () => {
+    expect(getDocumentDir('/a/b/c/file.txt')).toBe('/a/b/c')
+  })
+
+  it('returns null for empty string', () => {
+    expect(getDocumentDir('')).toBeNull()
+  })
+
+  it('returns null for null/undefined', () => {
+    expect(getDocumentDir(null)).toBeNull()
+    expect(getDocumentDir(undefined)).toBeNull()
+  })
+})
+
+describe('isAbsoluteSrc', () => {
+  it('returns true for http URLs', () => {
+    expect(isAbsoluteSrc('http://example.com/img.png')).toBe(true)
+    expect(isAbsoluteSrc('https://example.com/img.png')).toBe(true)
+  })
+
+  it('returns true for data URLs', () => {
+    expect(isAbsoluteSrc('data:image/png;base64,abc')).toBe(true)
+  })
+
+  it('returns true for blob URLs', () => {
+    expect(isAbsoluteSrc('blob:http://localhost/abc')).toBe(true)
+  })
+
+  it('returns true for absolute file paths', () => {
+    expect(isAbsoluteSrc('/Users/foo/photo.png')).toBe(true)
+  })
+
+  it('returns false for relative paths', () => {
+    expect(isAbsoluteSrc('assets/photo.png')).toBe(false)
+    expect(isAbsoluteSrc('images/2024/photo.png')).toBe(false)
+    expect(isAbsoluteSrc('photo.png')).toBe(false)
+  })
+})
+
+describe('resolveRelativeSrc', () => {
+  const docDir = '/Users/foo/notes'
+
+  it('resolves a relative path to an asset URL', () => {
+    expect(resolveRelativeSrc('assets/photo.png', docDir)).toBe(
+      'http://asset.localhost//Users/foo/notes/assets/photo.png',
+    )
+  })
+
+  it('returns absolute URLs unchanged', () => {
+    expect(resolveRelativeSrc('https://example.com/img.png', docDir)).toBe(
+      'https://example.com/img.png',
+    )
+    expect(resolveRelativeSrc('data:image/png;base64,abc', docDir)).toBe(
+      'data:image/png;base64,abc',
+    )
+  })
+
+  it('returns empty string unchanged', () => {
+    expect(resolveRelativeSrc('', docDir)).toBe('')
+  })
+
+  it('returns src unchanged when docDir is empty', () => {
+    expect(resolveRelativeSrc('assets/photo.png', '')).toBe('assets/photo.png')
+  })
+})
+
+describe('resolveImagePaths', () => {
+  const docDir = '/Users/foo/notes'
+
+  it('resolves relative image src to asset URL', () => {
+    const html = '<img src="assets/photo.png">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toBe(
+      '<img src="http://asset.localhost//Users/foo/notes/assets/photo.png" data-original-src="assets/photo.png">',
+    )
+  })
+
+  it('resolves multiple images', () => {
+    const html = '<p><img src="assets/a.png"> text <img src="assets/b.jpg"></p>'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toContain('data-original-src="assets/a.png"')
+    expect(result).toContain('data-original-src="assets/b.jpg"')
+    expect(result).toContain('http://asset.localhost//Users/foo/notes/assets/a.png')
+    expect(result).toContain('http://asset.localhost//Users/foo/notes/assets/b.jpg')
+  })
+
+  it('preserves absolute http URLs', () => {
+    const html = '<img src="https://example.com/photo.png">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+
+  it('preserves data URLs', () => {
+    const html = '<img src="data:image/png;base64,abc123">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+
+  it('preserves already-resolved asset URLs', () => {
+    const html = '<img src="http://asset.localhost//some/path.png">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+
+  it('returns html unchanged when docDir is empty', () => {
+    const html = '<img src="assets/photo.png">'
+    expect(resolveImagePaths(html, '')).toBe(html)
+    expect(resolveImagePaths(html, null as unknown as string)).toBe(html)
+  })
+
+  it('handles images with alt and title attributes', () => {
+    const html = '<img src="assets/photo.png" alt="My photo" title="A photo">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toContain('http://asset.localhost//Users/foo/notes/assets/photo.png')
+    expect(result).toContain('data-original-src="assets/photo.png"')
+    expect(result).toContain('alt="My photo"')
+    expect(result).toContain('title="A photo"')
+  })
+
+  it('handles src with subdirectories', () => {
+    const html = '<img src="images/2024/photo.png">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toContain('http://asset.localhost//Users/foo/notes/images/2024/photo.png')
+    expect(result).toContain('data-original-src="images/2024/photo.png"')
+  })
+
+  it('handles src with spaces (encoded)', () => {
+    const html = '<img src="assets/my%20photo.png">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toContain('data-original-src="assets/my%20photo.png"')
+  })
+
+  it('does not resolve blob URLs', () => {
+    const html = '<img src="blob:http://localhost/abc123">'
+    const result = resolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+})
+
+describe('unresolveImagePaths', () => {
+  const docDir = '/Users/foo/notes'
+
+  it('restores original src from data-original-src', () => {
+    const html =
+      '<img src="http://asset.localhost//Users/foo/notes/assets/photo.png" data-original-src="assets/photo.png">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toBe('<img src="assets/photo.png">')
+  })
+
+  it('strips asset URL prefix when no data-original-src', () => {
+    const html = '<img src="http://asset.localhost//Users/foo/notes/assets/photo.png">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toBe('<img src="assets/photo.png">')
+  })
+
+  it('handles multiple images with mixed strategies', () => {
+    const html =
+      '<img src="http://asset.localhost//Users/foo/notes/assets/a.png" data-original-src="assets/a.png">' +
+      '<img src="http://asset.localhost//Users/foo/notes/assets/b.jpg">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toContain('src="assets/a.png"')
+    expect(result).toContain('src="assets/b.jpg"')
+    expect(result).not.toContain('data-original-src')
+    expect(result).not.toContain('asset.localhost')
+  })
+
+  it('preserves non-asset images unchanged', () => {
+    const html = '<img src="https://example.com/photo.png">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+
+  it('preserves data URLs unchanged', () => {
+    const html = '<img src="data:image/png;base64,abc123">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toBe(html)
+  })
+
+  it('returns html unchanged when docDir is empty', () => {
+    const html =
+      '<img src="http://asset.localhost//path/photo.png" data-original-src="assets/photo.png">'
+    expect(unresolveImagePaths(html, '')).toBe(html)
+  })
+
+  it('does not strip asset URLs from a different document dir', () => {
+    const html = '<img src="http://asset.localhost//other/dir/assets/photo.png">'
+    const result = unresolveImagePaths(html, docDir)
+    // Should not strip because the path doesn't start with docDir
+    expect(result).toBe(html)
+  })
+})
+
+describe('round-trip', () => {
+  const docDir = '/Users/foo/notes'
+
+  it('resolve then unresolve preserves original HTML', () => {
+    const original = '<p>Hello <img src="assets/photo.png" alt="test"> world</p>'
+    const resolved = resolveImagePaths(original, docDir)
+    const restored = unresolveImagePaths(resolved, docDir)
+    expect(restored).toBe(original)
+  })
+
+  it('round-trips multiple images with mixed sources', () => {
+    const original =
+      '<img src="assets/local.png">' +
+      '<img src="https://example.com/remote.png">' +
+      '<img src="data:image/png;base64,abc">'
+    const resolved = resolveImagePaths(original, docDir)
+    const restored = unresolveImagePaths(resolved, docDir)
+    expect(restored).toBe(original)
+  })
+
+  it('unresolve handles asset URLs without data-original-src (input rule path)', () => {
+    // Simulates what happens when input rule resolves a path directly
+    const html =
+      '<img src="http://asset.localhost//Users/foo/notes/assets/typed-image.png" alt="test">'
+    const result = unresolveImagePaths(html, docDir)
+    expect(result).toBe('<img src="assets/typed-image.png" alt="test">')
+  })
+})
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 5a31f4d..79f4363 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -1,10 +1,17 @@
 <template>
-  <div class="editor-wrapper" :class="{ 'focus-mode': focusModeStore.enabled, 'typewriter-mode': typewriterModeStore.enabled }" ref="editorWrapper">
+  <div
+    ref="editorWrapper"
+    class="editor-wrapper"
+    :class="{
+      'focus-mode': focusModeStore.enabled,
+      'typewriter-mode': typewriterModeStore.enabled,
+    }"
+  >
     <!-- WYSIWYG mode (TipTap) -->
     <div
       v-show="editorModeStore.isWysiwyg"
-      class="editor-container"
       ref="editorContainer"
+      class="editor-container"
       @scroll.passive="handleScroll"
     >
       <editor-content :editor="editor" class="editor-content" />
@@ -23,7 +30,9 @@
     <!-- Mode indicator overlay (brief flash on toggle) -->
     <Transition name="mode-indicator">
       <div v-if="showModeIndicator" class="mode-indicator-overlay">
-        <span class="mode-indicator-text">{{ editorModeStore.isWysiwyg ? 'WYSIWYG' : 'Source' }}</span>
+        <span class="mode-indicator-text">{{
+          editorModeStore.isWysiwyg ? 'WYSIWYG' : 'Source'
+        }}</span>
       </div>
     </Transition>
 
@@ -38,24 +47,24 @@
     />
 
     <!-- Mode toggle button in bottom-right -->
-    <div class="editor-mode-indicator" @click="handleToggleMode" title="Toggle Source/WYSIWYG (⌘/)">
+    <div class="editor-mode-indicator" title="Toggle Source/WYSIWYG (⌘/)" @click="handleToggleMode">
       <span class="mode-icon">{{ editorModeStore.isWysiwyg ? '&lt;/&gt;' : '◉' }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
-import { openUrl } from "@tauri-apps/plugin-opener";
-import { useEditorModeStore } from "../stores/editorMode";
-import { useOutlineStore } from "../stores/outline";
-import { useFocusModeStore } from "../stores/focusMode";
-import { useTypewriterModeStore } from "../stores/typewriterMode";
-import { useEditor, EditorContent } from "@tiptap/vue-3";
-import StarterKit from "@tiptap/starter-kit";
-import Placeholder from "@tiptap/extension-placeholder";
-import { GdownLink } from "../extensions/GdownLink";
-import { GdownImage } from "../extensions/GdownImage";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { useEditorModeStore } from '../stores/editorMode'
+import { useOutlineStore } from '../stores/outline'
+import { useFocusModeStore } from '../stores/focusMode'
+import { useTypewriterModeStore } from '../stores/typewriterMode'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import { GdownLink } from '../extensions/GdownLink'
+import { GdownImage } from '../extensions/GdownImage'
 import {
   GdownBold,
   GdownItalic,
@@ -63,65 +72,86 @@ import {
   GdownCode,
   GdownUnderline,
   GdownHighlight,
-} from "../extensions/InlineFormatting";
-import { GdownHeading } from "../extensions/GdownHeading";
-import { GdownBlockquote } from "../extensions/GdownBlockquote";
-import { GdownHorizontalRule } from "../extensions/GdownHorizontalRule";
-import { GdownCodeBlock } from "../extensions/GdownCodeBlock";
-import { GdownBulletList, GdownListItem } from "../extensions/GdownBulletList";
-import { GdownOrderedList } from "../extensions/GdownOrderedList";
-import { GdownTaskList, GdownTaskItem } from "../extensions/GdownTaskList";
-import { GdownTable, TableRow, TableCell, TableHeader } from "../extensions/GdownTable";
-import { MathInline } from "../extensions/MathInline";
-import { MathBlock } from "../extensions/MathBlock";
-import { MermaidBlock } from "../extensions/MermaidBlock";
-import { FrontMatter } from "../extensions/FrontMatter";
-import { FocusMode } from "../extensions/FocusMode";
-import { TypewriterMode } from "../extensions/TypewriterMode";
-import { SearchHighlight, getSearchState } from "../extensions/SearchHighlight";
-import Subscript from "@tiptap/extension-subscript";
-import Superscript from "@tiptap/extension-superscript";
-import LinkTooltip from "./LinkTooltip.vue";
-import InsertLinkDialog from "./InsertLinkDialog.vue";
-import FindReplace from "./FindReplace.vue";
-import SourceEditor from "./SourceEditor.vue";
-import { useFindReplaceStore } from "../stores/findReplace";
-import { useEditorSettingsStore } from "../stores/editorSettings";
-import { useTabsStore } from "../stores/tabs";
-import { htmlToMarkdown, markdownToHtml } from "../utils/markdownConverter";
-import { assembleFrontMatter, parseFrontMatter } from "../utils/frontmatter";
-import { useAutoSave } from "../services/autoSave";
-import type { EditorState } from "../types/tab";
-
-const tabsStore = useTabsStore();
-const editorModeStore = useEditorModeStore();
-const outlineStore = useOutlineStore();
-const focusModeStore = useFocusModeStore();
-const typewriterModeStore = useTypewriterModeStore();
-const findReplaceStore = useFindReplaceStore();
-const editorSettings = useEditorSettingsStore();
+} from '../extensions/InlineFormatting'
+import { GdownHeading } from '../extensions/GdownHeading'
+import { GdownBlockquote } from '../extensions/GdownBlockquote'
+import { GdownHorizontalRule } from '../extensions/GdownHorizontalRule'
+import { GdownCodeBlock } from '../extensions/GdownCodeBlock'
+import { GdownBulletList, GdownListItem } from '../extensions/GdownBulletList'
+import { GdownOrderedList } from '../extensions/GdownOrderedList'
+import { GdownTaskList, GdownTaskItem } from '../extensions/GdownTaskList'
+import { GdownTable, TableRow, TableCell, TableHeader } from '../extensions/GdownTable'
+import { MathInline } from '../extensions/MathInline'
+import { MathBlock } from '../extensions/MathBlock'
+import { MermaidBlock } from '../extensions/MermaidBlock'
+import { FrontMatter } from '../extensions/FrontMatter'
+import { FocusMode } from '../extensions/FocusMode'
+import { TypewriterMode } from '../extensions/TypewriterMode'
+import { SearchHighlight, getSearchState } from '../extensions/SearchHighlight'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
+import LinkTooltip from './LinkTooltip.vue'
+import InsertLinkDialog from './InsertLinkDialog.vue'
+import FindReplace from './FindReplace.vue'
+import SourceEditor from './SourceEditor.vue'
+import { useFindReplaceStore } from '../stores/findReplace'
+import { useEditorSettingsStore } from '../stores/editorSettings'
+import { useTabsStore } from '../stores/tabs'
+import { htmlToMarkdown, markdownToHtml } from '../utils/markdownConverter'
+import { resolveImagePaths, unresolveImagePaths, getDocumentDir } from '../utils/imagePathResolver'
+import { assembleFrontMatter, parseFrontMatter } from '../utils/frontmatter'
+import { useAutoSave } from '../services/autoSave'
+import type { EditorState } from '../types/tab'
+
+const tabsStore = useTabsStore()
+const editorModeStore = useEditorModeStore()
+const outlineStore = useOutlineStore()
+const focusModeStore = useFocusModeStore()
+const typewriterModeStore = useTypewriterModeStore()
+const findReplaceStore = useFindReplaceStore()
+const editorSettings = useEditorSettingsStore()
 
 // Initialize auto-save service (editor ref is set up below, so we use a getter)
-let editorRef: { getHTML: () => string } | null = null;
-const autoSave = useAutoSave(
-  () => editorRef,
-  { delay: 2000, enabled: true }
-);
+let editorRef: { getHTML: () => string } | null = null
+const autoSave = useAutoSave(() => editorRef, { delay: 2000, enabled: true })
 
-const editorContainer = ref<HTMLElement | null>(null);
-const sourceEditorRef = ref<InstanceType<typeof SourceEditor> | null>(null);
+const editorContainer = ref<HTMLElement | null>(null)
+const sourceEditorRef = ref<InstanceType<typeof SourceEditor> | null>(null)
 
 // Mode indicator flash on toggle
-const showModeIndicator = ref(false);
-let modeIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
+const showModeIndicator = ref(false)
+let modeIndicatorTimer: ReturnType<typeof setTimeout> | null = null
 
 // Source mode content (synced with CodeMirror via v-model)
-const sourceContent = ref('');
+const sourceContent = ref('')
 
 // Flag to suppress modification tracking during content restore
-let isRestoringContent = false;
+let isRestoringContent = false
 // Flag to prevent feedback loops during mode switching
-let isSwitchingMode = false;
+let isSwitchingMode = false
+
+// ──────────────────────────────────────────────────────
+// Image path resolution helpers
+// ──────────────────────────────────────────────────────
+
+/** Get the directory of the active document for resolving relative image paths. */
+function activeDocDir(): string | null {
+  return getDocumentDir(tabsStore.activeTab?.filePath ?? null)
+}
+
+/** Convert markdown to HTML with local image paths resolved to asset:// URLs. */
+function mdToHtml(md: string): string {
+  const html = markdownToHtml(md)
+  const dir = activeDocDir()
+  return dir ? resolveImagePaths(html, dir) : html
+}
+
+/** Convert HTML to markdown, unresolving asset:// URLs back to relative paths first. */
+function htmlToMd(html: string): string {
+  const dir = activeDocDir()
+  const cleanHtml = dir ? unresolveImagePaths(html, dir) : html
+  return htmlToMarkdown(cleanHtml)
+}
 
 const editor = useEditor({
   content: '',
@@ -193,79 +223,79 @@ const editor = useEditor({
       allowBase64: true,
     }),
     Placeholder.configure({
-      placeholder: "Start writing with Markdown...",
+      placeholder: 'Start writing with Markdown...',
     }),
     // Search highlighting — ProseMirror decorations for find/replace
     SearchHighlight,
   ],
   editorProps: {
     attributes: {
-      class: "gdown-editor",
-      spellcheck: "true",
+      class: 'gdown-editor',
+      spellcheck: 'true',
     },
     handleClick: (_view, _pos, event) => {
-      const target = event.target as HTMLElement;
-      const link = target.closest("a.gdown-link") as HTMLAnchorElement | null;
+      const target = event.target as HTMLElement
+      const link = target.closest('a.gdown-link') as HTMLAnchorElement | null
       if (link) {
-        const href = link.getAttribute("href");
+        const href = link.getAttribute('href')
         if (href) {
-          const isBrowseMode = editorSettings.linkMode === 'browse';
-          const isModClick = event.metaKey || event.ctrlKey;
+          const isBrowseMode = editorSettings.linkMode === 'browse'
+          const isModClick = event.metaKey || event.ctrlKey
           if (isBrowseMode || isModClick) {
-            openUrl(href).catch(() => window.open(href, "_blank"));
-            event.preventDefault();
-            return true;
+            openUrl(href).catch(() => window.open(href, '_blank'))
+            event.preventDefault()
+            return true
           }
         }
       }
-      return false;
+      return false
     },
     handleDOMEvents: {
       // Show pointer cursor on links when Cmd is held
       mouseover: (_view, event) => {
-        const target = event.target as HTMLElement;
-        if (target.tagName === "A" && target.classList.contains("gdown-link")) {
-          target.style.cursor = "pointer";
+        const target = event.target as HTMLElement
+        if (target.tagName === 'A' && target.classList.contains('gdown-link')) {
+          target.style.cursor = 'pointer'
         }
-        return false;
+        return false
       },
     },
   },
   onUpdate: ({ editor: ed }) => {
     // Don't mark as modified during content restoration or mode switching
-    if (isRestoringContent || isSwitchingMode) return;
+    if (isRestoringContent || isSwitchingMode) return
 
-    const tabId = tabsStore.activeTabId;
+    const tabId = tabsStore.activeTabId
     if (tabId) {
-      tabsStore.setModified(tabId, true);
+      tabsStore.setModified(tabId, true)
       // Persist document content AND markdown to the tab's editor state.
       // Markdown is needed for auto-save to disk.
-      const markdownStr = htmlToMarkdown(ed.getHTML());
+      const markdownStr = htmlToMd(ed.getHTML())
       tabsStore.saveEditorState(tabId, {
         doc: ed.getJSON(),
         markdown: markdownStr,
-      });
+      })
     }
 
     // Update outline headings whenever document changes
-    outlineStore.updateFromEditor(ed);
+    outlineStore.updateFromEditor(ed)
   },
   onSelectionUpdate: ({ editor: ed }) => {
-    if (isRestoringContent || isSwitchingMode) return;
+    if (isRestoringContent || isSwitchingMode) return
 
-    const tabId = tabsStore.activeTabId;
+    const tabId = tabsStore.activeTabId
     if (tabId) {
-      const { from, to } = ed.state.selection;
+      const { from, to } = ed.state.selection
       tabsStore.saveEditorState(tabId, {
         selection: { from, to },
-      });
+      })
     }
 
     // Update active heading in outline based on cursor position
-    const { from } = ed.state.selection;
-    outlineStore.setActiveHeading(from);
+    const { from } = ed.state.selection
+    outlineStore.setActiveHeading(from)
   },
-});
+})
 
 // ──────────────────────────────────────────────────────
 // Mode toggling: synchronize document state between modes
@@ -278,82 +308,82 @@ const editor = useEditor({
  *   Source → WYSIWYG: parse Markdown to HTML via markdown-it, load into TipTap
  */
 function handleToggleMode(): void {
-  isSwitchingMode = true;
+  isSwitchingMode = true
 
   try {
     // Show mode indicator briefly
-    showModeIndicator.value = true;
-    if (modeIndicatorTimer) clearTimeout(modeIndicatorTimer);
+    showModeIndicator.value = true
+    if (modeIndicatorTimer) clearTimeout(modeIndicatorTimer)
     modeIndicatorTimer = setTimeout(() => {
-      showModeIndicator.value = false;
-    }, 800);
+      showModeIndicator.value = false
+    }, 800)
 
     if (editorModeStore.isWysiwyg) {
       // ─── Switching TO Source mode ───
       // Serialize TipTap HTML → Markdown, with fallback to tab state
       let bodyMd = ''
       if (editor.value) {
-        const html = editor.value.getHTML();
-        bodyMd = htmlToMarkdown(html);
+        const html = editor.value.getHTML()
+        bodyMd = htmlToMd(html)
       } else {
         // Editor ref not available — fall back to what onUpdate already persisted
         bodyMd = tabsStore.activeTab?.editorState.markdown ?? ''
       }
 
-      const tab = tabsStore.activeTab;
-      const fm = tab?.editorState.frontmatter ?? null;
-      sourceContent.value = assembleFrontMatter(fm, bodyMd);
+      const tab = tabsStore.activeTab
+      const fm = tab?.editorState.frontmatter ?? null
+      sourceContent.value = assembleFrontMatter(fm, bodyMd)
 
       // Explicitly persist to tab state before mode change so source/SourceEditor.vue
       // reads the correct content on mount regardless of captureState ordering.
-      const tabId = tabsStore.activeTabId;
+      const tabId = tabsStore.activeTabId
       if (tabId) {
-        tabsStore.saveEditorState(tabId, { markdown: bodyMd });
+        tabsStore.saveEditorState(tabId, { markdown: bodyMd })
       }
 
-      editorModeStore.setMode('source');
+      editorModeStore.setMode('source')
 
       // Focus the source editor after DOM updates
       nextTick(() => {
-        sourceEditorRef.value?.focus();
-      });
+        sourceEditorRef.value?.focus()
+      })
     } else {
       // ─── Switching TO WYSIWYG mode ───
       // Parse front-matter out of source content before loading into TipTap
-      const fullSource = sourceContent.value;
-      const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(fullSource);
+      const fullSource = sourceContent.value
+      const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(fullSource)
 
-      const html = markdownToHtml(body);
+      const html = mdToHtml(body)
 
-      editorModeStore.setMode('wysiwyg');
+      editorModeStore.setMode('wysiwyg')
 
       if (editor.value) {
-        isRestoringContent = true;
+        isRestoringContent = true
         try {
-          editor.value.commands.setContent(html, { emitUpdate: false });
+          editor.value.commands.setContent(html, { emitUpdate: false })
         } finally {
-          isRestoringContent = false;
+          isRestoringContent = false
         }
 
         // Persist the updated state to the tab (body-only markdown + front-matter)
-        const tabId = tabsStore.activeTabId;
+        const tabId = tabsStore.activeTabId
         if (tabId) {
           tabsStore.saveEditorState(tabId, {
             doc: editor.value.getJSON(),
             markdown: body,
             frontmatter: hasFrontMatter ? rawYaml : null,
             frontmatterAttributes: hasFrontMatter ? attributes : {},
-          });
+          })
         }
       }
 
       // Focus the WYSIWYG editor after DOM updates
       nextTick(() => {
-        editor.value?.commands.focus();
-      });
+        editor.value?.commands.focus()
+      })
     }
   } finally {
-    isSwitchingMode = false;
+    isSwitchingMode = false
   }
 }
 
@@ -364,19 +394,19 @@ function handleToggleMode(): void {
  * the body and front-matter are stored separately in the tab state.
  */
 function onSourceChange(value: string): void {
-  if (isSwitchingMode) return;
+  if (isSwitchingMode) return
 
-  const tabId = tabsStore.activeTabId;
+  const tabId = tabsStore.activeTabId
   if (tabId) {
     // Parse front-matter from the full source content
-    const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(value);
+    const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(value)
 
-    tabsStore.setModified(tabId, true);
+    tabsStore.setModified(tabId, true)
     tabsStore.saveEditorState(tabId, {
       markdown: body,
       frontmatter: hasFrontMatter ? rawYaml : null,
       frontmatterAttributes: hasFrontMatter ? attributes : {},
-    });
+    })
   }
 }
 
@@ -389,35 +419,35 @@ function onSourceChange(value: string): void {
  */
 function captureState(tabId: string): void {
   if (editorModeStore.isWysiwyg) {
-    if (!editor.value) return;
+    if (!editor.value) return
 
-    const { from, to } = editor.value.state.selection;
-    const scrollTop = editorContainer.value?.scrollTop ?? 0;
+    const { from, to } = editor.value.state.selection
+    const scrollTop = editorContainer.value?.scrollTop ?? 0
 
     // Also generate markdown for round-trip fidelity
-    const markdownStr = htmlToMarkdown(editor.value.getHTML());
+    const markdownStr = htmlToMd(editor.value.getHTML())
 
     tabsStore.saveEditorState(tabId, {
       doc: editor.value.getJSON(),
       markdown: markdownStr,
       scrollTop,
       selection: { from, to },
-    });
+    })
   } else {
     // In source mode, parse front-matter out and save body + front-matter separately.
     // Guard: only overwrite markdown if sourceContent is non-empty. If it's empty
     // (e.g. mode was toggled via status bar without going through handleToggleMode),
     // the onUpdate-persisted markdown in tab state is already correct — don't clobber it.
-    const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(sourceContent.value);
+    const { rawYaml, attributes, body, hasFrontMatter } = parseFrontMatter(sourceContent.value)
     const update: Partial<import('../types/tab').EditorState> = {
       scrollTop: sourceEditorRef.value?.getScrollTop() ?? 0,
-    };
+    }
     if (body.trim() || hasFrontMatter) {
-      update.markdown = body;
-      update.frontmatter = hasFrontMatter ? rawYaml : null;
-      update.frontmatterAttributes = hasFrontMatter ? attributes : {};
+      update.markdown = body
+      update.frontmatter = hasFrontMatter ? rawYaml : null
+      update.frontmatterAttributes = hasFrontMatter ? attributes : {}
     }
-    tabsStore.saveEditorState(tabId, update);
+    tabsStore.saveEditorState(tabId, update)
   }
 }
 
@@ -426,9 +456,9 @@ function captureState(tabId: string): void {
  */
 function restoreState(state: EditorState): void {
   if (editorModeStore.isWysiwyg) {
-    restoreWysiwygState(state);
+    restoreWysiwygState(state)
   } else {
-    restoreSourceState(state);
+    restoreSourceState(state)
   }
 }
 
@@ -436,43 +466,43 @@ function restoreState(state: EditorState): void {
  * Restore WYSIWYG (TipTap) editor state.
  */
 function restoreWysiwygState(state: EditorState): void {
-  if (!editor.value) return;
+  if (!editor.value) return
 
-  isRestoringContent = true;
+  isRestoringContent = true
 
   try {
     if (state.doc) {
-      editor.value.commands.setContent(state.doc, { emitUpdate: false });
+      editor.value.commands.setContent(state.doc, { emitUpdate: false })
     } else if (state.markdown) {
-      const html = markdownToHtml(state.markdown);
-      editor.value.commands.setContent(html, { emitUpdate: false });
+      const html = mdToHtml(state.markdown)
+      editor.value.commands.setContent(html, { emitUpdate: false })
     } else {
-      editor.value.commands.setContent('', { emitUpdate: false });
+      editor.value.commands.setContent('', { emitUpdate: false })
     }
   } finally {
-    isRestoringContent = false;
+    isRestoringContent = false
   }
 
   // Update outline after content restore
   if (editor.value) {
-    outlineStore.updateFromEditor(editor.value);
+    outlineStore.updateFromEditor(editor.value)
   }
 
   // Restore cursor and scroll after DOM settles
   nextTick(() => {
-    if (!editor.value) return;
+    if (!editor.value) return
 
     // Restore cursor/selection
     try {
-      const docSize = editor.value.state.doc.content.size;
-      const from = Math.min(state.selection.from, docSize);
-      const to = Math.min(state.selection.to, docSize);
+      const docSize = editor.value.state.doc.content.size
+      const from = Math.min(state.selection.from, docSize)
+      const to = Math.min(state.selection.to, docSize)
       if (from >= 0 && to >= 0) {
-        editor.value.commands.setTextSelection({ from, to });
+        editor.value.commands.setTextSelection({ from, to })
       }
     } catch {
       try {
-        editor.value.commands.setTextSelection(0);
+        editor.value.commands.setTextSelection(0)
       } catch {
         // ignore
       }
@@ -480,12 +510,12 @@ function restoreWysiwygState(state: EditorState): void {
 
     // Restore scroll position
     if (editorContainer.value) {
-      editorContainer.value.scrollTop = state.scrollTop;
+      editorContainer.value.scrollTop = state.scrollTop
     }
 
     // Focus the editor
-    editor.value.commands.focus();
-  });
+    editor.value.commands.focus()
+  })
 }
 
 /**
@@ -493,40 +523,40 @@ function restoreWysiwygState(state: EditorState): void {
  * Includes front-matter (if present) so it's visible and editable in source mode.
  */
 function restoreSourceState(state: EditorState): void {
-  let bodyMd = '';
+  let bodyMd = ''
 
   // Prefer stored markdown; otherwise serialize from doc
   if (state.markdown) {
-    bodyMd = state.markdown;
+    bodyMd = state.markdown
   } else if (state.doc && editor.value) {
     // Temporarily load the doc into TipTap to serialize it to markdown
-    isRestoringContent = true;
+    isRestoringContent = true
     try {
-      editor.value.commands.setContent(state.doc, { emitUpdate: false });
-      bodyMd = htmlToMarkdown(editor.value.getHTML());
+      editor.value.commands.setContent(state.doc, { emitUpdate: false })
+      bodyMd = htmlToMd(editor.value.getHTML())
     } finally {
-      isRestoringContent = false;
+      isRestoringContent = false
     }
   }
 
   // Prepend front-matter if present
-  sourceContent.value = assembleFrontMatter(state.frontmatter, bodyMd);
+  sourceContent.value = assembleFrontMatter(state.frontmatter, bodyMd)
 
   nextTick(() => {
-    sourceEditorRef.value?.setScrollTop(state.scrollTop);
-    sourceEditorRef.value?.focus();
-  });
+    sourceEditorRef.value?.setScrollTop(state.scrollTop)
+    sourceEditorRef.value?.focus()
+  })
 }
 
 /**
  * Persist scroll position on WYSIWYG scroll events.
  */
 function handleScroll(): void {
-  const tabId = tabsStore.activeTabId;
+  const tabId = tabsStore.activeTabId
   if (tabId && editorContainer.value) {
     tabsStore.saveEditorState(tabId, {
       scrollTop: editorContainer.value.scrollTop,
-    });
+    })
   }
 }
 
@@ -536,11 +566,11 @@ function handleScroll(): void {
 watch(
   () => focusModeStore.enabled,
   (enabled) => {
-    if (!editor.value) return;
+    if (!editor.value) return
     // Dispatch a transaction with meta to toggle ProseMirror focus mode decorations
-    editor.value.commands.setFocusMode(enabled);
-  }
-);
+    editor.value.commands.setFocusMode(enabled)
+  },
+)
 
 // ──────────────────────────────────────────────────────
 // Typewriter mode: sync store state → ProseMirror extension
@@ -548,10 +578,10 @@ watch(
 watch(
   () => typewriterModeStore.enabled,
   (enabled) => {
-    if (!editor.value) return;
-    editor.value.commands.setTypewriterMode(enabled);
-  }
-);
+    if (!editor.value) return
+    editor.value.commands.setTypewriterMode(enabled)
+  },
+)
 
 // ──────────────────────────────────────────────────────
 // Tab switching: save outgoing tab state, restore incoming
@@ -559,54 +589,50 @@ watch(
 watch(
   () => tabsStore.activeTabId,
   (newTabId, oldTabId) => {
-    if (newTabId === oldTabId) return;
+    if (newTabId === oldTabId) return
 
     // Save state from the tab we're leaving
     if (oldTabId) {
-      captureState(oldTabId);
+      captureState(oldTabId)
     }
 
     // Restore state for the newly active tab
     if (newTabId) {
-      const tab = tabsStore.tabs.find(t => t.id === newTabId);
+      const tab = tabsStore.tabs.find((t) => t.id === newTabId)
       if (tab) {
-        restoreState(tab.editorState);
+        restoreState(tab.editorState)
       }
     }
-  }
-);
+  },
+)
 
 // Handle external file reload — push new content into live TipTap editor
 function handleFileReloaded(e: Event) {
-  const { tabId, markdown } = (e as CustomEvent<{ tabId: string; markdown: string }>).detail;
-  if (tabId !== tabsStore.activeTabId || !editor.value) return;
-  const html = markdownToHtml(markdown);
-  isRestoringContent = true;
+  const { tabId, markdown } = (e as CustomEvent<{ tabId: string; markdown: string }>).detail
+  if (tabId !== tabsStore.activeTabId || !editor.value) return
+  const html = mdToHtml(markdown)
+  isRestoringContent = true
   try {
-    editor.value.commands.setContent(html, { emitUpdate: false });
+    editor.value.commands.setContent(html, { emitUpdate: false })
   } finally {
-    isRestoringContent = false;
+    isRestoringContent = false
   }
-  outlineStore.updateFromEditor(editor.value);
+  outlineStore.updateFromEditor(editor.value)
 }
 
 // Handle insert-image event
 function handleInsertImage() {
-  const url = prompt("Enter image URL or local path:");
+  const url = prompt('Enter image URL or local path:')
   if (url && editor.value) {
-    editor.value
-      .chain()
-      .focus()
-      .setImage({ src: url, alt: "Image" })
-      .run();
+    editor.value.chain().focus().setImage({ src: url, alt: 'Image' }).run()
   }
 }
 
 // Handle keyboard shortcut for mode toggle (Cmd+/ — Typora's shortcut)
 function handleKeydown(e: KeyboardEvent): void {
   if (e.metaKey && e.key === '/') {
-    e.preventDefault();
-    handleToggleMode();
+    e.preventDefault()
+    handleToggleMode()
   }
 }
 
@@ -621,10 +647,10 @@ function handleKeydown(e: KeyboardEvent): void {
  * Called after any search command to keep the UI in sync.
  */
 function syncSearchState(): void {
-  if (!editor.value) return;
-  const pluginState = getSearchState(editor.value.state);
+  if (!editor.value) return
+  const pluginState = getSearchState(editor.value.state)
   if (pluginState) {
-    findReplaceStore.setMatchInfo(pluginState.results.length, pluginState.currentIndex);
+    findReplaceStore.setMatchInfo(pluginState.results.length, pluginState.currentIndex)
   }
 }
 
@@ -633,70 +659,71 @@ function syncSearchState(): void {
  * to the current match position and calling scrollIntoView.
  */
 function scrollToCurrentMatch(): void {
-  if (!editor.value) return;
-  const pluginState = getSearchState(editor.value.state);
-  if (!pluginState || pluginState.results.length === 0 || pluginState.currentIndex < 0) return;
+  if (!editor.value) return
+  const pluginState = getSearchState(editor.value.state)
+  if (!pluginState || pluginState.results.length === 0 || pluginState.currentIndex < 0) return
 
-  const match = pluginState.results[pluginState.currentIndex];
+  const match = pluginState.results[pluginState.currentIndex]
   if (match) {
     // Use setTextSelection to move cursor to match, then scroll into view
-    editor.value.commands.setTextSelection({ from: match.from, to: match.to });
-    editor.value.commands.scrollIntoView();
+    editor.value.commands.setTextSelection({ from: match.from, to: match.to })
+    editor.value.commands.scrollIntoView()
   }
 }
 
 function handleFindSearch(query: string, caseSensitive: boolean, useRegex: boolean): void {
-  if (!editor.value) return;
+  if (!editor.value) return
   // Dispatch setSearchTerm command which recomputes all matches and decorations
-  editor.value.commands.setSearchTerm(query, caseSensitive, useRegex);
-  syncSearchState();
-  scrollToCurrentMatch();
+  editor.value.commands.setSearchTerm(query, caseSensitive, useRegex)
+  syncSearchState()
+  scrollToCurrentMatch()
 }
 
 function handleFindNext(): void {
-  if (!editor.value) return;
-  const pluginState = getSearchState(editor.value.state);
-  if (!pluginState || pluginState.results.length === 0) return;
+  if (!editor.value) return
+  const pluginState = getSearchState(editor.value.state)
+  if (!pluginState || pluginState.results.length === 0) return
 
-  const nextIndex = (pluginState.currentIndex + 1) % pluginState.results.length;
-  editor.value.commands.setSearchIndex(nextIndex);
-  syncSearchState();
-  scrollToCurrentMatch();
+  const nextIndex = (pluginState.currentIndex + 1) % pluginState.results.length
+  editor.value.commands.setSearchIndex(nextIndex)
+  syncSearchState()
+  scrollToCurrentMatch()
 }
 
 function handleFindPrev(): void {
-  if (!editor.value) return;
-  const pluginState = getSearchState(editor.value.state);
-  if (!pluginState || pluginState.results.length === 0) return;
+  if (!editor.value) return
+  const pluginState = getSearchState(editor.value.state)
+  if (!pluginState || pluginState.results.length === 0) return
 
-  const prevIndex = (pluginState.currentIndex - 1 + pluginState.results.length) % pluginState.results.length;
-  editor.value.commands.setSearchIndex(prevIndex);
-  syncSearchState();
-  scrollToCurrentMatch();
+  const prevIndex =
+    (pluginState.currentIndex - 1 + pluginState.results.length) % pluginState.results.length
+  editor.value.commands.setSearchIndex(prevIndex)
+  syncSearchState()
+  scrollToCurrentMatch()
 }
 
 function handleFindReplace(replacement: string): void {
-  if (!editor.value) return;
-  editor.value.commands.replaceCurrent(replacement);
-  syncSearchState();
-  scrollToCurrentMatch();
+  if (!editor.value) return
+  editor.value.commands.replaceCurrent(replacement)
+  syncSearchState()
+  scrollToCurrentMatch()
 }
 
 function handleFindReplaceAll(replacement: string): void {
-  if (!editor.value) return;
-  editor.value.commands.replaceAll(replacement);
-  syncSearchState();
+  if (!editor.value) return
+  editor.value.commands.replaceAll(replacement)
+  syncSearchState()
 }
 
 function handleFindClose(): void {
-  if (!editor.value) return;
+  if (!editor.value) return
   // Clear all search decorations
-  editor.value.commands.clearSearch();
-  syncSearchState();
+  editor.value.commands.clearSearch()
+  syncSearchState()
   // Collapse selection and refocus
-  const { from } = editor.value.state.selection;
-  editor.value.commands.setTextSelection(from);
-  editor.value.commands.focus();
+  const { from } = editor.value.state.selection
+  editor.value.commands.setTextSelection(from)
+  editor.value.commands.focus()
 }
 
 /**
@@ -704,40 +731,39 @@ function handleFindClose(): void {
  * Used by the Outline panel to scroll to and focus a heading.
  */
 function navigateToHeading(pos: number): void {
-  if (!editor.value || !editorContainer.value) return;
+  if (!editor.value || !editorContainer.value) return
 
   try {
-    const docSize = editor.value.state.doc.content.size;
-    const safePos = Math.min(pos, docSize);
+    const docSize = editor.value.state.doc.content.size
+    const safePos = Math.min(pos, docSize)
 
     // Set cursor at the beginning of the heading
-    editor.value.commands.setTextSelection(safePos + 1);
-    editor.value.commands.focus();
+    editor.value.commands.setTextSelection(safePos + 1)
+    editor.value.commands.focus()
 
     // Scroll the heading into view
     nextTick(() => {
       // Use ProseMirror's coordsAtPos to find the DOM position
       try {
-        const coords = editor.value!.view.coordsAtPos(safePos + 1);
-        const containerRect = editorContainer.value!.getBoundingClientRect();
-        const scrollOffset = coords.top - containerRect.top - 60; // 60px offset from top
-        editorContainer.value!.scrollTop += scrollOffset;
+        const coords = editor.value!.view.coordsAtPos(safePos + 1)
+        const containerRect = editorContainer.value!.getBoundingClientRect()
+        const scrollOffset = coords.top - containerRect.top - 60 // 60px offset from top
+        editorContainer.value!.scrollTop += scrollOffset
       } catch {
         // Fallback: use scrollIntoView on the resolved DOM node
-        const domNode = editor.value!.view.domAtPos(safePos + 1);
+        const domNode = editor.value!.view.domAtPos(safePos + 1)
         if (domNode?.node) {
-          const element = domNode.node instanceof HTMLElement
-            ? domNode.node
-            : domNode.node.parentElement;
-          element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          const element =
+            domNode.node instanceof HTMLElement ? domNode.node : domNode.node.parentElement
+          element?.scrollIntoView({ behavior: 'smooth', block: 'start' })
         }
       }
-    });
+    })
 
     // Update active heading
-    outlineStore.setActiveHeading(safePos);
+    outlineStore.setActiveHeading(safePos)
   } catch (e) {
-    console.warn('Failed to navigate to heading:', e);
+    console.warn('Failed to navigate to heading:', e)
   }
 }
 
@@ -745,44 +771,44 @@ function navigateToHeading(pos: number): void {
 defineExpose({
   navigateToHeading,
   getEditor: () => editor.value,
-});
+})
 
 onMounted(() => {
   // Load active tab's content into editor on mount
   if (tabsStore.activeTab) {
-    restoreState(tabsStore.activeTab.editorState);
+    restoreState(tabsStore.activeTab.editorState)
   }
 
   // Wire up the editor reference for auto-save serialization
-  editorRef = editor.value ?? null;
+  editorRef = editor.value ?? null
 
   // Initial outline extraction
   if (editor.value) {
-    outlineStore.updateFromEditor(editor.value);
+    outlineStore.updateFromEditor(editor.value)
   }
 
-  window.addEventListener("gdown:insert-image", handleInsertImage);
-  window.addEventListener("gdown:toggle-mode", handleToggleMode as EventListener);
-  window.addEventListener("gdown:file-reloaded", handleFileReloaded);
-  window.addEventListener("keydown", handleKeydown);
-});
+  window.addEventListener('gdown:insert-image', handleInsertImage)
+  window.addEventListener('gdown:toggle-mode', handleToggleMode as EventListener)
+  window.addEventListener('gdown:file-reloaded', handleFileReloaded)
+  window.addEventListener('keydown', handleKeydown)
+})
 
 onBeforeUnmount(() => {
   // Save current tab state before unmount
   if (tabsStore.activeTabId) {
-    captureState(tabsStore.activeTabId);
+    captureState(tabsStore.activeTabId)
   }
 
   // Clean up auto-save service
-  autoSave.dispose();
-  editorRef = null;
-
-  if (modeIndicatorTimer) clearTimeout(modeIndicatorTimer);
-  window.removeEventListener("gdown:insert-image", handleInsertImage);
-  window.removeEventListener("gdown:toggle-mode", handleToggleMode as EventListener);
-  window.removeEventListener("gdown:file-reloaded", handleFileReloaded);
-  window.removeEventListener("keydown", handleKeydown);
-});
+  autoSave.dispose()
+  editorRef = null
+
+  if (modeIndicatorTimer) clearTimeout(modeIndicatorTimer)
+  window.removeEventListener('gdown:insert-image', handleInsertImage)
+  window.removeEventListener('gdown:toggle-mode', handleToggleMode as EventListener)
+  window.removeEventListener('gdown:file-reloaded', handleFileReloaded)
+  window.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <style>
@@ -905,7 +931,7 @@ onBeforeUnmount(() => {
 }
 
 /* Image loading/error states */
-.gdown-editor img[src=""],
+.gdown-editor img[src=''],
 .gdown-editor img:not([src]) {
   min-height: 60px;
   min-width: 200px;
@@ -915,7 +941,7 @@ onBeforeUnmount(() => {
 }
 
 /* Image with alt text caption effect */
-.gdown-editor img[alt]:not([alt=""]) {
+.gdown-editor img[alt]:not([alt='']) {
   cursor: default;
 }
 
@@ -924,7 +950,7 @@ onBeforeUnmount(() => {
   background: #f5f5f5;
   padding: 2px 6px;
   border-radius: 3px;
-  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
+  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
   font-size: 0.9em;
   color: #e96900;
 }
@@ -1032,7 +1058,6 @@ onBeforeUnmount(() => {
   margin: 0.25em 0;
 }
 
-
 /* Nested lists — tighter spacing */
 .gdown-editor li > ul,
 .gdown-editor li > ol {
@@ -1053,25 +1078,25 @@ onBeforeUnmount(() => {
 }
 
 /* === TASK LIST — Typora-like checkbox styling === */
-.gdown-editor ul[data-type="taskList"] {
+.gdown-editor ul[data-type='taskList'] {
   list-style: none;
   padding-left: 0;
 }
 
-.gdown-editor ul[data-type="taskList"] li {
+.gdown-editor ul[data-type='taskList'] li {
   display: flex;
   align-items: flex-start;
   gap: 0.5em;
   margin: 0.25em 0;
 }
 
-.gdown-editor ul[data-type="taskList"] li > label {
+.gdown-editor ul[data-type='taskList'] li > label {
   flex-shrink: 0;
   user-select: none;
   margin-top: 0.3em;
 }
 
-.gdown-editor ul[data-type="taskList"] li > label input[type="checkbox"] {
+.gdown-editor ul[data-type='taskList'] li > label input[type='checkbox'] {
   cursor: pointer;
   width: 16px;
   height: 16px;
@@ -1079,19 +1104,19 @@ onBeforeUnmount(() => {
   border-radius: 3px;
 }
 
-.gdown-editor ul[data-type="taskList"] li > div {
+.gdown-editor ul[data-type='taskList'] li > div {
   flex: 1;
   min-width: 0;
 }
 
 /* Checked task item — strikethrough + dim text like Typora */
-.gdown-editor ul[data-type="taskList"] li[data-checked="true"] > div {
+.gdown-editor ul[data-type='taskList'] li[data-checked='true'] > div {
   text-decoration: line-through;
   color: #999;
 }
 
 /* Nested task lists */
-.gdown-editor ul[data-type="taskList"] ul[data-type="taskList"] {
+.gdown-editor ul[data-type='taskList'] ul[data-type='taskList'] {
   padding-left: 1.5em;
 }
 /* === BLOCKQUOTES (Typora-like) === */
@@ -1185,9 +1210,11 @@ onBeforeUnmount(() => {
   background: rgba(0, 0, 0, 0.06);
   color: #888;
   font-size: 12px;
-  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
   user-select: none;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -1210,7 +1237,9 @@ onBeforeUnmount(() => {
 
 /* All top-level blocks in the editor get a base transition */
 .focus-mode .gdown-editor > * {
-  transition: opacity 0.25s ease, filter 0.25s ease;
+  transition:
+    opacity 0.25s ease,
+    filter 0.25s ease;
 }
 
 /* Dimmed blocks — reduced opacity */
@@ -1291,10 +1320,10 @@ onBeforeUnmount(() => {
 }
 
 .gdown-editor table.gdown-table tr:nth-child(even) td {
-  background: var(--tab-hover-bg, rgba(0,0,0,0.02));
+  background: var(--tab-hover-bg, rgba(0, 0, 0, 0.02));
 }
 
 .gdown-editor table.gdown-table .selectedCell {
-  background: var(--sidebar-selected-bg, rgba(0,122,255,0.08));
+  background: var(--sidebar-selected-bg, rgba(0, 122, 255, 0.08));
 }
 </style>
diff --git a/src/extensions/GdownImage.ts b/src/extensions/GdownImage.ts
index b9ebcc7..06c1005 100644
--- a/src/extensions/GdownImage.ts
+++ b/src/extensions/GdownImage.ts
@@ -1,7 +1,8 @@
-import Image from "@tiptap/extension-image";
-import { markdownImageInputRule } from "./MarkdownImageInputRule";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { invoke } from "@tauri-apps/api/core";
+import Image from '@tiptap/extension-image'
+import { markdownImageInputRule } from './MarkdownImageInputRule'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { invoke, convertFileSrc } from '@tauri-apps/api/core'
+import { getDocumentDir } from '../utils/imagePathResolver'
 
 /**
  * Get the file path of the currently active document from the tabs store.
@@ -9,11 +10,11 @@ import { invoke } from "@tauri-apps/api/core";
  */
 async function getActiveDocumentPath(): Promise<string | null> {
   try {
-    const { useTabsStore } = await import("../stores/tabs");
-    const tabsStore = useTabsStore();
-    return tabsStore.activeTab?.filePath ?? null;
+    const { useTabsStore } = await import('../stores/tabs')
+    const tabsStore = useTabsStore()
+    return tabsStore.activeTab?.filePath ?? null
   } catch {
-    return null;
+    return null
   }
 }
 
@@ -25,25 +26,23 @@ async function getActiveDocumentPath(): Promise<string | null> {
  * - The current document hasn't been saved to disk yet (no filePath)
  * - The Tauri backend copy command fails
  */
-async function copyImageToAssets(
-  file: File
-): Promise<{ src: string; isRelative: boolean }> {
-  const documentPath = await getActiveDocumentPath();
+async function copyImageToAssets(file: File): Promise<{ src: string; isRelative: boolean }> {
+  const documentPath = await getActiveDocumentPath()
 
   // If the document hasn't been saved yet, we can't create a relative assets path.
   // Check if we have a native file path from drag-and-drop (webkitRelativePath or path property).
   if (!documentPath) {
     // Fallback: use base64 data URL
     return new Promise((resolve) => {
-      const reader = new FileReader();
+      const reader = new FileReader()
       reader.onload = (e) => {
-        resolve({ src: e.target?.result as string, isRelative: false });
-      };
+        resolve({ src: e.target?.result as string, isRelative: false })
+      }
       reader.onerror = () => {
-        resolve({ src: "", isRelative: false });
-      };
-      reader.readAsDataURL(file);
-    });
+        resolve({ src: '', isRelative: false })
+      }
+      reader.readAsDataURL(file)
+    })
   }
 
   // For dropped files, the browser provides the file object but not the native path.
@@ -53,45 +52,58 @@ async function copyImageToAssets(
   // Strategy: For drag-and-drop from Finder on macOS, the file object has a `.path`
   // property (non-standard, available in Tauri/Electron). If not available,
   // we write the file bytes to a temp location first, then copy to assets.
-  const nativePath = (file as any).path as string | undefined;
+  const nativePath = (file as any).path as string | undefined
 
   if (nativePath) {
     try {
-      const relativePath = await invoke<string>("copy_image_to_assets", {
+      const relativePath = await invoke<string>('copy_image_to_assets', {
         imagePath: nativePath,
         documentPath,
-      });
-      return { src: relativePath, isRelative: true };
+      })
+      return { src: relativePath, isRelative: true }
     } catch (err) {
-      console.warn("Failed to copy image to assets via native path:", err);
+      console.warn('Failed to copy image to assets via native path:', err)
     }
   }
 
   // Fallback: Read file as raw bytes and write to assets via write_image_to_assets command
   try {
-    const arrayBuffer = await file.arrayBuffer();
-    const imageBytes = Array.from(new Uint8Array(arrayBuffer));
-    const relativePath = await invoke<string>("write_image_to_assets", {
+    const arrayBuffer = await file.arrayBuffer()
+    const imageBytes = Array.from(new Uint8Array(arrayBuffer))
+    const relativePath = await invoke<string>('write_image_to_assets', {
       imageBytes,
       fileName: file.name,
       documentPath,
-    });
-    return { src: relativePath, isRelative: true };
+    })
+    return { src: relativePath, isRelative: true }
   } catch {
     // Final fallback: base64 data URL
     return new Promise((resolve) => {
-      const reader = new FileReader();
+      const reader = new FileReader()
       reader.onload = (e) => {
-        resolve({ src: e.target?.result as string, isRelative: false });
-      };
+        resolve({ src: e.target?.result as string, isRelative: false })
+      }
       reader.onerror = () => {
-        resolve({ src: "", isRelative: false });
-      };
-      reader.readAsDataURL(file);
-    });
+        resolve({ src: '', isRelative: false })
+      }
+      reader.readAsDataURL(file)
+    })
   }
 }
 
+/**
+ * Resolve a relative image src to an asset:// URL for webview display.
+ * If the src is already absolute (http, data, blob), returns it as-is.
+ */
+async function resolveInsertedSrc(src: string, isRelative: boolean): Promise<string> {
+  if (!isRelative || !src) return src
+  const docPath = await getActiveDocumentPath()
+  if (!docPath) return src
+  const docDir = getDocumentDir(docPath)
+  if (!docDir) return src
+  return convertFileSrc(`${docDir}/${src}`)
+}
+
 /**
  * GdownImage: Custom TipTap Image extension with Typora-like behavior.
  *
@@ -112,15 +124,15 @@ export const GdownImage = Image.extend({
       allowBase64: true,
       resize: false as const,
       HTMLAttributes: {
-        class: "gdown-image",
-        loading: "lazy",
+        class: 'gdown-image',
+        loading: 'lazy',
       },
-    };
+    }
   },
 
   // Override to be inline like Typora
   inline: true,
-  group: "inline",
+  group: 'inline',
   draggable: true,
 
   addAttributes() {
@@ -128,176 +140,179 @@ export const GdownImage = Image.extend({
       ...this.parent?.(),
       src: {
         default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute("src"),
+        parseHTML: (element: HTMLElement) => element.getAttribute('src'),
       },
       alt: {
         default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute("alt"),
+        parseHTML: (element: HTMLElement) => element.getAttribute('alt'),
       },
       title: {
         default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute("title"),
+        parseHTML: (element: HTMLElement) => element.getAttribute('title'),
       },
       width: {
         default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute("width"),
+        parseHTML: (element: HTMLElement) => element.getAttribute('width'),
       },
       height: {
         default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute("height"),
+        parseHTML: (element: HTMLElement) => element.getAttribute('height'),
       },
       loading: {
-        default: "lazy",
+        default: 'lazy',
       },
-    };
+    }
   },
 
   addInputRules() {
-    return [markdownImageInputRule(this.type)];
+    return [markdownImageInputRule(this.type)]
   },
 
   addKeyboardShortcuts() {
     return {
-      "Mod-Shift-i": () => {
+      'Mod-Shift-i': () => {
         // Typora shortcut: Cmd+Shift+I to insert image
-        window.dispatchEvent(new CustomEvent("gdown:insert-image"));
-        return true;
+        window.dispatchEvent(new CustomEvent('gdown:insert-image'))
+        return true
       },
-    };
+    }
   },
 
   addProseMirrorPlugins() {
-    const plugins = this.parent?.() || [];
+    const plugins = this.parent?.() || []
 
     // Plugin for image loading states and click handling
     plugins.push(
       new Plugin({
-        key: new PluginKey("gdownImageHandler"),
+        key: new PluginKey('gdownImageHandler'),
         props: {
           handleDOMEvents: {
             // Handle Cmd+click on images to show image info
             click: (_view, event) => {
-              const target = event.target as HTMLElement;
-              if (target.tagName === "IMG" && target.classList.contains("gdown-image")) {
+              const target = event.target as HTMLElement
+              if (target.tagName === 'IMG' && target.classList.contains('gdown-image')) {
                 if (event.metaKey || event.ctrlKey) {
                   // Cmd+click: open image in external viewer/browser
-                  const src = target.getAttribute("src");
-                  if (src && (src.startsWith("http://") || src.startsWith("https://"))) {
-                    window.open(src, "_blank");
+                  const src = target.getAttribute('src')
+                  if (src && (src.startsWith('http://') || src.startsWith('https://'))) {
+                    window.open(src, '_blank')
                   }
-                  event.preventDefault();
-                  return true;
+                  event.preventDefault()
+                  return true
                 }
               }
-              return false;
+              return false
             },
           },
         },
-      })
-    );
+      }),
+    )
 
     // Plugin for drag-and-drop and paste image insertion
     // Copies images to ./assets folder relative to current document
     plugins.push(
       new Plugin({
-        key: new PluginKey("gdownImageDrop"),
+        key: new PluginKey('gdownImageDrop'),
         props: {
           handleDrop: (view, event) => {
-            const files = event.dataTransfer?.files;
-            if (!files || files.length === 0) return false;
+            const files = event.dataTransfer?.files
+            if (!files || files.length === 0) return false
 
-            const images = Array.from(files).filter((file) =>
-              file.type.startsWith("image/")
-            );
-            if (images.length === 0) return false;
+            const images = Array.from(files).filter((file) => file.type.startsWith('image/'))
+            if (images.length === 0) return false
 
-            event.preventDefault();
+            event.preventDefault()
             const pos = view.posAtCoords({
               left: event.clientX,
               top: event.clientY,
-            });
-            if (!pos) return false;
+            })
+            if (!pos) return false
 
             // Process each dropped image asynchronously
             images.forEach((imageFile) => {
-              copyImageToAssets(imageFile).then(({ src }) => {
-                if (!src) return;
-                const node = view.state.schema.nodes.image!.create({
-                  src,
-                  alt: imageFile.name.replace(/\.[^/.]+$/, ""), // Strip extension for alt text
-                });
-                const tr = view.state.tr.insert(pos.pos, node);
-                view.dispatch(tr);
-              }).catch((err) => {
-                console.error("Failed to process dropped image:", err);
-                // Fallback: insert with base64 data URL
-                const reader = new FileReader();
-                reader.onload = (readerEvent) => {
-                  const fallbackSrc = readerEvent.target?.result as string;
+              copyImageToAssets(imageFile)
+                .then(async ({ src, isRelative }) => {
+                  if (!src) return
+                  const resolvedSrc = await resolveInsertedSrc(src, isRelative)
                   const node = view.state.schema.nodes.image!.create({
-                    src: fallbackSrc,
-                    alt: imageFile.name,
-                  });
-                  const tr = view.state.tr.insert(pos.pos, node);
-                  view.dispatch(tr);
-                };
-                reader.readAsDataURL(imageFile);
-              });
-            });
-            return true;
+                    src: resolvedSrc,
+                    alt: imageFile.name.replace(/\.[^/.]+$/, ''), // Strip extension for alt text
+                  })
+                  const tr = view.state.tr.insert(pos.pos, node)
+                  view.dispatch(tr)
+                })
+                .catch((err) => {
+                  console.error('Failed to process dropped image:', err)
+                  // Fallback: insert with base64 data URL
+                  const reader = new FileReader()
+                  reader.onload = (readerEvent) => {
+                    const fallbackSrc = readerEvent.target?.result as string
+                    const node = view.state.schema.nodes.image!.create({
+                      src: fallbackSrc,
+                      alt: imageFile.name,
+                    })
+                    const tr = view.state.tr.insert(pos.pos, node)
+                    view.dispatch(tr)
+                  }
+                  reader.readAsDataURL(imageFile)
+                })
+            })
+            return true
           },
           handlePaste: (view, event) => {
-            const items = event.clipboardData?.items;
-            if (!items) return false;
+            const items = event.clipboardData?.items
+            if (!items) return false
 
-            const images = Array.from(items).filter((item) =>
-              item.type.startsWith("image/")
-            );
-            if (images.length === 0) return false;
+            const images = Array.from(items).filter((item) => item.type.startsWith('image/'))
+            if (images.length === 0) return false
 
-            event.preventDefault();
+            event.preventDefault()
             images.forEach((item) => {
-              const file = item.getAsFile();
-              if (!file) return;
+              const file = item.getAsFile()
+              if (!file) return
 
               // Generate a reasonable filename for pasted images (they often lack names)
-              const pasteFileName = file.name && file.name !== "image.png"
-                ? file.name
-                : `pasted-image-${Date.now()}.${file.type.split("/")[1] || "png"}`;
+              const pasteFileName =
+                file.name && file.name !== 'image.png'
+                  ? file.name
+                  : `pasted-image-${Date.now()}.${file.type.split('/')[1] || 'png'}`
 
               // Create a new File with the generated name if needed
-              const namedFile = new File([file], pasteFileName, { type: file.type });
+              const namedFile = new File([file], pasteFileName, { type: file.type })
 
-              copyImageToAssets(namedFile).then(({ src }) => {
-                if (!src) return;
-                const node = view.state.schema.nodes.image!.create({
-                  src,
-                  alt: pasteFileName.replace(/\.[^/.]+$/, ""),
-                });
-                const tr = view.state.tr.replaceSelectionWith(node);
-                view.dispatch(tr);
-              }).catch((err) => {
-                console.error("Failed to process pasted image:", err);
-                // Fallback: insert with base64 data URL
-                const reader = new FileReader();
-                reader.onload = (readerEvent) => {
-                  const fallbackSrc = readerEvent.target?.result as string;
+              copyImageToAssets(namedFile)
+                .then(async ({ src, isRelative }) => {
+                  if (!src) return
+                  const resolvedSrc = await resolveInsertedSrc(src, isRelative)
                   const node = view.state.schema.nodes.image!.create({
-                    src: fallbackSrc,
-                    alt: file.name,
-                  });
-                  const tr = view.state.tr.replaceSelectionWith(node);
-                  view.dispatch(tr);
-                };
-                reader.readAsDataURL(file);
-              });
-            });
-            return true;
+                    src: resolvedSrc,
+                    alt: pasteFileName.replace(/\.[^/.]+$/, ''),
+                  })
+                  const tr = view.state.tr.replaceSelectionWith(node)
+                  view.dispatch(tr)
+                })
+                .catch((err) => {
+                  console.error('Failed to process pasted image:', err)
+                  // Fallback: insert with base64 data URL
+                  const reader = new FileReader()
+                  reader.onload = (readerEvent) => {
+                    const fallbackSrc = readerEvent.target?.result as string
+                    const node = view.state.schema.nodes.image!.create({
+                      src: fallbackSrc,
+                      alt: file.name,
+                    })
+                    const tr = view.state.tr.replaceSelectionWith(node)
+                    view.dispatch(tr)
+                  }
+                  reader.readAsDataURL(file)
+                })
+            })
+            return true
           },
         },
-      })
-    );
+      }),
+    )
 
-    return plugins;
+    return plugins
   },
-});
+})
diff --git a/src/extensions/MarkdownImageInputRule.ts b/src/extensions/MarkdownImageInputRule.ts
index 4191d25..0649058 100644
--- a/src/extensions/MarkdownImageInputRule.ts
+++ b/src/extensions/MarkdownImageInputRule.ts
@@ -1,29 +1,67 @@
-import { InputRule } from "@tiptap/core";
-import { NodeType } from "@tiptap/pm/model";
+import { InputRule } from '@tiptap/core'
+import { NodeType } from '@tiptap/pm/model'
+import { getDocumentDir, resolveRelativeSrc } from '../utils/imagePathResolver'
+import type { useTabsStore as UseTabsStore } from '../stores/tabs'
+
+/**
+ * Cached reference to the tabs store, initialized on first use.
+ * Avoids circular dependency issues with dynamic import.
+ */
+let tabsStoreRef: ReturnType<typeof UseTabsStore> | null = null
+
+async function ensureTabsStore(): Promise<void> {
+  if (tabsStoreRef) return
+  try {
+    const { useTabsStore } = await import('../stores/tabs')
+    tabsStoreRef = useTabsStore()
+  } catch {
+    // Store not available yet
+  }
+}
+
+/**
+ * Get the active document's directory synchronously from the cached tabs store.
+ */
+function getActiveDocDir(): string | null {
+  if (!tabsStoreRef) return null
+  return getDocumentDir(tabsStoreRef.activeTab?.filePath ?? null)
+}
 
 /**
  * Markdown image input rule: ![alt](src "title")
  * Matches markdown image syntax and converts to an inline image node.
  * Typora behavior: as soon as the closing ) is typed, the markdown syntax
  * disappears and the image renders inline with a preview.
+ *
+ * Relative image paths are resolved to Tauri asset protocol URLs so the
+ * webview can display them.
  */
 export function markdownImageInputRule(imageType: NodeType): InputRule {
+  // Eagerly initialize the store reference
+  ensureTabsStore()
+
   // Matches: ![alt text](url) or ![alt text](url "title")
-  const imageRegex = /!\[([^\]]*)\]\(([^)"]+)(?:\s+"([^"]*)")?\)$/;
+  const imageRegex = /!\[([^\]]*)\]\(([^)"]+)(?:\s+"([^"]*)")?\)$/
 
   return new InputRule({
     find: imageRegex,
     handler: ({ state, range, match }) => {
-      const [, alt, src, title] = match;
+      const [, alt, src, title] = match
+      if (!src) return
+
+      // Resolve relative paths to asset URLs for webview display
+      const docDir = getActiveDocDir()
+      const resolvedSrc = docDir ? resolveRelativeSrc(src, docDir) : src
+
       const attrs: Record<string, string | null> = {
-        src: src ?? null,
+        src: resolvedSrc,
         alt: alt ?? null,
         title: title ?? null,
-      };
+      }
 
-      const tr = state.tr;
-      const node = imageType.create(attrs);
-      tr.replaceWith(range.from, range.to, node);
+      const tr = state.tr
+      const node = imageType.create(attrs)
+      tr.replaceWith(range.from, range.to, node)
     },
-  });
+  })
 }
diff --git a/src/utils/imagePathResolver.ts b/src/utils/imagePathResolver.ts
new file mode 100644
index 0000000..b48eb3c
--- /dev/null
+++ b/src/utils/imagePathResolver.ts
@@ -0,0 +1,120 @@
+/**
+ * Image path resolution for Tauri webview.
+ *
+ * The Tauri webview runs at localhost:1420 (dev) or tauri://localhost (prod),
+ * so relative image paths like "assets/photo.png" can't resolve to the
+ * document's directory on disk. This module converts relative paths to
+ * Tauri asset protocol URLs for rendering, and back to relative paths
+ * for saving to markdown.
+ */
+
+import { convertFileSrc } from '@tauri-apps/api/core'
+
+// Re-export for use in extensions
+export { convertFileSrc }
+
+/**
+ * Extract the directory portion of a file path.
+ * Returns null if the input is falsy.
+ */
+export function getDocumentDir(filePath: string | null | undefined): string | null {
+  if (!filePath) return null
+  const lastSlash = filePath.lastIndexOf('/')
+  if (lastSlash === -1) return null
+  return filePath.substring(0, lastSlash)
+}
+
+/**
+ * The asset URL prefix that convertFileSrc produces on macOS.
+ * Used to reverse asset URLs back to filesystem paths.
+ */
+const ASSET_PREFIX = 'http://asset.localhost/'
+
+// Matches <img ... src="..." ...> tags, capturing the full tag for replacement
+const IMG_SRC_RE = /(<img\b[^>]*?\bsrc=")([^"]+)(")/g
+
+/**
+ * Check whether a src value is already absolute (http, https, data, blob, asset).
+ */
+export function isAbsoluteSrc(src: string): boolean {
+  return (
+    src.startsWith('http://') ||
+    src.startsWith('https://') ||
+    src.startsWith('data:') ||
+    src.startsWith('blob:') ||
+    src.startsWith('asset:') ||
+    src.startsWith('/')
+  )
+}
+
+/**
+ * Resolve a single relative image path to a Tauri asset protocol URL.
+ * Returns the src unchanged if it's already absolute.
+ */
+export function resolveRelativeSrc(src: string, documentDir: string): string {
+  if (!src || !documentDir || isAbsoluteSrc(src)) return src
+  const absolutePath = `${documentDir}/${src}`
+  return convertFileSrc(absolutePath)
+}
+
+/**
+ * Resolve relative image src attributes in HTML to Tauri asset protocol URLs.
+ * Adds data-original-src attribute to preserve the original relative path
+ * for round-trip fidelity.
+ *
+ * @param html - HTML string (from markdown-it)
+ * @param documentDir - Absolute path to the document's parent directory
+ * @returns HTML with resolved image paths
+ */
+export function resolveImagePaths(html: string, documentDir: string): string {
+  if (!html || !documentDir) return html
+
+  return html.replace(IMG_SRC_RE, (_match, prefix: string, src: string, suffix: string) => {
+    if (isAbsoluteSrc(src)) return _match
+
+    // Resolve relative path to absolute filesystem path
+    const assetUrl = resolveRelativeSrc(src, documentDir)
+
+    // Preserve original src for round-trip back to markdown
+    return `${prefix}${assetUrl}${suffix} data-original-src="${src}"`
+  })
+}
+
+/**
+ * Restore original relative image paths from resolved asset URLs.
+ * Handles two cases:
+ * 1. Images with data-original-src attribute (from markdown load path)
+ * 2. Images with asset:// URLs but no data-original-src (from input rules, drop, paste)
+ *
+ * @param html - HTML string (from Tiptap getHTML())
+ * @param documentDir - Absolute path to the document's parent directory
+ * @returns HTML with relative image paths restored
+ */
+export function unresolveImagePaths(html: string, documentDir: string): string {
+  if (!html || !documentDir) return html
+
+  // Strategy 1: Restore from data-original-src attribute
+  let result = html.replace(
+    /<img\b([^>]*?)\bsrc="[^"]*"([^>]*?)\bdata-original-src="([^"]*)"([^>]*?)>/g,
+    (_match, before: string, mid: string, originalSrc: string, after: string) => {
+      const attrs = `${before}src="${originalSrc}"${mid}${after}`.replace(/\s{2,}/g, ' ').trim()
+      return `<img ${attrs}>`
+    },
+  )
+
+  // Strategy 2: Strip asset URL prefix for images without data-original-src
+  // These come from input rules, drag-drop, paste where we resolved the URL
+  // but didn't add data-original-src to the node attributes
+  const assetDocPrefix = `${ASSET_PREFIX}${documentDir}/`
+  if (result.includes(ASSET_PREFIX)) {
+    result = result.replace(IMG_SRC_RE, (_match, prefix: string, src: string, suffix: string) => {
+      if (src.startsWith(assetDocPrefix)) {
+        const relativeSrc = src.substring(assetDocPrefix.length)
+        return `${prefix}${relativeSrc}${suffix}`
+      }
+      return _match
+    })
+  }
+
+  return result
+}