binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: updated margins and font styles for editor (#5978)

Browse source 
* style: updated margins and font styles for editor

* fix: code block font size in small font

* fix: remove duplicate code
This commit is contained in:
Aaryan Khandelwal 2024-11-11 16:10:47 +05:30 • committed by GitHub
parent 1217af1d5f
commit 97eb8d43d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 50 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/core/extensions/core-without-props.ts
View file

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

2
packages/editor/src/core/extensions/extensions.tsx
View file

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

2
packages/editor/src/core/extensions/read-only-extensions.tsx
View file

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

70
packages/editor/src/styles/editor.css
View file

@ -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,13 +309,23 @@ 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;
@ -328,10 +333,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.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;
@ -339,10 +344,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.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;
@ -350,10 +355,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.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;
@ -361,10 +366,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.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;
@ -372,30 +377,40 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.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"] *)) {
&:not(:first-child) {
margin-top: 0.25rem;
}
&:first-child {
margin-top: 0;
padding-top: 0;
}
&:not(:first-child) {
padding-top: 4px;
}
&: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 */

8
packages/editor/src/styles/variables.css
View file

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