Add quotes to rich text editor (matrix-org#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

Author: artcodespace

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;
  }
 

res/img/element-icons/room/composer/quote.svg

@@ -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")}

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.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 => {

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

@@ -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"