@adminforth/markdown 1.8.0 → 1.9.1

package/build.log

@@ -9,6 +9,8 @@ custom/MarkdownRenderer.vue
 custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
+custom/utils/
+custom/utils/monacoMarkdownToggle.ts
 
-sent 29,849 bytes  received 115 bytes  59,928.00 bytes/sec
-total size is 29,417  speedup is 0.98
+sent 37,202 bytes  received 146 bytes  74,696.00 bytes/sec
+total size is 36,649  speedup is 0.98

package/custom/MarkdownEditor.vue

@@ -18,6 +18,7 @@ import { callAdminForthApi } from '@/utils';
 import * as monaco from 'monaco-editor';
 import TurndownService from 'turndown';
 import { gfm, tables } from 'turndown-plugin-gfm';
+import { toggleWrapSmart } from './utils/monacoMarkdownToggle';
 
 const props = defineProps<{
   column: any,
@@ -229,10 +230,11 @@ function getTurndownService(): TurndownService {
       return `![${altFinal}](${src} "${escapedTitle}")`;
     },
   });
-
+  turndownService.escape = (s: string) => s;
   return turndownService;
 }
 
+
 let editor: monaco.editor.IStandaloneCodeEditor | null = null;
 let model: monaco.editor.ITextModel | null = null;
 const disposables: monaco.IDisposable[] = [];
@@ -310,13 +312,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 +328,7 @@ function updateImagePreviews() {
 
       const zone: monaco.editor.IViewZone = {
         afterLineNumber: img.lineNumber,
-        heightInPx: 160,
+        heightInPx: 320,
         domNode: wrapper,
       };
 
@@ -336,7 +339,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,6 +458,41 @@ 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.KeyB, () => {
+      toggleWrapSmart(editor!, '**');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
+      toggleWrapSmart(editor!, '*');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
+      toggleWrapSmart(editor!, '`');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyX, () => {
+      toggleWrapSmart(editor!, '~~');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU, () => {
+      toggleWrapSmart(editor!, '<u>', '</u>');
+    });
+
+    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', {

package/custom/utils/monacoMarkdownToggle.ts

@@ -0,0 +1,173 @@
+import * as monaco from 'monaco-editor';
+
+function trimTrailingEolSelection(
+  m: monaco.editor.ITextModel,
+  sel: monaco.Selection,
+): monaco.Selection {
+  if (!sel.isEmpty() && sel.endColumn === 1 && sel.endLineNumber > sel.startLineNumber) {
+    const prevLine = sel.endLineNumber - 1;
+    const endCol = m.getLineMaxColumn(prevLine); // after last char
+    return new monaco.Selection(sel.startLineNumber, sel.startColumn, prevLine, endCol);
+  }
+  return sel;
+}
+
+function rangeFromOffsets(m: monaco.editor.ITextModel, startOffset: number, endOffset: number): monaco.Range {
+  const s = m.getPositionAt(startOffset);
+  const e = m.getPositionAt(endOffset);
+  return new monaco.Range(s.lineNumber, s.column, e.lineNumber, e.column);
+}
+
+export function toggleWrapSmart(
+  ed: monaco.editor.IStandaloneCodeEditor,
+  left: string,
+  right: string = left,
+) {
+  let m = ed.getModel();
+  if (!m) return;
+
+  const selections = ed.getSelections() || [];
+  if (!selections.length) return;
+
+  const leftLen = left.length;
+  const rightLen = right.length;
+
+  const indexed = selections.map((s, idx) => ({ s, idx }));
+
+  indexed.sort((a, b) => {
+    const ma = ed.getModel();
+    if (!ma) return 0;
+    const ao = ma.getOffsetAt(a.s.getStartPosition());
+    const bo = ma.getOffsetAt(b.s.getStartPosition());
+    if (ao !== bo) return bo - ao;
+    const ae = ma.getOffsetAt(a.s.getEndPosition());
+    const be = ma.getOffsetAt(b.s.getEndPosition());
+    return be - ae;
+  });
+
+  const nextSelections: Array<monaco.Selection | null> = new Array(selections.length).fill(null);
+
+  const getTextByOffsets = (startOffset: number, endOffset: number) => {
+    const mm = ed.getModel();
+    if (!mm) return '';
+    return mm.getValueInRange(rangeFromOffsets(mm, startOffset, endOffset));
+  };
+
+  ed.pushUndoStop();
+
+  for (const item of indexed) {
+    m = ed.getModel();
+    if (!m) break;
+
+    let sel = item.s;
+    sel = trimTrailingEolSelection(m, sel);
+
+    const startPos = sel.getStartPosition();
+    const endPos = sel.getEndPosition();
+    const startOffset = m.getOffsetAt(startPos);
+    const endOffset = m.getOffsetAt(endPos);
+
+    const isEmpty = sel.isEmpty();
+    const modelLen = m.getValueLength();
+
+    const hasAdjacentWrap = () => {
+      if (startOffset < leftLen) return false;
+      if (endOffset + rightLen > modelLen) return false;
+
+      const l = getTextByOffsets(startOffset - leftLen, startOffset);
+      const r = getTextByOffsets(endOffset, endOffset + rightLen);
+      return l === left && r === right;
+    };
+
+    const removeAdjacentWrap = () => {
+      const leftRange = rangeFromOffsets(m!, startOffset - leftLen, startOffset);
+      const rightRange = rangeFromOffsets(m!, endOffset, endOffset + rightLen);
+
+      ed.executeEdits('md-toggle-wrap', [
+        { range: rightRange, text: '', forceMoveMarkers: true },
+        { range: leftRange, text: '', forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const ns = startOffset - leftLen;
+      const ne = endOffset - leftLen;
+
+      const s = mm.getPositionAt(ns);
+      const e = mm.getPositionAt(ne);
+      nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+    };
+
+    if (isEmpty) {
+      if (startOffset >= leftLen && startOffset + rightLen <= modelLen) {
+        const l = getTextByOffsets(startOffset - leftLen, startOffset);
+        const r = getTextByOffsets(startOffset, startOffset + rightLen);
+        if (l === left && r === right) {
+          const leftRange = rangeFromOffsets(m, startOffset - leftLen, startOffset);
+          const rightRange = rangeFromOffsets(m, startOffset, startOffset + rightLen);
+
+          ed.executeEdits('md-toggle-wrap', [
+            { range: rightRange, text: '', forceMoveMarkers: true },
+            { range: leftRange, text: '', forceMoveMarkers: true },
+          ]);
+
+          const mm = ed.getModel()!;
+          const p = mm.getPositionAt(startOffset - leftLen);
+          nextSelections[item.idx] = new monaco.Selection(p.lineNumber, p.column, p.lineNumber, p.column);
+          continue;
+        }
+      }
+
+      const insertRange = rangeFromOffsets(m, startOffset, startOffset);
+      ed.executeEdits('md-toggle-wrap', [
+        { range: insertRange, text: `${left}${right}`, forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const p = mm.getPositionAt(startOffset + leftLen);
+      nextSelections[item.idx] = new monaco.Selection(p.lineNumber, p.column, p.lineNumber, p.column);
+      continue;
+    }
+
+    const selectedText = m.getValueInRange(sel);
+
+    const isExplicitWrapped =
+      selectedText.length >= leftLen + rightLen &&
+      selectedText.startsWith(left) &&
+      selectedText.endsWith(right);
+
+    if (isExplicitWrapped) {
+      const unwrapped = selectedText.slice(leftLen, selectedText.length - rightLen);
+
+      ed.executeEdits('md-toggle-wrap', [
+        { range: sel, text: unwrapped, forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const s = mm.getPositionAt(startOffset);
+      const e = mm.getPositionAt(startOffset + unwrapped.length);
+      nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+      continue;
+    }
+
+    if (hasAdjacentWrap()) {
+      removeAdjacentWrap();
+      continue;
+    }
+
+    ed.executeEdits('md-toggle-wrap', [
+      { range: sel, text: `${left}${selectedText}${right}`, forceMoveMarkers: true },
+    ]);
+
+    const mm = ed.getModel()!;
+    const ns = startOffset + leftLen;
+    const ne = endOffset + leftLen;
+    const s = mm.getPositionAt(ns);
+    const e = mm.getPositionAt(ne);
+    nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+  }
+
+  ed.pushUndoStop();
+
+  const finalSelections = nextSelections.map((s, i) => s ?? selections[i]);
+  ed.setSelections(finalSelections);
+}

package/dist/custom/MarkdownEditor.vue

@@ -18,6 +18,7 @@ import { callAdminForthApi } from '@/utils';
 import * as monaco from 'monaco-editor';
 import TurndownService from 'turndown';
 import { gfm, tables } from 'turndown-plugin-gfm';
+import { toggleWrapSmart } from './utils/monacoMarkdownToggle';
 
 const props = defineProps<{
   column: any,
@@ -229,10 +230,11 @@ function getTurndownService(): TurndownService {
       return `![${altFinal}](${src} "${escapedTitle}")`;
     },
   });
-
+  turndownService.escape = (s: string) => s;
   return turndownService;
 }
 
+
 let editor: monaco.editor.IStandaloneCodeEditor | null = null;
 let model: monaco.editor.ITextModel | null = null;
 const disposables: monaco.IDisposable[] = [];
@@ -310,13 +312,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 +328,7 @@ function updateImagePreviews() {
 
       const zone: monaco.editor.IViewZone = {
         afterLineNumber: img.lineNumber,
-        heightInPx: 160,
+        heightInPx: 320,
         domNode: wrapper,
       };
 
@@ -336,7 +339,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,6 +458,41 @@ 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.KeyB, () => {
+      toggleWrapSmart(editor!, '**');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
+      toggleWrapSmart(editor!, '*');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
+      toggleWrapSmart(editor!, '`');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyX, () => {
+      toggleWrapSmart(editor!, '~~');
+    });
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU, () => {
+      toggleWrapSmart(editor!, '<u>', '</u>');
+    });
+
+    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', {

package/dist/custom/utils/monacoMarkdownToggle.ts

@@ -0,0 +1,173 @@
+import * as monaco from 'monaco-editor';
+
+function trimTrailingEolSelection(
+  m: monaco.editor.ITextModel,
+  sel: monaco.Selection,
+): monaco.Selection {
+  if (!sel.isEmpty() && sel.endColumn === 1 && sel.endLineNumber > sel.startLineNumber) {
+    const prevLine = sel.endLineNumber - 1;
+    const endCol = m.getLineMaxColumn(prevLine); // after last char
+    return new monaco.Selection(sel.startLineNumber, sel.startColumn, prevLine, endCol);
+  }
+  return sel;
+}
+
+function rangeFromOffsets(m: monaco.editor.ITextModel, startOffset: number, endOffset: number): monaco.Range {
+  const s = m.getPositionAt(startOffset);
+  const e = m.getPositionAt(endOffset);
+  return new monaco.Range(s.lineNumber, s.column, e.lineNumber, e.column);
+}
+
+export function toggleWrapSmart(
+  ed: monaco.editor.IStandaloneCodeEditor,
+  left: string,
+  right: string = left,
+) {
+  let m = ed.getModel();
+  if (!m) return;
+
+  const selections = ed.getSelections() || [];
+  if (!selections.length) return;
+
+  const leftLen = left.length;
+  const rightLen = right.length;
+
+  const indexed = selections.map((s, idx) => ({ s, idx }));
+
+  indexed.sort((a, b) => {
+    const ma = ed.getModel();
+    if (!ma) return 0;
+    const ao = ma.getOffsetAt(a.s.getStartPosition());
+    const bo = ma.getOffsetAt(b.s.getStartPosition());
+    if (ao !== bo) return bo - ao;
+    const ae = ma.getOffsetAt(a.s.getEndPosition());
+    const be = ma.getOffsetAt(b.s.getEndPosition());
+    return be - ae;
+  });
+
+  const nextSelections: Array<monaco.Selection | null> = new Array(selections.length).fill(null);
+
+  const getTextByOffsets = (startOffset: number, endOffset: number) => {
+    const mm = ed.getModel();
+    if (!mm) return '';
+    return mm.getValueInRange(rangeFromOffsets(mm, startOffset, endOffset));
+  };
+
+  ed.pushUndoStop();
+
+  for (const item of indexed) {
+    m = ed.getModel();
+    if (!m) break;
+
+    let sel = item.s;
+    sel = trimTrailingEolSelection(m, sel);
+
+    const startPos = sel.getStartPosition();
+    const endPos = sel.getEndPosition();
+    const startOffset = m.getOffsetAt(startPos);
+    const endOffset = m.getOffsetAt(endPos);
+
+    const isEmpty = sel.isEmpty();
+    const modelLen = m.getValueLength();
+
+    const hasAdjacentWrap = () => {
+      if (startOffset < leftLen) return false;
+      if (endOffset + rightLen > modelLen) return false;
+
+      const l = getTextByOffsets(startOffset - leftLen, startOffset);
+      const r = getTextByOffsets(endOffset, endOffset + rightLen);
+      return l === left && r === right;
+    };
+
+    const removeAdjacentWrap = () => {
+      const leftRange = rangeFromOffsets(m!, startOffset - leftLen, startOffset);
+      const rightRange = rangeFromOffsets(m!, endOffset, endOffset + rightLen);
+
+      ed.executeEdits('md-toggle-wrap', [
+        { range: rightRange, text: '', forceMoveMarkers: true },
+        { range: leftRange, text: '', forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const ns = startOffset - leftLen;
+      const ne = endOffset - leftLen;
+
+      const s = mm.getPositionAt(ns);
+      const e = mm.getPositionAt(ne);
+      nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+    };
+
+    if (isEmpty) {
+      if (startOffset >= leftLen && startOffset + rightLen <= modelLen) {
+        const l = getTextByOffsets(startOffset - leftLen, startOffset);
+        const r = getTextByOffsets(startOffset, startOffset + rightLen);
+        if (l === left && r === right) {
+          const leftRange = rangeFromOffsets(m, startOffset - leftLen, startOffset);
+          const rightRange = rangeFromOffsets(m, startOffset, startOffset + rightLen);
+
+          ed.executeEdits('md-toggle-wrap', [
+            { range: rightRange, text: '', forceMoveMarkers: true },
+            { range: leftRange, text: '', forceMoveMarkers: true },
+          ]);
+
+          const mm = ed.getModel()!;
+          const p = mm.getPositionAt(startOffset - leftLen);
+          nextSelections[item.idx] = new monaco.Selection(p.lineNumber, p.column, p.lineNumber, p.column);
+          continue;
+        }
+      }
+
+      const insertRange = rangeFromOffsets(m, startOffset, startOffset);
+      ed.executeEdits('md-toggle-wrap', [
+        { range: insertRange, text: `${left}${right}`, forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const p = mm.getPositionAt(startOffset + leftLen);
+      nextSelections[item.idx] = new monaco.Selection(p.lineNumber, p.column, p.lineNumber, p.column);
+      continue;
+    }
+
+    const selectedText = m.getValueInRange(sel);
+
+    const isExplicitWrapped =
+      selectedText.length >= leftLen + rightLen &&
+      selectedText.startsWith(left) &&
+      selectedText.endsWith(right);
+
+    if (isExplicitWrapped) {
+      const unwrapped = selectedText.slice(leftLen, selectedText.length - rightLen);
+
+      ed.executeEdits('md-toggle-wrap', [
+        { range: sel, text: unwrapped, forceMoveMarkers: true },
+      ]);
+
+      const mm = ed.getModel()!;
+      const s = mm.getPositionAt(startOffset);
+      const e = mm.getPositionAt(startOffset + unwrapped.length);
+      nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+      continue;
+    }
+
+    if (hasAdjacentWrap()) {
+      removeAdjacentWrap();
+      continue;
+    }
+
+    ed.executeEdits('md-toggle-wrap', [
+      { range: sel, text: `${left}${selectedText}${right}`, forceMoveMarkers: true },
+    ]);
+
+    const mm = ed.getModel()!;
+    const ns = startOffset + leftLen;
+    const ne = endOffset + leftLen;
+    const s = mm.getPositionAt(ns);
+    const e = mm.getPositionAt(ne);
+    nextSelections[item.idx] = new monaco.Selection(s.lineNumber, s.column, e.lineNumber, e.column);
+  }
+
+  ed.pushUndoStop();
+
+  const finalSelections = nextSelections.map((s, i) => s ?? selections[i]);
+  ed.setSelections(finalSelections);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/markdown",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Markdown plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",