@uiw/react-md-editor 4.0.7 → 4.0.9

package/README.md

@@ -1,3 +1,39 @@
+<div markdown="1">
+  <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
+  <br>
+  <a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
+  <a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
+  <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
+  <a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
+</div>
+<hr>
+
+
 <!--rehype:ignore:start-->
 <p align="center">
   <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/README.md">
@@ -84,6 +120,49 @@ export default function App() {
 }
 ```
 
+### Headless Mode
+
+The package exposes the necessary utilities to build a headless markdown editor with your own UI. This example creates a simple textarea that supports markdown keyboard shortcuts and correct handling of newlines.
+
+```jsx mdx:preview
+import React from "react";
+import { 
+  handleKeyDown, 
+  shortcuts, 
+  TextAreaCommandOrchestrator,
+  getCommands,
+} from '@uiw/react-md-editor';
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**");
+  const textareaRef = React.useRef(null);
+  const orchestratorRef = React.useRef(null);
+  
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);
+    }
+  }, []);
+
+  const onKeyDown = (e) => {
+    handleKeyDown(e, 2, false);
+    if (orchestratorRef.current) {
+      shortcuts(e, getCommands(), orchestratorRef.current);
+    }
+  };
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={onKeyDown}
+      style={{ width: '100%', height: 200, padding: 10 }}
+    />
+  );
+}
+```
+
 ### Special Markdown syntax
 
 **Supports for CSS Style**
@@ -552,6 +631,27 @@ export default function App() {
 }
 ```
 
+Set to support editor only
+
+```jsx mdx:preview
+import React, { useContext } from "react";
+import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**");
+  return (
+    <div className="container">
+      <MDEditor
+        value={value}
+        preview="edit"
+        extraCommands={[commands.fullscreen]}
+        onChange={(val) => setValue(val)}
+      />
+    </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)
@@ -746,7 +846,7 @@ export default function App() {
 
 ```tsx mdx:preview
 import React, { useState } from "react";
-import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
+import MDEditor, { commands, type ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
 import domToImage from "dom-to-image";
 
 const textToImage: ICommand = {
@@ -1048,12 +1148,14 @@ As always, thanks to our amazing contributors!
 <a href="https://github.com/peterj" title="Peter Jausovec"><img src="https://avatars.githubusercontent.com/u/11080940?v=4" width="42;" alt="Peter Jausovec"/></a>
 <a href="https://github.com/phillipb" title="Phillip Burch"><img src="https://avatars.githubusercontent.com/u/1482089?v=4" width="42;" alt="Phillip Burch"/></a>
 <a href="https://github.com/psycho-baller" title="Rami Maalouf"><img src="https://avatars.githubusercontent.com/u/81759594?v=4" width="42;" alt="Rami Maalouf"/></a>
+<a href="https://github.com/Stopa" title="Stepan Bolotnikov"><img src="https://avatars.githubusercontent.com/u/408256?v=4" width="42;" alt="Stepan Bolotnikov"/></a>
 <a href="https://github.com/toresbe" title="Tore Sinding Bekkedal"><img src="https://avatars.githubusercontent.com/u/1761606?v=4" width="42;" alt="Tore Sinding Bekkedal"/></a>
 <a href="https://github.com/valenfv" title="Valentin"><img src="https://avatars.githubusercontent.com/u/34139820?v=4" width="42;" alt="Valentin"/></a>
 <a href="https://github.com/jmtes" title="juno tesoro"><img src="https://avatars.githubusercontent.com/u/38450133?v=4" width="42;" alt="juno tesoro"/></a>
 <a href="https://github.com/juspky" title="juspky"><img src="https://avatars.githubusercontent.com/u/11074890?v=4" width="42;" alt="juspky"/></a>
 <a href="https://github.com/ryicoh" title="ryicoh"><img src="https://avatars.githubusercontent.com/u/37844673?v=4" width="42;" alt="ryicoh"/></a>
-<a href="https://github.com/wj0990" title="wangjie"><img src="https://avatars.githubusercontent.com/u/8792016?v=4" width="42;" alt="wangjie"/></a><!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT-END-->
+<a href="https://github.com/wj0990" title="wangjie"><img src="https://avatars.githubusercontent.com/u/8792016?v=4" width="42;" alt="wangjie"/></a>
+<a href="https://github.com/xiaohuoni" title="聪小陈"><img src="https://avatars.githubusercontent.com/u/11746742?v=4" width="42;" alt="聪小陈"/></a><!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT-END-->
 
 Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
 

package/commands.d.ts

@@ -14,13 +14,13 @@ declare module '@uiw/react-md-editor/commands' {
   import { codeEdit, codeLive, codePreview } from '@uiw/react-md-editor/esm/commands/preview';
   import { quote } from '@uiw/react-md-editor/esm/commands/quote';
   import { strikethrough } from '@uiw/react-md-editor/esm/commands/strikeThrough';
-  import { title } from '@uiw/react-md-editor/esm/commands/title';
-  import { title1 } from '@uiw/react-md-editor/esm/commands/title1';
-  import { title2 } from '@uiw/react-md-editor/esm/commands/title2';
-  import { title3 } from '@uiw/react-md-editor/esm/commands/title3';
-  import { title4 } from '@uiw/react-md-editor/esm/commands/title4';
-  import { title5 } from '@uiw/react-md-editor/esm/commands/title5';
-  import { title6 } from '@uiw/react-md-editor/esm/commands/title6';
+  import { title, heading } from '@uiw/react-md-editor/esm/commands/title';
+  import { title1, heading1 } from '@uiw/react-md-editor/esm/commands/title1';
+  import { title2, heading2 } from '@uiw/react-md-editor/esm/commands/title2';
+  import { title3, heading3 } from '@uiw/react-md-editor/esm/commands/title3';
+  import { title4, heading4 } from '@uiw/react-md-editor/esm/commands/title4';
+  import { title5, heading5 } from '@uiw/react-md-editor/esm/commands/title5';
+  import { title6, heading6 } from '@uiw/react-md-editor/esm/commands/title6';
   import { table } from '@uiw/react-md-editor/esm/commands/table';
   import { issue } from '@uiw/react-md-editor/esm/commands/issue';
   import { help } from '@uiw/react-md-editor/esm/commands/help';
@@ -117,6 +117,13 @@ declare module '@uiw/react-md-editor/commands' {
     title4,
     title5,
     title6,
+    heading,
+    heading1,
+    heading2,
+    heading3,
+    heading4,
+    heading5,
+    heading6,
     bold,
     codeBlock,
     comment,

package/dist/mdeditor.css

@@ -523,7 +523,7 @@ body[data-color-mode*='light'] {
 .wmde-markdown input::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
-  appearance: none;
+          appearance: none;
 }
 .wmde-markdown [data-catalyst] {
   display: block;