Kate gains Support for Inline Notes

Thanks to Michal Srb and Sven Brauch for pioneering the work an a new KTextEditor interface that allows applications like Kate, KDevelop, etc. to display inline notes in a text document. As demo, we quickly prototyped one application to display colors in CSS documents:

Clicking on the color rectangle will launch the color chooser:

Choosing a color and clicking OK finally adapts the color in the CSS document:

The code for this is just a demo and looks as follows:

class NoteProvider : public KTextEditor::InlineNoteProvider {
    QVector<int> inlineNotes(int line) const override
        if (line == 1) return { 29 };
        if (line == 11) return { 29 };
        if (line == 12) return { 29 };
        if (line == 13) return { 29 };

        return {};

    QSize inlineNoteSize(const KTextEditor::InlineNote& note) const override
        return QSize(note.lineHeight(), note.lineHeight());

    void paintInlineNote(const KTextEditor::InlineNote& note, QPainter& painter) const override
        const auto line = note.position().line();
        const auto color = QColor(note.view()->document()->text({line, 22, line, 29}));
        painter.drawRoundedRect(1, 1, note.width() - 2, note.lineHeight() - 2, 2, 2);

    void inlineNoteActivated(const KTextEditor::InlineNote& note, Qt::MouseButtons buttons, const QPoint& globalPos) override
        const int line = note.position().line();
        const auto oldColor = QColor(note.view()->document()->text({line, 22, line, 29}));
        const auto newColor = QColorDialog::getColor(oldColor);
        note.view()->document()->replaceText({line, 22, line, 29}, newColor.name(QColor::HexRgb));

    void inlineNoteFocusInEvent(const KTextEditor::InlineNote& note, const QPoint& globalPos) override
    {} // unused in this example

    void inlineNoteFocusOutEvent(const KTextEditor::InlineNote& note) override
    {} // unused in this example

    void inlineNoteMouseMoveEvent(const KTextEditor::InlineNote& note, const QPoint& globalPos) override
    {} // unused in this example

// later in code:
auto provider = new NoteProvider();
// final cleanup

As you can see, it’s actually not much code at all: We have to derive a class from KTextEditor::InlineNoteProvider, and then register an instance of our Note Provider in the KTextEditor::View. In a next step, we implement the inlineNotes(), inlineNoteSize(), and the paintInlineNote() functions to get basic visual drawing at the desired location. The above code is just a tech-demo, since it uses hard-coded lines and color positions. Additionally, one can also track mouse events (unused in the example above). On mouse click, we open the QColorDialog to let the user choose a new color.

To give more examples of what’s possible, the initial Phabricator review requests contained many other interesting examples (the examples were really implemented). From review request D12662:

Kate showing additional information for loops and structs.

Or a KDevelop addition that adds a lot of meta information on the current code if desired:

KDevelop showing detailed code meta information

We believe this addition to the KTextEditor component has a lot of potential for nice features and plugins. Feel free to use this interfaces starting with KDE Frameworks 5.50. Happy coding! 🙂

A big thanks also goes to this year’s Akademy organizers. Thanks to this event, we could meet up in person and also finalize the InlineNoteInterface, InlineNoteProvider, and InlineNote class to make it ready for public release. This again shows the importance of the yearly KDE conferences since it enables us to significantly push things forward.

8 thoughts on “Kate gains Support for Inline Notes”

    1. Thanks for the kind words. However, I hope that readers are not disappointed: While this is technically now all possible, there is no plugin or any other application that makes use of this, yet… So for now, this feature remains invisible. But Sven plans to use it in KDevelop. Let’s see how it works out 🙂

  1. Ho my… that’s an amazing idea.
    I can’t wait to see this used in KDevelop for C++. The struct size/padding display would have been so useful for me in some past projects.

    How does this work with block selection ?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.