Fix/remove empty text style extension #5909

alexvcasillas · 2024-12-03T10:05:27Z

Changes Overview

We were handling incorrectly the removal of styles by calling command.unsetMark(this.name) at the removeEmptyTextStyle. This was causing the removal of all of the marks from the node itself and all their descendants and this was causing the loss of all of the inline styles that were applied across the selection.

Implementation Approach

In order to fix this issue, we were in the need to manually and properly handle the selection and all of the nodes within the selection and check their marks independently to make sure we're not throwing away inline styles that were not related to unsetting the font family or any other unset of marks.

Testing Done

Grabacion.de.pantalla.2024-12-02.a.las.12.19.00.mov

Verification Steps

Pull the branch.
Access demos/Extensions/FontFamily/React/index.jsx
Paste the attached content that includes colors to check other cases of inline style removal
Run the dev server
Access the given demo and play around with colors and font families
Everything should work as expected

Additional Notes

Demo JSX component

import './styles.scss'

import { Color } from '@tiptap/extension-color'
import Document from '@tiptap/extension-document'
import FontFamily from '@tiptap/extension-font-family'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

export default () => {
  const editor = useEditor({
    extensions: [Document, Paragraph, Text, TextStyle, FontFamily, Color],
    content: `
        <p><span style="font-family: Inter;">Did you know that Inter is a really nice font for interfaces?</span></p>
        <p><span style="font-family: Comic Sans MS, Comic Sans">It doesn’t look as professional as Comic Sans.</span></p>
        <p><span style="font-family: serif">Serious people use serif fonts anyway.</span></p>
        <p><span style="font-family: monospace">The cool kids can apply monospace fonts aswell.</span></p>
        <p><span style="font-family: cursive">But hopefully we all can agree, that cursive fonts are the best.</span></p>
        <p><span style="font-family: var(--title-font-family)">Then there are CSS variables, the new hotness.</span></p>
        <p><span style="font-family: 'Exo 2'">TipTap even can handle exotic fonts as Exo 2.</span></p>
      `,
  })

  if (!editor) {
    return null
  }

  return (
    <>
      <link
        href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet"/>
      <div className="control-group">
        <div className="button-group">
          <button
            onClick={() => editor.chain().focus().setFontFamily('Inter').run()}
            className={editor.isActive('textStyle', { fontFamily: 'Inter' }) ? 'is-active' : ''}
            data-test-id="inter"
          >
            Inter
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()}
            className={
              editor.isActive('textStyle', { fontFamily: '"Comic Sans MS", "Comic Sans"' })
                ? 'is-active'
                : ''
            }
            data-test-id="comic-sans"
          >
            Comic Sans
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('serif').run()}
            className={editor.isActive('textStyle', { fontFamily: 'serif' }) ? 'is-active' : ''}
            data-test-id="serif"
          >
            Serif
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('monospace').run()}
            className={editor.isActive('textStyle', { fontFamily: 'monospace' }) ? 'is-active' : ''}
            data-test-id="monospace"
          >
            Monospace
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('cursive').run()}
            className={editor.isActive('textStyle', { fontFamily: 'cursive' }) ? 'is-active' : ''}
            data-test-id="cursive"
          >
            Cursive
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('var(--title-font-family)').run()}
            className={editor.isActive('textStyle', { fontFamily: 'var(--title-font-family)' }) ? 'is-active' : ''}
            data-test-id="css-variable"
          >
            CSS variable
          </button>
          <button
            onClick={() => editor.chain().focus().setFontFamily('"Exo 2"').run()}
            className={editor.isActive('textStyle', { fontFamily: '"Exo 2"' }) ? 'is-active' : ''}
            data-test-id="exo2"
          >
            Exo 2
          </button>
          <button onClick={() => editor.chain().focus().unsetFontFamily().run()}
                  data-test-id="unsetFontFamily">
            Unset font family
          </button>
          <button onClick={() => editor.chain().focus().setColor('#663399').run()}>
            Set Rebecapurple color
          </button>
          <button onClick={() => editor.chain().focus().setColor('#ff6347').run()}>
            Set Tomato color
          </button>
          <button onClick={() => editor.chain().focus().unsetColor().run()}>
            Unset color
          </button>
        </div>
      </div>
      <EditorContent editor={editor}/>
    </>
  )
}

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

#4311

changeset-bot · 2024-12-03T10:05:31Z

🦋 Changeset detected

Latest commit: 0d6d115

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

This PR includes changesets to release 54 packages

Name	Type
@tiptap/extension-text-style	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	Minor
@tiptap/extension-typography	Minor
@tiptap/extension-underline	Minor
@tiptap/extension-youtube	Minor
@tiptap/html	Minor
@tiptap/pm	Minor
@tiptap/react	Minor
@tiptap/starter-kit	Minor
@tiptap/suggestion	Minor
@tiptap/vue-2	Minor
@tiptap/vue-3	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 · 2024-12-03T10:05:43Z

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	`0d6d115`
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/674ed85b3216710008749e6a
😎 Deploy Preview	https://deploy-preview-5909--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.

…yle extension

pkg-pr-new · 2024-12-03T10:12:08Z

Open in Stackblitz

@tiptap/core

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

@tiptap/extension-blockquote

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

@tiptap/extension-bubble-menu

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

@tiptap/extension-bold

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

@tiptap/extension-bullet-list

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

@tiptap/extension-character-count

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

@tiptap/extension-code

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

@tiptap/extension-code-block

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

@tiptap/extension-code-block-lowlight

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

@tiptap/extension-collaboration

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

@tiptap/extension-collaboration-cursor

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

@tiptap/extension-color

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

@tiptap/extension-document

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

@tiptap/extension-dropcursor

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

@tiptap/extension-floating-menu

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

@tiptap/extension-focus

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

@tiptap/extension-font-family

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

@tiptap/extension-gapcursor

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

@tiptap/extension-hard-break

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

@tiptap/extension-heading

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

@tiptap/extension-highlight

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

@tiptap/extension-history

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

@tiptap/extension-horizontal-rule

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

@tiptap/extension-image

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

@tiptap/extension-italic

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

@tiptap/extension-link

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

@tiptap/extension-list-item

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

@tiptap/extension-list-keymap

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

@tiptap/extension-mention

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

@tiptap/extension-ordered-list

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

@tiptap/extension-paragraph

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

@tiptap/extension-placeholder

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

@tiptap/extension-strike

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

@tiptap/extension-subscript

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

@tiptap/extension-superscript

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

@tiptap/extension-table

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

@tiptap/extension-table-cell

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

@tiptap/extension-table-header

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

@tiptap/extension-table-row

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

@tiptap/extension-task-item

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

@tiptap/extension-task-list

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

@tiptap/extension-text

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

@tiptap/extension-text-align

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

@tiptap/extension-text-style

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

@tiptap/extension-typography

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

@tiptap/extension-underline

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

@tiptap/extension-youtube

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

@tiptap/html

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

@tiptap/react

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

@tiptap/pm

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

@tiptap/starter-kit

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

@tiptap/suggestion

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

@tiptap/vue-2

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

@tiptap/vue-3

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

commit: 0d6d115

nperez0111

👍 looks good

alexvcasillas added Type: Bug The issue or pullrequest is related to a bug Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Topic: Extension The issue or pullrequest is related to an extension of the project labels Dec 3, 2024

alexvcasillas requested a review from nperez0111 December 3, 2024 10:05

alexvcasillas self-assigned this Dec 3, 2024

fix: update the logic of the removeEmptyTextStyle command from text-s…

f3b51f4

…yle extension

alexvcasillas force-pushed the fix/remove-empty-text-style-extension branch from 2a8c286 to f3b51f4 Compare December 3, 2024 10:06

chore: merge master

0d6d115

nperez0111 approved these changes Dec 3, 2024

View reviewed changes

alexvcasillas merged commit d735cf3 into develop Dec 11, 2024
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/remove empty text style extension #5909

Fix/remove empty text style extension #5909

alexvcasillas commented Dec 3, 2024

changeset-bot bot commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 3, 2024

nperez0111 left a comment

Fix/remove empty text style extension #5909

Fix/remove empty text style extension #5909

Conversation

alexvcasillas commented Dec 3, 2024

Changes Overview

Implementation Approach

Testing Done

Verification Steps

Additional Notes

Checklist

Related Issues

changeset-bot bot commented Dec 3, 2024 • edited Loading

🦋 Changeset detected

netlify bot commented Dec 3, 2024 • edited Loading

✅ Deploy Preview for tiptap-embed ready!

pkg-pr-new bot commented Dec 3, 2024

nperez0111 left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading