studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(frontend) format css blocknote editor

Browse Source 
We use the "css" function of style components
to format correctly the blocknote editor css.
This commit is contained in:
Anthony LC
2025-01-17 10:08:08 +01:00
committed by Anthony LC
parent e85b07021e
commit d406846986
1 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
View File

@@ -6,6 +6,7 @@ import { useCreateBlockNote } from '@blocknote/react';
import { HocuspocusProvider } from '@hocuspocus/provider'; import { HocuspocusProvider } from '@hocuspocus/provider';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import * as Y from 'yjs'; import * as Y from 'yjs';
import { Box, TextErrors } from '@/components'; import { Box, TextErrors } from '@/components';
@@ -20,17 +21,19 @@ import { randomColor } from '../utils';
import { BlockNoteToolbar } from './BlockNoteToolbar'; import { BlockNoteToolbar } from './BlockNoteToolbar';
const cssEditor = (readonly: boolean) => ` const cssEditor = (readonly: boolean) => css`
&, & > .bn-container, & .ProseMirror { &,
height:100%; & > .bn-container,
& .ProseMirror {
.bn-side-menu[data-block-type=heading][data-level="1"] { height: 100%;
height: 50px;
} .bn-side-menu[data-block-type='heading'][data-level='1'] {
.bn-side-menu[data-block-type=heading][data-level="2"] { height: 50px;
height: 43px; }
} .bn-side-menu[data-block-type='heading'][data-level='2'] {
.bn-side-menu[data-block-type=heading][data-level="3"] { height: 43px;
}
.bn-side-menu[data-block-type='heading'][data-level='3'] {
height: 35px; height: 35px;
} }
h1 { h1 {
@@ -52,11 +55,11 @@ const cssEditor = (readonly: boolean) => `
border-left: none; border-left: none;
} }
} }
.bn-editor { .bn-editor {
color: var(--c--theme--colors--greyscale-700); color: var(--c--theme--colors--greyscale-700);
} }
.bn-block-outer:not(:first-child) { .bn-block-outer:not(:first-child) {
&:has(h1) { &:has(h1) {
padding-top: 32px; padding-top: 32px;
@@ -67,25 +70,25 @@ const cssEditor = (readonly: boolean) => `
&:has(h3) { &:has(h3) {
padding-top: 16px; padding-top: 16px;
} }
}; }
& .bn-inline-content code { & .bn-inline-content code {
background-color: gainsboro; background-color: gainsboro;
padding: 2px; padding: 2px;
border-radius: 4px; border-radius: 4px;
} }
@media screen and (width <= 560px) { @media screen and (width <= 560px) {
& .bn-editor { & .bn-editor {
${readonly && `padding-left: 10px;`} ${readonly && `padding-left: 10px;`}
};
.bn-side-menu[data-block-type=heading][data-level="1"] {
height: 46px;
} }
.bn-side-menu[data-block-type=heading][data-level="2"] { .bn-side-menu[data-block-type='heading'][data-level='1'] {
height: 46px;
}
.bn-side-menu[data-block-type='heading'][data-level='2'] {
height: 40px; height: 40px;
} }
.bn-side-menu[data-block-type=heading][data-level="3"] { .bn-side-menu[data-block-type='heading'][data-level='3'] {
height: 40px; height: 40px;
} }
& .bn-editor h1 { & .bn-editor h1 {
@@ -97,7 +100,7 @@ const cssEditor = (readonly: boolean) => `
& .bn-editor h3 { & .bn-editor h3 {
font-size: 1.2rem; font-size: 1.2rem;
} }
.bn-block-content[data-is-empty-and-focused][data-content-type="paragraph"] .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
font-size: 14px; font-size: 14px;
} }