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

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.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",

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

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

@@ -37,6 +37,20 @@ limitations under the License.
             user-select: all;
         }
 
+        // we always have a <br/> 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;

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"