feature: add global node type name attributes to editor DOM#5786
Closed
bdbch wants to merge 16 commits intoueberdosis:developfrom
bdbch:global-nodename-attribute
Closed
feature: add global node type name attributes to editor DOM#5786bdbch wants to merge 16 commits intoueberdosis:developfrom bdbch:global-nodename-attribute
bdbch wants to merge 16 commits intoueberdosis:developfrom
bdbch:global-nodename-attribute
Conversation
🦋 Changeset detectedLatest commit: 3fa56e7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 54 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
bdbch
changed the title
bdbch
changed the title
nperez0111
reviewed
Oct 30, 2024
nperez0111
reviewed
Oct 30, 2024
…nto global-nodename-attribute
nperez0111
reviewed
Oct 30, 2024
Comment on lines
+3
to
+4
| export const Typenames = Extension.create({ | ||
| name: 'typenames', |
Contributor
There was a problem hiding this comment.
typenames?
Maybe namedAttributes? Or labeledAttributes?
Member
Author
There was a problem hiding this comment.
But this adds the nodetype names of nodes and marks? Wouldn't typenames make sense?
Contributor
There was a problem hiding this comment.
typename just is super generic.
It should be clear that this is applying to the HTMLAttributes of nodes & marks, unsure of a good name for that.
nperez0111
reviewed
Oct 30, 2024
Comment on lines
+12
to
+15
| 'data-tiptap': { | ||
| default: extension.name, | ||
| rendered: true, | ||
| }, |
Contributor
There was a problem hiding this comment.
Does this get stored to the Tiptap JSON? Kind of redundant if it does
Member
Author
There was a problem hiding this comment.
Don't think those are added to the Tiptap JSON.
nperez0111
reviewed
Oct 30, 2024
nperez0111
reviewed
Oct 30, 2024
nperez0111
reviewed
Oct 30, 2024
svenadlung
reviewed
Oct 30, 2024
| @@ -0,0 +1,19 @@ | |||
| import { Extension } from '../Extension.js' | |||
|
|
|||
| export const Typenames = Extension.create({ | |||
Member
Author
|
Just figured - the |
…a initialization logic
| const MenuBar = () => { | ||
| const { editor } = useCurrentEditor() | ||
|
|
||
| window.editor = editor |
There was a problem hiding this comment.
I think you accidentally left this in?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes Overview
This pull request introduces a new feature to add type attributes to nodes and marks in the editor for better identification, which can be useful for testing and styling purposes. The changes span across multiple files to implement and support this feature.
This makes it easier to style specific HTML elements of the editor while not overwriting any styles for node view related elements or other decorations that may unwillingly be styled.
If enabled, a node could be rendered like this in HTML:
Implementation Approach
I added a new option called
addTypeAttributesto the editor which is global and enabled by default. ThisaddTypeAttributesoption enables aTypenamesextension that will dynamically add those type names to the editor DOM.Those attributes are currently stripped from the editors output.
Testing Done
I tested this all locally on any test of our demos pages.
Verification Steps
Clone and check the branch for your self or check the deployed netlify page.
Additional Notes
I don't think this is a breaking change as it's not really changing the general behavior of the editor and the
data-node-typeattribute is vague enough to not be used by the general user base.Checklist