feat: swiched to milkdown

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "chat.tools.terminal.autoApprove": {
-        "npx vitest": true
+        "npx vitest": true,
+        "npx tsc": true
     }
 }

package.json

@@ -54,14 +54,17 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
     "@libsql/client": "^0.4.0",
+    "@milkdown/kit": "^7.18.0",
+    "@milkdown/plugin-block": "^7.18.0",
+    "@milkdown/plugin-clipboard": "^7.18.0",
+    "@milkdown/plugin-cursor": "^7.18.0",
+    "@milkdown/plugin-history": "^7.18.0",
+    "@milkdown/plugin-indent": "^7.18.0",
+    "@milkdown/plugin-listener": "^7.18.0",
+    "@milkdown/plugin-trailing": "^7.18.0",
+    "@milkdown/react": "^7.18.0",
+    "@milkdown/theme-nord": "^7.18.0",
     "@monaco-editor/react": "^4.7.0",
-    "@tiptap/extension-image": "^3.19.0",
-    "@tiptap/extension-link": "^3.19.0",
-    "@tiptap/extension-placeholder": "^3.19.0",
-    "@tiptap/extension-underline": "^3.19.0",
-    "@tiptap/pm": "^3.19.0",
-    "@tiptap/react": "^3.19.0",
-    "@tiptap/starter-kit": "^3.19.0",
     "chokidar": "^5.0.0",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.29.0",
@@ -75,7 +78,6 @@
     "react-hot-toast": "^2.6.0",
     "sharp": "^0.34.5",
     "snowball-stemmers": "^0.6.0",
-    "tiptap-markdown": "^0.9.0",
     "uuid": "^9.0.1",
     "zustand": "^4.4.7"
   },

src/renderer/components/Editor/Editor.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import MonacoEditor from '@monaco-editor/react';
 import { useAppStore, PostData, EditorMode, MediaData } from '../../store';
 import { showToast } from '../Toast';
-import { WysiwygEditor } from '../WysiwygEditor';
+import { MilkdownEditor } from '../MilkdownEditor';
 import { Lightbox, useMarkdownImages } from '../Lightbox';
 import { PostLinks } from '../PostLinks';
 import { ErrorModal } from '../ErrorModal';
@@ -579,7 +579,7 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
           </div>
           
           {editorMode === 'wysiwyg' && (
-            <WysiwygEditor
+            <MilkdownEditor
               content={content}
               onChange={setContent}
               placeholder="Start writing..."

src/renderer/components/MilkdownEditor/MilkdownEditor.css

@@ -0,0 +1,332 @@
+.milkdown-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* Toolbar */
+.milkdown-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: var(--vscode-sideBar-background);
+  border-bottom: 1px solid var(--vscode-panel-border);
+  flex-wrap: wrap;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.milkdown-toolbar .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.milkdown-toolbar .toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background-color: var(--vscode-panel-border);
+  margin: 0 8px;
+}
+
+.milkdown-toolbar button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 4px 8px;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--vscode-foreground);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.milkdown-toolbar button:hover:not(:disabled) {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.milkdown-toolbar button.is-active {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+.milkdown-toolbar button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Editor Content */
+.milkdown-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Milkdown Editor Styles */
+.milkdown-content .milkdown {
+  outline: none;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.milkdown-content .milkdown .ProseMirror {
+  flex: 1;
+  outline: none;
+  color: var(--vscode-editor-foreground);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.milkdown-content .milkdown .ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+
+/* Placeholder */
+.milkdown-content .milkdown .ProseMirror.ProseMirror-empty::before {
+  content: attr(data-placeholder);
+  color: var(--vscode-descriptionForeground);
+  pointer-events: none;
+  position: absolute;
+}
+
+.milkdown-content .milkdown .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--vscode-descriptionForeground);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Typography */
+.milkdown-content h1 {
+  font-size: 2em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: var(--vscode-editor-foreground);
+}
+
+.milkdown-content h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: var(--vscode-editor-foreground);
+}
+
+.milkdown-content h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: var(--vscode-editor-foreground);
+}
+
+.milkdown-content h4,
+.milkdown-content h5,
+.milkdown-content h6 {
+  font-size: 1.1em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: var(--vscode-editor-foreground);
+}
+
+.milkdown-content p {
+  margin: 0.5em 0;
+}
+
+.milkdown-content strong {
+  font-weight: 600;
+}
+
+.milkdown-content em {
+  font-style: italic;
+}
+
+.milkdown-content del,
+.milkdown-content s {
+  text-decoration: line-through;
+}
+
+/* Links */
+.milkdown-content a {
+  color: var(--vscode-textLink-foreground);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.milkdown-content a:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+/* Lists */
+.milkdown-content ul,
+.milkdown-content ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.milkdown-content li {
+  margin: 0.25em 0;
+}
+
+.milkdown-content ul {
+  list-style-type: disc;
+}
+
+.milkdown-content ol {
+  list-style-type: decimal;
+}
+
+/* Task List (GFM) */
+.milkdown-content li[data-task-item] {
+  list-style: none;
+  position: relative;
+  margin-left: -1.5em;
+  padding-left: 1.5em;
+}
+
+.milkdown-content li[data-task-item] input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  top: 0.3em;
+}
+
+/* Blockquote */
+.milkdown-content blockquote {
+  border-left: 3px solid var(--vscode-textBlockQuote-border);
+  padding-left: 1em;
+  margin: 1em 0;
+  color: var(--vscode-textBlockQuote-foreground);
+  font-style: italic;
+}
+
+/* Code */
+.milkdown-content code {
+  background-color: var(--vscode-textCodeBlock-background);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--vscode-editor-font-family);
+  font-size: 0.9em;
+}
+
+.milkdown-content pre {
+  background-color: var(--vscode-textCodeBlock-background);
+  padding: 12px 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.milkdown-content pre code {
+  padding: 0;
+  background: none;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+/* Images */
+.milkdown-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin: 1em 0;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+
+.milkdown-content img:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Horizontal Rule */
+.milkdown-content hr {
+  border: none;
+  border-top: 1px solid var(--vscode-panel-border);
+  margin: 2em 0;
+}
+
+/* Tables (GFM) */
+.milkdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+
+.milkdown-content th,
+.milkdown-content td {
+  border: 1px solid var(--vscode-panel-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.milkdown-content th {
+  background-color: var(--vscode-sideBar-background);
+  font-weight: 600;
+}
+
+.milkdown-content tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* Selection */
+.milkdown-content .ProseMirror-selectednode {
+  outline: 2px solid var(--vscode-focusBorder);
+}
+
+/* Block handle (from block plugin) */
+.milkdown-content .block-handle {
+  position: absolute;
+  left: -24px;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-descriptionForeground);
+}
+
+.milkdown-content .block-handle:hover {
+  opacity: 1;
+}
+
+/* Cursor styles */
+.milkdown-content .ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.milkdown-content .ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid var(--vscode-editor-foreground);
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+/* Focus ring */
+.milkdown-content .ProseMirror:focus-visible {
+  outline: none;
+}

src/renderer/components/MilkdownEditor/MilkdownEditor.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Editor, defaultValueCtx, editorViewCtx, rootCtx, remarkStringifyOptionsCtx, remarkPluginsCtx } from '@milkdown/kit/core';
+import { commonmark, toggleStrongCommand, toggleEmphasisCommand, wrapInBlockquoteCommand, wrapInBulletListCommand, wrapInOrderedListCommand, insertHrCommand, toggleInlineCodeCommand, insertImageCommand, toggleLinkCommand } from '@milkdown/kit/preset/commonmark';
+import { gfm, toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm';
+import { history, undoCommand, redoCommand } from '@milkdown/kit/plugin/history';
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
+import { clipboard } from '@milkdown/kit/plugin/clipboard';
+import { trailing } from '@milkdown/kit/plugin/trailing';
+import { indent } from '@milkdown/kit/plugin/indent';
+import { cursor } from '@milkdown/kit/plugin/cursor';
+import { replaceAll } from '@milkdown/kit/utils';
+import { Milkdown, MilkdownProvider, useInstance, useEditor } from '@milkdown/react';
+import { callCommand } from '@milkdown/kit/utils';
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { RemarkPlugin } from '@milkdown/kit/transformer';
+import type { Root, List, ListItem } from 'mdast';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import './MilkdownEditor.css';
+
+// Remark plugin to force tight lists (no blank lines between list items)
+const remarkTightListsPlugin: Plugin<[Record<string, unknown>], Root> = () => {
+  return (tree: Root) => {
+    visit(tree, 'list', (node) => {
+      const listNode = node as List;
+      // Set spread to false to make lists tight
+      listNode.spread = false;
+      // Also set each list item's spread to false
+      for (const child of listNode.children) {
+        if (child.type === 'listItem') {
+          (child as ListItem).spread = false;
+        }
+      }
+    });
+  };
+};
+
+// Wrap as Milkdown RemarkPlugin format
+const remarkTightLists: RemarkPlugin = {
+  plugin: remarkTightListsPlugin,
+  options: {},
+};
+
+interface MilkdownEditorProps {
+  content: string;
+  onChange: (markdown: string) => void;
+  placeholder?: string;
+}
+
+// Toolbar component that uses the editor instance
+const EditorToolbar: React.FC = () => {
+  const [loading, getEditor] = useInstance();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const runCommand = useCallback((commandKey: any, payload?: unknown) => {
+    if (loading) return;
+    const editor = getEditor();
+    if (editor) {
+      editor.action(callCommand(commandKey, payload));
+    }
+  }, [loading, getEditor]);
+
+  const insertHeading = useCallback((level: number) => {
+    if (loading) return;
+    const editor = getEditor();
+    if (!editor) return;
+    
+    editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { state, dispatch } = view;
+      const { $from } = state.selection;
+      const lineStart = $from.start();
+      const lineEnd = $from.end();
+      const lineText = state.doc.textBetween(lineStart, lineEnd);
+      
+      // Remove existing heading markers
+      const cleanText = lineText.replace(/^#{1,6}\s*/, '');
+      const newText = `${'#'.repeat(level)} ${cleanText}`;
+      
+      const tr = state.tr.replaceWith(
+        lineStart,
+        lineEnd,
+        state.schema.text(newText)
+      );
+      dispatch(tr);
+    });
+  }, [loading, getEditor]);
+
+  const insertLink = useCallback(() => {
+    const url = window.prompt('Enter URL:');
+    if (!url) return;
+    runCommand(toggleLinkCommand.key, { href: url });
+  }, [runCommand]);
+
+  const insertImage = useCallback(() => {
+    const url = window.prompt('Enter image URL:');
+    if (!url) return;
+    const alt = window.prompt('Enter alt text:', 'Image') || 'Image';
+    runCommand(insertImageCommand.key, { src: url, alt });
+  }, [runCommand]);
+
+  if (loading) return null;
+
+  return (
+    <div className="milkdown-toolbar">
+      <div className="toolbar-group">
+        <button onClick={() => insertHeading(1)} title="Heading 1">H1</button>
+        <button onClick={() => insertHeading(2)} title="Heading 2">H2</button>
+        <button onClick={() => insertHeading(3)} title="Heading 3">H3</button>
+      </div>
+
+      <div className="toolbar-divider" />
+
+      <div className="toolbar-group">
+        <button onClick={() => runCommand(toggleStrongCommand.key)} title="Bold (Ctrl+B)">
+          <strong>B</strong>
+        </button>
+        <button onClick={() => runCommand(toggleEmphasisCommand.key)} title="Italic (Ctrl+I)">
+          <em>I</em>
+        </button>
+        <button onClick={() => runCommand(toggleStrikethroughCommand.key)} title="Strikethrough">
+          <s>S</s>
+        </button>
+      </div>
+
+      <div className="toolbar-divider" />
+
+      <div className="toolbar-group">
+        <button onClick={() => runCommand(wrapInBulletListCommand.key)} title="Bullet List">•</button>
+        <button onClick={() => runCommand(wrapInOrderedListCommand.key)} title="Numbered List">1.</button>
+        <button onClick={() => runCommand(wrapInBlockquoteCommand.key)} title="Quote">❝</button>
+        <button onClick={() => runCommand(toggleInlineCodeCommand.key)} title="Code">{'{}'}</button>
+      </div>
+
+      <div className="toolbar-divider" />
+
+      <div className="toolbar-group">
+        <button onClick={insertLink} title="Insert Link">🔗</button>
+        <button onClick={insertImage} title="Insert Image">🖼</button>
+        <button onClick={() => runCommand(insertHrCommand.key)} title="Horizontal Rule">―</button>
+      </div>
+
+      <div className="toolbar-divider" />
+
+      <div className="toolbar-group">
+        <button onClick={() => runCommand(undoCommand.key)} title="Undo (Ctrl+Z)">↶</button>
+        <button onClick={() => runCommand(redoCommand.key)} title="Redo (Ctrl+Y)">↷</button>
+      </div>
+    </div>
+  );
+};
+
+// Main component with provider wrapper
+export const MilkdownEditor: React.FC<MilkdownEditorProps> = (props) => {
+  return (
+    <MilkdownProvider>
+      <MilkdownProviderInner {...props} />
+    </MilkdownProvider>
+  );
+};
+
+// Separate component to use hooks within provider
+const MilkdownProviderInner: React.FC<MilkdownEditorProps> = ({
+  content,
+  onChange,
+  placeholder = 'Start writing your content...',
+}) => {
+  const [loading, getEditor] = useInstance();
+  const lastExternalContent = useRef(content);
+  const isInternalChange = useRef(false);
+  const onChangeRef = useRef(onChange);
+  const contentRef = useRef(content);
+  // Store the normalized markdown after Milkdown's initial round-trip
+  // Only trigger onChange if the markdown differs from this baseline
+  const normalizedBaseline = useRef<string | null>(null);
+  
+  // Keep refs updated
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
+
+  // Initialize editor using useEditor hook
+  useEditor((root) => {
+    return Editor.make()
+      .config((ctx: Ctx) => {
+        ctx.set(rootCtx, root);
+        ctx.set(defaultValueCtx, contentRef.current);
+        // Configure remark-stringify to produce tight lists (no blank lines between list items)
+        ctx.set(remarkStringifyOptionsCtx, {
+          bullet: '-',
+          listItemIndent: 'one',
+        });
+        // Add custom remark plugin to force tight lists
+        ctx.set(remarkPluginsCtx, [remarkTightLists]);
+        ctx.get(listenerCtx).markdownUpdated((_ctx: Ctx, markdown: string, prevMarkdown: string) => {
+          if (markdown !== prevMarkdown) {
+            // On first update after load, store the normalized baseline
+            // This captures Milkdown's round-trip formatting
+            if (normalizedBaseline.current === null) {
+              normalizedBaseline.current = markdown;
+              return; // Don't trigger onChange for initial normalization
+            }
+            // Only trigger onChange if content differs from the baseline
+            // (meaning the user actually edited something)
+            if (markdown !== normalizedBaseline.current) {
+              isInternalChange.current = true;
+              normalizedBaseline.current = markdown; // Update baseline
+              onChangeRef.current(markdown);
+            }
+          }
+        });
+      })
+      .use(commonmark)
+      .use(gfm)
+      .use(history)
+      .use(listener)
+      .use(clipboard)
+      .use(trailing)
+      .use(indent)
+      .use(cursor);
+  }, []);
+
+  // Handle external content changes
+  useEffect(() => {
+    if (loading) return;
+    const editor = getEditor();
+    if (!editor) return;
+
+    if (content !== lastExternalContent.current && !isInternalChange.current) {
+      // Reset baseline so next markdownUpdated captures new normalized content
+      normalizedBaseline.current = null;
+      editor.action(replaceAll(content));
+      lastExternalContent.current = content;
+    }
+    isInternalChange.current = false;
+  }, [content, loading, getEditor]);
+
+  return (
+    <div className="milkdown-editor">
+      <EditorToolbar />
+      <div className="milkdown-content" data-placeholder={placeholder}>
+        <Milkdown />
+      </div>
+    </div>
+  );
+};
+
+export default MilkdownEditor;

src/renderer/components/MilkdownEditor/index.ts

@@ -0,0 +1 @@
+export { MilkdownEditor } from './MilkdownEditor';

src/renderer/components/ResizablePanel/ResizablePanel.css

@@ -31,6 +31,7 @@
 
 /* Resizer handle */
 .resizer {
+  position: relative;
   flex-shrink: 0;
   background: transparent;
   transition: background-color 0.15s;
@@ -52,7 +53,7 @@
   background-color: var(--vscode-sash-hoverBorder, #0078d4);
 }
 
-/* Double-click to reset */
+/* Extended hit area for easier grabbing */
 .resizer::after {
   content: '';
   position: absolute;
@@ -61,13 +62,15 @@
 .resizer.horizontal::after {
   top: 0;
   bottom: 0;
-  left: -2px;
+  left: -4px;
-  right: -2px;
+  right: -4px;
+  width: 12px;
 }
 
 .resizer.vertical::after {
   left: 0;
   right: 0;
-  top: -2px;
+  top: -4px;
-  bottom: -2px;
+  bottom: -4px;
+  height: 12px;
 }

src/renderer/components/WysiwygEditor/WysiwygEditor.css

@@ -1,296 +0,0 @@
-.wysiwyg-editor {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background-color: var(--vscode-input-background);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-/* Toolbar */
-.wysiwyg-toolbar {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  background-color: var(--vscode-sideBar-background);
-  border-bottom: 1px solid var(--vscode-panel-border);
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.toolbar-divider {
-  width: 1px;
-  height: 20px;
-  background-color: var(--vscode-panel-border);
-  margin: 0 8px;
-}
-
-.wysiwyg-toolbar button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 4px 8px;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--vscode-foreground);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background-color 0.15s;
-}
-
-.wysiwyg-toolbar button:hover:not(:disabled) {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.wysiwyg-toolbar button.is-active {
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-}
-
-.wysiwyg-toolbar button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Editor Content */
-.wysiwyg-content {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-.wysiwyg-content .ProseMirror {
-  outline: none;
-  min-height: 100%;
-  color: var(--vscode-editor-foreground);
-  font-size: 15px;
-  line-height: 1.7;
-}
-
-.wysiwyg-content .ProseMirror > * + * {
-  margin-top: 0.75em;
-}
-
-/* Placeholder */
-.wysiwyg-content .ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--vscode-descriptionForeground);
-  pointer-events: none;
-  height: 0;
-}
-
-/* Typography */
-.wysiwyg-content h1 {
-  font-size: 2em;
-  font-weight: 600;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  color: var(--vscode-editor-foreground);
-}
-
-.wysiwyg-content h2 {
-  font-size: 1.5em;
-  font-weight: 600;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  color: var(--vscode-editor-foreground);
-}
-
-.wysiwyg-content h3 {
-  font-size: 1.25em;
-  font-weight: 600;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  color: var(--vscode-editor-foreground);
-}
-
-.wysiwyg-content p {
-  margin: 0.5em 0;
-}
-
-.wysiwyg-content strong {
-  font-weight: 600;
-}
-
-.wysiwyg-content em {
-  font-style: italic;
-}
-
-.wysiwyg-content u {
-  text-decoration: underline;
-}
-
-.wysiwyg-content s {
-  text-decoration: line-through;
-}
-
-/* Links */
-.wysiwyg-content a,
-.wysiwyg-content .editor-link {
-  color: var(--vscode-textLink-foreground);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.wysiwyg-content a:hover {
-  color: var(--vscode-textLink-activeForeground);
-}
-
-/* Lists */
-.wysiwyg-content ul,
-.wysiwyg-content ol {
-  padding-left: 1.5em;
-  margin: 0.5em 0;
-}
-
-.wysiwyg-content li {
-  margin: 0.25em 0;
-}
-
-.wysiwyg-content ul {
-  list-style-type: disc;
-}
-
-.wysiwyg-content ol {
-  list-style-type: decimal;
-}
-
-/* Blockquote */
-.wysiwyg-content blockquote {
-  border-left: 3px solid var(--vscode-textBlockQuote-border);
-  padding-left: 1em;
-  margin: 1em 0;
-  color: var(--vscode-textBlockQuote-foreground);
-  font-style: italic;
-}
-
-/* Code */
-.wysiwyg-content code {
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: var(--vscode-editor-font-family);
-  font-size: 0.9em;
-}
-
-.wysiwyg-content pre {
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 12px 16px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 1em 0;
-}
-
-.wysiwyg-content pre code {
-  padding: 0;
-  background: none;
-  font-size: 0.9em;
-  line-height: 1.5;
-}
-
-/* Images */
-.wysiwyg-content img,
-.wysiwyg-content .editor-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-  margin: 1em 0;
-  cursor: pointer;
-  transition: box-shadow 0.2s;
-}
-
-.wysiwyg-content img:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-/* Horizontal Rule */
-.wysiwyg-content hr {
-  border: none;
-  border-top: 1px solid var(--vscode-panel-border);
-  margin: 2em 0;
-}
-
-/* Bubble Menu */
-.bubble-menu {
-  display: flex;
-  background-color: var(--vscode-editorWidget-background);
-  border: 1px solid var(--vscode-editorWidget-border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  padding: 4px;
-  gap: 2px;
-}
-
-.bubble-menu button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 4px 8px;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--vscode-foreground);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.bubble-menu button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.bubble-menu button.is-active {
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-}
-
-.bubble-menu .divider {
-  width: 1px;
-  background-color: var(--vscode-panel-border);
-  margin: 2px 4px;
-}
-
-/* Floating Menu */
-.floating-menu {
-  display: flex;
-  background-color: var(--vscode-editorWidget-background);
-  border: 1px solid var(--vscode-editorWidget-border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  padding: 4px;
-  gap: 2px;
-}
-
-.floating-menu button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 10px;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--vscode-foreground);
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.floating-menu button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.floating-menu button.is-active {
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-}

src/renderer/components/WysiwygEditor/WysiwygEditor.tsx

@@ -1,358 +0,0 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';
-import StarterKit from '@tiptap/starter-kit';
-import Image from '@tiptap/extension-image';
-import Placeholder from '@tiptap/extension-placeholder';
-import Link from '@tiptap/extension-link';
-import Underline from '@tiptap/extension-underline';
-import { Markdown } from 'tiptap-markdown';
-import './WysiwygEditor.css';
-
-// Type for tiptap-markdown extension storage (not exported by the package)
-interface MarkdownStorage {
-  markdown: {
-    getMarkdown: () => string;
-  };
-}
-
-interface WysiwygEditorProps {
-  content: string;
-  onChange: (markdown: string) => void;
-  placeholder?: string;
-}
-
-export const WysiwygEditor: React.FC<WysiwygEditorProps> = ({
-  content,
-  onChange,
-  placeholder = 'Start writing your content...',
-}) => {
-  // Track if we're updating from internal changes vs external prop changes
-  const isInternalChange = useRef(false);
-  // Track if we're in the middle of a programmatic content sync (shouldn't trigger onChange)
-  const isSyncingContent = useRef(false);
-  const lastExternalContent = useRef(content);
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        heading: {
-          levels: [1, 2, 3, 4, 5, 6],
-        },
-      }),
-      Link.configure({
-        openOnClick: false,
-        HTMLAttributes: {
-          class: 'editor-link',
-        },
-      }),
-      Underline,
-      Image.configure({
-        HTMLAttributes: {
-          class: 'editor-image',
-        },
-      }),
-      Placeholder.configure({
-        placeholder,
-      }),
-      Markdown.configure({
-        html: false,
-        bulletListMarker: '-',
-        transformPastedText: true,
-        transformCopiedText: true,
-      }),
-    ],
-    content,
-    onUpdate: ({ editor }) => {
-      // Don't call onChange during programmatic content sync
-      if (isSyncingContent.current) {
-        return;
-      }
-      isInternalChange.current = true;
-      const markdown = (editor.storage as unknown as MarkdownStorage).markdown.getMarkdown();
-      onChange(markdown);
-    },
-    editable: true,
-  });
-
-  // Sync content from external changes only (e.g., post switch)
-  useEffect(() => {
-    if (editor && content !== lastExternalContent.current) {
-      // This is an external change (e.g., switching posts)
-      if (!isInternalChange.current) {
-        // Mark that we're syncing to prevent onChange from firing
-        isSyncingContent.current = true;
-        editor.commands.setContent(content);
-        // Reset sync flag after a microtask to ensure onUpdate has fired
-        Promise.resolve().then(() => {
-          isSyncingContent.current = false;
-        });
-      }
-      lastExternalContent.current = content;
-      isInternalChange.current = false;
-    }
-  }, [content, editor]);
-
-  const addImage = useCallback(() => {
-    const url = window.prompt('Enter image URL:');
-    if (url && editor) {
-      editor.chain().focus().setImage({ src: url }).run();
-    }
-  }, [editor]);
-
-  const setLink = useCallback(() => {
-    if (!editor) return;
-    
-    const previousUrl = editor.getAttributes('link').href;
-    const url = window.prompt('Enter URL:', previousUrl);
-
-    if (url === null) return;
-
-    if (url === '') {
-      editor.chain().focus().extendMarkRange('link').unsetLink().run();
-      return;
-    }
-
-    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-  }, [editor]);
-
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <div className="wysiwyg-editor">
-      {/* Bubble menu appears when text is selected */}
-      {editor && (
-        <BubbleMenu className="bubble-menu" editor={editor}>
-          <button
-            onClick={() => editor.chain().focus().toggleBold().run()}
-            className={editor.isActive('bold') ? 'is-active' : ''}
-            title="Bold"
-          >
-            <strong>B</strong>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            className={editor.isActive('italic') ? 'is-active' : ''}
-            title="Italic"
-          >
-            <em>I</em>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleUnderline().run()}
-            className={editor.isActive('underline') ? 'is-active' : ''}
-            title="Underline"
-          >
-            <u>U</u>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleStrike().run()}
-            className={editor.isActive('strike') ? 'is-active' : ''}
-            title="Strikethrough"
-          >
-            <s>S</s>
-          </button>
-          <div className="divider" />
-          <button onClick={setLink} className={editor.isActive('link') ? 'is-active' : ''} title="Link">
-            🔗
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleCode().run()}
-            className={editor.isActive('code') ? 'is-active' : ''}
-            title="Code"
-          >
-            {'</>'}
-          </button>
-        </BubbleMenu>
-      )}
-
-      {/* Floating menu appears on empty lines, but only when editor has content */}
-      {editor && (
-        <FloatingMenu 
-          className="floating-menu" 
-          editor={editor}
-          shouldShow={({ editor }) => {
-            // Only show floating menu if editor has real content (not just empty paragraph)
-            const text = editor.state.doc.textContent;
-            if (!text || text.trim().length === 0) {
-              return false;
-            }
-            // Also check if we're on an empty line (default behavior)
-            const { $from } = editor.state.selection;
-            const isEmptyLine = $from.parent.content.size === 0;
-            return isEmptyLine;
-          }}
-        >
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-            className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-          >
-            H1
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-            className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-          >
-            H2
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-            className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-          >
-            H3
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleBulletList().run()}
-            className={editor.isActive('bulletList') ? 'is-active' : ''}
-          >
-            • List
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleBlockquote().run()}
-            className={editor.isActive('blockquote') ? 'is-active' : ''}
-          >
-            ❝ Quote
-          </button>
-          <button onClick={addImage}>
-            🖼 Image
-          </button>
-        </FloatingMenu>
-      )}
-
-      {/* Toolbar */}
-      <div className="wysiwyg-toolbar">
-        <div className="toolbar-group">
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-            className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-            title="Heading 1"
-          >
-            H1
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-            className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-            title="Heading 2"
-          >
-            H2
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-            className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-            title="Heading 3"
-          >
-            H3
-          </button>
-        </div>
-
-        <div className="toolbar-divider" />
-
-        <div className="toolbar-group">
-          <button
-            onClick={() => editor.chain().focus().toggleBold().run()}
-            className={editor.isActive('bold') ? 'is-active' : ''}
-            title="Bold (Ctrl+B)"
-          >
-            <strong>B</strong>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            className={editor.isActive('italic') ? 'is-active' : ''}
-            title="Italic (Ctrl+I)"
-          >
-            <em>I</em>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleUnderline().run()}
-            className={editor.isActive('underline') ? 'is-active' : ''}
-            title="Underline (Ctrl+U)"
-          >
-            <u>U</u>
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleStrike().run()}
-            className={editor.isActive('strike') ? 'is-active' : ''}
-            title="Strikethrough"
-          >
-            <s>S</s>
-          </button>
-        </div>
-
-        <div className="toolbar-divider" />
-
-        <div className="toolbar-group">
-          <button
-            onClick={() => editor.chain().focus().toggleBulletList().run()}
-            className={editor.isActive('bulletList') ? 'is-active' : ''}
-            title="Bullet List"
-          >
-            •
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleOrderedList().run()}
-            className={editor.isActive('orderedList') ? 'is-active' : ''}
-            title="Numbered List"
-          >
-            1.
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleBlockquote().run()}
-            className={editor.isActive('blockquote') ? 'is-active' : ''}
-            title="Quote"
-          >
-            ❝
-          </button>
-          <button
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            className={editor.isActive('codeBlock') ? 'is-active' : ''}
-            title="Code Block"
-          >
-            {'{}'}
-          </button>
-        </div>
-
-        <div className="toolbar-divider" />
-
-        <div className="toolbar-group">
-          <button onClick={setLink} className={editor.isActive('link') ? 'is-active' : ''} title="Insert Link">
-            🔗
-          </button>
-          <button onClick={addImage} title="Insert Image">
-            🖼
-          </button>
-          <button
-            onClick={() => editor.chain().focus().setHorizontalRule().run()}
-            title="Horizontal Rule"
-          >
-            ―
-          </button>
-        </div>
-
-        <div className="toolbar-divider" />
-
-        <div className="toolbar-group">
-          <button
-            onClick={() => editor.chain().focus().undo().run()}
-            disabled={!editor.can().undo()}
-            title="Undo (Ctrl+Z)"
-          >
-            ↶
-          </button>
-          <button
-            onClick={() => editor.chain().focus().redo().run()}
-            disabled={!editor.can().redo()}
-            title="Redo (Ctrl+Y)"
-          >
-            ↷
-          </button>
-        </div>
-      </div>
-
-      {/* Editor Content */}
-      <EditorContent className="wysiwyg-content" editor={editor} />
-    </div>
-  );
-};
-
-export default WysiwygEditor;

src/renderer/components/WysiwygEditor/index.ts

@@ -1 +0,0 @@
-export { WysiwygEditor } from './WysiwygEditor';

src/renderer/components/index.ts

@@ -6,7 +6,7 @@ export { Panel } from './Panel';
 export { TabBar } from './TabBar';
 export { ToastContainer, toast, showToast, type ToastType } from './Toast';
 export { ProjectSelector } from './ProjectSelector';
-export { WysiwygEditor } from './WysiwygEditor';
+export { MilkdownEditor } from './MilkdownEditor';
 export { Lightbox, ImageGallery, useMarkdownImages } from './Lightbox';
 export { TaskPopup } from './TaskPopup';
 export { ResizablePanel } from './ResizablePanel';