How can I create a standard IDEA view in a JPanel for a custom plugin?

I am displaying HTML generated from Markdown in an editor tab and instead of the plain vanilla text editor I would like to have a standard editor in that tab that the plugin populates with generated HTML.

I tried creating an editor with the right file type, using:

    EditorFactory editorFactory = EditorFactory.getInstance();
    documentHtml = editorFactory.createDocument("");
    FileType test = findHtmlFileType();
    editor = editorFactory.createEditor(document, project, test, true);
    // find HTML file type
    protected FileType findHtmlFileType() {
        FileType[] fileTypes = FileTypeManager.getInstance().getRegisteredFileTypes();
        for (FileType fileType : fileTypes) {
            String name = fileType.getName();
            if (name.equals("HTML")) return fileType;
        return fileTypes[0];

I even tried to use a scratch FilleType. Firstly, I get just the content view, without the gutters. The view is always empty, even when I do setText() in the document. However, I can type in it but no syntax highlighting is performed.

I know I am not going about it the right way because it is done in many places in the IDE (syntax color preview, code styles, todo, etc.) but I cannot find information on what is the right way to do it.

Any help would be greatly appreciated.

Comment actions Permalink

Use the EditorTextField class.

(Generally speaking, if you know a particular place in the IDEA UI that does something that you need, you can always find its implementation in the IntelliJ IDEA Community Edition source code and see how it is done.)

Comment actions Permalink

Thank you very much Dmitry for the pointer. That's all I needed, a pointer in the right direction where to start digging.

I knew it had to be simple, and it is. :D

Here is the code for others who are interested in doing the same thing,

I have this in the constructor for my editor class:

public class MarkdownPreviewEditor extends UserDataHolderBase implements FileEditor

The code to create the language aware text viewer is:

Language language = Language.findLanguageByID("HTML");
FileType fileType = language != null ? language.getAssociatedFileType() : null;
myTextViewer = new EditorTextField(EditorFactory.getInstance().createDocument(""), project, fileType, true, false);
scrollPane = new JBScrollPane(myTextViewer);

When it needs updating, it also could not be simpler:


Again, thank you very much. I now have this as the HTML tab view for the plugin:

Screen Shot 2015-08-25 at 2.17.41 PM.png

Comment actions Permalink

Update for posterity and to help others looking for this information.

For even better results I now create a viewer (readonly editor) which uses EditorImpl and set its highligher to HTML. This way you also get the line number gutter.

In constructor create the view:

Language language = Language.findLanguageByID("HTML");
FileType fileType = language != null ? language.getAssociatedFileType() : null;
Document myDocument = EditorFactory.getInstance().createDocument("");
myTextViewer = (EditorImpl) EditorFactory.getInstance().createViewer(myDocument, project);
if (fileType != null) myTextViewer.setHighlighter(EditorHighlighterFactory.getInstance().createEditorHighlighter(project, fileType));

declare a function to update the view text:

protected void updateRawHtmlText(final String htmlTxt) {
    final DocumentEx myDocument = myTextViewer.getDocument();

    ApplicationManager.getApplication().runWriteAction(new Runnable() {
        public void
run() {
            CommandProcessor.getInstance().executeCommand(project, new Runnable() {
                public void
run() {
                    myDocument.replaceString(0, myDocument.getTextLength(), htmlTxt);
                    final CaretModel caretModel = myTextViewer.getCaretModel();
                    if (caretModel.getOffset() >= myDocument.getTextLength()) {
            }, null, null, UndoConfirmationPolicy.DEFAULT, myDocument);

then to update the text in the view,:


To get something that looks like this:

Screen Shot 2015-08-25 at 7.13.25 PM.png

Which is exactly what I was looking for.

Thanks again, Dmitry for giving me a great pointer. Much appreciated.


Comment actions Permalink

How does a question get marked Answered?

I think this one has been answered. No?


Please sign in to leave a comment.