feat: add Milkdown as default WYSIWYG editor

index.html

@@ -244,6 +244,7 @@ <h1>OpenMarkdownReader</h1>
       <div id="content" class="content hidden">
         <div id="editor-container" class="editor-container hidden">
           <textarea id="editor" class="editor" spellcheck="false"></textarea>
+          <div id="milkdown-editor" class="milkdown-editor hidden"></div>
         </div>
         <article id="markdown-body" class="markdown-body"></article>
         <!-- CSV Table View -->
@@ -439,6 +440,7 @@ <h2>Report an Issue</h2>
   <script src="vendor/marked.min.js"></script>
   <script src="vendor/highlight.min.js"></script>
   <script src="vendor/easymde.min.js"></script>
+  <script src="milkdown-bundle.js"></script>
   <script src="word-count.js"></script>
   <script src="sidebar-highlight.js"></script>
   <script src="sidebar-tree-utils.js"></script>

main.js

@@ -191,6 +191,7 @@ let config = {
   contentWidth: 900,
   contentPadding: 20,
   editorMonospace: false, // Use monospace font in editor
+  editorEngine: 'milkdown', // 'milkdown' or 'easymde' - WYSIWYG editor engine
   compactTables: false, // Compact table cells (nowrap + horizontal scroll)
   restoreSession: true, // Whether to restore previous session on launch
   session: null, // Saved session state: { windows: [{ tabs: [{filePath, fileName}], directory: dirPath }] }
@@ -896,6 +897,7 @@ function createWindow(filePath = null) {
     win.webContents.send('setting-changed', { setting: 'content-width', value: config.contentWidth });
     win.webContents.send('setting-changed', { setting: 'content-padding', value: config.contentPadding });
     win.webContents.send('setting-changed', { setting: 'editor-monospace', value: config.editorMonospace || false });
+    win.webContents.send('setting-changed', { setting: 'editor-engine', value: config.editorEngine || 'milkdown' });
     win.webContents.send('setting-changed', { setting: 'compact-tables', value: config.compactTables || false });
     win.webContents.send('setting-changed', { key: 'noos-widget', value: config.noosWidget === true });
 
@@ -1465,6 +1467,33 @@ function setupMenu() {
             broadcastSetting('editor-monospace', menuItem.checked);
           }
         },
+        {
+          label: 'Rich Editor Engine',
+          submenu: [
+            {
+              label: 'Milkdown (WYSIWYG)',
+              type: 'radio',
+              id: 'editor-milkdown',
+              checked: (config.editorEngine || 'milkdown') === 'milkdown',
+              click: () => {
+                config.editorEngine = 'milkdown';
+                saveConfig();
+                broadcastSetting('editor-engine', 'milkdown');
+              }
+            },
+            {
+              label: 'EasyMDE (Markdown Preview)',
+              type: 'radio',
+              id: 'editor-easymde',
+              checked: config.editorEngine === 'easymde',
+              click: () => {
+                config.editorEngine = 'easymde';
+                saveConfig();
+                broadcastSetting('editor-engine', 'easymde');
+              }
+            }
+          ]
+        },
         {
           label: 'Compact Tables',
           type: 'checkbox',

milkdown-entry.js

@@ -0,0 +1,69 @@
+// Milkdown entry point for bundling
+import { Editor, rootCtx, defaultValueCtx, editorViewCtx } from '@milkdown/core';
+import { commonmark, toggleStrongCommand, toggleEmphasisCommand, wrapInBlockquoteCommand, insertHrCommand, wrapInHeadingCommand, insertImageCommand, wrapInBulletListCommand, wrapInOrderedListCommand, turnIntoTextCommand, toggleInlineCodeCommand } from '@milkdown/preset-commonmark';
+import { history, undoCommand, redoCommand } from '@milkdown/plugin-history';
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { callCommand } from '@milkdown/utils';
+
+// Export everything needed
+export {
+  Editor, rootCtx, defaultValueCtx, editorViewCtx, commonmark, history, listener, listenerCtx, callCommand,
+  toggleStrongCommand, toggleEmphasisCommand, wrapInBlockquoteCommand, insertHrCommand,
+  wrapInHeadingCommand, insertImageCommand, wrapInBulletListCommand, wrapInOrderedListCommand,
+  turnIntoTextCommand, toggleInlineCodeCommand, undoCommand, redoCommand
+};
+
+// Create a Milkdown editor instance
+export async function createMilkdownEditor(container, initialContent, onUpdate) {
+  const editor = await Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, container);
+      ctx.set(defaultValueCtx, initialContent || '');
+
+      // Set up listener for content changes
+      const listenerCtxVal = ctx.get(listenerCtx);
+      if (listenerCtxVal) {
+        listenerCtxVal.markdownUpdated((ctx, markdown, prevMarkdown) => {
+          if (onUpdate && markdown !== prevMarkdown) {
+            onUpdate(markdown);
+          }
+        });
+      }
+    })
+    .use(commonmark)
+    .use(history)
+    .use(listener)
+    .create();
+
+  return editor;
+}
+
+// Get markdown content from editor
+export function getMilkdownContent(editor) {
+  if (!editor) return '';
+  try {
+    const ctx = editor.ctx;
+    const view = ctx.get(editorViewCtx);
+    const serializer = ctx.get(commonmark.schema).serializer;
+    return serializer.serialize(view.state.doc);
+  } catch (e) {
+    console.error('Error getting milkdown content:', e);
+    return '';
+  }
+}
+
+// Set markdown content in editor
+export function setMilkdownContent(editor, markdown) {
+  if (!editor) return;
+  try {
+    editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const parser = ctx.get(commonmark.schema).parser;
+      const doc = parser.parse(markdown || '');
+      const tr = view.state.tr.replaceWith(0, view.state.doc.content.size, doc.content);
+      view.dispatch(tr);
+    });
+  } catch (e) {
+    console.error('Error setting milkdown content:', e);
+  }
+}