From 5cef465493407bf980e126956c47a0c9e4774573 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Thu, 9 Jun 2022 13:28:39 +0800 Subject: [PATCH] chore(deps): Update dependency codemirror to v6 (#327) (#88) --- .kktrc.ts | 4 +++- README.md | 10 ++++++---- package.json | 7 +++---- src/index.tsx | 3 --- src/useCodeMirror.ts | 2 +- website/App.tsx | 7 ++++--- website/react-app-env.d.ts | 7 ++++--- 7 files changed, 21 insertions(+), 19 deletions(-) diff --git a/.kktrc.ts b/.kktrc.ts index 2be271b30..6584e058d 100644 --- a/.kktrc.ts +++ b/.kktrc.ts @@ -4,6 +4,7 @@ import { LoaderConfOptions } from 'kkt'; import lessModules from '@kkt/less-modules'; import rawModules from '@kkt/raw-modules'; import scopePluginOptions from '@kkt/scope-plugin-options'; +import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader'; import pkg from './package.json'; export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => { @@ -74,9 +75,10 @@ export default (conf: Configuration, env: 'development' | 'production', options: } else { conf = rawModules(conf, env, { ...options, - test: /\.(txt|md)$/i, + test: /\.(txt)$/i, esModule: true, }); + conf = mdCodeModulesLoader(conf); conf = scopePluginOptions(conf, env, { ...options, allowedFiles: [path.resolve(process.cwd(), 'src'), path.resolve(process.cwd(), 'README.md')], diff --git a/README.md b/README.md index 3d7032860..197ee1923 100644 --- a/README.md +++ b/README.md @@ -37,22 +37,24 @@ npm install @uiw/react-codemirror --save [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-slvju?fontsize=14&hidenavigation=1&theme=dark) -```jsx +```jsx mdx:preview +import React from 'react'; import CodeMirror from '@uiw/react-codemirror'; -import { javascript } from '@codemirror/lang-javascript'; +import * as lang from '@codemirror/lang-javascript'; -export default function App() { +function App() { return ( { console.log('value:', value); }} /> ); } +export default App; ``` ## Support Language diff --git a/package.json b/package.json index 1f56cf6e0..fe6dee1e2 100644 --- a/package.json +++ b/package.json @@ -62,10 +62,8 @@ }, "dependencies": { "@babel/runtime": ">=7.11.0", - "@codemirror/basic-setup": "^0.20.0", - "@codemirror/state": "^6.0.0", "@codemirror/theme-one-dark": "^6.0.0", - "@codemirror/view": "^6.0.0" + "codemirror": "^6.0.0" }, "devDependencies": { "@codemirror/lang-cpp": "~6.0.0", @@ -80,7 +78,6 @@ "@codemirror/lang-rust": "~6.0.0", "@codemirror/lang-sql": "~6.0.0", "@codemirror/lang-xml": "~6.0.0", - "@codemirror/language": "6.0.0", "@codemirror/legacy-modes": "~6.0.0", "@kkt/less-modules": "~7.1.1", "@kkt/ncc": "~1.0.8", @@ -99,8 +96,10 @@ "husky": "~8.0.0", "kkt": "~7.1.5", "lint-staged": "~13.0.0", + "markdown-react-code-preview-loader": "^2.1.2", "prettier": "~2.6.0", "react": "~18.1.0", + "react-code-preview-layout": "^2.0.2", "react-dom": "~18.1.0", "react-test-renderer": "~18.1.0", "tsbb": "~3.7.0" diff --git a/src/index.tsx b/src/index.tsx index a8cdb89b6..531e0a4bf 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,9 +3,6 @@ import { EditorState, EditorStateConfig, Extension } from '@codemirror/state'; import { EditorView, ViewUpdate } from '@codemirror/view'; import { useCodeMirror } from './useCodeMirror'; -export * from '@codemirror/view'; -export * from '@codemirror/basic-setup'; -export * from '@codemirror/state'; export * from './useCodeMirror'; export interface ReactCodeMirrorProps diff --git a/src/useCodeMirror.ts b/src/useCodeMirror.ts index 9218f5ea3..51e46f741 100644 --- a/src/useCodeMirror.ts +++ b/src/useCodeMirror.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { basicSetup } from '@codemirror/basic-setup'; +import { basicSetup } from 'codemirror'; import { EditorState, StateEffect } from '@codemirror/state'; import { indentWithTab } from '@codemirror/commands'; import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view'; diff --git a/website/App.tsx b/website/App.tsx index 33036dbee..d563c361e 100644 --- a/website/App.tsx +++ b/website/App.tsx @@ -46,7 +46,8 @@ import { r } from '@codemirror/legacy-modes/mode/r'; import logo from './logo.png'; import styles from './App.module.less'; import DocumentStr from '../README.md'; -import CodeMirror, { ReactCodeMirrorProps, Extension } from '..'; +import { Extension } from '@codemirror/state'; +import CodeMirror, { ReactCodeMirrorProps } from '..'; import { Select } from './Select'; const langs: Record = { @@ -166,7 +167,7 @@ export default function App() { setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']); }); }, []); - + console.log('DocumentStr:', DocumentStr); // @ts-ignore const version = VERSION; return ( @@ -250,7 +251,7 @@ export default function App() { setPlaceholder(evn.target.value)} /> - /, '')} /> +
diff --git a/website/react-app-env.d.ts b/website/react-app-env.d.ts index 79a33c7bb..4db44a741 100644 --- a/website/react-app-env.d.ts +++ b/website/react-app-env.d.ts @@ -5,12 +5,13 @@ declare module '*.module.less' { export default classes; } -declare module '*.md' { +declare module '*.txt' { const src: string; export default src; } -declare module '*.txt' { - const src: string; +declare module '*.md' { + import { CodeBlockData } from 'markdown-react-code-preview-loader'; + const src: CodeBlockData; export default src; }