@adminforth/markdown 1.9.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 32,725 bytes  received 115 bytes  65,680.00 bytes/sec
-total size is 32,299  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,
@@ -233,55 +234,6 @@ function getTurndownService(): TurndownService {
   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;
@@ -514,22 +466,26 @@ onMounted(async () => {
       },
       scrollBeyondLastColumn: 0,
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
-      toggleWrap(editor!, '*');
-    });
-
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB, () => {
-      toggleWrap(editor!, '**');
+      toggleWrapSmart(editor!, '**');
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU, () => {
-      toggleWrap(editor!, '<u>', '</u>');
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
+      toggleWrapSmart(editor!, '*');
     });
+
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
-      toggleWrap(editor!, '`');
+      toggleWrapSmart(editor!, '`');
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Shift | monaco.KeyCode.KeyX, () => {
-      toggleWrap(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;
@@ -538,6 +494,7 @@ onMounted(async () => {
       const markdownLink = `[${escaped}](url)`;
       editor!.executeEdits('insert-link', [{ range: selection, text: markdownLink, forceMoveMarkers: true }]);
     });
+
     debug('Monaco editor created', {
       hasUploadPluginInstanceId: Boolean(props.meta?.uploadPluginInstanceId),
     });

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,
@@ -233,55 +234,6 @@ function getTurndownService(): TurndownService {
   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;
@@ -514,22 +466,26 @@ onMounted(async () => {
       },
       scrollBeyondLastColumn: 0,
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
-      toggleWrap(editor!, '*');
-    });
-
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB, () => {
-      toggleWrap(editor!, '**');
+      toggleWrapSmart(editor!, '**');
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU, () => {
-      toggleWrap(editor!, '<u>', '</u>');
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
+      toggleWrapSmart(editor!, '*');
     });
+
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
-      toggleWrap(editor!, '`');
+      toggleWrapSmart(editor!, '`');
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Shift | monaco.KeyCode.KeyX, () => {
-      toggleWrap(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;
@@ -538,6 +494,7 @@ onMounted(async () => {
       const markdownLink = `[${escaped}](url)`;
       editor!.executeEdits('insert-link', [{ range: selection, text: markdownLink, forceMoveMarkers: true }]);
     });
+
     debug('Monaco editor created', {
       hasUploadPluginInstanceId: Boolean(props.meta?.uploadPluginInstanceId),
     });

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.9.0",
+  "version": "1.9.1",
   "description": "Markdown plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",