@uiw/react-md-editor 3.16.0 → 3.17.2

package/README.md

@@ -291,6 +291,57 @@ 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>
+  );
+}
+```
+
+### 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)
+[![#425](https://img.shields.io/github/issues/detail/state/uiwjs/react-md-editor/425)](https://github.com/uiwjs/react-md-editor/issues/425#issuecomment-1209514536)
+
+```css
+.w-md-editor-text-pre > code,
+.w-md-editor-text-input {
+  font-size: 23px !important;
+  line-height: 24px !important;
+}
+```
+
 ### 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)
@@ -528,9 +579,11 @@ ReactDOM.render(<App />, document.getElementById("container"));
 
 ### Support Nextjs
 
-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)
+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-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)
 
 ```bash
 npm install next-remove-imports
@@ -599,7 +652,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 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;
@@ -1185,11 +1186,16 @@ body[data-color-mode*='light'] {
   margin: 0;
   padding: 0;
   list-style: none;
+  line-height: normal;
+  line-height: initial;
 }
 .w-md-editor-toolbar li {
   display: inline-block;
   font-size: 14px;
 }
+.w-md-editor-toolbar li + li {
+  margin: 0;
+}
 .w-md-editor-toolbar li > button {
   border: none;
   height: 20px;
@@ -1240,6 +1246,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 +1271,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%;