From 39f5fc034f82de7843c0570df5fa65226ac5c677 Mon Sep 17 00:00:00 2001 From: alunturner <56027671+alunturner@users.noreply.github.com> Date: Tue, 31 Jan 2023 09:45:34 +0000 Subject: [PATCH] Paragraph integration for rich text editor (#10008) * integrates paragraph refactor in rich text editor * minor CSS changes to accomodate this * bumps rich text editor version to 0.22.0 --- package.json | 2 +- res/css/views/rooms/_EventTile.pcss | 4 ++-- .../wysiwyg_composer/components/_Editor.pcss | 20 +++++++++++++------ yarn.lock | 8 ++++---- 4 files changed, 21 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index c5da640ee0..77ffbe56b6 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.20.0", + "@matrix-org/matrix-wysiwyg": "^0.22.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/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5d55e8bf34..72ee340d4f 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -639,8 +639,8 @@ $left-gutter: 64px; list-style-type: disc; } - /* Remove top and bottom margin for better consecutive list display */ - > :is(ol, ul) { + /* Remove top and bottom margin for better display in rich text editor output */ + :is(p, ol, ul) { margin-top: 0; margin-bottom: 0; } diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index cc805e1ac1..77e07ab48b 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -37,6 +37,20 @@ limitations under the License. user-select: all; } + // we always have a
tag at the end of the html, we need it to be present at first then hide it as soon as + // we have any other elements + br:not(:only-child) { + display: none; + } + + p { + margin-top: 0; + margin-bottom: 0; + // this may seem redundant, but we need to handle zero content formatting tags, which occur when we split a + // formatting tag into paragraphs + min-height: $font-22px; + } + ul, ol { margin-top: 0; @@ -56,12 +70,6 @@ limitations under the License. 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, blockquote) + br:last-of-type { - display: none; - } - > pre { font-size: $font-15px; line-height: $font-24px; diff --git a/yarn.lock b/yarn.lock index d9d770a033..21e3298a08 100644 --- a/yarn.lock +++ b/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.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/matrix-wysiwyg@^0.22.0": + version "0.22.0" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.22.0.tgz#53f1e80d9ae7be0940e0ca905a3952804b029b29" + integrity sha512-3b5jGMI56zcqZ2PktrSPMAbzfWmkdupuzcLeemWQ0fT8QuiG4dA72NUxdDyarlz+1eQ+Qm4fu9j/zsPlvNpy8g== "@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"