🚚(frontend) move Blocknote styles

Move Blocknote styles to separate file.
suitenumerique · Feb 4, 2025 · fa76faa · fa76faa
1 parent f5ba6e6
commit fa76faa
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 87 deletions.
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -12,7 +12,6 @@ import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
@@ -23,98 +22,13 @@ import { useUploadFile } from '../hook';
 import { useHeadings } from '../hook/useHeadings';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore } from '../stores';
+import { cssEditor } from '../styles';
 import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 import { AlertBlock, DividerBlock, QuoteBlock } from './custom-blocks';
 
-const cssEditor = (readonly: boolean) => css`
-  &,
-  & > .bn-container,
-  & .ProseMirror {
-    height: 100%;
-
-    .bn-side-menu[data-block-type='heading'][data-level='1'] {
-      height: 50px;
-    }
-    .bn-side-menu[data-block-type='heading'][data-level='2'] {
-      height: 43px;
-    }
-    .bn-side-menu[data-block-type='heading'][data-level='3'] {
-      height: 35px;
-    }
-    h1 {
-      font-size: 1.875rem;
-    }
-    h2 {
-      font-size: 1.5rem;
-    }
-    h3 {
-      font-size: 1.25rem;
-    }
-    a {
-      color: var(--c--theme--colors--greyscale-500);
-      cursor: pointer;
-    }
-    .bn-block-group
-      .bn-block-group
-      .bn-block-outer:not([data-prev-depth-changed]):before {
-      border-left: none;
-    }
-  }
-
-  .bn-editor {
-    color: var(--c--theme--colors--greyscale-700);
-  }
-
-  .bn-block-outer:not(:first-child) {
-    &:has(h1) {
-      padding-top: 32px;
-    }
-    &:has(h2) {
-      padding-top: 24px;
-    }
-    &:has(h3) {
-      padding-top: 16px;
-    }
-  }
-
-  & .bn-inline-content code {
-    background-color: gainsboro;
-    padding: 2px;
-    border-radius: 4px;
-  }
-
-  @media screen and (width <= 560px) {
-    & .bn-editor {
-      ${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'] {
-      height: 40px;
-    }
-    .bn-side-menu[data-block-type='heading'][data-level='3'] {
-      height: 40px;
-    }
-    & .bn-editor h1 {
-      font-size: 1.6rem;
-    }
-    & .bn-editor h2 {
-      font-size: 1.35rem;
-    }
-    & .bn-editor h3 {
-      font-size: 1.2rem;
-    }
-    .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
-      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
-      font-size: 14px;
-    }
-  }
-`;
-
 export const schema = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.ts
@@ -0,0 +1,87 @@
+import { css } from 'styled-components';
+
+export const cssEditor = (readonly: boolean) => css`
+  &,
+  & > .bn-container,
+  & .ProseMirror {
+    height: 100%;
+
+    .bn-side-menu[data-block-type='heading'][data-level='1'] {
+      height: 50px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='2'] {
+      height: 43px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='3'] {
+      height: 35px;
+    }
+    h1 {
+      font-size: 1.875rem;
+    }
+    h2 {
+      font-size: 1.5rem;
+    }
+    h3 {
+      font-size: 1.25rem;
+    }
+    a {
+      color: var(--c--theme--colors--greyscale-500);
+      cursor: pointer;
+    }
+    .bn-block-group
+      .bn-block-group
+      .bn-block-outer:not([data-prev-depth-changed]):before {
+      border-left: none;
+    }
+  }
+
+  .bn-editor {
+    color: var(--c--theme--colors--greyscale-700);
+  }
+
+  .bn-block-outer:not(:first-child) {
+    &:has(h1) {
+      padding-top: 32px;
+    }
+    &:has(h2) {
+      padding-top: 24px;
+    }
+    &:has(h3) {
+      padding-top: 16px;
+    }
+  }
+
+  & .bn-inline-content code {
+    background-color: gainsboro;
+    padding: 2px;
+    border-radius: 4px;
+  }
+
+  @media screen and (width <= 560px) {
+    & .bn-editor {
+      ${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'] {
+      height: 40px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='3'] {
+      height: 40px;
+    }
+    & .bn-editor h1 {
+      font-size: 1.6rem;
+    }
+    & .bn-editor h2 {
+      font-size: 1.35rem;
+    }
+    & .bn-editor h3 {
+      font-size: 1.2rem;
+    }
+    .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
+      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
+      font-size: 14px;
+    }
+  }
+`;