@uiw/react-md-editor 3.14.4 → 3.16.0

package/README.md

@@ -77,6 +77,39 @@ export default function App() {
 }
 ```
 
+### Special Markdown syntax
+
+**Supports for CSS Style**
+
+Use HTML comments `<!--rehype:xxx-->`<!--rehype:style=color: red; font-weight: bold;--> to let Markdown support style customization.
+
+```markdown
+## Title
+<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->
+
+Markdown Supports **Style**<!--rehype:style=color: red;-->
+```
+
+**Ignore content display via HTML comments**
+
+Shown in GitHub readme, excluded in HTML.
+
+```markdown
+# Hello World
+
+<!--rehype:ignore:start-->Hello World<!--rehype:ignore:end-->
+
+Good!
+```
+
+Output:
+
+```html
+<h1>Hello World</h1>
+
+<p>Good!</p>
+```
+
 ### Security
 
 Please note markdown needs to be sanitized if you do not **completely trust** your authors.
@@ -129,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 (
@@ -138,7 +199,61 @@ 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',
+            buttonProps: { 'aria-label': 'Insert title'}
+          }),
+          commands.divider,
+          commands.group([], {
+            name: 'update',
+            groupName: 'update',
+            icon: (
+              <svg viewBox="0 0 1024 1024" width="12" height="12">
+                <path fill="currentColor" d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z" />
+              </svg>
+            ),
+            children: ({ close, execute, getState, textApi }) => {
+              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={() => close()}>Close</button>
+                  <button type="button" onClick={() => execute()}>Execute</button>
+                </div>
+              );
+            },
+            execute: (state, api)  => {
+              console.log('>>>>>>update>>>>>', state)
+            },
+            buttonProps: { 'aria-label': 'Insert title'}
+          }),
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+Customize the toolbar with `commands` and `extraCommands` props.
+
+```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"
+        commands={[
+          commands.codeEdit, commands.codePreview
+        ]}
+        extraCommands={[
           commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
             name: 'title',
             groupName: 'title',
@@ -168,6 +283,7 @@ export default function App() {
             },
             buttonProps: { 'aria-label': 'Insert title'}
           }),
+          commands.divider, commands.fullscreen
         ]}
       />
     </div>
@@ -476,7 +592,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 
 - `value: string`: The Markdown value.
 - `onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)`: Event handler for the `onChange` event.
-- `onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore)`: editor height change listener.
+- `onHeightChange?: ((value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore)`: editor height change listener.
 - `commands?: ICommand[]`: An array of [`ICommand`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L39-L57), which, each one, contain a [`commands`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L155-L180) property. If no commands are specified, the default will be used. Commands are explained in more details below.
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.
@@ -484,7 +600,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `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)
-- `height?: number=200`: The height of the editor.
+- `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.
 - `fullscreen?: boolean=false`: Show markdown preview.

package/dist/mdeditor.css

@@ -496,10 +496,6 @@ body[data-color-mode*='light'] {
   color: var(--color-fg-subtle);
   opacity: 1;
 }
-.wmde-markdown :-ms-input-placeholder {
-  color: var(--color-fg-subtle);
-  opacity: 1;
-}
 .wmde-markdown ::placeholder {
   color: var(--color-fg-subtle);
   opacity: 1;
@@ -1177,7 +1173,6 @@ body[data-color-mode*='light'] {
   border-radius: 3px 3px 0 0;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .w-md-editor-toolbar.bottom {
@@ -1253,7 +1248,6 @@ body[data-color-mode*='light'] {
   border-radius: 0 0 3px 0;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .w-md-editor-bar svg {
@@ -1331,6 +1325,7 @@ body[data-color-mode*='light'] {
   left: 0;
   right: 0;
   bottom: 0;
+  height: 100% !important;
 }
 .w-md-editor-fullscreen .w-md-editor-content {
   height: 100%;