style: updated margins and font styles for editor

packages/editor/src/core/extensions/core-without-props.ts

@@ -46,7 +46,7 @@ export const CoreEditorExtensionsWithoutProps = [
   CustomQuoteExtension,
   CustomHorizontalRule.configure({
     HTMLAttributes: {
-      class: "my-4 border-custom-border-400",
+      class: "py-4 border-custom-border-400",
     },
   }),
   CustomLinkExtension.configure({

packages/editor/src/core/extensions/extensions.tsx

@@ -78,7 +78,7 @@ export const CoreEditorExtensions = (args: TArguments) => {
     DropHandlerExtension(),
     CustomHorizontalRule.configure({
       HTMLAttributes: {
-        class: "my-4 border-custom-border-400",
+        class: "py-4 border-custom-border-400",
       },
     }),
     CustomKeymap,

packages/editor/src/core/extensions/read-only-extensions.tsx

@@ -67,7 +67,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
     CustomQuoteExtension,
     CustomHorizontalRule.configure({
       HTMLAttributes: {
-        class: "my-4 border-custom-border-400",
+        class: "py-4 border-custom-border-400",
       },
     }),
     CustomLinkExtension.configure({

packages/editor/src/styles/editor.css

@@ -12,7 +12,7 @@
   cursor: text;
   font-family: var(--font-style);
   font-size: var(--font-size-regular);
-  line-height: 1.2;
+  font-weight: 400;
   color: inherit;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -248,11 +248,6 @@ div[data-type="horizontalRule"] {
   }
 }
 
-/* image resizer */
-.moveable-control-box {
-  z-index: 10 !important;
-}
-
 /* Cursor styles for the inline code blocks */
 @keyframes blink {
   49% {
@@ -314,88 +309,108 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 }
 /* end numbered, bulleted and to-do lists spacing */
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0 !important;
+}
+
 /* tailwind typography */
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 2rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 4px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h1);
   line-height: var(--line-height-h1);
   font-weight: 600;
 }
 
 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1.4rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h2);
   line-height: var(--line-height-h2);
   font-weight: 600;
 }
 
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h3);
   line-height: var(--line-height-h3);
   font-weight: 600;
 }
 
 .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h4);
   line-height: var(--line-height-h4);
   font-weight: 600;
 }
 
 .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 20px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h5);
   line-height: var(--line-height-h5);
   font-weight: 600;
 }
 
 .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 20px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h6);
   line-height: var(--line-height-h6);
   font-weight: 600;
 }
 
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:first-child {
+    padding-top: 0;
+  }
+
   &:not(:first-child) {
-    margin-top: 0.25rem;
+    padding-top: 4px;
   }
 
-  &:first-child {
-    margin-top: 0;
+  &:last-child {
+    padding-bottom: 4px;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 8px;
   }
 
-  margin-bottom: 1px;
-  padding: 3px 0;
   font-size: var(--font-size-regular);
   line-height: var(--line-height-regular);
 }
 
+p + p {
+  padding-top: 8px !important;
+}
+
 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
 .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
   font-size: var(--font-size-list);
@@ -432,11 +447,6 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 [data-text-color="purple"] {
   color: var(--editor-colors-purple-text);
 }
-/* [data-text-color="pink-blue-gradient"] {
-  background-clip: text;
-  color: transparent;
-  background-image: linear-gradient(90deg, #a961cd 50%, #e75962 100%);
-} */
 /* end text colors */
 
 /* background colors */

packages/editor/src/styles/variables.css

@@ -46,8 +46,8 @@
     --font-size-h5: 1.125rem;
     --font-size-h6: 1rem;
     --font-size-regular: 1rem;
+    --font-size-code: 0.85rem;
     --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
 
     --line-height-h1: 2.25rem;
     --line-height-h2: 2rem;
@@ -56,8 +56,8 @@
     --line-height-h5: 1.5rem;
     --line-height-h6: 1.5rem;
     --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
     --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
   }
   &.small-font {
     --font-size-h1: 1.4rem;
@@ -67,8 +67,8 @@
     --font-size-h5: 0.9rem;
     --font-size-h6: 0.8rem;
     --font-size-regular: 0.8rem;
+    --font-size-code: 0.8rem;
     --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
 
     --line-height-h1: 1.8rem;
     --line-height-h2: 1.6rem;
@@ -77,8 +77,8 @@
     --line-height-h5: 1.2rem;
     --line-height-h6: 1.2rem;
     --line-height-regular: 1.2rem;
+    --line-height-code: 1.2rem;
     --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
   }
   /* end font sizes and line heights */
 

web/core/components/pages/editor/title.tsx

@@ -25,9 +25,9 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   // page filters
   const { fontSize } = usePageFilters();
   // ui
-  const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
-    "text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
-    "text-[2rem] leading-[2.25rem]": fontSize === "large-font",
+  const titleClassName = cn("bg-transparent tracking-[-2%] font-bold", {
+    "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
+    "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
   });
 
   return (