@uiw/react-md-editor 4.0.5 → 4.0.7

package/README.md

@@ -54,6 +54,12 @@ A simple markdown editor with preview, implemented with React.js and TypeScript.
 npm i @uiw/react-md-editor
 ```
 
+or 
+
+```bash
+yarn add @uiw/react-md-editor
+```
+
 ### Using
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark)
@@ -607,6 +613,51 @@ export default function App() {
 }
 ```
 
+### Place the cursor at the end of the text
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor';
+
+const textSample = `# Welcome to the Markdown Editor!
+
+This is a sample of the **React Markdown Editor**.
+
+## ✨ Features
+- Real-time preview
+- Custom styling support
+- Code highlighting
+- Auto focus at the end of the text
+
+## 📦 Sample Code
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+## 🔗 Links
+
+Visit [uiwjs/react-md-editor](https://github.com/uiwjs/react-md-editor) for more information.
+`;
+
+export default function App() {
+  const [value, setValue] = React.useState(textSample);
+  return (
+    <div className="container">
+      <MDEditor
+        autoFocus={true}
+        value={value}
+        autoFocusEnd={true}
+        visibleDragbar={false}
+        onChange={setValue}
+      />
+    </div>
+  );
+}
+```
+
 ### Preview Markdown
 
 [![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)
@@ -918,6 +969,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.
 - `autoFocus?: true`: Can be used to make `Markdown Editor` focus itself on initialization.
+- `autoFocusEnd?: false`: Can be used to make `Markdown Editor` focus on the end of text on initialization.
 - `previewOptions?: ReactMarkdown.ReactMarkdownProps`: This is reset [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview/tree/0036dd51a25c00d5be6dc83aa978905c64750038?tab=readme-ov-file#options-props) settings.
 - `textareaProps?: TextareaHTMLAttributes`: Set the `textarea` related props.
 - ~~`renderTextarea?: (props, opts) => JSX.Element;`~~: `@deprecated` Please use ~~`renderTextarea`~~ -> `components`. Use div to replace TextArea or re-render TextArea. [#193](https://github.com/uiwjs/react-md-editor/issues/193)
@@ -932,7 +984,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `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 `visibleDragbar=true` value is valid.
-- `minHeights?: number=100`: Minimum drag height. The `visibleDragbar=true` value is valid.
+- `minHeight?: 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.
@@ -978,17 +1030,19 @@ 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>
 <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/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/RARgames" title="RAR"><img src="https://avatars.githubusercontent.com/u/13639766?v=4" width="42;" alt="RAR"/></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>
 <a href="https://github.com/nuragic" title="Andrea Puddu"><img src="https://avatars.githubusercontent.com/u/1586378?v=4" width="42;" alt="Andrea Puddu"/></a>
 <a href="https://github.com/AntonR31337" title="Anton"><img src="https://avatars.githubusercontent.com/u/88384647?v=4" width="42;" alt="Anton"/></a>
 <a href="https://github.com/bramus" title="Bramus"><img src="https://avatars.githubusercontent.com/u/213073?v=4" width="42;" alt="Bramus"/></a>
 <a href="https://github.com/CarleneCannon-Conner" title="Carlene Cannon-Conner"><img src="https://avatars.githubusercontent.com/u/1942791?v=4" width="42;" alt="Carlene Cannon-Conner"/></a>
 <a href="https://github.com/MercierCorentin" title="Corentin Mercier"><img src="https://avatars.githubusercontent.com/u/46066895?v=4" width="42;" alt="Corentin Mercier"/></a>
-<a href="https://github.com/dmitriyyan" title="Dmitrii Ianushkevich"><img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitrii Ianushkevich"/></a>
+<a href="https://github.com/dmitriyyan" title="Dmitrii Yanushkevich"><img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitrii Yanushkevich"/></a>
 <a href="https://github.com/jnishiyama" title="James Finucane"><img src="https://avatars.githubusercontent.com/u/2048195?v=4" width="42;" alt="James Finucane"/></a>
 <a href="https://github.com/allforabit" title="Kevin Nolan"><img src="https://avatars.githubusercontent.com/u/537189?v=4" width="42;" alt="Kevin Nolan"/></a>
+<a href="https://github.com/liamstamper" title="Liam Stamper"><img src="https://avatars.githubusercontent.com/u/136619788?v=4" width="42;" alt="Liam Stamper"/></a>
 <a href="https://github.com/kseikyo" title="Lucas Sierota"><img src="https://avatars.githubusercontent.com/u/29212286?v=4" width="42;" alt="Lucas Sierota"/></a>
 <a href="https://github.com/michaelkramer" title="Michael Kramer"><img src="https://avatars.githubusercontent.com/u/6052223?v=4" width="42;" alt="Michael Kramer"/></a>
 <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>

package/dist/mdeditor.css

@@ -1099,6 +1099,113 @@ 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;
@@ -1238,113 +1345,6 @@ body[data-color-mode*='light'] {
   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;