Add quotes to rich text editor (#9932)

* bump rich text editor to 0.20.0
* add new svg for the button
* show the button
* make the composer display look like the timeline display

package.json

@@ -57,7 +57,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.4.0",
-        "@matrix-org/matrix-wysiwyg": "^0.19.0",
+        "@matrix-org/matrix-wysiwyg": "^0.20.0",
         "@matrix-org/react-sdk-module-api": "^0.0.3",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -44,9 +44,21 @@ limitations under the License.
             padding-inline-start: $spacing-28;
         }
 
+        blockquote {
+            color: #777;
+            border-left: 2px solid $blockquote-bar-color;
+            border-radius: 2px;
+            padding: 0 10px;
+
+            margin-block-start: 0;
+            margin-block-end: 0;
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+        }
+
         // model output always includes a linebreak but we do not want the user
         // to see it when writing input in lists
-        :is(ol, ul, pre) + br:last-of-type {
+        :is(ol, ul, pre, blockquote) + br:last-of-type {
             display: none;
         }
 

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -22,6 +22,7 @@ import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/c
 import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg";
 import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg";
 import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
+import { Icon as QuoteIcon } from "../../../../../../res/img/element-icons/room/composer/quote.svg";
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
 import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg";
@@ -126,6 +127,12 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 onClick={() => composer.orderedList()}
                 icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                actionState={actionStates.quote}
+                label={_td("Quote")}
+                onClick={() => composer.quote()}
+                icon={<QuoteIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 actionState={actionStates.inlineCode}
                 label={_td("Code")}

test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx

@@ -32,6 +32,7 @@ const mockWysiwyg = {
     link: jest.fn(),
     orderedList: jest.fn(),
     unorderedList: jest.fn(),
+    quote: jest.fn(),
 } as unknown as FormattingFunctions;
 
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
@@ -49,6 +50,7 @@ const testCases: Record<
     link: { label: "Link", mockFormatFn: openLinkModalSpy },
     orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
     unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
+    quote: { label: "Quote", mockFormatFn: mockWysiwyg.quote },
 };
 
 const createActionStates = (state: ActionState): AllActionStates => {

yarn.lock

@@ -1589,10 +1589,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
   integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
 
-"@matrix-org/matrix-wysiwyg@^0.19.0":
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.19.0.tgz#5ffbabf8a59317ecdb45ba5fa1d06fff150ede40"
-  integrity sha512-1iL/+kjwWAlpWAq64DbkDkE7KGxvR5lNojZgCKMIyuvuKWv8Ikqxa9VOOYFtovKvSqgGRJaYN7/OkKWxZjiDcw==
+"@matrix-org/matrix-wysiwyg@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.20.0.tgz#6193f790b031eaa96e944b647fe2b27018639d57"
+  integrity sha512-9VqzyccwizglssShi/M+tCxdZDgzsecH4WjlS0HC5KkLmljIxxlHFstf/D3C/G4ZfRodFUh6wUvd+oQI/ScPpw==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"