@uiw/react-md-editor 3.17.0 → 3.18.0

package/README.md

@@ -329,6 +329,19 @@ export default function App() {
 }
 ```
 
+### 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)
@@ -566,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
@@ -639,6 +654,9 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `textareaProps?: TextareaHTMLAttributes`: Set the `textarea` related props.
 - ~~`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)
+    - `textarea` Use div to replace TextArea or re-render TextArea
+    - `toolbar` Override the default command element. _`toolbar`_ < _`command[].render`_
+    - `preview` Custom markdown preview. [#429](https://github.com/uiwjs/react-md-editor/issues/429)
 - `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;
@@ -866,7 +866,8 @@ body[data-color-mode*='light'] {
 .wmde-markdown .task-list-item .handle {
   display: none;
 }
-.wmde-markdown .task-list-item-checkbox {
+.wmde-markdown .task-list-item-checkbox,
+.wmde-markdown .contains-task-list input[type='checkbox'] {
   margin: 0 0.2em 0.25em -1.6em;
   vertical-align: middle;
 }
@@ -1166,7 +1167,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 +1175,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 +1187,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 +1247,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 +1272,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%;