Skip to content

Commit

Permalink
📱(frontend) font BlockNoteEditor mobile friendly
Browse files Browse the repository at this point in the history
Reduce the font size of the BlockNoteEditor
to make it mobile friendly when the screen is small.
  • Loading branch information
AntoLC committed Sep 27, 2024
1 parent 80efd6a commit 67b16e3
Showing 1 changed file with 31 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { mediaUrl } from '@/core';
import { useAuthStore } from '@/core/auth';
import { Doc } from '@/features/docs/doc-management';
import { Version } from '@/features/docs/doc-versioning/';
import { useResponsiveStore } from '@/stores';

import { useCreateDocAttachment } from '../api/useCreateDocUpload';
import useSaveDoc from '../hook/useSaveDoc';
Expand All @@ -18,10 +19,13 @@ import { randomColor } from '../utils';

import { BlockNoteToolbar } from './BlockNoteToolbar';

const cssEditor = `
const cssEditor = (isMobile: boolean) => `
&, & > .bn-container, & .ProseMirror {
height:100%
};
& .bn-editor {
padding-right: 24px;
};
& .collaboration-cursor__caret.ProseMirror-widget{
word-wrap: initial;
}
Expand All @@ -30,6 +34,30 @@ const cssEditor = `
padding: 2px;
border-radius: 4px;
}
${
isMobile
? `
& .bn-editor h1 {
font-size: 1.5rem;
}
& .bn-editor h2 {
font-size: 1.25rem;
}
& .bn-editor h3 {
font-size: 1.125rem;
}
& .bn-editor h4 {
font-size: 1rem;
}
& .bn-editor h5 {
font-size: 0.875rem;
}
& .bn-editor h6 {
font-size: 0.75rem;
}
`
: ``
}
`;

interface BlockNoteEditorProps {
Expand Down Expand Up @@ -67,6 +95,7 @@ export const BlockNoteContent = ({
provider,
storeId,
}: BlockNoteContentProps) => {
const { isMobile } = useResponsiveStore();
const isVersion = doc.id !== storeId;
const { userData } = useAuthStore();
const { setStore, docsStore } = useDocStore();
Expand Down Expand Up @@ -117,7 +146,7 @@ export const BlockNoteContent = ({
}, [setStore, storeId, editor]);

return (
<Box $css={cssEditor}>
<Box $css={cssEditor(isMobile)}>
{isErrorAttachment && (
<Box $margin={{ bottom: 'big' }}>
<TextErrors
Expand Down

0 comments on commit 67b16e3

Please sign in to comment.