Merge pull request #15 from Webbrother/develop

2.0.0 => main

Author: Webbrother

README.md

@@ -12,14 +12,26 @@ React-mde-headless has no 3rd party dependencies.
 ## Using
 
 ```jsx
-import { bold, italic, link, useTextAreaMarkdownEditor } from 'react-mde-headless';
+import { boldCommand, italicCommand, linkCommand, useTextAreaMarkdownEditor } from 'react-mde-headless';
 
 export const MarkdownEditor = () => {
-  const { ref } = useTextAreaMarkdownEditor();
+  const { ref, commandController } = useTextAreaMarkdownEditor({
+    commandMap: {
+      bold: boldCommand,
+      italic: italicCommand,
+      link: linkCommand,
+    },
+  });
 
   return (
     <div>
-      <button onClick={bold}>B</button>
+      <button
+        onClick={() => {
+          commandController.executeCommand('bold');
+        }}
+      >
+        B
+      </button>
 
       <textarea ref={ref} />
     </div>
@@ -29,31 +41,40 @@ export const MarkdownEditor = () => {
 
 ## Supported commands
 
-- bold
-- italic
-- strikethrough
 - headingLevel1
 - headingLevel2
 - headingLevel3
 - headingLevel4
 - headingLevel5
 - headingLevel6
-- link
 - quote
-- code
-- codeBlock
 - checkedList
 - orderedList
 - unorderedList
+- bold
+- code
+- codeBlock
+- italic
+- strikethrough
 - image
-- attachment
+- link
 
 ## Todo
 
 - heading undo
 - undo/redo
 - Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js
 - peerDependencies React?
+- undo for
+  - 1st priority
+    - all headings
+    - quote
+    - strikethrough
+  - 2nd priority
+    - orderedList
+    - unorderedList
+    - checkedList
+    - codeBlock
 
 PR's are welcome!
 
@@ -69,7 +90,7 @@ this has been taken from [their documentation](<https://github.com/showdownjs/sh
 > Cross-side scripting is a well known technique to gain access to private information of the users
 > of a website. The attacker injects spurious HTML content (a script) on the web page which will read
 > the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
-> you should filter any suspicious content coming from user input. Showdown doesn’t include an
+> you should filter any suspicious content coming from user input. Showdown does not include an
 > XSS filter, so you must provide your own. But be careful in how you do it…
 
 You might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).

demo/index.tsx

@@ -1,37 +1,132 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Box, ChakraProvider, HStack, Textarea } from '@chakra-ui/react';
-import { faBold, faItalic, faCode, faHeading, faFile } from '@fortawesome/free-solid-svg-icons';
-import { attachment, bold, code, headingLevel1, italic, useTextAreaMarkdownEditor } from '../src';
+import { faBold, faItalic, faCode, faHeading, faImage, faLink } from '@fortawesome/free-solid-svg-icons';
+import {
+  boldCommand,
+  codeCommand,
+  codeBlockCommand,
+  headingLevel1Command,
+  italicCommand,
+  strikethroughCommand,
+  useTextAreaMarkdownEditor,
+  quoteCommand,
+  checkedListCommand,
+  orderedListCommand,
+  unorderedListCommand,
+  imageCommand,
+  linkCommand,
+} from '../src';
 import { ToolbarButton } from './toolbar-button';
 import ReactMarkdown from 'react-markdown';
 
-const uploadMock = async () =>
-  await new Promise<string>(resolve => {
-    setTimeout(() => {
-      resolve('https://example.com');
-    }, 1000);
-  });
-
 export const Demo = () => {
-  const { ref } = useTextAreaMarkdownEditor();
+  const { ref, commandController } = useTextAreaMarkdownEditor({
+    commandMap: {
+      // word logic
+      bold: boldCommand,
+      code: codeCommand,
+      codeBlock: codeBlockCommand,
+      italic: italicCommand,
+      strikethrough: strikethroughCommand,
+
+      // word complex
+      image: imageCommand,
+      link: linkCommand,
+
+      // line logic
+      headingLevel1: headingLevel1Command,
+      quote: quoteCommand,
+
+      // list
+      orderedList: orderedListCommand,
+      unorderedList: unorderedListCommand,
+      checkedList: checkedListCommand,
+    },
+  });
   const [isPreview, setIsPreview] = useState(false);
   const [value, setValue] = useState('');
 
   return (
     <ChakraProvider>
       <Box p={3}>
         <HStack py={2}>
-          <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() });
+              commandController.executeCommand('bold');
+            }}
+            icon={faBold}
+          />
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('italic');
+            }}
+            icon={faItalic}
+          />
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('code');
+            }}
+            icon={faCode}
+          />
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('image');
+            }}
+            icon={faImage}
+          />
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('link');
+            }}
+            icon={faLink}
+          />
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('headingLevel1');
             }}
-            icon={faFile}
+            icon={faHeading}
           />
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('quote');
+            }}
+          >
+            {'>'}
+          </ToolbarButton>
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('codeBlock');
+            }}
+            icon={faCode}
+          />
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('orderedList');
+            }}
+          >
+            ol
+          </ToolbarButton>
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('unorderedList');
+            }}
+          >
+            ul
+          </ToolbarButton>
+
+          <ToolbarButton
+            onClick={() => {
+              commandController.executeCommand('checkedList');
+            }}
+          >
+            xi
+          </ToolbarButton>
 
           <ToolbarButton
             onClick={() => {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-headless-mde",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "React Headless Markdown Editor",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package.json

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel1Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '# ');
+  },
+};

src/commands/command-controller.ts

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel2Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '## ');
+  },
+};

src/commands/command.ts

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel3Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '### ');
+  },
+};

src/commands/commands-service.ts

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel4Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '#### ');
+  },
+};

src/commands/line/heading-level1.ts

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel5Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '##### ');
+  },
+};

src/commands/line/heading-level2.ts

@@ -0,0 +1,10 @@
+import { type ICommand } from '../../types/command';
+import { setHeader } from '../../utils/header';
+
+export const headingLevel6Command: ICommand = {
+  do: textCtrl => {
+    const initialState = textCtrl.getState();
+
+    setHeader(initialState, textCtrl, '###### ');
+  },
+};