From fbbe2f651a98f7fe2d7cdd90e0024cfcc775f127 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com>
Date: Fri, 7 Feb 2025 00:35:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(mini-markdown-editor):=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=BC=96=E8=BE=91=E5=99=A8=E8=A1=8C=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mini-markdown-editor/src/App.tsx         |  1 +
 .../src/components/Editor/index.tsx               | 15 +++++++--------
 .../mini-markdown-editor/src/config/global.ts     |  3 ++-
 .../src/types/global-config.ts                    | 10 ++++++++++
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/mini-markdown-editor/src/App.tsx b/packages/mini-markdown-editor/src/App.tsx
index 3e7fa12..c462a34 100644
--- a/packages/mini-markdown-editor/src/App.tsx
+++ b/packages/mini-markdown-editor/src/App.tsx
@@ -46,6 +46,7 @@ const App: FC = () => {
         status={true}
         onUpload={handleUpload}
         local={true}
+        lineNumbers={true}
         theme={theme as "light" | "dark"}
         onChange={handleChange}
       />
diff --git a/packages/mini-markdown-editor/src/components/Editor/index.tsx b/packages/mini-markdown-editor/src/components/Editor/index.tsx
index e1650ba..18aef9c 100644
--- a/packages/mini-markdown-editor/src/components/Editor/index.tsx
+++ b/packages/mini-markdown-editor/src/components/Editor/index.tsx
@@ -4,16 +4,17 @@ import CodeMirror, { type EditorView, ViewUpdate } from "@uiw/react-codemirror";
 import * as events from "@uiw/codemirror-extensions-events";
 import { useEditorContentStore } from "@/store/editor";
 import { handleEditorScroll } from "@/utils/handle-scroll";
-// import { useEditorShortcuts } from "@/hooks/use-editor-shortcuts";
 import { usePersistEditorContent } from "@/hooks/use-persist-editor-content";
 import { ConfigContext } from "../providers/config-provider";
 import { createEditorExtensions } from "@/extensions/codemirror";
 
-const ScrollWrapper = styled.div`
+const ScrollWrapper = styled.div<{
+  $lineNumbers?: boolean;
+}>`
   width: 100%;
   height: 100%;
   overflow: auto;
-  padding: 5px 10px;
+  padding: 5px ${({ $lineNumbers }) => ($lineNumbers ? "0px" : "10px")};
   display: flex;
   flex-direction: column;
 
@@ -58,8 +59,6 @@ const Editor: FC<{ isSyncScroll: boolean }> = ({ isSyncScroll }) => {
     },
     [editorViewRef],
   );
-  // 监听快捷键
-  // useEditorShortcuts();
   // 持久化存储内容
   const { saveContent, getContent } = usePersistEditorContent();
 
@@ -117,10 +116,10 @@ const Editor: FC<{ isSyncScroll: boolean }> = ({ isSyncScroll }) => {
     [scrollWrapper],
   );
 
-  const { theme } = useContext(ConfigContext);
+  const { theme, lineNumbers } = useContext(ConfigContext);
 
   return (
-    <ScrollWrapper>
+    <ScrollWrapper $lineNumbers={lineNumbers}>
       <CodeMirror
         className="markdown-editor-content"
         onCreateEditor={handleCreate}
@@ -128,7 +127,7 @@ const Editor: FC<{ isSyncScroll: boolean }> = ({ isSyncScroll }) => {
         value={content}
         extensions={extensions}
         basicSetup={{
-          lineNumbers: false,
+          lineNumbers: lineNumbers || false,
           foldGutter: false,
           highlightActiveLine: false,
           highlightActiveLineGutter: false,
diff --git a/packages/mini-markdown-editor/src/config/global.ts b/packages/mini-markdown-editor/src/config/global.ts
index bd5deb2..40a8264 100644
--- a/packages/mini-markdown-editor/src/config/global.ts
+++ b/packages/mini-markdown-editor/src/config/global.ts
@@ -2,7 +2,8 @@ import { GlobalConfig } from "@/types/global-config";
 
 // 默认配置
 export const defaultGlobalConfig: GlobalConfig = {
-  status: true,
+  status: true, // 底部状态栏
   theme: "light", // 主题
   local: true, // 是否开启本地存储
+  lineNumbers: false, // 是否显示行号
 };
diff --git a/packages/mini-markdown-editor/src/types/global-config.ts b/packages/mini-markdown-editor/src/types/global-config.ts
index fef8191..7bdb0ee 100644
--- a/packages/mini-markdown-editor/src/types/global-config.ts
+++ b/packages/mini-markdown-editor/src/types/global-config.ts
@@ -23,6 +23,11 @@ export interface GlobalConfig {
    * @type {boolean}
    */
   local?: boolean; // 是否开启本地存储
+  /**
+   * 编辑区是否显示行号
+   * @type {boolean}
+   */
+  lineNumbers?: boolean;
   /**
    * 改变编辑器内容时触发
    * @type {(value: string, editorView: ViewUpdate) => void}
@@ -33,6 +38,11 @@ export interface GlobalConfig {
    * @type {(file: File, callback: Callback) => void}
    */
   onUpload?: (file: File, callback: Callback) => void;
+  /**
+   * 拖拽上传图片时触发
+   * @type {(file: File, callback: Callback) => void}
+   */
+  onDragUpload?: (file: File, callback: Callback) => void;
 }
 
 export type Callback = (param: { url: string; alt?: string }) => void;
-- 
Gitee