@uiw/react-md-editor 3.13.0 → 3.14.2

package/README.md

@@ -1,3 +1,4 @@
+<!--rehype:ignore:start-->
 <p align="center">
   <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/README.md">
     <img alt="react-md-editor logo" src="https://user-images.githubusercontent.com/1680273/146292033-0e5e57fc-6f3e-4032-9fa6-0de05f239e36.png">
@@ -32,7 +33,7 @@
   </a>
 </p>
 
-<!--dividing-->
+<!--rehype:ignore:end-->
 
 A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on `textarea` encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc.
 
@@ -58,7 +59,7 @@ npm i @uiw/react-md-editor
 [![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-md-editor/)
 [![Open in Gitee gh-pages](https://img.shields.io/badge/Open%20In-Gitee%20gh--pages-blue?logo=web)](https://uiw.gitee.io/react-md-editor/)
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import MDEditor from '@uiw/react-md-editor';
 
@@ -70,7 +71,7 @@ export default function App() {
         value={value}
         onChange={setValue}
       />
-      <MDEditor.Markdown source={value} />
+      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
     </div>
   );
 }
@@ -81,13 +82,13 @@ export default function App() {
 Please note markdown needs to be sanitized if you do not **completely trust** your authors.
 Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin.
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import MDEditor from '@uiw/react-md-editor';
 import rehypeSanitize from "rehype-sanitize";
 
 export default function App() {
-  const [value, setValue] = React.useState("**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>");
+  const [value, setValue] = React.useState(`**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>`);
   return (
     <div className="container">
       <MDEditor
@@ -97,10 +98,6 @@ export default function App() {
           rehypePlugins: [[rehypeSanitize]],
         }}
       />
-      <MDEditor.Markdown 
-        source={value} 
-        rehypePlugins={[[rehypeSanitize]]}
-      />
     </div>
   );
 }
@@ -110,12 +107,11 @@ export default function App() {
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
 
-```tsx
+```jsx mdx:preview
 import React from "react";
-import ReactDOM from "react-dom";
-import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from '@uiw/react-md-editor';
+import MDEditor, { commands } from '@uiw/react-md-editor';
 
-const title3: ICommand = {
+const title3 = {
   name: 'title3',
   keyCommand: 'title3',
   buttonProps: { 'aria-label': 'Insert title3' },
@@ -124,7 +120,7 @@ const title3: ICommand = {
       <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>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state, api) => {
     let modifyText = `### ${state.selectedText}\n`;
     if (!state.selectedText) {
       modifyText = `### `;
@@ -134,14 +130,12 @@ const title3: ICommand = {
 };
 
 export default function App() {
-  const [value, setValue] = React.useState("**Hello world!!!**");
+  const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
     <div className="container">
       <MDEditor
-        value="Hello Markdown!"
-        onChange={(val) => {
-          setValue(val!);
-        }}
+        value={value}
+        onChange={setValue}
         commands={[
           // Custom Toolbars
           title3,
@@ -163,13 +157,13 @@ export default function App() {
               return (
                 <div style={{ width: 120, padding: 10 }}>
                   <div>My Custom Toolbar</div>
-                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState!())}>State</button>
+                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState())}>State</button>
                   <button type="button" onClick={() => close()}>Close</button>
                   <button type="button" onClick={() => execute()}>Execute</button>
                 </div>
               );
             },
-            execute: (state: TextState, api: TextAreaTextApi)  => {
+            execute: (state, api)  => {
               console.log('>>>>>>update>>>>>', state)
             },
             buttonProps: { 'aria-label': 'Insert title'}
@@ -185,7 +179,7 @@ export default function App() {
 
 [![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)
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
@@ -207,16 +201,17 @@ 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
 ```
 
-```jsx
+```jsx mdx:preview
 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 +241,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>;
           },
@@ -269,7 +265,7 @@ export default function App() {
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-text-to-images-ijqmx?fontsize=14&hidenavigation=1&theme=dark)
 
-```jsx
+```tsx mdx:preview
 import React from "react";
 import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
 import domToImage from "dom-to-image";
@@ -284,7 +280,7 @@ const textToImage: ICommand = {
     </svg>
   ),
   execute: (state: TextState, api: TextAreaTextApi) => {
-    const dom = document.getElementsByClassName("w-md-editor")[0];
+    const dom = document.getElementsByClassName("gooooooooo")[0];
     if (dom) {
       domToImage.toJpeg(dom, {}).then((dataUrl) => {
         const link = document.createElement("a");
@@ -300,6 +296,7 @@ export default function App() {
   return (
     <div className="container">
       <MDEditor
+        className="gooooooooo"
         value="**Hello world!!!**"
         commands={[
           textToImage,
@@ -321,7 +318,7 @@ Using [mermaid](https://github.com/mermaid-js/mermaid) to generation of diagram
 npm install mermaid
 ```
 
-```jsx
+```jsx mdx:preview
 import React, { useState, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import MDEditor from "@uiw/react-md-editor";
@@ -351,7 +348,7 @@ Bob-->>John: Jolly good!
 `;
 
 const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
-const Code = ({ inline, children = [], className, ...props }: any) => {
+const Code = ({ inline, children = [], className, ...props }) => {
   const demoid = useRef(`dome${randomid()}`);
   const code = getCode(children);
   const demo = useRef(null);
@@ -488,13 +485,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

@@ -96,6 +96,7 @@
 }
 [data-color-mode*='dark'] .wmde-markdown,
 [data-color-mode*='dark'] .wmde-markdown-var,
+.wmde-markdown[data-color-mode*='dark'],
 body[data-color-mode*='dark'] {
   color-scheme: dark;
   --color-prettylights-syntax-comment: #8b949e;
@@ -143,6 +144,7 @@ body[data-color-mode*='dark'] {
 }
 [data-color-mode*='light'] .wmde-markdown,
 [data-color-mode*='light'] .wmde-markdown-var,
+.wmde-markdown[data-color-mode*='light'],
 body[data-color-mode*='light'] {
   color-scheme: light;
   --color-prettylights-syntax-comment: #6e7781;
@@ -351,7 +353,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 +388,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;
@@ -878,8 +870,7 @@ body[data-color-mode*='light'] {
 .wmde-markdown .task-list-item .handle {
   display: none;
 }
-.wmde-markdown .task-list-item-checkbox,
-.wmde-markdown input[type='checkbox'] {
+.wmde-markdown .task-list-item-checkbox {
   margin: 0 0.2em 0.25em -1.6em;
   vertical-align: middle;
 }
@@ -1027,10 +1018,8 @@ body[data-color-mode*='light'] {
   margin: 0;
   font-size: 14px;
   line-height: 18px;
-  -webkit-font-feature-settings: "liga", "clig";
-          font-feature-settings: "liga", "clig";
-  -webkit-font-variant-ligatures: common-ligatures;
-          font-variant-ligatures: common-ligatures;
+  font-feature-settings: "liga", "clig";
+  font-variant-ligatures: common-ligatures;
 }
 .w-md-editor-text-pre,
 .w-md-editor-text-input,
@@ -1043,14 +1032,14 @@ body[data-color-mode*='light'] {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
-  -webkit-font-feature-settings: inherit;
-          font-feature-settings: inherit;
-  -webkit-font-variant-ligatures: inherit;
-          font-variant-ligatures: inherit;
+  font-feature-settings: inherit;
+  font-variant-ligatures: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
   line-height: inherit;
-  tab-size: inherit;
+  -moz-tab-size: inherit;
+    -o-tab-size: inherit;
+       tab-size: inherit;
   text-indent: inherit;
   text-rendering: inherit;
   text-transform: inherit;
@@ -1112,6 +1101,10 @@ body[data-color-mode*='light'] {
   .w-md-editor-text-input {
     color: transparent !important;
   }
+  .w-md-editor-text-input::-moz-selection {
+    background-color: #accef7 !important;
+    color: transparent !important;
+  }
   .w-md-editor-text-input::selection {
     background-color: #accef7 !important;
     color: transparent !important;
@@ -1183,6 +1176,7 @@ body[data-color-mode*='light'] {
   align-items: center;
   border-radius: 3px 3px 0 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -1258,6 +1252,7 @@ body[data-color-mode*='light'] {
   height: 10px;
   border-radius: 0 0 3px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -1288,6 +1283,10 @@ body[data-color-mode*='light'] {
   width: 50%;
   height: 100%;
 }
+.w-md-editor-text-pre > code {
+  word-break: break-word !important;
+  white-space: pre-wrap !important;
+}
 .w-md-editor-preview {
   width: 50%;
   box-sizing: border-box;