@uiw/react-md-editor 3.12.2 → 3.14.0

package/README.md

@@ -207,7 +207,7 @@ The following example is preview in [CodeSandbox](https://codesandbox.io/s/markd
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/headless-frog-em8yg?fontsize=14&hidenavigation=1&theme=dark)
 
-> ⚠️ Upgrade v2 to v3 [d025430](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/website/ExmapleKaTeX.tsx#L1-L59)
+> ⚠️ Upgrade v2 to v3 [d025430](https://github.com/uiwjs/react-md-editor/blob/7b9f11ab689a7ea288df3e82c26f4f0e9a53d271/website/ExmapleKaTeX.tsx#L1-L63)
 
 ```bash
 npm install katex
@@ -217,6 +217,7 @@ npm install katex
 import React from "react";
 import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
+import { getCodeString } from 'rehype-rewrite';
 import katex from 'katex';
 import 'katex/dist/katex.css';
 
@@ -246,15 +247,16 @@ export default function App() {
               }
               return <code>{txt}</code>;
             }
+            const code = props.node && props.node.children ? getCodeString(props.node.children) : txt;
             if (
-              typeof txt === 'string' &&
+              typeof code === 'string' &&
               typeof className === 'string' &&
               /^language-katex/.test(className.toLocaleLowerCase())
             ) {
-              const html = katex.renderToString(txt, {
+              const html = katex.renderToString(code, {
                 throwOnError: false,
               });
-              return <code dangerouslySetInnerHTML={{ __html: html }} />;
+              return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
             }
             return <code className={String(className)}>{txt}</code>;
           },
@@ -488,13 +490,13 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `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.
-- `visiableDragbar?: boolean=true`: Show drag and drop tool. Set the height of the editor.
+- `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.
 - `overflow?: boolean=true`: Disable `fullscreen` setting body styles
 - `preview?: 'live' | 'edit' | 'preview'`: Default value `live`, Show markdown preview.
-- `maxHeight?: number=1200`: Maximum drag height. The `visiableDragbar=true` value is valid.
-- `minHeights?: number=100`: Minimum drag height. The `visiableDragbar=true` value is valid.
+- `maxHeight?: number=1200`: Maximum drag height. The `visibleDragbar=true` value is valid.
+- `minHeights?: number=100`: Minimum drag height. The `visibleDragbar=true` value is valid.
 - `tabSize?: number=2`: The number of characters to insert when pressing tab key. Default `2` spaces.
 - `defaultTabEnable?: boolean=false`: If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element. 
 - `hideToolbar?: boolean=false`: Option to hide the tool bar.

package/dist/mdeditor.css

@@ -351,7 +351,6 @@ body[data-color-mode*='light'] {
   width: -webkit-max-content;
   width: max-content;
   max-width: 100%;
-  overflow: auto;
 }
 .wmde-markdown td,
 .wmde-markdown th {
@@ -387,15 +386,6 @@ body[data-color-mode*='light'] {
   font-weight: 600;
   line-height: 1.25;
 }
-.wmde-markdown table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  display: block;
-  width: -webkit-max-content;
-  width: max-content;
-  max-width: 100%;
-  overflow: auto;
-}
 .wmde-markdown td,
 .wmde-markdown th {
   padding: 0;
@@ -1067,8 +1057,15 @@ body[data-color-mode*='light'] {
 }
 .w-md-editor-text-pre {
   position: relative;
-  margin: 0px;
+  margin: 0px !important;
   pointer-events: none;
+  background-color: transparent !important;
+}
+.w-md-editor-text-pre > code {
+  padding: 0 !important;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+  font-size: 14px !important;
+  line-height: 18px !important;
 }
 .w-md-editor-text-input {
   position: absolute;
@@ -1179,6 +1176,11 @@ body[data-color-mode*='light'] {
       -ms-user-select: none;
           user-select: none;
 }
+.w-md-editor-toolbar.bottom {
+  border-bottom: 0px;
+  border-top: 1px solid var(--color-border-default);
+  border-radius: 0 0 3px 3px;
+}
 .w-md-editor-toolbar ul,
 .w-md-editor-toolbar li {
   margin: 0;
@@ -1286,6 +1288,9 @@ body[data-color-mode*='light'] {
   top: 0;
   right: 0;
   bottom: 0;
+  border-radius: 0 0 5px 0;
+  display: flex;
+  flex-direction: column;
 }
 .w-md-editor-preview .anchor {
   display: none;