mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-21 13:49:55 -06:00
Code Issues Packages Projects Releases Wiki Activity

[PE-275] chore: editor line spacing variables (#6678)

Browse Source 
* chore: variable editor line spacing

* chore: variable list spacing

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Lakhan Baheti
2025-03-03 17:01:47 +05:30
committed by GitHub
parent 9bff707fb5
commit 7e62c60748
8 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/core/components/editors/editor-container.tsx
View File

@@ -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,
},

1
packages/editor/src/core/constants/config.ts
View File

@@ -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"];

4
packages/editor/src/core/extensions/core-without-props.ts
View File

@@ -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: {

4
packages/editor/src/core/extensions/extensions.tsx
View File

@@ -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: {

4
packages/editor/src/core/extensions/read-only-extensions.tsx
View File

@@ -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: {

3
packages/editor/src/core/types/config.ts
View File

@@ -23,7 +23,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;
};

34
packages/editor/src/styles/editor.css
View File

@@ -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,

44
packages/editor/src/styles/variables.css
View File

@@ -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 */
}