Merge pull request #17 from Webbrother/develop

2.0.1 => main

Author: Webbrother

README.md

@@ -1,7 +1,7 @@
 # Introduction
 
 A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.
-React-mde-headless has no 3rd party dependencies.
+React-mde-headless has **no 3rd party dependencies**.
 
 ## [Demo](https://codesandbox.io/s/competent-jepsen-qyz51q?file=/src/index.tsx)
 

demo/index.tsx

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom';
 import { Box, ChakraProvider, HStack, Textarea } from '@chakra-ui/react';
 import { faBold, faItalic, faCode, faHeading, faImage, faLink } from '@fortawesome/free-solid-svg-icons';
 import {
+  // hook
+  useTextAreaMarkdownEditor,
+  // commands
   boldCommand,
   codeCommand,
   codeBlockCommand,
   headingLevel1Command,
   italicCommand,
   strikethroughCommand,
-  useTextAreaMarkdownEditor,
   quoteCommand,
   checkedListCommand,
   orderedListCommand,
@@ -19,6 +21,7 @@ import {
 } from '../src';
 import { ToolbarButton } from './toolbar-button';
 import ReactMarkdown from 'react-markdown';
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 
 export const Demo = () => {
   const { ref, commandController } = useTextAreaMarkdownEditor({
@@ -69,6 +72,12 @@ export const Demo = () => {
             }}
             icon={faCode}
           />
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('codeBlock');
+            }}
+            icon={faCode}
+          />
 
           <ToolbarButton
             onClick={() => {
@@ -97,13 +106,6 @@ export const Demo = () => {
             {'>'}
           </ToolbarButton>
 
-          <ToolbarButton
-            onClick={() => {
-              commandController.executeCommand('codeBlock');
-            }}
-            icon={faCode}
-          />
-
           <ToolbarButton
             onClick={() => {
               commandController.executeCommand('orderedList');
@@ -138,7 +140,7 @@ export const Demo = () => {
         </HStack>
 
         {isPreview ? (
-          <ReactMarkdown>{ref.current?.value ?? ''}</ReactMarkdown>
+          <ReactMarkdown components={ChakraUIRenderer()}>{ref.current?.value ?? ''}</ReactMarkdown>
         ) : (
           <Textarea
             ref={ref}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-headless-mde",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React Headless Markdown Editor",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -48,6 +48,7 @@
     "@typescript-eslint/eslint-plugin": "5.54.1",
     "@vitejs/plugin-react": "^1.3.0",
     "add": "^2.0.6",
+    "chakra-ui-markdown-renderer": "^4.1.0",
     "cross-env": "^6.0.3",
     "eslint": "8.35.0",
     "eslint-config-prettier": "8.7.0",