diff --git a/README.md b/README.md index 40d52753a..8f1a8c4cc 100644 --- a/README.md +++ b/README.md @@ -225,6 +225,52 @@ export default function App() { } ``` +### Markdown text to Imgage + +[![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 +import React from "react"; +import MDEditor, { commands, ICommand, TextState, TextApi } from "@uiw/react-md-editor"; +import domToImage from "dom-to-image"; + +const textToImage: ICommand = { + name: "Text To Image", + keyCommand: "text2image", + buttonProps: { "aria-label": "Insert title3" }, + icon: ( + + + + ), + execute: (state: TextState, api: TextApi) => { + const dom = document.getElementsByClassName("w-md-editor")[0]; + if (dom) { + domToImage.toJpeg(dom, {}).then((dataUrl) => { + const link = document.createElement("a"); + link.download = "image.jpg"; + link.href = dataUrl; + link.click(); + }); + } + } +}; + +export default function App() { + return ( +
+ +
+ ); +} +``` + ### Support Custom Mermaid Preview Using [mermaid](https://github.com/mermaid-js/mermaid) to generation of diagram and flowchart from text in a similar manner as markdown