From 9dbc5f3773840bd91c0bb2fe4ebbecfa65535974 Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Fri, 20 Jan 2023 10:55:46 +0000
Subject: [PATCH] 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 | 2 +-
.../rooms/wysiwyg_composer/components/_Editor.pcss | 14 +++++++++++++-
res/img/element-icons/room/composer/quote.svg | 6 ++++++
.../components/FormattingButtons.tsx | 7 +++++++
.../components/FormattingButtons-test.tsx | 2 ++
yarn.lock | 8 ++++----
6 files changed, 33 insertions(+), 6 deletions(-)
create mode 100644 res/img/element-icons/room/composer/quote.svg
diff --git a/package.json b/package.json
index cb17d44351c..9a2c2b9265c 100644
--- a/package.json
+++ b/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",
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 21db71a774b..cc805e1ac1e 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/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;
}
diff --git a/res/img/element-icons/room/composer/quote.svg b/res/img/element-icons/room/composer/quote.svg
new file mode 100644
index 00000000000..82cc2d28752
--- /dev/null
+++ b/res/img/element-icons/room/composer/quote.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c80857b9f16..80f2563d1d8 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/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={}
/>
+