Merge pull request #13 from Webbrother/develop

v1.0.4 develop => main

Author: Webbrother

demo/index.tsx

@@ -1,46 +1,60 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Box, ChakraProvider, HStack, Textarea } from '@chakra-ui/react';
-import { faBold, faItalic, faCode, faHeading } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBold, faItalic, faCode, faHeading, faFile } from '@fortawesome/free-solid-svg-icons';
 import { attachment, bold, code, headingLevel1, italic, useTextAreaMarkdownEditor } from '../src';
 import { ToolbarButton } from './toolbar-button';
+import ReactMarkdown from 'react-markdown';
 
 const uploadMock = async () =>
   await new Promise<string>(resolve => {
     setTimeout(() => {
-      resolve('https://google.com');
-    }, 5000);
+      resolve('https://example.com');
+    }, 1000);
   });
 
 export const Demo = () => {
   const { ref } = useTextAreaMarkdownEditor();
+  const [isPreview, setIsPreview] = useState(false);
+  const [value, setValue] = useState('');
 
   return (
     <ChakraProvider>
       <Box p={3}>
         <HStack py={2}>
-          <ToolbarButton onClick={bold}>
-            <FontAwesomeIcon icon={faBold} />
-          </ToolbarButton>
-          <ToolbarButton onClick={italic}>
-            <FontAwesomeIcon icon={faItalic} />
-          </ToolbarButton>
-          <ToolbarButton onClick={code}>
-            <FontAwesomeIcon icon={faCode} />
-          </ToolbarButton>
-          <ToolbarButton onClick={headingLevel1}>
-            <FontAwesomeIcon icon={faHeading} />
-          </ToolbarButton>
+          <ToolbarButton onClick={bold} icon={faBold} />
+          <ToolbarButton onClick={italic} icon={faItalic} />
+          <ToolbarButton onClick={code} icon={faCode} />
+          <ToolbarButton onClick={headingLevel1} icon={faHeading} />
+          <ToolbarButton
+            onClick={() => {
+              attachment({ fileName: 'file-name.txt', fileUrlPromise: uploadMock() });
+            }}
+            icon={faFile}
+          />
+
           <ToolbarButton
             onClick={() => {
-              attachment({ fileName: 'file-name', fileUrlPromise: uploadMock() });
+              setIsPreview(val => !val);
             }}
           >
-            +
+            Preview
           </ToolbarButton>
         </HStack>
-        <Textarea ref={ref} placeholder="I'm a markdown editor" fontFamily={'monospace'} />
+
+        {isPreview ? (
+          <ReactMarkdown>{ref.current?.value ?? ''}</ReactMarkdown>
+        ) : (
+          <Textarea
+            ref={ref}
+            value={value}
+            onChange={e => {
+              setValue(e.target.value);
+            }}
+            placeholder="I'm a markdown editor"
+            fontFamily={'monospace'}
+          />
+        )}
       </Box>
     </ChakraProvider>
   );

demo/toolbar-button.tsx

@@ -1,19 +1,18 @@
-import * as React from "react";
-import { Button } from "@chakra-ui/react";
+import React, { type FC } from 'react';
+import { Button } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { type IconDefinition } from '@fortawesome/fontawesome-common-types';
 
-export type ToolbarButtonProps = {
+export interface ToolbarButtonProps {
   onClick: () => void;
-};
+  icon?: IconDefinition;
+}
 
-export const ToolbarButton: React.FC<ToolbarButtonProps> = props => {
+export const ToolbarButton: FC<ToolbarButtonProps> = ({ onClick, icon, children }) => {
   return (
-    <Button
-      variant={"outline"}
-      size={"sm"}
-      color={"gray.600"}
-      onClick={props.onClick}
-    >
-      {props.children}
+    <Button variant={'outline'} size={'sm'} color={'gray.600'} onClick={onClick}>
+      {icon && <FontAwesomeIcon icon={icon} />}
+      {children}
     </Button>
   );
 };