How to show IntelliJ JSON editor in dialog?

Question

I want to show below kind of an editor inside a dialog in an plugin that I'm developing for Kotlin and Java. I tried the below code snippet

    editorTextField.setEnabled(true);
    editorTextField.setOneLineMode(false);
    editorTextField.setFileType(new JsonFileType());

Could someone point out how to achieve this?

Particularly I need the line numbers, JSON syntax highlighting and code folding I can see all the code specifications here. Please help me in learning how can I use them in my plugins.

JSON editor :

Answer 1

class JsonOutputDialog(language: Language, project: Project, text: String) : DialogWrapper(project) {

    private val panel = JPanel(BorderLayout())

    init {
        super.setOKActionEnabled(false)

        init()

        val editorTextField = CustomEditorField(language, project, text)
        editorTextField.setOneLineMode(false)
        editorTextField.preferredSize = Dimension(800, 600)

        editorTextField.isVisible = true

        panel.add(editorTextField)

        editorTextField.setCaretPosition(0)
    }

    override fun createCenterPanel() = panel
}

class CustomEditorField(language: Language, project: Project, s: String) : LanguageTextField(language, project, s) {

    override fun createEditor(): EditorEx {
        val editor = super.createEditor()
        editor.setVerticalScrollbarVisible(true)
        editor.setHorizontalScrollbarVisible(true)

        val settings = editor.settings
        settings.isLineNumbersShown = true
        settings.isAutoCodeFoldingEnabled = true
        settings.isFoldingOutlineShown = true
        settings.isAllowSingleLogicalLineFolding = true
        settings.isRightMarginShown=true
        return editor
    }
}

This is what you need to do. The key here is to use LanguageTextField instead of EditorTextField and override the createEditor() method to configure all the options that you are looking for like Line Numbers and Code Folding.