@uiw/react-md-editor 3.15.0 → 3.17.1

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)
@@ -571,7 +637,8 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `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)
+- ~~`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.

package/dist/mdeditor.css

@@ -278,12 +278,12 @@ body[data-color-mode*='light'] {
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
+  border: 0;
   border-bottom: 1px solid var(--color-border-muted);
   height: 0.25em;
   padding: 0;
   margin: 24px 0;
   background-color: var(--color-border-default);
-  border: 0;
 }
 .wmde-markdown input {
   font: inherit;
@@ -1166,7 +1166,7 @@ body[data-color-mode*='light'] {
 .w-md-editor-toolbar {
   border-bottom: 1px solid var(--color-border-default);
   background-color: var(--color-canvas-default);
-  padding: 0 5px 0 5px;
+  padding: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1174,6 +1174,7 @@ body[data-color-mode*='light'] {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  flex-wrap: wrap;
 }
 .w-md-editor-toolbar.bottom {
   border-bottom: 0px;
@@ -1240,6 +1241,7 @@ body[data-color-mode*='light'] {
   position: absolute;
   cursor: s-resize;
   right: 0;
+  bottom: 0;
   margin-top: -11px;
   margin-right: 0;
   width: 14px;
@@ -1264,14 +1266,22 @@ body[data-color-mode*='light'] {
   box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
   background-color: var(--color-canvas-default);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
 }
-.w-md-editor .copied {
-  display: none !important;
+.w-md-editor-toolbar {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 .w-md-editor-content {
+  height: 100%;
+  overflow: auto;
   position: relative;
   border-radius: 0 0 3px 0;
-  height: calc(100% - 39.1px);
+}
+.w-md-editor .copied {
+  display: none !important;
 }
 .w-md-editor-input {
   width: 50%;