Skip to content
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.

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

fix: Text Formatting Effects Reset After Input Confirmation with Japanese IME on Mobile Browsers (Safari & Chrome) #6033

Merged
merged 2 commits into from
Jan 21, 2025

Conversation

agata
Copy link
Contributor

@agata agata commented Jan 18, 2025

Changes Overview

Fixed the bug reported in #5733. On iOS Safari and WebView, when the document is empty and a decoration is applied, inputting and confirming text using Japanese IME or similar would reset the decoration. This issue has now been resolved.

Implementation Approach

The clearDocument plugin is now configured not to execute while IME input is active.

Testing Done

  1. Clear the document.
  2. Apply H1 decoration.
  3. Use the iOS virtual keyboard to input text and confirm with the IME.
  4. Verify that the decoration is not cleared.

Verification Steps

  1. Clear the document.
  2. Apply H1 decoration.
  3. Use the iOS virtual keyboard to input text and confirm with the IME.
  4. Verify that the decoration is not cleared.

Additional Notes

The decoration is now preserved as shown below.

ScreenRecording_01-19-2025.04-46-23_1.MP4

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

…nese IME on Mobile Browsers (Safari & Chrome)
Copy link

changeset-bot bot commented Jan 18, 2025

🦋 Changeset detected

Latest commit: e39c16c

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

This PR includes changesets to release 54 packages
Name Type
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-character-count Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-cursor Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-document Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-focus Patch
@tiptap/extension-font-family Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-history Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-mention Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-table Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list 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-youtube Patch
@tiptap/html Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 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

Copy link

netlify bot commented Jan 18, 2025

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit e39c16c
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/678f68d36ed68700087537ff
😎 Deploy Preview https://deploy-preview-6033--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 site configuration.

@nperez0111
Copy link
Contributor

Thanks so much @agata, this has been an issue we've had for a while!

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've confirmed that this fix works by using an iOS simulator

Copy link

pkg-pr-new bot commented Jan 21, 2025

Open in Stackblitz

@tiptap/core

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

@tiptap/extension-bubble-menu

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

@tiptap/extension-blockquote

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

@tiptap/extension-character-count

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

@tiptap/extension-bullet-list

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

@tiptap/extension-bold

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

@tiptap/extension-code

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

@tiptap/extension-code-block

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

@tiptap/extension-code-block-lowlight

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

@tiptap/extension-collaboration

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

@tiptap/extension-collaboration-cursor

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

@tiptap/extension-color

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

@tiptap/extension-document

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

@tiptap/extension-dropcursor

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

@tiptap/extension-floating-menu

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

@tiptap/extension-focus

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

@tiptap/extension-font-family

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

@tiptap/extension-gapcursor

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

@tiptap/extension-hard-break

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

@tiptap/extension-heading

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

@tiptap/extension-highlight

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

@tiptap/extension-history

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

@tiptap/extension-horizontal-rule

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

@tiptap/extension-image

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

@tiptap/extension-italic

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

@tiptap/extension-link

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

@tiptap/extension-list-item

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

@tiptap/extension-list-keymap

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

@tiptap/extension-mention

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

@tiptap/extension-ordered-list

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

@tiptap/extension-paragraph

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

@tiptap/extension-placeholder

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

@tiptap/extension-strike

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

@tiptap/extension-subscript

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

@tiptap/extension-superscript

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

@tiptap/extension-table

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

@tiptap/extension-table-cell

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

@tiptap/extension-table-header

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

@tiptap/extension-table-row

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

@tiptap/extension-task-item

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

@tiptap/extension-task-list

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

@tiptap/extension-text

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

@tiptap/extension-text-align

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

@tiptap/extension-text-style

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

@tiptap/extension-typography

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

@tiptap/extension-underline

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

@tiptap/extension-youtube

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

@tiptap/html

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

@tiptap/pm

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

@tiptap/react

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

@tiptap/starter-kit

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

@tiptap/suggestion

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

@tiptap/vue-2

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

@tiptap/vue-3

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

commit: e39c16c

@nperez0111 nperez0111 merged commit a44a7c3 into ueberdosis:develop Jan 21, 2025
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants