Skip to content

Commit 0815af4

Browse files
AntoLCAntoLC
committed
🚚(frontend) move Blocknote styles
Move Blocknote styles to separate file.
1 parent bf0b159 commit 0815af4

File tree

2 files changed

+97
-96
lines changed

2 files changed

+97
-96
lines changed

‎src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

Lines changed: 1 addition & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { useCreateBlockNote } from '@blocknote/react';
1212
import { HocuspocusProvider } from '@hocuspocus/provider';
1313
import { useEffect } from 'react';
1414
import { useTranslation } from 'react-i18next';
15-
import { css } from 'styled-components';
1615
import * as Y from 'yjs';
1716

1817
import { Box, TextErrors } from '@/components';
@@ -23,107 +22,13 @@ import { useUploadFile } from '../hook';
2322
import { useHeadings } from '../hook/useHeadings';
2423
import useSaveDoc from '../hook/useSaveDoc';
2524
import { useEditorStore } from '../stores';
25+
import { cssEditor } from '../styles';
2626
import { randomColor } from '../utils';
2727

2828
import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
2929
import { BlockNoteToolbar } from './BlockNoteToolbar';
3030
import { AlertBlock, DividerBlock, QuoteBlock } from './custom-blocks';
3131

32-
const cssEditor = (readonly: boolean) => css`
33-
&,
34-
& > .bn-container,
35-
& .ProseMirror {
36-
height: 100%;
37-
38-
.bn-side-menu[data-block-type='alert'] {
39-
height: 55px;
40-
}
41-
.bn-side-menu[data-block-type='divider'] {
42-
height: 40px;
43-
}
44-
.bn-side-menu[data-block-type='quote'] {
45-
height: 46px;
46-
}
47-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
48-
height: 50px;
49-
}
50-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
51-
height: 43px;
52-
}
53-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
54-
height: 35px;
55-
}
56-
h1 {
57-
font-size: 1.875rem;
58-
}
59-
h2 {
60-
font-size: 1.5rem;
61-
}
62-
h3 {
63-
font-size: 1.25rem;
64-
}
65-
a {
66-
color: var(--c--theme--colors--greyscale-500);
67-
cursor: pointer;
68-
}
69-
.bn-block-group
70-
.bn-block-group
71-
.bn-block-outer:not([data-prev-depth-changed]):before {
72-
border-left: none;
73-
}
74-
}
75-
76-
.bn-editor {
77-
color: var(--c--theme--colors--greyscale-700);
78-
}
79-
80-
.bn-block-outer:not(:first-child) {
81-
&:has(h1) {
82-
padding-top: 32px;
83-
}
84-
&:has(h2) {
85-
padding-top: 24px;
86-
}
87-
&:has(h3) {
88-
padding-top: 16px;
89-
}
90-
}
91-
92-
& .bn-inline-content code {
93-
background-color: gainsboro;
94-
padding: 2px;
95-
border-radius: 4px;
96-
}
97-
98-
@media screen and (width <= 560px) {
99-
& .bn-editor {
100-
${readonly && `padding-left: 10px;`}
101-
}
102-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
103-
height: 46px;
104-
}
105-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
106-
height: 40px;
107-
}
108-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
109-
height: 40px;
110-
}
111-
& .bn-editor h1 {
112-
font-size: 1.6rem;
113-
}
114-
& .bn-editor h2 {
115-
font-size: 1.35rem;
116-
}
117-
& .bn-editor h3 {
118-
font-size: 1.2rem;
119-
}
120-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
121-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
122-
font-size: 14px;
123-
}
124-
}
125-
`;
126-
12732
export const schema = BlockNoteSchema.create({
12833
blockSpecs: {
12934
...defaultBlockSpecs,

‎src/frontend/apps/impress/src/features/docs/doc-editor/styles.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { css } from 'styled-components';
2+
3+
export const cssEditor = (readonly: boolean) => css`
4+
&,
5+
& > .bn-container,
6+
& .ProseMirror {
7+
height: 100%;
8+
9+
.bn-side-menu[data-block-type='alert'] {
10+
height: 55px;
11+
}
12+
.bn-side-menu[data-block-type='divider'] {
13+
height: 40px;
14+
}
15+
.bn-side-menu[data-block-type='quote'] {
16+
height: 46px;
17+
}
18+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
19+
height: 50px;
20+
}
21+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
22+
height: 43px;
23+
}
24+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
25+
height: 35px;
26+
}
27+
h1 {
28+
font-size: 1.875rem;
29+
}
30+
h2 {
31+
font-size: 1.5rem;
32+
}
33+
h3 {
34+
font-size: 1.25rem;
35+
}
36+
a {
37+
color: var(--c--theme--colors--greyscale-500);
38+
cursor: pointer;
39+
}
40+
.bn-block-group
41+
.bn-block-group
42+
.bn-block-outer:not([data-prev-depth-changed]):before {
43+
border-left: none;
44+
}
45+
}
46+
47+
.bn-editor {
48+
color: var(--c--theme--colors--greyscale-700);
49+
}
50+
51+
.bn-block-outer:not(:first-child) {
52+
&:has(h1) {
53+
padding-top: 32px;
54+
}
55+
&:has(h2) {
56+
padding-top: 24px;
57+
}
58+
&:has(h3) {
59+
padding-top: 16px;
60+
}
61+
}
62+
63+
& .bn-inline-content code {
64+
background-color: gainsboro;
65+
padding: 2px;
66+
border-radius: 4px;
67+
}
68+
69+
@media screen and (width <= 560px) {
70+
& .bn-editor {
71+
${readonly && `padding-left: 10px;`}
72+
}
73+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
74+
height: 46px;
75+
}
76+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
77+
height: 40px;
78+
}
79+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
80+
height: 40px;
81+
}
82+
& .bn-editor h1 {
83+
font-size: 1.6rem;
84+
}
85+
& .bn-editor h2 {
86+
font-size: 1.35rem;
87+
}
88+
& .bn-editor h3 {
89+
font-size: 1.2rem;
90+
}
91+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
92+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
93+
font-size: 14px;
94+
}
95+
}
96+
`;

0 commit comments

Comments
 (0)