RichText FormatType which has same tag but different class is applied

[technote-space]

Describe the bug
There are cases to be applied not related FormatType to richtext if edit the class on the editor
but not applied on the front end

To Reproduce

• case1

1. register format type
   tagName: span, className: class1
2. apply the format type to richtext on Visual Editor
3. delete class on Code Editor
4. back to Visual Editor
   ⇒ class1 is applied

• case2

1. register format type
   tagName: span, className: class1
2. apply the format type to richtext on Visual Editor
3. change class to class2 on Code Editor
4. back to Visual Editor
   ⇒ class1 and class2 are applied

• case3

1. register format types
   tagName: span, className: class1
tagName: span, className: class2
2. apply the second format type to rechtext (class2) on Visual Editor
3. unregister (not register) second format type (e.g deactivate plugin)
   registered only class1 format type
   tagName: span, className: class1
4. reload
   ⇒ class1 and class2 are applied

⇒ In either case, class1 is not applied on the front end

Expected behavior
unrelated FormatType should not be applied on editor
In the above case, class1 format type

Screenshots

1. apply format type
   
2. edit the class on Code Editor
   
3. back to Visual Editor (class1 is applied)
   
4. on front end (class1 is not applied)
   

Desktop (please complete the following information):

• OS: Windows10
• Browser: Chrome
• Version: 71.0.3578.98

Additional context
https://github.com/WordPress/gutenberg/blob/release/5.4/packages/rich-text/src/create.js#L40
toFormat function's behavior

1. search formatType by class name (getFormatTypeForClassName)
2. search formatType by type(tag name) (getFormatTypeForBareElement)

I think below is better

1. search formatType by class name (getFormatTypeForClassName)
2. search formatType by type and class name is empty

related pull request
#11488

[youknowriad]

cc @iseulde

[technote-space]

I installed and activated latest Gutenberg plugin (v5.1.0), and it seems to be fixed in cases listed above.
But that's because core/underline format was applied which has tagName: span and className: null,
which is introduced by this PR 69a336f
If I use other tagName like cite, this problem still occur.

1. register format types and apply to each element
   tagName: cite, className: class1
tagName: cite, className: class2

2. unregister (not register) first format type and reload
   registered only
   tagName: cite, className: class2
   ⇒ applied class2 to unrelated element (strange behavior)

3. on front end
   ⇒ class2 is not applied (correct behavior)

[inc2734]

I have the same problem.

1. search formatType by class name (getFormatTypeForClassName)
2. search formatType by type and class name is empty

I also think the above specifications are good.

[technote-space]

I confirmed that this has been fixed by PR #15072