From dee6c613cba94f230ae875412b750b0079c90fde Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 7 Feb 2025 21:12:39 +0530 Subject: [PATCH 1/2] chore: variable editor line spacing --- .../components/editors/editor-container.tsx | 4 +- packages/editor/src/core/constants/config.ts | 1 + packages/editor/src/core/types/config.ts | 3 ++ packages/editor/src/styles/editor.css | 34 +++++++-------- packages/editor/src/styles/variables.css | 42 +++++++++++++++++++ 5 files changed, 65 insertions(+), 19 deletions(-) diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx index d6563f7b085..b742a526526 100644 --- a/packages/editor/src/core/components/editors/editor-container.tsx +++ b/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 = (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, }, diff --git a/packages/editor/src/core/constants/config.ts b/packages/editor/src/core/constants/config.ts index bd4712de99a..788454f9639 100644 --- a/packages/editor/src/core/constants/config.ts +++ b/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"]; diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts index 3bb4d1af292..19eb214862b 100644 --- a/packages/editor/src/core/types/config.ts +++ b/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; }; diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css index 69bb61961b1..be686a5cc77 100644 --- a/packages/editor/src/styles/editor.css +++ b/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,10 +335,10 @@ 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; @@ -346,10 +346,10 @@ p.editor-paragraph-block { .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; @@ -357,10 +357,10 @@ p.editor-paragraph-block { .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; @@ -368,10 +368,10 @@ p.editor-paragraph-block { .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; @@ -379,10 +379,10 @@ p.editor-paragraph-block { .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; @@ -390,10 +390,10 @@ p.editor-paragraph-block { .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, diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css index 66880f1560f..147e75fd941 100644 --- a/packages/editor/src/styles/variables.css +++ b/packages/editor/src/styles/variables.css @@ -57,4 +57,46 @@ --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; + --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: 4px; + --paragraph-padding-bottom: 4px; + --paragraph-padding-between: 8px; + --divider-padding-top: 4px; + --divider-padding-bottom: 4px; + } + /* end spacing */ } From 6f0695dc777b0817254d45f7d55e8a82abd643cd Mon Sep 17 00:00:00 2001 From: Lakhan Date: Tue, 25 Feb 2025 18:48:03 +0530 Subject: [PATCH 2/2] chore: variable list spacing --- .../editor/src/core/extensions/core-without-props.ts | 4 ++-- packages/editor/src/core/extensions/extensions.tsx | 4 ++-- .../src/core/extensions/read-only-extensions.tsx | 4 ++-- packages/editor/src/styles/variables.css | 10 ++++++---- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts index 8864f49f703..9bad7a5c744 100644 --- a/packages/editor/src/core/extensions/core-without-props.ts +++ b/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: { diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx index 0b772baf9db..e06760cc1ef 100644 --- a/packages/editor/src/core/extensions/extensions.tsx +++ b/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: { diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx index e39973f9c90..027fb3561a5 100644 --- a/packages/editor/src/core/extensions/read-only-extensions.tsx +++ b/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: { diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css index 147e75fd941..ea70fe1ab87 100644 --- a/packages/editor/src/styles/variables.css +++ b/packages/editor/src/styles/variables.css @@ -75,6 +75,7 @@ --paragraph-padding-top: 4px; --paragraph-padding-bottom: 4px; --paragraph-padding-between: 8px; + --list-spacing-y: 8px; --divider-padding-top: 4px; --divider-padding-bottom: 4px; } @@ -92,10 +93,11 @@ --heading-5-padding-bottom: 4px; --heading-6-padding-top: 12px; --heading-6-padding-bottom: 4px; - --paragraph-padding-top: 4px; - --paragraph-padding-bottom: 4px; - --paragraph-padding-between: 8px; - --divider-padding-top: 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 */