Merge pull request #27 from chatwoot/fix/CW-3378-editor

chatwoot · Jun 7, 2024 · b36c2a0 · b36c2a0
2 parents c1e6104 + 60537bc
commit b36c2a0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/prosemirror-schema",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Schema setup for using prosemirror in chatwoot. Based on 👉 https://github.com/ProseMirror/prosemirror-example-setup/",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -23,11 +23,13 @@
   --space-medium: 24px;
   --space-large: 32px;
   --space-larger: 48px;
+  --space-big: 54px;
 
   --font-size-small: 14px;
   --font-size-default: 16px;
   --font-size-medium: 18px;
-  --font-size-large: 22px;
+  --font-size-large: 20px;
+  --font-size-larger: 22px;
   --font-size-big: 24px;
   --font-size-bigger: 3px;
 
@@ -37,6 +39,7 @@
   --font-weight-medium: 500;
   --font-weight-bold: 600;
   --font-weight-black: 700;
+  --font-weight-heavy: 800;
 
   --border-radius-small: 3px;
   --border-radius-medium: 7px;

diff --git a/src/styles/article.scss b/src/styles/article.scss
@@ -1,4 +1,4 @@
-@use 'base.scss';
+@use "base.scss";
 
 .editor-root.editor--article {
   position: relative;
@@ -17,7 +17,8 @@
   .ProseMirror {
     p {
       font-size: var(--font-size-medium);
-      line-height: 1.77;
+      line-height: 1.75rem;
+      margin-bottom: var(--space-medium);
     }
 
     strong code {
@@ -41,28 +42,36 @@
     }
 
     hr {
-      margin: var(--space-larger) 0;
       border-color: var(--s-100);
+      margin-bottom: var(--space-big);
     }
 
     h1 {
-      margin-bottom: var(--space-large);
+      font-size: var(--font-size-big);
+      font-weight: var(--font-weight-heavy);
+      margin-bottom: var(--space-medium);
     }
 
     h2 {
+      font-size: var(--font-size-large);
+      font-weight: var(--font-weight-black);
       margin-bottom: var(--space-medium);
     }
 
-    h3 {
+    h3,
+    h4 {
+      font-size: var(--font-size-medium);
+      font-weight: var(--font-weight-bold);
       margin-bottom: var(--space-normal);
     }
 
-    h4,
     h5 {
+      font-size: var(--font-size-medium);
       margin-bottom: var(--space-small);
     }
 
     h6 {
+      font-size: var(--font-size-medium);
       margin-bottom: var(--space-smaller);
     }
 
@@ -76,15 +85,26 @@
 
     ul,
     ol {
+      margin-top: var(--space-medium);
+      margin-bottom: var(--space-medium);
       padding-left: var(--space-large);
     }
 
-    pre {
-      padding: var(--space-normal);
-      margin-bottom: var(--space-normal);
+    li {
+      ul,
+      ol {
+        margin-top: var(--space-normal);
+        margin-bottom: var(--space-normal);
+      }
+      p {
+        padding-left: var(--space-medium);
+        margin-top: var(--space-small);
+        margin-bottom: var(--space-small);
+      }
     }
 
-    p {
+    pre {
+      padding: var(--space-normal);
       margin-bottom: var(--space-normal);
     }
   }