Skip to content

fix: more accurate typing for element option #6972

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
Merged
bdbch merged 4 commits into from
Sep 25, 2025
Merged

fix: more accurate typing for element option #6972

bdbch merged 4 commits into from
Sep 25, 2025

Conversation

@nperez0111
Copy link
Contributor

@nperez0111 nperez0111 commented Sep 17, 2025

Changes Overview

This changes the element option on the Editor to more accurately reflect the different ways that ProseMirror can mount it's view. There are 3 options (see docs here):

  • passing an HTMLElement which appends to the element specified
  • passing a {mount: HTMLElement} which mounts to that element (A pretty useful thing to get rid of the wrapper div)
  • passing a function which takes an editor element and you can place it wherever you want in the document
  • passing null to not create an element

This now exposes the options & changes the react & vue bindings to pull the correct element from the editor.view.dom instead of relying on the option being a specific shape.

Implementation Approach

Testing Done

All existing tests work, which means the mounting is done properly.

Verification Steps

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
Copy link

changeset-bot bot commented Sep 17, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 4bd6d51

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

This PR includes changesets to release 69 packages
Name Type
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/static-renderer Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-color Patch
@tiptap/extension-font-family Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-placeholder Patch
@tiptap/pm Patch

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
Copy link

netlify bot commented Sep 17, 2025 •
edited
Loading

✅ Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 4bd6d51
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/68d555f11103ac000819ae99
😎 Deploy Preview https://deploy-preview-6972--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 17, 2025 •
edited
Loading

Open in StackBlitz

@tiptap/extension-character-count

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

@tiptap/extension-dropcursor

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

@tiptap/extension-gapcursor

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

@tiptap/extension-focus

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

@tiptap/extension-history

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

@tiptap/extension-list-item

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

@tiptap/extension-list-keymap

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

@tiptap/extension-placeholder

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

@tiptap/extension-table-cell

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

@tiptap/extension-table-header

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

@tiptap/extension-table-row

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

@tiptap/extension-task-item

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

@tiptap/extension-task-list

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

@tiptap/core

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

@tiptap/extension-blockquote

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

@tiptap/extension-bubble-menu

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

@tiptap/extension-bold

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

@tiptap/extension-bullet-list

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

@tiptap/extension-code-block-lowlight

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

@tiptap/extension-code

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

@tiptap/extension-code-block

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

@tiptap/extension-collaboration

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

@tiptap/extension-collaboration-caret

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

@tiptap/extension-color

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

@tiptap/extension-details

npm i https://pkg.pr.new/@tiptap/extension-details@6972

@tiptap/extension-document

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

@tiptap/extension-drag-handle

npm i https://pkg.pr.new/@tiptap/extension-drag-handle@6972

@tiptap/extension-drag-handle-vue-2

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-2@6972

@tiptap/extension-drag-handle-react

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-react@6972

@tiptap/extension-file-handler

npm i https://pkg.pr.new/@tiptap/extension-file-handler@6972

@tiptap/extension-emoji

npm i https://pkg.pr.new/@tiptap/extension-emoji@6972

@tiptap/extension-drag-handle-vue-3

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-3@6972

@tiptap/extension-font-family

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

@tiptap/extension-floating-menu

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

@tiptap/extension-hard-break

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

@tiptap/extension-heading

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

@tiptap/extension-highlight

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

@tiptap/extension-horizontal-rule

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

@tiptap/extension-image

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

@tiptap/extension-invisible-characters

npm i https://pkg.pr.new/@tiptap/extension-invisible-characters@6972

@tiptap/extension-italic

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

@tiptap/extension-mathematics

npm i https://pkg.pr.new/@tiptap/extension-mathematics@6972

@tiptap/extension-list

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

@tiptap/extension-link

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

@tiptap/extension-node-range

npm i https://pkg.pr.new/@tiptap/extension-node-range@6972

@tiptap/extension-mention

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

@tiptap/extension-ordered-list

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

@tiptap/extension-paragraph

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

@tiptap/extension-strike

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

@tiptap/extension-subscript

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

@tiptap/extension-table

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

@tiptap/extension-superscript

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

@tiptap/extension-table-of-contents

npm i https://pkg.pr.new/@tiptap/extension-table-of-contents@6972

@tiptap/extension-text-align

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

@tiptap/extension-text

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

@tiptap/extension-text-style

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

@tiptap/extension-typography

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

@tiptap/extension-underline

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

@tiptap/extension-unique-id

npm i https://pkg.pr.new/@tiptap/extension-unique-id@6972

@tiptap/extension-youtube

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

@tiptap/extensions

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

@tiptap/react

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

@tiptap/html

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

@tiptap/pm

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

@tiptap/starter-kit

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

@tiptap/static-renderer

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

@tiptap/suggestion

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

@tiptap/vue-2

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

@tiptap/vue-3

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

commit: 66c4886

@bdbch bdbch changed the base branch from main to develop September 25, 2025 11:16
@bdbch
Enhance typing and docs for EditorOptions.element
66c4886 
Improve typing and documentation for EditorOptions.element, detailing supported mounting modes and behavior alignment across adapters.
@bdbch
Merge branch 'develop' into editor-view-type
4bd6d51
@bdbch bdbch merged commit c0190bd into ueberdosis:develop Sep 25, 2025
4 of 5 checks passed
@soren121
Copy link
Contributor

soren121 commented Sep 26, 2025

Why is this not considered a breaking change?

@bdbch
Copy link
Member

bdbch commented Sep 27, 2025

In my tests this change didn't lead to breaking change, at least in it's intended change, maybe something unintended is caused by this PR which we should rather fix?

What problem are you running into that is different to the previous version?

@soren121
Copy link
Contributor

soren121 commented Sep 27, 2025 •
edited
Loading

I access editor.options.element in a few places in my editor implementation. There are some instances where I want to access the editor container element instead of the ProseMirror view (editor.view.dom.) Updating to 3.6.0 caused a handful of errors in TypeScript.

I can change this on my end without too much hassle, but nonetheless I would not expect incompatible changes to public API types on a semver-minor update.

@nperez0111
Copy link
Contributor Author

nperez0111 commented Sep 29, 2025

Would disagree that just any external types changes should be considered breaking. Just because the options happened to be exposed does not mean that they are yours to rely on, they are the editor's options after-all?

@soren121
Copy link
Contributor

soren121 commented Sep 29, 2025

I'm not sure how I am to know what I can and cannot rely on then, when an interface is publicly exposed & documented.

At any rate, it's not my intention to argue about this. I will fix my code and consider editor.options as internal going forward.

@bdbch
Copy link
Member

bdbch commented Sep 30, 2025 •
edited
Loading

In the future I'll take a closer look and think about the implications of a change a bit more before releasing. Thanks for bringing it up @soren121.

@nperez0111 nperez0111 deleted the editor-view-type branch September 30, 2025 05:11
@mejo-
Copy link
Contributor

mejo- commented Dec 17, 2025

Turns out this PR introduced a bug, see #7282 (comment)

mejo- added a commit to mejo-/tiptap that referenced this pull request Dec 18, 2025
@mejo-
fix: append all children of editors parent node to element
92a0b1d 
Fixes a regression introduced by ueberdosis#6972, that resulted in elements that
got appended to the editors parent node staying detached. E.g. the drag
handle plugin is affected by this regression.

Fixes: ueberdosis#7282

Signed-off-by: Jonas <jonas@freesources.org>
@mejo- mejo- mentioned this pull request Dec 18, 2025
Merged
5 tasks
mejo- added a commit to mejo-/tiptap that referenced this pull request Dec 18, 2025
@mejo-
fix: append all children of editors parent node to element
57432eb 
Fixes a regression introduced by ueberdosis#6972, that resulted in elements that
got appended to the editors parent node staying detached. E.g. the drag
handle plugin is affected by this regression.

Fixes: ueberdosis#7282

Signed-off-by: Jonas <jonas@freesources.org>
bdbch pushed a commit that referenced this pull request Dec 19, 2025
@mejo-
fix: append all children of editors parent node to element (#7350)
383145e 
Fixes a regression introduced by #6972, that resulted in elements that
got appended to the editors parent node staying detached. E.g. the drag
handle plugin is affected by this regression.

Fixes: #7282

Signed-off-by: Jonas <jonas@freesources.org>
@github-actions github-actions bot mentioned this pull request Dec 19, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bdbch bdbch bdbch 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.

4 participants

@nperez0111 @soren121 @bdbch @mejo-