@uiw/react-md-editor 4.0.11 → 4.1.1

package/README.md

@@ -1,36 +1,56 @@
+<div align="center" markdown="1">
+  <sup>Special thanks to:</sup>
+  <br>
+  <br>
+
+  <a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8">
+    <img alt="SubList" width="400" src="https://jaywcjlove.github.io/sponsor/SubList.jpg">
+  </a>
+  <br>
+  <a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8">
+    SubList - Bill Reminder & Renewal Alerts
+  </a>
+  <br><br>
+
+</div>
+<hr>
+
 <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/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
-  <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>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6766860898" title="Zipora: Zip/RAR/7Z Unarchiver"><img alt="Zipora: Zip/RAR/7Z Unarchiver" height="52" src="https://wangchujiang.com/appicon/zipora.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" src="https://wangchujiang.com/appicon/scap.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" src="https://wangchujiang.com/appicon/screen-test.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="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" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="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" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6737160756" title="Menuist for macOS"><img alt="Menuist" height="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670696072&platform=mac" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6503953628&platform=mac" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6471227008&platform=mac" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479819388&platform=mac" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479194014&platform=mac" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478511402&platform=mac" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
+  <a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
 </div>
 <hr>
 
@@ -43,8 +63,11 @@
 </p>
 
 <p align="center">
-  <a href="https://jaywcjlove.github.io/#/sponsor" target="__blank">
-    <img alt="Buy me a coffee" src="https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee">
+  <a href="https://jaywcjlove.github.io/#/sponsor" title="Buy me a coffee">
+    <img src="https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black" alt="Buy me a coffee">
+  </a>
+  <a href="https://x.com/jaywcjlove" title="Follow On X">
+    <img src="https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white" alt="Follow On X">
   </a>
   <a href="https://www.npmjs.com/package/@uiw/react-md-editor" target="__blank">
     <img alt="Downloads" src="https://img.shields.io/npm/dm/@uiw/react-md-editor.svg?style=flat">
@@ -251,6 +274,36 @@ export default function App() {
 }
 ```
 
+### Common Code Highlight
+
+Use `@uiw/react-md-editor/common` to keep syntax highlighting while only including the `rehype-prism-plus/common` language subset. This is a middle ground between the default full-language build and `nohighlight`.
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor/common';
+
+const code = `**Hello world!!!**
+\`\`\`js
+function greet(name) {
+  console.log('hello', name);
+}
+\`\`\`
+`
+
+export default function App() {
+  const [value, setValue] = React.useState(code);
+  return (
+    <div className="container">
+      <MDEditor
+        value={value}
+        onChange={setValue}
+      />
+      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
+    </div>
+  );
+}
+```
+
 ### Placeholder & maxLength
 
 "Below is an example that sets the `placeholder` for the editor and defines the maximum input character length as `10` characters."
@@ -1128,10 +1181,12 @@ npm run start
 
 As always, thanks to our amazing contributors!
 
-<!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT--><a href="https://github.com/jaywcjlove" title="小弟调调"><img src="https://avatars.githubusercontent.com/u/1680273?v=4" width="42;" alt="小弟调调"/></a>
+<!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT-->
+<a href="https://github.com/jaywcjlove" title="小弟调调"><img src="https://avatars.githubusercontent.com/u/1680273?v=4" width="42;" alt="小弟调调"/></a>
 <a href="https://github.com/renovate-bot" title="Mend Renovate"><img src="https://avatars.githubusercontent.com/u/25180681?v=4" width="42;" alt="Mend Renovate"/></a>
 <a href="https://github.com/stevemk14ebr" title="Stephen Eckels"><img src="https://avatars.githubusercontent.com/u/6619205?v=4" width="42;" alt="Stephen Eckels"/></a>
 <a href="https://github.com/RARgames" title="RAR"><img src="https://avatars.githubusercontent.com/u/13639766?v=4" width="42;" alt="RAR"/></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/alpharomercoma" title="Alpha Romer Coma"><img src="https://avatars.githubusercontent.com/u/108984668?v=4" width="42;" alt="Alpha Romer Coma"/></a>
 <a href="https://github.com/Exmirai" title="UniqueUlysees"><img src="https://avatars.githubusercontent.com/u/6436703?v=4" width="42;" alt="UniqueUlysees"/></a>
 <a href="https://github.com/sandiiarov" title="Alex Sandiiarov"><img src="https://avatars.githubusercontent.com/u/15861257?v=4" width="42;" alt="Alex Sandiiarov"/></a>
@@ -1149,14 +1204,15 @@ 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>
-<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-->
+<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/common.d.ts

@@ -0,0 +1,17 @@
+declare module '@uiw/react-md-editor/common' {
+  import MDEditor from '@uiw/react-md-editor/esm/Editor.common';
+  import * as commands from '@uiw/react-md-editor/esm/commands';
+  import * as MarkdownUtil from '@uiw/react-md-editor/esm/utils/markdownUtils';
+  export { headingExecute } from '@uiw/react-md-editor/esm/commands/title';
+  export * from '@uiw/react-md-editor/esm/commands';
+  export * from '@uiw/react-md-editor/esm/commands/group';
+  export * from '@uiw/react-md-editor/esm/utils/markdownUtils';
+  export * from '@uiw/react-md-editor/esm/utils/InsertTextAtPosition';
+  export * from '@uiw/react-md-editor/esm/Editor.common';
+  export * from '@uiw/react-md-editor/esm/Context';
+  export * from '@uiw/react-md-editor/esm/Types';
+  export { default as handleKeyDown } from '@uiw/react-md-editor/esm/components/TextArea/handleKeyDown';
+  export { default as shortcuts } from '@uiw/react-md-editor/esm/components/TextArea/shortcuts';
+  export { MarkdownUtil, commands };
+  export default MDEditor;
+}

package/dist/mdeditor.css

@@ -1099,113 +1099,6 @@ body[data-color-mode*='light'] {
   cursor: help;
 }
 
-.w-md-editor-toolbar-child {
-  position: absolute;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
-  background-color: var(--md-editor-background-color);
-  z-index: 1;
-  display: none;
-}
-.w-md-editor-toolbar-child.active {
-  display: block;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar {
-  border-bottom: 0;
-  padding: 3px;
-  border-radius: 3px;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
-  display: block;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
-  width: -webkit-fill-available;
-  height: auto;
-  height: initial;
-  box-sizing: border-box;
-  padding: 3px 4px 2px 4px;
-  margin: 0;
-}
-
-.w-md-editor-toolbar {
-  border-bottom: 1px solid var(--md-editor-box-shadow-color);
-  background-color: var(--md-editor-background-color);
-  padding: 3px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 3px 3px 0 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-wrap: wrap;
-}
-.w-md-editor-toolbar.bottom {
-  border-bottom: 0px;
-  border-top: 1px solid var(--md-editor-box-shadow-color);
-  border-radius: 0 0 3px 3px;
-}
-.w-md-editor-toolbar ul,
-.w-md-editor-toolbar li {
-  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;
-  line-height: 14px;
-  background: none;
-  padding: 4px;
-  margin: 0 1px;
-  border-radius: 2px;
-  text-transform: none;
-  font-weight: normal;
-  overflow: visible;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.3s;
-  white-space: nowrap;
-  color: var(--color-fg-default);
-}
-.w-md-editor-toolbar li > button:hover,
-.w-md-editor-toolbar li > button:focus {
-  background-color: var(--color-neutral-muted);
-  color: var(--color-accent-fg);
-}
-.w-md-editor-toolbar li > button:active {
-  background-color: var(--color-neutral-muted);
-  color: var(--color-danger-fg);
-}
-.w-md-editor-toolbar li > button:disabled {
-  color: var(--md-editor-box-shadow-color);
-  cursor: not-allowed;
-}
-.w-md-editor-toolbar li > button:disabled:hover {
-  background-color: transparent;
-  color: var(--md-editor-box-shadow-color);
-}
-.w-md-editor-toolbar li.active > button {
-  color: var(--color-accent-fg);
-  background-color: var(--color-neutral-muted);
-}
-.w-md-editor-toolbar-divider {
-  height: 14px;
-  width: 1px;
-  margin: -3px 3px 0 3px !important;
-  vertical-align: middle;
-  background-color: var(--md-editor-box-shadow-color);
-}
-
 .w-md-editor-area {
   overflow: auto;
   border-radius: 5px;
@@ -1344,7 +1237,111 @@ body[data-color-mode*='light'] {
   color: #82071e !important;
   color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
 }
-
+.w-md-editor-toolbar-child {
+  position: absolute;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
+  z-index: 1;
+  display: none;
+}
+.w-md-editor-toolbar-child.active {
+  display: block;
+}
+.w-md-editor-toolbar-child .w-md-editor-toolbar {
+  border-bottom: 0;
+  padding: 3px;
+  border-radius: 3px;
+}
+.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
+  display: block;
+}
+.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
+  width: -webkit-fill-available;
+  height: auto;
+  height: initial;
+  box-sizing: border-box;
+  padding: 3px 4px 2px 4px;
+  margin: 0;
+}
+.w-md-editor-toolbar {
+  border-bottom: 1px solid var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
+  padding: 3px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 3px 3px 0 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-wrap: wrap;
+}
+.w-md-editor-toolbar.bottom {
+  border-bottom: 0px;
+  border-top: 1px solid var(--md-editor-box-shadow-color);
+  border-radius: 0 0 3px 3px;
+}
+.w-md-editor-toolbar ul,
+.w-md-editor-toolbar li {
+  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;
+  line-height: 14px;
+  background: none;
+  padding: 4px;
+  margin: 0 1px;
+  border-radius: 2px;
+  text-transform: none;
+  font-weight: normal;
+  overflow: visible;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s;
+  white-space: nowrap;
+  color: var(--color-fg-default);
+}
+.w-md-editor-toolbar li > button:hover,
+.w-md-editor-toolbar li > button:focus {
+  background-color: var(--color-neutral-muted);
+  color: var(--color-accent-fg);
+}
+.w-md-editor-toolbar li > button:active {
+  background-color: var(--color-neutral-muted);
+  color: var(--color-danger-fg);
+}
+.w-md-editor-toolbar li > button:disabled {
+  color: var(--md-editor-box-shadow-color);
+  cursor: not-allowed;
+}
+.w-md-editor-toolbar li > button:disabled:hover {
+  background-color: transparent;
+  color: var(--md-editor-box-shadow-color);
+}
+.w-md-editor-toolbar li.active > button {
+  color: var(--color-accent-fg);
+  background-color: var(--color-neutral-muted);
+}
+.w-md-editor-toolbar-divider {
+  height: 14px;
+  width: 1px;
+  margin: -3px 3px 0 3px !important;
+  vertical-align: middle;
+  background-color: var(--md-editor-box-shadow-color);
+}
 .w-md-editor-bar {
   position: absolute;
   cursor: s-resize;
@@ -1364,7 +1361,6 @@ body[data-color-mode*='light'] {
   display: block;
   margin: 0 auto;
 }
-
 .w-md-editor {
   text-align: left;
   border-radius: 3px;
@@ -1466,4 +1462,3 @@ body[data-color-mode*='light'] {
 .w-md-editor-fullscreen .w-md-editor-content {
   height: 100%;
 }
-