Font styles are not honored when pasting from MS Word

[jswiderski]

📝 Provide detailed reproduction steps (if any)

1. Add, to article.js plugins: PasteFromOffice, Font and Highlight (last one just in case).
2. Configure CKEditor font as shown in attached article.js file. The configuration used should exclude possibility of something not being configured - article.zip.
3. Paste contents of attached MS Word file - testfile.zip

✔️ Expected result

When pasting from MS Word file, font styling should be preserved.

❌ Actual result

No styling gets preserved.

📃 Other details

• Browser: Any
• OS: Any
• CKEditor version: Latest
• Installed CKEditor plugins: PasteFromOffice, Font, Highlight

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mgsy]

I can confirm it. However, should it be handled? It's a bug or feature request?

[jswiderski]

I believe this is a bug as preserving font styles should be one of basic functionalities of the PasteFromOffice plugin.

NOTE: The problem has also been reported on our support channel.

[Reinmar]

Strongly related to:

• Handling variations of font-family notations and partial matches #2278 – Handling variations of font-family notations and partial matches
• The font size and font family plug-ins only operate on values they have been configured with #983 – The font size and font family plug-ins only operate on values they have been configured with

The latter is in fact what most people would expect. But the former would be useful as well. In other words, we have 3 levels of content filtering:

• allow only the exact values that are configured now (current behaviour)
• allow looser value matching (Handling variations of font-family notations and partial matches #2278)
• allow pasting whathever font family/sizes (The font size and font family plug-ins only operate on values they have been configured with #983)

[Reinmar]

Let's introduce config options for those two features (font family, font size) which will allow developers to disable the value matching.

[Reinmar]

This should be an opt-in behaviour. Enabled through a config option.

Let's also use that config option in the PFW and PFGDocs documentation pages.

[pomek]

I wrote two converters that keep values of style="font-family: *" in our model and use it directly in the view.

Model:

View:

editor.getData():

"<p><span style="font-family:docs-Roboto, Arial;">Roboto: Test – didn't define in config</span></p><p><span style="font-family:Courier New;">Courier New: Test – visible in fontFamily dropdown</span></p>"

More or less the same logic could be applied to font-size part of the feature. Is that correct way?

[pomek]

Answering my own question.

More or less the same logic could be applied to font-size part of the feature. Is that correct way?

It could be if font size would be defined as numbers. We have two cases that need to be handled:

1. A user pasted a text: font-size has specified a unit. We store a value font-size: * in the model and pass it directly to the view.
2. The user set the font-size of a text using the font size dropdown. As for now, we store a number in the model. During the view conversion, we need to attach a unit to it. Should it be px? Should we have an option for customizing the unit?

Unfortunately, the font-size feature allows configuring presets. They are converted to classes in the view so the converter must be a little smarter.

1. We can detect what kind of value is store as the fontSize attribute in the text. Based on that, add a class or define the style (font-size: *). It should work.
   
2. Another possible solution could be a breaking change in the plugin configuration. If we will keep in the model numeric values, we can convert values to the style="font-size: *" attribute.
3. The last one, I guess, an unacceptable solution is dropping support for presets and keep numeric values only.

[Reinmar]

The most important assumption here is that the feature works in either the "only preconfigured values" or the "any value" modes. Not in both at the same time.

If you're in the former more, you have model values working exactly like today. If you switch the mode, the model values need to keep the actual font-size style value.

[pomek]

The last question – how the font size plugin configuration should look if "any value" mode is enabled? Keeping presets does not seem like a correct way.

Could we replace presets with numbers: fontSize: { options: [ 10, 12, 14, 'default', 18, 20, 22 ] } or?

[pomek]

An answer to the question:

how the font size plugin configuration should look if "any value" mode is enabled?

Was in the sentence:

If you switch the mode, the model values need to keep the actual font-size style value.

This way I went.