markdownEditor

<markdownEditor id="markdownEditor" label="MarkdownEditor" helperText="Helper text"/>

@ViewComponent
protected MarkdownEditor markdownEditor;

@Subscribe
protected void onInit(InitEvent event) {
    markdownEditor.setValue("""
            # Markdown Editor

            Use the **toolbar** or _keyboard shortcuts_ to format text.

            - Bulleted list item
            - [Link to jmix.io](https://www.jmix.io)
            - `inline code`

            > Switch to the **Preview** tab to see the rendered result.
            """);
}

<data>
    <instance id="orderDc"
              class="io.jmix.uisamples.entity.Order"
              fetchPlan="_local"/>
</data>
<layout>
    <markdownEditor id="markdownEditor" label="Order description"
                    dataContainer="orderDc" property="description"/>
    <hbox>
        <span text="Value in the container:" css="flex-shrink: 0;"/>
        <span id="spanValue"/>
    </hbox>
</layout>

@ViewComponent
protected InstanceContainer<Order> orderDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(View.InitEvent event) {
    Order order = metadata.create(Order.class);
    order.setDescription("""
            ## Order description

            **Customer:** John Doe

            **E-mail:** j.doe@jmix.io

            **Comment:** Deliver as quickly as possible.
            """);
    orderDc.setItem(order);
}

@Subscribe("markdownEditor")
protected void onMarkdownEditorValueChange(ComponentValueChangeEvent<MarkdownEditor, String> changeEvent) {
    spanValue.setText(orderDc.getItem().getDescription());
}

<markdownEditor id="markdownEditorField"
                mode="PREVIEW"/>

<markdownEditor id="markdownEditCss"
                css="--jmix-markdown-editor-default-width: 32rem;
                     --jmix-markdown-editor-header-background: var(--lumo-contrast-5pct);"/>