A modern programming language that makes developers happier.

kotlinlang

I want to build a code editor with doodle. What are your suggestions to start with for the text field? Are there any basic implementations for rendering highlighted text? Or should i implement that view fully from scratch? :smile: Thanks for your effort!

text highlighting is <https://nacular.github.io/doodle/docs/rendering/text|supported> using `StyledText` and text `Decoration`. you can modify the background and foreground using this approach when rendering text.

the existing `TextField` only supports single lined, installed text. so you’d need to build a custom component for this. this also makes sense because an editor would need to do a lot more clever things to support very large text data (i.e. only render sub portions of it).

this is an exciting project. would love to see what you build and whether the text control could be general purpose enough to be a new component within Doodle’s `controls` library, if you’d be interested in contributing.

Right now my experience with doodle is limited and i would introduce myself as a beginner to your library, but i would love to share my results as soon as i got them. :grinning:

please also share any feedback you have as you explore Doodle. this will help me make it more useful over time.

Where can i find the implementation of basic text editing features  like drawing the cursor line and handling other basic user inputs like selections and other keys? I would love to have those examples to orientate my application to match doodles way of handling text rendering. :D

you can see how key input works <https://nacular.github.io/doodle/docs/user_input/keyboard|here> in the docs. essentially any `View` that gains focus will receive key inputs if you’ve installed the `KeyboardModule` when launching your app.

cursor drawing and text selection would be custom. right now only the <https://nacular.github.io/doodle/docs/ui_components/overview#textfield|TextField> with a <https://nacular.github.io/doodle-api/desktop/io.nacular.doodle.theme.native/-native-theme/-companion/native-text-field-behavior.html?query=fun%20nativeTextFieldBehavior():%20DI.Module|nativeTextFieldBehavior()> handles cursor and selection. but that comes from outside Doodle. this means you’d have to create your own.

cursor drawing would be easy (once you know where you’d like to draw it :grin:). take a look at <https://nacular.github.io/doodle/docs/rendering/overview#the-canvas|how basic shapes are drawn> to see how you could use a simple filled rect or more complex path to render it to the Canvas. you’ll need to decide if the cursor is drawn in the same `View` as your text, or if you draw it to a separate one that is overlayed. doing the latter could be faster if your cursor blinks since it would avoid redrawing the text on each blink cycle.

text selection isn’t directly supported yet in Doodle. though i’ve started thinking about how to do this in a way that allows integration with the platform so you’d get things like clipboard and drag-drop support by default. that said, you can still build this yourself. i’d suggest using <https://nacular.github.io/doodle/docs/rendering/text#styled-text|StyledText> with background/foreground decoration to represent the selection.

highlighting only solves the visual part of selection. you’d need to handle things like key input to modify, copy, paste the selection etc. you’d also want to wire <https://nacular.github.io/doodle/docs/dragdrop|drag-drop> for the text component so you could use the pointer to move the selected text for example. this part is straightforward though, once you know where your selection is and what text it contains.