@uiw/react-md-editor 3.20.10 → 3.21.0

package/README.md

@@ -141,7 +141,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-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
 
 ```jsx mdx:preview
-import React from "react";
+import React, { useState } from "react";
 import MDEditor, { commands } from '@uiw/react-md-editor';
 
 const title3 = {
@@ -190,6 +190,47 @@ const title2 = {
   },
 }
 
+function SubChildren({ close, execute, getState, textApi, dispatch }) {
+  const [value, setValue] = useState('')
+  const insert = () => {
+    console.log('value:::', value)
+    textApi.replaceSelection(value)
+  }
+  return (
+    <div style={{ width: 120, padding: 10 }}>
+      <div>My Custom Toolbar</div>
+      <input type="text" onChange={(e) => setValue(e.target.value)} />
+      <button
+        type="button"
+        onClick={() => {
+          dispatch({ $value: '~~~~~~' })
+          console.log('> execute: >>>>>', getState())
+        }}
+      >
+        State
+      </button>
+      <button type="button" onClick={insert}>Insert</button>
+      <button type="button" onClick={() => close()}>Close</button>
+      <button type="button" onClick={() => execute()}>Execute</button>
+    </div>
+  );
+}
+
+const subChild = {
+  name: 'update',
+  groupName: 'update',
+  icon: (
+    <svg viewBox="0 0 1024 1024" width="12" height="12">
+      <path fill="currentColor" d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z" />
+    </svg>
+  ),
+  children: (props) => <SubChildren {...props} />,
+  execute: (state, api)  => {
+    console.log('>>>>>>update>>>>>', state)
+  },
+  buttonProps: { 'aria-label': 'Insert title'}
+}
+
 export default function App() {
   const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
@@ -206,29 +247,7 @@ export default function App() {
             buttonProps: { 'aria-label': 'Insert title'}
           }),
           commands.divider,
-          commands.group([], {
-            name: 'update',
-            groupName: 'update',
-            icon: (
-              <svg viewBox="0 0 1024 1024" width="12" height="12">
-                <path fill="currentColor" d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z" />
-              </svg>
-            ),
-            children: ({ close, execute, getState, textApi }) => {
-              return (
-                <div style={{ width: 120, padding: 10 }}>
-                  <div>My Custom Toolbar</div>
-                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState())}>State</button>
-                  <button type="button" onClick={() => close()}>Close</button>
-                  <button type="button" onClick={() => execute()}>Execute</button>
-                </div>
-              );
-            },
-            execute: (state, api)  => {
-              console.log('>>>>>>update>>>>>', state)
-            },
-            buttonProps: { 'aria-label': 'Insert title'}
-          }),
+          commands.group([], subChild),
         ]}
       />
     </div>
@@ -648,6 +667,7 @@ export default function App() {
 
 Use examples in [nextjs](https://nextjs.org/). [`#52`](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341) [`#224`](https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-901112079)
 
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/nextjs-example-react-md-editor-https-github-com-uiwjs-react-md-editor-issues-516-1z56px?fontsize=14&hidenavigation=1&theme=dark)
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark) [![Open in StackBlitz](https://img.shields.io/badge/Open%20In-StackBlitz-green)](https://stackblitz.com/edit/nextjs-react-md-editor?embed=1&file=pages/index.js&hideExplorer=1&hideNavigation=1&theme=dark)
 [![#52](https://img.shields.io/github/issues/detail/state/uiwjs/react-md-editor/52)](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341)
 [![#224](https://img.shields.io/github/issues/detail/state/uiwjs/react-md-editor/224)](https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-901112079)