@uiw/react-md-editor 3.18.0 → 3.18.2

package/README.md

@@ -163,15 +163,15 @@ const title3 = {
 };
 
 const title2 = {
-  name: 'title3',
-  keyCommand: 'title3',
+  name: 'title2',
+  keyCommand: 'title2',
   render: (command, disabled, executeCommand) => {
     return (
       <button 
-        aria-label="Insert title3"
+        aria-label="Insert title2"
         disabled={disabled}
         onClick={(evn) => {
-          evn.stopPropagation();
+          // evn.stopPropagation();
           executeCommand(command, command.groupName)
         }}
       >
@@ -329,6 +329,72 @@ export default function App() {
 }
 ```
 
+Custom Preview Command Tool
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-https-github-com-uiwjs-react-md-editor-issues-433-9mwuob?fontsize=14&hidenavigation=1&theme=dark)
+
+```jsx mdx:preview
+import React, { useContext } from "react";
+import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
+
+const Button = () => {
+  const { preview, dispatch } = useContext(EditorContext);
+  const click = () => {
+    dispatch({
+      preview: preview === "edit" ? "preview" : "edit"
+    });
+  };
+  if (preview === "edit") {
+    return (
+      <svg width="12" height="12" viewBox="0 0 520 520" onClick={click}>
+        <polygon
+          fill="currentColor"
+          points="0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293"
+        />
+        <polygon
+          fill="currentColor"
+          points="429 71.293 520 71.293 520 122 481 123 481 396 520 396 520 449.707 429 449.413"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg width="12" height="12" viewBox="0 0 520 520" onClick={click}>
+      <polygon
+        fill="currentColor"
+        points="0 71.293 0 122 38.023 123 38.023 398 0 397 0 449.707 91.023 450.413 91.023 72.293"
+      />
+      <polygon
+        fill="currentColor"
+        points="148.023 72.293 520 71.293 520 122 200.023 124 200.023 397 520 396 520 449.707 148.023 450.413"
+      />
+    </svg>
+  );
+};
+
+const codePreview = {
+  name: "preview",
+  keyCommand: "preview",
+  value: "preview",
+  icon: <Button />
+};
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**");
+  return (
+    <div className="container">
+      <div>The system automatically sets the theme</div>
+      <MDEditor
+        value={value}
+        preview="edit"
+        extraCommands={[codePreview, commands.fullscreen]}
+        onChange={(val) => setValue(val)}
+      />
+    </div>
+  );
+}
+```
+
 ### Editor Font Size
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark)
@@ -433,7 +499,7 @@ export default function App() {
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-text-to-images-ijqmx?fontsize=14&hidenavigation=1&theme=dark)
 
 ```tsx mdx:preview
-import React from "react";
+import React, { useState } from "react";
 import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
 import domToImage from "dom-to-image";
 
@@ -460,11 +526,14 @@ const textToImage: ICommand = {
 };
 
 export default function App() {
+  const [value, setValue] = useState('**Hello world!!!**');
+  console.log('value::', value)
   return (
     <div className="container">
       <MDEditor
         className="gooooooooo"
-        value="**Hello world!!!**"
+        onChange={(newValue = "") => setValue(newValue)}
+        value={value}
         commands={[
           textToImage,
           commands.divider
@@ -573,8 +642,6 @@ export default function App() {
     />
   );
 }
-
-ReactDOM.render(<App />, document.getElementById("container"));
 ```
 
 ### Support Nextjs

package/dist/mdeditor.css

@@ -1276,7 +1276,6 @@ body[data-color-mode*='light'] {
   flex-direction: column;
 }
 .w-md-editor-toolbar {
-  height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
 }