@uiw/react-md-editor 3.23.6 → 3.24.0

package/README.md

@@ -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>
@@ -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>;
           },
         },
       }}
@@ -830,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"/>
@@ -860,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;