feat(common-ui): Add Markdown component.

plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js

@@ -433,12 +433,19 @@ describe("Given DiffHTML", () => {
         addedNode: "CODE",
       },
       {
-        name: "list by paragraph",
+        name: "ordered list by paragraph",
         oldText: `1. ${content}`,
         newText: content,
         removedNode: "LI",
         addedNode: "P",
       },
+      {
+        name: "unordered list by paragraph",
+        oldText: `- ${content}`,
+        newText: content,
+        removedNode: "LI",
+        addedNode: "P",
+      },
       {
         name: "code block by paragraph",
         oldText: `\`\`\`\n${content}\n\`\`\``,

plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js

@@ -1,9 +1,9 @@
-import React, { useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { classNames } from "pi-ui";
 import styles from "./MarkdownEditor.module.css";
 import { MarkdownRenderer } from "../MarkdownRenderer";
-import { commands, getMultiLineContent, getSelectedContent } from "./commands";
+import { commands, executeCommand } from "./commands";
 
 export function MarkdownEditor({
   onChange,
@@ -15,6 +15,11 @@ export function MarkdownEditor({
   const editorRef = useRef();
   const [showPreview, setShowPreview] = useState(false);
   const [value, setValue] = useState(initialValue);
+  const availableCommands = useMemo(
+    () => [...customCommands, ...commands],
+    [customCommands]
+  );
+
   function handleChange(e) {
     setValue(e.target.value);
     onChange(e.target.value);
@@ -25,16 +30,33 @@ export function MarkdownEditor({
   function handleShowWrite() {
     setShowPreview(false);
   }
-  const handleCommand = (command) => () => {
-    const content = editorRef.current.value;
-    const startPos = editorRef.current.selectionStart;
-    const endPos = editorRef.current.selectionEnd;
-    const selected = getSelectedContent(content, startPos, endPos);
-    const lines = getMultiLineContent(content, startPos, endPos);
-    const newString = command({ selected, lines });
-    setValue(newString);
-    onChange(newString);
-  };
+
+  const handleCommand =
+    (command, { offset = 0 } = {}) =>
+    () => {
+      const content = editorRef.current.value;
+      const startPos = editorRef.current.selectionStart;
+      const endPos = editorRef.current.selectionEnd;
+      const newString = executeCommand(command, content, startPos, endPos);
+      // prevent sync issues between textarea updates.
+      setTimeout(() => {
+        setValue(newString);
+        onChange(newString);
+        editorRef.current.focus();
+        editorRef.current.selectionStart = startPos + offset;
+        editorRef.current.selectionEnd = endPos + offset;
+      }, 1);
+    };
+
+  function handleKeyPress(event) {
+    if (event.metaKey || event.ctrlKey) {
+      const cmd = availableCommands.find((c) => c.commandKey === event.key);
+      if (cmd) {
+        const { command, offset } = cmd;
+        handleCommand(command, { offset })();
+      }
+    }
+  }
 
   return (
     <div className={classNames(styles.editorWrapper, wrapperClassName)}>
@@ -44,8 +66,8 @@ export function MarkdownEditor({
           <div onClick={handleShowPreview}>Preview</div>
         </div>
         <div className={styles.actionButtons}>
-          {[...commands, ...customCommands].map(({ command, Icon }, i) => (
-            <span key={i} onClick={handleCommand(command)}>
+          {availableCommands.map(({ command, Icon, offset }, i) => (
+            <span key={i} onClick={handleCommand(command, { offset })}>
               <Icon />
             </span>
           ))}
@@ -66,7 +88,9 @@ export function MarkdownEditor({
           ref={editorRef}
           className={styles.editor}
           value={value}
+          onKeyPress={handleKeyPress}
           onChange={handleChange}
+          // onSelect={(e) => console.log("EVENT", e)}
         />
         <MarkdownRenderer body={value} className={styles.preview} />
       </div>

plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js

@@ -3,17 +3,17 @@ import ItalicSVG from "./assets/italic.svg";
 import QuoteSVG from "./assets/quote.svg";
 import CodeSVG from "./assets/code.svg";
 import BulletListSVG from "./assets/bulletList.svg";
-// import { ReactComponent as ImageSVG } from "./assets/image.svg";
 import NumberedListSVG from "./assets/numberedList.svg";
+// TODO: Add image command
 
 function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   let index = 0;
-  return lines.reduce((acc, curr) => {
+  return lines.reduce((acc, curr, i) => {
     if (ignoreBlankLines && curr.length === 0) {
       return `${acc}\n`;
     }
     index++;
-    return `${acc}\n${formatFn(curr, index)}`;
+    return `${acc}${!!i ? "\n" : ""}${formatFn(curr, index)}`;
   }, "");
 }
 
@@ -33,39 +33,47 @@ const multiLineCommand =
 export const commands = [
   {
     label: "Bold Text",
+    commandKey: "b",
+    offset: 2,
     Icon: BoldSVG,
     command: ({ selected: { previous, current, next } }) =>
       `${previous}**${current}**${next}`,
   },
   {
     label: "Italic",
+    commandKey: "i",
+    offset: 1,
     Icon: ItalicSVG,
     command: ({ selected: { previous, current, next } }) =>
-      `${previous}*${current}*${next}`,
+      `${previous}_${current}_${next}`,
   },
   {
     label: "Quote",
     Icon: QuoteSVG,
+    offset: 2,
     command: multiLineCommand((curr) => `> ${curr}`, {
       ignoreBlankLines: true,
     }),
   },
   {
     label: "Code",
     Icon: CodeSVG,
+    offset: 1,
     command: ({ selected: { previous, current, next } }) =>
       `${previous}\`${current}\`${next}`,
   },
   {
     label: "List",
     Icon: BulletListSVG,
+    offset: 2,
     command: multiLineCommand((curr) => `- ${curr}`, {
       ignoreBlankLines: true,
     }),
   },
   {
     label: "Numbered List",
     Icon: NumberedListSVG,
+    offset: 3,
     command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
       ignoreBlankLines: true,
     }),