From 0cfc242e09b3bca32332b787c399f1e6e695b475 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 10 Feb 2025 12:45:35 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A(frontend)=20move=20Blocknote=20sty?= =?UTF-8?q?les?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move Blocknote styles to a separate file. --- .../doc-editor/components/BlockNoteEditor.tsx | 123 +----------------- .../src/features/docs/doc-editor/styles.tsx | 120 +++++++++++++++++ 2 files changed, 121 insertions(+), 122 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx 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 index e0d5daf0..0b6e0d97 100644 --- 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 @@ -11,7 +11,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'; @@ -22,132 +21,12 @@ 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'; -const cssEditor = (readonly: boolean) => css` - &, - & > .bn-container, - & .ProseMirror { - height: 100%; - - .collaboration-cursor-custom__base { - position: relative; - } - .collaboration-cursor-custom__caret { - position: absolute; - height: 85%; - width: 2px; - bottom: 4%; - left: -1px; - } - - .collaboration-cursor-custom__label { - color: #0d0d0d; - font-size: 12px; - font-weight: 600; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - position: absolute; - top: -17px; - padding: 0px 6px; - border-radius: 0px; - white-space: nowrap; - transition: clip-path 0.3s ease-in-out; - border-radius: 4px 4px 4px 0; - box-shadow: inset -2px 2px 6px #ffffff88; - clip-path: polygon(0 100%, 0 100%, 0 100%, 0% 100%); - } - - .collaboration-cursor-custom__base[data-active] - .collaboration-cursor-custom__label { - pointer-events: none; - clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 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 blockNoteSchema = withPageBreak(BlockNoteSchema.create()); interface BlockNoteEditorProps { diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx new file mode 100644 index 00000000..d2dff145 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -0,0 +1,120 @@ +import { css } from 'styled-components'; + +export const cssEditor = (readonly: boolean) => css` + &, + & > .bn-container, + & .ProseMirror { + height: 100%; + + .collaboration-cursor-custom__base { + position: relative; + } + .collaboration-cursor-custom__caret { + position: absolute; + height: 85%; + width: 2px; + bottom: 4%; + left: -1px; + } + .collaboration-cursor-custom__label { + color: #0d0d0d; + font-size: 12px; + font-weight: 600; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + position: absolute; + top: -17px; + padding: 0px 6px; + border-radius: 0px; + white-space: nowrap; + transition: clip-path 0.3s ease-in-out; + border-radius: 4px 4px 4px 0; + box-shadow: inset -2px 2px 6px #ffffff88; + clip-path: polygon(0 100%, 0 100%, 0 100%, 0% 100%); + } + .collaboration-cursor-custom__base[data-active] + .collaboration-cursor-custom__label { + pointer-events: none; + clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 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; + } + } +`;