@uiw/react-md-editor 3.23.5 → 3.24.0

package/README.md

@@ -16,7 +16,7 @@
     <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@uiw/react-md-editor">
   </a>
   <a href="https://uiwjs.github.io/react-md-editor/coverage/lcov-report" target="__blank">
-    <img alt="Coverage Status" src="https://uiwjs.github.io/react-md-editor/coverage/badges.svg" />
+    <img alt="Coverage Status" src="https://uiwjs.github.io/react-md-editor/badges.svg" />
   </a>
   <br />
   <a href="https://github.com/uiwjs/react-md-editor/actions" target="__blank">
@@ -46,6 +46,7 @@ A simple markdown editor with preview, implemented with React.js and TypeScript.
 - 😻 GitHub flavored markdown support.
 - 🌒 Support dark-mode/night-mode **@v3.11.0+**.
 - 💡 Support [next.js](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341), [Use examples](#support-nextjs) in [next.js](https://nextjs.org/).
+- Line/lines duplication (Ctrl+D) and movement (Alt+UpArrow/DownArrow) **@v3.24.0+**.
 
 ### Quick Start
 
@@ -398,6 +399,27 @@ const codePreview = {
   icon: <Button />
 };
 
+const Disable = () => {
+  const { preview, dispatch } = useContext(EditorContext);
+  return (
+    <button disabled={preview === "preview"}>
+      <svg viewBox="0 0 16 16" width="12px" height="12px">
+        <path
+          d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.9 13H7v-1.8h1.9V13Zm-.1-3.6v.5H7.1v-.6c.2-2.1 2-1.9 1.9-3.2.1-.7-.3-1.1-1-1.1-.8 0-1.2.7-1.2 1.6H5c0-1.7 1.2-3 2.9-3 2.3 0 3 1.4 3 2.3.1 2.3-1.9 2-2.1 3.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+  )
+}
+
+const customButton = {
+  name: "disable",
+  keyCommand: "disable",
+  value: "disable",
+  icon: <Disable />
+}
+
 export default function App() {
   const [value, setValue] = React.useState("**Hello world!!!**");
   return (
@@ -406,7 +428,7 @@ export default function App() {
       <MDEditor
         value={value}
         preview="edit"
-        extraCommands={[codePreview, commands.fullscreen]}
+        extraCommands={[codePreview, customButton, commands.fullscreen]}
         onChange={(val) => setValue(val)}
       />
     </div>
@@ -471,7 +493,6 @@ export default function App() {
 
 ```jsx mdx:preview
 import React from "react";
-import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
 
 export default function App() {
@@ -499,7 +520,6 @@ npm install katex
 
 ```jsx mdx:preview
 import React from "react";
-import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
 import { getCodeString } from 'rehype-rewrite';
 import katex from 'katex';
@@ -515,9 +535,11 @@ c = \\pm\\sqrt{a^2 + b^2}
 `;
 
 export default function App() {
+  const [value, setValue] = React.useState(mdKaTeX);
   return (
     <MDEditor
-      value={mdKaTeX}
+      value={value}
+      onChange={(val) => setValue(val)}
       previewOptions={{
         components: {
           code: ({ inline, children = [], className, ...props }) => {
@@ -542,7 +564,7 @@ export default function App() {
               });
               return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
             }
-            return <code className={String(className)}>{txt}</code>;
+            return <code className={String(className)}>{children}</code>;
           },
         },
       }}
@@ -612,9 +634,9 @@ npm install mermaid
 ```
 
 ```jsx mdx:preview
-import React, { useState, useRef, useEffect } from "react";
-import ReactDOM from "react-dom";
+import React, { useState, useRef, useEffect, Fragment, useCallback } from "react";
 import MDEditor from "@uiw/react-md-editor";
+import { getCodeString } from 'rehype-rewrite';
 import mermaid from "mermaid";
 
 const mdMermaid = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. 
@@ -643,44 +665,37 @@ Bob-->>John: Jolly good!
 const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
 const Code = ({ inline, children = [], className, ...props }) => {
   const demoid = useRef(`dome${randomid()}`);
-  const code = getCode(children);
-  const demo = useRef(null);
+  const [container, setContainer] = useState(null);
+  const isMermaid = className && /^language-mermaid/.test(className.toLocaleLowerCase());
+  const code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';
   useEffect(() => {
-    if (demo.current) {
+    if (container && isMermaid) {
       try {
-        const str = mermaid.render(demoid.current, code, () => null, demo.current);
-        // @ts-ignore
-        demo.current.innerHTML = str;
+        const str = mermaid.render(demoid.current, code);
+        container.innerHTML = str;
       } catch (error) {
-        // @ts-ignore
-        demo.current.innerHTML = error;
+        container.innerHTML = error;
       }
     }
-  }, [code, demo]);
+  }, [container, isMermaid, code, demoid]);
+
+  const refElement = useCallback((node) => {
+    if (node !== null) {
+      setContainer(node);
+    }
+  }, []);
 
-  if (
-    typeof code === "string" && typeof className === "string" &&
-    /^language-mermaid/.test(className.toLocaleLowerCase())
-  ) {
+  if (isMermaid) {
     return (
-      <code ref={demo}>
+      <Fragment>
         <code id={demoid.current} style={{ display: "none" }} />
-      </code>
+        <code ref={refElement} data-name="mermaid" />
+      </Fragment>
     );
   }
-  return <code className={String(className)}>{children}</code>;
+  return <code>{children}</code>;
 };
 
-const getCode = (arr = []) => arr.map((dt) => {
-  if (typeof dt === "string") {
-    return dt;
-  }
-  if (dt.props && dt.props.children) {
-    return getCode(dt.props.children);
-  }
-  return false;
-}).filter(Boolean).join("");
-
 export default function App() {
   const [value, setValue] = useState(mdMermaid);
   return (
@@ -828,8 +843,8 @@ As always, thanks to our amazing contributors!
 <a href="https://github.com/avalero" title="Alberto Valero Gómez">
   <img src="https://avatars.githubusercontent.com/u/1442682?v=4" width="42;" alt="Alberto Valero Gómez"/>
 </a>
-<a href="https://github.com/alphacoma18" title="Alpha Coma">
-  <img src="https://avatars.githubusercontent.com/u/108984668?v=4" width="42;" alt="Alpha Coma"/>
+<a href="https://github.com/alphacoma18" title="Alpha Romer Coma">
+  <img src="https://avatars.githubusercontent.com/u/108984668?v=4" width="42;" alt="Alpha Romer Coma"/>
 </a>
 <a href="https://github.com/Exmirai" title="UniqueUlysees">
   <img src="https://avatars.githubusercontent.com/u/6436703?v=4" width="42;" alt="UniqueUlysees"/>
@@ -837,8 +852,8 @@ As always, thanks to our amazing contributors!
 <a href="https://github.com/nuragic" title="Andrea Puddu">
   <img src="https://avatars.githubusercontent.com/u/1586378?v=4" width="42;" alt="Andrea Puddu"/>
 </a>
-<a href="https://github.com/bramus" title="Bramus!">
-  <img src="https://avatars.githubusercontent.com/u/213073?v=4" width="42;" alt="Bramus!"/>
+<a href="https://github.com/bramus" title="Bramus">
+  <img src="https://avatars.githubusercontent.com/u/213073?v=4" width="42;" alt="Bramus"/>
 </a>
 <a href="https://github.com/CarleneCannon-Conner" title="Carlene Cannon-Conner">
   <img src="https://avatars.githubusercontent.com/u/1942791?v=4" width="42;" alt="Carlene Cannon-Conner"/>
@@ -867,6 +882,9 @@ As always, thanks to our amazing contributors!
 <a href="https://github.com/phillipb" title="Phillip Burch">
   <img src="https://avatars.githubusercontent.com/u/1482089?v=4" width="42;" alt="Phillip Burch"/>
 </a>
+<a href="https://github.com/RARgames" title="RAR">
+  <img src="https://avatars.githubusercontent.com/u/13639766?v=4" width="42;" alt="RAR"/>
+</a>
 <a href="https://github.com/toresbe" title="Tore Sinding Bekkedal">
   <img src="https://avatars.githubusercontent.com/u/1761606?v=4" width="42;" alt="Tore Sinding Bekkedal"/>
 </a>

package/dist/mdeditor.css

@@ -1288,7 +1288,9 @@ body[data-color-mode*='light'] {
   --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --md-editor-background-color: var(--color-canvas-default, #ffffff);
   --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
+  box-shadow: 0 0 0 1px #d0d7de, 0 0 0 #d0d7de, 0 1px 1px #d0d7de;
   box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
+  background-color: #ffffff;
   background-color: var(--md-editor-background-color);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   display: flex;