feature: add global node type name attributes to editor DOM

bdbch commented 2 weeks ago

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:

<p data-tiptap="paragraph">
  Hello <strong data-tiptap"bold">World</strong>, this is a <em data-tiptap="italic">test</em> to test node-type data attributes.
</p>

Implementation Approach

I added a new option called addTypeAttributes to the editor which is global and enabled by default. This addTypeAttributes option enables a Typenames extension 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-type attribute is vague enough to not be used by the general user base.

Checklist

[x] I have created a changeset for this PR if necessary.
[x] My changes do not break the library.
[x] I have added tests where applicable.
[x] I have followed the project guidelines.
[x] I have fixed any lint issues.

changeset-bot[bot] commented 2 weeks ago

🦋 Changeset detected

Latest commit: 3fa56e779ee350626ddfa4aab3ef733b1d18758d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages

| Name | Type | | -------------------------------------- | ----- | | @tiptap/react | Minor | | @tiptap/vue-2 | Minor | | @tiptap/vue-3 | Minor | | @tiptap/core | Minor | | @tiptap/extension-blockquote | Minor | | @tiptap/extension-bold | Minor | | @tiptap/extension-bubble-menu | Minor | | @tiptap/extension-bullet-list | Minor | | @tiptap/extension-character-count | Minor | | @tiptap/extension-code-block-lowlight | Minor | | @tiptap/extension-code-block | Minor | | @tiptap/extension-code | Minor | | @tiptap/extension-collaboration-cursor | Minor | | @tiptap/extension-collaboration | Minor | | @tiptap/extension-color | Minor | | @tiptap/extension-document | Minor | | @tiptap/extension-dropcursor | Minor | | @tiptap/extension-floating-menu | Minor | | @tiptap/extension-focus | Minor | | @tiptap/extension-font-family | Minor | | @tiptap/extension-gapcursor | Minor | | @tiptap/extension-hard-break | Minor | | @tiptap/extension-heading | Minor | | @tiptap/extension-highlight | Minor | | @tiptap/extension-history | Minor | | @tiptap/extension-horizontal-rule | Minor | | @tiptap/extension-image | Minor | | @tiptap/extension-italic | Minor | | @tiptap/extension-link | Minor | | @tiptap/extension-list-item | Minor | | @tiptap/extension-list-keymap | Minor | | @tiptap/extension-mention | Minor | | @tiptap/extension-ordered-list | Minor | | @tiptap/extension-paragraph | Minor | | @tiptap/extension-placeholder | Minor | | @tiptap/extension-strike | Minor | | @tiptap/extension-subscript | Minor | | @tiptap/extension-superscript | Minor | | @tiptap/extension-table-cell | Minor | | @tiptap/extension-table-header | Minor | | @tiptap/extension-table-row | Minor | | @tiptap/extension-table | Minor | | @tiptap/extension-task-item | Minor | | @tiptap/extension-task-list | Minor | | @tiptap/extension-text-align | Minor | | @tiptap/extension-text-style | Minor | | @tiptap/extension-text | Minor | | @tiptap/extension-typography | Minor | | @tiptap/extension-underline | Minor | | @tiptap/extension-youtube | Minor | | @tiptap/html | Minor | | @tiptap/pm | Minor | | @tiptap/starter-kit | Minor | | @tiptap/suggestion | Minor |

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

netlify[bot] commented 2 weeks ago

Deploy Preview for tiptap-embed ready!

Name	Link
Latest commit	3fa56e779ee350626ddfa4aab3ef733b1d18758d
Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/672251d4d3b0a70008af7223
Deploy Preview	https://deploy-preview-5786--tiptap-embed.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bdbch commented 2 weeks ago

Just figured - the addGlobalAttributes function will add all attributes to the Tiptap JSON which is what we don't want. I'll see if I can find a different solution again.

ueberdosis / tiptap