Flat span/style hierarchy

1

I’m looking for a solution to combine styles to <span>.

What I currently get:

<p>
  <span style="font-size: 50px;">T</span>
  <span style="color:rgba(0, 0, 0, 1);">
    <span style="font-size: 50px;">e</span>
  </span>
  <span style="font-size: 50px;">
    <span style="font-family: Abel;">xt</span>
  </span>
</p>

But i want to achieve the following:

<p style="text-align: left">
  <span style="color: rgb(255, 255, 255); font-weight: 400; line-height: 0.83; font-size: 24px">T</span>
  <span style="color: rgb(255, 255, 255); font-weight: 600; font-style: italic; line-height: 0.83; font-size: 24px">e</span>
  <span style="color: rgb(255, 255, 255); font-weight: 600; line-height: 0.83; font-size: 24px">x</span>
  <span style="color: rgb(255, 255, 255); font-weight: 400; line-height: 0.83; font-size: 24px">t</span>
</p>

Is this somehow possible? Because I found the second one on an application which uses ProseMirror aswell.

I didn’t found a solution to add marks without adding a new span and just combine existing style attributes.

This is necessary if you use for example “line-height”, which will be ignored on the nested version.

2

The thing you are asking for is how ProseMirror decorations work by default. Are you adding a tagName to your decorations, by any chance?

3

Honestly I don’t do anything with decorations. I looked into the documentation and didn’t really find an example. So does this mean I have to write a plugin which create the decorations depending on marks added and group them together to inline decoration? How do I get rid of the nested DOM?

4

Ah, I see, you’re using marks. Yes, those do get their own elements, always, and that’s not going to change.

5

So it’s technically possible to have an editor with different decorations (font, fontsize, color, …) and persist them in the document model? I mean the app I saw made it work somehow, I just dont know how to do it.

I think I would get it work on the rendering side (display the document). But not on the editor side, because decorations only used on the view, not state.

I’m surprised no one other expierence that issue, because an editor with fontFamily, fontSize, color seems a common usecase.

6

Decorations aren’t part of the document. So you can persist them, but you’d have to handle that yourself.

7

On the editing side, I would let ProseMirror handle these issues. I have a similar case, where I need to combine several marks in the original document (which I persist just as a JSON-encoded string) to a specific single style command in the (TeX) output.

For this, I parse the JSON-encoded string in PHP and render my output using

    private function processInlineBlock($block): string
    {
        $marks = [];

        if (isset($block->marks)) {
            foreach ($block->marks as $mark) {
                $marks[] = $mark->type;
            }

            if (count(array_intersect(['em', 'strong', 'capsToSmallCaps'], $marks)) == 3) {
                $text[] = '{\bfisc ';
                $closingBrace = '}';
            } elseif (count(array_intersect(['em', 'strong'], $marks)) == 2) {
                $text[] = '{\bfi ';
                $closingBrace = '}';
            } elseif (count(array_intersect(['em', 'capsToSmallCaps'], $marks)) == 2) {
                $text[] = '{\sci ';
                $closingBrace = '}';
            } // etc.

This is probably not the best code ever, but I think you’ll get the point.

8

I found ProseMirror to be compelling because its focus is on structure and content rather than styling, unlike most WYSIWYG editors. It was much easier to find editors - mostly even packaged as drop-in ready - that only offer editing with arbitrary styling. Those editors serve that common use case, and only that use case. I suspect that one result of this is that ProseMirror is disproportionately used by people with other use cases, who would not run into the issue you’re having. I know that in my case, I’m using ProseMirror specifically to prohibit that kind of thing.