[Solved] Code editor using QML

[Jmgr]

Hi !

I'm currently trying to integrate a code editor within QML. Using Qt 5.1 and the TextArea I achieved some of my goals. Syntax highlighting works well, code completion should work but I saw no example of that.

My next objective is to draw line numbers at the left of the TextArea. I have managed to draw static numbers of course, but how can I know how far the user has scrolled the TextArea, so that I can update the line numbers ?

My plan B was to use QWidgets (QPlainTextEdit, etc.) to do this and insert it into QML. Sadly this seems to be impossible since QtQuick 2.

So I'm a bit stuck here. I would prefer not do the whole interface in QWidgets since it is supposed to be drawn over an OpenGL scene.

[Jens]

TextArea has a contentY property you can use to find the offset of the TextArea contentItem. You could create a stand alone Text item and simply bind its y-property to the contentY of the TextArea.

[Jmgr]

I cannot find any property named contentY, there is a contentItem property but its y property does not change when I scroll down.

onContentItemChanged is also never called when scrolling down.

Could you give me some basic example on how to make an item "follow" the TextArea's scroll value ?

[Jens]

Here is a nice attempt. Biggest issue is to get a reliable row height to match the TextArea. To get it proper I think you might have to use the C++ QQuickTextDocument API. Of course with rich text and variable sized fonts, it is going to be a bit difficutlt to match them up.
@
Item {
anchors.fill: parent
Rectangle {
id: lineColumn
property int rowHeight: textarea.font.pixelSize + 3
color: "#f2f2f2"
width: 50
height: parent.height
Rectangle {
height: parent.height
anchors.right: parent.right
width: 1
color: "#ddd"
}
Column {
y: -textarea.flickableItem.contentY + 4
width: parent.width
Repeater {
model: Math.max(textarea.lineCount + 2, (lineColumn.height/lineColumn.rowHeight) )
delegate: Text {
id: text
color: "#666"
font: textarea.font
width: lineColumn.width
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
height: lineColumn.rowHeight
renderType: Text.NativeRendering
text: index
}
}
}
}
TextArea {
id: textarea
anchors.left: lineColumn.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
wrapMode: TextEdit.NoWrap
frameVisible: false
}
}
@

[Jmgr]

Works great, many thanks!

[qttester5]

This is interesting, can you share how you did the code completion and syntax highlighting and maybe any automatic line indents as you would expect to have in a code editor?

[Jmgr]

Sorry for the late reply.

Actually I gave up with my idea of using QML for this project because I could not get all the features I wanted without re-coding the whole QML item from scratch. (As far as I know, you cannot "enhance" a built-in QML item)

I managed to get syntax highlighting working by using a QSyntaxHighlighter on a QTextDocument that you can get from the QML item, if I remember correctly. (I don't have the sources of this old project anymore)

As for the indentation problem, I posted in this forum but never got any answer so I suppose it is not possible: http://qt-project.org/forums/viewthread/29623/

[qttester5]

Thanks. That's all very interesting, appreciate the info.