@uiw/react-md-editor 3.10.1 → 3.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.10.1",
+  "version": "3.11.1",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",
@@ -51,13 +51,14 @@
     "@types/react-test-renderer": "~17.0.1",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-shields": "~1.1.2",
+    "@wcj/dark-mode": "~1.0.9",
     "compile-less-cli": "~1.8.11",
     "katex": "~0.15.2",
     "husky": "~7.0.4",
     "kkt": "~7.1.5",
     "lint-staged": "~12.3.4",
     "mermaid": "~8.14.0",
-    "prettier": "~2.5.1",
+    "prettier": "~2.6.0",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
     "react-test-renderer": "~17.0.2",
@@ -66,7 +67,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "~3.5.0",
+    "@uiw/react-markdown-preview": "~4.0.5",
     "rehype-sanitize": "~5.0.1",
     "rehype": "~12.0.1"
   },

package/src/Editor.tsx

@@ -184,6 +184,7 @@ const InternalMDEditor = (
 
   const cls = [
     className,
+    'wmde-markdown-var',
     prefixCls,
     state.preview ? `${prefixCls}-show-${state.preview}` : null,
     state.fullscreen ? `${prefixCls}-fullscreen` : null,

package/src/__test__/editor.test.tsx

@@ -14,7 +14,7 @@ it('MDEditor', () => {
   let tree = component.toJSON();
   if (tree && !Array.isArray(tree)) {
     expect(tree.type).toEqual('div');
-    expect(tree.props.className).toEqual('w-md-editor w-md-editor-show-live');
+    expect(tree.props.className).toEqual('wmde-markdown-var w-md-editor w-md-editor-show-live');
     expect(tree.props.style).toMatchObject({
       height: 200,
     });

package/src/components/TextArea/Markdown.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import { rehype } from 'rehype';
-// @ts-ignore
-import rehypePrism from '@mapbox/rehype-prism';
+import rehypePrism from 'rehype-prism-plus';
 import { IProps } from '../../Editor';
 import { EditorContext } from '../../Context';
 
@@ -9,7 +8,7 @@ export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreEleme
 
 export default function Markdown(props: MarkdownProps) {
   const { prefixCls } = props;
-  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);
+  const { markdown = '', dispatch } = useContext(EditorContext);
   const preRef = React.createRef<HTMLPreElement>();
   useEffect(() => {
     if (preRef.current && dispatch) {
@@ -32,7 +31,7 @@ export default function Markdown(props: MarkdownProps) {
   }
 
   return useMemo(() => {
-    if (!highlightEnable || !markdown) {
+    if (!markdown) {
       return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
     }
     const str = rehype()
@@ -47,5 +46,5 @@ export default function Markdown(props: MarkdownProps) {
       className: 'wmde-markdown-color',
       dangerouslySetInnerHTML: { __html: str.value as string },
     });
-  }, [highlightEnable, markdown, preRef, prefixCls]);
+  }, [markdown, preRef, prefixCls]);
 }

package/src/components/TextArea/index.less

@@ -95,42 +95,32 @@
 }
 
 .@{md-editor}-text-pre {
-  color: #333;
-  .table {
-    .punctuation {
-      color: #c3c3c3;
-    }
-    .table-header {
-      color: #000;
-    }
+  .punctuation {
+    color: var(--color-prettylights-syntax-comment) !important;
   }
-
-  .url {
-    color: #032f62 !important;
-    .content {
-      color: #0366d6;
-    }
+  .token.url,
+  .token.content {
+    color: var(--color-prettylights-syntax-constant) !important;
   }
-
-  .hr {
-    color: #999;
+  .token.title.important {
+    color: var(--color-prettylights-syntax-markup-bold);
   }
-  .blockquote {
-    color: #a6a6a6;
+  .token.code-block .function {
+    color: var(--color-prettylights-syntax-entity);
   }
-  .title,
-  .bold {
-    color: #000 !important;
+  .token.bold {
+    font-weight: unset !important;
   }
-  .title {
+  .token.title {
     line-height: unset !important;
     font-size: unset !important;
     font-weight: unset !important;
   }
-  .code.keyword {
-    color: #596394 !important;
+  .token.code.keyword {
+    color: var(--color-prettylights-syntax-constant) !important;
   }
-  .strike {
-    color: #bf4ca0;
+  .token.strike,
+  .token.strike .content {
+    color: var(--color-prettylights-syntax-markup-deleted-text) !important;
   }
 }

package/src/components/TextArea/index.tsx

@@ -42,7 +42,7 @@ export type TextAreaRef = {
 
 export default function TextArea(props: ITextAreaProps) {
   const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);
+  const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
   const warp = React.createRef<HTMLDivElement>();
@@ -67,6 +67,9 @@ export default function TextArea(props: ITextAreaProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // @ts-ignore
+  const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };
+
   return (
     <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>
       <div className={`${prefixCls}-text`}>
@@ -99,8 +102,8 @@ export default function TextArea(props: ITextAreaProps) {
           )
         ) : (
           <Fragment>
-            <Markdown prefixCls={prefixCls} />
-            <Textarea prefixCls={prefixCls} {...otherProps} />
+            {highlightEnable && <Markdown prefixCls={prefixCls} />}
+            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
           </Fragment>
         )}
       </div>

package/src/components/Toolbar/Child.less

@@ -4,8 +4,9 @@
   &-toolbar-child {
     position: absolute;
     border-radius: 3px;
-    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
-    background-color: #fff;
+    box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
+      0 1px 1px var(--color-border-default);
+    background-color: var(--color-canvas-default);
     z-index: 1;
     display: none;
     &.active {

package/src/components/Toolbar/index.less

@@ -2,8 +2,8 @@
 
 .@{md-editor} {
   &-toolbar {
-    border-bottom: 1px solid #dfdfe0;
-    background-color: #fbfbfb;
+    border-bottom: 1px solid var(--color-border-default);
+    background-color: var(--color-canvas-default);
     padding: 0 5px 0 5px;
     display: flex;
     justify-content: space-between;
@@ -24,7 +24,6 @@
         height: 20px;
         line-height: 14px;
         background: none;
-        color: #586069;
         padding: 4px;
         margin: 0 1px;
         border-radius: 2px;
@@ -35,27 +34,28 @@
         cursor: pointer;
         transition: all 0.3s;
         white-space: nowrap;
+        color: var(--color-fg-default);
         &:hover,
         &:focus {
-          color: #06c;
-          background-color: #dcdcdc;
+          background-color: var(--color-neutral-muted);
+          color: var(--color-accent-fg);
         }
         &:active {
-          color: #6a57ff;
-          background-color: #dcdcdc;
+          background-color: var(--color-neutral-muted);
+          color: var(--color-danger-fg);
         }
         &:disabled {
-          color: #ccc;
+          color: var(--color-border-default);
           cursor: not-allowed;
           &:hover {
             background-color: transparent;
-            color: #ccc;
+            color: var(--color-border-default);
           }
         }
       }
       &.active > button {
-        color: #06c;
-        background-color: #e8e8e8;
+        color: var(--color-accent-fg);
+        background-color: var(--color-neutral-muted);
       }
     }
     &-divider {
@@ -63,7 +63,7 @@
       width: 1px;
       margin: -3px 3px 0 3px !important;
       vertical-align: middle;
-      background-color: #ccc;
+      background-color: var(--color-border-default);
     }
   }
 }

package/src/index.less

@@ -1,14 +1,18 @@
 @md-editor:~ "w-md-editor";
 
 .@{md-editor} {
-  color: #24292e;
   text-align: left;
-  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
   border-radius: 3px;
   padding-bottom: 1px;
   position: relative;
-  background-color: #fff;
+  color: var(--color-fg-default);
+  box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
+    0 1px 1px var(--color-border-default);
+  background-color: var(--color-canvas-default);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  .copied {
+    display: none !important;
+  }
   &-content {
     position: relative;
     border-radius: 0 0 3px 0;
@@ -21,7 +25,7 @@
   &-preview {
     width: 50%;
     box-sizing: border-box;
-    box-shadow: inset 1px 0 0 0 #dfdfe0;
+    box-shadow: inset 1px 0 0 0 var(--color-border-default);
     position: absolute;
     padding: 10px 20px;
     overflow: auto;
@@ -38,7 +42,7 @@
   &-show-preview &-input {
     width: 0%;
     overflow: hidden;
-    background-color: #fdfdfd;
+    background-color: var(--color-canvas-default);
   }
   &-show-preview &-preview {
     width: 100%;