[PE-275] chore: editor line spacing variables

packages/editor/src/core/components/editors/editor-container.tsx

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from "react";
 import { Editor } from "@tiptap/react";
+import { FC, ReactNode } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
@@ -71,7 +71,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
       onClick={handleContainerClick}
       onMouseLeave={handleContainerMouseLeave}
       className={cn(
-        "editor-container cursor-text relative",
+        `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
         {
           "active-editor": editor?.isFocused && editor?.isEditable,
         },

packages/editor/src/core/constants/config.ts

@@ -4,6 +4,7 @@ import { TDisplayConfig } from "@/types";
 export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
   fontSize: "large-font",
   fontStyle: "sans-serif",
+  lineSpacing: "regular",
 };
 
 export const ACCEPTED_FILE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];

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

@@ -26,12 +26,12 @@ export const CoreEditorExtensionsWithoutProps = [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
-        class: "list-disc pl-7 space-y-2",
+        class: "list-disc pl-7 space-y-[--list-spacing-y]",
       },
     },
     orderedList: {
       HTMLAttributes: {
-        class: "list-decimal pl-7 space-y-2",
+        class: "list-decimal pl-7 space-y-[--list-spacing-y]",
       },
     },
     listItem: {

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

@@ -55,12 +55,12 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     StarterKit.configure({
       bulletList: {
         HTMLAttributes: {
-          class: "list-disc pl-7 space-y-2",
+          class: "list-disc pl-7 space-y-[--list-spacing-y]",
         },
       },
       orderedList: {
         HTMLAttributes: {
-          class: "list-decimal pl-7 space-y-2",
+          class: "list-decimal pl-7 space-y-[--list-spacing-y]",
         },
       },
       listItem: {

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

@@ -46,12 +46,12 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     StarterKit.configure({
       bulletList: {
         HTMLAttributes: {
-          class: "list-disc pl-7 space-y-2",
+          class: "list-disc pl-7 space-y-[--list-spacing-y]",
         },
       },
       orderedList: {
         HTMLAttributes: {
-          class: "list-decimal pl-7 space-y-2",
+          class: "list-decimal pl-7 space-y-[--list-spacing-y]",
         },
       },
       listItem: {

packages/editor/src/core/types/config.ts

@@ -19,7 +19,10 @@ export type TEditorFontStyle = "sans-serif" | "serif" | "monospace";
 
 export type TEditorFontSize = "small-font" | "large-font";
 
+export type TEditorLineSpacing = "regular" | "small";
+
 export type TDisplayConfig = {
   fontStyle?: TEditorFontStyle;
   fontSize?: TEditorFontSize;
+  lineSpacing?: TEditorLineSpacing;
 };

packages/editor/src/styles/editor.css

@@ -252,7 +252,7 @@ ul[data-type="taskList"] li[data-checked="true"] {
 
 div[data-type="horizontalRule"] {
   line-height: 0;
-  padding: 0.25rem 0;
+  padding: var(--divider-padding-top) 0 var(--divider-padding-bottom) 0;
   margin-top: 0;
   margin-bottom: 0;
 
@@ -335,65 +335,65 @@ p.editor-paragraph-block {
 /* tailwind typography */
 .prose :where(h1.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 28px;
+    padding-top: var(--heading-1-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-1-padding-bottom);
   font-size: var(--font-size-h1);
   line-height: var(--line-height-h1);
   font-weight: 600;
 }
 
 .prose :where(h2.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 28px;
+    padding-top: var(--heading-2-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-2-padding-bottom);
   font-size: var(--font-size-h2);
   line-height: var(--line-height-h2);
   font-weight: 600;
 }
 
 .prose :where(h3.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 28px;
+    padding-top: var(--heading-3-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-3-padding-bottom);
   font-size: var(--font-size-h3);
   line-height: var(--line-height-h3);
   font-weight: 600;
 }
 
 .prose :where(h4.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 28px;
+    padding-top: var(--heading-4-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-4-padding-bottom);
   font-size: var(--font-size-h4);
   line-height: var(--line-height-h4);
   font-weight: 600;
 }
 
 .prose :where(h5.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 20px;
+    padding-top: var(--heading-5-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-5-padding-bottom);
   font-size: var(--font-size-h5);
   line-height: var(--line-height-h5);
   font-weight: 600;
 }
 
 .prose :where(h6.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    padding-top: 20px;
+    padding-top: var(--heading-6-padding-top);
   }
 
-  padding-bottom: 4px;
+  padding-bottom: var(--heading-6-padding-bottom);
   font-size: var(--font-size-h6);
   line-height: var(--line-height-h6);
   font-weight: 600;
@@ -405,16 +405,16 @@ p.editor-paragraph-block {
   }
 
   &:not(:first-child) {
-    padding-top: 4px;
+    padding-top: var(--paragraph-padding-top);
   }
 
   &:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
     &:last-child {
-      padding-bottom: 4px;
+      padding-bottom: var(--paragraph-padding-bottom);
     }
 
     &:not(:last-child) {
-      padding-bottom: 8px;
+      padding-bottom: var(--paragraph-padding-between);
     }
   }
 
@@ -423,7 +423,7 @@ p.editor-paragraph-block {
 }
 
 p.editor-paragraph-block + p.editor-paragraph-block {
-  padding-top: 8px !important;
+  padding-top: var(--paragraph-padding-between) !important;
 }
 
 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block,

packages/editor/src/styles/variables.css

@@ -57,4 +57,48 @@
     --font-style: monospace;
   }
   /* end font styles */
+
+  /* spacing */
+  &.line-spacing-regular {
+    --heading-1-padding-top: 28px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 28px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 28px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 28px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 20px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 20px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 4px;
+    --paragraph-padding-bottom: 4px;
+    --paragraph-padding-between: 8px;
+    --list-spacing-y: 8px;
+    --divider-padding-top: 4px;
+    --divider-padding-bottom: 4px;
+  }
+
+  &.line-spacing-small {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
+  /* end spacing */
 }