Prosemirror for templating

1

Hej there !

I’m new to ProseMirror, first I wanna thanks all contributors for their work. I use ProseMirror by TipTap2 for few days now and succeded for almost all I wanted to do with this editor. But I stuck for 2 days now because I can’t do something, I’ll try to explain. I want to use this editor for editing templates that have expressions(for a futur rendering with this expressions evaluated). So I want have something like that :

<table>
    <tbody>
        ::for( i in 0...10)::
        <tr>
              <td>bar::i::</td>
              <td>bar::i::</td>
              <td>bar::i::</td>
        </tr>
        ::end::
    </tbody>
</table>

But that’s impossible because it doesn’t accept “text” (expression here but it’s the same) inside <tbody>, ok. So I trid to do that :

<table>
    <tbody>
        <tr>
        <td>
        ::for( i in 0...10)::
        <table>
            <tbody>
                <tr>
                    <td>bar::i::</td>
                    <td>bar::i::</td>
                    <td>bar::i::</td>
                </tr>
            </tbody>
        </table>
        ::end::
        </td>
        </tr>
    </tbody>
</table>

And that would be wonderful if it wordek, BUT the <td> ends finally with a <p> paragraph inside it and it gives that :

<table>
    <tbody>
        <tr>
        <td>
        <p>::for( i in 0...10)::</p>
        <table>
            <tbody>
                <tr>
                    <td>bar::i::</td>
                    <td>bar::i::</td>
                    <td>bar::i::</td>
                </tr>
            </tbody>
        </table>
        <p>::end::</p>
        </td>
        </tr>
    </tbody>
</table>

And this is annoying because the expression ::for( i in 0...3 ):: will affect all what is after it until the ::end::expression, so it will repeat the closing </p> just after it and the opening <p>just before ::end::. I don’t know if it’s clear but if someone could tell me if it’s possible to not having the <p></p> inside the <td> ? In fact, I would know if it’s possible to have sometimes a raw text inside a <td> and sometimes alos I wanted to have a <p>. I know it’s not possible to mix inline and block inside ProseMirror but in HTML you can have something like <td>blabla<p></p></td>… So I wanted to know if it’s kind of possible using ProseMirror, or maybe I miss something maybe I’m a bit tired and haven’t thought about an alternative ? if someone can advice me it would be cool.

Thanks for reading my boring text and for your help :slight_smile:

2

No, ProseMirror won’t allow you to mix inline and block content.

What you’re trying to do may be possibly by introducing custom ‘template directive’ nodes (possibly in an inline and a block variant), and allowing those wherever you want to allow these directives. You’ll then have to set up a user interface for users to insert and manipulate these, and possibly have some CSS magic to make sure they show up correctly in weird positions like tables.

3

Thanks @marijn for your answer !

Yes that’s what about I also thought, something maybe like <expr>::myExpr::</expr> but I will be forced to “parse” these nodes and remove them when doing editor.getHTML(). As there are parseDom()and toDom()methods in the nodes, it would be nice to have a method that return how the node should be “returned” when calling getHTML() from the editor :slight_smile: