codeEditor

<hbox width="100%" wrap="true">
    <checkbox id="highlightCheckbox" label="Highlight active line" value="true"/>
    <checkbox id="highlightGutterCheckbox" label="Highlight gutter line" value="true"/>
    <checkbox id="gutterCheckbox" label="Show Gutter" value="true"/>
    <checkbox id="lineNumbersCheckbox" label="Line numbers" value="true"/>
    <checkbox id="printMarginCheckbox" label="Print margin" value="true"/>
    <checkbox id="useSoftTabsCheckbox" label="Use soft tabs" value="true"/>
    <checkbox id="textWrapCheckbox" label="Text wrap" value="false"/>
</hbox>
<codeEditor id="codeEditor"/>

@ViewComponent
protected CodeEditor codeEditor;

@Subscribe("highlightCheckbox")
protected void onHighlightCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setHighlightActiveLine(event.getValue());
}

@Subscribe("highlightGutterCheckbox")
protected void onHighlightGutterCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setHighlightGutterLine(event.getValue());
}

@Subscribe("gutterCheckbox")
protected void onGutterCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setShowGutter(event.getValue());
}

@Subscribe("lineNumbersCheckbox")
protected void onLineNumbersCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setShowLineNumbers(event.getValue());
}

@Subscribe("printMarginCheckbox")
protected void onPrintMarginCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setShowPrintMargin(event.getValue());
}

@Subscribe("useSoftTabsCheckbox")
protected void onUseSoftTabsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setUseSoftTabs(event.getValue());
}

@Subscribe("textWrapCheckbox")
protected void onTextWrapCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setTextWrap(event.getValue());
}

<data>
    <instance id="orderReportDc"
              class="com.company.onboarding.entity.OrderReport"> (1)
        <loader id="orderReportDl"/>
        <fetchPlan extends="_base"/> (2)
    </instance>
</data>
    <codeEditor mode="XML"
                dataContainer="orderReportDc"
                property="code"/> (3)

<hbox width="100%" wrap="true">
    <select id="modeComboBox" label="Mode"/>
    <select id="themeComboBox" label="Theme"/>
</hbox>
<codeEditor id="codeEditor"/>

@ViewComponent
protected CodeEditor codeEditor;
@Subscribe("modeComboBox")
protected void onModeComboBoxValueChange(
        ComponentValueChangeEvent<JmixSelect<CodeEditorMode>, CodeEditorMode> event) {
    codeEditor.setMode(event.getValue());
    codeEditor.setValue(resources.getResourceAsString(DEFAULT_FILE_PATH + event.getValue()));
}

@ViewComponent
protected CodeEditor codeEditor;
@Subscribe("themeComboBox")
protected void onThemeComboBoxValueChange(
        ComponentValueChangeEvent<JmixSelect<CodeEditorTheme>, CodeEditorTheme> event) {
    codeEditor.setTheme(event.getValue());
}

<hbox width="100%" wrap="true" alignItems="BASELINE">
    <select id="modeSelect" label="Mode"/>
    <checkbox id="defaultSuggestionsCheckbox" label="Default suggestions" value="true"/>
    <checkbox id="liveSuggestionsCheckbox" label="Live suggestions" value="true"/>
</hbox>
<codeEditor id="codeEditor" height="100%" minHeight="15em"
            defaultSuggestionsEnabled="true"
            liveSuggestionsEnabled="true"/>

private static final String DEFAULT_FILE_PATH = "io/jmix/uisamples/codeeditorexample/";

@ViewComponent
private CodeEditor codeEditor;
@ViewComponent
private JmixSelect<CodeEditorMode> modeSelect;

@Autowired
private Resources resources;

@Subscribe
public void onInit(InitEvent event) {
    ComponentUtils.setItemsMap(modeSelect, getModeItemsMap());
    modeSelect.setValue(CodeEditorMode.SQL);
}

@Subscribe("defaultSuggestionsCheckbox")
public void onDefaultSuggestionsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setDefaultSuggestionsEnabled(event.getValue());
}

@Subscribe("liveSuggestionsCheckbox")
public void liveSuggestionsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    codeEditor.setLiveSuggestionsEnabled(event.getValue());
}

@Subscribe("modeSelect")
public void onModeSelectValueChange(
        ComponentValueChangeEvent<JmixSelect<CodeEditorMode>, CodeEditorMode> event) {
    codeEditor.setMode(event.getValue());
    codeEditor.setValue(resources.getResourceAsString(DEFAULT_FILE_PATH + event.getValue()));
}

private Map<CodeEditorMode, String> getModeItemsMap() {
    LinkedHashMap<CodeEditorMode, String> map = new LinkedHashMap<>();
    map.put(CodeEditorMode.JAVA, "Java");
    map.put(CodeEditorMode.CSS, "CSS");
    map.put(CodeEditorMode.XML, "XML");
    map.put(CodeEditorMode.JSON, "JSON");
    map.put(CodeEditorMode.JAVASCRIPT, "JavaScript");
    map.put(CodeEditorMode.HTML, "HTML");
    map.put(CodeEditorMode.TEXT, "Text");
    map.put(CodeEditorMode.GROOVY, "Groovy");
    map.put(CodeEditorMode.PROPERTIES, "Properties");
    map.put(CodeEditorMode.SQL, "SQL");
    map.put(CodeEditorMode.PYTHON, "Python");
    map.put(CodeEditorMode.SWIFT, "Swift");
    map.put(CodeEditorMode.C_CPP, "C++");
    return map;
}

<codeEditor id="codeEditor" height="100%" minHeight="15em"
            suggestOn="\."/>

@Autowired
private DataManager dataManager;

@Install(to = "codeEditor", subject = "suggester")
public List<Suggestion> codeEditorSuggestions(Suggester.SuggestionContext context) {
    return loadCustomers().stream()
            .map(customer -> new Suggestion(customer.getInstanceName(), customer.getInstanceName(), "Customer"))
            .toList();
}

private List<Customer> loadCustomers() {
    return dataManager.load(Customer.class)
            .all()
            .fetchPlan(FetchPlan.INSTANCE_NAME)
            .list();
}