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

getHTML does not preserve styling #331

Closed
asseti6 opened this issue May 27, 2019 · 6 comments
Closed

getHTML does not preserve styling #331

asseti6 opened this issue May 27, 2019 · 6 comments
Labels
Type: Bug The issue or pullrequest is related to a bug

Comments

@asseti6
Copy link

asseti6 commented May 27, 2019

Describe the bug
When loading a JSON based document, if it is later retrieved via getHTML() then reset to the editor content, most styling will be lost. This is important because sometimes it is appropriate to convert to HTML to manipulate the HTML content before loading it back into the editor.

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behavior:

  1. load editor with content
  2. get content via getHTML()
  3. Set content via setContent with the retrieved HTML
  4. Most styling will be lost

Expected behavior
Tiptap should support at least switching between JSON and HTML on its own marks and nodes, but it would certainly be preferable for all direct properties in the style tag to be preserved.

@asseti6 asseti6 added the Type: Bug The issue or pullrequest is related to a bug label May 27, 2019
@philippkuehn
Copy link
Contributor

ProseMirror doesn't lose styling. All HTML will be normalized as defined in toDOM of each node/mark.

For example all of them will be converted to a basic <strong>:

<p><strong>This is strong</strong></p>
<p><b>And this</b></p>
<p style="font-weight: bold">This as well</p>
<p style="font-weight: bolder">Oh! and this</p>
<p style="font-weight: 500">Cool! Right!?</p>
<p style="font-weight: 999">Up to 999!!!</p>

It's a feature to keep your stored HTML clean. If you want to support more stylings/attributes you have to define it in your schema. You can extend all extension or create your own, but I don't want to change this in the core at the moment.

@vortechron
Copy link

@philippkuehn can you show us how to preserve custom styles???

@ZolooAnzo
Copy link

how to set style in img tag in tip tap?

@piboistudios
Copy link

piboistudios commented Feb 6, 2022

ProseMirror doesn't lose styling. All HTML will be normalized as defined in toDOM of each node/mark.

For example all of them will be converted to a basic \<strong\>:

<p><strong>This is strong</strong></p>
<p><b>And this</b></p>
<p style="font-weight: bold">This as well</p>
<p style="font-weight: bolder">Oh! and this</p>
<p style="font-weight: 500">Cool! Right!?</p>
<p style="font-weight: 999">Up to 999!!!</p>

It's a feature to keep your stored HTML clean. If you want to support more stylings/attributes you have to define it in your schema. You can extend all extension or create your own, but I don't want to change this in the core at the moment.

I'm pretty sure users looking to download a rich text editor don't care about clean HTML.

Actually I'm pretty sure no one anywhere cares about clean HTML because formatting literally any well-formed XML document is trivial.

Is this really a feature? 😉

Seems more like an oversight.

Anyways I'm using TipTap for a webmail PWA. Just now realizing it strips out the styling on email replies.

Now I know my solution. :) I have to go through every single element in the library and modify the toDOM \ parseDOM methods for each one.

That's a lot of boilerplate to workaround a "feature"

@philippkuehn
Copy link
Contributor

@piboistudios Tiptap/ProseMirror is a semantic editor and that is a core feature. Feel free to use any other editor that allows any HTML. If you want to continue using Tiptap, it probably makes sense to use global attributes instead of modifying each extension.

@piboistudios
Copy link

it probably makes sense to use global attributes instead of modifying each extension.

That was actually an incredibly helpful response.

@ZolooAnzo @vortechron

See the above. This is a much more viable approach to tackling the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug The issue or pullrequest is related to a bug
Projects
None yet
Development

No branches or pull requests

5 participants