UBERF-60: updated Rich editor and Activity styles. (#3661)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/message/Nodes.svelte

@@ -73,9 +73,9 @@
     {:else if node.nodeName === 'BLOCKQUOTE'}
       <blockquote><svelte:self nodes={node.childNodes} /></blockquote>
     {:else if node.nodeName === 'CODE'}
-      <code><svelte:self nodes={node.childNodes} /></code>
+      <code class="proseCode"><svelte:self nodes={node.childNodes} /></code>
     {:else if node.nodeName === 'PRE'}
-      <pre><svelte:self nodes={node.childNodes} /></pre>
+      <pre class="proseCodeBlock"><svelte:self nodes={node.childNodes} /></pre>
     {:else if node.nodeName === 'BR'}
       {@const pName = prevName(ni, nodes)}
       {#if pName !== 'P' && pName !== 'BR' && pName !== undefined}
@@ -118,23 +118,20 @@
         </div>
       {/if}
     {:else if node.nodeName === 'SPAN'}
-      <span style:margin={'0 .25rem'} style={node.getAttribute('style')}>
-        <!-- <svelte:self nodes={node.childNodes} /> -->
-        {#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
-          <Component
-            is={view.component.ObjectPresenter}
-            inline
-            props={{
-              objectId: node.getAttribute('data-id'),
-              title: node.getAttribute('data-label'),
-              _class: correctClass(node.getAttribute('data-objectclass')),
-              inline: true
-            }}
-          />
-        {:else}
-          <svelte:self nodes={node.childNodes} />
-        {/if}
-      </span>
+      {#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
+        <Component
+          is={view.component.ObjectPresenter}
+          inline
+          props={{
+            objectId: node.getAttribute('data-id'),
+            title: node.getAttribute('data-label'),
+            _class: correctClass(node.getAttribute('data-objectclass')),
+            inline: true
+          }}
+        />
+      {:else}
+        <svelte:self nodes={node.childNodes} />
+      {/if}
     {:else if node.nodeName === 'TABLE'}
       <table class={node.className}><svelte:self nodes={node.childNodes} /></table>
     {:else if node.nodeName === 'TBODY'}
@@ -183,12 +180,4 @@
   s {
     color: var(--theme-accent-color);
   }
-  code {
-    padding: 0 0.25rem;
-    font-family: var(--mono-font);
-    color: var(--theme-content-color);
-    background-color: var(--theme-button-default);
-    border: 1px solid var(--theme-button-border);
-    border-radius: 0.25rem;
-  }
 </style>

packages/text-editor/src/components/ReferenceInput.svelte

@@ -275,7 +275,7 @@
     .textInput {
       display: flex;
       justify-content: space-between;
-      align-items: flex-start;
+      align-items: flex-end;
       min-height: 2.75rem;
       padding: 0.75rem 1rem;
       background-color: var(--theme-refinput-color);

packages/text-editor/src/components/extensions.ts

@@ -60,7 +60,10 @@ export const defaultExtensions: AnyExtension[] = [
       }
     },
     heading: {
-      levels: supportedHeadingLevels
+      levels: supportedHeadingLevels,
+      HTMLAttributes: {
+        class: 'proseHeading'
+      }
     }
   }),
   Highlight.configure({

packages/theme/styles/_layouts.scss

@@ -98,8 +98,8 @@ table {
 }
 
 li {
-  color: var(--dark-color);
-  p { color: var(--accent-color); }
+  color: var(--theme-content-color);
+  p { color: var(--theme-content-color); }
 }
 
 /* Common */

packages/theme/styles/_text-editor.scss

@@ -2,3 +2,26 @@
   cursor: pointer;
   object-fit: contain;
 }
+
+.proseH1 {
+  margin-block-start: 1.25rem;
+  margin-block-end: 1.25rem;
+  font-weight: 700;
+  font-size: 1.75rem;
+  // line-height: 1.75rem;
+  color: red;
+}
+.proseH2 {
+  margin-block-start: 1rem;
+  margin-block-end: 1.125rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  // line-height: 1.75rem;
+  color: green;
+}
+
+// need to override editor's bubble max-width
+// due to https://github.com/atomiks/tippyjs/issues/451
+// .tippy-box {
+//   max-width: 30rem !important;
+// }

packages/theme/styles/prose.scss

@@ -61,5 +61,17 @@ table.proseTable {
   background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: .25rem;
-  padding: 0.5rem;  
-}
+  padding: .5rem;
+
+  code { white-space: normal; }
+}
+
+// Fixes for MessageViewer
+pre.proseCodeBlock > code.proseCode {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.proseHeading { line-height: 110%; }