custom style does not preserve

[vortechron]

here is my html:

<p style="font-size:10px">Hello world</p>

after assign it to editor on content attribute:

<p>Hello world</p>

[Jaromudr]

@vortechron

you can extends original schema. Something like this:

import { Image as TiptapImage } from 'tiptap-extensions'
import { sanitizeStyleAttr  } from 'vue-dashboard-ui/editor-extensions/sanitize'
import ImageView from 'vue-dashboard-ui/editor-extensions/ImageView.vue'

export default class Image extends TiptapImage {
  get schema() {
    return {
      inline: true,
      attrs: {
        src: {},
        alt: {
          default: null
        },
        title: {
          default: null
        },
        style: {
          default: null
        }
      },
      group: 'inline',
      parseDOM: [
        {
          tag: 'img[src]',
          getAttrs: dom => ({
            src: dom.getAttribute('src'),
            title: dom.getAttribute('title'),
            alt: dom.getAttribute('alt'),
            style: sanitizeStyleAttr(dom.getAttribute('style'))
          })
        }
      ],
      toDOM: node => ['img', node.attrs]
    }
  }

  get view() {
    return ImageView
  }
}

[vortechron]

what is the repo link for this? @Jaromudr

[Jaromudr]

@vortechron it's from private repo, but you can analize how tiptap describe nodes in node/mark folders:

https://github.com/scrumpy/tiptap/blob/master/packages/tiptap-extensions/src/nodes/Image.js

[vortechron]

can i see santize file @Jaromudr

[Jaromudr]

@vortechron I will share it later

[Jaromudr]

@vortechron https://gist.github.com/Jaromudr/f46e6a08682291e6938965d6501d36e8

[vortechron]

@Jaromudr its not working. is there a way for me to do something like this?

new Editor({ preserveStyles: true })

[Jaromudr]

@vortechron I just a user, that used tiptap and customize it in a way to support style attribute. As I see from code, it does not support that, but you can customize it as I do, you need just dig deeper how Prose-mirror work. Tiptap is just an wrapper that add some useful functionality. It support only things that are described in schema. In my case I extend almost all Nodes and Marks to support style(and other) attributes.

 editor: new Editor({
        extensions: [
          new Blockquote(),
          new CodeBlock(),
          ...
          new ImageThatSupportPreserveStyles()

[mlbanham]

I'm using CodeBlockHighlight and I need to extract html including the hljs classes - I tried building a custom subclass of CodeBlockHighlight based on the example above - no luck though. I ended up extracting raw html from the DOM with querySelector, which works OK but isn't in the spirit of things. Any suggestions or examples? Something like { preserveStyles: true } as suggested above would be pretty nice.

[hanspagel]

We see it as a feature that content gets cleaned up. If you want to keep certain styles it’s the best approach to allow them through custom nodes. ✌️

[newboy2006hosur]

We see it as a feature that content gets cleaned up. If you want to keep certain styles it’s the best approach to allow them through custom nodes. ✌️

What do you mean by custom node? Can you provide example? All I want to do is preserve all style attribute in all the HTML elements being added. How can i do that? Why is that so complicated to do? I don't want to learn prosemirror just for that. It doesn't make sense. Even if you consider it a feature, how do I turn it off. Somebody help. This causing me so much stress.