chore(deps): Update dependency codemirror to v6 (#327) (#88)

Author: jaywcjlove

.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')],

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 (
     <CodeMirror
       value="console.log('hello world!');"
       height="200px"
-      extensions={[javascript({ jsx: true })]}
+      // extensions={[lang.javascript({ jsx: true })]}
       onChange={(value, viewUpdate) => {
         console.log('value:', value);
       }}
     />
   );
 }
+export default App;
 ```
 
 ## Support Language

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"

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

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';

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<string, any> = {
@@ -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() {
           <input type="text" value={placeholder} onChange={(evn) => setPlaceholder(evn.target.value)} />
         </label>
       </div>
-      <MarkdownPreview className={styles.markdown} source={DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
+      <MarkdownPreview className={styles.markdown} source={DocumentStr.source} />
       <div className={styles.footer}>
         <Github user="uiwjs" repo="react-codemirror">
           <Github.Social type="forks" href="https://github.com/uiwjs/react-codemirror" />

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;
 }