davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: disable BlockNote/Mantine editor animations and transitions

Browse Source 
Adds a scoped wildcard CSS override on .editor__blocknote-container
that sets transition: none and animation: none on all child elements.
Only affects the editor internals — app-wide UI (dialogs, sidebar,
breadcrumb, icon buttons) retains its animations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Test
2026-04-05 02:17:17 +02:00
parent 98effa9637
commit d39d691ccd
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Editor.css
View File

@@ -55,7 +55,6 @@
flex: 1;
min-height: 0;
display: flex;
justify-content: center;
position: relative;
cursor: text;
}
@@ -113,9 +112,7 @@
.editor__blocknote-container .bn-editor {
width: 100%;
padding: 20px 40px;
max-width: var(--editor-max-width, 760px);
margin: 0 auto;
padding: 20px 0;
}
/* =============================================
@@ -188,12 +185,21 @@
opacity: 1 !important;
}
/* --- Title Section: wraps icon + title + separator, aligned to editor --- */
.title-section {
width: 100%;
/* --- Editor content wrapper: single source of truth for horizontal padding --- */
.editor-content-wrapper {
max-width: var(--editor-max-width, 760px);
margin: 0 auto;
padding: 0 var(--editor-padding-horizontal, 40px);
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
}
/* --- Title Section: wraps icon + title + separator --- */
.title-section {
width: 100%;
flex-shrink: 0;
}
@@ -364,12 +370,25 @@
display: none;
}
/* =============================================
Disable BlockNote/Mantine editor animations
=============================================
Scoped to .editor__blocknote-container so app-wide
components (dialogs, sidebar, etc.) are unaffected.
Preserves cursor blink and text selection. */
.editor__blocknote-container *,
.editor__blocknote-container *::before,
.editor__blocknote-container *::after {
transition: none !important;
animation: none !important;
}
/* Reduce padding at narrow editor widths so content isn't cramped */
@container editor (max-width: 600px) {
.editor__blocknote-container .bn-editor {
padding: 12px 16px;
}
.title-section {
.editor-content-wrapper {
padding: 0 16px;
}
.editor__blocknote-container .bn-editor {
padding: 12px 0;
}
}