How to show IntelliJ JSON editor in dialog? - intellij-idea

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.