feat(core): add support for markviews

[nperez0111]

Changes Overview

This adds support for Prosemirror markviews to Marks.

For this to actually become supported we will need to:

• Have a MarkView class that can manage the markview element instead of having to create your own elements
• Have a way to render React / Vue components like node views does

From there, we'd pretty much just support them!

Here is what the API looks like right now, but we will probably add a class to make these elements for you:

  addMarkView() {
    return ({ mark, HTMLAttributes }) => {
      const dom = document.createElement('b')
      const contentDOM = document.createElement('span')

      dom.appendChild(contentDOM)

      return {
        dom,
        contentDOM,
      }
    }
  },

I've implemented both React rendering for mark views and Vue 3 rendering (I couldn't be bothered to do vue-2, we should probably deprecate that package).

Implementation Approach

Pretty much following the same sort of implementation as node views, I was able to add support for markviews.

Testing Done

Verification Steps

I added a temporary markview to a mark and it worked just fine

Additional Notes

Checklist

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

Related Issues

[changeset-bot]

🦋 Changeset detected

Latest commit: 38ac909

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

This PR includes changesets to release 56 packages

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

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]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	38ac909
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/6790e3f6eb7aac0008292831
😎 Deploy Preview	https://deploy-preview-5759--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]

Awesome idea, LGTM!

[bdbch]

Tests failed and we'd need to merge with develop again as we got a few merge conflicts.

Looking forward to get this merged.

[nperez0111]

I want to do this for v3, & I need to make a react markview impl

Types have also changed in prosemirror view since

[bdbch]

Should we change the target branch to next then?

[bdbch]

@nperez0111 let me know when you need another code review on this one.

[pkg-pr-new]

Open in Stackblitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@5759

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@5759

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@5759

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@5759

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@5759

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@5759

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@5759

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@5759

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@5759

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@5759

@tiptap/extension-collaboration-cursor

npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@5759

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@5759

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@5759

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@5759

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@5759

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@5759

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@5759

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@5759

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@5759

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@5759

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@5759

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@5759

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@5759

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@5759

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@5759

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@5759

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@5759

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@5759

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@5759

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@5759

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@5759

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@5759

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@5759

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@5759

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@5759

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@5759

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@5759

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@5759

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@5759

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@5759

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@5759

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@5759

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@5759

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@5759

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@5759

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@5759

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@5759

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@5759

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@5759

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@5759

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@5759

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@5759

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@5759

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@5759

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@5759

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@5759

commit: 38ac909

[nperez0111]

@bdbch close to a review here, would probably want to add some tests that it works properly. I also found out that prosemirror-dev-tools extension does not have support for markviews yet and causes it to render incorrectly, so disable the extension to get it to run properly. I made an issue so that they know to fix it: TeemuKoivisto/prosemirror-dev-toolkit#84

[nperez0111]

Alright, all done here @bdbch