Content: inline* trim empty spaces in custom tag node

1

Hello everyone!

Not sure where i’m doing wrong, but i have a custom node, that creates a span tag with attrs, and for some reason, the value of content set up as inline* makes the tag to trim the empty spaces, like this:

prosemirror-space

Any ideas or tips of what could be producing the trim?

2

Doesn’t look familiar. At which point is it being mangled? During the initial DOM parse?

3

I suppose? Not sure how i can determine that, i know that the set of the content of the editor is correct, it has the spaces but is lost at the parsing, as the resulted html by the editor doesn’t have the spaces. i’m using the tiptap flavor of prosemirror, and the node is extremely simple:

import { Node } from 'tiptap'

export default class span extends Node {

  get name() {
    return 'span'
  }

  get schema() {
    return {
      attrs: {
        class: {
          default: 'wordElement'
        },
        id: {
          default: null
        },
        m: {
          default: 0
        },
        s: {
          default: null
        },
        e: {
          default: null
        },
        value: {
          default: ''
        }
      },
      content: 'inline*',
      group: 'block',
      selectable: true,
      parseDOM: [{
        tag: 'span',
        getAttrs: dom => ({
          class: dom.getAttribute('class'),
          id: dom.getAttribute('id'),
          m: dom.getAttribute('m'),
          s: dom.getAttribute('s'),
          e: dom.getAttribute('e')
        }),
      }],
      toDOM: node => ['span', {
      class: node.attrs.class,
      id: node.attrs.id,
      m: node.attrs.m,
      s: node.attrs.s,
      e: node.attrs.e
    }, 0
      ],
    }
  }
}
4

For anyone who has a similar problem, i ended up replacing spaces with   and it worked out.

5

For anyone who has a similar problem, i ended up replacing spaces with   and it worked out.

I am not sure if this actually fixes the root problem. I have a suspicion that there might be something wrong with your CSS. Did you try inspecting the html in dev tools? Is there some rogue white space CSS property active?

6

Using preserveWhitespace prop should do the trick

parseDOM: [{
        tag: 'span',
       preserveWhitespace: 'true',
        getAttrs: dom => ({
          class: dom.getAttribute('class'),
          id: dom.getAttribute('id'),
          m: dom.getAttribute('m'),
          s: dom.getAttribute('s'),
          e: dom.getAttribute('e')
        }),
      }],
      toDOM ......