feature: add global node type name attributes to editor DOM #5786
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
…nto global-nodename-attribute
| export const Typenames = Extension.create({ | ||
| name: 'typenames', |
There was a problem hiding this comment.
typenames?
Maybe namedAttributes? Or labeledAttributes?
There was a problem hiding this comment.
But this adds the nodetype names of nodes and marks? Wouldn't typenames make sense?
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.
| 'data-tiptap': { | ||
| default: extension.name, | ||
| rendered: true, | ||
| }, |
There was a problem hiding this comment.
Does this get stored to the Tiptap JSON? Kind of redundant if it does
There was a problem hiding this comment.
Don't think those are added to the Tiptap JSON.
| @@ -0,0 +1,19 @@ | |||
| import { Extension } from '../Extension.js' | |||
|
|
|||
| export const Typenames = Extension.create({ | |||
There was a problem hiding this comment.
maybe better TypeNames?
|
Just figured - the |
…a initialization logic
| @@ -10,6 +10,8 @@ import React from 'react' | |||
| const MenuBar = () => { | |||
| const { editor } = useCurrentEditor() | |||
|
|
|||
| window.editor = editor | |||
There was a problem hiding this comment.
I think you accidentally left this in?
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