remons-markdown-editor 1.0.0-beta.16 → 1.0.0-beta.17

package/dist/index.css

@@ -41,85 +41,85 @@
   min-height: 20px;
   text-align: center;
 }
-html,
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#markdown-editor {
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-}
-
-/* ===== CSS 自定义属性（主题变量） ===== */
-/* 浅色主题（默认） */
-:root,
-[data-theme="light"] {
-  /* 背景色 */
-  --remons-md-editor-bg-primary: #f3f3f3;
-  --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
-  --remons-md-editor-bg-hover: #e1e4e8;
-  --remons-md-editor-bg-active: #d0d7de;
-  --remons-md-editor-bg-fullscreen: #fff;
-
-  /* 文字颜色 */
-  --remons-md-editor-color-text: #24292f;
-  --remons-md-editor-color-text-hover: #0969da;
-
-  /* 边框 */
-  --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
-  --remons-md-editor-color-border-light: #d0d7de;
-
-  /* 焦点 */
-  --remons-md-editor-color-focus: #0969da;
-  --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
-
-  /* 工具选择器 */
-  --remons-md-editor-bg-picker: #fff;
-  --remons-md-editor-bg-cell-active: #ddf4ff;
-  --remons-md-editor-color-cell-active: #91caff;
-  --remons-md-editor-color-hint: #999;
-  --remons-md-editor-color-label: #666;
-}
-
-/* ===== 深色主题 ===== */
-[data-theme="dark"] {
-  /* 背景色 */
-  --remons-md-editor-bg-primary: #1a1d23;
-  --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
-  --remons-md-editor-bg-hover: #4a5163;
-  --remons-md-editor-bg-active: #5a6278;
-  --remons-md-editor-bg-fullscreen: #1a1d23;
-
-  /* 文字颜色 */
-  --remons-md-editor-color-text: #c9d1d9;
-  --remons-md-editor-color-text-hover: #58a6ff;
-
-  /* 边框 */
-  --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
-  --remons-md-editor-color-border-light: #3a3f4b;
-
-  /* 焦点 */
-  --remons-md-editor-color-focus: #58a6ff;
-  --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
-
-  /* 工具选择器 */
-  --remons-md-editor-bg-picker: #2e3350;
-  --remons-md-editor-bg-cell-active: #1a3a5c;
-  --remons-md-editor-color-cell-active: #58a6ff;
-  --remons-md-editor-color-hint: #8b949e;
-  --remons-md-editor-color-label: #8b949e;
-}
-
-.ant-anchor-link-title {
-  white-space: inherit !important;
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#markdown-editor {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+/* ===== CSS 自定义属性（主题变量） ===== */
+/* 浅色主题（默认） */
+:root,
+[data-theme="light"] {
+  /* 背景色 */
+  --remons-md-editor-bg-primary: #f3f3f3;
+  --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
+  --remons-md-editor-bg-hover: #e1e4e8;
+  --remons-md-editor-bg-active: #d0d7de;
+  --remons-md-editor-bg-fullscreen: #fff;
+
+  /* 文字颜色 */
+  --remons-md-editor-color-text: #24292f;
+  --remons-md-editor-color-text-hover: #0969da;
+
+  /* 边框 */
+  --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
+  --remons-md-editor-color-border-light: #d0d7de;
+
+  /* 焦点 */
+  --remons-md-editor-color-focus: #0969da;
+  --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
+
+  /* 工具选择器 */
+  --remons-md-editor-bg-picker: #fff;
+  --remons-md-editor-bg-cell-active: #ddf4ff;
+  --remons-md-editor-color-cell-active: #91caff;
+  --remons-md-editor-color-hint: #999;
+  --remons-md-editor-color-label: #666;
+}
+
+/* ===== 深色主题 ===== */
+[data-theme="dark"] {
+  /* 背景色 */
+  --remons-md-editor-bg-primary: #1a1d23;
+  --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
+  --remons-md-editor-bg-hover: #4a5163;
+  --remons-md-editor-bg-active: #5a6278;
+  --remons-md-editor-bg-fullscreen: #1a1d23;
+
+  /* 文字颜色 */
+  --remons-md-editor-color-text: #c9d1d9;
+  --remons-md-editor-color-text-hover: #58a6ff;
+
+  /* 边框 */
+  --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
+  --remons-md-editor-color-border-light: #3a3f4b;
+
+  /* 焦点 */
+  --remons-md-editor-color-focus: #58a6ff;
+  --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
+
+  /* 工具选择器 */
+  --remons-md-editor-bg-picker: #2e3350;
+  --remons-md-editor-bg-cell-active: #1a3a5c;
+  --remons-md-editor-color-cell-active: #58a6ff;
+  --remons-md-editor-color-hint: #8b949e;
+  --remons-md-editor-color-label: #8b949e;
+}
+
+.ant-anchor-link-title {
+  white-space: inherit !important;
 }@font-face {
   font-family: 'Inter';
   font-style: normal;
@@ -153,28 +153,28 @@ body {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Noto Sans SC';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG-3FnYw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG-3FnYw.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Noto Sans SC';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGwHCnYw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGwHCnYw.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Noto Sans SC';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
 }
 .markdown-editor-app {
   height: 100%;

package/dist/index.js

@@ -9,7 +9,7 @@ import { oneDark } from "@codemirror/theme-one-dark";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import RenderMarkdown, { initHighlighter, languagesCommon } from "remons-render-markdown";
 import "remons-render-markdown/dist/index.css";
-import { BlockOutlined, BoldOutlined, CodeOutlined, DownOutlined, FieldStringOutlined, FontSizeOutlined, FullscreenExitOutlined, FullscreenOutlined, ItalicOutlined, LinkOutlined, MinusOutlined, OrderedListOutlined, PictureOutlined, ReadOutlined, StrikethroughOutlined, TableOutlined, UnderlineOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import { BlockOutlined, BoldOutlined, CheckSquareOutlined, CodeOutlined, DownOutlined, FieldStringOutlined, FontSizeOutlined, FullscreenExitOutlined, FullscreenOutlined, ItalicOutlined, LinkOutlined, MinusOutlined, OrderedListOutlined, PictureOutlined, ReadOutlined, StrikethroughOutlined, TableOutlined, UnderlineOutlined, UnorderedListOutlined } from "@ant-design/icons";
 //#region src/utils/parseContainer.ts
 /**
 * 解析容器属性 JSON 字符串。
@@ -308,6 +308,104 @@ function insertAtLineStart(view, text) {
 	view.dispatch({ selection: { anchor: line.from + text.length } });
 }
 /**
+* 切换标题：
+* - 当前行已是目标级别标题 → 移除行首 # 前缀（变回普通文本）
+* - 当前行是其他级别标题 → 替换为目标级别
+* - 当前行是普通文本 → 插入目标级别前缀
+* @param view - CodeMirror 编辑器实例
+* @param level - 标题级别（1-6）
+*/
+function toggleHeading(view, level) {
+	const line = view.state.doc.lineAt(view.state.selection.main.from);
+	const m = line.text.match(/^(\s*)(#{1,6})(\s+|\s*$)/);
+	const indent = m ? m[1] : "";
+	const text = "#".repeat(level) + " ";
+	if (m && m[2].length === level) view.dispatch({ changes: {
+		from: line.from,
+		to: line.from + m[0].length,
+		insert: indent
+	} });
+	else {
+		view.dispatch({ changes: {
+			from: line.from,
+			to: m ? line.from + m[0].length : line.from,
+			insert: indent + text
+		} });
+		view.dispatch({ selection: { anchor: line.from + indent.length + text.length } });
+	}
+}
+/**
+* 切换任务列表（checkbox 待办）
+* - 支持多行：对选区内每一行应用 `- [ ] `
+* - 普通列表项（如 `- 内容`）直接转换为 `- [ ] 内容`
+* - 切换：若所有目标行都已是任务项，则移除行首前缀
+*/
+function toggleTaskList(view) {
+	const doc = view.state.doc;
+	const { from, to } = view.state.selection.main;
+	const first = doc.lineAt(from);
+	const last = doc.lineAt(to);
+	const lines = [];
+	for (let n = first.number; n <= last.number; n++) lines.push(doc.line(n));
+	const taskRe = /^(\s*)([-*+])\s\[( |x)\]\s?/;
+	const allTask = lines.every((line) => taskRe.test(line.text));
+	const changes = [];
+	for (const line of lines) {
+		const taskMatch = line.text.match(taskRe);
+		if (taskMatch) changes.push({
+			from: line.from,
+			to: line.from + taskMatch[0].length,
+			insert: allTask ? "" : `${taskMatch[1]}${taskMatch[2]} [ ] `
+		});
+		else {
+			const bulletMatch = line.text.match(/^(\s*)([-*+])\s/);
+			if (bulletMatch) {
+				const idx = line.from + bulletMatch[1].length + bulletMatch[2].length;
+				changes.push({
+					from: idx,
+					to: idx + 1,
+					insert: " [ ] "
+				});
+			} else changes.push({
+				from: line.from,
+				to: line.from,
+				insert: "- [ ] "
+			});
+		}
+	}
+	view.dispatch({ changes });
+}
+/**
+* 切换行首前缀（支持多行选区）
+* - 已是对应前缀的行 → 移除前缀（变回普通文本）
+* - 未加前缀的行 → 在行首插入前缀
+* @param view - CodeMirror 编辑器实例
+* @param pattern - 匹配行首前缀的正则
+* @param insertText - 未匹配时插入的前缀文本
+*/
+function toggleLinePrefix(view, pattern, insertText) {
+	const doc = view.state.doc;
+	const { from, to } = view.state.selection.main;
+	const first = doc.lineAt(from);
+	const last = doc.lineAt(Math.max(to, from));
+	const changes = [];
+	for (let n = first.number; n <= last.number; n++) {
+		const line = doc.line(n);
+		const m = line.text.match(pattern);
+		if (m) changes.push({
+			from: line.from,
+			to: line.from + m[0].length,
+			insert: ""
+		});
+		else changes.push({
+			from: line.from,
+			to: line.from,
+			insert: insertText
+		});
+	}
+	view.dispatch({ changes });
+}
+/**
 * 上传图片
 * @param file - 要上传的文件
 * @param uploadConfig - 上传配置
@@ -591,39 +689,33 @@ function createToolbarConfig(options) {
 			children: [
 				{
 					id: "heading1",
-					label: "标题 1",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "# ")
+					label: "H1",
+					handler: (v) => toggleHeading(v, 1)
 				},
 				{
 					id: "heading2",
-					label: "标题 2",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "## ")
+					label: "H2",
+					handler: (v) => toggleHeading(v, 2)
 				},
 				{
 					id: "heading3",
-					label: "标题 3",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "### ")
+					label: "H3",
+					handler: (v) => toggleHeading(v, 3)
 				},
 				{
 					id: "heading4",
-					label: "标题 4",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "#### ")
+					label: "H4",
+					handler: (v) => toggleHeading(v, 4)
 				},
 				{
 					id: "heading5",
-					label: "标题 5",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "##### ")
+					label: "H5",
+					handler: (v) => toggleHeading(v, 5)
 				},
 				{
 					id: "heading6",
-					label: "标题 6",
-					icon: FontSizeOutlined,
-					handler: (v) => insertAtLineStart(v, "###### ")
+					label: "H6",
+					handler: (v) => toggleHeading(v, 6)
 				}
 			]
 		},
@@ -632,38 +724,44 @@ function createToolbarConfig(options) {
 			id: "bold",
 			label: "加粗",
 			icon: BoldOutlined,
-			handler: (v) => wrapSelection(v, "**", "**")
+			handler: (v) => toggleWrap(v, "**", "**")
 		},
 		{
 			id: "italic",
 			label: "斜体",
 			icon: ItalicOutlined,
-			handler: (v) => wrapSelection(v, "*", "*")
+			handler: (v) => toggleWrap(v, "*", "*")
 		},
 		{
 			id: "strikethrough",
 			label: "删除线",
 			icon: StrikethroughOutlined,
-			handler: (v) => wrapSelection(v, "~~", "~~")
+			handler: (v) => toggleWrap(v, "~~", "~~")
 		},
 		{
 			id: "underline",
 			label: "下划线",
 			icon: UnderlineOutlined,
-			handler: (v) => wrapSelection(v, "<u>", "</u>")
+			handler: (v) => toggleWrap(v, "<u>", "</u>")
 		},
 		{ separatorBefore: true },
 		{
 			id: "ul",
 			label: "无序列表",
 			icon: UnorderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "- ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)-(?!\s*\[)\s/, "- ")
 		},
 		{
 			id: "ol",
 			label: "有序列表",
 			icon: OrderedListOutlined,
-			handler: (v) => insertAtLineStart(v, "1. ")
+			handler: (v) => toggleLinePrefix(v, /^(\s*)\d+\.\s/, "1. ")
+		},
+		{
+			id: "checkbox",
+			label: "待办",
+			icon: CheckSquareOutlined,
+			handler: (v) => toggleTaskList(v)
 		},
 		{ separatorBefore: true },
 		{