How to implement rich text logic on QML TextEdit w

Question

I have a TextEdit in my QML file and I have a QSyntaxHighlighter C++ class. I want to specify the highlighting logic in the C++ class and apply it to the TextEdit, but I am not sure how to make the connection between the QML object and the C++ class. Can you also please provide some sample code? I couldn't find how to implement it with the Qt documentation.

Answer 1

Sample implementation:

HighlightComponent.h

class HighlightComponent : public QObject
{
Q_OBJECT
    //@formatter:off
    Q_PROPERTY(QString text
                       READ getText
                       WRITE setText
                       NOTIFY textChanged)
    //@formatter:on
    using inherited = QObject;
public:
    explicit HighlightComponent(QObject* parent = nullptr);

    static void registerQmlType();

    const QString& getText()
    {
        return _text;
    }

    void setText(const QString& newText)
    {
        if (newText != _text)
        {
            _text = newText;
            emit textChanged();
        }
    }

    Q_INVOKABLE void onCompleted();

signals:
    void textChanged();

private:
    std::unique_ptr<QSyntaxHighlighter> _highlight;
    QString _text = "";
};

HighlightComponent.cpp

HighlightComponent::HighlightComponent(QObject* parent)
        : inherited(parent)
{
}

void HighlightComponent::onCompleted()
{
    auto property = parent()->property("textDocument");
    auto textDocument = property.value<QQuickTextDocument*>();
    auto document = textDocument->textDocument();
    //TODO init here your QSyntaxHighlighter
}

void HighlightComponent::registerQmlType()
{
    qmlRegisterType<HighlightComponent>("com.HighlightComponent", 1, 0, "HighlightComponent");
}

main.cpp

int main(int argc, char* argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    HighlightComponent::registerQmlType();

    engine.load(QUrl(QStringLiteral("qrc:/view/main.qml")));

    return app.exec();
}

Sample QML

TextArea {
    id: testTextArea
    text: testTextArea.text
    //inputMethodHints: Qt.ImhNoPredictiveText

    onTextChanged: {
        testTextArea.text = text
    }

    HighlightComponent {
        id: testTextArea
        Component.onCompleted: onCompleted()
    }
}

Links:

https://wiki.qt.io/How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function

http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html

http://wiki.qt.io/Spell-Checking-with-Hunspell

http://doc.qt.io/qt-5/qtqml-cppintegration-interactqmlfromcpp.html

http://doc.qt.io/qt-5/qtwidgets-richtext-syntaxhighlighter-example.html

Answer 2

In case someone needs a more detailed explanation for this. First, I created a Q_PROPERTY inside a custom C++ class.

Q_PROPERTY(QQuickTextDocument* mainTextEdit READ mainTextEdit WRITE setMainTextEdit NOTIFY mainTextEditChanged)

Then I assign textEdit.textDocument to the Q_PROPERTY in the QML.

customClass.mainTextEdit = textEdit.textDocument

Then I call initHighlighter() (the function has to be Q_INVOKABLE) in my QML which calls the constructor of my highlighter class and passes it the text document of the textEdit.

void initHighlighter()
{
Highlighter *highlighter;
highlighter = new Highlighter(m_mainTextEdit->textDocument());
}

Note: The custom highlighter class needs to be derived from QSyntaxHighlighter.

Answer 3

You can use TextEdit::textDocument, which holds an instance of QQuickTextDocument, to gain access to the underlying QTextDocument that you can pass to QSyntaxHighlighter constructor.