Skip to content

Commit 97eb8d4

Browse files
aaryan610aaryan610
authored
style: updated margins and font styles for editor (#5978)
* style: updated margins and font styles for editor * fix: code block font size in small font * fix: remove duplicate code
1 parent 1217af1 commit 97eb8d4

File tree

6 files changed

+48
-38
lines changed

6 files changed

+48
-38
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const CoreEditorExtensionsWithoutProps = [
4646
CustomQuoteExtension,
4747
CustomHorizontalRule.configure({
4848
HTMLAttributes: {
49-
class: "my-4 border-custom-border-400",
49+
class: "py-4 border-custom-border-400",
5050
},
5151
}),
5252
CustomLinkExtension.configure({

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const CoreEditorExtensions = (args: TArguments) => {
7878
DropHandlerExtension(),
7979
CustomHorizontalRule.configure({
8080
HTMLAttributes: {
81-
class: "my-4 border-custom-border-400",
81+
class: "py-4 border-custom-border-400",
8282
},
8383
}),
8484
CustomKeymap,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
6767
CustomQuoteExtension,
6868
CustomHorizontalRule.configure({
6969
HTMLAttributes: {
70-
class: "my-4 border-custom-border-400",
70+
class: "py-4 border-custom-border-400",
7171
},
7272
}),
7373
CustomLinkExtension.configure({

‎packages/editor/src/styles/editor.css‎

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
cursor: text;
1313
font-family: var(--font-style);
1414
font-size: var(--font-size-regular);
15-
line-height: 1.2;
15+
font-weight: 400;
1616
color: inherit;
1717
-moz-box-sizing: border-box;
1818
box-sizing: border-box;
@@ -248,11 +248,6 @@ div[data-type="horizontalRule"] {
248248
}
249249
}
250250

251-
/* image resizer */
252-
.moveable-control-box {
253-
z-index: 10 !important;
254-
}
255-
256251
/* Cursor styles for the inline code blocks */
257252
@keyframes blink {
258253
49% {
@@ -314,88 +309,108 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
314309
}
315310
/* end numbered, bulleted and to-do lists spacing */
316311

312+
h1,
313+
h2,
314+
h3,
315+
h4,
316+
h5,
317+
h6,
318+
p {
319+
margin: 0 !important;
320+
}
321+
317322
/* tailwind typography */
318323
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
319324
&:not(:first-child) {
320-
margin-top: 2rem;
325+
padding-top: 28px;
321326
}
322327

323-
margin-bottom: 4px;
328+
padding-bottom: 4px;
324329
font-size: var(--font-size-h1);
325330
line-height: var(--line-height-h1);
326331
font-weight: 600;
327332
}
328333

329334
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
330335
&:not(:first-child) {
331-
margin-top: 1.4rem;
336+
padding-top: 28px;
332337
}
333338

334-
margin-bottom: 1px;
339+
padding-bottom: 4px;
335340
font-size: var(--font-size-h2);
336341
line-height: var(--line-height-h2);
337342
font-weight: 600;
338343
}
339344

340345
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
341346
&:not(:first-child) {
342-
margin-top: 1rem;
347+
padding-top: 28px;
343348
}
344349

345-
margin-bottom: 1px;
350+
padding-bottom: 4px;
346351
font-size: var(--font-size-h3);
347352
line-height: var(--line-height-h3);
348353
font-weight: 600;
349354
}
350355

351356
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
352357
&:not(:first-child) {
353-
margin-top: 1rem;
358+
padding-top: 28px;
354359
}
355360

356-
margin-bottom: 1px;
361+
padding-bottom: 4px;
357362
font-size: var(--font-size-h4);
358363
line-height: var(--line-height-h4);
359364
font-weight: 600;
360365
}
361366

362367
.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
363368
&:not(:first-child) {
364-
margin-top: 1rem;
369+
padding-top: 20px;
365370
}
366371

367-
margin-bottom: 1px;
372+
padding-bottom: 4px;
368373
font-size: var(--font-size-h5);
369374
line-height: var(--line-height-h5);
370375
font-weight: 600;
371376
}
372377

373378
.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
374379
&:not(:first-child) {
375-
margin-top: 1rem;
380+
padding-top: 20px;
376381
}
377382

378-
margin-bottom: 1px;
383+
padding-bottom: 4px;
379384
font-size: var(--font-size-h6);
380385
line-height: var(--line-height-h6);
381386
font-weight: 600;
382387
}
383388

384389
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
390+
&:first-child {
391+
padding-top: 0;
392+
}
393+
385394
&:not(:first-child) {
386-
margin-top: 0.25rem;
395+
padding-top: 4px;
387396
}
388397

389-
&:first-child {
390-
margin-top: 0;
398+
&:last-child {
399+
padding-bottom: 4px;
400+
}
401+
402+
&:not(:last-child) {
403+
padding-bottom: 8px;
391404
}
392405

393-
margin-bottom: 1px;
394-
padding: 3px 0;
395406
font-size: var(--font-size-regular);
396407
line-height: var(--line-height-regular);
397408
}
398409

410+
p + p {
411+
padding-top: 8px !important;
412+
}
413+
399414
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
400415
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
401416
font-size: var(--font-size-list);
@@ -432,11 +447,6 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
432447
[data-text-color="purple"] {
433448
color: var(--editor-colors-purple-text);
434449
}
435-
/* [data-text-color="pink-blue-gradient"] {
436-
background-clip: text;
437-
color: transparent;
438-
background-image: linear-gradient(90deg, #a961cd 50%, #e75962 100%);
439-
} */
440450
/* end text colors */
441451

442452
/* background colors */

‎packages/editor/src/styles/variables.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
--font-size-h5: 1.125rem;
4747
--font-size-h6: 1rem;
4848
--font-size-regular: 1rem;
49+
--font-size-code: 0.85rem;
4950
--font-size-list: var(--font-size-regular);
50-
--font-size-code: var(--font-size-regular);
5151

5252
--line-height-h1: 2.25rem;
5353
--line-height-h2: 2rem;
@@ -56,8 +56,8 @@
5656
--line-height-h5: 1.5rem;
5757
--line-height-h6: 1.5rem;
5858
--line-height-regular: 1.5rem;
59+
--line-height-code: 1.5rem;
5960
--line-height-list: var(--line-height-regular);
60-
--line-height-code: var(--line-height-regular);
6161
}
6262
&.small-font {
6363
--font-size-h1: 1.4rem;
@@ -67,8 +67,8 @@
6767
--font-size-h5: 0.9rem;
6868
--font-size-h6: 0.8rem;
6969
--font-size-regular: 0.8rem;
70+
--font-size-code: 0.8rem;
7071
--font-size-list: var(--font-size-regular);
71-
--font-size-code: var(--font-size-regular);
7272

7373
--line-height-h1: 1.8rem;
7474
--line-height-h2: 1.6rem;
@@ -77,8 +77,8 @@
7777
--line-height-h5: 1.2rem;
7878
--line-height-h6: 1.2rem;
7979
--line-height-regular: 1.2rem;
80+
--line-height-code: 1.2rem;
8081
--line-height-list: var(--line-height-regular);
81-
--line-height-code: var(--line-height-regular);
8282
}
8383
/* end font sizes and line heights */
8484

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
2525
// page filters
2626
const { fontSize } = usePageFilters();
2727
// ui
28-
const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
29-
"text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
30-
"text-[2rem] leading-[2.25rem]": fontSize === "large-font",
28+
const titleClassName = cn("bg-transparent tracking-[-2%] font-bold", {
29+
"text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
30+
"text-[2rem] leading-[2.375rem]": fontSize === "large-font",
3131
});
3232

3333
return (

0 commit comments

Comments
 (0)