@@ -618,7 +618,7 @@ i18nUtils
.formatDate
- MetonaEditor v0.1.6 ·
源码仓库 · MIT License
+ MetonaEditor v0.1.7 ·
源码仓库 · MIT License
${i}
`;
+ }
+ this.gutter.innerHTML = html;
+ }
+
+ _updateCurrentLine() {
+ if (!this.gutter) return;
+ const pos = this.textarea.selectionStart;
+ const lineNum = this._value.substring(0, pos).split('\n').length;
+ const prev = this.gutter.querySelector('.me-gutter-active');
+ if (prev) prev.classList.remove('me-gutter-active');
+ const cur = this.gutter.children[lineNum - 1];
+ if (cur) cur.classList.add('me-gutter-active');
+ }
+
+ // ============ 自动格式化（v0.1.7） ============
+
+ /**
+ * 智能 Enter：在列表/引用行尾自动延续标记
+ */
+ _handleSmartEnter(e) {
+ const ta = this.textarea;
+ const start = ta.selectionStart;
+ const val = ta.value;
+ const lineStart = val.lastIndexOf('\n', start - 1) + 1;
+ const line = val.slice(lineStart, start);
+
+ // 列表项延续：匹配 "- " / "* " / "+ " / "1. " / "2. " 等
+ const listMatch = line.match(/^(\s*)([-*+]|\d+\.)\s(.*)/);
+ if (listMatch) {
+ const indent = listMatch[1];
+ const marker = listMatch[2];
+ const content = listMatch[3];
+ // 空列表项 → 结束列表（移除标记）
+ if (!content.trim()) {
+ e.preventDefault();
+ ta.value = val.slice(0, lineStart) + '\n' + val.slice(start);
+ ta.selectionStart = ta.selectionEnd = lineStart;
+ this._value = ta.value;
+ this._pushHistory();
+ this._renderGutter();
+ this._emit('change', this._value);
+ return;
+ }
+ // 有序列表自动递增
+ let nextMarker = marker;
+ if (/^\d+\.$/.test(marker)) {
+ const num = parseInt(marker, 10);
+ if (!isNaN(num)) nextMarker = (num + 1) + '.';
+ }
+ e.preventDefault();
+ const insert = '\n' + indent + nextMarker + ' ';
+ ta.value = val.slice(0, start) + insert + val.slice(ta.selectionEnd);
+ ta.selectionStart = ta.selectionEnd = start + insert.length;
+ this._value = ta.value;
+ this._pushHistory();
+ this._renderGutter();
+ this._emit('change', this._value);
+ return;
+ }
+
+ // 引用块延续
+ const quoteMatch = line.match(/^(\s*>+\s?)(.*)/);
+ if (quoteMatch) {
+ const prefix = quoteMatch[1];
+ const content = quoteMatch[2];
+ if (!content.trim()) {
+ e.preventDefault();
+ ta.value = val.slice(0, lineStart) + '\n' + val.slice(start);
+ ta.selectionStart = ta.selectionEnd = lineStart;
+ this._value = ta.value;
+ this._pushHistory();
+ this._renderGutter();
+ this._emit('change', this._value);
+ return;
+ }
+ e.preventDefault();
+ const insert = '\n' + prefix;
+ ta.value = val.slice(0, start) + insert + val.slice(ta.selectionEnd);
+ ta.selectionStart = ta.selectionEnd = start + insert.length;
+ this._value = ta.value;
+ this._pushHistory();
+ this._renderGutter();
+ this._emit('change', this._value);
+ return;
+ }
+ }
+
+ // ============ 括号/引号自动闭合（v0.1.7） ============
+
+ _handleBracketAutoClose(e) {
+ if (!this.config.autoBrackets) return;
+ const ta = this.textarea;
+ const key = e.key;
+ const close = BRACKET_PAIRS[key];
+ if (!close) return;
+
+ const start = ta.selectionStart;
+ const end = ta.selectionEnd;
+ const hasSelection = start !== end;
+
+ // 有选区：包裹选中文本
+ if (hasSelection) {
+ e.preventDefault();
+ const selected = ta.value.slice(start, end);
+ const wrap = key === '*' || key === '_' ? key + selected + close : key + selected + close;
+ ta.value = ta.value.slice(0, start) + wrap + ta.value.slice(end);
+ ta.selectionStart = start + 1;
+ ta.selectionEnd = start + 1 + selected.length;
+ this._value = ta.value;
+ this._pushHistory();
+ this._emit('change', this._value);
+ return;
+ }
+
+ // 无选区：判断是否应插入闭合对
+ const nextChar = ta.value[start] || '';
+ const isQuotePair = key === close; // 引号自己闭合自己
+
+ if (isQuotePair) {
+ // 引号：下一个字符是同种引号 → 跳过而非插入
+ if (nextChar === close) {
+ e.preventDefault();
+ ta.selectionStart = ta.selectionEnd = start + 1;
+ return;
+ }
+ // 光标在单词中间 → 不自动闭合
+ if (/\w/.test(nextChar)) return;
+ }
+
+ // 括号：下一个字符非空白/换行/闭合括号 → 可能不需要闭合
+ // 简单策略：始终闭合
+ e.preventDefault();
+ const pair = key + close;
+ ta.value = ta.value.slice(0, start) + pair + ta.value.slice(end);
+ ta.selectionStart = ta.selectionEnd = start + 1;
+ this._value = ta.value;
+ this._pushHistory();
+ this._emit('change', this._value);
+ }
+
+ // ============ 拖放支持（v0.1.7） ============
+
+ _bindDragDrop() {
+ const ta = this.textarea;
+ if (!ta) return;
+
+ const onDragOver = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; };
+ const onDrop = (e) => {
+ e.preventDefault();
+ const files = e.dataTransfer.files;
+ if (files && files.length) {
+ Array.from(files).forEach((file) => {
+ if (file.type.startsWith('image/')) {
+ const reader = new FileReader();
+ reader.onload = () => {
+ const name = file.name || `image-${Date.now().toString(36)}.png`;
+ this.insert(`\n`);
+ };
+ reader.readAsDataURL(file);
+ } else if (file.type.startsWith('text/') || file.name.match(/\.(md|txt|js|ts|json|css|html|xml|yml|yaml)$/i)) {
+ const reader = new FileReader();
+ reader.onload = () => this.insert(reader.result);
+ reader.readAsText(file);
+ }
+ });
+ return;
+ }
+ // 拖入外部文本
+ const text = e.dataTransfer.getData('text/plain');
+ if (text) {
+ this.insert(text);
+ }
+ };
+
+ ta.addEventListener('dragover', onDragOver);
+ ta.addEventListener('drop', onDrop);
+ this._cleanups.push(() => {
+ ta.removeEventListener('dragover', onDragOver);
+ ta.removeEventListener('drop', onDrop);
+ });
+ }
+
+ // ============ 大纲面板（v0.1.7） ============
+
+ _buildOutline() {
+ if (!this.config.outline || !this.previewEl) return;
+ // 移除旧面板
+ const old = this.el.querySelector('.me-outline');
+ if (old) old.remove();
+
+ const headings = [];
+ const headingRe = /]*>(.+?)<\/h\1>/gi;
+ const html = this.previewEl.innerHTML;
+ let m;
+ while ((m = headingRe.exec(html)) !== null) {
+ headings.push({ level: parseInt(m[1], 10), id: m[2], text: m[3].replace(/<[^>]+>/g, '') });
+ }
+ if (!headings.length) return;
+
+ const panel = document.createElement('div');
+ panel.className = 'me-outline';
+ panel.innerHTML = '' + (i18nT('outline') || '大纲') + '
';
+
+ const buildTree = (items, minLevel) => {
+ let h = '';
+ let i = 0;
+ while (i < items.length) {
+ const item = items[i];
+ if (item.level < minLevel) break;
+ h += `- ${escapeHTML(item.text)}`;
+ // 收集子项
+ const subItems = [];
+ let j = i + 1;
+ while (j < items.length && items[j].level > item.level) {
+ subItems.push(items[j]);
+ j++;
+ }
+ if (subItems.length) {
+ h += buildTree(subItems, item.level + 1);
+ }
+ h += '
';
+ i = j > i + 1 ? j : i + 1;
+ }
+ h += '
';
+ return h;
+ };
+
+ panel.innerHTML += buildTree(headings, 1);
+ this.el.appendChild(panel);
+
+ // 点击跳转
+ panel.addEventListener('click', (e) => {
+ const a = e.target.closest('a');
+ if (!a) return;
+ e.preventDefault();
+ const id = a.getAttribute('href').slice(1);
+ const target = this.previewEl.querySelector('#' + CSS.escape(id));
+ if (target) {
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ // 同步滚动 textarea
+ const headingText = target.textContent;
+ const idx = this._value.indexOf(headingText);
+ if (idx !== -1) {
+ this.textarea.focus();
+ this.textarea.setSelectionRange(idx, idx);
+ const lineNum = this._value.substring(0, idx).split('\n').length - 1;
+ this.textarea.scrollTop = lineNum * 20;
+ }
+ }
+ });
+ }
+
+ _updateOutline() {
+ if (!this.config.outline) return;
+ // 防抖重建
+ clearTimeout(this._outlineTimer);
+ this._outlineTimer = setTimeout(() => this._buildOutline(), 300);
+ }
_scheduleHistory() {
if (this._historyTimer) clearTimeout(this._historyTimer);
@@ -552,6 +867,7 @@ class MarkdownEditor {
this._value = this._history[this._historyIndex];
this.textarea.value = this._value;
this._render();
+ this._renderGutter();
this._updateWordCount();
this._emit('change', this._value);
if (typeof this.config.onChange === 'function') {
diff --git a/src/i18n.js b/src/i18n.js
index 8681296..2f27b92 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor i18n — 国际化管理（增强版）
* @module i18n
- * @version 0.1.6
+ * @version 0.1.7
* @description 多语言支持、实例级语言隔离、复数规则、动态加载、命名空间
*
* v0.1.6 增强：
diff --git a/src/icons.js b/src/icons.js
index ae12667..fa7cf45 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Icons — 工具栏图标SVG定义
* @module icons
- * @version 0.1.6
+ * @version 0.1.7
* @description 工具栏格式化按钮 SVG 图标
*/
diff --git a/src/index.js b/src/index.js
index 2d0a551..eaf8357 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor - 轻量级 Markdown Editor 库
* @module metona-editor
- * @version 0.1.6
+ * @version 0.1.7
* @author thzxx
* @description 现代化、零依赖、易扩展、易维护、易使用的 Markdown 编辑器库。单文件，开箱即用。
* @license MIT
@@ -29,7 +29,7 @@ import { animationUtils } from './animations.js';
import { DEFAULTS, ICONS, THEMES, EDIT_MODES, DEFAULT_TOOLBAR, TOOLBAR_ACTIONS } from './constants.js';
// 版本信息
-const VERSION = '0.1.6';
+const VERSION = '0.1.7';
/**
* 全局默认插件队列
diff --git a/src/locales.js b/src/locales.js
index 995e8df..93df0b8 100644
--- a/src/locales.js
+++ b/src/locales.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Locales — 国际化翻译数据
* @module locales
- * @version 0.1.6
+ * @version 0.1.7
* @description 内置 zh-CN / en-US 完整翻译
*/
diff --git a/src/parser.js b/src/parser.js
index b3a8d44..365324b 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Parser - 轻量 Markdown 解析器（增强版）
* @module parser
- * @version 0.1.6
+ * @version 0.1.7
* @description 自研零依赖 Markdown 解析器，覆盖 CommonMark 子集 + GFM 扩展
*
* v0.1.4 增强：
diff --git a/src/plugins.js b/src/plugins.js
index 44687f1..cc96251 100644
--- a/src/plugins.js
+++ b/src/plugins.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Plugins — 插件系统 v2
* @module plugins
- * @version 0.1.6
+ * @version 0.1.7
* @description 插件管理器 + 预设插件 + 依赖/生命周期/异步/卸载
*
* v0.1.6 增强：
diff --git a/src/styles.js b/src/styles.js
index adfe472..c6e2380 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Styles - 编辑器样式
* @module styles
- * @version 0.1.6
+ * @version 0.1.7
* @description 编辑器 UI 样式注入与管理
*/
@@ -127,6 +127,32 @@ const generateCSS = () => {
overflow: hidden;
position: relative;
}
+
+ /* ============ 编辑区内层（v0.1.7） ============ */
+ .me-editor-inner { display: flex; height: 100%; overflow: hidden; position: relative; }
+ .me-gutter {
+ flex: 0 0 auto;
+ min-width: 36px;
+ padding: 16px 8px 16px 6px;
+ overflow: hidden;
+ background: var(--md-code-bg);
+ border-right: 1px solid var(--md-border);
+ color: var(--md-muted);
+ font-family: var(--md-mono);
+ font-size: 12px;
+ line-height: 1.7;
+ text-align: right;
+ user-select: none;
+ white-space: pre;
+ }
+ .me-gutter-line { padding-right: 4px; }
+ .me-gutter-active {
+ color: var(--md-accent);
+ font-weight: 600;
+ background: rgba(59, 130, 246, 0.08);
+ border-radius: 3px;
+ }
+
.me-divider {
flex: 0 0 1px;
background: var(--md-border);
@@ -454,6 +480,42 @@ const generateCSS = () => {
margin-left: 24px;
}
+ /* ============ 大纲面板（v0.1.7） ============ */
+ .me-outline {
+ position: absolute;
+ top: 0; right: 0;
+ width: 220px;
+ height: 100%;
+ overflow-y: auto;
+ background: var(--md-preview-bg);
+ border-left: 1px solid var(--md-border);
+ padding: 12px 14px;
+ font-size: 13px;
+ z-index: 15;
+ }
+ .me-outline-title {
+ font-weight: 650;
+ margin-bottom: 8px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid var(--md-border);
+ color: var(--md-text);
+ }
+ .me-outline ul { list-style: none; padding: 0; margin: 0; }
+ .me-outline li { margin: 2px 0; }
+ .me-outline a {
+ color: var(--md-muted);
+ text-decoration: none;
+ display: block;
+ padding: 2px 6px;
+ border-radius: 4px;
+ transition: background 0.1s, color 0.1s;
+ }
+ .me-outline a:hover { background: var(--md-code-bg); color: var(--md-accent); }
+ .me-outline-l1 a { font-weight: 600; color: var(--md-text); }
+ .me-outline-l2 a { padding-left: 12px; }
+ .me-outline-l3 a { padding-left: 20px; font-size: 12px; }
+ .me-outline-l4 a { padding-left: 28px; font-size: 12px; }
+
/* ============ 打印样式 ============ */
@media print {
.me-wrapper { border: 0 !important; box-shadow: none !important; }
diff --git a/src/themes.js b/src/themes.js
index 56740ec..614e142 100644
--- a/src/themes.js
+++ b/src/themes.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Themes — 主题系统（增强版）
* @module themes
- * @version 0.1.6
+ * @version 0.1.7
* @description 全局+实例级主题管理、CSS 变量隔离、外部主题跟随、主题继承
*
* v0.1.5 增强：
diff --git a/src/utils.js b/src/utils.js
index 0b3df7f..fa5ac11 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,7 +1,7 @@
/**
* MetonaEditor Utils - 工具函数
* @module utils
- * @version 0.1.6
+ * @version 0.1.7
* @description 通用工具函数集合
*/
diff --git a/tests/core.test.js b/tests/core.test.js
index 2e7864f..b09a12f 100644
--- a/tests/core.test.js
+++ b/tests/core.test.js
@@ -1352,3 +1352,133 @@ describe('MarkdownEditor - v0.1.3 修复验证', () => {
expect(ed.isDisabled()).toBe(false);
});
});
+
+// ============ v0.1.7 新增测试 ============
+
+describe('MarkdownEditor - v0.1.7 行号装订线', () => {
+ test('lineNumbers 开启时创建 gutter', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'line1\nline2\nline3', lineNumbers: true });
+ expect(ed.gutter).not.toBeNull();
+ expect(ed.gutter.children.length).toBeGreaterThan(0);
+ ed.destroy();
+ });
+
+ test('lineNumbers 关闭时不显示', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'test', lineNumbers: false });
+ expect(ed.gutter).not.toBeNull();
+ expect(ed.gutter.style.display).toBe('none');
+ ed.destroy();
+ });
+
+ test('输入后行号更新', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'a\nb', lineNumbers: true });
+ ed.textarea.value = 'a\nb\nc';
+ ed.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+ expect(ed.gutter.children.length).toBe(3);
+ ed.destroy();
+ });
+});
+
+describe('MarkdownEditor - v0.1.7 自动格式化', () => {
+ test('列表项行尾 Enter 自动延续 -', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: '- item' });
+ ed.textarea.setSelectionRange(6, 6); // 光标在行尾
+ ed.textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+ expect(ed.getValue()).toContain('- ');
+ ed.destroy();
+ });
+
+ test('空列表项 Enter 结束列表', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: '- ' });
+ ed.textarea.setSelectionRange(2, 2);
+ ed.textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+ expect(ed.getValue()).toBe('\n');
+ ed.destroy();
+ });
+
+ test('有序列表自动递增', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: '1. first' });
+ ed.textarea.setSelectionRange(8, 8);
+ ed.textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+ expect(ed.getValue()).toContain('2. ');
+ ed.destroy();
+ });
+
+ test('引用块延续 >', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: '> quote' });
+ ed.textarea.setSelectionRange(7, 7);
+ ed.textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+ expect(ed.getValue()).toContain('> ');
+ ed.destroy();
+ });
+});
+
+describe('MarkdownEditor - v0.1.7 括号自动闭合', () => {
+ test('无选区输入 ( 自动闭合', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'hello', autoBrackets: true });
+ ed.textarea.setSelectionRange(5, 5);
+ ed.textarea.dispatchEvent(new KeyboardEvent('keypress', { key: '(', bubbles: true }));
+ expect(ed.getValue()).toBe('hello()');
+ expect(ed.textarea.selectionStart).toBe(6); // 光标在括号内
+ ed.destroy();
+ });
+
+ test('有选区输入 ( 包裹选中文本', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'hello world', autoBrackets: true });
+ ed.textarea.setSelectionRange(0, 5);
+ ed.textarea.dispatchEvent(new KeyboardEvent('keypress', { key: '(', bubbles: true }));
+ expect(ed.getValue()).toBe('(hello) world');
+ ed.destroy();
+ });
+
+ test('autoBrackets 关闭时不闭合', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: 'hello', autoBrackets: false });
+ ed.textarea.setSelectionRange(5, 5);
+ // jsdom 不模拟原生键盘插入，验证不抛错即可
+ expect(() => {
+ ed.textarea.dispatchEvent(new KeyboardEvent('keypress', { key: '(', bubbles: true }));
+ }).not.toThrow();
+ ed.destroy();
+ });
+});
+
+describe('MarkdownEditor - v0.1.7 outline', () => {
+ test('outline 关闭时不创建面板', () => {
+ document.body.innerHTML = '';
+ const c = document.createElement('div');
+ document.body.appendChild(c);
+ const ed = new MarkdownEditor(c, { value: '# hi\n## there', outline: false, mode: 'split' });
+ expect(ed.el.querySelector('.me-outline')).toBeNull();
+ ed.destroy();
+ });
+});
diff --git a/types/index.d.ts b/types/index.d.ts
index de7f954..051f2d8 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for MetonaEditor v0.1.6
+// Type definitions for MetonaEditor v0.1.7
// Project: https://git.metona.cn/MetonaTeam/MetonaEditor
// Author: thzxx