feat: implement text wrapping commands and enhance image preview dimensions in MarkdownEditor

Author: NoOne7135

custom/MarkdownEditor.vue

@@ -229,10 +229,60 @@ function getTurndownService(): TurndownService {
       return `![${altFinal}](${src} "${escapedTitle}")`;
     },
   });
-
+  turndownService.escape = (s: string) => s;
   return turndownService;
 }
 
+function toggleWrap(ed: monaco.editor.IStandaloneCodeEditor, left: string, right = left) {
+  const m = ed.getModel();
+  if (!m) return;
+
+  const selections = ed.getSelections() || [];
+  if (!selections.length) return;
+
+  const edits: monaco.editor.IIdentifiedSingleEditOperation[] = [];
+  const nextSelections: monaco.Selection[] = [];
+
+  for (const sel of selections) {
+    const text = m.getValueInRange(sel);
+
+    if (sel.isEmpty()) {
+      edits.push({ range: sel, text: `${left}${right}` });
+      const pos = sel.getStartPosition();
+      const col = pos.column + left.length;
+      nextSelections.push(new monaco.Selection(pos.lineNumber, col, pos.lineNumber, col));
+      continue;
+    }
+
+    const isWrapped = text.startsWith(left) && text.endsWith(right) && text.length >= left.length + right.length;
+
+    if (isWrapped) {
+      const unwrapped = text.slice(left.length, text.length - right.length);
+      edits.push({ range: sel, text: unwrapped });
+
+      const start = sel.getStartPosition();
+      nextSelections.push(new monaco.Selection(start.lineNumber, start.column, start.lineNumber, start.column + unwrapped.length));
+    } else {
+      edits.push({ range: sel, text: `${left}${text}${right}` });
+
+      const start = sel.getStartPosition();
+      nextSelections.push(
+        new monaco.Selection(
+          start.lineNumber,
+          start.column + left.length,
+          start.lineNumber,
+          start.column + left.length + text.length,
+        ),
+      );
+    }
+  }
+
+  ed.pushUndoStop();
+  ed.executeEdits('md-format', edits);
+  ed.pushUndoStop();
+  ed.setSelections(nextSelections);
+}
+
 let editor: monaco.editor.IStandaloneCodeEditor | null = null;
 let model: monaco.editor.ITextModel | null = null;
 const disposables: monaco.IDisposable[] = [];
@@ -310,13 +360,14 @@ function updateImagePreviews() {
       preview.style.display = 'inline-block';
       preview.style.borderRadius = '6px';
       preview.style.overflow = 'hidden';
-      preview.style.maxWidth = '220px';
-      preview.style.maxHeight = '140px';
+      preview.style.maxWidth = '440px';
+      preview.style.maxHeight = '280px';
+
 
       const imageEl = document.createElement('img');
       imageEl.src = img.src;
-      imageEl.style.maxWidth = '220px';
-      imageEl.style.maxHeight = '140px';
+      imageEl.style.maxWidth = '440px';
+      imageEl.style.maxHeight = '280px';
       imageEl.style.display = 'block';
       imageEl.style.opacity = '0.95';
 
@@ -325,7 +376,7 @@ function updateImagePreviews() {
 
       const zone: monaco.editor.IViewZone = {
         afterLineNumber: img.lineNumber,
-        heightInPx: 160,
+        heightInPx: 320,
         domNode: wrapper,
       };
 
@@ -336,7 +387,7 @@ function updateImagePreviews() {
       imageEl.onload = () => {
         if (!editor) return;
         const measured = wrapper.offsetHeight;
-        const nextHeight = Math.max(40, Math.min(200, measured || 160));
+        const nextHeight = Math.max(60, Math.min(520, measured || 320));
         if (zone.heightInPx !== nextHeight) {
           zone.heightInPx = nextHeight;
           editor.changeViewZones((a) => a.layoutZone(zoneId));
@@ -455,8 +506,38 @@ onMounted(async () => {
       model,
       language: 'markdown',
       automaticLayout: true,
+      wordWrap: 'on',
+      wrappingStrategy: 'advanced',
+      wrappingIndent: 'same',
+      scrollbar: {
+        horizontal: 'hidden',
+      },
+      scrollBeyondLastColumn: 0,
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
+      toggleWrap(editor!, '*');
     });
 
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB, () => {
+      toggleWrap(editor!, '**');
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU, () => {
+      toggleWrap(editor!, '<u>', '</u>');
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
+      toggleWrap(editor!, '`');
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Shift | monaco.KeyCode.KeyX, () => {
+      toggleWrap(editor!, '~~');
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, () => {
+      const selection = editor!.getSelection();
+      if (!selection) return;
+      const text = model?.getValueInRange(selection) || '';
+      const escaped = escapeMarkdownLinkText(text);
+      const markdownLink = `[${escaped}](url)`;
+      editor!.executeEdits('insert-link', [{ range: selection, text: markdownLink, forceMoveMarkers: true }]);
+    });
     debug('Monaco editor created', {
       hasUploadPluginInstanceId: Boolean(props.meta?.uploadPluginInstanceId),
     });