From 92cdcbd143a18b1990919a636665593cdb712b2b Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 14 Mar 2022 20:56:58 -0300
Subject: [PATCH 01/29] feat(common-ui): Add markdown renderer

---
 .../components/Markdown/MarkdownRenderer.js   |  31 ++
 .../Markdown/MarkdownRenderer.test.js         | 132 +++++
 .../src/components/Markdown/helpers.js        |  80 +++
 .../src/components/Markdown/index.js          |   1 +
 .../src/components/Markdown/styles.css        | 523 ++++++++++++++++++
 5 files changed, 767 insertions(+)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.test.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/index.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/styles.css

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
new file mode 100644
index 000000000..8feb301d8
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { classNames } from "pi-ui";
+import ReactMarkdown from "react-markdown";
+import { customRenderers } from "./helpers";
+import "./styles.css";
+
+export const MarkdownRenderer = ({
+  body,
+  className,
+  renderImages = true,
+  isDiff,
+}) => (
+  <div className={className} data-testid="markdown-renderer">
+    <ReactMarkdown
+      className={classNames("markdown-body", isDiff && "markdown-diff")}
+      components={customRenderers(renderImages)}
+    >
+      {body}
+    </ReactMarkdown>
+  </div>
+);
+
+MarkdownRenderer.prototype = {
+  body: PropTypes.string,
+  className: PropTypes.string,
+  confirmWithModal: PropTypes.bool,
+  renderImages: PropTypes.bool,
+  displayExternalLikWarning: PropTypes.bool,
+  escapeHtml: PropTypes.bool,
+};
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.test.js
new file mode 100644
index 000000000..0a79ed3a1
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.test.js
@@ -0,0 +1,132 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MarkdownRenderer } from "./MarkdownRenderer";
+import "@testing-library/jest-dom";
+
+describe("Given MarkdownRenderer component", () => {
+  let spyConsole;
+  beforeEach(() => {
+    spyConsole = jest.spyOn(console, "warn").mockImplementation();
+  });
+  afterEach(() => {
+    spyConsole.mockRestore();
+  });
+  it("should render markdown simple text", async () => {
+    render(<MarkdownRenderer body={"Lorem ipsum"} />);
+    expect(await screen.findByTestId("markdown-renderer")).toHaveTextContent(
+      "Lorem ipsum"
+    );
+  });
+  it("should render markdown headers", () => {
+    const headersText =
+      "# Header 1 \n ## Header 2 \n ### Header 3 \n #### Header 4 \n ##### Header 5 \n ###### Header 6";
+    render(<MarkdownRenderer body={headersText} />);
+    const h1 = screen.getByText("Header 1");
+    expect(h1.nodeName).toEqual("H1");
+    const h2 = screen.getByText("Header 2");
+    expect(h2.nodeName).toEqual("H2");
+    const h3 = screen.getByText("Header 3");
+    expect(h3.nodeName).toEqual("H3");
+    const h4 = screen.getByText("Header 4");
+    expect(h4.nodeName).toEqual("H4");
+    const h5 = screen.getByText("Header 5");
+    expect(h5.nodeName).toEqual("H5");
+    const h6 = screen.getByText("Header 6");
+    expect(h6.nodeName).toEqual("H6");
+  });
+  it("should render valid links", () => {
+    const validLink = "[valid link](https://validlink.com)";
+    render(<MarkdownRenderer body={validLink} />);
+    const link = screen.getByText("valid link");
+    expect(link.nodeName).toEqual("A");
+    expect(link).toHaveAttribute("href", "https://validlink.com");
+  });
+  it("should render valid image references as links if renderImages is false", () => {
+    const validImage = "![valid image](https://validimage.com)";
+    render(<MarkdownRenderer body={validImage} renderImages={false} />);
+    const image = screen.getByText("valid image");
+    expect(image.nodeName).toEqual("A");
+    expect(image).toHaveAttribute("href", "https://validimage.com");
+  });
+  it("should render valid images", () => {
+    const validImage = "![valid image](https://validimage.com)";
+    render(<MarkdownRenderer body={validImage} />);
+    const image = screen.getByAltText("valid image");
+    expect(image.nodeName).toEqual("IMG");
+    expect(image).toHaveAttribute("src", "https://validimage.com");
+  });
+  describe("Given a XSS attack", () => {
+    let spyConsoleWarn;
+    beforeEach(() => {
+      spyConsoleWarn = jest.spyOn(console, "warn").mockImplementation();
+    });
+    afterEach(() => {
+      spyConsoleWarn.mockRestore();
+    });
+    it("should not render malicious links, and convert them instead", () => {
+      const maliciousLink = "[xss link](javascript:void(0))";
+      render(<MarkdownRenderer body={maliciousLink} />);
+      let link = screen.getByRole("link");
+      // Eslint disable script url checking
+      // eslint-disable-next-line no-script-url
+      expect(link).not.toHaveAttribute("href", "javascript:void(0)");
+      expect(link).toHaveAttribute("href", "x-javascript:void(0)");
+    });
+    it("should not render malicious images, and convert them instead", () => {
+      const malformedimage = "![xss image](javascript:void(0))";
+      render(<MarkdownRenderer body={malformedimage} />);
+      const image = screen.getByRole("img");
+      // Eslint disable script url checking
+      // eslint-disable-next-line no-script-url
+      expect(image).not.toHaveAttribute("src", "javascript:void(0)");
+      expect(image).toHaveAttribute("src", "x-javascript:void(0)");
+    });
+    it("should not render malicious images as links, and convert them instead", () => {
+      const malformedimage = "![xss image](javascript:void(0))";
+      render(<MarkdownRenderer body={malformedimage} renderImages={false} />);
+      const image = screen.getByRole("link");
+      // Eslint disable script url checking
+      // eslint-disable-next-line no-script-url
+      expect(image).not.toHaveAttribute("href", "javascript:void(0)");
+      expect(image).toHaveAttribute("href", "x-javascript:void(0)");
+    });
+    it("should not render any malicious links", () => {
+      const maliciousLinks = `[xss link](javascript:alert(1))
+    [xss link](JAVASCRIPT:alert(1))
+    [xss link](vbscript:alert(1))
+    [xss link](VBSCRIPT:alert(1))
+    [xss link](file:///123)
+    [xss link](&#34;&#62;&#60;script&#62;alert&#40;&#34;xss&#34;&#41;&#60;/script&#62;)
+    [xss link](&#74;avascript:alert(1))
+    [xss link](&#x26;#74;avascript:alert(1))
+    [xss link](\\&#74;avascript:alert(1))
+    [xss link](<javascript:alert(1)>)
+    [xss link](javascript&#x3A;alert(1))
+    [xss link](data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4K)
+    `;
+
+      render(<MarkdownRenderer body={maliciousLinks} />);
+      expect(spyConsoleWarn).toBeCalledTimes(12);
+    });
+    it("should not render any malicious images", () => {
+      const maliciousImages = `![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
+    ![xss link](javascript:alert(1))
+    `;
+
+      render(<MarkdownRenderer body={maliciousImages} />);
+      expect(spyConsoleWarn).toBeCalledTimes(2);
+    });
+    it("should not render malicious html tags as links", () => {
+      const maliciousTags = `<p>[xss link](javascript:alert(1))</p>
+    <p>[xss link](JAVASCRIPT:alert(1))</p>
+    <p>[xss link](vbscript:alert(1))</p>
+    <p>[xss link](VBSCRIPT:alert(1))</p>
+    <p>[xss link](file:///123)</p>`;
+
+      render(<MarkdownRenderer body={maliciousTags} />);
+      expect(spyConsoleWarn).not.toBeCalled();
+      const links = screen.queryAllByRole("link");
+      expect(links).toBeArrayOfSize(0);
+    });
+  });
+});
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
new file mode 100644
index 000000000..22231a11f
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
@@ -0,0 +1,80 @@
+import React from "react";
+import xssFilters from "xss-filters";
+
+export const XSS_ALERT =
+  "You tried to render a malicious URL. The URL is being converted in order to avoid XSS attacks";
+
+export const traverseChildren = (el, cb) => {
+  const filterChildren = (c) =>
+    React.Children.map(c, (child) => traverseChildren(child, cb));
+  let newElement = null;
+  if (el.children) {
+    newElement = {
+      ...el,
+      children: filterChildren(el.children),
+    };
+  } else if (el.props && el.props.children) {
+    const filteredChildren = filterChildren(el.props.children);
+    newElement = {
+      ...el,
+      props: {
+        ...el.props,
+        children: filteredChildren,
+      },
+    };
+  }
+  return newElement ? cb(newElement) : cb(el);
+};
+
+const isExternalLink = (link) => {
+  const tmpLink = document.createElement("a");
+  tmpLink.href = link;
+  const externalLink =
+    tmpLink.hostname && tmpLink.hostname !== window.top.location.hostname;
+
+  return externalLink;
+};
+
+const LinkRenderer = ({ url, children }) => {
+  function onLinkClick(e) {
+    if (isExternalLink(url)) {
+      e.preventDefault();
+      console.log("clicked URL:", url);
+    }
+  }
+  return (
+    <a href={url} onClick={onLinkClick}>
+      {children}
+    </a>
+  );
+};
+
+// Use external link renderer when images are not allowed
+const imageHandler =
+  (renderImages) =>
+  ({ src, alt }) => {
+    const filteredSrc = xssFilters.uriInDoubleQuotedAttr(src);
+    if (filteredSrc !== src) {
+      console.warn(XSS_ALERT);
+    }
+    return renderImages ? (
+      <img src={filteredSrc} alt={alt} />
+    ) : (
+      <LinkRenderer url={filteredSrc}>{alt}</LinkRenderer>
+    );
+  };
+
+const linkHandler = ({ href, children }) => {
+  const newHref = xssFilters.uriInDoubleQuotedAttr(href);
+  if (newHref !== href) {
+    console.warn(XSS_ALERT);
+  }
+  return <LinkRenderer url={newHref}>{children}</LinkRenderer>;
+};
+
+export const customRenderers = (renderImages) => {
+  return {
+    img: imageHandler(renderImages),
+    a: linkHandler,
+  };
+};
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/index.js b/plugins-structure/packages/common-ui/src/components/Markdown/index.js
new file mode 100644
index 000000000..027da31a4
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/index.js
@@ -0,0 +1 @@
+export * from "./MarkdownRenderer";
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
new file mode 100644
index 000000000..f258bef59
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
@@ -0,0 +1,523 @@
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  color: var(--text-color);
+  font-family: "Source Sans Prop", sans-serif;
+  font-size: var(--font-size-regular);
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.dark .markdown-body {
+  color: var(--tab-text-active-color);
+}
+
+.markdown-body details {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body a {
+  background-color: transparent;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body strong {
+  font-weight: inherit;
+  font-weight: bolder;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+.markdown-body img {
+  border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+}
+
+.markdown-body input {
+  overflow: visible;
+}
+
+.markdown-body [type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body * {
+  box-sizing: border-box;
+}
+
+.markdown-body input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+}
+
+.markdown-body hr:before {
+  content: "";
+  display: table;
+}
+
+.markdown-body hr:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body h1 {
+  font-size: 32px;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  font-weight: 600;
+}
+
+.markdown-body h2 {
+  font-size: 24px;
+}
+
+.markdown-body h3 {
+  font-size: 20px;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+  font-weight: 600;
+}
+
+.markdown-body h4 {
+  font-size: 16px;
+}
+
+.markdown-body h5 {
+  font-size: 14px;
+}
+
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+}
+
+.markdown-body h6 {
+  font-size: 12px;
+}
+
+.markdown-body p {
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body:before {
+  content: "";
+  display: table;
+}
+
+.markdown-body:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.markdown-body > :first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > :last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body blockquote,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+.markdown-body hr {
+  background-color: #e1e4e8;
+  border: 0;
+  height: 0.25em;
+  margin: 24px 0;
+  padding: 0;
+}
+
+.markdown-body blockquote {
+  border-left: 0.25em solid #dfe2e5;
+  color: #6a737d;
+  padding: 0 1em;
+}
+
+.dark .markdown-body blockquote {
+  border-left: 0.25em solid var(--separator-color);
+  color: var(--text-color);
+}
+
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body kbd {
+  background-color: #fafbfc;
+  border: 1px solid #c6cbd1;
+  border-bottom-color: #959da5;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #959da5;
+  color: #444d56;
+  display: inline-block;
+  font-size: 11px;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.dark .markdown-body h1,
+.dark .markdown-body h2 {
+  border-bottom: 1px solid var(--separator-color);
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  color: #6a737d;
+  font-size: 0.85em;
+}
+
+.dark .markdown-body h6 {
+  color: var(--text-color);
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+}
+
+.markdown-body li > p {
+  margin-top: 16px;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+  margin-top: 16px;
+  padding: 0;
+}
+
+.markdown-body dl dd {
+  margin-bottom: 16px;
+  padding: 0 16px;
+}
+
+.markdown-body table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  border: 1px solid var(--md-table-cell-border-color);
+  padding: 6px 13px;
+}
+
+.markdown-body table tr {
+  background-color: var(--md-table-odd-row-background);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--md-table-even-row-background);
+}
+
+.markdown-body img {
+  background-color: #fff;
+  box-sizing: content-box;
+  max-width: 100%;
+}
+
+.markdown-body img[align="right"] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align="left"] {
+  padding-right: 20px;
+}
+
+.markdown-body code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+}
+
+.markdown-body pre {
+  word-wrap: normal;
+}
+
+.markdown-body pre > code {
+  background: transparent;
+  border: 0;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  font-size: 85%;
+  line-height: 1.45;
+  padding: 16px;
+  max-width: 100%;
+}
+
+.dark .markdown-body .highlight pre,
+.dark .markdown-body pre {
+  background-color: var(--header-color);
+}
+
+.markdown-body pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  word-wrap: normal;
+}
+
+.markdown-body kbd {
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+  color: #444d56;
+  display: inline-block;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+.markdown-body hr {
+  border-bottom-color: #eee;
+}
+
+/* DIFF */
+.markdown-diff > p:first-child {
+  display: none;
+}
+.markdown-diff > p:last-child {
+  display: none;
+}
+.added > * {
+  color: green;
+  background-color: #e2ffe8;
+}
+.removed > * {
+  color: red;
+  background-color: #ffe2e2;
+}
+.md-escape-line {
+  display: none;
+}

From 2b0c4ce8024bfee1f9a4fa4e4103742b93bc5cc3 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 14 Mar 2022 20:57:45 -0300
Subject: [PATCH 02/29] chore(common-ui): Setup tests and dev mode

---
 .../packages/common-ui/babel.config.js        |  19 +
 .../packages/common-ui/jest.config.js         |   7 +
 .../packages/common-ui/package.json           |  10 +-
 .../common-ui/src/__mocks__/styleMock.js      |   2 +
 .../common-ui/src/{ => dev}/index.html        |   0
 .../packages/common-ui/src/dev/index.js       |  19 +
 .../packages/common-ui/webpack.dev.js         |   4 +-
 plugins-structure/yarn.lock                   | 354 +++++++++++++++++-
 8 files changed, 407 insertions(+), 8 deletions(-)
 create mode 100644 plugins-structure/packages/common-ui/babel.config.js
 create mode 100644 plugins-structure/packages/common-ui/src/__mocks__/styleMock.js
 rename plugins-structure/packages/common-ui/src/{ => dev}/index.html (100%)
 create mode 100644 plugins-structure/packages/common-ui/src/dev/index.js

diff --git a/plugins-structure/packages/common-ui/babel.config.js b/plugins-structure/packages/common-ui/babel.config.js
new file mode 100644
index 000000000..62fad0a5d
--- /dev/null
+++ b/plugins-structure/packages/common-ui/babel.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    test: {
+      plugins: [
+        "@babel/plugin-transform-runtime",
+        [
+          "module-resolver",
+          {
+            alias: {
+              "@politeiagui/core": "../core/src",
+              "@politeiagui/core/client": "../core/src/client",
+            },
+          },
+        ],
+      ],
+      presets: ["@babel/preset-react", "@babel/preset-env"],
+    },
+  },
+};
diff --git a/plugins-structure/packages/common-ui/jest.config.js b/plugins-structure/packages/common-ui/jest.config.js
index 9331ce792..c741cb29c 100644
--- a/plugins-structure/packages/common-ui/jest.config.js
+++ b/plugins-structure/packages/common-ui/jest.config.js
@@ -1,4 +1,11 @@
 module.exports = {
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ["jest-extended/all"],
+  transform: {
+    "\\.js$": ["babel-jest", { cwd: __dirname }],
+  },
+  testpathIgnorePatterns: ["/node_modules/(?!react-markdown)(.*)"],
+  moduleNameMapper: {
+    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
 };
diff --git a/plugins-structure/packages/common-ui/package.json b/plugins-structure/packages/common-ui/package.json
index b6bc4122d..051368ea0 100644
--- a/plugins-structure/packages/common-ui/package.json
+++ b/plugins-structure/packages/common-ui/package.json
@@ -13,15 +13,19 @@
     "test:format": "yarn prettier --check",
     "test:eslint": "eslint --ext .js ./src",
     "fix:eslint": "eslint --ext .js ./src --fix",
-    "test:ci": "npm run test:format && npm run test:eslint && cross-env jest --no-cache --passWithNoTests",
-    "test:dev": "npm run test:format && npm run test:eslint && cross-env jest --watchAll --no-cache",
+    "test:ci": "npm run test:format && npm run test:eslint && cross-env NODE_OPTIONS=--experimental-vm-modules jest --no-cache",
+    "test:dev": "npm run test:format && npm run test:eslint && cross-env NODE_OPTIONS=--experimental-vm-modules jest --watchAll --no-cache",
     "test": "is-ci \"test:ci\" \"test:dev\"",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
     "build": "webpack --config webpack.prod.js",
     "start": "webpack serve --config webpack.dev.js --open"
   },
   "dependencies": {
-    "@politeiagui/core": "1.0.0"
+    "@politeiagui/core": "1.0.0",
+    "diff": "^5.0.0",
+    "html-react-parser": "^1.4.8",
+    "react-markdown": "6.0.3",
+    "xss-filters": "^1.2.7"
   },
   "devDependencies": {}
 }
diff --git a/plugins-structure/packages/common-ui/src/__mocks__/styleMock.js b/plugins-structure/packages/common-ui/src/__mocks__/styleMock.js
new file mode 100644
index 000000000..7b9dcb8f6
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/__mocks__/styleMock.js
@@ -0,0 +1,2 @@
+const styles = {};
+export default styles;
diff --git a/plugins-structure/packages/common-ui/src/index.html b/plugins-structure/packages/common-ui/src/dev/index.html
similarity index 100%
rename from plugins-structure/packages/common-ui/src/index.html
rename to plugins-structure/packages/common-ui/src/dev/index.html
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
new file mode 100644
index 000000000..cdbf6a99c
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { DiffHTML } from "../components/Diff";
+
+const newHeaders =
+  "# Header 1\n## Header 2\n### Header 3\n##### common header\n\n";
+const oldHeaders =
+  "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
+const newParagraph = "Paragraph 1\n\nAnother P";
+const oldParagraph = "Paragraph 2\n\nAnother P";
+
+ReactDOM.render(
+  <div id="markdown-diff-wrapper">
+    <DiffHTML oldText={oldHeaders} newText={newHeaders} />
+    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
+    <DiffHTML oldText={oldParagraph} newText={newParagraph} />
+  </div>,
+  document.querySelector("#root")
+);
diff --git a/plugins-structure/packages/common-ui/webpack.dev.js b/plugins-structure/packages/common-ui/webpack.dev.js
index 342d91ecb..82a638c55 100644
--- a/plugins-structure/packages/common-ui/webpack.dev.js
+++ b/plugins-structure/packages/common-ui/webpack.dev.js
@@ -4,13 +4,13 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const plugins = [
   new HtmlWebpackPlugin({
-    template: "./src/index.html",
+    template: "./src/dev/index.html",
   }),
 ];
 
 const dev = {
   mode: "development",
-  entry: "./src/index.js",
+  entry: "./src/dev/index.js",
   devtool: "inline-source-map",
   devServer: {
     port: 3007,
diff --git a/plugins-structure/yarn.lock b/plugins-structure/yarn.lock
index f8b28d345..717b27e67 100644
--- a/plugins-structure/yarn.lock
+++ b/plugins-structure/yarn.lock
@@ -2755,6 +2755,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2807,6 +2814,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/mdast@^3.0.0":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
+  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/minimatch@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -2883,6 +2897,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
 "@types/yargs-parser@*":
   version "20.2.1"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
@@ -3713,6 +3732,11 @@ babel-preset-react-app@^10.0.0:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -4028,6 +4052,21 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -4209,6 +4248,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -4662,6 +4706,13 @@ debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.0.0:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -4828,6 +4879,11 @@ diff-sequences@^27.0.6:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
   integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
 
+diff@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
+  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -4923,6 +4979,13 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@4.3.0, domhandler@^4.2.2:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domhandler@^4.0.0, domhandler@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
@@ -4939,6 +5002,15 @@ domutils@^2.5.2, domutils@^2.6.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -5057,6 +5129,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -5500,7 +5577,7 @@ express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@~3.0.2:
+extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -6067,6 +6144,14 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+html-dom-parser@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-1.1.0.tgz#daf0ff559bb0c4ffe7543d507baeaf1e2ca14e2c"
+  integrity sha512-x3MOz8S8BkihGgggtp2N0U+JAWlD9iGERbjuBJH+gIGF9B1kGQh5x489IQ0YPqi8HyMIWCRLdJY1q3IaQlqG/Q==
+  dependencies:
+    domhandler "4.3.0"
+    htmlparser2 "7.2.0"
+
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -6097,6 +6182,16 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-react-parser@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.4.8.tgz#27bc0f9dc294c875daeca8a21a48d5b845a1364e"
+  integrity sha512-5XsBdFVhJLxdtRp7tWwZ6DwqOt6fJ+2lJc0lctwjX1yaxWNB41S5uzqii7vJcSCaabM+CK28U75e5f4wIMqdSg==
+  dependencies:
+    domhandler "4.3.0"
+    html-dom-parser "1.1.0"
+    react-property "2.0.0"
+    style-to-js "1.1.0"
+
 html-webpack-plugin@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.3.2.tgz#7b04bf80b1f6fe84a6d3f66c8b79d64739321b08"
@@ -6108,6 +6203,16 @@ html-webpack-plugin@^5.3.2:
     pretty-error "^3.0.4"
     tapable "^2.0.0"
 
+htmlparser2@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
+  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.2"
+    domutils "^2.8.0"
+    entities "^3.0.1"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -6332,6 +6437,11 @@ init-package-json@^2.0.2:
     validate-npm-package-license "^3.0.4"
     validate-npm-package-name "^3.0.0"
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inquirer@^7.3.3:
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
@@ -6395,6 +6505,19 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -6430,6 +6553,11 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-callable@^1.1.4, is-callable@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
@@ -6478,6 +6606,11 @@ is-date-object@^1.0.1:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -6517,6 +6650,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-ip@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-ip/-/is-ip-3.1.0.tgz#2ae5ddfafaf05cb8008a62093cf29734f657c5d8"
@@ -7654,6 +7792,48 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdast-util-definitions@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz#c5c1a84db799173b4dcf7643cda999e440c24db2"
+  integrity sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+mdast-util-from-markdown@^0.8.0:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
+  integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-string "^2.0.0"
+    micromark "~2.11.0"
+    parse-entities "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+mdast-util-to-hast@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz#61875526a017d8857b71abc9333942700b2d3604"
+  integrity sha512-JoPBfJ3gBnHZ18icCwHR50orC9kNH81tiR1gs01D8Q5YpV6adHNO9nKNuFBCJQ941/32PT1a63UF/DitmS3amQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    mdast-util-definitions "^4.0.0"
+    mdurl "^1.0.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^2.0.0"
+
+mdast-util-to-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
+  integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
+
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -7733,6 +7913,14 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
+micromark@~2.11.0:
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
+  integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
+  dependencies:
+    debug "^4.0.0"
+    parse-entities "^2.0.0"
+
 micromatch@^4.0.2, micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
@@ -8568,6 +8756,18 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -8917,6 +9117,13 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-information@^5.3.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -9067,7 +9274,7 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+react-is@^17.0.0, react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -9077,6 +9284,30 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-markdown@6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.3.tgz#625ec767fa321d91801129387e7d31ee0cb99254"
+  integrity sha512-kQbpWiMoBHnj9myLlmZG9T1JdoT/OEyHK7hqM6CqFT14MAkgWiWBUYijLyBmxbntaN6dCDicPcUhWhci1QYodg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.3"
+    comma-separated-tokens "^1.0.0"
+    prop-types "^15.7.2"
+    property-information "^5.3.0"
+    react-is "^17.0.0"
+    remark-parse "^9.0.0"
+    remark-rehype "^8.0.0"
+    space-separated-tokens "^1.1.0"
+    style-to-object "^0.3.0"
+    unified "^9.0.0"
+    unist-util-visit "^2.0.0"
+    vfile "^4.0.0"
+
+react-property@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
+  integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
+
 react-redux@^7.2.4:
   version "7.2.4"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
@@ -9371,6 +9602,20 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-parse@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640"
+  integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==
+  dependencies:
+    mdast-util-from-markdown "^0.8.0"
+
+remark-rehype@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-8.1.0.tgz#610509a043484c1e697437fa5eb3fd992617c945"
+  integrity sha512-EbCu9kHgAxKmW1yEYjx3QafMyGY3q8noUbNUI5xyKbaFP89wbhDrKxyIQNukNYthzjNHZu6J7hwFg7hRm1svYA==
+  dependencies:
+    mdast-util-to-hast "^10.2.0"
+
 renderkid@^2.0.6:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.7.tgz#464f276a6bdcee606f4a15993f9b29fc74ca8609"
@@ -9844,6 +10089,11 @@ source-map@^0.7.2, source-map@^0.7.3, source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+space-separated-tokens@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -10123,6 +10373,20 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+style-to-js@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.0.tgz#631cbb20fce204019b3aa1fcb5b69d951ceac4ac"
+  integrity sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==
+  dependencies:
+    style-to-object "0.3.0"
+
+style-to-object@0.3.0, style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -10392,6 +10656,11 @@ trim-off-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
   integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
 
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
 tsconfig-paths@^3.9.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz#79ae67a68c15289fdf5c51cb74f397522d795ed7"
@@ -10552,6 +10821,18 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
+unified@^9.0.0:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
+  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
 unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
@@ -10566,6 +10847,50 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+unist-builder@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
+
+unist-util-generated@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b"
+  integrity sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==
+
+unist-util-is@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
+  integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
+
+unist-util-position@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
+  integrity sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==
+
+unist-util-stringify-position@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
+  dependencies:
+    "@types/unist" "^2.0.2"
+
+unist-util-visit-parents@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz#65a6ce698f78a6b0f56aa0e88f13801886cdaef6"
+  integrity sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+
+unist-util-visit@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
+  integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 universal-user-agent@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
@@ -10676,6 +11001,24 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-message@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+vfile@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
+  integrity sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+    vfile-message "^2.0.0"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -11022,7 +11365,12 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@~4.0.1:
+xss-filters@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/xss-filters/-/xss-filters-1.2.7.tgz#59fa1de201f36f2f3470dcac5f58ccc2830b0a9a"
+  integrity sha1-Wfod4gHzby80cNysX1jMwoMLCpo=
+
+xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

From 83e67420ba27be421514bf6224efa98bbb8c2be3 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 14 Mar 2022 20:58:01 -0300
Subject: [PATCH 03/29] feat(common-ui): Add Markdown Diff

---
 .../src/components/Diff/MarkdownDiff.js       | 35 ++++++++++++++++
 .../src/components/Diff/MarkdownDiff.test.js  | 41 +++++++++++++++++++
 .../common-ui/src/components/Diff/index.js    |  1 +
 3 files changed, 77 insertions(+)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Diff/index.js

diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
new file mode 100644
index 000000000..e4e201a9c
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
@@ -0,0 +1,35 @@
+import React from "react";
+import parse from "html-react-parser";
+import { diffTrimmedLines } from "diff";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MarkdownRenderer } from "../Markdown";
+
+function joinDiffLines(diff) {
+  return diff.reduce((acc, line) => {
+    if (line.added) {
+      return `${acc} <span class="added" data-testid="md-line-added">${line.value}</span>`;
+    }
+    if (line.removed) {
+      return `${acc} <span class="removed" data-testid="md-line-removed">${line.value}</span>`;
+    }
+    return `${acc} ${line.value}`;
+  }, "");
+}
+
+const escapeStr = "\n\n--- Diff --- \n\n";
+
+export function getDiffHTML(oldText, newText) {
+  const oldMarkdown = renderToStaticMarkup(
+    <MarkdownRenderer body={escapeStr + oldText + escapeStr} isDiff={true} />
+  );
+  const newMarkdown = renderToStaticMarkup(
+    <MarkdownRenderer body={escapeStr + newText + escapeStr} isDiff={true} />
+  );
+  const diff = diffTrimmedLines(oldMarkdown, newMarkdown);
+  return joinDiffLines(diff);
+}
+
+export function DiffHTML({ oldText, newText }) {
+  const html = getDiffHTML(oldText, newText);
+  return parse(html);
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
new file mode 100644
index 000000000..666422cc2
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { DiffHTML } from "./MarkdownDiff";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Given DiffHTML method", () => {
+  describe("when headers are different", () => {
+    const newHeaders =
+      "# Header 1\n## Header 2\n### Header 3\n##### common header\n\n";
+    const oldHeaders =
+      "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
+
+    it("should return correct diff lines length", () => {
+      render(<DiffHTML oldText={oldHeaders} newText={newHeaders} />);
+      const h2 = screen.getAllByText("Header 2");
+      expect(h2).toHaveLength(1);
+      const h1 = screen.getAllByText("Header 1");
+      const h1Add = screen.getAllByText("Header 1 ADD");
+      expect(h1).toHaveLength(1);
+      expect(h1Add).toHaveLength(1);
+      const commonHeader = screen.getAllByText("common header");
+      expect(commonHeader).toHaveLength(1);
+
+      expect(screen.getAllByTestId("md-line-added")).toHaveLength(2);
+      expect(screen.getAllByTestId("md-line-removed")).toHaveLength(2);
+    });
+  });
+  describe("when paragraps are different", () => {
+    const newParagraph = "Paragraph 1\n\nAnother P";
+    const oldParagraph = "Paragraph 2\n\nAnother P";
+
+    it("should return correct diff lines length", () => {
+      render(<DiffHTML oldText={oldParagraph} newText={newParagraph} />);
+      const linesAdded = screen.getAllByTestId("md-line-added");
+      const linesRemoved = screen.getAllByTestId("md-line-removed");
+      expect(linesAdded).toHaveLength(1);
+      expect(linesRemoved).toHaveLength(1);
+      expect(screen.getAllByText("Another P")).toHaveLength(1);
+    });
+  });
+});
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/index.js b/plugins-structure/packages/common-ui/src/components/Diff/index.js
new file mode 100644
index 000000000..ddc8771d6
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Diff/index.js
@@ -0,0 +1 @@
+export * from "./MarkdownDiff";

From 7eb42e0f954db041e6d1299486fa4c15a5c96b45 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Tue, 15 Mar 2022 12:32:08 -0300
Subject: [PATCH 04/29] test(common-ui): improve markdown diff tests

---
 .../src/components/Diff/MarkdownDiff.js       |  2 +-
 .../src/components/Diff/MarkdownDiff.test.js  | 87 +++++++++++++++++--
 2 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
index e4e201a9c..8dc5c1a5d 100644
--- a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
@@ -16,7 +16,7 @@ function joinDiffLines(diff) {
   }, "");
 }
 
-const escapeStr = "\n\n--- Diff --- \n\n";
+const escapeStr = "\n\n --- Diff --- \n\n";
 
 export function getDiffHTML(oldText, newText) {
   const oldMarkdown = renderToStaticMarkup(
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
index 666422cc2..265b37ab9 100644
--- a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
@@ -3,14 +3,13 @@ import { DiffHTML } from "./MarkdownDiff";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-describe("Given DiffHTML method", () => {
+describe("Given DiffHTML", () => {
   describe("when headers are different", () => {
     const newHeaders =
       "# Header 1\n## Header 2\n### Header 3\n##### common header\n\n";
     const oldHeaders =
       "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
-
-    it("should return correct diff lines length", () => {
+    it("should return correct diff", () => {
       render(<DiffHTML oldText={oldHeaders} newText={newHeaders} />);
       const h2 = screen.getAllByText("Header 2");
       expect(h2).toHaveLength(1);
@@ -25,11 +24,10 @@ describe("Given DiffHTML method", () => {
       expect(screen.getAllByTestId("md-line-removed")).toHaveLength(2);
     });
   });
-  describe("when paragraps are different", () => {
+  describe("when paragraphs are different", () => {
     const newParagraph = "Paragraph 1\n\nAnother P";
     const oldParagraph = "Paragraph 2\n\nAnother P";
-
-    it("should return correct diff lines length", () => {
+    it("should return correct diff", () => {
       render(<DiffHTML oldText={oldParagraph} newText={newParagraph} />);
       const linesAdded = screen.getAllByTestId("md-line-added");
       const linesRemoved = screen.getAllByTestId("md-line-removed");
@@ -38,4 +36,81 @@ describe("Given DiffHTML method", () => {
       expect(screen.getAllByText("Another P")).toHaveLength(1);
     });
   });
+  describe("when paragraphs are replaced by headers", () => {
+    const paragraph = "My Text";
+    const header = "# My Text";
+    it("should return correct diff", () => {
+      render(<DiffHTML oldText={paragraph} newText={header} />);
+      const removedParagraph = screen.getByTestId("md-line-removed");
+      const addedHeader = screen.getByTestId("md-line-added");
+      // Removed element: <p>My Text</p>
+      expect(removedParagraph).toHaveTextContent("My Text");
+      expect(removedParagraph.firstChild.nodeName).toEqual("P");
+      // Added element: <h1>My Text</h1>
+      expect(addedHeader).toHaveTextContent("My Text");
+      expect(addedHeader.firstChild.nodeName).toEqual("H1");
+    });
+  });
+  describe("when texts are equal", () => {
+    const text = "Sed porttitor lectus nibh.";
+    it("should not return any diff", () => {
+      render(<DiffHTML oldText={text} newText={text} />);
+      expect(screen.queryAllByTestId("md-line-removed")).toHaveLength(0);
+      expect(screen.queryAllByTestId("md-line-added")).toHaveLength(0);
+      const textElement = screen.getByText(text);
+      expect(textElement.nodeName).toEqual("P");
+    });
+  });
+  describe("when old text is empty", () => {
+    const text = "Sed porttitor lectus nibh.";
+    it("should return all new text marked as added", () => {
+      render(<DiffHTML oldText="" newText={text} />);
+      expect(screen.queryAllByTestId("md-line-removed")).toHaveLength(0);
+      expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+      const textElement = screen.getByText(text);
+      expect(textElement.parentElement.className).toEqual("added");
+    });
+  });
+  describe("when new text is empty", () => {
+    const text = "Sed porttitor lectus nibh.";
+    it("should return all new text marked as removed", () => {
+      render(<DiffHTML oldText={text} newText="" />);
+      expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+      expect(screen.queryAllByTestId("md-line-added")).toHaveLength(0);
+      const textElement = screen.getByText(text);
+      expect(textElement.parentElement.className).toEqual("removed");
+    });
+  });
+  describe("when links are different", () => {
+    describe("for different link labels", () => {
+      const oldLink = "[my link](http://mylink.com)";
+      const newLink = "[my new link](http://mylink.com)";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldLink} newText={newLink} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("my link");
+        expect(oldElement.getAttribute("href")).toEqual("http://mylink.com");
+        expect(oldElement.parentNode.parentNode).toHaveClass("removed");
+        const newElement = screen.getByText("my new link");
+        expect(newElement.getAttribute("href")).toEqual("http://mylink.com");
+        expect(newElement.parentNode.parentNode).toHaveClass("added");
+      });
+    });
+    describe("for different link values", () => {
+      const oldLink = "[my link](http://mylink.com)";
+      const newLink = "[my link](http://mylinknew.com)";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldLink} newText={newLink} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText("my link")[0];
+        expect(oldElement.getAttribute("href")).toEqual("http://mylink.com");
+        expect(oldElement.parentNode.parentNode).toHaveClass("removed");
+        const newElement = screen.getAllByText("my link")[1];
+        expect(newElement.getAttribute("href")).toEqual("http://mylinknew.com");
+        expect(newElement.parentNode.parentNode).toHaveClass("added");
+      });
+    });
+  });
 });

From a59af6f7e8708c201818c8ce0a61818c18c8edb8 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Tue, 15 Mar 2022 14:00:24 -0300
Subject: [PATCH 05/29] test(common-ui): improve diff tests

---
 .../src/components/Diff/MarkdownDiff.js       |  8 ++-
 .../src/components/Diff/MarkdownDiff.test.js  | 65 ++++++++++++++++++-
 .../src/components/Markdown/styles.css        |  8 +++
 .../packages/common-ui/src/dev/index.js       | 12 ++++
 4 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
index 8dc5c1a5d..14f3a6032 100644
--- a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
@@ -3,16 +3,18 @@ import parse from "html-react-parser";
 import { diffTrimmedLines } from "diff";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MarkdownRenderer } from "../Markdown";
+import trim from "lodash/trim";
 
 function joinDiffLines(diff) {
   return diff.reduce((acc, line) => {
+    const value = trim(line.value);
     if (line.added) {
-      return `${acc} <span class="added" data-testid="md-line-added">${line.value}</span>`;
+      return `${acc} <span class="added" data-testid="md-line-added">${value}</span>`;
     }
     if (line.removed) {
-      return `${acc} <span class="removed" data-testid="md-line-removed">${line.value}</span>`;
+      return `${acc} <span class="removed" data-testid="md-line-removed">${value}</span>`;
     }
-    return `${acc} ${line.value}`;
+    return `${acc} ${value}`;
   }, "");
 }
 
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
index 265b37ab9..d6bef5848 100644
--- a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
@@ -82,7 +82,7 @@ describe("Given DiffHTML", () => {
     });
   });
   describe("when links are different", () => {
-    describe("for different link labels", () => {
+    describe("given different link labels", () => {
       const oldLink = "[my link](http://mylink.com)";
       const newLink = "[my new link](http://mylink.com)";
       it("should return correct diff", () => {
@@ -97,7 +97,7 @@ describe("Given DiffHTML", () => {
         expect(newElement.parentNode.parentNode).toHaveClass("added");
       });
     });
-    describe("for different link values", () => {
+    describe("given different link values", () => {
       const oldLink = "[my link](http://mylink.com)";
       const newLink = "[my link](http://mylinknew.com)";
       it("should return correct diff", () => {
@@ -112,5 +112,66 @@ describe("Given DiffHTML", () => {
         expect(newElement.parentNode.parentNode).toHaveClass("added");
       });
     });
+    describe("given different html raw links", () => {
+      const link = "<a href='javascript:void(0)'>my link</a>";
+      it("should render raw html as text, not as element", () => {
+        render(<DiffHTML oldText={link} newText="" />);
+        const removedLines = screen.getAllByTestId("md-line-removed");
+        expect(removedLines).toHaveLength(1);
+        const oldElement = screen.queryByText("my link");
+        expect(oldElement).toBeFalsy();
+        const rawLinkParagraph = removedLines[0].firstChild;
+        expect(rawLinkParagraph.nodeName).toEqual("P");
+        expect(rawLinkParagraph.firstChild.textContent).toEqual(link);
+        expect(rawLinkParagraph.firstChild.nodeName).toEqual("#text");
+      });
+    });
+    describe("given equal html raw links", () => {
+      const link = "<a href='javascript:void(0)'>my link</a>";
+      it("should render raw html as text, not as element", () => {
+        render(<DiffHTML oldText={link} newText={link} />);
+        const removedLines = screen.queryAllByTestId("md-line-removed");
+        const addedLines = screen.queryAllByTestId("md-line-added");
+        expect(removedLines).toHaveLength(0);
+        expect(addedLines).toHaveLength(0);
+        const renderedElement = screen.queryByText("my link");
+        expect(renderedElement).toBeFalsy();
+        const element = screen.getByText(link);
+        expect(element.nodeName).toEqual("P");
+        expect(element).toHaveTextContent(link);
+      });
+    });
+  });
+  describe("when using strong texts", () => {
+    describe("given different strong texts", () => {
+      const oldText = "**old**";
+      const newText = "**new**";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldText} newText={newText} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("old");
+        const newElement = screen.getByText("new");
+        expect(oldElement.nodeName).toEqual("STRONG");
+        expect(oldElement.parentElement.parentElement).toHaveClass("removed");
+        expect(newElement.nodeName).toEqual("STRONG");
+        expect(newElement.parentElement.parentElement).toHaveClass("added");
+      });
+    });
+    describe("given same text, but one strong and other regular", () => {
+      const oldText = "**old**";
+      const newText = "old";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldText} newText={newText} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText("old")[0];
+        const newElement = screen.getAllByText("old")[1];
+        expect(oldElement.nodeName).toEqual("STRONG");
+        expect(oldElement.parentElement.parentElement).toHaveClass("removed");
+        expect(newElement.nodeName).toEqual("P");
+        expect(newElement.parentElement).toHaveClass("added");
+      });
+    });
   });
 });
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
index f258bef59..54b22b1f5 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
@@ -510,6 +510,10 @@
 .markdown-diff > p:last-child {
   display: none;
 }
+.added {
+  color: green;
+  background-color: #e2ffe8;
+}
 .added > * {
   color: green;
   background-color: #e2ffe8;
@@ -518,6 +522,10 @@
   color: red;
   background-color: #ffe2e2;
 }
+.removed {
+  color: red;
+  background-color: #ffe2e2;
+}
 .md-escape-line {
   display: none;
 }
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
index cdbf6a99c..350668313 100644
--- a/plugins-structure/packages/common-ui/src/dev/index.js
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -8,12 +8,24 @@ const oldHeaders =
   "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
 const newParagraph = "Paragraph 1\n\nAnother P";
 const oldParagraph = "Paragraph 2\n\nAnother P";
+const oldLink = "[my link](http://mylink.com)";
+const newLink = "[my link](http://mylinknew.com)";
+const p1 =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.";
+const p2 =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.";
 
 ReactDOM.render(
   <div id="markdown-diff-wrapper">
     <DiffHTML oldText={oldHeaders} newText={newHeaders} />
     <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
     <DiffHTML oldText={oldParagraph} newText={newParagraph} />
+    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
+    <DiffHTML oldText={oldLink} newText={newLink} />
+    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
+    <DiffHTML oldText="**old**" newText="old" />
+    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
+    <DiffHTML oldText={p1} newText={p2} />
   </div>,
   document.querySelector("#root")
 );

From 86b1386aabc16e97c81d0fd469bbfc726e93e4e9 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 11:39:23 -0300
Subject: [PATCH 06/29] chore(common-ui): add remark gfm plugin

---
 .../packages/common-ui/package.json           |   3 +-
 plugins-structure/yarn.lock                   | 147 +++++++++++++++++-
 2 files changed, 147 insertions(+), 3 deletions(-)

diff --git a/plugins-structure/packages/common-ui/package.json b/plugins-structure/packages/common-ui/package.json
index 051368ea0..9ea77342b 100644
--- a/plugins-structure/packages/common-ui/package.json
+++ b/plugins-structure/packages/common-ui/package.json
@@ -24,7 +24,8 @@
     "@politeiagui/core": "1.0.0",
     "diff": "^5.0.0",
     "html-react-parser": "^1.4.8",
-    "react-markdown": "6.0.3",
+    "react-markdown": "^6.0.3",
+    "remark-gfm": "1.0.0",
     "xss-filters": "^1.2.7"
   },
   "devDependencies": {}
diff --git a/plugins-structure/yarn.lock b/plugins-structure/yarn.lock
index 717b27e67..810b0494f 100644
--- a/plugins-structure/yarn.lock
+++ b/plugins-structure/yarn.lock
@@ -4022,6 +4022,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+ccount@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
+  integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
+
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -7675,6 +7680,11 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+longest-streak@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7783,6 +7793,13 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
   integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
 
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
+  dependencies:
+    repeat-string "^1.0.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7799,6 +7816,15 @@ mdast-util-definitions@^4.0.0:
   dependencies:
     unist-util-visit "^2.0.0"
 
+mdast-util-find-and-replace@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-1.1.1.tgz#b7db1e873f96f66588c321f1363069abf607d1b5"
+  integrity sha512-9cKl33Y21lyckGzpSmEQnIDjEfeeWelN5s1kUW1LwdB0Fkuq2u+4GdqcGEygYxJE8GVqCl0741bYXHgamfWAZA==
+  dependencies:
+    escape-string-regexp "^4.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 mdast-util-from-markdown@^0.8.0:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
@@ -7810,6 +7836,48 @@ mdast-util-from-markdown@^0.8.0:
     parse-entities "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
+mdast-util-gfm-autolink-literal@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-0.1.3.tgz#9c4ff399c5ddd2ece40bd3b13e5447d84e385fb7"
+  integrity sha512-GjmLjWrXg1wqMIO9+ZsRik/s7PLwTaeCHVB7vRxUwLntZc8mzmTsLVr6HW1yLokcnhfURsn5zmSVdi3/xWWu1A==
+  dependencies:
+    ccount "^1.0.0"
+    mdast-util-find-and-replace "^1.1.0"
+    micromark "^2.11.3"
+
+mdast-util-gfm-strikethrough@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-0.2.3.tgz#45eea337b7fff0755a291844fbea79996c322890"
+  integrity sha512-5OQLXpt6qdbttcDG/UxYY7Yjj3e8P7X16LzvpX8pIQPYJ/C2Z1qFGMmcw+1PZMUM3Z8wt8NRfYTvCni93mgsgA==
+  dependencies:
+    mdast-util-to-markdown "^0.6.0"
+
+mdast-util-gfm-table@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-0.1.6.tgz#af05aeadc8e5ee004eeddfb324b2ad8c029b6ecf"
+  integrity sha512-j4yDxQ66AJSBwGkbpFEp9uG/LS1tZV3P33fN1gkyRB2LoRL+RR3f76m0HPHaby6F4Z5xr9Fv1URmATlRRUIpRQ==
+  dependencies:
+    markdown-table "^2.0.0"
+    mdast-util-to-markdown "~0.6.0"
+
+mdast-util-gfm-task-list-item@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-0.1.6.tgz#70c885e6b9f543ddd7e6b41f9703ee55b084af10"
+  integrity sha512-/d51FFIfPsSmCIRNp7E6pozM9z1GYPIkSy1urQ8s/o4TC22BZ7DqfHFWiqBD23bc7J3vV1Fc9O4QIHBlfuit8A==
+  dependencies:
+    mdast-util-to-markdown "~0.6.0"
+
+mdast-util-gfm@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-0.1.2.tgz#8ecddafe57d266540f6881f5c57ff19725bd351c"
+  integrity sha512-NNkhDx/qYcuOWB7xHUGWZYVXvjPFFd6afg6/e2g+SV4r9q5XUcCbV4Wfa3DLYIiD+xAEZc6K4MGaE/m0KDcPwQ==
+  dependencies:
+    mdast-util-gfm-autolink-literal "^0.1.0"
+    mdast-util-gfm-strikethrough "^0.2.0"
+    mdast-util-gfm-table "^0.1.0"
+    mdast-util-gfm-task-list-item "^0.1.0"
+    mdast-util-to-markdown "^0.6.1"
+
 mdast-util-to-hast@^10.2.0:
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz#61875526a017d8857b71abc9333942700b2d3604"
@@ -7824,6 +7892,18 @@ mdast-util-to-hast@^10.2.0:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
+mdast-util-to-markdown@^0.6.0, mdast-util-to-markdown@^0.6.1, mdast-util-to-markdown@~0.6.0:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe"
+  integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    longest-streak "^2.0.0"
+    mdast-util-to-string "^2.0.0"
+    parse-entities "^2.0.0"
+    repeat-string "^1.0.0"
+    zwitch "^1.0.0"
+
 mdast-util-to-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
@@ -7913,7 +7993,52 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromark@~2.11.0:
+micromark-extension-gfm-autolink-literal@~0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz#53866c1f0c7ef940ae7ca1f72c6faef8fed9f204"
+  integrity sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw==
+  dependencies:
+    micromark "~2.11.3"
+
+micromark-extension-gfm-strikethrough@~0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz#96cb83356ff87bf31670eefb7ad7bba73e6514d1"
+  integrity sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw==
+  dependencies:
+    micromark "~2.11.0"
+
+micromark-extension-gfm-table@~0.4.0:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz#4d49f1ce0ca84996c853880b9446698947f1802b"
+  integrity sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA==
+  dependencies:
+    micromark "~2.11.0"
+
+micromark-extension-gfm-tagfilter@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz#d9f26a65adee984c9ccdd7e182220493562841ad"
+  integrity sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q==
+
+micromark-extension-gfm-task-list-item@~0.3.0:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz#d90c755f2533ed55a718129cee11257f136283b8"
+  integrity sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ==
+  dependencies:
+    micromark "~2.11.0"
+
+micromark-extension-gfm@^0.3.0:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz#36d1a4c089ca8bdfd978c9bd2bf1a0cb24e2acfe"
+  integrity sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A==
+  dependencies:
+    micromark "~2.11.0"
+    micromark-extension-gfm-autolink-literal "~0.5.0"
+    micromark-extension-gfm-strikethrough "~0.6.5"
+    micromark-extension-gfm-table "~0.4.0"
+    micromark-extension-gfm-tagfilter "~0.3.0"
+    micromark-extension-gfm-task-list-item "~0.3.0"
+
+micromark@^2.11.3, micromark@~2.11.0, micromark@~2.11.3:
   version "2.11.4"
   resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
   integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
@@ -9284,7 +9409,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@6.0.3:
+react-markdown@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.3.tgz#625ec767fa321d91801129387e7d31ee0cb99254"
   integrity sha512-kQbpWiMoBHnj9myLlmZG9T1JdoT/OEyHK7hqM6CqFT14MAkgWiWBUYijLyBmxbntaN6dCDicPcUhWhci1QYodg==
@@ -9602,6 +9727,14 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-gfm@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-1.0.0.tgz#9213643001be3f277da6256464d56fd28c3b3c0d"
+  integrity sha512-KfexHJCiqvrdBZVbQ6RopMZGwaXz6wFJEfByIuEwGf0arvITHjiKKZ1dpXujjH9KZdm1//XJQwgfnJ3lmXaDPA==
+  dependencies:
+    mdast-util-gfm "^0.1.0"
+    micromark-extension-gfm "^0.3.0"
+
 remark-parse@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640"
@@ -9627,6 +9760,11 @@ renderkid@^2.0.6:
     lodash "^4.17.21"
     strip-ansi "^3.0.1"
 
+repeat-string@^1.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
 request@^2.88.0, request@^2.88.2:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
@@ -11430,3 +11568,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zwitch@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==

From dd4bdcf0b545158af19554fcebbec600d8d9d694 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 11:39:57 -0300
Subject: [PATCH 07/29] refactor(common-ui): move diff to markdown dir

---
 .../packages/common-ui/src/components/Diff/index.js             | 1 -
 .../common-ui/src/components/{Diff => Markdown}/MarkdownDiff.js | 2 +-
 .../src/components/{Diff => Markdown}/MarkdownDiff.test.js      | 0
 3 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Diff/index.js
 rename plugins-structure/packages/common-ui/src/components/{Diff => Markdown}/MarkdownDiff.js (95%)
 rename plugins-structure/packages/common-ui/src/components/{Diff => Markdown}/MarkdownDiff.test.js (100%)

diff --git a/plugins-structure/packages/common-ui/src/components/Diff/index.js b/plugins-structure/packages/common-ui/src/components/Diff/index.js
deleted file mode 100644
index ddc8771d6..000000000
--- a/plugins-structure/packages/common-ui/src/components/Diff/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./MarkdownDiff";
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
similarity index 95%
rename from plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
rename to plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
index 14f3a6032..68b7a3f68 100644
--- a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
@@ -2,7 +2,7 @@ import React from "react";
 import parse from "html-react-parser";
 import { diffTrimmedLines } from "diff";
 import { renderToStaticMarkup } from "react-dom/server";
-import { MarkdownRenderer } from "../Markdown";
+import { MarkdownRenderer } from ".";
 import trim from "lodash/trim";
 
 function joinDiffLines(diff) {
diff --git a/plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
similarity index 100%
rename from plugins-structure/packages/common-ui/src/components/Diff/MarkdownDiff.test.js
rename to plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js

From 5e1d4a66353032ae2d48c76bd5300be920ceffab Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 11:46:05 -0300
Subject: [PATCH 08/29] test(common-ui): gfm plugin test adjustments

---
 .../components/Markdown/MarkdownDiff.test.js    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index d6bef5848..83d8dae1b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
@@ -114,31 +114,30 @@ describe("Given DiffHTML", () => {
     });
     describe("given different html raw links", () => {
       const link = "<a href='javascript:void(0)'>my link</a>";
-      it("should render raw html as text, not as element", () => {
+      it("should render html content as text, not as element", () => {
         render(<DiffHTML oldText={link} newText="" />);
         const removedLines = screen.getAllByTestId("md-line-removed");
         expect(removedLines).toHaveLength(1);
         const oldElement = screen.queryByText("my link");
-        expect(oldElement).toBeFalsy();
+        expect(oldElement.nodeName).toEqual("P");
         const rawLinkParagraph = removedLines[0].firstChild;
         expect(rawLinkParagraph.nodeName).toEqual("P");
-        expect(rawLinkParagraph.firstChild.textContent).toEqual(link);
+        expect(rawLinkParagraph.firstChild.textContent).toEqual("my link");
         expect(rawLinkParagraph.firstChild.nodeName).toEqual("#text");
       });
     });
     describe("given equal html raw links", () => {
       const link = "<a href='javascript:void(0)'>my link</a>";
-      it("should render raw html as text, not as element", () => {
+      it("should render html content as text, not as element", () => {
         render(<DiffHTML oldText={link} newText={link} />);
         const removedLines = screen.queryAllByTestId("md-line-removed");
         const addedLines = screen.queryAllByTestId("md-line-added");
         expect(removedLines).toHaveLength(0);
         expect(addedLines).toHaveLength(0);
-        const renderedElement = screen.queryByText("my link");
-        expect(renderedElement).toBeFalsy();
-        const element = screen.getByText(link);
-        expect(element.nodeName).toEqual("P");
-        expect(element).toHaveTextContent(link);
+        const renderedElement = screen.getByText("my link");
+        expect(renderedElement.nodeName).toEqual("P");
+        const element = screen.queryByText(link);
+        expect(element).toBeFalsy();
       });
     });
   });

From 7f5c15348b8539a1ce4f4b5bac2258b07a1300d8 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 11:46:31 -0300
Subject: [PATCH 09/29] feat(common-ui): markdown improvements

---
 .../common-ui/src/components/Markdown/MarkdownRenderer.js   | 6 ++++++
 .../packages/common-ui/src/components/Markdown/index.js     | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
index 8feb301d8..d4ceb0759 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { classNames } from "pi-ui";
 import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
 import { customRenderers } from "./helpers";
 import "./styles.css";
 
@@ -10,11 +11,16 @@ export const MarkdownRenderer = ({
   className,
   renderImages = true,
   isDiff,
+  disallowedElements,
 }) => (
   <div className={className} data-testid="markdown-renderer">
     <ReactMarkdown
       className={classNames("markdown-body", isDiff && "markdown-diff")}
+      skipHtml={true}
+      unwrapDisallowed={true}
+      remarkPlugins={[gfm]}
       components={customRenderers(renderImages)}
+      disallowedElements={disallowedElements}
     >
       {body}
     </ReactMarkdown>
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/index.js b/plugins-structure/packages/common-ui/src/components/Markdown/index.js
index 027da31a4..9db364a8a 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/index.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/index.js
@@ -1 +1,3 @@
 export * from "./MarkdownRenderer";
+export * from "./MarkdownEditor";
+export * from "./MarkdownDiff";

From 854833e4d144190ae2afb748a91a1175285c09b2 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 15:52:57 -0300
Subject: [PATCH 10/29] chore(common-ui): add SVG loader

---
 .../packages/common-ui/package.json           |    4 +-
 .../packages/common-ui/webpack.common.js      |    9 +-
 plugins-structure/yarn.lock                   | 1117 ++++++++++++++++-
 3 files changed, 1126 insertions(+), 4 deletions(-)

diff --git a/plugins-structure/packages/common-ui/package.json b/plugins-structure/packages/common-ui/package.json
index 9ea77342b..aa95ecef5 100644
--- a/plugins-structure/packages/common-ui/package.json
+++ b/plugins-structure/packages/common-ui/package.json
@@ -28,5 +28,7 @@
     "remark-gfm": "1.0.0",
     "xss-filters": "^1.2.7"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@svgr/webpack": "^6.2.1"
+  }
 }
diff --git a/plugins-structure/packages/common-ui/webpack.common.js b/plugins-structure/packages/common-ui/webpack.common.js
index e88587a98..5a93658c3 100644
--- a/plugins-structure/packages/common-ui/webpack.common.js
+++ b/plugins-structure/packages/common-ui/webpack.common.js
@@ -33,6 +33,13 @@ const cssRules = [
   },
 ];
 
+const svgRules = [
+  {
+    test: /\.svg$/,
+    use: ["@svgr/webpack"],
+  },
+];
+
 module.exports = {
   entry: "./src/index.js",
   output: {
@@ -45,7 +52,7 @@ module.exports = {
     clean: true,
   },
   module: {
-    rules: [jsRules, ...cssRules],
+    rules: [jsRules, ...cssRules, ...svgRules],
   },
   resolve: {
     fallback: {
diff --git a/plugins-structure/yarn.lock b/plugins-structure/yarn.lock
index 810b0494f..aab6c5320 100644
--- a/plugins-structure/yarn.lock
+++ b/plugins-structure/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@ampproject/remapping@^2.1.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
+  integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.0"
+
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -16,11 +23,23 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.12.1", "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.7", "@babel/compat-data@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
   integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
 
+"@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
+  integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
+
 "@babel/core@7.12.3":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
@@ -64,6 +83,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.15.5":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.7.tgz#f7c28228c83cdf2dbd1b9baa06eaf9df07f0c2f9"
+  integrity sha512-djHlEfFHnSnTAcPb7dATbiM5HxGOP98+3JLBZtjRb5I7RXrw7kFRoG2dXM8cm3H+o11A8IFH/uprmJpwFynRNQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.7"
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helpers" "^7.17.7"
+    "@babel/parser" "^7.17.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.12.1", "@babel/generator@^7.15.0", "@babel/generator@^7.7.2":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.0.tgz#a7d0c172e0d814974bad5aa77ace543b97917f15"
@@ -82,6 +122,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.3", "@babel/generator@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
+  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
@@ -89,6 +138,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz#b939b43f8c37765443a19ae74ad8b15978e0a191"
@@ -97,6 +153,14 @@
     "@babel/helper-explode-assignable-expression" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
+  integrity sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.14.5", "@babel/helper-compilation-targets@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.0.tgz#973df8cbd025515f3ff25db0c05efc704fa79818"
@@ -107,6 +171,16 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
+  integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.0.tgz#c9a137a4d137b2d0e2c649acf536d7ba1a76c0f7"
@@ -119,6 +193,19 @@
     "@babel/helper-replace-supers" "^7.15.0"
     "@babel/helper-split-export-declaration" "^7.14.5"
 
+"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9"
+  integrity sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
 "@babel/helper-create-regexp-features-plugin@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz#c7d5ac5e9cf621c26057722fb7a8a4c5889358c4"
@@ -127,6 +214,14 @@
     "@babel/helper-annotate-as-pure" "^7.14.5"
     regexpu-core "^4.7.1"
 
+"@babel/helper-create-regexp-features-plugin@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
+  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    regexpu-core "^5.0.1"
+
 "@babel/helper-define-polyfill-provider@^0.2.2":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz#0525edec5094653a282688d34d846e4c75e9c0b6"
@@ -141,6 +236,27 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/helper-define-polyfill-provider@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
+  integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/traverse" "^7.13.0"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz#8aa72e708205c7bb643e45c73b4386cdf2a1f645"
@@ -148,6 +264,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-explode-assignable-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
+  integrity sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
@@ -166,6 +289,15 @@
     "@babel/template" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -180,6 +312,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
@@ -194,6 +333,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.0.tgz#0ddaf5299c8179f27f37327936553e9bba60990b"
@@ -208,6 +354,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-member-expression-to-functions@^7.16.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
+  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-module-imports@^7.0.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
@@ -229,6 +382,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.0.tgz#679275581ea056373eddbe360e1419ef23783b08"
@@ -257,6 +417,20 @@
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.6"
 
+"@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
+  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-optimise-call-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
@@ -271,11 +445,23 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-optimise-call-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
+  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-remap-async-to-generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz#51439c913612958f54a987a4ffc9ee587a2045d6"
@@ -285,6 +471,15 @@
     "@babel/helper-wrap-function" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/helper-remap-async-to-generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
+  integrity sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-wrap-function" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
 "@babel/helper-replace-supers@^7.14.5", "@babel/helper-replace-supers@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.0.tgz#ace07708f5bf746bf2e6ba99572cce79b5d4e7f4"
@@ -305,6 +500,17 @@
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/helper-replace-supers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
+  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-simple-access@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz#82e1fec0644a7e775c74d305f212c39f8fe73924"
@@ -319,6 +525,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-simple-access@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
+  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
@@ -326,6 +539,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
+  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-split-export-declaration@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
@@ -340,6 +560,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
@@ -350,11 +577,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helper-wrap-function@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz#5919d115bf0fe328b8a5d63bcb610f51601f2bff"
@@ -365,6 +602,16 @@
     "@babel/traverse" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/helper-wrap-function@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
+  integrity sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==
+  dependencies:
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
 "@babel/helpers@^7.12.1", "@babel/helpers@^7.14.8":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.3.tgz#c96838b752b95dcd525b4e741ed40bb1dc2a1357"
@@ -374,6 +621,15 @@
     "@babel/traverse" "^7.15.0"
     "@babel/types" "^7.15.0"
 
+"@babel/helpers@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.7.tgz#6fc0a24280fd00026e85424bbfed4650e76d7127"
+  integrity sha512-TKsj9NkjJfTBxM7Phfy7kv6yYc4ZcOo+AaWGqQOKTPDOmcGkIFb5xNA746eKisQkm4yavUYh4InYM9S+VnO01w==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -383,6 +639,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
@@ -393,6 +658,18 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016"
   integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==
 
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.7.tgz#fc19b645a5456c8d6fdb6cecd3c66c0173902800"
+  integrity sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
+  integrity sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz#4b467302e1548ed3b1be43beae2cc9cf45e0bb7e"
@@ -402,6 +679,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
     "@babel/plugin-proposal-optional-chaining" "^7.14.5"
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
+  integrity sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
+
 "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.14.9":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.9.tgz#7028dc4fa21dc199bbacf98b39bab1267d0eaf9a"
@@ -411,6 +697,15 @@
     "@babel/helper-remap-async-to-generator" "^7.14.5"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
+"@babel/plugin-proposal-async-generator-functions@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
+  integrity sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-proposal-class-properties@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
@@ -427,6 +722,14 @@
     "@babel/helper-create-class-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-proposal-class-properties@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
+  integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-proposal-class-static-block@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.5.tgz#158e9e10d449c3849ef3ecde94a03d9f1841b681"
@@ -436,6 +739,15 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
+"@babel/plugin-proposal-class-static-block@^7.16.7":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
+  integrity sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.17.6"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
 "@babel/plugin-proposal-decorators@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
@@ -453,6 +765,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
+"@babel/plugin-proposal-dynamic-import@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
+  integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
 "@babel/plugin-proposal-export-namespace-from@^7.12.1", "@babel/plugin-proposal-export-namespace-from@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz#dbad244310ce6ccd083072167d8cea83a52faf76"
@@ -461,6 +781,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
+  integrity sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-json-strings@^7.12.1", "@babel/plugin-proposal-json-strings@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz#38de60db362e83a3d8c944ac858ddf9f0c2239eb"
@@ -469,6 +797,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
+"@babel/plugin-proposal-json-strings@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
+  integrity sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
 "@babel/plugin-proposal-logical-assignment-operators@^7.12.1", "@babel/plugin-proposal-logical-assignment-operators@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz#6e6229c2a99b02ab2915f82571e0cc646a40c738"
@@ -477,6 +813,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
+  integrity sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
@@ -493,6 +837,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
+  integrity sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-proposal-numeric-separator@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
@@ -509,6 +861,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-proposal-numeric-separator@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
+  integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.7.tgz#5920a2b3df7f7901df0205974c0641b13fd9d363"
@@ -520,6 +880,17 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.14.5"
 
+"@babel/plugin-proposal-object-rest-spread@^7.16.7":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
+  integrity sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==
+  dependencies:
+    "@babel/compat-data" "^7.17.0"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.16.7"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.12.1", "@babel/plugin-proposal-optional-catch-binding@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz#939dd6eddeff3a67fdf7b3f044b5347262598c3c"
@@ -528,6 +899,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-proposal-optional-catch-binding@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
+  integrity sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
 "@babel/plugin-proposal-optional-chaining@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
@@ -546,6 +925,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
+"@babel/plugin-proposal-optional-chaining@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
+  integrity sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-proposal-private-methods@^7.12.1", "@babel/plugin-proposal-private-methods@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz#37446495996b2945f30f5be5b60d5e2aa4f5792d"
@@ -554,6 +942,14 @@
     "@babel/helper-create-class-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-proposal-private-methods@^7.16.11":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
+  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.10"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-proposal-private-property-in-object@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz#9f65a4d0493a940b4c01f8aa9d3f1894a587f636"
@@ -564,6 +960,16 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
+"@babel/plugin-proposal-private-property-in-object@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
+  integrity sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.14.5", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8"
@@ -572,6 +978,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
+  integrity sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -712,6 +1126,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-typescript@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
+  integrity sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz#f7187d9588a768dd080bf4c9ffe117ea62f7862a"
@@ -719,6 +1140,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-arrow-functions@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154"
+  integrity sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-async-to-generator@^7.12.1", "@babel/plugin-transform-async-to-generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz#72c789084d8f2094acb945633943ef8443d39e67"
@@ -728,6 +1156,15 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-remap-async-to-generator" "^7.14.5"
 
+"@babel/plugin-transform-async-to-generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
+  integrity sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+
 "@babel/plugin-transform-block-scoped-functions@^7.12.1", "@babel/plugin-transform-block-scoped-functions@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz#e48641d999d4bc157a67ef336aeb54bc44fd3ad4"
@@ -735,6 +1172,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-block-scoped-functions@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
+  integrity sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-block-scoping@^7.12.1", "@babel/plugin-transform-block-scoping@^7.14.5":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz#94c81a6e2fc230bcce6ef537ac96a1e4d2b3afaf"
@@ -742,6 +1186,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-block-scoping@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
+  integrity sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-classes@^7.12.1", "@babel/plugin-transform-classes@^7.14.9":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.9.tgz#2a391ffb1e5292710b00f2e2c210e1435e7d449f"
@@ -755,6 +1206,20 @@
     "@babel/helper-split-export-declaration" "^7.14.5"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
+  integrity sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.12.1", "@babel/plugin-transform-computed-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz#1b9d78987420d11223d41195461cc43b974b204f"
@@ -762,6 +1227,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-computed-properties@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
+  integrity sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz#0ad58ed37e23e22084d109f185260835e5557576"
@@ -769,6 +1241,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-destructuring@^7.16.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
+  integrity sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.14.5", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz#2f6bf76e46bdf8043b4e7e16cf24532629ba0c7a"
@@ -777,6 +1256,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-dotall-regex@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
+  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-duplicate-keys@^7.12.1", "@babel/plugin-transform-duplicate-keys@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz#365a4844881bdf1501e3a9f0270e7f0f91177954"
@@ -784,6 +1271,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-duplicate-keys@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
+  integrity sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-exponentiation-operator@^7.12.1", "@babel/plugin-transform-exponentiation-operator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz#5154b8dd6a3dfe6d90923d61724bd3deeb90b493"
@@ -792,6 +1286,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-exponentiation-operator@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
+  integrity sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-flow-strip-types@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
@@ -807,6 +1309,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-for-of@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
+  integrity sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-function-name@^7.12.1", "@babel/plugin-transform-function-name@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz#e81c65ecb900746d7f31802f6bed1f52d915d6f2"
@@ -815,6 +1324,15 @@
     "@babel/helper-function-name" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
+  integrity sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-literals@^7.12.1", "@babel/plugin-transform-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz#41d06c7ff5d4d09e3cf4587bd3ecf3930c730f78"
@@ -822,6 +1340,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-literals@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
+  integrity sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-member-expression-literals@^7.12.1", "@babel/plugin-transform-member-expression-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz#b39cd5212a2bf235a617d320ec2b48bcc091b8a7"
@@ -829,6 +1354,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-member-expression-literals@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
+  integrity sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-modules-amd@^7.12.1", "@babel/plugin-transform-modules-amd@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz#4fd9ce7e3411cb8b83848480b7041d83004858f7"
@@ -838,6 +1370,15 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-amd@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
+  integrity sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-commonjs@^7.12.1", "@babel/plugin-transform-modules-commonjs@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.0.tgz#3305896e5835f953b5cdb363acd9e8c2219a5281"
@@ -858,6 +1399,16 @@
     "@babel/helper-simple-access" "^7.15.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@^7.16.8":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz#d86b217c8e45bb5f2dbc11eefc8eab62cf980d19"
+  integrity sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-systemjs@^7.12.1", "@babel/plugin-transform-modules-systemjs@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz#c75342ef8b30dcde4295d3401aae24e65638ed29"
@@ -869,6 +1420,17 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-systemjs@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.7.tgz#887cefaef88e684d29558c2b13ee0563e287c2d7"
+  integrity sha512-DuK5E3k+QQmnOqBR9UkusByy5WZWGRxfzV529s9nPra1GE7olmxfqO2FHobEOYSPIjPBTr4p66YDcjQnt8cBmw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-umd@^7.12.1", "@babel/plugin-transform-modules-umd@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz#fb662dfee697cce274a7cda525190a79096aa6e0"
@@ -877,6 +1439,14 @@
     "@babel/helper-module-transforms" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-modules-umd@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
+  integrity sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.12.1", "@babel/plugin-transform-named-capturing-groups-regex@^7.14.9":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.9.tgz#c68f5c5d12d2ebaba3762e57c2c4f6347a46e7b2"
@@ -884,6 +1454,13 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252"
+  integrity sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+
 "@babel/plugin-transform-new-target@^7.12.1", "@babel/plugin-transform-new-target@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz#31bdae8b925dc84076ebfcd2a9940143aed7dbf8"
@@ -891,6 +1468,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-new-target@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
+  integrity sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-object-super@^7.12.1", "@babel/plugin-transform-object-super@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz#d0b5faeac9e98597a161a9cf78c527ed934cdc45"
@@ -899,6 +1483,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-replace-supers" "^7.14.5"
 
+"@babel/plugin-transform-object-super@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
+  integrity sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+
 "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz#49662e86a1f3ddccac6363a7dfb1ff0a158afeb3"
@@ -906,6 +1498,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-parameters@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
+  integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-property-literals@^7.12.1", "@babel/plugin-transform-property-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz#0ddbaa1f83db3606f1cdf4846fa1dfb473458b34"
@@ -913,6 +1512,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-property-literals@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
+  integrity sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-constant-elements@^7.14.5":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.6.tgz#6cc273c2f612a6a50cb657e63ee1303e5e68d10a"
+  integrity sha512-OBv9VkyyKtsHZiHLoSfCn+h6yU7YKX8nrs32xUmOa1SRSk+t03FosB6fBZ0Yz4BpD1WV7l73Nsad+2Tz7APpqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-react-display-name@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
@@ -974,6 +1587,13 @@
   dependencies:
     regenerator-transform "^0.14.2"
 
+"@babel/plugin-transform-regenerator@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
+  integrity sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
 "@babel/plugin-transform-reserved-words@^7.12.1", "@babel/plugin-transform-reserved-words@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz#c44589b661cfdbef8d4300dcc7469dffa92f8304"
@@ -981,6 +1601,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-reserved-words@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
+  integrity sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-runtime@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
@@ -1010,6 +1637,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-shorthand-properties@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
+  integrity sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.14.6":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz#6bd40e57fe7de94aa904851963b5616652f73144"
@@ -1018,6 +1652,14 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
 
+"@babel/plugin-transform-spread@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
+  integrity sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+
 "@babel/plugin-transform-sticky-regex@^7.12.1", "@babel/plugin-transform-sticky-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz#5b617542675e8b7761294381f3c28c633f40aeb9"
@@ -1025,6 +1667,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-sticky-regex@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
+  integrity sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-template-literals@^7.12.1", "@babel/plugin-transform-template-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz#a5f2bc233937d8453885dc736bdd8d9ffabf3d93"
@@ -1032,6 +1681,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-template-literals@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
+  integrity sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-typeof-symbol@^7.12.1", "@babel/plugin-transform-typeof-symbol@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz#39af2739e989a2bd291bf6b53f16981423d457d4"
@@ -1039,6 +1695,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-typeof-symbol@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
+  integrity sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-typescript@^7.12.1":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.0.tgz#553f230b9d5385018716586fc48db10dd228eb7e"
@@ -1048,6 +1711,15 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-typescript" "^7.14.5"
 
+"@babel/plugin-transform-typescript@^7.16.7":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
+  integrity sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-typescript" "^7.16.7"
+
 "@babel/plugin-transform-unicode-escapes@^7.12.1", "@babel/plugin-transform-unicode-escapes@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
@@ -1055,6 +1727,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-unicode-escapes@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3"
+  integrity sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-unicode-regex@^7.12.1", "@babel/plugin-transform-unicode-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz#4cd09b6c8425dd81255c7ceb3fb1836e7414382e"
@@ -1063,6 +1742,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-unicode-regex@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
+  integrity sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/preset-env@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
@@ -1214,6 +1901,86 @@
     core-js-compat "^3.16.0"
     semver "^6.3.0"
 
+"@babel/preset-env@^7.15.6":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
+  integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
+  dependencies:
+    "@babel/compat-data" "^7.16.8"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.16.7"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.16.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.16.8"
+    "@babel/plugin-proposal-class-properties" "^7.16.7"
+    "@babel/plugin-proposal-class-static-block" "^7.16.7"
+    "@babel/plugin-proposal-dynamic-import" "^7.16.7"
+    "@babel/plugin-proposal-export-namespace-from" "^7.16.7"
+    "@babel/plugin-proposal-json-strings" "^7.16.7"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.16.7"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.7"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.7"
+    "@babel/plugin-proposal-object-rest-spread" "^7.16.7"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
+    "@babel/plugin-proposal-private-methods" "^7.16.11"
+    "@babel/plugin-proposal-private-property-in-object" "^7.16.7"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.16.7"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.16.7"
+    "@babel/plugin-transform-async-to-generator" "^7.16.8"
+    "@babel/plugin-transform-block-scoped-functions" "^7.16.7"
+    "@babel/plugin-transform-block-scoping" "^7.16.7"
+    "@babel/plugin-transform-classes" "^7.16.7"
+    "@babel/plugin-transform-computed-properties" "^7.16.7"
+    "@babel/plugin-transform-destructuring" "^7.16.7"
+    "@babel/plugin-transform-dotall-regex" "^7.16.7"
+    "@babel/plugin-transform-duplicate-keys" "^7.16.7"
+    "@babel/plugin-transform-exponentiation-operator" "^7.16.7"
+    "@babel/plugin-transform-for-of" "^7.16.7"
+    "@babel/plugin-transform-function-name" "^7.16.7"
+    "@babel/plugin-transform-literals" "^7.16.7"
+    "@babel/plugin-transform-member-expression-literals" "^7.16.7"
+    "@babel/plugin-transform-modules-amd" "^7.16.7"
+    "@babel/plugin-transform-modules-commonjs" "^7.16.8"
+    "@babel/plugin-transform-modules-systemjs" "^7.16.7"
+    "@babel/plugin-transform-modules-umd" "^7.16.7"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.16.8"
+    "@babel/plugin-transform-new-target" "^7.16.7"
+    "@babel/plugin-transform-object-super" "^7.16.7"
+    "@babel/plugin-transform-parameters" "^7.16.7"
+    "@babel/plugin-transform-property-literals" "^7.16.7"
+    "@babel/plugin-transform-regenerator" "^7.16.7"
+    "@babel/plugin-transform-reserved-words" "^7.16.7"
+    "@babel/plugin-transform-shorthand-properties" "^7.16.7"
+    "@babel/plugin-transform-spread" "^7.16.7"
+    "@babel/plugin-transform-sticky-regex" "^7.16.7"
+    "@babel/plugin-transform-template-literals" "^7.16.7"
+    "@babel/plugin-transform-typeof-symbol" "^7.16.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.16.7"
+    "@babel/plugin-transform-unicode-regex" "^7.16.7"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.16.8"
+    babel-plugin-polyfill-corejs2 "^0.3.0"
+    babel-plugin-polyfill-corejs3 "^0.5.0"
+    babel-plugin-polyfill-regenerator "^0.3.0"
+    core-js-compat "^3.20.2"
+    semver "^6.3.0"
+
 "@babel/preset-modules@^0.1.3", "@babel/preset-modules@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
@@ -1225,6 +1992,17 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-modules@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
 "@babel/preset-react@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
@@ -1258,6 +2036,15 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-transform-typescript" "^7.12.1"
 
+"@babel/preset-typescript@^7.15.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz#ab114d68bb2020afc069cd51b37ff98a046a70b9"
+  integrity sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-transform-typescript" "^7.16.7"
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.15.3.tgz#28754263988198f2a928c09733ade2fb4d28089d"
@@ -1312,6 +2099,15 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.15.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.0.tgz#4cca838fd1b2a03283c1f38e141f639d60b3fc98"
@@ -1342,6 +2138,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
+  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
@@ -1366,6 +2178,14 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1664,6 +2484,24 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
+  integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
+  integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
+
+"@jridgewell/trace-mapping@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
+  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -2633,6 +3471,110 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
+  integrity sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz#58654908beebfa069681a83332544b17e5237e89"
+  integrity sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz#d06dd6e8a8f603f92f9979bb9990a1f85a4f57ba"
+  integrity sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz#0b85837577b02c31c09c758a12932820f5245cee"
+  integrity sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz#28236ec26f7ab9d486a487d36ae52d58ba15676f"
+  integrity sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz#40267c5dea1b43c4f83a0eb6169e08b43d8bafce"
+  integrity sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==
+
+"@svgr/babel-plugin-transform-react-native-svg@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz#eb688d0a5f539e34d268d8a516e81f5d7fede7c9"
+  integrity sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==
+
+"@svgr/babel-plugin-transform-svg-component@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz#7ba61d9fc1fb42b0ba1a04e4630019fa7e993c4f"
+  integrity sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==
+
+"@svgr/babel-preset@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.2.0.tgz#1d3ad8c7664253a4be8e4a0f0e6872f30d8af627"
+  integrity sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.0.0"
+    "@svgr/babel-plugin-transform-svg-component" "^6.2.0"
+
+"@svgr/core@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.1.tgz#195de807a9f27f9e0e0d678e01084b05c54fdf61"
+  integrity sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==
+  dependencies:
+    "@svgr/plugin-jsx" "^6.2.1"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.1"
+
+"@svgr/hast-util-to-babel-ast@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz#ae065567b74cbe745afae617053adf9a764bea25"
+  integrity sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    entities "^3.0.1"
+
+"@svgr/plugin-jsx@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz#5668f1d2aa18c2f1bb7a1fc9f682d3f9aed263bd"
+  integrity sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==
+  dependencies:
+    "@babel/core" "^7.15.5"
+    "@svgr/babel-preset" "^6.2.0"
+    "@svgr/hast-util-to-babel-ast" "^6.2.1"
+    svg-parser "^2.0.2"
+
+"@svgr/plugin-svgo@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz#4cbe6a33ccccdcae4e3b63ded64cc1cbe1faf48c"
+  integrity sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==
+  dependencies:
+    cosmiconfig "^7.0.1"
+    deepmerge "^4.2.2"
+    svgo "^2.5.0"
+
+"@svgr/webpack@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.2.1.tgz#ef5d51c1b6be4e7537fb9f76b3f2b2e22b63c58d"
+  integrity sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==
+  dependencies:
+    "@babel/core" "^7.15.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.14.5"
+    "@babel/preset-env" "^7.15.6"
+    "@babel/preset-react" "^7.14.5"
+    "@babel/preset-typescript" "^7.15.0"
+    "@svgr/core" "^6.2.1"
+    "@svgr/plugin-jsx" "^6.2.1"
+    "@svgr/plugin-svgo" "^6.2.0"
+
 "@testing-library/dom@>=5":
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.0.tgz#3679dfb4db58e0d2b95e4b0929eaf45237b60d94"
@@ -2689,6 +3631,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/aria-query@^4.2.0":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
@@ -3660,6 +4607,15 @@ babel-plugin-polyfill-corejs2@^0.2.2:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
     semver "^6.1.1"
 
+babel-plugin-polyfill-corejs2@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5"
+  integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==
+  dependencies:
+    "@babel/compat-data" "^7.13.11"
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    semver "^6.1.1"
+
 babel-plugin-polyfill-corejs3@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.4.tgz#68cb81316b0e8d9d721a92e0009ec6ecd4cd2ca9"
@@ -3668,6 +4624,14 @@ babel-plugin-polyfill-corejs3@^0.2.2:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
     core-js-compat "^3.14.0"
 
+babel-plugin-polyfill-corejs3@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
+  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    core-js-compat "^3.21.0"
+
 babel-plugin-polyfill-regenerator@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz#b310c8d642acada348c1fa3b3e6ce0e851bee077"
@@ -3675,6 +4639,13 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
+babel-plugin-polyfill-regenerator@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
+  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -3902,6 +4873,17 @@ browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.16.7:
     escalade "^3.1.1"
     node-releases "^1.1.75"
 
+browserslist@^4.17.5, browserslist@^4.19.1:
+  version "4.20.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
+  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
+  dependencies:
+    caniuse-lite "^1.0.30001317"
+    electron-to-chromium "^1.4.84"
+    escalade "^3.1.1"
+    node-releases "^2.0.2"
+    picocolors "^1.0.0"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -4017,6 +4999,11 @@ caniuse-lite@^1.0.30001251:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz#6853a606ec50893115db660f82c094d18f096d85"
   integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
 
+caniuse-lite@^1.0.30001317:
+  version "1.0.30001317"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001317.tgz#0548fb28fd5bc259a70b8c1ffdbe598037666a1b"
+  integrity sha512-xIZLh8gBm4dqNX0gkzrBeyI86J2eCjWzYAs40q88smG844YIrN4tVQl/RhquHvKEKImWWFIVh1Lxe5n1G/N+GQ==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -4273,7 +5260,7 @@ commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^7.0.0:
+commander@^7.0.0, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -4474,6 +5461,14 @@ core-js-compat@^3.14.0, core-js-compat@^3.16.0, core-js-compat@^3.6.2:
     browserslist "^4.16.7"
     semver "7.0.0"
 
+core-js-compat@^3.20.2, core-js-compat@^3.21.0:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
+  integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
+  dependencies:
+    browserslist "^4.19.1"
+    semver "7.0.0"
+
 core-js-pure@^3.16.0:
   version "3.16.2"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.16.2.tgz#0ef4b79cabafb251ea86eb7d139b42bd98c533e8"
@@ -4506,6 +5501,17 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4608,6 +5614,14 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
@@ -4632,6 +5646,13 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -5061,6 +6082,11 @@ electron-to-chromium@^1.3.811:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.812.tgz#4c4fb407e0e1335056097f172e9f2c0a09efe77d"
   integrity sha512-7KiUHsKAWtSrjVoTSzxQ0nPLr/a+qoxNZwkwd9LkylTOgOXSVXkQbpIVT0WAUQcI5gXq3SwOTCrK+WfINHOXQg==
 
+electron-to-chromium@^1.4.84:
+  version "1.4.86"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.86.tgz#90fe4a9787f48d6522957213408e08a8126b2ebc"
+  integrity sha512-EVTZ+igi8x63pK4bPuA95PXIs2b2Cowi3WQwI9f9qManLiZJOD1Lash1J3W4TvvcUCcIR4o/rgi9o8UicXSO+w==
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -7909,6 +8935,11 @@ mdast-util-to-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
   integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -8368,6 +9399,11 @@ node-releases@^1.1.75:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
   integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
 
+node-releases@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
+
 nopt@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
@@ -9661,6 +10697,13 @@ redux@^4.0.0, redux@^4.1.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+regenerate-unicode-properties@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
+  integrity sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==
+  dependencies:
+    regenerate "^1.4.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -9668,7 +10711,7 @@ regenerate-unicode-properties@^8.2.0:
   dependencies:
     regenerate "^1.4.0"
 
-regenerate@^1.4.0:
+regenerate@^1.4.0, regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
@@ -9710,11 +10753,28 @@ regexpu-core@^4.7.1:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.2.0"
 
+regexpu-core@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
+  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.0.1"
+    regjsgen "^0.6.0"
+    regjsparser "^0.8.2"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
 regjsgen@^0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
   integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
+regjsgen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
+  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
+
 regjsparser@^0.6.4:
   version "0.6.9"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
@@ -9722,6 +10782,13 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.8.2:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
+  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
+  dependencies:
+    jsesc "~0.5.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -10327,6 +11394,11 @@ ssri@^8.0.0, ssri@^8.0.1:
   dependencies:
     minipass "^3.1.1"
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stack-utils@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
@@ -10569,6 +11641,24 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^2.5.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -10941,6 +12031,11 @@ unicode-canonical-property-names-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
   integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
 
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
 unicode-match-property-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
@@ -10949,16 +12044,34 @@ unicode-match-property-ecmascript@^1.0.4:
     unicode-canonical-property-names-ecmascript "^1.0.4"
     unicode-property-aliases-ecmascript "^1.0.4"
 
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
 unicode-match-property-value-ecmascript@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
   integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
 
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+
 unified@^9.0.0:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"

From 0eb33973706402641b83a8b4b3b57de0c2635581 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 16:52:50 -0300
Subject: [PATCH 11/29] feat(common-ui): add Markdown Editor

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js | 73 +++++++++++++++
 .../MarkdownEditor/MarkdownEditor.module.css  | 88 +++++++++++++++++++
 .../Markdown/MarkdownEditor/assets/bold.svg   |  1 +
 .../MarkdownEditor/assets/bulletList.svg      |  1 +
 .../Markdown/MarkdownEditor/assets/code.svg   |  1 +
 .../Markdown/MarkdownEditor/assets/image.svg  |  1 +
 .../Markdown/MarkdownEditor/assets/italic.svg |  1 +
 .../Markdown/MarkdownEditor/assets/link.svg   |  1 +
 .../MarkdownEditor/assets/numberedList.svg    |  1 +
 .../Markdown/MarkdownEditor/assets/quote.svg  |  1 +
 .../Markdown/MarkdownEditor/commands.js       | 73 +++++++++++++++
 .../Markdown/MarkdownEditor/commands.test.js  |  0
 .../Markdown/MarkdownEditor/index.js          |  1 +
 .../packages/common-ui/src/dev/index.js       | 62 +++++++------
 14 files changed, 280 insertions(+), 25 deletions(-)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
new file mode 100644
index 000000000..9675cfb73
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -0,0 +1,73 @@
+import React, { useRef, useState } from "react";
+import { classNames } from "pi-ui";
+import styles from "./MarkdownEditor.module.css";
+import { MarkdownRenderer } from "../MarkdownRenderer";
+import { commands, getLineContent, getSelectedContent } from "./commands";
+
+export function MarkdownEditor({
+  onChange,
+  wrapperClassName,
+  initialValue = "",
+  isSplitView,
+}) {
+  const editorRef = useRef();
+  const [showPreview, setShowPreview] = useState(false);
+  const [value, setValue] = useState(initialValue);
+  function handleChange(e) {
+    setValue(e.target.value);
+    onChange(e.target.value);
+  }
+  function handleShowPreview() {
+    setShowPreview(true);
+  }
+  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 line = getLineContent(content, startPos);
+    const newString = command({ line, selected });
+    setValue(newString);
+    onChange(newString);
+  };
+
+  return (
+    <div className={classNames(styles.editorWrapper, wrapperClassName)}>
+      <div className={styles.headers}>
+        <div className={classNames(isSplitView && styles.hide, styles.tabs)}>
+          <div onClick={handleShowWrite}>Write</div>
+          <div onClick={handleShowPreview}>Preview</div>
+        </div>
+        <div className={styles.actionButtons}>
+          {commands.map(({ command, Icon }, i) => (
+            <span key={i} onClick={handleCommand(command)}>
+              <Icon />
+            </span>
+          ))}
+        </div>
+      </div>
+      <div
+        className={classNames(
+          styles.content,
+          !isSplitView
+            ? showPreview
+              ? styles.hideEditor
+              : styles.hidePreview
+            : styles.splitView
+        )}
+      >
+        <textarea
+          id="markdown-editor"
+          ref={editorRef}
+          className={styles.editor}
+          value={value}
+          onChange={handleChange}
+        />
+        <MarkdownRenderer body={value} className={styles.preview} />
+      </div>
+    </div>
+  );
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
new file mode 100644
index 000000000..04585b688
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
@@ -0,0 +1,88 @@
+/* Editor */
+.editorWrapper {
+  background: var(--card-background);
+}
+
+.actionButtons {
+  cursor: pointer;
+}
+.actionButtons > span {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid var(--separator-color);
+}
+.actionButtons > span:first-child {
+  margin-left: 0rem;
+  padding-left: 0rem;
+  border: 0px;
+}
+
+.tabs {
+  display: flex;
+}
+.headers {
+  display: flex;
+  padding: 0.5rem;
+  justify-content: space-between;
+}
+.tabs > div {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+  border-left: 1px solid var(--separator-color);
+}
+.tabs > div:first-child {
+  margin-left: 0rem;
+  padding-left: 0rem;
+  border: 0px;
+}
+.hide {
+  visibility: hidden;
+}
+
+.content {
+  width: 100%;
+  display: grid;
+}
+.editor {
+  resize: vertical;
+  min-height: 20rem;
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--card-background);
+}
+.preview {
+  padding: 1rem;
+  border: 1px solid var(--separator-color);
+  overflow-y: scroll;
+  width: 100%;
+}
+
+.splitView {
+  grid-template-columns: 1fr 1fr;
+}
+
+.hideEditor {
+  grid-template-columns: 0 1fr;
+}
+.hideEditor > .editor {
+  width: 0px !important;
+  border: 0px !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  white-space: nowrap;
+}
+
+.hidePreview {
+  grid-template-columns: 1fr 0;
+}
+.hidePreview > .preview {
+  width: 0px !important;
+  border: 0px !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  white-space: nowrap;
+  height: 0px;
+  min-height: 100%;
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
new file mode 100644
index 000000000..26cb65635
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.272" height="12" viewBox="0 0 9.272 12"><path d="M20.618,12V0h4.121a6.279,6.279,0,0,1,3.486.828A2.765,2.765,0,0,1,29.478,3.3a2.887,2.887,0,0,1-.4,1.525A2.472,2.472,0,0,1,27.83,5.827a2.471,2.471,0,0,1,1.558.96,2.834,2.834,0,0,1,.5,1.661A3.129,3.129,0,0,1,28.712,11.1a5.487,5.487,0,0,1-3.379.9Zm2.794-7H24.8a2.437,2.437,0,0,0,1.418-.367,1.2,1.2,0,0,0,.47-1.026,1.292,1.292,0,0,0-.478-1.117,2.49,2.49,0,0,0-1.467-.35H23.412Zm0,1.846V9.857h1.92a2.134,2.134,0,0,0,1.335-.35,1.284,1.284,0,0,0,.445-1.075,1.647,1.647,0,0,0-.383-1.183,1.657,1.657,0,0,0-1.24-.4Z" transform="translate(-20.618)" fill="#c4cbd2"/></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
new file mode 100644
index 000000000..f83e5090f
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.284" height="13.997" viewBox="0 0 15.284 13.997"><g transform="translate(0 0)"><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0)" fill="#c4cbd2"/><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0 5.106)" fill="#c4cbd2"/><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0 10.367)" fill="#c4cbd2"/><g transform="translate(4.76 0.628)"><path d="M32.591,12.534H42.45a.333.333,0,0,0,.333-.333V10.492a.333.333,0,0,0-.333-.333H32.591a.333.333,0,0,0-.333.333V12.2A.333.333,0,0,0,32.591,12.534Z" transform="translate(-32.258 -10.159)" fill="#c4cbd2"/><path d="M42.449,40.158H32.591a.333.333,0,0,0-.333.333V42.2a.333.333,0,0,0,.333.333H42.45a.333.333,0,0,0,.333-.333V40.491A.333.333,0,0,0,42.449,40.158Z" transform="translate(-32.258 -35.051)" fill="#c4cbd2"/><path d="M42.449,71.064H32.591a.333.333,0,0,0-.333.333v1.709a.333.333,0,0,0,.333.333H42.45a.333.333,0,0,0,.333-.333V71.4A.333.333,0,0,0,42.449,71.064Z" transform="translate(-32.258 -60.697)" fill="#c4cbd2"/></g></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
new file mode 100644
index 000000000..a6276aef8
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.922" height="14" viewBox="0 0 20.922 14" className="code"><g transform="translate(0.5 0.502)"><path d="M194.732,65.4l-.618-.161a.291.291,0,0,0-.234.024.311.311,0,0,0-.155.185l-3.718,12.22a.271.271,0,0,0,.025.232.321.321,0,0,0,.194.147l.618.161a.291.291,0,0,0,.234-.024.312.312,0,0,0,.154-.184l3.718-12.221a.271.271,0,0,0-.025-.232A.321.321,0,0,0,194.732,65.4Z" transform="translate(-182.518 -65.225)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/><path d="M5.8,119.535a.284.284,0,0,0-.1-.213l-.5-.464a.33.33,0,0,0-.459,0L.1,123.181a.278.278,0,0,0,0,.427l4.645,4.323a.33.33,0,0,0,.459,0l.5-.464a.278.278,0,0,0,0-.427l-3.917-3.646L5.7,119.748A.284.284,0,0,0,5.8,119.535Z" transform="translate(0 -116.896)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/><path d="M362.013,123.178l-4.645-4.323a.329.329,0,0,0-.458,0l-.5.464a.278.278,0,0,0,0,.427l3.917,3.646-3.917,3.646a.278.278,0,0,0,0,.427l.5.464a.33.33,0,0,0,.458,0l4.645-4.323a.278.278,0,0,0,0-.427Z" transform="translate(-342.191 -116.893)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
new file mode 100644
index 000000000..228e98187
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="15"><path fill="#c4cbd2" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
new file mode 100644
index 000000000..81685c0eb
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.981" height="12" viewBox="0 0 9.981 12"><g transform="translate(0 0)"><path d="M52.712,0H45.327a.346.346,0,0,0-.346.346v1.5a.346.346,0,0,0,.346.346h1.921L46.4,9.808H43.423a.346.346,0,0,0-.346.346v1.5a.346.346,0,0,0,.346.346h7.385a.346.346,0,0,0,.346-.346v-1.5a.346.346,0,0,0-.346-.346H48.945l.846-7.615h2.921a.346.346,0,0,0,.346-.346V.346A.346.346,0,0,0,52.712,0Z" transform="translate(-43.077)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
new file mode 100644
index 000000000..46f653c76
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.042" height="12.997" viewBox="0 0 13.042 12.997"><g transform="translate(0 0)"><path d="M4.776,10.312l-.66.653a1.48,1.48,0,0,1-2.074,0,1.427,1.427,0,0,1,0-2.033l2.429-2.4c.5-.5,1.45-1.23,2.141-.548A.807.807,0,1,0,7.75,4.839c-1.173-1.16-2.907-.946-4.418.548L.9,7.789a3.032,3.032,0,0,0,0,4.319,3.105,3.105,0,0,0,4.351,0l.66-.653a.807.807,0,1,0-1.139-1.142ZM12.138.982A2.893,2.893,0,0,0,7.949.822l-.823.814A.807.807,0,1,0,8.265,2.778l.822-.813A1.312,1.312,0,0,1,11,2.125a1.426,1.426,0,0,1,0,2.034L8.408,6.721c-1.185,1.172-1.741.622-1.978.387A.807.807,0,1,0,5.291,8.251a2.553,2.553,0,0,0,1.816.8A3.563,3.563,0,0,0,9.546,7.864L12.138,5.3a3.032,3.032,0,0,0,0-4.32Z" transform="translate(0 0)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
new file mode 100644
index 000000000..56e8757bd
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.437" height="13.995" viewBox="0 0 13.437 13.995"><g transform="translate(0 0)"><g transform="translate(3.128 0.982)"><path d="M32.584,12.486h9.658a.326.326,0,0,0,.326-.326V10.485a.326.326,0,0,0-.326-.326H32.584a.326.326,0,0,0-.326.326V12.16A.326.326,0,0,0,32.584,12.486Z" transform="translate(-32.258 -10.159)" fill="#c4cbd2"/><path d="M42.241,40.158H32.584a.326.326,0,0,0-.326.326v1.675a.326.326,0,0,0,.326.326h9.658a.326.326,0,0,0,.326-.326V40.484A.326.326,0,0,0,42.241,40.158Z" transform="translate(-32.258 -35.339)" fill="#c4cbd2"/><path d="M42.241,71.064H32.584a.326.326,0,0,0-.326.326v1.675a.326.326,0,0,0,.326.326h9.658a.326.326,0,0,0,.326-.326V71.39A.326.326,0,0,0,42.241,71.064Z" transform="translate(-32.258 -61.28)" fill="#c4cbd2"/></g><path d="M.3,5.223a.246.246,0,0,0,.192-.059l.15-.131V7.165a.247.247,0,0,0,.247.247h.254a.247.247,0,0,0,.247-.247V4.314a.247.247,0,0,0-.247-.247H.883a.247.247,0,0,0-.16.059l-.637.543A.247.247,0,0,0,.044,5L.13,5.12A.248.248,0,0,0,.3,5.223Z" transform="translate(0.001 -4.067)" fill="#c4cbd2"/><path d="M1.292,36.813a.243.243,0,0,0-.161.253l.016.162a.243.243,0,0,0,.355.193.61.61,0,0,1,.474-.087.312.312,0,0,1,.233.2c.061.185.064.48-.463,1.115l-.407.486a2.7,2.7,0,0,1-.211.228.243.243,0,0,0-.079.18v.239a.244.244,0,0,0,.243.243H2.774a.244.244,0,0,0,.243-.243v-.126a.244.244,0,0,0-.243-.243H2c.074-.084.168-.2.278-.335a2.1,2.1,0,0,0,.7-1.684.837.837,0,0,0-.443-.609,1.111,1.111,0,0,0-.507-.1A2.241,2.241,0,0,0,1.292,36.813Z" transform="translate(-1.049 -31.382)" fill="#c4cbd2"/><path d="M2.353,71.166a.874.874,0,0,0,.119-.077.773.773,0,0,0,.287-.623.827.827,0,0,0-.348-.706,1.165,1.165,0,0,0-.7-.189,2.311,2.311,0,0,0-.651.1.241.241,0,0,0-.171.246l.009.141a.241.241,0,0,0,.321.211,1.062,1.062,0,0,1,.357-.072.691.691,0,0,1,.116.01.359.359,0,0,1,.3.206.386.386,0,0,1-.013.3c-.1.163-.391.2-.552.2a.24.24,0,0,0-.233.24v.106a.243.243,0,0,0,.243.241.814.814,0,0,1,.417.078.331.331,0,0,1,.171.308.371.371,0,0,1-.181.34.876.876,0,0,1-.723.005.241.241,0,0,0-.316.21l-.011.14a.241.241,0,0,0,.152.243.875.875,0,0,0,.164.045,2.081,2.081,0,0,0,.456.048,1.4,1.4,0,0,0,.954-.308,1.007,1.007,0,0,0,.25-.919A.689.689,0,0,0,2.353,71.166Z" transform="translate(-0.797 -58.917)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg
new file mode 100644
index 000000000..c159a2459
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.262" height="12.003" viewBox="0 0 13.262 12.003"><g transform="translate(0 0.001)"><path d="M4.555,36.547H1.518a1.413,1.413,0,0,0-1.076.477A1.643,1.643,0,0,0,0,38.184v3.273a1.642,1.642,0,0,0,.443,1.159,1.413,1.413,0,0,0,1.076.477H3.29a.707.707,0,0,1,.538.239.821.821,0,0,1,.221.58v.273a2.188,2.188,0,0,1-.593,1.543,1.883,1.883,0,0,1-1.431.639H1.518a.47.47,0,0,0-.356.162.545.545,0,0,0-.15.384V48a.546.546,0,0,0,.15.384.47.47,0,0,0,.356.162h.506a3.7,3.7,0,0,0,1.57-.345,4.075,4.075,0,0,0,1.293-.934,4.434,4.434,0,0,0,.866-1.394,4.539,4.539,0,0,0,.32-1.692v-6a1.643,1.643,0,0,0-.443-1.159A1.413,1.413,0,0,0,4.555,36.547Z" transform="translate(0 -36.547)" fill="#c4cbd2"/><path d="M261.448,37.024a1.413,1.413,0,0,0-1.075-.477h-3.037a1.413,1.413,0,0,0-1.076.477,1.643,1.643,0,0,0-.443,1.159v3.273a1.643,1.643,0,0,0,.443,1.159,1.413,1.413,0,0,0,1.076.477h1.772a.707.707,0,0,1,.538.239.822.822,0,0,1,.221.58v.273a2.188,2.188,0,0,1-.593,1.543,1.882,1.882,0,0,1-1.431.639h-.506a.47.47,0,0,0-.356.162.545.545,0,0,0-.15.384V48a.545.545,0,0,0,.15.384.47.47,0,0,0,.356.162h.506a3.7,3.7,0,0,0,1.57-.345,4.076,4.076,0,0,0,1.293-.934,4.432,4.432,0,0,0,.866-1.394,4.54,4.54,0,0,0,.32-1.692v-6A1.642,1.642,0,0,0,261.448,37.024Z" transform="translate(-248.629 -36.547)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
new file mode 100644
index 000000000..d8533c155
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -0,0 +1,73 @@
+import BoldSVG from "./assets/bold.svg";
+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 { ReactComponent as NumberedListSVG } from "./assets/numberedList.svg";
+
+export const commands = [
+  {
+    label: "Bold Text",
+    Icon: BoldSVG,
+    command: ({ selected: { previous, current, next } }) =>
+      `${previous}**${current}**${next}`,
+  },
+  {
+    label: "Italic",
+    Icon: ItalicSVG,
+    command: ({ selected: { previous, current, next } }) =>
+      `${previous}*${current}*${next}`,
+  },
+  {
+    label: "Quote",
+    Icon: QuoteSVG,
+    command: ({ line: { previous, current, next } }) =>
+      `${previous}\n> ${current}\n${next}`,
+  },
+  {
+    label: "Code",
+    Icon: CodeSVG,
+    command: ({ selected: { previous, current, next } }) =>
+      `${previous}\`${current}\`${next}`,
+  },
+  {
+    label: "List",
+    Icon: BulletListSVG,
+    command: ({ line: { previous, current, next } }) =>
+      `${previous}\n- ${current}\n${next}`,
+  },
+];
+
+export function getLineContent(content, startPos) {
+  const lines = content.split("\n");
+  let acc = 0,
+    selectedLine = "",
+    previousLines = [],
+    nextLines = [...lines];
+  for (const line of lines) {
+    acc += line.length;
+    nextLines = nextLines.splice(1, lines.length);
+    if (acc >= startPos - 1) {
+      selectedLine = line;
+      break;
+    }
+    previousLines = [...previousLines, line];
+  }
+  return {
+    previous: previousLines.join("\n"),
+    current: selectedLine,
+    next: nextLines.join("\n"),
+  };
+}
+
+export function getSelectedContent(content, startPos, endPos) {
+  const previousContent = content.substring(0, startPos);
+  const nextContent = content.substring(endPos, content.length);
+  const selectedString = content.substring(startPos, endPos);
+  return {
+    previous: previousContent,
+    current: selectedString,
+    next: nextContent,
+  };
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js
new file mode 100644
index 000000000..2fc1101f5
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js
@@ -0,0 +1 @@
+export * from "./MarkdownEditor";
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
index 350668313..5fe928914 100644
--- a/plugins-structure/packages/common-ui/src/dev/index.js
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -1,31 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import { DiffHTML } from "../components/Diff";
+import { DiffHTML, MarkdownEditor } from "../components/Markdown";
+import {
+  DEFAULT_DARK_THEME_NAME,
+  DEFAULT_LIGHT_THEME_NAME,
+  ThemeProvider,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "pi-ui";
+import "pi-ui/dist/index.css";
 
-const newHeaders =
-  "# Header 1\n## Header 2\n### Header 3\n##### common header\n\n";
-const oldHeaders =
-  "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
-const newParagraph = "Paragraph 1\n\nAnother P";
-const oldParagraph = "Paragraph 2\n\nAnother P";
-const oldLink = "[my link](http://mylink.com)";
-const newLink = "[my link](http://mylinknew.com)";
-const p1 =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.";
-const p2 =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.";
+const themes = {
+  [DEFAULT_LIGHT_THEME_NAME]: { ...defaultLightTheme },
+  [DEFAULT_DARK_THEME_NAME]: { ...defaultDarkTheme },
+};
+
+function MdTest() {
+  const [old, setOld] = useState("");
+  const [nw, setNew] = useState("");
+
+  return (
+    <>
+      <MarkdownEditor onChange={(e) => setOld(e)} />
+      <MarkdownEditor onChange={(e) => setNew(e)} />
+      <div
+        style={{ width: "90%", border: "1px solid black", margin: "2rem" }}
+      />
+      <DiffHTML oldText={old} newText={nw} />
+    </>
+  );
+}
 
 ReactDOM.render(
-  <div id="markdown-diff-wrapper">
-    <DiffHTML oldText={oldHeaders} newText={newHeaders} />
-    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
-    <DiffHTML oldText={oldParagraph} newText={newParagraph} />
-    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
-    <DiffHTML oldText={oldLink} newText={newLink} />
-    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
-    <DiffHTML oldText="**old**" newText="old" />
-    <div style={{ width: "90%", border: "1px solid black", margin: "2rem" }} />
-    <DiffHTML oldText={p1} newText={p2} />
-  </div>,
+  <ThemeProvider themes={themes} defaultThemeName={DEFAULT_LIGHT_THEME_NAME}>
+    <h1>Markdown</h1>
+    <br />
+    <div id="markdown-diff-wrapper">
+      <MdTest />
+    </div>
+  </ThemeProvider>,
   document.querySelector("#root")
 );

From 98cfc405fce9b30a86d1168ab8e3f6a73337cc21 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 17:18:29 -0300
Subject: [PATCH 12/29] test(common-ui): markdown editor commands utils

---
 .../packages/common-ui/jest.config.js         |  2 +-
 .../Markdown/MarkdownEditor/commands.test.js  | 93 +++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/plugins-structure/packages/common-ui/jest.config.js b/plugins-structure/packages/common-ui/jest.config.js
index c741cb29c..2db6a2b44 100644
--- a/plugins-structure/packages/common-ui/jest.config.js
+++ b/plugins-structure/packages/common-ui/jest.config.js
@@ -6,6 +6,6 @@ module.exports = {
   },
   testpathIgnorePatterns: ["/node_modules/(?!react-markdown)(.*)"],
   moduleNameMapper: {
-    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js",
+    "\\.(css|less|svg)$": "<rootDir>/src/__mocks__/styleMock.js",
   },
 };
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
index e69de29bb..232cb86b8 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
@@ -0,0 +1,93 @@
+import { getLineContent, getSelectedContent } from "./commands";
+
+const multiLineText = `Vestibulum ac diam sit amet quam vehicula.
+
+Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
+
+Pellentesque in ipsum id orci porta dapibus.`;
+
+describe("Given getLineContent util", () => {
+  describe("when cursor is at the beginning of the multiLineText", () => {
+    it("should select the first line", () => {
+      const { previous, current, next } = getLineContent(multiLineText, 0);
+      expect(current).toEqual("Vestibulum ac diam sit amet quam vehicula.");
+      expect(previous).toEqual("");
+      expect(next).toEqual(
+        "\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n\nPellentesque in ipsum id orci porta dapibus."
+      );
+    });
+  });
+  describe("when cursor is at the end of the multiLineText", () => {
+    it("should select a new empty line", () => {
+      const { previous, current, next } = getLineContent(
+        multiLineText,
+        multiLineText.length
+      );
+      expect(current).toEqual("");
+      expect(previous).toEqual(multiLineText);
+      expect(next).toEqual("");
+    });
+  });
+  describe("when cursor is at a random position on first line", () => {
+    it("should select the first line", () => {
+      const { previous, current, next } = getLineContent(multiLineText, 20);
+      expect(current).toEqual("Vestibulum ac diam sit amet quam vehicula.");
+      expect(previous).toEqual("");
+      expect(next).toEqual(
+        "\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n\nPellentesque in ipsum id orci porta dapibus."
+      );
+    });
+  });
+  describe("when cursor is at a random position on second line", () => {
+    it("should select the second line", () => {
+      const { previous, current, next } = getLineContent(multiLineText, 50);
+      expect(current).toEqual(
+        "Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem."
+      );
+      expect(previous).toEqual("Vestibulum ac diam sit amet quam vehicula.\n");
+      expect(next).toEqual("\nPellentesque in ipsum id orci porta dapibus.");
+    });
+  });
+  describe("when cursor is at a random position on third line", () => {
+    it("should select the third line", () => {
+      const { previous, current, next } = getLineContent(multiLineText, 120);
+      expect(current).toEqual("Pellentesque in ipsum id orci porta dapibus.");
+      expect(previous).toEqual(
+        "Vestibulum ac diam sit amet quam vehicula.\n\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n"
+      );
+      expect(next).toEqual("");
+    });
+  });
+});
+
+const text = "First second third\n\nnew line";
+describe("Given getSelectedContent util", () => {
+  describe("when first word is selected", () => {
+    it("should return the selected word", () => {
+      const { previous, current, next } = getSelectedContent(text, 0, 5);
+      expect(current).toEqual("First");
+      expect(previous).toEqual("");
+      expect(next).toEqual(" second third\n\nnew line");
+    });
+  });
+  describe("when cursor has the same start and end positions", () => {
+    it("should return an empty word", () => {
+      const { previous, current, next } = getSelectedContent(text, 5, 5);
+      expect(current).toEqual("");
+      expect(previous).toEqual("First");
+      expect(next).toEqual(" second third\n\nnew line");
+    });
+  });
+  describe("when whole text is selected", () => {
+    it("should return the whole text with empty previous and next terms", () => {
+      const { previous, current, next } = getSelectedContent(
+        text,
+        0,
+        text.length
+      );
+      expect(current).toEqual(text);
+      expect(previous).toEqual("");
+      expect(next).toEqual("");
+    });
+  });
+});

From 4e9f39f8910cf30fbf2e3fe952c24d1e635ed70d Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 17:26:53 -0300
Subject: [PATCH 13/29] test(common-ui): markdown editor commands tests

---
 .../Markdown/MarkdownEditor/commands.test.js     | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
index 232cb86b8..3fd6681ba 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
@@ -1,4 +1,4 @@
-import { getLineContent, getSelectedContent } from "./commands";
+import { commands, getLineContent, getSelectedContent } from "./commands";
 
 const multiLineText = `Vestibulum ac diam sit amet quam vehicula.
 
@@ -91,3 +91,17 @@ describe("Given getSelectedContent util", () => {
     });
   });
 });
+
+describe("Given commands array", () => {
+  const expected = ["**text**", "*text*", "\n> text\n", "`text`", "\n- text\n"];
+  function getCommand(command) {
+    const selected = getSelectedContent("text", 0, "text".length);
+    const line = getLineContent("text", 0);
+    return command({ line, selected });
+  }
+  it("should return the correct sentence for each command", () => {
+    commands.forEach(({ command }, index) => {
+      expect(expected[index]).toEqual(getCommand(command));
+    });
+  });
+});

From f4efabc35ed901586d8579e2673a2430e395953f Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 17 Mar 2022 17:53:44 -0300
Subject: [PATCH 14/29] feat(common-ui): add MarkdownEditor PropTypes

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index 9675cfb73..92301bd44 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
 import { classNames } from "pi-ui";
 import styles from "./MarkdownEditor.module.css";
 import { MarkdownRenderer } from "../MarkdownRenderer";
@@ -9,6 +10,7 @@ export function MarkdownEditor({
   wrapperClassName,
   initialValue = "",
   isSplitView,
+  customCommands = [],
 }) {
   const editorRef = useRef();
   const [showPreview, setShowPreview] = useState(false);
@@ -42,7 +44,7 @@ export function MarkdownEditor({
           <div onClick={handleShowPreview}>Preview</div>
         </div>
         <div className={styles.actionButtons}>
-          {commands.map(({ command, Icon }, i) => (
+          {[...commands, ...customCommands].map(({ command, Icon }, i) => (
             <span key={i} onClick={handleCommand(command)}>
               <Icon />
             </span>
@@ -71,3 +73,17 @@ export function MarkdownEditor({
     </div>
   );
 }
+
+MarkdownEditor.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  wrapperClassName: PropTypes.string,
+  initialValue: PropTypes.string,
+  isSplitView: PropTypes.bool,
+  customCommands: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      Icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+      command: PropTypes.func.isRequired,
+    })
+  ),
+};

From f2bb76a251b9dc0d3ce34fb69d3db1954206909a Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Wed, 23 Mar 2022 18:43:10 -0300
Subject: [PATCH 15/29] wip(common-ui): fix markdown diff

---
 .../packages/common-ui/package.json           |   1 +
 .../src/components/Markdown/MarkdownDiff.js   |  64 ++++--
 .../components/Markdown/MarkdownDiff.test.js  | 216 ++++++++++++++++++
 .../components/Markdown/MarkdownRenderer.js   |   2 +-
 .../src/components/Markdown/helpers.js        |  18 +-
 .../src/components/Markdown/styles.css        |  13 +-
 plugins-structure/yarn.lock                   |  40 +++-
 7 files changed, 325 insertions(+), 29 deletions(-)

diff --git a/plugins-structure/packages/common-ui/package.json b/plugins-structure/packages/common-ui/package.json
index aa95ecef5..31324c5a0 100644
--- a/plugins-structure/packages/common-ui/package.json
+++ b/plugins-structure/packages/common-ui/package.json
@@ -24,6 +24,7 @@
     "@politeiagui/core": "1.0.0",
     "diff": "^5.0.0",
     "html-react-parser": "^1.4.8",
+    "node-html-parser": "^5.3.3",
     "react-markdown": "^6.0.3",
     "remark-gfm": "1.0.0",
     "xss-filters": "^1.2.7"
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
index 68b7a3f68..e3b42bcde 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
@@ -1,37 +1,65 @@
 import React from "react";
 import parse from "html-react-parser";
-import { diffTrimmedLines } from "diff";
+import { diffArrays } from "diff";
 import { renderToStaticMarkup } from "react-dom/server";
+import { parse as parseNode } from "node-html-parser";
 import { MarkdownRenderer } from ".";
-import trim from "lodash/trim";
 
-function joinDiffLines(diff) {
-  return diff.reduce((acc, line) => {
-    const value = trim(line.value);
-    if (line.added) {
-      return `${acc} <span class="added" data-testid="md-line-added">${value}</span>`;
+function splitRawMdLines(mdText = "") {
+  const splitted = mdText
+    .replace(/\\n/g, "&#32;")
+    .replace(/<p>(.*?)<\/p>/g, "&#10;<p>$1</p>&#10;")
+    .replace(/<h1>(.*?)<\/h1>/g, "&#10;<h1>$1</h1>&#10;")
+    .replace(/<h2>(.*?)<\/h2>/g, "&#10;<h2>$1</h2>&#10;")
+    .replace(/<h3>(.*?)<\/h3>/g, "&#10;<h3>$1</h3>&#10;")
+    .replace(/<h4>(.*?)<\/h4>/g, "&#10;<h4>$1</h4>&#10;")
+    .replace(/<h5>(.*?)<\/h5>/g, "&#10;<h5>$1</h5>&#10;")
+    .replace(/<h6>(.*?)<\/h6>/g, "&#10;<h6>$1</h6>&#10;")
+    .replace(
+      /<blockquote>(.*?)<\/blockquote>/g,
+      "&#10;<blockquote>$1</blockquote>&#10;"
+    )
+    .split("&#10;");
+  return splitted;
+}
+
+function joinDiffArrays(diff = []) {
+  const joined = diff.reduce((acc, el) => {
+    const value = el.value.join("").replace(/&#32;/g, "\n");
+    if (el.removed) {
+      return `${acc}<div class="removed" data-testid="md-line-removed">${value}</div>`;
     }
-    if (line.removed) {
-      return `${acc} <span class="removed" data-testid="md-line-removed">${value}</span>`;
+    if (el.added) {
+      return `${acc}<div class="added" data-testid="md-line-added">${value}</div>`;
     }
-    return `${acc} ${value}`;
+    return `${acc}${value}`;
   }, "");
+  return joined;
 }
 
-const escapeStr = "\n\n --- Diff --- \n\n";
-
-export function getDiffHTML(oldText, newText) {
+export function getDiffHTML(oldText = "", newText = "") {
   const oldMarkdown = renderToStaticMarkup(
-    <MarkdownRenderer body={escapeStr + oldText + escapeStr} isDiff={true} />
+    <MarkdownRenderer body={oldText} isDiff={true} />
   );
   const newMarkdown = renderToStaticMarkup(
-    <MarkdownRenderer body={escapeStr + newText + escapeStr} isDiff={true} />
+    <MarkdownRenderer body={newText} isDiff={true} />
   );
-  const diff = diffTrimmedLines(oldMarkdown, newMarkdown);
-  return joinDiffLines(diff);
+
+  const oldNode = parseNode(oldMarkdown).firstChild.firstChild.innerHTML;
+  const newNode = parseNode(newMarkdown).firstChild.firstChild.innerHTML;
+
+  const oldSplitted = splitRawMdLines(oldNode);
+  const newSplitted = splitRawMdLines(newNode);
+
+  const diff = diffArrays(oldSplitted, newSplitted);
+  return joinDiffArrays(diff);
 }
 
 export function DiffHTML({ oldText, newText }) {
   const html = getDiffHTML(oldText, newText);
-  return parse(html);
+  return (
+    <div>
+      <div className="markdown-body markdown-diff">{parse(html)}</div>
+    </div>
+  );
 }
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index 83d8dae1b..abf7d045d 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
@@ -173,4 +173,220 @@ describe("Given DiffHTML", () => {
       });
     });
   });
+  describe("when using italic texts", () => {
+    describe("given different italic texts", () => {
+      const oldText = "*old*";
+      const newText = "*new*";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldText} newText={newText} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("old");
+        const newElement = screen.getByText("new");
+        expect(oldElement.nodeName).toEqual("EM");
+        expect(oldElement.parentElement.parentElement).toHaveClass("removed");
+        expect(newElement.nodeName).toEqual("EM");
+        expect(newElement.parentElement.parentElement).toHaveClass("added");
+      });
+    });
+    describe("given same text, but one italic and other regular", () => {
+      const oldText = "*old*";
+      const newText = "old";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={oldText} newText={newText} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText("old")[0];
+        const newElement = screen.getAllByText("old")[1];
+        expect(oldElement.nodeName).toEqual("EM");
+        expect(oldElement.parentElement.parentElement).toHaveClass("removed");
+        expect(newElement.nodeName).toEqual("P");
+        expect(newElement.parentElement).toHaveClass("added");
+      });
+    });
+  });
+  describe("when using blockcodes", () => {
+    describe("given different blockcodes", () => {
+      const block1 = "```\ncode1\n```";
+      const block2 = "```\ncode2\n```";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={block1} newText={block2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("code1");
+        const newElement = screen.getByText("code2");
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("CODE");
+      });
+    });
+    describe("given some blockcode replaced by regular text", () => {
+      const block1 = "```\ncode1\n```";
+      const block2 = "code1";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={block1} newText={block2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText("code1")[0];
+        const newElement = screen.getAllByText("code1")[1];
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("P");
+      });
+    });
+    describe("given some blockcode text addition", () => {
+      const block1 = "```\ncode1\n```";
+      const block2 = "```\ncode1 and another text\n```";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={block1} newText={block2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("code1");
+        const newElement = screen.getByText("code1 and another text");
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("CODE");
+      });
+    });
+  });
+  describe("when using inline code", () => {
+    describe("given two different inline codes", () => {
+      const code1 = "`code1`";
+      const code2 = "`code2`";
+      it("should return the correct diff", () => {
+        render(<DiffHTML oldText={code1} newText={code2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("code1");
+        const newElement = screen.getByText("code2");
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("CODE");
+      });
+    });
+    describe("given some code replaced by regular text", () => {
+      const code1 = "`code1`";
+      const code2 = "code1";
+      it("should return the correct diff", () => {
+        render(<DiffHTML oldText={code1} newText={code2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText("code1")[0];
+        const newElement = screen.getAllByText("code1")[1];
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("P");
+      });
+    });
+    describe("given some code text addition", () => {
+      const block1 = "```\ncode1\n```";
+      const block2 = "```\ncode1 and another text\n```";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={block1} newText={block2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("code1");
+        const newElement = screen.getByText("code1 and another text");
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("CODE");
+      });
+    });
+  });
+  describe("when using multiple tag changes", () => {
+    const content = "Content";
+    const cases = [
+      {
+        name: "h1 by h2",
+        oldText: `# ${content}`,
+        newText: `## ${content}`,
+        removedNode: "H1",
+        addedNode: "H2",
+      },
+      {
+        name: "h2 by h3",
+        oldText: `## ${content}`,
+        newText: `### ${content}`,
+        removedNode: "H2",
+        addedNode: "H3",
+      },
+      {
+        name: "h3 by h4",
+        oldText: `### ${content}`,
+        newText: `#### ${content}`,
+        removedNode: "H3",
+        addedNode: "H4",
+      },
+      {
+        name: "h4 by h5",
+        oldText: `#### ${content}`,
+        newText: `##### ${content}`,
+        removedNode: "H4",
+        addedNode: "H5",
+      },
+      {
+        name: "h5 by h6",
+        oldText: `##### ${content}`,
+        newText: `###### ${content}`,
+        removedNode: "H5",
+        addedNode: "H6",
+      },
+      {
+        name: "code by strong",
+        oldText: `\`${content}\``,
+        newText: `**${content}**`,
+        removedNode: "CODE",
+        addedNode: "STRONG",
+      },
+      {
+        name: "code by em",
+        oldText: `\`${content}\``,
+        newText: `*${content}*`,
+        removedNode: "CODE",
+        addedNode: "EM",
+      },
+      {
+        name: "em by strong",
+        oldText: `*${content}*`,
+        newText: `**${content}**`,
+        removedNode: "EM",
+        addedNode: "STRONG",
+      },
+      {
+        name: "em by code",
+        oldText: `*${content}*`,
+        newText: `\`${content}\``,
+        removedNode: "EM",
+        addedNode: "CODE",
+      },
+      {
+        name: "strong by em",
+        oldText: `**${content}**`,
+        newText: `*${content}*`,
+        removedNode: "STRONG",
+        addedNode: "EM",
+      },
+      {
+        name: "strong by code",
+        oldText: `**${content}**`,
+        newText: `\`${content}\``,
+        removedNode: "STRONG",
+        addedNode: "CODE",
+      },
+      {
+        name: "quote by paragraph",
+        oldText: `> ${content}`,
+        newText: content,
+        removedNode: "BLOCKQUOTE",
+        addedNode: "P",
+      },
+    ];
+    for (const testCase of cases) {
+      it(`should replace ${testCase.name}`, () => {
+        render(
+          <DiffHTML oldText={testCase.oldText} newText={testCase.newText} />
+        );
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getAllByText(content)[0];
+        const newElement = screen.getAllByText(content)[1];
+        expect(oldElement.nodeName).toEqual(testCase.removedNode);
+        expect(newElement.nodeName).toEqual(testCase.addedNode);
+      });
+    }
+  });
 });
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
index d4ceb0759..60c8ab72b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownRenderer.js
@@ -19,7 +19,7 @@ export const MarkdownRenderer = ({
       skipHtml={true}
       unwrapDisallowed={true}
       remarkPlugins={[gfm]}
-      components={customRenderers(renderImages)}
+      components={customRenderers(renderImages, isDiff)}
       disallowedElements={disallowedElements}
     >
       {body}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
index 22231a11f..3c86ad6bc 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
@@ -72,9 +72,25 @@ const linkHandler = ({ href, children }) => {
   return <LinkRenderer url={newHref}>{children}</LinkRenderer>;
 };
 
-export const customRenderers = (renderImages) => {
+const quoteHandler =
+  (isDiff) =>
+  ({ children }) => {
+    let newChildren = [...children];
+    if (isDiff) {
+      newChildren = React.Children.map(children, (c) => {
+        if (React.isValidElement(c)) {
+          return <>{c.props.children}</>;
+        }
+        return c;
+      });
+    }
+    return <blockquote>{newChildren}</blockquote>;
+  };
+
+export const customRenderers = (renderImages, isDiff) => {
   return {
     img: imageHandler(renderImages),
     a: linkHandler,
+    blockquote: quoteHandler(isDiff),
   };
 };
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
index 54b22b1f5..031b56908 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
@@ -504,12 +504,6 @@
 }
 
 /* DIFF */
-.markdown-diff > p:first-child {
-  display: none;
-}
-.markdown-diff > p:last-child {
-  display: none;
-}
 .added {
   color: green;
   background-color: #e2ffe8;
@@ -526,6 +520,9 @@
   color: red;
   background-color: #ffe2e2;
 }
-.md-escape-line {
-  display: none;
+.added > blockquote {
+  min-height: 2rem;
+}
+.removed > blockquote {
+  min-height: 2rem;
 }
diff --git a/plugins-structure/yarn.lock b/plugins-structure/yarn.lock
index aab6c5320..384936be1 100644
--- a/plugins-structure/yarn.lock
+++ b/plugins-structure/yarn.lock
@@ -5614,6 +5614,17 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
+css-select@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
+  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.1.0"
+    domhandler "^4.3.0"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -5627,6 +5638,11 @@ css-what@^5.0.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
   integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
+css-what@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+
 css.escape@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
@@ -6019,6 +6035,13 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domutils@^2.5.2, domutils@^2.6.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
@@ -7132,7 +7155,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@^1.2.0:
+he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -9384,6 +9407,14 @@ node-gyp@^7.1.0:
     tar "^6.0.2"
     which "^2.0.2"
 
+node-html-parser@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-5.3.3.tgz#2845704f3a7331a610e0e551bf5fa02b266341b6"
+  integrity sha512-ncg1033CaX9UexbyA7e1N0aAoAYRDiV8jkTvzEnfd1GDvzFdrsXLzR4p4ik8mwLgnaKP/jyUFWDy9q3jvRT2Jw==
+  dependencies:
+    css-select "^4.2.1"
+    he "1.2.0"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -9568,6 +9599,13 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

From 0219e4460cdff110c7ee5c88c814fd2028088b52 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 24 Mar 2022 10:35:18 -0300
Subject: [PATCH 16/29] feat(common-ui): improve diff tests.

---
 .../components/Markdown/MarkdownDiff.test.js  | 77 ++++++++++++++++++-
 .../src/components/Markdown/helpers.js        | 14 ++--
 .../src/components/Markdown/styles.css        | 18 +++--
 3 files changed, 93 insertions(+), 16 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index abf7d045d..b2cc8c315 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
@@ -273,7 +273,9 @@ describe("Given DiffHTML", () => {
         expect(newElement.nodeName).toEqual("P");
       });
     });
-    describe("given some code text addition", () => {
+  });
+  describe("when using code blocks", () => {
+    describe("given some code block text addition", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "```\ncode1 and another text\n```";
       it("should return correct diff", () => {
@@ -286,8 +288,21 @@ describe("Given DiffHTML", () => {
         expect(newElement.nodeName).toEqual("CODE");
       });
     });
+    describe("given some code block text changes", () => {
+      const block1 = "```\ncode1\n```";
+      const block2 = "```\ncode2\n```";
+      it("should return correct diff", () => {
+        render(<DiffHTML oldText={block1} newText={block2} />);
+        expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
+        expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
+        const oldElement = screen.getByText("code1");
+        const newElement = screen.getByText("code2");
+        expect(oldElement.nodeName).toEqual("CODE");
+        expect(newElement.nodeName).toEqual("CODE");
+      });
+    });
   });
-  describe("when using multiple tag changes", () => {
+  describe("when using multiple tag changes for same content", () => {
     const content = "Content";
     const cases = [
       {
@@ -368,12 +383,68 @@ describe("Given DiffHTML", () => {
         addedNode: "CODE",
       },
       {
-        name: "quote by paragraph",
+        name: "blockquote by paragraph",
         oldText: `> ${content}`,
         newText: content,
         removedNode: "BLOCKQUOTE",
         addedNode: "P",
       },
+      {
+        name: "blockquote by nested blockquote",
+        oldText: `> ${content}`,
+        newText: `> > ${content}`,
+        removedNode: "BLOCKQUOTE",
+        addedNode: "BLOCKQUOTE",
+      },
+      {
+        name: "blockquote by header",
+        oldText: `> ${content}`,
+        newText: `# ${content}`,
+        removedNode: "BLOCKQUOTE",
+        addedNode: "H1",
+      },
+      {
+        name: "link by paragraph",
+        oldText: `[${content}](http://link.com)`,
+        newText: content,
+        removedNode: "A",
+        addedNode: "P",
+      },
+      {
+        name: "link by header",
+        oldText: `[${content}](http://link.com)`,
+        newText: `# ${content}`,
+        removedNode: "A",
+        addedNode: "H1",
+      },
+      {
+        name: "link by header link",
+        oldText: `[${content}](http://link.com)`,
+        newText: `# [${content}](http://link.com)`,
+        removedNode: "A",
+        addedNode: "A",
+      },
+      {
+        name: "link by code",
+        oldText: `[${content}](http://link.com)`,
+        newText: `\`${content}\``,
+        removedNode: "A",
+        addedNode: "CODE",
+      },
+      {
+        name: "list by paragraph",
+        oldText: `1. ${content}`,
+        newText: content,
+        removedNode: "LI",
+        addedNode: "P",
+      },
+      {
+        name: "code block by paragraph",
+        oldText: `\`\`\`\n${content}\n\`\`\``,
+        newText: content,
+        removedNode: "CODE",
+        addedNode: "P",
+      },
     ];
     for (const testCase of cases) {
       it(`should replace ${testCase.name}`, () => {
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
index 3c86ad6bc..71f85993b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/helpers.js
@@ -72,16 +72,18 @@ const linkHandler = ({ href, children }) => {
   return <LinkRenderer url={newHref}>{children}</LinkRenderer>;
 };
 
-const quoteHandler =
+const blockquoteHandler =
   (isDiff) =>
   ({ children }) => {
     let newChildren = [...children];
     if (isDiff) {
-      newChildren = React.Children.map(children, (c) => {
-        if (React.isValidElement(c)) {
-          return <>{c.props.children}</>;
+      // Remove all paragraph tags from blockquotes, so diff can recognize the
+      // differences inside blockquotes
+      newChildren = traverseChildren(<>{children}</>, (el) => {
+        if (React.isValidElement(el)) {
+          return el.type === "p" ? <>{el.props.children}</> : el;
         }
-        return c;
+        return el;
       });
     }
     return <blockquote>{newChildren}</blockquote>;
@@ -91,6 +93,6 @@ export const customRenderers = (renderImages, isDiff) => {
   return {
     img: imageHandler(renderImages),
     a: linkHandler,
-    blockquote: quoteHandler(isDiff),
+    blockquote: blockquoteHandler(isDiff),
   };
 };
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
index 031b56908..d077f8e4b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
@@ -512,17 +512,21 @@
   color: green;
   background-color: #e2ffe8;
 }
-.removed > * {
-  color: red;
-  background-color: #ffe2e2;
+.added > pre {
+  color: green;
+  border: green 1px solid;
+  background-color: #bffccc !important;
 }
 .removed {
   color: red;
   background-color: #ffe2e2;
 }
-.added > blockquote {
-  min-height: 2rem;
+.removed > * {
+  color: red;
+  background-color: #ffe2e2;
 }
-.removed > blockquote {
-  min-height: 2rem;
+.removed > pre {
+  color: red;
+  border: red 1px solid;
+  background-color: #ffcccc !important;
 }

From 584a40dfae240285fd586505f7fbd8f810c98320 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 24 Mar 2022 10:42:34 -0300
Subject: [PATCH 17/29] feat(common-ui): improve diff tests.

---
 .../src/components/Markdown/MarkdownDiff.test.js       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index b2cc8c315..3b2d3e1ac 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
@@ -2,6 +2,7 @@ import React from "react";
 import { DiffHTML } from "./MarkdownDiff";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import trim from "lodash/trim";
 
 describe("Given DiffHTML", () => {
   describe("when headers are different", () => {
@@ -451,12 +452,17 @@ describe("Given DiffHTML", () => {
         render(
           <DiffHTML oldText={testCase.oldText} newText={testCase.newText} />
         );
+        // assert rendered diff
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
-        const oldElement = screen.getAllByText(content)[0];
-        const newElement = screen.getAllByText(content)[1];
+        // query by same content. Should return 2 elements: old and new
+        const [oldElement, newElement] = screen.getAllByText(content);
+        // assert node replacement
         expect(oldElement.nodeName).toEqual(testCase.removedNode);
         expect(newElement.nodeName).toEqual(testCase.addedNode);
+        // prevent unexpected additional chars rendering
+        expect(trim(oldElement.textContent, "\n ")).toEqual(content);
+        expect(trim(newElement.textContent, "\n ")).toEqual(content);
       });
     }
   });

From 29db7f0588a26819507c57849511a34846d36bd5 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 24 Mar 2022 15:02:50 -0300
Subject: [PATCH 18/29] feat(common-ui): multiline commands on md editor

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js |  6 +-
 .../Markdown/MarkdownEditor/commands.js       | 98 +++++++++++++++----
 .../Markdown/MarkdownEditor/commands.test.js  | 92 ++++++-----------
 3 files changed, 115 insertions(+), 81 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index 92301bd44..4b79431bb 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { classNames } from "pi-ui";
 import styles from "./MarkdownEditor.module.css";
 import { MarkdownRenderer } from "../MarkdownRenderer";
-import { commands, getLineContent, getSelectedContent } from "./commands";
+import { commands, getMultiLineContent, getSelectedContent } from "./commands";
 
 export function MarkdownEditor({
   onChange,
@@ -30,8 +30,8 @@ export function MarkdownEditor({
     const startPos = editorRef.current.selectionStart;
     const endPos = editorRef.current.selectionEnd;
     const selected = getSelectedContent(content, startPos, endPos);
-    const line = getLineContent(content, startPos);
-    const newString = command({ line, selected });
+    const lines = getMultiLineContent(content, startPos, endPos);
+    const newString = command({ selected, lines });
     setValue(newString);
     onChange(newString);
   };
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index d8533c155..d58b07d25 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -4,8 +4,32 @@ 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 { ReactComponent as NumberedListSVG } from "./assets/numberedList.svg";
+import NumberedListSVG from "./assets/numberedList.svg";
 
+function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
+  let index = 0;
+  return lines.reduce((acc, curr) => {
+    if (ignoreBlankLines && curr.length === 0) {
+      return `${acc}\n`;
+    }
+    index++;
+    return `${acc}\n${formatFn(curr, index)}`;
+  }, "");
+}
+
+// Multiline command interface
+const multiLineCommand =
+  (execFn, options) =>
+  ({ lines: { previous, current, next } }) => {
+    const formattedLines = formatEachLine(current, execFn, options);
+    let newPrev = `${previous}\n`;
+    if (previous.length === 0) {
+      newPrev = "";
+    }
+    return `${newPrev}${formattedLines}\n${next}`;
+  };
+
+// Available commands
 export const commands = [
   {
     label: "Bold Text",
@@ -22,8 +46,9 @@ export const commands = [
   {
     label: "Quote",
     Icon: QuoteSVG,
-    command: ({ line: { previous, current, next } }) =>
-      `${previous}\n> ${current}\n${next}`,
+    command: multiLineCommand((curr) => `> ${curr}`, {
+      ignoreBlankLines: true,
+    }),
   },
   {
     label: "Code",
@@ -34,29 +59,62 @@ export const commands = [
   {
     label: "List",
     Icon: BulletListSVG,
-    command: ({ line: { previous, current, next } }) =>
-      `${previous}\n- ${current}\n${next}`,
+    command: multiLineCommand((curr) => `- ${curr}`, {
+      ignoreBlankLines: true,
+    }),
+  },
+  {
+    label: "Numbered List",
+    Icon: NumberedListSVG,
+    command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
+      ignoreBlankLines: true,
+    }),
   },
 ];
 
-export function getLineContent(content, startPos) {
-  const lines = content.split("\n");
-  let acc = 0,
-    selectedLine = "",
+function insertAt(text, pos, newText) {
+  return text.substring(0, pos) + newText + text.substring(pos);
+}
+
+function countOccurences(string, term) {
+  const array = string.split(term);
+  return array.length - 1;
+}
+
+export function getMultiLineContent(content, startPos, endPos) {
+  const escapeChar = "&#27;",
+    numberOfEscapes = 2; // Start escape, end escape
+  let newContent = content,
+    escapeCount = 0,
     previousLines = [],
-    nextLines = [...lines];
+    selectedLines = [],
+    nextLines = [];
+  // add escapes on both start and end of text selection
+  newContent = insertAt(newContent, startPos, escapeChar);
+  newContent = insertAt(newContent, endPos + escapeChar.length, escapeChar);
+  const lines = newContent.split("\n");
   for (const line of lines) {
-    acc += line.length;
-    nextLines = nextLines.splice(1, lines.length);
-    if (acc >= startPos - 1) {
-      selectedLine = line;
-      break;
+    const numOfOccurences = countOccurences(line, escapeChar);
+    // remove escape char
+    const escapeRegExp = new RegExp(escapeChar, "g");
+    const lineWithoutEscape = line.replace(escapeRegExp, "");
+    escapeCount += numOfOccurences;
+    if (!escapeCount) {
+      previousLines = [...previousLines, lineWithoutEscape];
+    }
+    if (escapeCount === 1 || numOfOccurences === numberOfEscapes) {
+      selectedLines = [...selectedLines, lineWithoutEscape];
+    }
+    if (escapeCount === 2 && numOfOccurences === 1) {
+      selectedLines = [...selectedLines, lineWithoutEscape];
+    }
+    if (escapeCount === 2 && numOfOccurences === 0) {
+      nextLines = [...nextLines, lineWithoutEscape];
     }
-    previousLines = [...previousLines, line];
   }
   return {
     previous: previousLines.join("\n"),
-    current: selectedLine,
+    current: selectedLines,
     next: nextLines.join("\n"),
   };
 }
@@ -71,3 +129,9 @@ export function getSelectedContent(content, startPos, endPos) {
     next: nextContent,
   };
 }
+
+export function executeCommand(command, content, startPos, endPos) {
+  const selected = getSelectedContent(content, startPos, endPos);
+  const lines = getMultiLineContent(content, startPos, endPos);
+  return command({ selected, lines });
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
index 3fd6681ba..531ab3dee 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
@@ -1,67 +1,51 @@
-import { commands, getLineContent, getSelectedContent } from "./commands";
+import { getMultiLineContent, getSelectedContent } from "./commands";
 
-const multiLineText = `Vestibulum ac diam sit amet quam vehicula.
+describe("Given getMultiLineContent util", () => {
+  const line1 = "Cras ultricies ligula sed magna dictum porta.";
+  const line2 = "Nulla porttitor accumsan tincidunt.";
+  const line3 = "Cras ultricies ligula sed magna dictum porta.";
+  const multiLineText = `${line1}\n${line2}\n${line3}`;
 
-Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
-
-Pellentesque in ipsum id orci porta dapibus.`;
-
-describe("Given getLineContent util", () => {
-  describe("when cursor is at the beginning of the multiLineText", () => {
-    it("should select the first line", () => {
-      const { previous, current, next } = getLineContent(multiLineText, 0);
-      expect(current).toEqual("Vestibulum ac diam sit amet quam vehicula.");
-      expect(previous).toEqual("");
-      expect(next).toEqual(
-        "\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n\nPellentesque in ipsum id orci porta dapibus."
-      );
-    });
-  });
-  describe("when cursor is at the end of the multiLineText", () => {
-    it("should select a new empty line", () => {
-      const { previous, current, next } = getLineContent(
+  describe("when selecting the first line", () => {
+    it("should return the seleted line", () => {
+      const { previous, current, next } = getMultiLineContent(
         multiLineText,
-        multiLineText.length
+        0,
+        1
       );
-      expect(current).toEqual("");
-      expect(previous).toEqual(multiLineText);
-      expect(next).toEqual("");
-    });
-  });
-  describe("when cursor is at a random position on first line", () => {
-    it("should select the first line", () => {
-      const { previous, current, next } = getLineContent(multiLineText, 20);
-      expect(current).toEqual("Vestibulum ac diam sit amet quam vehicula.");
       expect(previous).toEqual("");
-      expect(next).toEqual(
-        "\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n\nPellentesque in ipsum id orci porta dapibus."
-      );
+      expect(current).toEqual([line1]);
+      expect(next).toEqual(`${line2}\n${line3}`);
     });
   });
-  describe("when cursor is at a random position on second line", () => {
-    it("should select the second line", () => {
-      const { previous, current, next } = getLineContent(multiLineText, 50);
-      expect(current).toEqual(
-        "Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem."
+  describe("when selecting the second line", () => {
+    it("should return the seleted line", () => {
+      const { previous, current, next } = getMultiLineContent(
+        multiLineText,
+        50,
+        51
       );
-      expect(previous).toEqual("Vestibulum ac diam sit amet quam vehicula.\n");
-      expect(next).toEqual("\nPellentesque in ipsum id orci porta dapibus.");
+      expect(previous).toEqual(`${line1}`);
+      expect(current).toEqual([line2]);
+      expect(next).toEqual(`${line3}`);
     });
   });
-  describe("when cursor is at a random position on third line", () => {
-    it("should select the third line", () => {
-      const { previous, current, next } = getLineContent(multiLineText, 120);
-      expect(current).toEqual("Pellentesque in ipsum id orci porta dapibus.");
-      expect(previous).toEqual(
-        "Vestibulum ac diam sit amet quam vehicula.\n\nCurabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n"
+  describe("when selecting the third line", () => {
+    it("should return the seleted line", () => {
+      const { previous, current, next } = getMultiLineContent(
+        multiLineText,
+        100,
+        101
       );
+      expect(previous).toEqual(`${line1}\n${line2}`);
+      expect(current).toEqual([line3]);
       expect(next).toEqual("");
     });
   });
 });
 
-const text = "First second third\n\nnew line";
 describe("Given getSelectedContent util", () => {
+  const text = "First second third\n\nnew line";
   describe("when first word is selected", () => {
     it("should return the selected word", () => {
       const { previous, current, next } = getSelectedContent(text, 0, 5);
@@ -91,17 +75,3 @@ describe("Given getSelectedContent util", () => {
     });
   });
 });
-
-describe("Given commands array", () => {
-  const expected = ["**text**", "*text*", "\n> text\n", "`text`", "\n- text\n"];
-  function getCommand(command) {
-    const selected = getSelectedContent("text", 0, "text".length);
-    const line = getLineContent("text", 0);
-    return command({ line, selected });
-  }
-  it("should return the correct sentence for each command", () => {
-    commands.forEach(({ command }, index) => {
-      expect(expected[index]).toEqual(getCommand(command));
-    });
-  });
-});

From 63a1c39a02a4597fd6c5ba491ccc122b8b9dd767 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 24 Mar 2022 18:05:00 -0300
Subject: [PATCH 19/29] feat(common-ui): add commands shortcuts

---
 .../components/Markdown/MarkdownDiff.test.js  |  9 +++-
 .../Markdown/MarkdownEditor/MarkdownEditor.js | 52 ++++++++++++++-----
 .../Markdown/MarkdownEditor/commands.js       | 16 ++++--
 3 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index 3b2d3e1ac..e946e35ec 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/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\`\`\``,
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index 4b79431bb..f8df715f2 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/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>
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index d58b07d25..836ef020b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/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,19 +33,24 @@ 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,
     }),
@@ -53,12 +58,14 @@ export const commands = [
   {
     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,
     }),
@@ -66,6 +73,7 @@ export const commands = [
   {
     label: "Numbered List",
     Icon: NumberedListSVG,
+    offset: 3,
     command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
       ignoreBlankLines: true,
     }),

From 1f374246e9a5ccd4012943c5225651ee30fed71e Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Fri, 25 Mar 2022 16:50:21 -0300
Subject: [PATCH 20/29] feat(common-ui): review fixes

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js | 11 ++---
 .../MarkdownEditor/MarkdownEditor.module.css  | 14 +++---
 .../Markdown/MarkdownEditor/assets/bold.svg   |  1 -
 .../MarkdownEditor/assets/bulletList.svg      |  1 -
 .../Markdown/MarkdownEditor/assets/code.svg   |  1 -
 .../Markdown/MarkdownEditor/assets/image.svg  |  1 -
 .../Markdown/MarkdownEditor/assets/italic.svg |  1 -
 .../Markdown/MarkdownEditor/assets/link.svg   |  1 -
 .../MarkdownEditor/assets/numberedList.svg    |  1 -
 .../Markdown/MarkdownEditor/assets/quote.svg  |  1 -
 .../Markdown/MarkdownEditor/commands.js       | 45 +++++++++++++------
 .../src/components/Markdown/styles.css        | 31 +++++--------
 .../packages/common-ui/src/dev/index.js       | 21 ++++++++-
 13 files changed, 77 insertions(+), 53 deletions(-)
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
 delete mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index f8df715f2..d83715e54 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -66,10 +66,12 @@ export function MarkdownEditor({
           <div onClick={handleShowPreview}>Preview</div>
         </div>
         <div className={styles.actionButtons}>
-          {availableCommands.map(({ command, Icon, offset }, i) => (
-            <span key={i} onClick={handleCommand(command, { offset })}>
-              <Icon />
-            </span>
+          {availableCommands.map(({ command, Button, offset }, i) => (
+            <Button
+              key={i}
+              className={styles.buttonIcon}
+              onClick={handleCommand(command, { offset })}
+            />
           ))}
         </div>
       </div>
@@ -90,7 +92,6 @@ export function MarkdownEditor({
           value={value}
           onKeyPress={handleKeyPress}
           onChange={handleChange}
-          // onSelect={(e) => console.log("EVENT", e)}
         />
         <MarkdownRenderer body={value} className={styles.preview} />
       </div>
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
index 04585b688..000b50236 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.module.css
@@ -6,15 +6,15 @@
 .actionButtons {
   cursor: pointer;
 }
-.actionButtons > span {
+.actionButtons > button {
   margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  border-left: 1px solid var(--separator-color);
+  display: inline-flex;
 }
-.actionButtons > span:first-child {
+.actionButtons > button:first-child {
   margin-left: 0rem;
-  padding-left: 0rem;
-  border: 0px;
+}
+.actionButtons > button:not(:hover) {
+  box-shadow: none !important;
 }
 
 .tabs {
@@ -23,6 +23,7 @@
 .headers {
   display: flex;
   padding: 0.5rem;
+  align-items: center;
   justify-content: space-between;
 }
 .tabs > div {
@@ -51,6 +52,7 @@
   width: 100%;
   padding: 1rem;
   background-color: var(--card-background);
+  color: var(--text-color);
 }
 .preview {
   padding: 1rem;
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
deleted file mode 100644
index 26cb65635..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bold.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="9.272" height="12" viewBox="0 0 9.272 12"><path d="M20.618,12V0h4.121a6.279,6.279,0,0,1,3.486.828A2.765,2.765,0,0,1,29.478,3.3a2.887,2.887,0,0,1-.4,1.525A2.472,2.472,0,0,1,27.83,5.827a2.471,2.471,0,0,1,1.558.96,2.834,2.834,0,0,1,.5,1.661A3.129,3.129,0,0,1,28.712,11.1a5.487,5.487,0,0,1-3.379.9Zm2.794-7H24.8a2.437,2.437,0,0,0,1.418-.367,1.2,1.2,0,0,0,.47-1.026,1.292,1.292,0,0,0-.478-1.117,2.49,2.49,0,0,0-1.467-.35H23.412Zm0,1.846V9.857h1.92a2.134,2.134,0,0,0,1.335-.35,1.284,1.284,0,0,0,.445-1.075,1.647,1.647,0,0,0-.383-1.183,1.657,1.657,0,0,0-1.24-.4Z" transform="translate(-20.618)" fill="#c4cbd2"/></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
deleted file mode 100644
index f83e5090f..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/bulletList.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15.284" height="13.997" viewBox="0 0 15.284 13.997"><g transform="translate(0 0)"><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0)" fill="#c4cbd2"/><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0 5.106)" fill="#c4cbd2"/><ellipse cx="1.815" cy="1.815" rx="1.815" ry="1.815" transform="translate(0 10.367)" fill="#c4cbd2"/><g transform="translate(4.76 0.628)"><path d="M32.591,12.534H42.45a.333.333,0,0,0,.333-.333V10.492a.333.333,0,0,0-.333-.333H32.591a.333.333,0,0,0-.333.333V12.2A.333.333,0,0,0,32.591,12.534Z" transform="translate(-32.258 -10.159)" fill="#c4cbd2"/><path d="M42.449,40.158H32.591a.333.333,0,0,0-.333.333V42.2a.333.333,0,0,0,.333.333H42.45a.333.333,0,0,0,.333-.333V40.491A.333.333,0,0,0,42.449,40.158Z" transform="translate(-32.258 -35.051)" fill="#c4cbd2"/><path d="M42.449,71.064H32.591a.333.333,0,0,0-.333.333v1.709a.333.333,0,0,0,.333.333H42.45a.333.333,0,0,0,.333-.333V71.4A.333.333,0,0,0,42.449,71.064Z" transform="translate(-32.258 -60.697)" fill="#c4cbd2"/></g></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
deleted file mode 100644
index a6276aef8..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/code.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20.922" height="14" viewBox="0 0 20.922 14" className="code"><g transform="translate(0.5 0.502)"><path d="M194.732,65.4l-.618-.161a.291.291,0,0,0-.234.024.311.311,0,0,0-.155.185l-3.718,12.22a.271.271,0,0,0,.025.232.321.321,0,0,0,.194.147l.618.161a.291.291,0,0,0,.234-.024.312.312,0,0,0,.154-.184l3.718-12.221a.271.271,0,0,0-.025-.232A.321.321,0,0,0,194.732,65.4Z" transform="translate(-182.518 -65.225)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/><path d="M5.8,119.535a.284.284,0,0,0-.1-.213l-.5-.464a.33.33,0,0,0-.459,0L.1,123.181a.278.278,0,0,0,0,.427l4.645,4.323a.33.33,0,0,0,.459,0l.5-.464a.278.278,0,0,0,0-.427l-3.917-3.646L5.7,119.748A.284.284,0,0,0,5.8,119.535Z" transform="translate(0 -116.896)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/><path d="M362.013,123.178l-4.645-4.323a.329.329,0,0,0-.458,0l-.5.464a.278.278,0,0,0,0,.427l3.917,3.646-3.917,3.646a.278.278,0,0,0,0,.427l.5.464a.33.33,0,0,0,.458,0l4.645-4.323a.278.278,0,0,0,0-.427Z" transform="translate(-342.191 -116.893)" fill="#c4cbd2" stroke="#c4cbd2" stroke-width="1"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
deleted file mode 100644
index 228e98187..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/image.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="15"><path fill="#c4cbd2" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
deleted file mode 100644
index 81685c0eb..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/italic.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="9.981" height="12" viewBox="0 0 9.981 12"><g transform="translate(0 0)"><path d="M52.712,0H45.327a.346.346,0,0,0-.346.346v1.5a.346.346,0,0,0,.346.346h1.921L46.4,9.808H43.423a.346.346,0,0,0-.346.346v1.5a.346.346,0,0,0,.346.346h7.385a.346.346,0,0,0,.346-.346v-1.5a.346.346,0,0,0-.346-.346H48.945l.846-7.615h2.921a.346.346,0,0,0,.346-.346V.346A.346.346,0,0,0,52.712,0Z" transform="translate(-43.077)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
deleted file mode 100644
index 46f653c76..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/link.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13.042" height="12.997" viewBox="0 0 13.042 12.997"><g transform="translate(0 0)"><path d="M4.776,10.312l-.66.653a1.48,1.48,0,0,1-2.074,0,1.427,1.427,0,0,1,0-2.033l2.429-2.4c.5-.5,1.45-1.23,2.141-.548A.807.807,0,1,0,7.75,4.839c-1.173-1.16-2.907-.946-4.418.548L.9,7.789a3.032,3.032,0,0,0,0,4.319,3.105,3.105,0,0,0,4.351,0l.66-.653a.807.807,0,1,0-1.139-1.142ZM12.138.982A2.893,2.893,0,0,0,7.949.822l-.823.814A.807.807,0,1,0,8.265,2.778l.822-.813A1.312,1.312,0,0,1,11,2.125a1.426,1.426,0,0,1,0,2.034L8.408,6.721c-1.185,1.172-1.741.622-1.978.387A.807.807,0,1,0,5.291,8.251a2.553,2.553,0,0,0,1.816.8A3.563,3.563,0,0,0,9.546,7.864L12.138,5.3a3.032,3.032,0,0,0,0-4.32Z" transform="translate(0 0)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
deleted file mode 100644
index 56e8757bd..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/numberedList.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13.437" height="13.995" viewBox="0 0 13.437 13.995"><g transform="translate(0 0)"><g transform="translate(3.128 0.982)"><path d="M32.584,12.486h9.658a.326.326,0,0,0,.326-.326V10.485a.326.326,0,0,0-.326-.326H32.584a.326.326,0,0,0-.326.326V12.16A.326.326,0,0,0,32.584,12.486Z" transform="translate(-32.258 -10.159)" fill="#c4cbd2"/><path d="M42.241,40.158H32.584a.326.326,0,0,0-.326.326v1.675a.326.326,0,0,0,.326.326h9.658a.326.326,0,0,0,.326-.326V40.484A.326.326,0,0,0,42.241,40.158Z" transform="translate(-32.258 -35.339)" fill="#c4cbd2"/><path d="M42.241,71.064H32.584a.326.326,0,0,0-.326.326v1.675a.326.326,0,0,0,.326.326h9.658a.326.326,0,0,0,.326-.326V71.39A.326.326,0,0,0,42.241,71.064Z" transform="translate(-32.258 -61.28)" fill="#c4cbd2"/></g><path d="M.3,5.223a.246.246,0,0,0,.192-.059l.15-.131V7.165a.247.247,0,0,0,.247.247h.254a.247.247,0,0,0,.247-.247V4.314a.247.247,0,0,0-.247-.247H.883a.247.247,0,0,0-.16.059l-.637.543A.247.247,0,0,0,.044,5L.13,5.12A.248.248,0,0,0,.3,5.223Z" transform="translate(0.001 -4.067)" fill="#c4cbd2"/><path d="M1.292,36.813a.243.243,0,0,0-.161.253l.016.162a.243.243,0,0,0,.355.193.61.61,0,0,1,.474-.087.312.312,0,0,1,.233.2c.061.185.064.48-.463,1.115l-.407.486a2.7,2.7,0,0,1-.211.228.243.243,0,0,0-.079.18v.239a.244.244,0,0,0,.243.243H2.774a.244.244,0,0,0,.243-.243v-.126a.244.244,0,0,0-.243-.243H2c.074-.084.168-.2.278-.335a2.1,2.1,0,0,0,.7-1.684.837.837,0,0,0-.443-.609,1.111,1.111,0,0,0-.507-.1A2.241,2.241,0,0,0,1.292,36.813Z" transform="translate(-1.049 -31.382)" fill="#c4cbd2"/><path d="M2.353,71.166a.874.874,0,0,0,.119-.077.773.773,0,0,0,.287-.623.827.827,0,0,0-.348-.706,1.165,1.165,0,0,0-.7-.189,2.311,2.311,0,0,0-.651.1.241.241,0,0,0-.171.246l.009.141a.241.241,0,0,0,.321.211,1.062,1.062,0,0,1,.357-.072.691.691,0,0,1,.116.01.359.359,0,0,1,.3.206.386.386,0,0,1-.013.3c-.1.163-.391.2-.552.2a.24.24,0,0,0-.233.24v.106a.243.243,0,0,0,.243.241.814.814,0,0,1,.417.078.331.331,0,0,1,.171.308.371.371,0,0,1-.181.34.876.876,0,0,1-.723.005.241.241,0,0,0-.316.21l-.011.14a.241.241,0,0,0,.152.243.875.875,0,0,0,.164.045,2.081,2.081,0,0,0,.456.048,1.4,1.4,0,0,0,.954-.308,1.007,1.007,0,0,0,.25-.919A.689.689,0,0,0,2.353,71.166Z" transform="translate(-0.797 -58.917)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg
deleted file mode 100644
index c159a2459..000000000
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/assets/quote.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13.262" height="12.003" viewBox="0 0 13.262 12.003"><g transform="translate(0 0.001)"><path d="M4.555,36.547H1.518a1.413,1.413,0,0,0-1.076.477A1.643,1.643,0,0,0,0,38.184v3.273a1.642,1.642,0,0,0,.443,1.159,1.413,1.413,0,0,0,1.076.477H3.29a.707.707,0,0,1,.538.239.821.821,0,0,1,.221.58v.273a2.188,2.188,0,0,1-.593,1.543,1.883,1.883,0,0,1-1.431.639H1.518a.47.47,0,0,0-.356.162.545.545,0,0,0-.15.384V48a.546.546,0,0,0,.15.384.47.47,0,0,0,.356.162h.506a3.7,3.7,0,0,0,1.57-.345,4.075,4.075,0,0,0,1.293-.934,4.434,4.434,0,0,0,.866-1.394,4.539,4.539,0,0,0,.32-1.692v-6a1.643,1.643,0,0,0-.443-1.159A1.413,1.413,0,0,0,4.555,36.547Z" transform="translate(0 -36.547)" fill="#c4cbd2"/><path d="M261.448,37.024a1.413,1.413,0,0,0-1.075-.477h-3.037a1.413,1.413,0,0,0-1.076.477,1.643,1.643,0,0,0-.443,1.159v3.273a1.643,1.643,0,0,0,.443,1.159,1.413,1.413,0,0,0,1.076.477h1.772a.707.707,0,0,1,.538.239.822.822,0,0,1,.221.58v.273a2.188,2.188,0,0,1-.593,1.543,1.882,1.882,0,0,1-1.431.639h-.506a.47.47,0,0,0-.356.162.545.545,0,0,0-.15.384V48a.545.545,0,0,0,.15.384.47.47,0,0,0,.356.162h.506a3.7,3.7,0,0,0,1.57-.345,4.076,4.076,0,0,0,1.293-.934,4.432,4.432,0,0,0,.866-1.394,4.54,4.54,0,0,0,.32-1.692v-6A1.642,1.642,0,0,0,261.448,37.024Z" transform="translate(-248.629 -36.547)" fill="#c4cbd2"/></g></svg>
\ No newline at end of file
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index 836ef020b..3968f6ec8 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -1,15 +1,10 @@
-import BoldSVG from "./assets/bold.svg";
-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 NumberedListSVG from "./assets/numberedList.svg";
-// TODO: Add image command
+import React from "react";
+import { ButtonIcon } from "pi-ui";
 
 function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   let index = 0;
   return lines.reduce((acc, curr, i) => {
-    if (ignoreBlankLines && curr.length === 0) {
+    if (ignoreBlankLines && curr.length === 0 && i) {
       return `${acc}\n`;
     }
     index++;
@@ -35,7 +30,9 @@ export const commands = [
     label: "Bold Text",
     commandKey: "b",
     offset: 2,
-    Icon: BoldSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="bold" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     command: ({ selected: { previous, current, next } }) =>
       `${previous}**${current}**${next}`,
   },
@@ -43,13 +40,17 @@ export const commands = [
     label: "Italic",
     commandKey: "i",
     offset: 1,
-    Icon: ItalicSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="italic" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     command: ({ selected: { previous, current, next } }) =>
       `${previous}_${current}_${next}`,
   },
   {
     label: "Quote",
-    Icon: QuoteSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="quote" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     offset: 2,
     command: multiLineCommand((curr) => `> ${curr}`, {
       ignoreBlankLines: true,
@@ -57,14 +58,18 @@ export const commands = [
   },
   {
     label: "Code",
-    Icon: CodeSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="code" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     offset: 1,
     command: ({ selected: { previous, current, next } }) =>
       `${previous}\`${current}\`${next}`,
   },
   {
     label: "List",
-    Icon: BulletListSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="bulletList" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     offset: 2,
     command: multiLineCommand((curr) => `- ${curr}`, {
       ignoreBlankLines: true,
@@ -72,12 +77,24 @@ export const commands = [
   },
   {
     label: "Numbered List",
-    Icon: NumberedListSVG,
+    Button: ({ onClick }) => (
+      <ButtonIcon type="numberedList" onClick={onClick} viewBox="0 0 16 16" />
+    ),
     offset: 3,
     command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
       ignoreBlankLines: true,
     }),
   },
+  {
+    label: "Task List",
+    Button: ({ onClick }) => (
+      <ButtonIcon type="taskList" onClick={onClick} viewBox="0 0 16 16" />
+    ),
+    offset: 5,
+    command: multiLineCommand((curr) => `- [ ] ${curr}`, {
+      ignoreBlankLines: true,
+    }),
+  },
 ];
 
 function insertAt(text, pos, newText) {
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
index d077f8e4b..c1083f943 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/styles.css
@@ -461,7 +461,7 @@
 
 .markdown-body .highlight pre,
 .markdown-body pre {
-  background-color: #f6f8fa;
+  background-color: #a6a6a61c;
   border-radius: 3px;
   font-size: 85%;
   line-height: 1.45;
@@ -505,28 +505,21 @@
 
 /* DIFF */
 .added {
-  color: green;
-  background-color: #e2ffe8;
-}
-.added > * {
-  color: green;
-  background-color: #e2ffe8;
+  color: var(--color-green);
+  background-color: #bffccc54;
 }
 .added > pre {
-  color: green;
-  border: green 1px solid;
-  background-color: #bffccc !important;
+  color: var(--color-green);
+  border: var(--color-green) 1px solid;
+  background-color: #bffccc1c !important;
 }
 .removed {
-  color: red;
-  background-color: #ffe2e2;
-}
-.removed > * {
-  color: red;
-  background-color: #ffe2e2;
+  color: var(--color-orange);
+  background-color: #ffcccc57;
 }
+
 .removed > pre {
-  color: red;
-  border: red 1px solid;
-  background-color: #ffcccc !important;
+  color: var(--color-orange);
+  border: var(--color-orange) 1px solid;
+  background-color: #ffcccc1c !important;
 }
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
index 5fe928914..1d08cb58c 100644
--- a/plugins-structure/packages/common-ui/src/dev/index.js
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -4,9 +4,11 @@ import { DiffHTML, MarkdownEditor } from "../components/Markdown";
 import {
   DEFAULT_DARK_THEME_NAME,
   DEFAULT_LIGHT_THEME_NAME,
+  DarkLightToggle,
   ThemeProvider,
   defaultDarkTheme,
   defaultLightTheme,
+  useTheme,
 } from "pi-ui";
 import "pi-ui/dist/index.css";
 
@@ -31,8 +33,25 @@ function MdTest() {
   );
 }
 
+function ThemeButtons() {
+  const { themeName, setThemeName } = useTheme();
+  return (
+    <div style={{ margin: "1rem" }}>
+      <DarkLightToggle
+        onToggle={() =>
+          themeName === "dark"
+            ? setThemeName(DEFAULT_LIGHT_THEME_NAME)
+            : setThemeName(DEFAULT_DARK_THEME_NAME)
+        }
+        toggled={themeName === "dark"}
+      />
+    </div>
+  );
+}
+
 ReactDOM.render(
-  <ThemeProvider themes={themes} defaultThemeName={DEFAULT_LIGHT_THEME_NAME}>
+  <ThemeProvider themes={themes} defaultThemeName={DEFAULT_DARK_THEME_NAME}>
+    <ThemeButtons />
     <h1>Markdown</h1>
     <br />
     <div id="markdown-diff-wrapper">

From fc7194a2952789dc6bdfeb7936f6730eccaf5393 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 28 Mar 2022 20:25:08 -0300
Subject: [PATCH 21/29] refactor(common-ui): MD editor commands utils

---
 .../Markdown/MarkdownEditor/utils.js          | 96 +++++++++++++++++++
 .../{commands.test.js => utils.test.js}       |  2 +-
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
 rename plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/{commands.test.js => utils.test.js} (97%)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
new file mode 100644
index 000000000..4d0be84e8
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
@@ -0,0 +1,96 @@
+function insertAt(text, pos, newText) {
+  return text.substring(0, pos) + newText + text.substring(pos);
+}
+
+function countOccurences(string, term) {
+  const array = string.split(term);
+  return array.length - 1;
+}
+
+export function getMultiLineContent(content, startPos, endPos) {
+  const escapeChar = "&#27;",
+    numberOfEscapes = 2; // Start escape, end escape
+  let newContent = content,
+    escapeCount = 0,
+    previousLines = [],
+    selectedLines = [],
+    nextLines = [];
+  // add escapes on both start and end of text selection
+  newContent = insertAt(newContent, startPos, escapeChar);
+  newContent = insertAt(newContent, endPos + escapeChar.length, escapeChar);
+  const lines = newContent.split("\n");
+  for (const line of lines) {
+    const numOfOccurences = countOccurences(line, escapeChar);
+    // remove escape char
+    const escapeRegExp = new RegExp(escapeChar, "g");
+    const lineWithoutEscape = line.replace(escapeRegExp, "");
+    escapeCount += numOfOccurences;
+    if (!escapeCount) {
+      previousLines = [...previousLines, lineWithoutEscape];
+    }
+    if (escapeCount === 1 || numOfOccurences === numberOfEscapes) {
+      selectedLines = [...selectedLines, lineWithoutEscape];
+    }
+    if (escapeCount === 2 && numOfOccurences === 1) {
+      selectedLines = [...selectedLines, lineWithoutEscape];
+    }
+    if (escapeCount === 2 && numOfOccurences === 0) {
+      nextLines = [...nextLines, lineWithoutEscape];
+    }
+  }
+  return {
+    previous: previousLines.join("\n"),
+    current: selectedLines,
+    next: nextLines.join("\n"),
+  };
+}
+
+export function getSelectedContent(content, startPos, endPos) {
+  const previousContent = content.substring(0, startPos);
+  const nextContent = content.substring(endPos, content.length);
+  const selectedString = content.substring(startPos, endPos);
+  return {
+    previous: previousContent,
+    current: selectedString,
+    next: nextContent,
+  };
+}
+
+export function saveStateChanges({ previousState, currentState }) {
+  return {
+    previousState: [currentState, ...previousState],
+    nextState: [],
+    currentState,
+  };
+}
+
+export function undoStateChange({ previousState, currentState, nextState }) {
+  const [lastChange, ...previousChanges] = previousState;
+  if (!lastChange) {
+    return { previousState, nextState, currentState };
+  }
+  if (!previousChanges.length) {
+    return {
+      currentState: lastChange,
+      previousState,
+      nextState: [currentState, ...nextState],
+    };
+  }
+  return {
+    currentState: lastChange,
+    previousState: previousChanges,
+    nextState: [currentState, ...nextState],
+  };
+}
+
+export function redoStateChange({ previousState, currentState, nextState }) {
+  const [lastChange, ...nextChanges] = nextState;
+  if (!lastChange) {
+    return { previousState, nextState: [], currentState };
+  }
+  return {
+    currentState: lastChange,
+    previousState: [currentState, ...previousState],
+    nextState: nextChanges,
+  };
+}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.test.js
similarity index 97%
rename from plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
rename to plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.test.js
index 531ab3dee..7271d0175 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.test.js
@@ -1,4 +1,4 @@
-import { getMultiLineContent, getSelectedContent } from "./commands";
+import { getMultiLineContent, getSelectedContent } from "./utils";
 
 describe("Given getMultiLineContent util", () => {
   const line1 = "Cras ultricies ligula sed magna dictum porta.";

From 7ef2633ff77d5a4b2635a9f5792ea95fa90d7b96 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 28 Mar 2022 20:26:50 -0300
Subject: [PATCH 22/29] refactor(common-ui): state changes on MDE commands

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js | 104 ++++++++-----
 .../Markdown/MarkdownEditor/commands.js       | 145 ++++++++----------
 .../Markdown/MarkdownEditor/hooks.js          |  89 +++++++++++
 3 files changed, 221 insertions(+), 117 deletions(-)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index d83715e54..7090b6e14 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -1,9 +1,10 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, 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, executeCommand } from "./commands";
+import { commands } from "./commands";
+import { useMarkdownEditor } from "./hooks";
 
 export function MarkdownEditor({
   onChange,
@@ -14,50 +15,78 @@ export function MarkdownEditor({
 }) {
   const editorRef = useRef();
   const [showPreview, setShowPreview] = useState(false);
-  const [value, setValue] = useState(initialValue);
   const availableCommands = useMemo(
     () => [...customCommands, ...commands],
     [customCommands]
   );
+  const {
+    value: editorValue,
+    selectionEnd,
+    selectionStart,
+    onChange: onEditorChange,
+    onCommand,
+    onSaveChanges,
+  } = useMarkdownEditor(initialValue);
 
-  function handleChange(e) {
-    setValue(e.target.value);
-    onChange(e.target.value);
+  function handleInputChange(e) {
+    onEditorChange(e.target.value);
   }
+
   function handleShowPreview() {
     setShowPreview(true);
   }
+
   function handleShowWrite() {
     setShowPreview(false);
   }
 
-  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);
-    };
+  const handleCommand = (command) => () => {
+    const content = editorRef.current.value;
+    const selectionStart = editorRef.current.selectionStart;
+    const selectionEnd = editorRef.current.selectionEnd;
+    onCommand(command, {
+      content,
+      selectionEnd,
+      selectionStart,
+    });
+  };
 
   function handleKeyPress(event) {
+    const keyIsNotDigit = event.key.match(/[^a-zA-Z0-9]/);
+    const isBackspace = event.key === "Backspace";
+    if (keyIsNotDigit || isBackspace) {
+      onSaveChanges();
+    }
     if (event.metaKey || event.ctrlKey) {
-      const cmd = availableCommands.find((c) => c.commandKey === event.key);
+      const cmd = availableCommands.find(
+        (c) => c.commandKey === event.key && !!c.shift === event.shiftKey
+      );
       if (cmd) {
-        const { command, offset } = cmd;
-        handleCommand(command, { offset })();
+        event.preventDefault();
+        const { command } = cmd;
+        handleCommand(command)();
       }
     }
   }
 
+  useEffect(
+    function handleCursorChanges() {
+      if (selectionStart || selectionEnd) {
+        editorRef.current.focus();
+        editorRef.current.selectionStart = selectionStart;
+        editorRef.current.selectionEnd = selectionEnd;
+      }
+    },
+    [selectionEnd, selectionStart]
+  );
+
+  useEffect(
+    function handleEditorChanges() {
+      onChange(editorValue);
+    },
+    [editorValue, onChange]
+  );
+
   return (
     <div className={classNames(styles.editorWrapper, wrapperClassName)}>
       <div className={styles.headers}>
@@ -66,13 +95,16 @@ export function MarkdownEditor({
           <div onClick={handleShowPreview}>Preview</div>
         </div>
         <div className={styles.actionButtons}>
-          {availableCommands.map(({ command, Button, offset }, i) => (
-            <Button
-              key={i}
-              className={styles.buttonIcon}
-              onClick={handleCommand(command, { offset })}
-            />
-          ))}
+          {availableCommands.map(
+            ({ command, Button, offset }, i) =>
+              Button && (
+                <Button
+                  key={i}
+                  className={styles.buttonIcon}
+                  onClick={handleCommand(command, { offset })}
+                />
+              )
+          )}
         </div>
       </div>
       <div
@@ -89,11 +121,11 @@ export function MarkdownEditor({
           id="markdown-editor"
           ref={editorRef}
           className={styles.editor}
-          value={value}
-          onKeyPress={handleKeyPress}
-          onChange={handleChange}
+          value={editorValue}
+          onKeyDown={handleKeyPress}
+          onChange={handleInputChange}
         />
-        <MarkdownRenderer body={value} className={styles.preview} />
+        <MarkdownRenderer body={editorValue} className={styles.preview} />
       </div>
     </div>
   );
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index 3968f6ec8..cdd83110a 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { ButtonIcon } from "pi-ui";
+import { redoStateChange, saveStateChanges, undoStateChange } from "./utils";
 
 function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   let index = 0;
@@ -14,45 +15,89 @@ function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
 
 // Multiline command interface
 const multiLineCommand =
-  (execFn, options) =>
-  ({ lines: { previous, current, next } }) => {
-    const formattedLines = formatEachLine(current, execFn, options);
+  (execFn, { offset, ignoreBlankLines }) =>
+  ({ currentChange, ...stateChanges }) => {
+    const savedState = saveStateChanges(stateChanges);
+    const { start, end, lines } = currentChange.selection;
+    const { previous, current, next } = lines;
+    const formattedLines = formatEachLine(current, execFn, {
+      ignoreBlankLines,
+    });
     let newPrev = `${previous}\n`;
     if (previous.length === 0) {
       newPrev = "";
     }
-    return `${newPrev}${formattedLines}\n${next}`;
+    return {
+      ...savedState,
+      currentState: {
+        content: `${newPrev}${formattedLines}\n${next}`,
+        selectionStart: start + offset,
+        selectionEnd: end + offset,
+      },
+    };
+  };
+
+// cursor selection command interface
+export const cursorSelectionCommand =
+  (cmd, { offset }) =>
+  ({ currentChange, ...stateChanges }) => {
+    const savedState = saveStateChanges(stateChanges);
+    const {
+      selection: { cursor, start, end },
+    } = currentChange;
+    const newContent = cmd(cursor);
+    return {
+      ...savedState,
+      currentState: {
+        content: newContent,
+        selectionStart: start + offset,
+        selectionEnd: end + offset,
+      },
+    };
   };
 
 // Available commands
 export const commands = [
+  {
+    label: "Undo",
+    commandKey: "z",
+    command: undoStateChange,
+  },
+  {
+    label: "Redo",
+    commandKey: "z",
+    shift: true,
+    command: redoStateChange,
+  },
   {
     label: "Bold Text",
     commandKey: "b",
-    offset: 2,
     Button: ({ onClick }) => (
       <ButtonIcon type="bold" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    command: ({ selected: { previous, current, next } }) =>
-      `${previous}**${current}**${next}`,
+    command: cursorSelectionCommand(
+      ({ previous, current, next }) => `${previous}**${current}**${next}`,
+      { offset: 2 }
+    ),
   },
   {
     label: "Italic",
     commandKey: "i",
-    offset: 1,
     Button: ({ onClick }) => (
       <ButtonIcon type="italic" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    command: ({ selected: { previous, current, next } }) =>
-      `${previous}_${current}_${next}`,
+    command: cursorSelectionCommand(
+      ({ previous, current, next }) => `${previous}_${current}_${next}`,
+      { offset: 1 }
+    ),
   },
   {
     label: "Quote",
     Button: ({ onClick }) => (
       <ButtonIcon type="quote" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    offset: 2,
     command: multiLineCommand((curr) => `> ${curr}`, {
+      offset: 2,
       ignoreBlankLines: true,
     }),
   },
@@ -61,17 +106,19 @@ export const commands = [
     Button: ({ onClick }) => (
       <ButtonIcon type="code" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    offset: 1,
-    command: ({ selected: { previous, current, next } }) =>
-      `${previous}\`${current}\`${next}`,
+    command: cursorSelectionCommand(
+      ({ previous, current, next }) => `${previous}\`${current}\`${next}`,
+      { offset: 2 }
+    ),
   },
+
   {
     label: "List",
     Button: ({ onClick }) => (
       <ButtonIcon type="bulletList" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    offset: 2,
     command: multiLineCommand((curr) => `- ${curr}`, {
+      offset: 2,
       ignoreBlankLines: true,
     }),
   },
@@ -80,8 +127,8 @@ export const commands = [
     Button: ({ onClick }) => (
       <ButtonIcon type="numberedList" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    offset: 3,
     command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
+      offset: 3,
       ignoreBlankLines: true,
     }),
   },
@@ -90,73 +137,9 @@ export const commands = [
     Button: ({ onClick }) => (
       <ButtonIcon type="taskList" onClick={onClick} viewBox="0 0 16 16" />
     ),
-    offset: 5,
     command: multiLineCommand((curr) => `- [ ] ${curr}`, {
+      offset: 5,
       ignoreBlankLines: true,
     }),
   },
 ];
-
-function insertAt(text, pos, newText) {
-  return text.substring(0, pos) + newText + text.substring(pos);
-}
-
-function countOccurences(string, term) {
-  const array = string.split(term);
-  return array.length - 1;
-}
-
-export function getMultiLineContent(content, startPos, endPos) {
-  const escapeChar = "&#27;",
-    numberOfEscapes = 2; // Start escape, end escape
-  let newContent = content,
-    escapeCount = 0,
-    previousLines = [],
-    selectedLines = [],
-    nextLines = [];
-  // add escapes on both start and end of text selection
-  newContent = insertAt(newContent, startPos, escapeChar);
-  newContent = insertAt(newContent, endPos + escapeChar.length, escapeChar);
-  const lines = newContent.split("\n");
-  for (const line of lines) {
-    const numOfOccurences = countOccurences(line, escapeChar);
-    // remove escape char
-    const escapeRegExp = new RegExp(escapeChar, "g");
-    const lineWithoutEscape = line.replace(escapeRegExp, "");
-    escapeCount += numOfOccurences;
-    if (!escapeCount) {
-      previousLines = [...previousLines, lineWithoutEscape];
-    }
-    if (escapeCount === 1 || numOfOccurences === numberOfEscapes) {
-      selectedLines = [...selectedLines, lineWithoutEscape];
-    }
-    if (escapeCount === 2 && numOfOccurences === 1) {
-      selectedLines = [...selectedLines, lineWithoutEscape];
-    }
-    if (escapeCount === 2 && numOfOccurences === 0) {
-      nextLines = [...nextLines, lineWithoutEscape];
-    }
-  }
-  return {
-    previous: previousLines.join("\n"),
-    current: selectedLines,
-    next: nextLines.join("\n"),
-  };
-}
-
-export function getSelectedContent(content, startPos, endPos) {
-  const previousContent = content.substring(0, startPos);
-  const nextContent = content.substring(endPos, content.length);
-  const selectedString = content.substring(startPos, endPos);
-  return {
-    previous: previousContent,
-    current: selectedString,
-    next: nextContent,
-  };
-}
-
-export function executeCommand(command, content, startPos, endPos) {
-  const selected = getSelectedContent(content, startPos, endPos);
-  const lines = getMultiLineContent(content, startPos, endPos);
-  return command({ selected, lines });
-}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
new file mode 100644
index 000000000..21731d003
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
@@ -0,0 +1,89 @@
+import {
+  getMultiLineContent,
+  getSelectedContent,
+  saveStateChanges,
+} from "./utils";
+import { useReducer } from "react";
+
+function commandsReducer(editorState, { command, currentChange }) {
+  if (!currentChange) {
+    return command(editorState);
+  }
+  const { content, selectionStart, selectionEnd } = currentChange;
+  const cursor = getSelectedContent(content, selectionStart, selectionEnd);
+  const lines = getMultiLineContent(content, selectionStart, selectionEnd);
+  const { currentState, previousState, nextState } = command({
+    currentChange: {
+      selection: { lines, cursor, start: selectionStart, end: selectionEnd },
+      content,
+    },
+    previousState: editorState.previousState,
+    nextState: editorState.nextState,
+    currentState: editorState.currentState,
+  });
+  return { currentState, previousState, nextState };
+}
+
+function regularChangeAction({ currentChange: { content }, ...state }) {
+  return {
+    ...state,
+    currentState: {
+      ...state.currentState,
+      content,
+    },
+  };
+}
+
+function initializeEditor(initialValue) {
+  return {
+    currentState: {
+      content: initialValue,
+      selectionStart: initialValue.length,
+      selectionEnd: initialValue.length,
+    },
+    previousState: [
+      {
+        content: initialValue,
+        selectionStart: initialValue.length,
+        selectionEnd: initialValue.length,
+      },
+    ],
+    nextState: [],
+  };
+}
+
+export function useMarkdownEditor(initialValue = "") {
+  const [state, dispatch] = useReducer(
+    commandsReducer,
+    initializeEditor(initialValue)
+  );
+
+  function onChange(value) {
+    dispatch({
+      command: regularChangeAction,
+      currentChange: {
+        content: value,
+      },
+    });
+  }
+
+  function onSaveChanges() {
+    dispatch({ command: saveStateChanges });
+  }
+
+  function onCommand(command, { content, selectionStart, selectionEnd } = {}) {
+    dispatch({
+      command,
+      currentChange: { content, selectionStart, selectionEnd },
+    });
+  }
+
+  return {
+    value: state.currentState.content,
+    selectionStart: state.currentState.selectionStart,
+    selectionEnd: state.currentState.selectionEnd,
+    onCommand,
+    onChange,
+    onSaveChanges,
+  };
+}

From df319628f0a2b0b9e1f403ebb19e1bd3af2df948 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Mon, 28 Mar 2022 20:30:16 -0300
Subject: [PATCH 23/29] fix(common-ui): cleanup

---
 .../src/components/Markdown/MarkdownEditor/commands.js      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index cdd83110a..4732e03fe 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -14,13 +14,13 @@ function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
 }
 
 // Multiline command interface
-const multiLineCommand =
-  (execFn, { offset, ignoreBlankLines }) =>
+export const multiLineCommand =
+  (lineFormatterFn, { offset, ignoreBlankLines }) =>
   ({ currentChange, ...stateChanges }) => {
     const savedState = saveStateChanges(stateChanges);
     const { start, end, lines } = currentChange.selection;
     const { previous, current, next } = lines;
-    const formattedLines = formatEachLine(current, execFn, {
+    const formattedLines = formatEachLine(current, lineFormatterFn, {
       ignoreBlankLines,
     });
     let newPrev = `${previous}\n`;

From 8446d5379120c666bcce093154862804e47145b3 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Tue, 29 Mar 2022 11:22:56 -0300
Subject: [PATCH 24/29] chore(multi): upgrade pi-ui

---
 plugins-structure/yarn.lock | 671 +++++++++++++++++-------------------
 1 file changed, 320 insertions(+), 351 deletions(-)

diff --git a/plugins-structure/yarn.lock b/plugins-structure/yarn.lock
index 384936be1..75b3f0beb 100644
--- a/plugins-structure/yarn.lock
+++ b/plugins-structure/yarn.lock
@@ -16,20 +16,20 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
-  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
-  dependencies:
-    "@babel/highlight" "^7.14.5"
-
-"@babel/code-frame@^7.16.7":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
 "@babel/compat-data@^7.12.1", "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.7", "@babel/compat-data@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
@@ -361,13 +361,6 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-imports@^7.0.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
-  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
 "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
@@ -567,21 +560,16 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
-  version "7.14.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
-  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
-
-"@babel/helper-validator-identifier@^7.15.7":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
-"@babel/helper-validator-identifier@^7.16.7":
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.15.7", "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -630,7 +618,7 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
+"@babel/highlight@^7.10.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
   integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
@@ -639,7 +627,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.16.7":
+"@babel/highlight@^7.14.5", "@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
   integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
@@ -1056,6 +1044,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-jsx@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
@@ -2060,24 +2055,17 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
-  integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.15.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.15.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
   integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.5":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
-  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
+  integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -2170,15 +2158,7 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
-  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.15.7"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0":
+"@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
   integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
@@ -2196,52 +2176,88 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
-"@emotion/babel-utils@^0.6.4":
-  version "0.6.10"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
-  integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
+"@emotion/babel-plugin@^11.7.1":
+  version "11.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0"
+  integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==
   dependencies:
-    "@emotion/hash" "^0.6.6"
-    "@emotion/memoize" "^0.6.6"
-    "@emotion/serialize" "^0.9.1"
-    convert-source-map "^1.5.1"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
     find-root "^1.1.0"
-    source-map "^0.7.2"
-
-"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
-  integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
-
-"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
-  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
-
-"@emotion/serialize@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
-  integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.8.2.tgz#e51f5e6372e22e82780836c9288da19af4b51e70"
+  integrity sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
   dependencies:
-    "@emotion/hash" "^0.6.6"
-    "@emotion/memoize" "^0.6.6"
-    "@emotion/unitless" "^0.6.7"
-    "@emotion/utils" "^0.8.2"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
 
-"@emotion/stylis@^0.7.0":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
-  integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
-  version "0.6.7"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
-  integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
-"@emotion/utils@^0.8.2":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
-  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -2474,9 +2490,9 @@
     chalk "^4.0.0"
 
 "@jest/types@^27.2.5":
-  version "27.2.5"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
-  integrity sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
+  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
@@ -3362,90 +3378,91 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3"
   integrity sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==
 
-"@react-spring/animated@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.0.tgz#294f7696e450c4ae3abd2b59a6dd08bf70b53d3f"
-  integrity sha512-QvuyW77eDvLhdJyO6FFldlWlvnuKK2cpOx4+Zr962RyT/0IO1tbNDRO6G1vM8va6mbv6tmfYmRGKmKYePN3kVg==
-  dependencies:
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/core@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.3.0.tgz#2d0534c5b53c7e39b8e9ed3d996502828c90f4d4"
-  integrity sha512-SZQOIX7wkIagmucAi7zxqGGIb9A60o9n5922UrWo8Kl3FdG7FgrNwqr0kOI43/pMFeL70/PXwFhBatB03N5ctw==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/konva@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.3.0.tgz#97b23b2f235a9805d39279a0a1027c7d9646d6fb"
-  integrity sha512-lyUWxzEateE6Qxpc81oxJb5yiNDdj36Q9R9euJAgjl2dvUDaX85rVGqaB25+72yA1iQg5I4Kymj3UZVvPthRlA==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/native@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.3.0.tgz#6fee1ccaa8d70a19c239b27e95bcc050776f1725"
-  integrity sha512-lvKV5qxqnE5AMtTHv8xwAocGED4+VRxpljwBl1lbtileq3WnvOn7CpMLZNGc5TXjLWAE3zfoNJui69/jE/3uSw==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/rafz@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.3.0.tgz#e791c0ae854f7c1a512ae87f34fff36934d82d29"
-  integrity sha512-FD04d2TNb3xOZ6+04qwDmC3d0H4X6gvhsxU71/nSm4PPYRqFzZEolcVPmrHlbGzco3bvXKI+Kp2pIrpXLPUJFA==
-
-"@react-spring/shared@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.3.0.tgz#7b4393094a97a1384f74fd8088e0b896e8f0c411"
-  integrity sha512-7ZFY2Blu/wxbLGcYvQavyLUVi9bK/is1bsn11qZ9AaZb4iucRyIf2jgjBfKZFCq4qgi7S/7QmDQG7sucUyLELg==
-  dependencies:
-    "@react-spring/rafz" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/three@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.3.0.tgz#e3fc49de1411eb1a7aa937fec8db33252f11d294"
-  integrity sha512-RKMXXdcNK0nbwLbmle/0KT/idGGpOxvI5lT1KtN8R3cgJWQBKYWVtzg+B/RgmQVNxO/QNlsKGWTjURockTRSVQ==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/types@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.3.0.tgz#54ec58ca40414984209c8baa75fddd394f9e2949"
-  integrity sha512-q4cDr2RSPblXMD3Rxvk6qcC7nmhhfV2izEBP06hb8ZCXznA6qJirG3RMpi29kBtEQiw1lWR59hAXKhauaPtbOA==
-
-"@react-spring/web@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.3.0.tgz#48d1ebdd1d484065e0a943dbbb343af259496427"
-  integrity sha512-OTAGKRdyz6fLRR1tABFyw9KMpytyATIndQrj0O6RG47GfjiInpf4+WZKxo763vpS7z1OlnkI81WLUm/sqOqAnA==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/zdog@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.3.0.tgz#d84b69375017d864514ebcf59511731c5cc0280f"
-  integrity sha512-JOQwtg/MQ6sWwmKNY4w/R1TVXohIUkrbSgDfgUEK45ERTDwZGZzIo9QbqHv4dwEBK4Wa2Hfrcdf8cnEaNNzdAQ==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
+"@react-spring/animated@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.4.tgz#15e21923e55c06ca2bcea432869b91b2f8b07519"
+  integrity sha512-e9xnuBaUTD+NolKikUmrGWjX8AVCPyj1GcEgjgq9E+0sXKv46UY7cm2EmB6mUDTxWIDVKebARY++xT4nGDraBQ==
+  dependencies:
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/core@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.4.tgz#7730988cec7302ba6e0977cf4c08c30249d95622"
+  integrity sha512-llgb0ljFyjMB0JhWsaFHOi9XFT8n1jBMVs1IFY2ipIBerWIRWrgUmIpakLPHTa4c4jwqTaDSwX90s2a0iN7dxQ==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/rafz" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/konva@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.4.4.tgz#e65e3b85274e9af36c6037dbafa402d9f01db076"
+  integrity sha512-ZHwsf4l/W5YzK8TwlvGXL9SYiHxxC6iEOAKStRs8WV6VuBvTFgIoGK5RNOTbsRC2N/spNWnN6JViz1PNbgrB+A==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/native@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.4.4.tgz#8581e03d0c4a11f3e5a1fc8cf505c81f9d9a5fcf"
+  integrity sha512-p0/JI59JVkgVjnoLvu+cpEgEkE0B3RDvzT1oNaCAx0ePaGQo4ICAS8PyOgPvN5IHUOy59CBLSMNnFyHV+IgaGQ==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/rafz@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.4.tgz#736c9ed1099baebeea20c357b9700b01b83ea9de"
+  integrity sha512-5ki/sQ06Mdf8AuFstSt5zbNNicRT4LZogiJttDAww1ozhuvemafNWEHxhzcULgCPCDu2s7HsroaISV7+GQWrhw==
+
+"@react-spring/shared@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.4.tgz#e1ae00a77d170d86d77d9a19dc7015bdddc2d26f"
+  integrity sha512-ySVgScDZlhm/+Iy2smY9i/DDrShArY0j6zjTS/Re1lasKnhq8qigoGiAxe8xMPJNlCaj3uczCqHy3TY9bKRtfQ==
+  dependencies:
+    "@react-spring/rafz" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/three@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.4.4.tgz#a26de44854e166184ddba57313bfc52efce67368"
+  integrity sha512-z77ohxg8zG0CcZJojzfoJTTrjSbIyefNz2RlId68/4IypnOs1p8kB2Q1p+wX4KyWORpLg8ivsPcjtwBjGwfDtg==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/types@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.4.tgz#97c69881788e624d7cc68d4385fdaa9b5fd20642"
+  integrity sha512-KpxKt/D//q/t/6FBcde/RE36LKp8PpWu7kFEMLwpzMGl9RpcexunmYOQJWwmJWtkQjgE1YRr7DzBMryz6La1cQ==
+
+"@react-spring/web@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.4.tgz#0d13356e61c1d47e83a36112e19e5db691f3fbe5"
+  integrity sha512-iJmOLdhcuizriUlu/xqBc5y8KaFts+UI+iC+GxyTwBtzxA9czKiSAZW2ESuhG8stafa3jncwjfTQQp84KN36cw==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
+
+"@react-spring/zdog@~9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.4.4.tgz#e0e19175a9a22d74614dbf3c624513fd35e69f9d"
+  integrity sha512-qmD8zRcodbQKTAFVMdgW2pYIZP1KttDnz2S2JEc7kx8I8F5ljn9czgRl5c4w9HJ0dpO8VTfPq4sKa4tlUL23yg==
+  dependencies:
+    "@react-spring/animated" "~9.4.4"
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/shared" "~9.4.4"
+    "@react-spring/types" "~9.4.4"
 
 "@reduxjs/toolkit@^1.6.1":
   version "1.6.1"
@@ -3575,10 +3592,10 @@
     "@svgr/plugin-jsx" "^6.2.1"
     "@svgr/plugin-svgo" "^6.2.0"
 
-"@testing-library/dom@>=5":
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.0.tgz#3679dfb4db58e0d2b95e4b0929eaf45237b60d94"
-  integrity sha512-8Ay4UDiMlB5YWy+ZvCeRyFFofs53ebxrWnOFvCoM1HpMAX4cHyuSrCuIM9l2lVuUWUt+Gr3loz/nCwdrnG6ShQ==
+"@testing-library/dom@>=7":
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23"
+  integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -3729,7 +3746,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
   integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
@@ -3779,9 +3801,9 @@
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
 "@types/node@*":
-  version "16.6.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.2.tgz#331b7b9f8621c638284787c5559423822fdffc50"
-  integrity sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==
+  version "17.0.23"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
+  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -3813,6 +3835,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991"
@@ -3850,9 +3879,9 @@
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
 "@types/yargs-parser@*":
-  version "20.2.1"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
-  integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
 
 "@types/yargs@^15.0.0":
   version "15.0.14"
@@ -4539,24 +4568,6 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^9.2.11:
-  version "9.2.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
-  integrity sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/babel-utils" "^0.6.4"
-    "@emotion/hash" "^0.6.2"
-    "@emotion/memoize" "^0.6.1"
-    "@emotion/stylis" "^0.7.0"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    find-root "^1.1.0"
-    mkdirp "^0.5.1"
-    source-map "^0.5.7"
-    touch "^2.0.1"
-
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -4578,7 +4589,7 @@ babel-plugin-jest-hoist@^27.0.6:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -4646,11 +4657,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-plugin-transform-react-remove-prop-types@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
@@ -5122,11 +5128,6 @@ clamp-js-main@^0.11.5:
   resolved "https://registry.yarnpkg.com/clamp-js-main/-/clamp-js-main-0.11.6.tgz#dcb420c7266310867f01bc90457f3ff8ab1f2e2b"
   integrity sha512-Am5og1TzbYZDUv0MQX3OZB7D/rNZTqNho5sb0M1v+e8X8blV7H/lrJDTYrJqC3nXyokda9EP6mVvQBPOKb8/gA==
 
-classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5436,7 +5437,7 @@ conventional-recommended-bump@^6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -5520,19 +5521,6 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.5.3"
 
-create-emotion@^9.2.12:
-  version "9.2.12"
-  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
-  integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
-  dependencies:
-    "@emotion/hash" "^0.6.2"
-    "@emotion/memoize" "^0.6.1"
-    "@emotion/stylis" "^0.7.0"
-    "@emotion/unitless" "^0.6.2"
-    csstype "^2.5.2"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
-
 create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -5686,11 +5674,6 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2:
-  version "2.6.18"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
-  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
-
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
@@ -5982,9 +5965,9 @@ dom-accessibility-api@^0.5.6:
   integrity sha512-rAfghuBPeJldxqsmZQtBbna4TqMgFe4xhYs24vPULNslbmXUdcga+CXiKWzZxyWw0FCkGKPgmizIysIvsAEN8w==
 
 dom-accessibility-api@^0.5.9:
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
-  integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
+  integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw==
 
 dom-converter@^0.2.0:
   version "0.2.0"
@@ -5993,12 +5976,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dom-serializer@^1.0.1:
   version "1.3.2"
@@ -6143,14 +6127,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion@^9.1.2:
-  version "9.2.12"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
-  integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
-  dependencies:
-    babel-plugin-emotion "^9.2.11"
-    create-emotion "^9.2.12"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -7169,7 +7145,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7639,20 +7615,20 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
-is-core-module@^2.2.0, is-core-module@^2.4.0, is-core-module@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
-  integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
-  dependencies:
-    has "^1.0.3"
-
-is-core-module@^2.8.1:
+is-core-module@^2.2.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.4.0, is-core-module@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
+  integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
+  dependencies:
+    has "^1.0.3"
+
 is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
@@ -8618,9 +8594,9 @@ libnpmpublish@^4.0.0:
     ssri "^8.0.1"
 
 lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 load-json-file@^4.0.0:
   version "4.0.0"
@@ -9179,11 +9155,16 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.2.0:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@^1.2.5, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -9270,7 +9251,14 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
-mkdirp@^0.5.1, mkdirp@^0.5.5:
+mkdirp@^0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+mkdirp@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -9450,13 +9438,6 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -10083,14 +10064,15 @@ performance-now@^2.1.0:
 
 "pi-ui@https://github.com/decred/pi-ui":
   version "1.0.0"
-  resolved "https://github.com/decred/pi-ui#22a8e4019ff3a84073393070f54fbafd052b6e7e"
+  resolved "https://github.com/decred/pi-ui#370b3d8b47b29c5bcb260c3abb38e7d7eeb96e29"
   dependencies:
     clamp-js-main "^0.11.5"
     lodash "^4.17.15"
-    react-select "2.4.4"
-    react-select-event "^4.1.4"
-    react-spring "^9.0.0-rc.3"
-    react-tapper "^0.1.18"
+    prop-types "^15.7.2"
+    react-select "5.2.1"
+    react-select-event "^5.3.0"
+    react-spring "^9.3.0"
+    react-tapper "^0.1.23"
 
 picocolors@^1.0.0:
   version "1.0.0"
@@ -10249,7 +10231,7 @@ pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.2.5:
+pretty-format@^27.0.0, pretty-format@^27.2.5:
   version "27.2.5"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.2.5.tgz#7cfe2a8e8f01a5b5b29296a0b70f4140df0830c5"
   integrity sha512-+nYn2z9GgicO9JiqmY25Xtq8SYfZ/5VCpEU3pppHHNAhd1y+ZXxmNPd1evmNcAd6Hz4iBV2kf0UpGth5A/VJ7g==
@@ -10259,6 +10241,15 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.2.5:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.6.tgz#ab770c47b2c6f893a21aefc57b75da63ef49a11f"
@@ -10307,7 +10298,16 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10415,13 +10415,6 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-raf@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -10461,13 +10454,6 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-input-autosize@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
-  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10478,11 +10464,6 @@ react-is@^17.0.0, react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-markdown@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.3.tgz#625ec767fa321d91801129387e7d31ee0cb99254"
@@ -10519,52 +10500,52 @@ react-redux@^7.2.4:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
-react-select-event@^4.1.4:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-select-event/-/react-select-event-4.2.0.tgz#824f9f52fdbd9de305ec1b3405f76f76dcc22cbe"
-  integrity sha512-DK58Q9ucsbGsCFl26n2CZ5MA7WwxSxrA49mM8EKmjJ8Fg0l1R4uZfwy80PdDoVReH3RWAVRLnhfJorqcIKGc2Q==
+react-select-event@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-select-event/-/react-select-event-5.3.0.tgz#4548fffd615a47176951cbb301ee21a0c60b582a"
+  integrity sha512-Novkl7X9JJKmDV5LyYaKwl0vffWtqPrBa1vuI0v43P/f87mSA7JfdYxU93SFb99RssphVzBSIAbcnbX1w21QIQ==
   dependencies:
-    "@testing-library/dom" ">=5"
+    "@testing-library/dom" ">=7"
 
-react-select@2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.4.4.tgz#ba72468ef1060c7d46fbb862b0748f96491f1f73"
-  integrity sha512-C4QPLgy9h42J/KkdrpVxNmkY6p4lb49fsrbDk/hRcZpX7JvZPNb6mGj+c5SzyEtBv1DmQ9oPH4NmhAFvCrg8Jw==
+react-select@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"
+  integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A==
   dependencies:
-    classnames "^2.2.5"
-    emotion "^9.1.2"
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
-    raf "^3.4.0"
-    react-input-autosize "^2.2.1"
-    react-transition-group "^2.2.1"
-
-react-spring@^9.0.0-rc.3:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.3.0.tgz#4d71eecbfd4f0823bf67e5943d2b0fb77f3e26ad"
-  integrity sha512-zxhMUCM4ha22724q1CshmbzKUfqdUp2HyA4P72+A0xVF/9bgaFuMukI8C8/Rjfdqw6sGg3hZNvmY9Z8n4cqWmg==
-  dependencies:
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/konva" "~9.3.0"
-    "@react-spring/native" "~9.3.0"
-    "@react-spring/three" "~9.3.0"
-    "@react-spring/web" "~9.3.0"
-    "@react-spring/zdog" "~9.3.0"
-
-react-tapper@^0.1.18:
+    react-transition-group "^4.3.0"
+
+react-spring@^9.3.0:
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.4.4.tgz#0a53440013f97c1ebaa739a24a902487f36a5c1e"
+  integrity sha512-VOqilh9DJBsS6Pf550YLhdReS3j9a2AQVh7NcsNtWoxTYIeuErWi6ym0++6bBhQp4yT5xvVvUDaJ8ez8vrFgaw==
+  dependencies:
+    "@react-spring/core" "~9.4.4"
+    "@react-spring/konva" "~9.4.4"
+    "@react-spring/native" "~9.4.4"
+    "@react-spring/three" "~9.4.4"
+    "@react-spring/web" "~9.4.4"
+    "@react-spring/zdog" "~9.4.4"
+
+react-tapper@^0.1.23:
   version "0.1.23"
   resolved "https://registry.yarnpkg.com/react-tapper/-/react-tapper-0.1.23.tgz#c3fba199e9b97cc2221467a42ce60cb722140138"
   integrity sha512-BLV2zRnpTeLQdSf7tUbk9JQ6Og5DKK66kjjbEkhj2Y4wURlIq8YtibWNceKRzBWYiRGcEzJbUZYAcKic4HZLUA==
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.3.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
 react@^17.0.2:
   version "17.0.2"
@@ -10933,7 +10914,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -10941,7 +10922,7 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-resolve@^1.13.1:
+resolve@^1.12.0, resolve@^1.13.1:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -11327,7 +11308,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.2, source-map@^0.7.3, source-map@~0.7.2:
+source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -11635,15 +11616,10 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -11881,13 +11857,6 @@ totalist@^1.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
   integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
 
-touch@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
-  integrity sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==
-  dependencies:
-    nopt "~1.0.10"
-
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"

From eb49c3c2391bc534c95c5bf04e6ed9dba5a06084 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Tue, 29 Mar 2022 15:41:45 -0300
Subject: [PATCH 25/29] refactor(common-ui): improve MD commands structure

---
 .../src/components/Markdown/MarkdownDiff.js   |  2 +-
 .../components/Markdown/MarkdownDiff.test.js  | 53 +++++++------
 .../Markdown/MarkdownEditor/MarkdownEditor.js | 35 +++++----
 .../Markdown/MarkdownEditor/commands.js       | 74 ++++++++++--------
 .../Markdown/MarkdownEditor/hooks.js          | 31 +++-----
 .../Markdown/MarkdownEditor/index.js          |  1 +
 .../Markdown/MarkdownEditor/utils.js          | 13 ++--
 .../packages/common-ui/src/dev/index.js       | 76 +++++++++++++++++--
 8 files changed, 179 insertions(+), 106 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
index e3b42bcde..cb8c5218b 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.js
@@ -55,7 +55,7 @@ export function getDiffHTML(oldText = "", newText = "") {
   return joinDiffArrays(diff);
 }
 
-export function DiffHTML({ oldText, newText }) {
+export function MarkdownDiffHTML({ oldText, newText }) {
   const html = getDiffHTML(oldText, newText);
   return (
     <div>
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
index e946e35ec..09fdedb1d 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownDiff.test.js
@@ -1,17 +1,17 @@
 import React from "react";
-import { DiffHTML } from "./MarkdownDiff";
+import { MarkdownDiffHTML } from "./MarkdownDiff";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import trim from "lodash/trim";
 
-describe("Given DiffHTML", () => {
+describe("Given MarkdownDiffHTML", () => {
   describe("when headers are different", () => {
     const newHeaders =
       "# Header 1\n## Header 2\n### Header 3\n##### common header\n\n";
     const oldHeaders =
       "# Header 1 ADD\n## Header 2\n#### Header 4\n##### common header\n\n";
     it("should return correct diff", () => {
-      render(<DiffHTML oldText={oldHeaders} newText={newHeaders} />);
+      render(<MarkdownDiffHTML oldText={oldHeaders} newText={newHeaders} />);
       const h2 = screen.getAllByText("Header 2");
       expect(h2).toHaveLength(1);
       const h1 = screen.getAllByText("Header 1");
@@ -29,7 +29,9 @@ describe("Given DiffHTML", () => {
     const newParagraph = "Paragraph 1\n\nAnother P";
     const oldParagraph = "Paragraph 2\n\nAnother P";
     it("should return correct diff", () => {
-      render(<DiffHTML oldText={oldParagraph} newText={newParagraph} />);
+      render(
+        <MarkdownDiffHTML oldText={oldParagraph} newText={newParagraph} />
+      );
       const linesAdded = screen.getAllByTestId("md-line-added");
       const linesRemoved = screen.getAllByTestId("md-line-removed");
       expect(linesAdded).toHaveLength(1);
@@ -41,7 +43,7 @@ describe("Given DiffHTML", () => {
     const paragraph = "My Text";
     const header = "# My Text";
     it("should return correct diff", () => {
-      render(<DiffHTML oldText={paragraph} newText={header} />);
+      render(<MarkdownDiffHTML oldText={paragraph} newText={header} />);
       const removedParagraph = screen.getByTestId("md-line-removed");
       const addedHeader = screen.getByTestId("md-line-added");
       // Removed element: <p>My Text</p>
@@ -55,7 +57,7 @@ describe("Given DiffHTML", () => {
   describe("when texts are equal", () => {
     const text = "Sed porttitor lectus nibh.";
     it("should not return any diff", () => {
-      render(<DiffHTML oldText={text} newText={text} />);
+      render(<MarkdownDiffHTML oldText={text} newText={text} />);
       expect(screen.queryAllByTestId("md-line-removed")).toHaveLength(0);
       expect(screen.queryAllByTestId("md-line-added")).toHaveLength(0);
       const textElement = screen.getByText(text);
@@ -65,7 +67,7 @@ describe("Given DiffHTML", () => {
   describe("when old text is empty", () => {
     const text = "Sed porttitor lectus nibh.";
     it("should return all new text marked as added", () => {
-      render(<DiffHTML oldText="" newText={text} />);
+      render(<MarkdownDiffHTML oldText="" newText={text} />);
       expect(screen.queryAllByTestId("md-line-removed")).toHaveLength(0);
       expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
       const textElement = screen.getByText(text);
@@ -75,7 +77,7 @@ describe("Given DiffHTML", () => {
   describe("when new text is empty", () => {
     const text = "Sed porttitor lectus nibh.";
     it("should return all new text marked as removed", () => {
-      render(<DiffHTML oldText={text} newText="" />);
+      render(<MarkdownDiffHTML oldText={text} newText="" />);
       expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
       expect(screen.queryAllByTestId("md-line-added")).toHaveLength(0);
       const textElement = screen.getByText(text);
@@ -87,7 +89,7 @@ describe("Given DiffHTML", () => {
       const oldLink = "[my link](http://mylink.com)";
       const newLink = "[my new link](http://mylink.com)";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldLink} newText={newLink} />);
+        render(<MarkdownDiffHTML oldText={oldLink} newText={newLink} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("my link");
@@ -102,7 +104,7 @@ describe("Given DiffHTML", () => {
       const oldLink = "[my link](http://mylink.com)";
       const newLink = "[my link](http://mylinknew.com)";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldLink} newText={newLink} />);
+        render(<MarkdownDiffHTML oldText={oldLink} newText={newLink} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getAllByText("my link")[0];
@@ -116,7 +118,7 @@ describe("Given DiffHTML", () => {
     describe("given different html raw links", () => {
       const link = "<a href='javascript:void(0)'>my link</a>";
       it("should render html content as text, not as element", () => {
-        render(<DiffHTML oldText={link} newText="" />);
+        render(<MarkdownDiffHTML oldText={link} newText="" />);
         const removedLines = screen.getAllByTestId("md-line-removed");
         expect(removedLines).toHaveLength(1);
         const oldElement = screen.queryByText("my link");
@@ -130,7 +132,7 @@ describe("Given DiffHTML", () => {
     describe("given equal html raw links", () => {
       const link = "<a href='javascript:void(0)'>my link</a>";
       it("should render html content as text, not as element", () => {
-        render(<DiffHTML oldText={link} newText={link} />);
+        render(<MarkdownDiffHTML oldText={link} newText={link} />);
         const removedLines = screen.queryAllByTestId("md-line-removed");
         const addedLines = screen.queryAllByTestId("md-line-added");
         expect(removedLines).toHaveLength(0);
@@ -147,7 +149,7 @@ describe("Given DiffHTML", () => {
       const oldText = "**old**";
       const newText = "**new**";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldText} newText={newText} />);
+        render(<MarkdownDiffHTML oldText={oldText} newText={newText} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("old");
@@ -162,7 +164,7 @@ describe("Given DiffHTML", () => {
       const oldText = "**old**";
       const newText = "old";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldText} newText={newText} />);
+        render(<MarkdownDiffHTML oldText={oldText} newText={newText} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getAllByText("old")[0];
@@ -179,7 +181,7 @@ describe("Given DiffHTML", () => {
       const oldText = "*old*";
       const newText = "*new*";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldText} newText={newText} />);
+        render(<MarkdownDiffHTML oldText={oldText} newText={newText} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("old");
@@ -194,7 +196,7 @@ describe("Given DiffHTML", () => {
       const oldText = "*old*";
       const newText = "old";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={oldText} newText={newText} />);
+        render(<MarkdownDiffHTML oldText={oldText} newText={newText} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getAllByText("old")[0];
@@ -211,7 +213,7 @@ describe("Given DiffHTML", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "```\ncode2\n```";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={block1} newText={block2} />);
+        render(<MarkdownDiffHTML oldText={block1} newText={block2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("code1");
@@ -224,7 +226,7 @@ describe("Given DiffHTML", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "code1";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={block1} newText={block2} />);
+        render(<MarkdownDiffHTML oldText={block1} newText={block2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getAllByText("code1")[0];
@@ -237,7 +239,7 @@ describe("Given DiffHTML", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "```\ncode1 and another text\n```";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={block1} newText={block2} />);
+        render(<MarkdownDiffHTML oldText={block1} newText={block2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("code1");
@@ -252,7 +254,7 @@ describe("Given DiffHTML", () => {
       const code1 = "`code1`";
       const code2 = "`code2`";
       it("should return the correct diff", () => {
-        render(<DiffHTML oldText={code1} newText={code2} />);
+        render(<MarkdownDiffHTML oldText={code1} newText={code2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("code1");
@@ -265,7 +267,7 @@ describe("Given DiffHTML", () => {
       const code1 = "`code1`";
       const code2 = "code1";
       it("should return the correct diff", () => {
-        render(<DiffHTML oldText={code1} newText={code2} />);
+        render(<MarkdownDiffHTML oldText={code1} newText={code2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getAllByText("code1")[0];
@@ -280,7 +282,7 @@ describe("Given DiffHTML", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "```\ncode1 and another text\n```";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={block1} newText={block2} />);
+        render(<MarkdownDiffHTML oldText={block1} newText={block2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("code1");
@@ -293,7 +295,7 @@ describe("Given DiffHTML", () => {
       const block1 = "```\ncode1\n```";
       const block2 = "```\ncode2\n```";
       it("should return correct diff", () => {
-        render(<DiffHTML oldText={block1} newText={block2} />);
+        render(<MarkdownDiffHTML oldText={block1} newText={block2} />);
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
         expect(screen.getAllByTestId("md-line-added")).toHaveLength(1);
         const oldElement = screen.getByText("code1");
@@ -457,7 +459,10 @@ describe("Given DiffHTML", () => {
     for (const testCase of cases) {
       it(`should replace ${testCase.name}`, () => {
         render(
-          <DiffHTML oldText={testCase.oldText} newText={testCase.newText} />
+          <MarkdownDiffHTML
+            oldText={testCase.oldText}
+            newText={testCase.newText}
+          />
         );
         // assert rendered diff
         expect(screen.getAllByTestId("md-line-removed")).toHaveLength(1);
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index 7090b6e14..8c3376044 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -11,6 +11,7 @@ export function MarkdownEditor({
   wrapperClassName,
   initialValue = "",
   isSplitView,
+  hideButtonsMenu,
   customCommands = [],
 }) {
   const editorRef = useRef();
@@ -54,7 +55,8 @@ export function MarkdownEditor({
   function handleKeyPress(event) {
     const keyIsNotDigit = event.key.match(/[^a-zA-Z0-9]/);
     const isBackspace = event.key === "Backspace";
-    if (keyIsNotDigit || isBackspace) {
+    const isEnter = event.key === "Enter";
+    if (keyIsNotDigit || isBackspace || isEnter) {
       onSaveChanges();
     }
     if (event.metaKey || event.ctrlKey) {
@@ -94,18 +96,20 @@ export function MarkdownEditor({
           <div onClick={handleShowWrite}>Write</div>
           <div onClick={handleShowPreview}>Preview</div>
         </div>
-        <div className={styles.actionButtons}>
-          {availableCommands.map(
-            ({ command, Button, offset }, i) =>
-              Button && (
-                <Button
-                  key={i}
-                  className={styles.buttonIcon}
-                  onClick={handleCommand(command, { offset })}
-                />
-              )
-          )}
-        </div>
+        {!hideButtonsMenu && (
+          <div className={styles.actionButtons}>
+            {availableCommands.map(
+              ({ command, Button, offset }, i) =>
+                Button && (
+                  <Button
+                    key={i}
+                    className={styles.buttonIcon}
+                    onClick={handleCommand(command, { offset })}
+                  />
+                )
+            )}
+          </div>
+        )}
       </div>
       <div
         className={classNames(
@@ -124,6 +128,7 @@ export function MarkdownEditor({
           value={editorValue}
           onKeyDown={handleKeyPress}
           onChange={handleInputChange}
+          onBlur={() => onSaveChanges()}
         />
         <MarkdownRenderer body={editorValue} className={styles.preview} />
       </div>
@@ -139,7 +144,9 @@ MarkdownEditor.propTypes = {
   customCommands: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string,
-      Icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+      commandKey: PropTypes.string,
+      shift: PropTypes.bool,
+      Button: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
       command: PropTypes.func.isRequired,
     })
   ),
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index 4732e03fe..89e264fe4 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -13,11 +13,33 @@ function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   }, "");
 }
 
+export function createCommand({
+  label,
+  commandKey,
+  command,
+  shift,
+  buttonType,
+  buttonViewBox,
+} = {}) {
+  return {
+    label,
+    commandKey,
+    shift,
+    Button: ({ onClick }) => (
+      <ButtonIcon type={buttonType} onClick={onClick} viewBox={buttonViewBox} />
+    ),
+    command: (state) => {
+      saveStateChanges(state);
+      command(state);
+    },
+  };
+}
+
 // Multiline command interface
 export const multiLineCommand =
   (lineFormatterFn, { offset, ignoreBlankLines }) =>
-  ({ currentChange, ...stateChanges }) => {
-    const savedState = saveStateChanges(stateChanges);
+  (state) => {
+    const { currentChange } = state;
     const { start, end, lines } = currentChange.selection;
     const { previous, current, next } = lines;
     const formattedLines = formatEachLine(current, lineFormatterFn, {
@@ -27,33 +49,23 @@ export const multiLineCommand =
     if (previous.length === 0) {
       newPrev = "";
     }
-    return {
-      ...savedState,
-      currentState: {
-        content: `${newPrev}${formattedLines}\n${next}`,
-        selectionStart: start + offset,
-        selectionEnd: end + offset,
-      },
+    state.currentState = {
+      content: `${newPrev}${formattedLines}\n${next}`,
+      selectionStart: start + offset,
+      selectionEnd: end + offset,
     };
   };
 
-// cursor selection command interface
 export const cursorSelectionCommand =
   (cmd, { offset }) =>
-  ({ currentChange, ...stateChanges }) => {
-    const savedState = saveStateChanges(stateChanges);
+  (state) => {
     const {
       selection: { cursor, start, end },
-    } = currentChange;
+    } = state.currentChange;
     const newContent = cmd(cursor);
-    return {
-      ...savedState,
-      currentState: {
-        content: newContent,
-        selectionStart: start + offset,
-        selectionEnd: end + offset,
-      },
-    };
+    state.currentState.content = newContent;
+    state.currentState.selectionStart = start + offset;
+    state.currentState.selectionEnd = end + offset;
   };
 
 // Available commands
@@ -69,28 +81,26 @@ export const commands = [
     shift: true,
     command: redoStateChange,
   },
-  {
+  createCommand({
     label: "Bold Text",
     commandKey: "b",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="bold" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "bold",
+    buttonViewBox: "0 0 16 16",
     command: cursorSelectionCommand(
       ({ previous, current, next }) => `${previous}**${current}**${next}`,
       { offset: 2 }
     ),
-  },
-  {
+  }),
+  createCommand({
     label: "Italic",
     commandKey: "i",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="italic" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "italic",
+    buttonViewBox: "0 0 16 16",
     command: cursorSelectionCommand(
       ({ previous, current, next }) => `${previous}_${current}_${next}`,
       { offset: 1 }
     ),
-  },
+  }),
   {
     label: "Quote",
     Button: ({ onClick }) => (
@@ -108,7 +118,7 @@ export const commands = [
     ),
     command: cursorSelectionCommand(
       ({ previous, current, next }) => `${previous}\`${current}\`${next}`,
-      { offset: 2 }
+      { offset: 1 }
     ),
   },
 
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
index 21731d003..9c2204934 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
@@ -4,35 +4,28 @@ import {
   saveStateChanges,
 } from "./utils";
 import { useReducer } from "react";
+import { createNextState } from "@reduxjs/toolkit";
 
 function commandsReducer(editorState, { command, currentChange }) {
   if (!currentChange) {
-    return command(editorState);
+    return createNextState(command)(editorState);
   }
   const { content, selectionStart, selectionEnd } = currentChange;
   const cursor = getSelectedContent(content, selectionStart, selectionEnd);
   const lines = getMultiLineContent(content, selectionStart, selectionEnd);
-  const { currentState, previousState, nextState } = command({
+  const { currentState, previousState, nextState } = createNextState(command)({
     currentChange: {
       selection: { lines, cursor, start: selectionStart, end: selectionEnd },
       content,
     },
-    previousState: editorState.previousState,
-    nextState: editorState.nextState,
-    currentState: editorState.currentState,
+    ...editorState,
   });
   return { currentState, previousState, nextState };
 }
 
-function regularChangeAction({ currentChange: { content }, ...state }) {
-  return {
-    ...state,
-    currentState: {
-      ...state.currentState,
-      content,
-    },
-  };
-}
+const regularChangeCommand = (state) => {
+  state.currentState.content = state.currentChange.content;
+};
 
 function initializeEditor(initialValue) {
   return {
@@ -41,13 +34,7 @@ function initializeEditor(initialValue) {
       selectionStart: initialValue.length,
       selectionEnd: initialValue.length,
     },
-    previousState: [
-      {
-        content: initialValue,
-        selectionStart: initialValue.length,
-        selectionEnd: initialValue.length,
-      },
-    ],
+    previousState: [{ content: "", selectionStart: 0, selectionEnd: 0 }],
     nextState: [],
   };
 }
@@ -60,7 +47,7 @@ export function useMarkdownEditor(initialValue = "") {
 
   function onChange(value) {
     dispatch({
-      command: regularChangeAction,
+      command: regularChangeCommand,
       currentChange: {
         content: value,
       },
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js
index 2fc1101f5..ca2c3a99e 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/index.js
@@ -1 +1,2 @@
+export * from "./commands";
 export * from "./MarkdownEditor";
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
index 4d0be84e8..f6c7776c8 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
@@ -56,12 +56,13 @@ export function getSelectedContent(content, startPos, endPos) {
   };
 }
 
-export function saveStateChanges({ previousState, currentState }) {
-  return {
-    previousState: [currentState, ...previousState],
-    nextState: [],
-    currentState,
-  };
+export function saveStateChanges(state) {
+  const lastChange = state.previousState[0].content;
+  const currentChange = state.currentState.content;
+  if (lastChange !== currentChange) {
+    state.previousState = [state.currentState, ...state.previousState];
+    state.nextState = [];
+  }
 }
 
 export function undoStateChange({ previousState, currentState, nextState }) {
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
index 1d08cb58c..a27567ab0 100644
--- a/plugins-structure/packages/common-ui/src/dev/index.js
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -1,11 +1,19 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import { DiffHTML, MarkdownEditor } from "../components/Markdown";
 import {
+  MarkdownDiffHTML,
+  MarkdownEditor,
+  MarkdownRenderer,
+  createCommand,
+} from "../components/Markdown";
+import {
+  ButtonIcon,
   DEFAULT_DARK_THEME_NAME,
   DEFAULT_LIGHT_THEME_NAME,
   DarkLightToggle,
+  H3,
   ThemeProvider,
+  Toggle,
   defaultDarkTheme,
   defaultLightTheme,
   useTheme,
@@ -17,18 +25,72 @@ const themes = {
   [DEFAULT_DARK_THEME_NAME]: { ...defaultDarkTheme },
 };
 
+const customCommands = [
+  {
+    label: "Link",
+    shift: true,
+    commandKey: "l",
+    Button: ({ onClick }) => <ButtonIcon type="link" onClick={onClick} />,
+    command: (state) => {
+      const { currentChange } = state;
+      const { cursor, end, start } = currentChange.selection;
+      const { previous, current, next } = cursor;
+      const isCurrentEmpty = !current.length;
+      state.currentState = {
+        content: `${previous}[${current}]()${next}`,
+        selectionStart: isCurrentEmpty ? start + 1 : end + 3,
+        selectionEnd: isCurrentEmpty ? start + 1 : end + 3,
+      };
+    },
+  },
+  createCommand({
+    label: "Copy All",
+    commandKey: "c",
+    shift: true,
+    buttonType: "copyToClipboard",
+    command: (state) => {
+      state.currentState.selectionEnd = state.currentState.content.length;
+      state.currentState.selectionStart = 0;
+    },
+  }),
+];
+
 function MdTest() {
   const [old, setOld] = useState("");
   const [nw, setNew] = useState("");
+  const [diffMode, setDiffMode] = useState(false);
+  const [withCustomCommands, setCustomCommands] = useState(false);
 
   return (
     <>
-      <MarkdownEditor onChange={(e) => setOld(e)} />
-      <MarkdownEditor onChange={(e) => setNew(e)} />
-      <div
-        style={{ width: "90%", border: "1px solid black", margin: "2rem" }}
-      />
-      <DiffHTML oldText={old} newText={nw} />
+      <H3>Diff Mode</H3>
+      <Toggle onToggle={() => setDiffMode(!diffMode)} toggled={diffMode} />
+      {diffMode ? (
+        <div>
+          <MarkdownEditor onChange={(e) => setOld(e)} />
+          <MarkdownEditor onChange={(e) => setNew(e)} />
+          <div
+            style={{ width: "90%", border: "1px solid black", margin: "2rem" }}
+          />
+          <MarkdownDiffHTML oldText={old} newText={nw} />
+        </div>
+      ) : (
+        <div>
+          <H3>Toggle Custom Commands</H3>
+          <Toggle
+            onToggle={() => setCustomCommands(!withCustomCommands)}
+            toggled={withCustomCommands}
+          />
+          <MarkdownEditor
+            onChange={(e) => setNew(e)}
+            customCommands={withCustomCommands ? customCommands : []}
+          />
+          <div
+            style={{ width: "90%", border: "1px solid black", margin: "2rem" }}
+          />
+          <MarkdownRenderer body={nw} />
+        </div>
+      )}
     </>
   );
 }

From 476063e8e533c62a95fb6fa32f81f104f9e6465c Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Tue, 29 Mar 2022 15:59:50 -0300
Subject: [PATCH 26/29] feat(common-ui): use createCommand for MD commands

---
 .../Markdown/MarkdownEditor/commands.js       | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index 89e264fe4..cf51f3795 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -25,9 +25,15 @@ export function createCommand({
     label,
     commandKey,
     shift,
-    Button: ({ onClick }) => (
-      <ButtonIcon type={buttonType} onClick={onClick} viewBox={buttonViewBox} />
-    ),
+    Button: buttonType
+      ? ({ onClick }) => (
+          <ButtonIcon
+            type={buttonType}
+            onClick={onClick}
+            viewBox={buttonViewBox}
+          />
+        )
+      : null,
     command: (state) => {
       saveStateChanges(state);
       command(state);
@@ -70,17 +76,17 @@ export const cursorSelectionCommand =
 
 // Available commands
 export const commands = [
-  {
+  createCommand({
     label: "Undo",
     commandKey: "z",
     command: undoStateChange,
-  },
-  {
+  }),
+  createCommand({
     label: "Redo",
     commandKey: "z",
     shift: true,
     command: redoStateChange,
-  },
+  }),
   createCommand({
     label: "Bold Text",
     commandKey: "b",
@@ -101,55 +107,50 @@ export const commands = [
       { offset: 1 }
     ),
   }),
-  {
+  createCommand({
     label: "Quote",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="quote" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "quote",
+    buttonViewBox: "0 0 16 16",
     command: multiLineCommand((curr) => `> ${curr}`, {
       offset: 2,
       ignoreBlankLines: true,
     }),
-  },
-  {
+  }),
+  createCommand({
     label: "Code",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="code" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "code",
+    buttonViewBox: "0 0 16 16",
     command: cursorSelectionCommand(
       ({ previous, current, next }) => `${previous}\`${current}\`${next}`,
       { offset: 1 }
     ),
-  },
+  }),
 
-  {
+  createCommand({
     label: "List",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="bulletList" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "bulletList",
+    buttonViewBox: "0 0 16 16",
     command: multiLineCommand((curr) => `- ${curr}`, {
       offset: 2,
       ignoreBlankLines: true,
     }),
-  },
-  {
+  }),
+  createCommand({
     label: "Numbered List",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="numberedList" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "numberedList",
+    buttonViewBox: "0 0 16 16",
     command: multiLineCommand((curr, i) => `${i}. ${curr}`, {
       offset: 3,
       ignoreBlankLines: true,
     }),
-  },
-  {
+  }),
+  createCommand({
     label: "Task List",
-    Button: ({ onClick }) => (
-      <ButtonIcon type="taskList" onClick={onClick} viewBox="0 0 16 16" />
-    ),
+    buttonType: "taskList",
+    buttonViewBox: "0 0 16 16",
     command: multiLineCommand((curr) => `- [ ] ${curr}`, {
       offset: 5,
       ignoreBlankLines: true,
     }),
-  },
+  }),
 ];

From 75c24a72c8149ae8ef8f32b7901a2c193d579c66 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Wed, 30 Mar 2022 11:41:55 -0300
Subject: [PATCH 27/29] docs(common-ui): add Markdown Editor docs

---
 .../Markdown/MarkdownEditor/commands.js       | 205 ++++++++++++++++--
 .../Markdown/MarkdownEditor/hooks.js          |  45 +---
 .../Markdown/MarkdownEditor/utils.js          |  73 ++++---
 .../packages/common-ui/src/dev/index.js       |   4 +-
 4 files changed, 234 insertions(+), 93 deletions(-)

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index cf51f3795..480c39f65 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -1,7 +1,70 @@
 import React from "react";
 import { ButtonIcon } from "pi-ui";
 import { redoStateChange, saveStateChanges, undoStateChange } from "./utils";
+import { createNextState } from "@reduxjs/toolkit";
+import { getMultiLineContent, getSelectedContent } from "./utils";
+/**
+ * @typedef {Object} TextSelection
+ * @property {String} previous text before selection
+ * @property {String | String[]} current text inside selection.
+ * @property {String} next text after selection
+ */
+/**
+ * Selection describes the editor text selection properties.
+ * @typedef {Object} Selection
+ * @property {Number} start editor selection start
+ * @property {Number} end editor selection end
+ * @property {TextSelection} lines lines selected
+ * @property {TextSelection} cursor selected cursor content
+ */
+/**
+ * CurrentChange describes an editor change. It
+ * @typedef {Object} CurrentChange
+ * @property {Selection} selection editor text selection
+ * @property {String} content target text
+ */
+/**
+ * ChangesState is the interface that describes an editor change.
+ * @typedef {Object} ChangesState
+ * @property {String} content content inside selection,
+ * @property {Number} selectionStart start of the cursor selection,
+ * @property {Number} selectionEnd end of the cursor selection,
+ */
+/**
+ * EditorState is the immutable data structure generated by commandsReducer.
+ * @typedef {{
+ *  currentState: ChangesState,
+ *  previousStates: ChangesState[],
+ *  nextStates: ChangesState[]
+ * }} EditorState
+ */
+/**
+ * Command is a callback executed when the editor triggers a command. It
+ * receives an EditorState immutable data structure (ImmerJS) from the
+ * commandsReducer.
+ *
+ * @callback Command
+ * @param {EditorState} editorState editor changes state
+ * @param {CurrentChange} currentChange current changes params to be applied
+ * @returns {void}
+ */
+/**
+ * MarkdownEditorCommand is an interface that describes a markdown editor valid
+ * command. It includes a Command and other configuration parameters to execute
+ * this command.
+ * @typedef {Object} MarkdownEditorCommand
+ * @property {String} label command label
+ * @property {String} commandKey keyboard character to activate command
+ * (optional)
+ * @property {Boolean} shift command should trigger when pressing shift key
+ * @property {React.Component} Button action button to trigger command
+ * @property {Command} command Command to be executed when buttons or keys are
+ * pressed.
+ */
 
+/**
+ * formatEachLine applies the formatFn to all lines.
+ */
 function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   let index = 0;
   return lines.reduce((acc, curr, i) => {
@@ -13,11 +76,81 @@ function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
   }, "");
 }
 
-export function createCommand({
+/**
+ * initializeEditorReducer returns a valid EditorState for given initialValue
+ * string.
+ * @param {String} initialValue initial editor content
+ * @returns {EditorState} initial editor state
+ */
+export function initializeEditorReducer(initialValue) {
+  return {
+    currentState: {
+      content: initialValue,
+      selectionStart: initialValue.length,
+      selectionEnd: initialValue.length,
+    },
+    previousStates: [
+      {
+        content: initialValue,
+        selectionStart: initialValue.length,
+        selectionEnd: initialValue.length,
+      },
+    ],
+    nextStates: [],
+  };
+}
+
+/**
+ * commandsReducer is the reducer to manage commands. It receives an action
+ * dispatched with a Command (`command`) and a ChangesState (`currentChange`),
+ * and returns a new EditorState.
+ *
+ * @param {EditorState} editorState
+ * @param {{
+ *  command: Command,
+ *  currentChange: ChangesState
+ * }}
+ * @returns {EditorState} new editor state
+ */
+export function commandsReducer(editorState, { command, currentChange }) {
+  if (!currentChange) {
+    return createNextState(command)(editorState);
+  }
+  const { content, selectionStart, selectionEnd } = currentChange;
+  const cursor = getSelectedContent(content, selectionStart, selectionEnd);
+  const lines = getMultiLineContent(content, selectionStart, selectionEnd);
+  const currentChangeToBeApplied = {
+    selection: { lines, cursor, start: selectionStart, end: selectionEnd },
+    content,
+  };
+  const { currentState, previousStates, nextStates } = createNextState(command)(
+    editorState,
+    currentChangeToBeApplied
+  );
+  return { currentState, previousStates, nextStates };
+}
+
+/**
+ * createEditorCommand returns a custom Markdown Editor command object. By
+ * default, all commands save the editor state before being executed, but it can
+ * be prevented if `skipSaving` is true.
+ * @param {{
+ *  label: String,
+ *  commandKey: String,
+ *  command: Command,
+ *  shift: Boolean,
+ *  skipSaving: Boolean
+ *  buttonType: String,
+ *  buttonViewBox: String
+ * }}
+ * @returns {MarkdownEditorCommand} Markdown Editor Command
+ */
+export function createEditorCommand({
   label,
   commandKey,
   command,
   shift,
+  skipSaving,
   buttonType,
   buttonViewBox,
 } = {}) {
@@ -34,21 +167,25 @@ export function createCommand({
           />
         )
       : null,
-    command: (state) => {
-      saveStateChanges(state);
-      command(state);
+    command: (state, currentChange) => {
+      !skipSaving && saveStateChanges(state);
+      command(state, currentChange);
     },
   };
 }
 
-// Multiline command interface
+/**
+ * multilineCommand is the interface for executing a command on every selected
+ * line.
+ * @param {Command} command A command to be executed on selected lines
+ * @param {Object} config
+ */
 export const multiLineCommand =
-  (lineFormatterFn, { offset, ignoreBlankLines }) =>
-  (state) => {
-    const { currentChange } = state;
+  (command, { offset, ignoreBlankLines }) =>
+  (state, currentChange) => {
     const { start, end, lines } = currentChange.selection;
     const { previous, current, next } = lines;
-    const formattedLines = formatEachLine(current, lineFormatterFn, {
+    const formattedLines = formatEachLine(current, command, {
       ignoreBlankLines,
     });
     let newPrev = `${previous}\n`;
@@ -62,32 +199,53 @@ export const multiLineCommand =
     };
   };
 
+/**
+ * cursorSelectionCommand is the interface for executing a command the content
+ * inside the selected positions.
+ * @param {Command} command A command to be executed on selected lines
+ * @param {Object} config
+ */
 export const cursorSelectionCommand =
-  (cmd, { offset }) =>
-  (state) => {
+  (command, { offset }) =>
+  (state, currentChange) => {
     const {
       selection: { cursor, start, end },
-    } = state.currentChange;
-    const newContent = cmd(cursor);
+    } = currentChange;
+    const newContent = command(cursor);
     state.currentState.content = newContent;
     state.currentState.selectionStart = start + offset;
     state.currentState.selectionEnd = end + offset;
   };
 
-// Available commands
+/**
+ * regularChangeCommand updates the current state with the content from
+ * currentChange.
+ * @param {EditorState} editorState Editor State
+ * @param {CurrentChange} currentChange Change object
+ */
+export function regularChangeCommand(editorState, currentChange) {
+  editorState.currentState.content = currentChange.content;
+}
+
+/**
+ * commands is the MarkdownEditorCommands list.
+ * @type { MarkdownEditorCommand[] } Editor Commands list
+ */
 export const commands = [
-  createCommand({
+  createEditorCommand({
     label: "Undo",
     commandKey: "z",
+    skipSaving: true,
     command: undoStateChange,
   }),
-  createCommand({
+  createEditorCommand({
     label: "Redo",
     commandKey: "z",
     shift: true,
+    skipSaving: true,
     command: redoStateChange,
   }),
-  createCommand({
+  createEditorCommand({
     label: "Bold Text",
     commandKey: "b",
     buttonType: "bold",
@@ -97,7 +255,7 @@ export const commands = [
       { offset: 2 }
     ),
   }),
-  createCommand({
+  createEditorCommand({
     label: "Italic",
     commandKey: "i",
     buttonType: "italic",
@@ -107,7 +265,7 @@ export const commands = [
       { offset: 1 }
     ),
   }),
-  createCommand({
+  createEditorCommand({
     label: "Quote",
     buttonType: "quote",
     buttonViewBox: "0 0 16 16",
@@ -116,7 +274,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createCommand({
+  createEditorCommand({
     label: "Code",
     buttonType: "code",
     buttonViewBox: "0 0 16 16",
@@ -125,8 +283,7 @@ export const commands = [
       { offset: 1 }
     ),
   }),
-
-  createCommand({
+  createEditorCommand({
     label: "List",
     buttonType: "bulletList",
     buttonViewBox: "0 0 16 16",
@@ -135,7 +292,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createCommand({
+  createEditorCommand({
     label: "Numbered List",
     buttonType: "numberedList",
     buttonViewBox: "0 0 16 16",
@@ -144,7 +301,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createCommand({
+  createEditorCommand({
     label: "Task List",
     buttonType: "taskList",
     buttonViewBox: "0 0 16 16",
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
index 9c2204934..64f2062f4 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/hooks.js
@@ -1,48 +1,15 @@
+import { saveStateChanges } from "./utils";
 import {
-  getMultiLineContent,
-  getSelectedContent,
-  saveStateChanges,
-} from "./utils";
+  commandsReducer,
+  initializeEditorReducer,
+  regularChangeCommand,
+} from "./commands";
 import { useReducer } from "react";
-import { createNextState } from "@reduxjs/toolkit";
-
-function commandsReducer(editorState, { command, currentChange }) {
-  if (!currentChange) {
-    return createNextState(command)(editorState);
-  }
-  const { content, selectionStart, selectionEnd } = currentChange;
-  const cursor = getSelectedContent(content, selectionStart, selectionEnd);
-  const lines = getMultiLineContent(content, selectionStart, selectionEnd);
-  const { currentState, previousState, nextState } = createNextState(command)({
-    currentChange: {
-      selection: { lines, cursor, start: selectionStart, end: selectionEnd },
-      content,
-    },
-    ...editorState,
-  });
-  return { currentState, previousState, nextState };
-}
-
-const regularChangeCommand = (state) => {
-  state.currentState.content = state.currentChange.content;
-};
-
-function initializeEditor(initialValue) {
-  return {
-    currentState: {
-      content: initialValue,
-      selectionStart: initialValue.length,
-      selectionEnd: initialValue.length,
-    },
-    previousState: [{ content: "", selectionStart: 0, selectionEnd: 0 }],
-    nextState: [],
-  };
-}
 
 export function useMarkdownEditor(initialValue = "") {
   const [state, dispatch] = useReducer(
     commandsReducer,
-    initializeEditor(initialValue)
+    initializeEditorReducer(initialValue)
   );
 
   function onChange(value) {
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
index f6c7776c8..3f906169e 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/utils.js
@@ -7,6 +7,19 @@ function countOccurences(string, term) {
   return array.length - 1;
 }
 
+/**
+ * getMultiLineContent returns a TextSelection for current cursor lines. It
+ * will select all `content` lines between `startPos` and `endPos`. If selection
+ * is at the middle of some line, the whole line is selected.
+ * @param {String} content text content
+ * @param {Number} startPos selection start
+ * @param {Number} endPos selection end
+ * @returns {{
+ *  previous: String,
+ *  current: String[],
+ *  next: String,
+ * }} Text Selection
+ */
 export function getMultiLineContent(content, startPos, endPos) {
   const escapeChar = "&#27;",
     numberOfEscapes = 2; // Start escape, end escape
@@ -45,6 +58,18 @@ export function getMultiLineContent(content, startPos, endPos) {
   };
 }
 
+/**
+ * getSelectedContent returns a TextSelection for current cursor selection. It
+ * will select the `content` between `startPos` and `endPos`.
+ * @param {String} content text content
+ * @param {Number} startPos selection start
+ * @param {Number} endPos selection end
+ * @returns {{
+ *  previous: String,
+ *  current: String,
+ *  next: String,
+ * }} Text Selection
+ */
 export function getSelectedContent(content, startPos, endPos) {
   const previousContent = content.substring(0, startPos);
   const nextContent = content.substring(endPos, content.length);
@@ -57,41 +82,33 @@ export function getSelectedContent(content, startPos, endPos) {
 }
 
 export function saveStateChanges(state) {
-  const lastChange = state.previousState[0].content;
+  const lastChange = state.previousStates[0].content;
   const currentChange = state.currentState.content;
   if (lastChange !== currentChange) {
-    state.previousState = [state.currentState, ...state.previousState];
-    state.nextState = [];
+    state.previousStates = [state.currentState, ...state.previousStates];
+    // clear future changes.
+    state.nextStates = [];
   }
 }
 
-export function undoStateChange({ previousState, currentState, nextState }) {
-  const [lastChange, ...previousChanges] = previousState;
-  if (!lastChange) {
-    return { previousState, nextState, currentState };
-  }
-  if (!previousChanges.length) {
-    return {
-      currentState: lastChange,
-      previousState,
-      nextState: [currentState, ...nextState],
-    };
+export function undoStateChange(state) {
+  if (state.previousStates.length) {
+    // save move current state to next states
+    state.nextStates = [state.currentState, ...state.nextStates];
+    // if there are no changes prior to last change
+    if (state.previousStates.length === 1) {
+      state.currentState = state.previousStates[0];
+    } else {
+      const { content, selectionStart, selectionEnd } =
+        state.previousStates.shift();
+      state.currentState = { content, selectionStart, selectionEnd };
+    }
   }
-  return {
-    currentState: lastChange,
-    previousState: previousChanges,
-    nextState: [currentState, ...nextState],
-  };
 }
 
-export function redoStateChange({ previousState, currentState, nextState }) {
-  const [lastChange, ...nextChanges] = nextState;
-  if (!lastChange) {
-    return { previousState, nextState: [], currentState };
+export function redoStateChange(state) {
+  if (state.nextStates.length) {
+    state.previousStates.unshift(state.currentState);
+    state.currentState = state.nextStates.shift();
   }
-  return {
-    currentState: lastChange,
-    previousState: [currentState, ...previousState],
-    nextState: nextChanges,
-  };
 }
diff --git a/plugins-structure/packages/common-ui/src/dev/index.js b/plugins-structure/packages/common-ui/src/dev/index.js
index a27567ab0..2e2d63948 100644
--- a/plugins-structure/packages/common-ui/src/dev/index.js
+++ b/plugins-structure/packages/common-ui/src/dev/index.js
@@ -4,7 +4,7 @@ import {
   MarkdownDiffHTML,
   MarkdownEditor,
   MarkdownRenderer,
-  createCommand,
+  createEditorCommand,
 } from "../components/Markdown";
 import {
   ButtonIcon,
@@ -43,7 +43,7 @@ const customCommands = [
       };
     },
   },
-  createCommand({
+  createEditorCommand({
     label: "Copy All",
     commandKey: "c",
     shift: true,

From 2a9fe6aeb5f770962c76dcf6748b319fb824a1e9 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Wed, 30 Mar 2022 13:22:07 -0300
Subject: [PATCH 28/29] test(common-ui): MDE commands tests

---
 .../Markdown/MarkdownEditor/commands.js       |  33 ++--
 .../Markdown/MarkdownEditor/commands.test.js  | 176 ++++++++++++++++++
 2 files changed, 195 insertions(+), 14 deletions(-)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
index 480c39f65..3132e9e0e 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.js
@@ -82,7 +82,7 @@ function formatEachLine(lines, formatFn, { ignoreBlankLines } = {}) {
  * @param {String} initialValue initial editor content
  * @returns {EditorState} initial editor state
  */
-export function initializeEditorReducer(initialValue) {
+export function initializeEditorReducer(initialValue = "") {
   return {
     currentState: {
       content: initialValue,
@@ -228,24 +228,23 @@ export function regularChangeCommand(editorState, currentChange) {
 }
 
 /**
- * commands is the MarkdownEditorCommands list.
- * @type { MarkdownEditorCommand[] } Editor Commands list
+ * commandsMap is the MarkdownEditorCommands map.
  */
-export const commands = [
-  createEditorCommand({
+export const commandsMap = {
+  undo: createEditorCommand({
     label: "Undo",
     commandKey: "z",
     skipSaving: true,
     command: undoStateChange,
   }),
-  createEditorCommand({
+  redo: createEditorCommand({
     label: "Redo",
     commandKey: "z",
     shift: true,
     skipSaving: true,
     command: redoStateChange,
   }),
-  createEditorCommand({
+  bold: createEditorCommand({
     label: "Bold Text",
     commandKey: "b",
     buttonType: "bold",
@@ -255,7 +254,7 @@ export const commands = [
       { offset: 2 }
     ),
   }),
-  createEditorCommand({
+  italic: createEditorCommand({
     label: "Italic",
     commandKey: "i",
     buttonType: "italic",
@@ -265,7 +264,7 @@ export const commands = [
       { offset: 1 }
     ),
   }),
-  createEditorCommand({
+  quote: createEditorCommand({
     label: "Quote",
     buttonType: "quote",
     buttonViewBox: "0 0 16 16",
@@ -274,7 +273,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createEditorCommand({
+  code: createEditorCommand({
     label: "Code",
     buttonType: "code",
     buttonViewBox: "0 0 16 16",
@@ -283,7 +282,7 @@ export const commands = [
       { offset: 1 }
     ),
   }),
-  createEditorCommand({
+  list: createEditorCommand({
     label: "List",
     buttonType: "bulletList",
     buttonViewBox: "0 0 16 16",
@@ -292,7 +291,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createEditorCommand({
+  numberedList: createEditorCommand({
     label: "Numbered List",
     buttonType: "numberedList",
     buttonViewBox: "0 0 16 16",
@@ -301,7 +300,7 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-  createEditorCommand({
+  taskList: createEditorCommand({
     label: "Task List",
     buttonType: "taskList",
     buttonViewBox: "0 0 16 16",
@@ -310,4 +309,10 @@ export const commands = [
       ignoreBlankLines: true,
     }),
   }),
-];
+};
+
+/**
+ * commands is the MarkdownEditorCommands list.
+ * @type { MarkdownEditorCommand[] } Editor Commands list
+ */
+export const commands = Object.values(commandsMap);
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
new file mode 100644
index 000000000..d9649accc
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/commands.test.js
@@ -0,0 +1,176 @@
+import {
+  commandsMap,
+  commandsReducer,
+  createEditorCommand,
+  initializeEditorReducer,
+  regularChangeCommand,
+} from "./commands";
+
+describe("Given initializeEditorReducer", () => {
+  it("should return the correct initial state", () => {
+    const initialState = initializeEditorReducer("content");
+    expect(initialState).toEqual({
+      currentState: {
+        content: "content",
+        selectionStart: 7,
+        selectionEnd: 7,
+      },
+      previousStates: [
+        {
+          content: "content",
+          selectionStart: 7,
+          selectionEnd: 7,
+        },
+      ],
+      nextStates: [],
+    });
+  });
+});
+
+describe("Given createEditorCommand", () => {
+  it("should return the correct Markdown Editor Command", () => {
+    const editorCommand = createEditorCommand({
+      label: "My Command",
+      commandKey: "k",
+      command: (state) => state,
+    });
+    expect(editorCommand.label).toEqual("My Command");
+    expect(editorCommand.commandKey).toEqual("k");
+    expect(editorCommand.shift).not.toBeDefined();
+    expect(editorCommand.Button).toBeNull();
+    expect(editorCommand.command).toBeFunction();
+  });
+});
+
+describe("Given commandsReducer", () => {
+  const state = {
+    currentState: {
+      content: "Content",
+      selectionStart: 7,
+      selectionEnd: 7,
+    },
+    previousStates: [
+      {
+        content: "",
+        selectionStart: 0,
+        selectionEnd: 0,
+      },
+    ],
+    nextStates: [],
+  };
+  describe("when en empty command is dispatched", () => {
+    it("should return the initial state", () => {
+      const newState = commandsReducer(state, {
+        command: () => {},
+      });
+      expect(newState).toEqual(state);
+    });
+  });
+  describe("when a command dispatches some state changes", () => {
+    it("should return the initial state", () => {
+      const newState = commandsReducer(state, {
+        command: regularChangeCommand,
+        currentChange: {
+          content: "New Content",
+        },
+      });
+      expect(newState).toEqual({
+        ...state,
+        currentState: { ...state.currentState, content: "New Content" },
+      });
+    });
+  });
+  describe("when a command clears the current state", () => {
+    it("should return the initial state", () => {
+      const newState = commandsReducer(state, {
+        command: (state) => {
+          state.currentState.content = "";
+        },
+      });
+      expect(newState).toEqual({
+        ...state,
+        currentState: { ...state.currentState, content: "" },
+      });
+    });
+  });
+  describe("when default editor commands are dispatched", () => {
+    const currentChange = {
+      selectionStart: 0,
+      selectionEnd: 7,
+      content: "Content",
+    };
+    describe("undo command", () => {
+      it("should return previous state last content", () => {
+        const { command } = commandsMap.undo;
+        const newState = commandsReducer(state, { command });
+        expect(newState.currentState.content).toEqual("");
+      });
+    });
+    describe("redo command", () => {
+      it("should return next state last content", () => {
+        const { command } = commandsMap.redo;
+        const newState = commandsReducer(
+          {
+            ...state,
+            nextStates: [
+              {
+                content: "next",
+              },
+            ],
+          },
+          { command }
+        );
+        expect(newState.currentState.content).toEqual("next");
+      });
+    });
+    describe("bold command", () => {
+      it("should return content between **'s: **content**", () => {
+        const { command } = commandsMap.bold;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("**Content**");
+      });
+    });
+    describe("italic command", () => {
+      it("should return content between _'s: _Content_", () => {
+        const { command } = commandsMap.italic;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("_Content_");
+      });
+    });
+    describe("code command", () => {
+      it("should return content between `'s: `Content`", () => {
+        const { command } = commandsMap.code;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("`Content`");
+      });
+    });
+    describe("quote command", () => {
+      it("should return '>' at the beginning of the line: > Content", () => {
+        const { command } = commandsMap.quote;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("> Content\n");
+      });
+    });
+    describe("list command", () => {
+      it("should return '-' at the beginning of the line: - Content", () => {
+        const { command } = commandsMap.list;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("- Content\n");
+      });
+    });
+    describe("numberedList command", () => {
+      it("should return '1.' at the beginning of the line: 1. Content", () => {
+        const { command } = commandsMap.numberedList;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("1. Content\n");
+      });
+    });
+    describe("taskList command", () => {
+      it("should return '- [ ] ' at the beginning of the line: - [ ] Content", () => {
+        const { command } = commandsMap.taskList;
+        const newState = commandsReducer(state, { command, currentChange });
+        expect(newState.currentState.content).toEqual("- [ ] Content\n");
+      });
+    });
+  });
+});

From 82ff4d11817ba02b7041a1512d38948ddfb55259 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Wed, 30 Mar 2022 14:14:09 -0300
Subject: [PATCH 29/29] test(common-ui): add Markdown Editor tests

---
 .../Markdown/MarkdownEditor/MarkdownEditor.js |   1 +
 .../MarkdownEditor/MarkdownEditor.test.js     | 118 ++++++++++++++++++
 2 files changed, 119 insertions(+)
 create mode 100644 plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.test.js

diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
index 8c3376044..8613ec460 100644
--- a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.js
@@ -123,6 +123,7 @@ export function MarkdownEditor({
       >
         <textarea
           id="markdown-editor"
+          data-testid="markdown-editor"
           ref={editorRef}
           className={styles.editor}
           value={editorValue}
diff --git a/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.test.js b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.test.js
new file mode 100644
index 000000000..d973d9091
--- /dev/null
+++ b/plugins-structure/packages/common-ui/src/components/Markdown/MarkdownEditor/MarkdownEditor.test.js
@@ -0,0 +1,118 @@
+import React from "react";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+jest.mock(
+  "pi-ui",
+  () => ({
+    ButtonIcon: () => <div>Button</div>,
+    classNames: (...args) => args.map((a) => a || "").join(" "),
+  }),
+  { virtual: true }
+);
+
+describe("Given MarkdownEditor", () => {
+  let element;
+  beforeEach(() => {
+    render(<MarkdownEditor onChange={() => {}} />);
+    element = screen.getByTestId("markdown-editor");
+    fireEvent.focus(element);
+  });
+  afterEach(() => {
+    cleanup();
+    element = null;
+  });
+  describe("when typing", () => {
+    it("should update editor text", () => {
+      fireEvent.change(element, { target: { value: "abc" } });
+      const newElement = screen.getByTestId("markdown-editor");
+      expect(newElement).toHaveTextContent("abc");
+    });
+  });
+  describe("when dispatching commands", () => {
+    describe("undo command should restore editor state to previous state", () => {
+      it("cmd+z", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "z", keyCode: 122, metaKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("");
+      });
+      it("ctrl+z", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "z", keyCode: 122, ctrlKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("");
+      });
+    });
+    describe("redo command should restore undo changes", () => {
+      it("cmd+shift+z", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        // Undo
+        fireEvent.keyDown(element, {
+          key: "z",
+          keyCode: 122,
+          metaKey: true,
+        });
+        let newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("");
+        // redo
+        fireEvent.keyDown(element, {
+          key: "z",
+          keyCode: 122,
+          metaKey: true,
+          shiftKey: true,
+        });
+        newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc");
+      });
+      it("ctrl+shift+z", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        // Undo
+        fireEvent.keyDown(element, {
+          key: "z",
+          keyCode: 122,
+          ctrlKey: true,
+        });
+        let newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("");
+        // redo
+        fireEvent.keyDown(element, {
+          key: "z",
+          keyCode: 122,
+          ctrlKey: true,
+          shiftKey: true,
+        });
+        newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc");
+      });
+    });
+    describe("bold command should insert bold tags", () => {
+      it("ctrl+b", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "b", keyCode: 98, ctrlKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc****");
+      });
+      it("cmd+b", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "b", keyCode: 98, metaKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc****");
+      });
+    });
+    describe("italic command should insert italic tags", () => {
+      it("ctrl+i", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "i", keyCode: 105, ctrlKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc__");
+      });
+      it("cmd+i", () => {
+        fireEvent.change(element, { target: { value: "abc" } });
+        fireEvent.keyDown(element, { key: "i", keyCode: 105, metaKey: true });
+        const newElement = screen.getByTestId("markdown-editor");
+        expect(newElement.value).toEqual("abc__");
+      });
+    });
+  });
+});