Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Mantine styles #553

Merged
merged 7 commits into from
Feb 1, 2024
Merged

fix: Mantine styles #553

merged 7 commits into from
Feb 1, 2024

Conversation

matthewlipski
Copy link
Collaborator

@matthewlipski matthewlipski commented Jan 31, 2024 •
edited
Loading

Updating Mantine did not get rid of all of the global styles it sets, which are still causing issues. So it seems like it is a better alternative to just reset them, as it doesn't seem that the Mantine team is going to change this anytime soon (https://discord.com/channels/854810300876062770/1193507663020032060).

This PR also fixes loaders being rendered inside ActionIcon components:

This was kind of a pain to diagnose, but bottom line is that it should be fixed by updating Mantine from 7.4.2 to 7.5.0. I'm not sure exactly what's causing the issue, but there seem to be styles missing in @mantine/core/styles.css for the .m-302b9fb1 selector that's used in the loader in 7.4.2. Using 7.5.0 and disabling these additional styles causes icons to have the loader visible next to them as in the screenshot.

Closes #549 #546

@vercel Vercel
Copy link

vercel bot commented Jan 31, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Feb 1, 2024 2:10pm
blocknote-website ✅ Ready (Inspect) Visit Preview Feb 1, 2024 2:10pm

@matthewlipski matthewlipski mentioned this pull request Jan 31, 2024
Closed
1 task
@matthewlipski matthewlipski changed the title chore: Mantine 7.5.0 fix: Mantine styles Jan 31, 2024
YousefED
YousefED approved these changes Jan 31, 2024
View reviewed changes
Copy link
Collaborator

@YousefED YousefED left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approve, but I don't think it closes #546 definitively. We should open an issue with Mantine and:

  • explain clearly what the issue is and what the impact is (many people running into it)
  • propose a solution (quick brainstorm, there might be better options; like splitting the css to an optional file, or making the root container where it's applied to configurable?)

rockiger
rockiger approved these changes Jan 31, 2024
View reviewed changes
Copy link

@rockiger rockiger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as a workaround. But why not override all global styles from Mantine?

@matthewlipski
Copy link
Collaborator Author

Changed it to this solution: https://github.com/orgs/mantinedev/discussions/5685
This avoids having to import Mantine global styles at all, and sets them on .bn-container instead, effectively scoping them to the editor only.

@matthewlipski matthewlipski merged commit c70ee4d into main Feb 1, 2024
4 checks passed
@Crsk
Copy link

Crsk commented Feb 4, 2024 •
edited
Loading

This solution was merged into v0.11.2 but in that version I'm still having the issue. I just tried BlockNote first time (v0.11.2) and now my styles are messed up. I also tried updating my app mantine version from v7.3.2 to v7.5.1 with no luck

Edit:
Seems like there's a conflict with MantineProvider merging the theme object, if I remove it from BlockNote source code the problem is apparently gone. Here's a quick demo https://youtu.be/CmEpWlNpXBg

matthewlipski added a commit that referenced this pull request Feb 13, 2024
@matthewlipski @YousefED @CTNicholas
refactor: Mentions & custom suggestion menus (#534)
93e1d4f 
* fix: Docs home page demo styling fix (#507)

* Fixed styling for code styles (#517)

* Made suggestions plugin control multiple menus

* Added hook to create suggestion menu

* Fixed add block button behaviour on blocks with different content (#526)

* Small CSS fix (#527)

* fix: List item shortcuts (#528)

* Fixed list item shortcuts

* Updated test screenshots

* Added code toggle formatting toolbar example (#531)

* fix: Errors when hovering image block while editor is uneditable (#533)

* Fixed errors when hovering image block while editor is uneditable

* Small fix

* fix: Formatting toolbar not hiding while dragging blocks (#529)

* Fixed formatting toolbar not hiding while dragging blocks

* Small fix

* Updated Mantine (#535)

* Updated `package-lock.json` (#536)

* v0.11.1

* v0.6.2

* v0.8.1

* v0.8.2

* v0.8.3

* v0.8.4

* v0.8.5

* v0.9.0

* v0.9.1

* Revert "v0.9.1"

This reverts commit 6e9d61f.

* v0.9.1

* Revert "v0.9.1"

This reverts commit ac7abee.

* v0.9.2

* v0.9.3

* v0.9.4

* v0.9.5

* v0.9.6

* v0.10.0

* v0.10.1

* v0.11.0

* v0.11.1

* fix collaboration and editable: false bug (#538)

* pair refactoring

* wip

* fix type annotations on some of the docs (#539)

* Cleanup and continue refactor

* docs: Dark mode styling fix (#548)

* Fixed styles that were overwritten by Mantine globals

* Removed old code

* Implemented PR feedback

* Add Liveblocks info and BlockNote download command (#540)

* Update real-time-collaboration.md

* feat: Example image

* feat: Replace image with video

* Fixed video

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Implemented PR feedback

* fix: Mantine styles (#553)

* Updated Mantine and package-lock

* Added Mantine global styles reset

* Made Mantine global styles not get imported

* Fixed CSS import order

* Updated test & snapshots

* Implemented PR feedback

* Implemented PR feedback

* Fixed paragraph shortcut (#556)

* v0.11.2

* Fixed build issues

* Fixed add block button behaviour

* Small fix

* Small fix

* Fixed tests

---------

Co-authored-by: Yousef <[email protected]>
Co-authored-by: Chris Nicholas <[email protected]>
matthewlipski added a commit that referenced this pull request Mar 5, 2024
@YousefED @matthewlipski @CTNicholas
release: v0.12 - new website and major refactor (#562)
e8486d8 
* Added async slash menu items POC

* Fixed vanilla example

* Small test fix

* Implemented PR feedback

* Improved performance

* Simplified how outdated queries are ignored/cancelled

* small fixes

* Added custom suggestion menus PoC

* Updated custom mentions example

* Add Liveblocks info and BlockNote download command (#540)

* Update real-time-collaboration.md

* feat: Example image

* feat: Replace image with video

* Fixed video

---------

Co-authored-by: Matthew Lipski <[email protected]>

* wip: migrate to nextjs

* update docs2

* fixes

* fix: Mantine styles (#553)

* Updated Mantine and package-lock

* Added Mantine global styles reset

* Made Mantine global styles not get imported

* Fixed CSS import order

* Updated test & snapshots

* Implemented PR feedback

* Implemented PR feedback

* Fixed paragraph shortcut (#556)

* v0.11.2

* fix

* fix index

* Converted more examples & small fixes

* Added gen files for new examples

* Small typing fixes

* misc

* fix build

* disable examples

* Converted remaining examples and small fixes

* improve examples

* react icon import only types

* fix build speed

* Fixed demo & examples styling

* Small fix

* basic auth working

* remove old site

* clean script + organize examples

* Changed home page gradients and styling fixes

* update examples, docs, scripts

* fix playground

* fix docs

* fix playground

* add strictmode again!

* Revert "add strictmode again!"

This reverts commit 692c5b3.

* Revised features section and gradients

* small fixes

* small fixes

* small fixes

* try fix link clicks + speed

* fix type issue

* Revised styles, fixed dark mode, and small cleanup

* Small fix

* Improved dark mode selection

* Refactor/cleanup mount system (#567)

* cleanup mount system

* demo

* wip

* fix build

* fix

* fix light / dark mode

* clean examples

* clean examples

* docs

* misc

* refs

* better errors

* add default block / partialblock types

* wip: examples

* fix theme

* update interop examples

* Small fixes

---------

Co-authored-by: Matthew Lipski <[email protected]>

* refactor: Mentions & custom suggestion menus (#534)

* fix: Docs home page demo styling fix (#507)

* Fixed styling for code styles (#517)

* Made suggestions plugin control multiple menus

* Added hook to create suggestion menu

* Fixed add block button behaviour on blocks with different content (#526)

* Small CSS fix (#527)

* fix: List item shortcuts (#528)

* Fixed list item shortcuts

* Updated test screenshots

* Added code toggle formatting toolbar example (#531)

* fix: Errors when hovering image block while editor is uneditable (#533)

* Fixed errors when hovering image block while editor is uneditable

* Small fix

* fix: Formatting toolbar not hiding while dragging blocks (#529)

* Fixed formatting toolbar not hiding while dragging blocks

* Small fix

* Updated Mantine (#535)

* Updated `package-lock.json` (#536)

* v0.11.1

* v0.6.2

* v0.8.1

* v0.8.2

* v0.8.3

* v0.8.4

* v0.8.5

* v0.9.0

* v0.9.1

* Revert "v0.9.1"

This reverts commit 6e9d61f.

* v0.9.1

* Revert "v0.9.1"

This reverts commit ac7abee.

* v0.9.2

* v0.9.3

* v0.9.4

* v0.9.5

* v0.9.6

* v0.10.0

* v0.10.1

* v0.11.0

* v0.11.1

* fix collaboration and editable: false bug (#538)

* pair refactoring

* wip

* fix type annotations on some of the docs (#539)

* Cleanup and continue refactor

* docs: Dark mode styling fix (#548)

* Fixed styles that were overwritten by Mantine globals

* Removed old code

* Implemented PR feedback

* Add Liveblocks info and BlockNote download command (#540)

* Update real-time-collaboration.md

* feat: Example image

* feat: Replace image with video

* Fixed video

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Implemented PR feedback

* fix: Mantine styles (#553)

* Updated Mantine and package-lock

* Added Mantine global styles reset

* Made Mantine global styles not get imported

* Fixed CSS import order

* Updated test & snapshots

* Implemented PR feedback

* Implemented PR feedback

* Fixed paragraph shortcut (#556)

* v0.11.2

* Fixed build issues

* Fixed add block button behaviour

* Small fix

* Small fix

* Fixed tests

---------

Co-authored-by: Yousef <[email protected]>
Co-authored-by: Chris Nicholas <[email protected]>

* Refactored how remaining UI elements (except table handles) are created to match suggestions

* remove file left after merge

* Replaced `data`/`position` hooks with refactored general hooks

* Fixed vanilla example

* Lint fix

* Minor fixes

* Refactored table handles

* clean getitems

* misc

* test

* tests

* small fixes

* about page

* Implemented PR feedback

* Small naming fix

* Added vanilla default slash menu items

* address feedback

* pair work

* add footer

* small fix

* faq, sponsors

* noteplan

* readme todo

* Cleaned up homepage

* Addressed docs TODOs and cleanup

* refactor: UI component types, names, and API (#584)

* Cleaned up UI components and examples

* Continued cleanup

* Continued cleanup

* Continued cleanup

* Imlemented PR feedback

* add default onItemClick

* Implemented PR feedback

* Small fix

* fix build

* remove file

* Rename

* fix image caption button

* Moved components requiring Mantine to `/mantine` directories

* Small fix

* Updated formatting toolbar & side menu docs

* suggestion (#588)

* suggestion

* Fixed block type dropdown API and small refactor

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Added hyperlink toolbar docs and small changes

* Updated slash menu docs & small fixes

* Updated slash menu docs & small fixes

* wip

* update scripts

* fix

* fix

* remove files

* fix

* update names

* small fixes

* docs

* as discussed

* address comments

* Added initial content to UI component examples & small changes

* Cleaned up UI component docs

* custom schemas + custom blocks page

* fix

* update slash menu docs

* move some examples

* rename slash menu to suggestion menu

* Added custom inline content page and other fixes

* fix

* theming todos

* Made discussed changes to styling & theming docs

* address feedback

* Added custom styles docs

* Fixed theming & styling demos

* Updated advanced docs

* docs: Proposal for editor basics docs changes (#594)

* Added proposals for editor basics docs changes

* Addressed editor basics TODOs

* fix build

* fix

* Updated editor api links

* generate + clean some comments

* fix?

* disable og

* docs review (#596)

* docs review

* Fixed PR feedback

---------

Co-authored-by: Matthew Lipski <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

* Fixed demo styles & windows scrollbars

* fix build

* fix og image?

* Changed selections demo(s) & fixed various styles

* fix lint

* lint fix

* Fixed demo input/output TODOs and removed hide last line hack

* fix tests

* try fix tests

* Updated e2e test setup

* Updated e2e test setup

* Added docs pages redirects and misc changes

* scripts

* Updated screenshots

* Fixed various docs TODOs

* webpack stats / github ci

* WIP: Fix/polish examples

* ci update

* Finished examples cleanup (expect collab)

* Fixed toolbar button click behaviour for Safari

* Fixed collaboration examples

* Revert dependency changes

* fix package json

* separate inter font

* fix xss #601

* Implemented PR feedback

* small edits

* small cleanup

* fix bugs

* features (wip)

* fix

* only apply fix to safari

* comments

* fix package lock

* fix authors

* fix bug

* fix inline content api

* Added insert inline content docs

* update docs

* small fixes

* update readme

* text

* feat: Editor option to customize placeholders (#503)

* Added option to customize placeholders

* Slightly adjusted default placeholders

* check emptyness with css

* Added editor options to customize placeholders via CSS

* Implemented PR feedback

* small placeholder fixes

---------

Co-authored-by: yousefed <[email protected]>

* fix Incorrect blocknote styles affecting Mantine ToolTip component styles #566

* export

* Cleaned up home page code

* Added font import

---------

Co-authored-by: Matthew Lipski <[email protected]>
Co-authored-by: Chris Nicholas <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>
matthewlipski added a commit that referenced this pull request Mar 5, 2024
@matthewlipski @YousefED @CTNicholas
release: v0.12 - new website and major refactor (#609)
4a19773 
* first step

* update examples

* remove veaury

* upgrade sandpack

* example test

* tests

* misc

* update vite configs

* misc fixes

* add docs

* add comments

* Added async slash menu items POC

* Fixed vanilla example

* Small test fix

* Implemented PR feedback

* Improved performance

* Simplified how outdated queries are ignored/cancelled

* small fixes

* Added custom suggestion menus PoC

* Updated custom mentions example

* remove beta

* fix settings

* Added remaining examples

* Build fixes and removed generated playground/docs files

* Small fixes

* fix build

* re-add generated files

* small fixes

* wip: migrate to nextjs

* update docs2

* fixes

* fix

* fix index

* Converted more examples & small fixes

* Added gen files for new examples

* Small typing fixes

* misc

* fix build

* disable examples

* Converted remaining examples and small fixes

* improve examples

* react icon import only types

* fix build speed

* Fixed demo & examples styling

* Small fix

* basic auth working

* remove old site

* clean script + organize examples

* Changed home page gradients and styling fixes

* update examples, docs, scripts

* fix playground

* fix docs

* fix playground

* add strictmode again!

* Revert "add strictmode again!"

This reverts commit 692c5b3.

* Revised features section and gradients

* small fixes

* small fixes

* small fixes

* try fix link clicks + speed

* fix type issue

* Revised styles, fixed dark mode, and small cleanup

* Small fix

* Improved dark mode selection

* Refactor/cleanup mount system (#567)

* cleanup mount system

* demo

* wip

* fix build

* fix

* fix light / dark mode

* clean examples

* clean examples

* docs

* misc

* refs

* better errors

* add default block / partialblock types

* wip: examples

* fix theme

* update interop examples

* Small fixes

---------

Co-authored-by: Matthew Lipski <[email protected]>

* refactor: Mentions & custom suggestion menus (#534)

* fix: Docs home page demo styling fix (#507)

* Fixed styling for code styles (#517)

* Made suggestions plugin control multiple menus

* Added hook to create suggestion menu

* Fixed add block button behaviour on blocks with different content (#526)

* Small CSS fix (#527)

* fix: List item shortcuts (#528)

* Fixed list item shortcuts

* Updated test screenshots

* Added code toggle formatting toolbar example (#531)

* fix: Errors when hovering image block while editor is uneditable (#533)

* Fixed errors when hovering image block while editor is uneditable

* Small fix

* fix: Formatting toolbar not hiding while dragging blocks (#529)

* Fixed formatting toolbar not hiding while dragging blocks

* Small fix

* Updated Mantine (#535)

* Updated `package-lock.json` (#536)

* v0.11.1

* v0.6.2

* v0.8.1

* v0.8.2

* v0.8.3

* v0.8.4

* v0.8.5

* v0.9.0

* v0.9.1

* Revert "v0.9.1"

This reverts commit 6e9d61f.

* v0.9.1

* Revert "v0.9.1"

This reverts commit ac7abee.

* v0.9.2

* v0.9.3

* v0.9.4

* v0.9.5

* v0.9.6

* v0.10.0

* v0.10.1

* v0.11.0

* v0.11.1

* fix collaboration and editable: false bug (#538)

* pair refactoring

* wip

* fix type annotations on some of the docs (#539)

* Cleanup and continue refactor

* docs: Dark mode styling fix (#548)

* Fixed styles that were overwritten by Mantine globals

* Removed old code

* Implemented PR feedback

* Add Liveblocks info and BlockNote download command (#540)

* Update real-time-collaboration.md

* feat: Example image

* feat: Replace image with video

* Fixed video

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Implemented PR feedback

* fix: Mantine styles (#553)

* Updated Mantine and package-lock

* Added Mantine global styles reset

* Made Mantine global styles not get imported

* Fixed CSS import order

* Updated test & snapshots

* Implemented PR feedback

* Implemented PR feedback

* Fixed paragraph shortcut (#556)

* v0.11.2

* Fixed build issues

* Fixed add block button behaviour

* Small fix

* Small fix

* Fixed tests

---------

Co-authored-by: Yousef <[email protected]>
Co-authored-by: Chris Nicholas <[email protected]>

* Refactored how remaining UI elements (except table handles) are created to match suggestions

* remove file left after merge

* Replaced `data`/`position` hooks with refactored general hooks

* Fixed vanilla example

* Lint fix

* Minor fixes

* Refactored table handles

* clean getitems

* misc

* test

* tests

* small fixes

* about page

* Implemented PR feedback

* Small naming fix

* Added vanilla default slash menu items

* address feedback

* pair work

* add footer

* small fix

* faq, sponsors

* noteplan

* readme todo

* Cleaned up homepage

* Addressed docs TODOs and cleanup

* refactor: UI component types, names, and API (#584)

* Cleaned up UI components and examples

* Continued cleanup

* Continued cleanup

* Continued cleanup

* Imlemented PR feedback

* add default onItemClick

* Implemented PR feedback

* Small fix

* fix build

* remove file

* Rename

* fix image caption button

* Moved components requiring Mantine to `/mantine` directories

* Small fix

* Updated formatting toolbar & side menu docs

* suggestion (#588)

* suggestion

* Fixed block type dropdown API and small refactor

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Added hyperlink toolbar docs and small changes

* Updated slash menu docs & small fixes

* Updated slash menu docs & small fixes

* wip

* update scripts

* fix

* fix

* remove files

* fix

* update names

* small fixes

* docs

* as discussed

* address comments

* Added initial content to UI component examples & small changes

* Cleaned up UI component docs

* custom schemas + custom blocks page

* fix

* update slash menu docs

* move some examples

* rename slash menu to suggestion menu

* Added custom inline content page and other fixes

* fix

* theming todos

* Made discussed changes to styling & theming docs

* address feedback

* Added custom styles docs

* Fixed theming & styling demos

* Updated advanced docs

* docs: Proposal for editor basics docs changes (#594)

* Added proposals for editor basics docs changes

* Addressed editor basics TODOs

* fix build

* fix

* Updated editor api links

* generate + clean some comments

* fix?

* disable og

* docs review (#596)

* docs review

* Fixed PR feedback

---------

Co-authored-by: Matthew Lipski <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

* Fixed demo styles & windows scrollbars

* fix build

* fix og image?

* Changed selections demo(s) & fixed various styles

* fix lint

* lint fix

* Fixed demo input/output TODOs and removed hide last line hack

* fix tests

* try fix tests

* Updated e2e test setup

* Updated e2e test setup

* Added docs pages redirects and misc changes

* scripts

* Updated screenshots

* Fixed various docs TODOs

* webpack stats / github ci

* WIP: Fix/polish examples

* ci update

* Finished examples cleanup (expect collab)

* Fixed toolbar button click behaviour for Safari

* Fixed collaboration examples

* Revert dependency changes

* fix package json

* separate inter font

* fix xss #601

* Implemented PR feedback

* small edits

* small cleanup

* fix bugs

* features (wip)

* fix

* only apply fix to safari

* comments

* fix package lock

* fix authors

* fix bug

* fix inline content api

* Added insert inline content docs

* update docs

* small fixes

* update readme

* text

* feat: Editor option to customize placeholders (#503)

* Added option to customize placeholders

* Slightly adjusted default placeholders

* check emptyness with css

* Added editor options to customize placeholders via CSS

* Implemented PR feedback

* small placeholder fixes

---------

Co-authored-by: yousefed <[email protected]>

* fix Incorrect blocknote styles affecting Mantine ToolTip component styles #566

* export

* Cleaned up home page code

* Added font import

* update about

* Implemented community/faq feedback

* Updated test screenshots

* Updated features gifs

* Removed TODOs (added corresponding GH issues)

* Fixed link

---------

Co-authored-by: yousefed <[email protected]>
Co-authored-by: Chris Nicholas <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@YousefED YousefED YousefED approved these changes

@rockiger rockiger rockiger approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Spinner showing in all icons
4 participants
@matthewlipski @Crsk @YousefED @rockiger