@8btc/mditor 0.0.7 → 0.0.9

package/src/assets/less/_selection-popover.less

@@ -0,0 +1,148 @@
+@selection-popover-radius: 8px;
+@selection-popover-padding: 4px;
+@selection-popover-gap: 0px;
+@selection-popover-shadow: var(--panel-shadow);
+@selection-popover-bg: var(--panel-background-color);
+@selection-popover-color: var(--textarea-text-color);
+@selection-popover-hover-color: var(--toolbar-icon-hover-color);
+
+.vditor-selection-popover {
+  position: absolute;
+  z-index: 4;
+  display: none;
+  padding: 0;
+  border-radius: @selection-popover-radius;
+  background-color: @selection-popover-bg;
+  box-shadow: @selection-popover-shadow;
+  border: 1px solid var(--border-color);
+  user-select: none;
+  white-space: nowrap;
+  transform-origin: top left;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.2, 0, 0.13, 1.5),
+    transform 150ms cubic-bezier(0.2, 0, 0.13, 1.5);
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  &__input {
+    display: flex;
+    flex-direction: column;
+    width: 327px;
+    padding: 12px;
+    gap: 8px;
+    align-items: flex-end;
+    box-sizing: border-box;
+
+    textarea {
+      flex: 1;
+      width: 100%;
+      height: 60px;
+      background: transparent;
+      border: none;
+      resize: none;
+      outline: none;
+      color: @selection-popover-color;
+      font-size: 14px;
+      line-height: 20px;
+      padding: 0;
+      margin: 0;
+
+      &::placeholder {
+        color: #585a5a;
+      }
+    }
+
+    .vditor-selection-popover__send {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: var(--toolbar-icon-hover-color);
+      border-radius: 8px;
+      color: #fff;
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      &--loading {
+        pointer-events: none;
+        opacity: 0.8;
+
+        svg {
+          animation: vditor-rotate 1s linear infinite;
+        }
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  @keyframes vditor-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 109px;
+    flex: 0 0 109px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    margin: 0 @selection-popover-gap;
+    border: none;
+    background: transparent;
+    color: @selection-popover-color;
+    cursor: pointer;
+    outline: none;
+    font-size: 14px;
+    font-weight: 500;
+    transition: @transition;
+
+    &:hover,
+    &:focus {
+      color: @selection-popover-hover-color;
+      background-color: transparent;
+    }
+
+    &[disabled] {
+      opacity: 0.9;
+      cursor: not-allowed;
+    }
+  }
+
+  &__btn+&__btn {
+    border-left: 1px solid var(--border-color);
+
+  }
+}

package/src/assets/less/_selection-tag.less

@@ -0,0 +1,38 @@
+// Selection tag styles - 参考代码块样式
+.vditor-reset .vditor-selection-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.31rem;
+    padding: 0.25rem 0.5rem;
+    background-color: #f6f8fa;
+    border: 1px solid #d1d5da;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: @primaryColor;
+    font-family: @font-family-code;
+    margin: 0.25rem 0.25rem 0.25rem 0;
+
+    &__file {
+        color: @primaryColor;
+        font-weight: 500;
+    }
+
+    &__lines {
+        color: #586069;
+    }
+}
+
+// Dark mode
+.vditor--dark .vditor-reset .vditor-selection-tag {
+    background-color: #2f363d;
+    border-color: #141414;
+
+    .vditor-selection-tag__file {
+        color: #fafafa;
+    }
+
+    .vditor-selection-tag__lines {
+        color: #b9b9b9;
+    }
+}

package/src/assets/less/index.less

@@ -88,6 +88,8 @@
 @import "_sv";
 @import "_line-number";
 @import "_math-menu";
+@import "_selection-popover";
+@import "_selection-tag";
 
 // details 默认样式调整：隐藏展开/折叠指示器
 details>summary {

package/src/index.ts

@@ -52,6 +52,9 @@ import {
     attachLineNumbersToBlocksThrottled,
 } from "./ts/util/attachLineNumbers";
 
+const LINE_HIGHLIGHT_CLASS = "vditor-line-highlight";
+const lineHighlightTimers = new WeakMap<HTMLElement, number>();
+
 /**
  * 设置所有 details 默认展开，并确保不影响内容展示与可访问性
  */
@@ -200,8 +203,9 @@ class Vditor extends VditorMethod {
      * - 依赖配置 `lineNumber: true`，关闭时直接跳过以提升性能
      * @param immediate 为 true 时立即更新；默认为节流更新以避免频繁调用
      */
+    /** 手动更新行号 */
     public updateLineNumbers(immediate = false) {
-        if (!this.vditor.options.lineNumber) {
+        if (!this.vditor.options.lineNumber?.enable) {
             return;
         }
         const text = getMarkdown(this.vditor);
@@ -213,6 +217,57 @@ class Vditor extends VditorMethod {
         }
     }
 
+    /**
+     * 高亮指定行号对应的块元素
+     * - 仅匹配拥有 `data-linenumber`/`data-lineNumber` 且值等于指定行号的元素
+     * - 应用高亮样式并在约 500ms 后自动恢复
+     * @param numbers 要高亮的行号数组
+     */
+    /** 高亮指定行号，时长受 `options.lineNumber.highlightTimer` 控制 */
+    public setLinehightNumbers(numbers: number[]) {
+        if (!Array.isArray(numbers)) {
+            return;
+        }
+        const valid = numbers
+            .filter((n) => typeof n === "number" && isFinite(n))
+            .map((n) => String(Math.floor(n)));
+        if (valid.length === 0) {
+            return;
+        }
+        const root = this.vditor[this.vditor.currentMode].element;
+        const sel = valid
+            .map((v) => `[data-linenumber="${v}"],[data-lineNumber="${v}"]`)
+            .join(",");
+        const nodeList = root.querySelectorAll<HTMLElement>(sel);
+        if (nodeList.length === 0) {
+            return;
+        }
+        const duration = Math.max(
+            0,
+            Number(this.vditor.options.lineNumber?.highlightTimer) || 1500
+        );
+        const apply = () => {
+            nodeList.forEach((el) => {
+                const old = lineHighlightTimers.get(el);
+                if (old) {
+                    clearTimeout(old);
+                    lineHighlightTimers.delete(el);
+                }
+                el.classList.remove(LINE_HIGHLIGHT_CLASS);
+            });
+            requestAnimationFrame(() => {
+                nodeList.forEach((el) => {
+                    el.classList.add(LINE_HIGHLIGHT_CLASS);
+                    const handle = window.setTimeout(() => {
+                        el.classList.remove(LINE_HIGHLIGHT_CLASS);
+                        lineHighlightTimers.delete(el);
+                    }, duration);
+                    lineHighlightTimers.set(el, handle);
+                });
+            });
+        };
+        apply();
+    }
     /** 获取编辑器当前编辑模式 */
     public getCurrentMode() {
         return this.vditor.currentMode;
@@ -408,7 +463,7 @@ class Vditor extends VditorMethod {
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
             this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
-            if (this.vditor.options.lineNumber) {
+            if (this.vditor.options.lineNumber?.enable) {
                 try {
                     attachLineNumbersToBlocks(
                         this.vditor.sv.element,
@@ -435,7 +490,7 @@ class Vditor extends VditorMethod {
                 .forEach((item: HTMLElement) => {
                     processCodeRender(item, this.vditor);
                 });
-            if (this.vditor.options.lineNumber) {
+            if (this.vditor.options.lineNumber?.enable) {
                 try {
                     attachLineNumbersToBlocks(
                         this.vditor.ir.element,

package/src/method.ts

@@ -77,7 +77,7 @@ class Vditor {
     public static updateLineNumbers(instance: any, immediate = false) {
         try {
             const v = instance?.vditor ?? instance;
-            if (!v?.options?.lineNumber) return;
+            if (!v?.options?.lineNumber?.enable) return;
             const text = getMarkdown(v);
             const root = v[v.currentMode].element as HTMLElement;
             if (immediate) {

package/src/ts/ir/index.ts

@@ -33,7 +33,7 @@ class IR {
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
         divElement.className = "vditor-ir";
-        if (vditor.options.lineNumber) {
+        if (vditor.options.lineNumber?.enable) {
             divElement.classList.add("vditor--linenumber");
         }
 

package/src/ts/ir/process.ts

@@ -105,7 +105,7 @@ export const processAfterRender = (
         }
 
         try {
-            if (vditor.options.lineNumber) {
+            if (vditor.options.lineNumber?.enable) {
                 attachLineNumbersToBlocksThrottled(vditor.ir.element, text);
             }
         } catch {

package/src/ts/markdown/selectionRender.ts

@@ -0,0 +1,28 @@
+/**
+ * 渲染 selection 代码块为文件选择标签
+ */
+export const selectionRender = (element: HTMLElement) => {
+    element.querySelectorAll("pre > code.language-selection").forEach((codeElement: HTMLElement) => {
+        const preElement = codeElement.parentElement as HTMLElement;
+        const content = codeElement.textContent.trim();
+        const lines = content.split('\n');
+
+        const tags = lines.map(line => {
+            const match = line.trim().match(/^(.+?)\s+(\d+-\d+)$/);
+            if (match) {
+                const [, filename, lineRange] = match;
+                return `<div class="vditor-selection-tag">
+                    <span class="vditor-selection-tag__file">${filename}</span>
+                    <span class="vditor-selection-tag__lines">${lineRange}</span>
+                </div>`;
+            }
+            return '';
+        }).filter(tag => tag).join('');
+
+        if (tags) {
+            const container = document.createElement('div');
+            container.innerHTML = tags;
+            preElement.parentNode.replaceChild(container, preElement);
+        }
+    });
+};

package/src/ts/preview/index.ts

@@ -12,11 +12,9 @@ import { SMILESRender } from "../markdown/SMILESRender";
 import { markmapRender } from "../markdown/markmapRender";
 import { mindmapRender } from "../markdown/mindmapRender";
 import { plantumlRender } from "../markdown/plantumlRender";
-import {
-    hasClosestByClassName,
-    hasClosestByMatchTag,
-} from "../util/hasClosest";
+import { hasClosestByClassName, hasClosestByMatchTag } from "../util/hasClosest";
 import { setSelectionFocus } from "../util/selection";
+import { selectionRender } from "../markdown/selectionRender";
 import { previewImage } from "./image";
 
 export class Preview {
@@ -247,8 +245,11 @@ export class Preview {
         if (vditor.options.preview.render.media.enable) {
             mediaRender(vditor.preview.previewElement);
         }
+        selectionRender(vditor.preview.previewElement);
         vditor.options.customRenders.forEach((item) => {
-            item.render(vditor.preview.previewElement, vditor);
+            {
+                item.render(vditor.preview.previewElement, vditor);
+            }
         });
         // toc render
         const editorElement = vditor.preview.element;

package/src/ts/sv/index.ts

@@ -24,7 +24,7 @@ class Editor {
     constructor(vditor: IVditor) {
         this.element = document.createElement("pre");
         this.element.className = "vditor-sv vditor-reset";
-        if (vditor.options.lineNumber) {
+        if (vditor.options.lineNumber?.enable) {
             this.element.classList.add("vditor--linenumber");
         }
         this.element.setAttribute("placeholder", vditor.options.placeholder);

package/src/ts/sv/process.ts

@@ -178,7 +178,7 @@ export const processAfterRender = (
             vditor.undo.addToUndoStack(vditor);
         }
         try {
-            if (vditor.options.lineNumber) {
+            if (vditor.options.lineNumber?.enable) {
                 attachLineNumbersToBlocksThrottled(vditor.sv.element, text);
             }
         } catch {

package/src/ts/ui/initUI.ts

@@ -121,7 +121,8 @@ export const setPadding = (vditor: IVditor) => {
                 vditor.options.preview.maxWidth) /
             2;
         const basePad = Math.max(minPadding, padding);
-        const leftExtra = vditor.options.lineNumber && basePad < 40 ? 20 : 0;
+        const leftExtra =
+            vditor.options.lineNumber?.enable && basePad < 40 ? 20 : 0;
         vditor.wysiwyg.element.style.padding = `10px ${basePad}px 10px ${basePad + leftExtra}px`;
     }
 
@@ -131,7 +132,8 @@ export const setPadding = (vditor: IVditor) => {
                 vditor.options.preview.maxWidth) /
             2;
         const basePad = Math.max(minPadding, padding);
-        const leftExtra = vditor.options.lineNumber && basePad < 40 ? 20 : 0;
+        const leftExtra =
+            vditor.options.lineNumber?.enable && basePad < 40 ? 20 : 0;
         vditor.ir.element.style.padding = `10px ${basePad}px 10px ${basePad + leftExtra}px`;
     }
 

package/src/ts/util/Options.ts

@@ -9,6 +9,10 @@ export class Options {
         inlinePopover: {
             enable: false,
         },
+        selectionPopover: {
+            enable: false,
+            debounceDelay: 150,
+        },
         cache: {
             enable: true,
         },
@@ -118,7 +122,10 @@ export class Options {
             pin: false,
         },
         typewriterMode: false,
-        lineNumber: false,
+        lineNumber: {
+            enable: false,
+            highlightTimer: 1500,
+        },
         undoDelay: 800,
         upload: {
             extraData: {},