Documentation missing for custom HTML editors

[fregante]

This commit seem to have introduced the ability to specify a custom HTML widget to edit via mv-edit="selector" and property="output", but I can't figure out how to set that up.

https://github.com/mavoweb/mavo/blob/b544e226911aedf330660329a6d7e13bc6cfb2ae/src/primitive.js#L146-L151

My attempt was:

<p property="tags" mv-edit="#tags" mv-editor-type="popup">Red, Blue</p>
<div hidden>
	<div id="tags">
		<label><input type="checkbox" property="tag-red"> Red</label>
		<label><input type="checkbox" property="tag-blue"> Blue</label>
		<label><input type="checkbox" property="tag-green"> Green</label>
	</div>
</div>

The intention was to show a textual-list by default, but making it editable by multiple checkboxes once the user enters the element's edit mode.

Is this currently possible?

[LeaVerou]

Hello there! 👋🏼

First, this is a really old commit! The attribute is now called mv-editor.

Second, I'd avoid using hyphens in property names. Although Mavo won't complain, and they will work fine for saving, it means you can't use them in expressions (tag-red looks like tag - red, i.e. tag minus red). @DmitrySharabin I wonder if we should display a warning about this.

Now, about your question. The idea of this feature (which I think is still there, but it was never documented or tested much) was that it allows you to specify a blob of HTML as an editor, and the actual value that you read/write is specified via property=output. It does not allow you to edit/write a property via three separate properties, as I think you are trying to do here. The problem with doing this, is that you can easily imagine how the three-property editor will be used to compose a value (you can just have a property=output property that does something like rgb([red] [green] [blue]). However, when you load saved data, how do you break these strings back into their three components? Even if you could somehow specify an expression for that, I’m not even sure Mavo expressions are powerful enough to parse a string like that.

I’m afraid right now the only way to do what you're trying to do is to have an actual group, with three properties.

Does that make sense? If you have any ideas about how this functionality could be implemented, we'd love to hear it!

[fregante]

Thanks for the quick and detailed answer! I suppose that, rather than composing/breaking the values, they would be stored separately:

{
	tags: {
		tagRed: true,
		tagBlue: true,
		tagGreen: green
	}
}

p.tags would have to have a mv-display-value with an expression to somehow show these values.

[LeaVerou]

If you're ok with storing them separately, you can already do that though, what would the mv-display-value attribute do that simply placing an expression in your HTML wouldn't?

[DmitrySharabin]

I wonder if we should display a warning about this.

I think that might be helpful. Especially if an author gives a property name not explicitly (via property or mv-multiple) but implicitly (via id, name, or a class name). At what time do you think we should warn an author: from the very beginning when Mavo sees such names or if a property with such name is a part of an expression? I would suggest the latter. Since if everything works fine, there is no need to open dev tools, navigate to the Console tab to check whether there are any warnings. And all these warnings might become useless. And we know that problems might appear only when such names are a part of an expression.

But I might be mistaken.

[LeaVerou]

If the author doesn't open the console, they won't see a warning, so I'm not sure what's the downside. We should however only display the warning once, not multiple times if there are multiple properties.