search

dimitrov-adrian / directus-extension-editorjs-interface

Block editor (Editor.js) interface for Directus 9
https://www.npmjs.com/package/directus-extension-editorjs
GNU General Public License v3.0
182 stars 40 forks source link

Unable to save bold text in Paragraph block #6

Closed thomasazar closed 3 years ago

thomasazar commented 3 years ago

When I enter text into a Paragraph block, the text is rendered as bold in the interface (the bold "B" is even selected when the text is highlighted). However, when it is saved, the accompanying <b> or <strong> tags are not saved with it. This happens even if un-bold and re-bold the text.

Screenshot from 2021-02-12 11-42-00

Screenshot from 2021-02-12 11-44-22

dimitrov-adrian commented 3 years ago

I tried, but cannot reproduce on my own. What set of tools you have enabled in the interface configuration?

thomasazar commented 3 years ago

The problem seems to surface randomly — sometimes the bold tag is saved, sometimes it isn't. I'm currently on v9.0.0-rc37, using the Docker image. I've enabled the following 9 tools (although it says 10 are enabled?):

thomasazar commented 3 years ago

I decided to take a crack at figuring out what's going on, and here's what I came up with.

When I opened the Developer Tools within Firefox, I saw that the font on the Paragraph block was using a weight of 500. Changing that to 400 made the text of that block render "normal" — that is, without the faux bold. Then, if I did bold a selection of text, it was properly saved and recalled upon opening the item again.

To make this a permanent change, I inserted the following CSS in my Project Settings:

.ce-paragraph.cdx-block {
    font-weight: 400;
}
dimitrov-adrian commented 3 years ago

I decided to take a crack at figuring out what's going on, and here's what I came up with.

When I opened the Developer Tools within Firefox, I saw that the font on the Paragraph block was using a weight of 500. Changing that to 400 made the text of that block render "normal" — that is, without the faux bold. Then, if I did bold a selection of text, it was properly saved and recalled upon opening the item again.

To make this a permanent change, I inserted the following CSS in my Project Settings:

.ce-paragraph.cdx-block {
    font-weight: 400;
}

Thanks, I had added such reset, and with latest changes from editorjs, I cannot reproduce anymore.

thomasazar commented 3 years ago

Yup, looks like it's working on my end, too. Thank you for the update!