@uiw/react-md-editor 3.14.5 → 3.17.0

package/README.md

@@ -162,6 +162,34 @@ const title3 = {
   },
 };
 
+const title2 = {
+  name: 'title3',
+  keyCommand: 'title3',
+  render: (command, disabled, executeCommand) => {
+    return (
+      <button 
+        aria-label="Insert title3"
+        disabled={disabled}
+        onClick={(evn) => {
+          evn.stopPropagation();
+          executeCommand(command, command.groupName)
+        }}
+      >
+        <svg width="12" height="12" viewBox="0 0 520 520">
+          <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
+        </svg>
+      </button>
+    )
+  },
+  execute: (state, api) => {
+    let modifyText = `## ${state.selectedText}\n`;
+    if (!state.selectedText) {
+      modifyText = `## `;
+    }
+    api.replaceSelection(modifyText);
+  },
+}
+
 export default function App() {
   const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
@@ -171,7 +199,7 @@ export default function App() {
         onChange={setValue}
         commands={[
           // Custom Toolbars
-          title3,
+          title3, title2,
           commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
             name: 'title',
             groupName: 'title',
@@ -263,6 +291,44 @@ export default function App() {
 }
 ```
 
+re-render `toolbar` element.
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor, { commands } from '@uiw/react-md-editor';
+
+export default function App() {
+  const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
+  return (
+    <div className="container">
+      <MDEditor
+        value={value}
+        onChange={setValue}
+        preview="edit"
+        components={{
+          toolbar: (command, disabled, executeCommand) => {
+            if (command.keyCommand === 'code') {
+              return (
+                <button 
+                  aria-label="Insert code"
+                  disabled={disabled}
+                  onClick={(evn) => {
+                    evn.stopPropagation();
+                    executeCommand(command, command.groupName)
+                  }}
+                >
+                  Code
+                </button>
+              )
+            }
+          }
+        }}
+      />
+    </div>
+  );
+}
+```
+
 ### Preview Markdown
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-preview-markdown-vrucl?fontsize=14&hidenavigation=1&theme=dark)
@@ -564,15 +630,16 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 
 - `value: string`: The Markdown value.
 - `onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)`: Event handler for the `onChange` event.
-- `onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore)`: editor height change listener.
+- `onHeightChange?: ((value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore)`: editor height change listener.
 - `commands?: ICommand[]`: An array of [`ICommand`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L39-L57), which, each one, contain a [`commands`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L155-L180) property. If no commands are specified, the default will be used. Commands are explained in more details below.
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.
 - `autoFocus?: true`: Can be used to make `Markdown Editor` focus itself on initialization.
 - `previewOptions?: ReactMarkdown.ReactMarkdownProps`: This is reset [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview/tree/e6e8462d9a5c64a7045e25adcb4928095d74ca37#options-props) settings.
 - `textareaProps?: TextareaHTMLAttributes`: Set the `textarea` related props.
-- `renderTextarea?: (props, opts) => JSX.Element;`: Use div to replace TextArea or re-render TextArea. [#193](https://github.com/uiwjs/react-md-editor/issues/193)
-- `height?: number=200`: The height of the editor.
+- ~~`renderTextarea?: (props, opts) => JSX.Element;`~~: `@deprecated` Please use ~~`renderTextarea`~~ -> `components`. Use div to replace TextArea or re-render TextArea. [#193](https://github.com/uiwjs/react-md-editor/issues/193)
+- `components`: re-render textarea/toolbar element. [#419](https://github.com/uiwjs/react-md-editor/issues/419)
+- `height?: number=200`: The height of the editor. ️⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
 - `visibleDragbar?: boolean=true`: Show drag and drop tool. Set the height of the editor.
 - `highlightEnable?: boolean=true`: Disable editing area code highlighting. The value is `false`, which increases the editing speed.
 - `fullscreen?: boolean=false`: Show markdown preview.

package/dist/mdeditor.css

@@ -1325,6 +1325,7 @@ body[data-color-mode*='light'] {
   left: 0;
   right: 0;
   bottom: 0;
+  height: 100% !important;
 }
 .w-md-editor-fullscreen .w-md-editor-content {
   height: 100%;