Skip to content

Commit 0cfc242

Browse files
AntoLCAntoLC
committed
🚚(frontend) move Blocknote styles
Move Blocknote styles to a separate file.
1 parent a6b3cfd commit 0cfc242

File tree

2 files changed

+121
-122
lines changed

2 files changed

+121
-122
lines changed

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

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

1716
import { Box, TextErrors } from '@/components';
@@ -22,132 +21,12 @@ import { useUploadFile } from '../hook';
2221
import { useHeadings } from '../hook/useHeadings';
2322
import useSaveDoc from '../hook/useSaveDoc';
2423
import { useEditorStore } from '../stores';
24+
import { cssEditor } from '../styles';
2525
import { randomColor } from '../utils';
2626

2727
import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
2828
import { BlockNoteToolbar } from './BlockNoteToolbar';
2929

30-
const cssEditor = (readonly: boolean) => css`
31-
&,
32-
& > .bn-container,
33-
& .ProseMirror {
34-
height: 100%;
35-
36-
.collaboration-cursor-custom__base {
37-
position: relative;
38-
}
39-
.collaboration-cursor-custom__caret {
40-
position: absolute;
41-
height: 85%;
42-
width: 2px;
43-
bottom: 4%;
44-
left: -1px;
45-
}
46-
47-
.collaboration-cursor-custom__label {
48-
color: #0d0d0d;
49-
font-size: 12px;
50-
font-weight: 600;
51-
-webkit-user-select: none;
52-
-moz-user-select: none;
53-
user-select: none;
54-
position: absolute;
55-
top: -17px;
56-
padding: 0px 6px;
57-
border-radius: 0px;
58-
white-space: nowrap;
59-
transition: clip-path 0.3s ease-in-out;
60-
border-radius: 4px 4px 4px 0;
61-
box-shadow: inset -2px 2px 6px #ffffff88;
62-
clip-path: polygon(0 100%, 0 100%, 0 100%, 0% 100%);
63-
}
64-
65-
.collaboration-cursor-custom__base[data-active]
66-
.collaboration-cursor-custom__label {
67-
pointer-events: none;
68-
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
69-
}
70-
71-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
72-
height: 50px;
73-
}
74-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
75-
height: 43px;
76-
}
77-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
78-
height: 35px;
79-
}
80-
h1 {
81-
font-size: 1.875rem;
82-
}
83-
h2 {
84-
font-size: 1.5rem;
85-
}
86-
h3 {
87-
font-size: 1.25rem;
88-
}
89-
a {
90-
color: var(--c--theme--colors--greyscale-500);
91-
cursor: pointer;
92-
}
93-
.bn-block-group
94-
.bn-block-group
95-
.bn-block-outer:not([data-prev-depth-changed]):before {
96-
border-left: none;
97-
}
98-
}
99-
100-
.bn-editor {
101-
color: var(--c--theme--colors--greyscale-700);
102-
}
103-
104-
.bn-block-outer:not(:first-child) {
105-
&:has(h1) {
106-
padding-top: 32px;
107-
}
108-
&:has(h2) {
109-
padding-top: 24px;
110-
}
111-
&:has(h3) {
112-
padding-top: 16px;
113-
}
114-
}
115-
116-
& .bn-inline-content code {
117-
background-color: gainsboro;
118-
padding: 2px;
119-
border-radius: 4px;
120-
}
121-
122-
@media screen and (width <= 560px) {
123-
& .bn-editor {
124-
${readonly && `padding-left: 10px;`}
125-
}
126-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
127-
height: 46px;
128-
}
129-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
130-
height: 40px;
131-
}
132-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
133-
height: 40px;
134-
}
135-
& .bn-editor h1 {
136-
font-size: 1.6rem;
137-
}
138-
& .bn-editor h2 {
139-
font-size: 1.35rem;
140-
}
141-
& .bn-editor h3 {
142-
font-size: 1.2rem;
143-
}
144-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
145-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
146-
font-size: 14px;
147-
}
148-
}
149-
`;
150-
15130
export const blockNoteSchema = withPageBreak(BlockNoteSchema.create());
15231

15332
interface BlockNoteEditorProps {

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

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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+
.collaboration-cursor-custom__base {
10+
position: relative;
11+
}
12+
.collaboration-cursor-custom__caret {
13+
position: absolute;
14+
height: 85%;
15+
width: 2px;
16+
bottom: 4%;
17+
left: -1px;
18+
}
19+
.collaboration-cursor-custom__label {
20+
color: #0d0d0d;
21+
font-size: 12px;
22+
font-weight: 600;
23+
-webkit-user-select: none;
24+
-moz-user-select: none;
25+
user-select: none;
26+
position: absolute;
27+
top: -17px;
28+
padding: 0px 6px;
29+
border-radius: 0px;
30+
white-space: nowrap;
31+
transition: clip-path 0.3s ease-in-out;
32+
border-radius: 4px 4px 4px 0;
33+
box-shadow: inset -2px 2px 6px #ffffff88;
34+
clip-path: polygon(0 100%, 0 100%, 0 100%, 0% 100%);
35+
}
36+
.collaboration-cursor-custom__base[data-active]
37+
.collaboration-cursor-custom__label {
38+
pointer-events: none;
39+
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
40+
}
41+
42+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
43+
height: 50px;
44+
}
45+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
46+
height: 43px;
47+
}
48+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
49+
height: 35px;
50+
}
51+
h1 {
52+
font-size: 1.875rem;
53+
}
54+
h2 {
55+
font-size: 1.5rem;
56+
}
57+
h3 {
58+
font-size: 1.25rem;
59+
}
60+
a {
61+
color: var(--c--theme--colors--greyscale-500);
62+
cursor: pointer;
63+
}
64+
.bn-block-group
65+
.bn-block-group
66+
.bn-block-outer:not([data-prev-depth-changed]):before {
67+
border-left: none;
68+
}
69+
}
70+
71+
.bn-editor {
72+
color: var(--c--theme--colors--greyscale-700);
73+
}
74+
75+
.bn-block-outer:not(:first-child) {
76+
&:has(h1) {
77+
padding-top: 32px;
78+
}
79+
&:has(h2) {
80+
padding-top: 24px;
81+
}
82+
&:has(h3) {
83+
padding-top: 16px;
84+
}
85+
}
86+
87+
& .bn-inline-content code {
88+
background-color: gainsboro;
89+
padding: 2px;
90+
border-radius: 4px;
91+
}
92+
93+
@media screen and (width <= 560px) {
94+
& .bn-editor {
95+
${readonly && `padding-left: 10px;`}
96+
}
97+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
98+
height: 46px;
99+
}
100+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
101+
height: 40px;
102+
}
103+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
104+
height: 40px;
105+
}
106+
& .bn-editor h1 {
107+
font-size: 1.6rem;
108+
}
109+
& .bn-editor h2 {
110+
font-size: 1.35rem;
111+
}
112+
& .bn-editor h3 {
113+
font-size: 1.2rem;
114+
}
115+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
116+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
117+
font-size: 14px;
118+
}
119+
}
120+
`;

0 commit comments

Comments
 (0)