From ecfee790913af09e2e7a6101a2a4d8da4204e533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com> Date: Thu, 6 Feb 2025 04:16:38 +0800 Subject: [PATCH 1/3] =?UTF-8?q?chore(mini-markdown-material):=20=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=97=A0=E7=94=A8=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-material/.gitignore | 24 --------- packages/mini-markdown-material/README.md | 50 ------------------- .../mini-markdown-material/eslint.config.js | 28 ----------- packages/mini-markdown-material/package.json | 46 ----------------- .../src/components/Blockquote/index.tsx | 0 .../components/Heading/__test__/index.test.ts | 0 .../src/components/Heading/index.tsx | 43 ---------------- .../src/components/Table/TBody.tsx | 0 .../components/Table/__test__/Tbody.test.tsx | 0 .../components/Table/__test__/index.test.tsx | 0 .../src/components/Table/index.tsx | 0 .../src/components/base/LineWrap.tsx | 9 ---- packages/mini-markdown-material/src/main.tsx | 5 -- .../mini-markdown-material/src/vite-env.d.ts | 1 - .../mini-markdown-material/tsconfig.app.json | 33 ------------ packages/mini-markdown-material/tsconfig.json | 7 --- .../mini-markdown-material/tsconfig.node.json | 24 --------- .../mini-markdown-material/vite.config.ts | 46 ----------------- 18 files changed, 316 deletions(-) delete mode 100644 packages/mini-markdown-material/.gitignore delete mode 100644 packages/mini-markdown-material/README.md delete mode 100644 packages/mini-markdown-material/eslint.config.js delete mode 100644 packages/mini-markdown-material/package.json delete mode 100644 packages/mini-markdown-material/src/components/Blockquote/index.tsx delete mode 100644 packages/mini-markdown-material/src/components/Heading/__test__/index.test.ts delete mode 100644 packages/mini-markdown-material/src/components/Heading/index.tsx delete mode 100644 packages/mini-markdown-material/src/components/Table/TBody.tsx delete mode 100644 packages/mini-markdown-material/src/components/Table/__test__/Tbody.test.tsx delete mode 100644 packages/mini-markdown-material/src/components/Table/__test__/index.test.tsx delete mode 100644 packages/mini-markdown-material/src/components/Table/index.tsx delete mode 100644 packages/mini-markdown-material/src/components/base/LineWrap.tsx delete mode 100644 packages/mini-markdown-material/src/main.tsx delete mode 100644 packages/mini-markdown-material/src/vite-env.d.ts delete mode 100644 packages/mini-markdown-material/tsconfig.app.json delete mode 100644 packages/mini-markdown-material/tsconfig.json delete mode 100644 packages/mini-markdown-material/tsconfig.node.json delete mode 100644 packages/mini-markdown-material/vite.config.ts diff --git a/packages/mini-markdown-material/.gitignore b/packages/mini-markdown-material/.gitignore deleted file mode 100644 index a547bf3..0000000 --- a/packages/mini-markdown-material/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/packages/mini-markdown-material/README.md b/packages/mini-markdown-material/README.md deleted file mode 100644 index 74872fd..0000000 --- a/packages/mini-markdown-material/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js -export default tseslint.config({ - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) -``` - -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` -- Optionally add `...tseslint.configs.stylisticTypeChecked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: - -```js -// eslint.config.js -import react from 'eslint-plugin-react' - -export default tseslint.config({ - // Set the react version - settings: { react: { version: '18.3' } }, - plugins: { - // Add the react plugin - react, - }, - rules: { - // other rules... - // Enable its recommended rules - ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, - }, -}) -``` diff --git a/packages/mini-markdown-material/eslint.config.js b/packages/mini-markdown-material/eslint.config.js deleted file mode 100644 index 092408a..0000000 --- a/packages/mini-markdown-material/eslint.config.js +++ /dev/null @@ -1,28 +0,0 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' -import tseslint from 'typescript-eslint' - -export default tseslint.config( - { ignores: ['dist'] }, - { - extends: [js.configs.recommended, ...tseslint.configs.recommended], - files: ['**/*.{ts,tsx}'], - languageOptions: { - ecmaVersion: 2020, - globals: globals.browser, - }, - plugins: { - 'react-hooks': reactHooks, - 'react-refresh': reactRefresh, - }, - rules: { - ...reactHooks.configs.recommended.rules, - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, - }, -) diff --git a/packages/mini-markdown-material/package.json b/packages/mini-markdown-material/package.json deleted file mode 100644 index 4e4bc05..0000000 --- a/packages/mini-markdown-material/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "@mini-markdown/material", - "version": "1.0.0", - "private": true, - "description": "mini-markdown-editor的物料组件库", - "keywords": [ - "物料", - "组件" - ], - "type": "module", - "main": "./dist/mini-markdown-material.umd.cjs", - "module": "./dist/mini-markdown-material.js", - "types": "./dist/main.d.ts", - "exports": { - ".": { - "types": "./dist/main.d.ts", - "import": "./dist/mini-markdown-material.js", - "require": "./dist/mini-markdown-material.umd.cjs" - } - }, - "scripts": { - "dev": "vite build --watch", - "build": "tsc -b && vite build", - "lint": "eslint .", - "preview": "vite preview" - }, - "dependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1", - "styled-components": "^6.1.14" - }, - "devDependencies": { - "@eslint/js": "^9.17.0", - "@types/react": "^18.3.18", - "@types/react-dom": "^18.3.5", - "@vitejs/plugin-react": "^4.3.4", - "eslint": "^9.17.0", - "eslint-plugin-react-hooks": "^5.0.0", - "eslint-plugin-react-refresh": "^0.4.16", - "globals": "^15.14.0", - "typescript": "~5.6.2", - "typescript-eslint": "^8.18.2", - "vite": "^6.0.5", - "vite-plugin-dts": "^4.5.0" - } -} diff --git a/packages/mini-markdown-material/src/components/Blockquote/index.tsx b/packages/mini-markdown-material/src/components/Blockquote/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/Heading/__test__/index.test.ts b/packages/mini-markdown-material/src/components/Heading/__test__/index.test.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/Heading/index.tsx b/packages/mini-markdown-material/src/components/Heading/index.tsx deleted file mode 100644 index 388705d..0000000 --- a/packages/mini-markdown-material/src/components/Heading/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { FC } from 'react' -import styled from 'styled-components' -import { LineWrap } from '@/components/base/LineWrap' - -/** - * '#' 这个字符，以及后面内容的样式（span包裹） - */ -const HeadingStyle = styled.span` - color: #3f4a54; - font-weight: bold; - font-size: ${props => { - switch (props.level) { - case 1: return '2em'; - case 2: return '1.5em'; - case 3: return '1.17em'; - case 4: return '1em'; - case 5: return '0.83em'; - case 6: return '0.67em'; - default: return '1em'; - } - }}; - .heading-tag { - color: #0000ff; - } -` - -export type PropsType = { - level: number - children: React.ReactNode -} - -const Heading: FC = ({ level, children }) => { - return ( - - - {'#'.repeat(level)} - - {children} - - ) -} - -export default Heading diff --git a/packages/mini-markdown-material/src/components/Table/TBody.tsx b/packages/mini-markdown-material/src/components/Table/TBody.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/Table/__test__/Tbody.test.tsx b/packages/mini-markdown-material/src/components/Table/__test__/Tbody.test.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/Table/__test__/index.test.tsx b/packages/mini-markdown-material/src/components/Table/__test__/index.test.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/Table/index.tsx b/packages/mini-markdown-material/src/components/Table/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/mini-markdown-material/src/components/base/LineWrap.tsx b/packages/mini-markdown-material/src/components/base/LineWrap.tsx deleted file mode 100644 index 15a5a7e..0000000 --- a/packages/mini-markdown-material/src/components/base/LineWrap.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components' - -/** - * 包裹容器，用于限制每一行内容 - */ -export const LineWrap = styled.div` - width: 100%; - height: 20px; -` \ No newline at end of file diff --git a/packages/mini-markdown-material/src/main.tsx b/packages/mini-markdown-material/src/main.tsx deleted file mode 100644 index a55c465..0000000 --- a/packages/mini-markdown-material/src/main.tsx +++ /dev/null @@ -1,5 +0,0 @@ -// ts 类型 -export type { PropsType } from '@/components/Heading' - -// 组件 -export { default as Heading } from '@/components/Heading' diff --git a/packages/mini-markdown-material/src/vite-env.d.ts b/packages/mini-markdown-material/src/vite-env.d.ts deleted file mode 100644 index 11f02fe..0000000 --- a/packages/mini-markdown-material/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/packages/mini-markdown-material/tsconfig.app.json b/packages/mini-markdown-material/tsconfig.app.json deleted file mode 100644 index e6d3442..0000000 --- a/packages/mini-markdown-material/tsconfig.app.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true, - - /* alias */ - "baseUrl": "src", - "paths": { - "@/*": ["./*"], - "@": ["./"] - } - }, - "include": ["src"] -} diff --git a/packages/mini-markdown-material/tsconfig.json b/packages/mini-markdown-material/tsconfig.json deleted file mode 100644 index 1ffef60..0000000 --- a/packages/mini-markdown-material/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] -} diff --git a/packages/mini-markdown-material/tsconfig.node.json b/packages/mini-markdown-material/tsconfig.node.json deleted file mode 100644 index db0becc..0000000 --- a/packages/mini-markdown-material/tsconfig.node.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", - "target": "ES2022", - "lib": ["ES2023"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/packages/mini-markdown-material/vite.config.ts b/packages/mini-markdown-material/vite.config.ts deleted file mode 100644 index b1a3b07..0000000 --- a/packages/mini-markdown-material/vite.config.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import { fileURLToPath, URL } from 'node:url' -import { readFileSync } from 'node:fs' -// 打包后生成d.ts文件 -import dts from 'vite-plugin-dts' - -const pkg = JSON.parse( - readFileSync('./package.json', { encoding: 'utf-8' }), -) -// 需要排除的依赖 -const externals = { - ...(pkg?.dependencies || {}), -} - -export default defineConfig({ - plugins: [ - react(), - dts({ - tsconfigPath: './tsconfig.app.json' - }) - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - }, - build: { - outDir: 'dist', - lib: { - entry: 'src/main.tsx', - name: 'mini-markdown-material', - fileName: 'mini-markdown-material' - }, - rollupOptions: { - external: ['react', 'react-dom', 'styled-components', ...Object.keys(externals)], - output: { - globals: { - react: 'React', - 'react-dom': 'ReactDOM', - 'styled-components': 'styled' - } - } - } - } -}) -- Gitee From a4398745ee27b6178ee3274c2ac44f4c334970e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com> Date: Thu, 6 Feb 2025 05:55:03 +0800 Subject: [PATCH 2/3] =?UTF-8?q?build(mini-markdown-editor):=20=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E6=89=93=E5=8C=85=E6=9E=84=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-editor/package.json | 50 +++++++++--- .../src/assets/styles/reset.css | 1 + .../components/Editor/__test__/index.test.tsx | 53 +++++++++++-- .../src/components/Preview/index.tsx | 29 ++++++- .../src/components/Status/index.tsx | 7 +- .../src/extensions/codemirror/markdown.ts | 3 +- packages/mini-markdown-editor/src/index.tsx | 12 +++ packages/mini-markdown-editor/vite.config.ts | 77 ++++++++++++++++--- .../src/pages/ui-test copy.tsx | 64 --------------- 9 files changed, 196 insertions(+), 100 deletions(-) create mode 100644 packages/mini-markdown-editor/src/index.tsx delete mode 100644 packages/mini-markdown-play/src/pages/ui-test copy.tsx diff --git a/packages/mini-markdown-editor/package.json b/packages/mini-markdown-editor/package.json index d657b50..2c7ae0b 100644 --- a/packages/mini-markdown-editor/package.json +++ b/packages/mini-markdown-editor/package.json @@ -1,12 +1,29 @@ { "name": "@mini-markdown/editor", - "private": true, "version": "0.0.0", "type": "module", + "description": "mini-markdown-editor", + "keywords": [ + "markdown", + "editor", + "markdown-editor", + "react", + "react-markdown-editor" + ], + "main": "./dist/mini-markdown-editor.umd.cjs", + "module": "./dist/mini-markdown-editor.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/mini-markdown-editor.js", + "require": "./dist/mini-markdown-editor.umd.cjs" + } + }, "scripts": { "build:ast": "pnpm -F @mini-markdown/ast-parser build", "dev": "pnpm build:ast && vite", - "build": "tsc -b && vite build", + "build": "pnpm build:ast && tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", "test": "vitest", @@ -14,21 +31,13 @@ "coverage": "vitest run --coverage" }, "dependencies": { - "@codemirror/commands": "^6.8.0", - "@codemirror/lang-markdown": "^6.3.2", - "@codemirror/language-data": "^6.5.1", "@emoji-mart/data": "^1.2.1", "@emoji-mart/react": "^1.1.1", - "@mini-markdown/material": "workspace:^1.0.0", - "@uiw/codemirror-extensions-events": "^4.23.7", - "@uiw/react-codemirror": "^4.23.7", "ahooks": "^3.8.4", "antd": "^5.23.2", "emoji-mart": "^5.6.0", "highlight.js": "^11.11.1", "html2pdf.js": "^0.10.2", - "react": "^18.3.1", - "react-dom": "^18.3.1", "react-hotkeys-hook": "^4.6.1", "zustand": "^5.0.3" }, @@ -51,6 +60,23 @@ "typescript": "~5.6.2", "typescript-eslint": "^8.18.2", "vite": "^6.0.5", - "vitest": "^3.0.5" + "vite-plugin-dts": "^4.5.0", + "vitest": "^3.0.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "@codemirror/commands": "^6.8.0", + "@codemirror/lang-markdown": "^6.3.2", + "@codemirror/language-data": "^6.5.1", + "@uiw/codemirror-extensions-events": "^4.23.7", + "@uiw/react-codemirror": "^4.23.7" + }, + "peerDependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "@codemirror/commands": "^6.8.0", + "@codemirror/lang-markdown": "^6.3.2", + "@codemirror/language-data": "^6.5.1", + "@uiw/codemirror-extensions-events": "^4.23.7", + "@uiw/react-codemirror": "^4.23.7" } -} +} \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/styles/reset.css b/packages/mini-markdown-editor/src/assets/styles/reset.css index 45f760e..5affb65 100644 --- a/packages/mini-markdown-editor/src/assets/styles/reset.css +++ b/packages/mini-markdown-editor/src/assets/styles/reset.css @@ -2,4 +2,5 @@ margin: 0; padding: 0; box-sizing: border-box; + list-style: none; } \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/components/Editor/__test__/index.test.tsx b/packages/mini-markdown-editor/src/components/Editor/__test__/index.test.tsx index 39fca10..9ea8492 100644 --- a/packages/mini-markdown-editor/src/components/Editor/__test__/index.test.tsx +++ b/packages/mini-markdown-editor/src/components/Editor/__test__/index.test.tsx @@ -1,15 +1,52 @@ -import { describe, test, expect } from "vitest"; -import { render } from "@testing-library/react"; +import { describe, test, expect, vi } from "vitest"; +import { render, fireEvent } from "@testing-library/react"; import "@testing-library/jest-dom"; +import { ConfigContext } from "../../providers/config-provider"; import Editor from "../index"; describe("Editor 组件测试", () => { - test("测试组件渲染", async () => { - // 渲染组件 - const dom = await render(); - // 是否符合预期 - expect(dom).toBeTruthy(); - //...省略 + test("测试组件基本渲染", async () => { + const { container } = render(); + expect(container.querySelector(".markdown-editor-content")).toBeInTheDocument(); + }); + + test("测试滚动同步功能", async () => { + const { container } = render(); + const editorElement = container.querySelector(".markdown-editor-content"); + expect(editorElement).toBeInTheDocument(); + + // 触发鼠标进入事件 + if (editorElement) { + fireEvent.mouseEnter(editorElement); + } + }); + + test("测试编辑器内容变更事件", async () => { + const mockOnChange = vi.fn(); + const { container } = render( + + + , + ); + + expect(container.querySelector(".markdown-editor-content")).toBeInTheDocument(); + }); + + test("测试主题切换功能", async () => { + const { container, rerender } = render( + + + , + ); + + // 重新渲染暗色主题 + rerender( + + + , + ); + + expect(container.querySelector(".markdown-editor-content")).toBeInTheDocument(); }); }); diff --git a/packages/mini-markdown-editor/src/components/Preview/index.tsx b/packages/mini-markdown-editor/src/components/Preview/index.tsx index 92f80d9..448a3cf 100644 --- a/packages/mini-markdown-editor/src/components/Preview/index.tsx +++ b/packages/mini-markdown-editor/src/components/Preview/index.tsx @@ -83,6 +83,7 @@ const ScrollWrapper = styled.div` /* color: #3f4a54; */ color: var(--md-preview-special-color); margin: 0.8em 0; + font-weight: 700; } .mini-md-h1 { @@ -132,7 +133,7 @@ const ScrollWrapper = styled.div` } .mini-md-image { - max-width: 100%; + width: 100%; /* border: 1px solid #e6e6e6; */ border: 1px solid var(--md-preview-border-color); border-radius: 3px; @@ -187,10 +188,32 @@ const ScrollWrapper = styled.div` .mini-md-ol { margin: 0.6em 0; padding-inline-start: 30px; + list-style: initial; + .mini-md-li { + list-style: initial; + &::marker { + color: #1456f0; + } + } } - .mini-md-li::marker { - color: #1456f0; + .mini-md-ul > .mini-md-li { + list-style-type: disc; + } + .mini-md-ul .mini-md-ul > .mini-md-li { + list-style-type: circle; + } + .mini-md-ul .mini-md-ul .mini-md-ul > .mini-md-li { + list-style-type: square; + } + .mini-md-ol > .mini-md-li { + list-style-type: decimal; + } + .mini-md-ol .mini-md-ol > .mini-md-li { + list-style-type: lower-alpha; + } + .mini-md-ol .mini-md-ol .mini-md-ol > .mini-md-li { + list-style-type: lower-roman; } .mini-md-code-container { diff --git a/packages/mini-markdown-editor/src/components/Status/index.tsx b/packages/mini-markdown-editor/src/components/Status/index.tsx index 14be80e..689840a 100644 --- a/packages/mini-markdown-editor/src/components/Status/index.tsx +++ b/packages/mini-markdown-editor/src/components/Status/index.tsx @@ -67,7 +67,12 @@ const Status: FC<{ isSyncScroll: boolean; updateSyncScrollStatus: (val: boolean)
字数: {contentNum}
- + 同步滚动
diff --git a/packages/mini-markdown-editor/src/extensions/codemirror/markdown.ts b/packages/mini-markdown-editor/src/extensions/codemirror/markdown.ts index b5237a8..50113c8 100644 --- a/packages/mini-markdown-editor/src/extensions/codemirror/markdown.ts +++ b/packages/mini-markdown-editor/src/extensions/codemirror/markdown.ts @@ -1,8 +1,9 @@ import { markdown } from "@codemirror/lang-markdown"; import { languages } from "@codemirror/language-data"; import { markdownLanguage } from "@codemirror/lang-markdown"; +import { Extension } from "@codemirror/state"; -export const createMarkdownExtension = () => { +export const createMarkdownExtension = (): Extension => { return markdown({ base: markdownLanguage, codeLanguages: languages, diff --git a/packages/mini-markdown-editor/src/index.tsx b/packages/mini-markdown-editor/src/index.tsx new file mode 100644 index 0000000..c61cf87 --- /dev/null +++ b/packages/mini-markdown-editor/src/index.tsx @@ -0,0 +1,12 @@ +/** + * 该文件用作打包时的入口文件 + */ + +import Editor from "./EditorWrapper"; +// 导出组件 +export { Editor }; + +// 导出 ts 类型 +export * from "@/types/code-mirror"; +export * from "@/types/global-config"; +export * from "@/types/toolbar"; diff --git a/packages/mini-markdown-editor/vite.config.ts b/packages/mini-markdown-editor/vite.config.ts index f008de7..8e2f09d 100644 --- a/packages/mini-markdown-editor/vite.config.ts +++ b/packages/mini-markdown-editor/vite.config.ts @@ -1,12 +1,67 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import { fileURLToPath } from 'node:url'; +import { defineConfig, PluginOption } from "vite"; +import react from "@vitejs/plugin-react"; +import { fileURLToPath } from "node:url"; +import { readFileSync } from "node:fs"; +// 打包后生成d.ts文件 +import dts from "vite-plugin-dts"; -export default defineConfig({ - plugins: [react()], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) +const pkg = JSON.parse(readFileSync("./package.json", { encoding: "utf-8" })); +// 需要排除的依赖 +const externals = { + ...(pkg?.dependencies || {}), +}; + +export default defineConfig(({ mode }) => { + const isProd = mode === "production"; + return { + plugins: [ + react() as PluginOption, + ...(isProd ? [dts({ tsconfigPath: "./tsconfig.app.json" })] : []), + ], + resolve: { + alias: { + "@": fileURLToPath(new URL("./src", import.meta.url)), + }, + }, + build: { + outDir: "dist", + lib: { + entry: "src/index.tsx", + name: "mini-markdown-editor", + fileName: "mini-markdown-editor", + }, + rollupOptions: { + external: [ + "react", + "react-dom", + "styled-components", + ...Object.keys(externals), + /@codemirror\/.*/, + "@uiw/react-codemirror", + "@uiw/codemirror-extensions-events", + ], + output: { + chunkFileNames: `dist/chunks/[name].js`, + globals: { + react: "React", + "react-dom": "ReactDOM", + "styled-components": "styled", + zustand: "zustand", + "@codemirror/commands": "commands", + antd: "antd", + "html2pdf.js": "html2pdf", + "@emoji-mart/data": "data", + "@emoji-mart/react": "Picker", + "@uiw/react-codemirror": "CodeMirror", + "@uiw/codemirror-extensions-events": "events", + ahooks: "ahooks", + "@codemirror/lang-markdown": "lang-markdown", + "@codemirror/language-data": "languageData$1", + "@codemirror/view": "view", + "highlight.js": "hljs", + }, + }, + }, + }, + }; +}); diff --git a/packages/mini-markdown-play/src/pages/ui-test copy.tsx b/packages/mini-markdown-play/src/pages/ui-test copy.tsx deleted file mode 100644 index bcb22b9..0000000 --- a/packages/mini-markdown-play/src/pages/ui-test copy.tsx +++ /dev/null @@ -1,64 +0,0 @@ -// import { Heading } from '@mini-markdown/material/src/components/Heading/index.tsx'; -import { Heading } from '@mini-markdown/material'; -import { useRef } from 'react'; -import ReactDOMServer from 'react-dom/server'; - -function App() { - const editRef = useRef(null); - const handleClick = () => { - if (document.activeElement != editRef.current) { - editRef.current!.focus() - } - const headingHtml = ReactDOMServer.renderToStaticMarkup(hello); - document.execCommand('insertHTML', false, headingHtml); - }; - - const handleInput = (e: React.FormEvent) => { - console.log('input event', e); - // const selection = getSelection(); - // if (selection && selection.rangeCount > 0) - // const range = selection.getRangeAt(0); - // console.log('Current cursor position:', range); - // } - }; - - const getText = () => { - console.log(editRef.current?.innerText); - - } - - return ( -
-
- - -
-
- hello -
-
- ); -} - -export default App; \ No newline at end of file -- Gitee From 94c6444bf372ea6adb5aa2875efe787238171887 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com> Date: Thu, 6 Feb 2025 05:55:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?test(mini-markdown-play):=20=E6=89=93?= =?UTF-8?q?=E5=8C=85=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-play/package.json | 7 +- .../mini-markdown-play/src/pages/ui-test.tsx | 87 ++++---- packages/mini-markdown-play/src/reset.css | 203 +++++++++++++++++- 3 files changed, 249 insertions(+), 48 deletions(-) diff --git a/packages/mini-markdown-play/package.json b/packages/mini-markdown-play/package.json index 39da225..b6afbbe 100644 --- a/packages/mini-markdown-play/package.json +++ b/packages/mini-markdown-play/package.json @@ -10,12 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@codemirror/lang-markdown": "^6.3.2", - "@codemirror/language-data": "^6.5.1", - "@mini-markdown/material": "workspace:^1.0.0", - "@uiw/codemirror-extensions-basic-setup": "^4.23.7", - "@uiw/react-codemirror": "^4.23.7", - "codemirror": "^6.0.1", + "@mini-markdown/editor": "workspace:^0.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3", diff --git a/packages/mini-markdown-play/src/pages/ui-test.tsx b/packages/mini-markdown-play/src/pages/ui-test.tsx index 415c005..7a307fa 100644 --- a/packages/mini-markdown-play/src/pages/ui-test.tsx +++ b/packages/mini-markdown-play/src/pages/ui-test.tsx @@ -1,43 +1,56 @@ -import CodeMirror from '@uiw/react-codemirror' -import { markdown, markdownLanguage } from '@codemirror/lang-markdown' -import { languages } from '@codemirror/language-data' +import { FC, useState } from "react"; +import styled from "styled-components"; +import { Editor } from "@mini-markdown/editor"; +import type { Callback } from "@mini-markdown/editor"; +import { Button, message } from "antd"; +// 可根据需要引入不同的主题 +import "highlight.js/styles/atom-one-dark.css"; +import { ViewUpdate } from "@mini-markdown/editor"; -const code = `## Title +const AppWrapper = styled.div` + width: 100%; + height: 95vh; + background-color: #fafafa; + padding: 50px; +`; -\`\`\`jsx -function Demo() { - return
demo
-} -\`\`\` +const App: FC = () => { + // 请求测试 + const handleUpload = async (file: File, callback: Callback) => { + await new Promise((resolve) => { + setTimeout(() => { + console.log("settimeout 上传成功", file); + resolve({}); + }, 1500); + }); + callback({ + url: "https://www.baidu.com/img/flexible/logo/pc/result@2.png", + alt: "alt", + }); + message.success("上传成功"); + }; -\`\`\`bash -# Not dependent on uiw. -npm install @codemirror/lang-markdown --save -npm install @codemirror/language-data --save -\`\`\` + const [theme, setTheme] = useState<"light" | "dark">("light"); + const changeTheme = () => { + setTheme(theme === "light" ? "dark" : "light"); + }; -[weisit ulr](https://uiwjs.github.io/react-codemirror/) + const handleChange = (val: string, view: ViewUpdate) => { + console.log(val, view); + }; -\`\`\`go -package main -import "fmt" -func main() { - fmt.Println("Hello, 世界") -} -\`\`\` -` - -export default function App() { return ( - - ) -} + + + + + ); +}; + +export default App; diff --git a/packages/mini-markdown-play/src/reset.css b/packages/mini-markdown-play/src/reset.css index 4cffda5..f64d941 100644 --- a/packages/mini-markdown-play/src/reset.css +++ b/packages/mini-markdown-play/src/reset.css @@ -1,11 +1,204 @@ @tailwind base; @tailwind components; @tailwind utilities; -* { - margin: 0; - padding: 0; -} .active { color: sandybrown; -} \ No newline at end of file +} + +*, +*:after, +*:before { + box-sizing: border-box; + outline: none; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + font: inherit; + font-size: 100%; + + margin: 0; + padding: 0; + + vertical-align: baseline; + + border: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; + + &:before, + &:after { + content: ""; + content: none; + } +} + +sub, +sup { + font-size: 75%; + line-height: 0; + + position: relative; + + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +input, +textarea, +button { + font-family: inhert; + font-size: inherit; + + color: inherit; +} + +select { + text-indent: 0.01px; + text-overflow: ""; + + border: 0; + border-radius: 0; + + -webkit-appearance: none; + -moz-appearance: none; +} + +select::-ms-expand { + display: none; +} + +code, +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +html { + width: 100vw; + height: 100vh; +} + +body { + width: 100%; + height: 100%; +} + -- Gitee