Add an inline style to a text segment

[jeffreyguenther]

Is possible to add an inline style to substring? Right now, setStyle(String style) styles the whole control.

Can we get a method like?

setStyle(int from, int to, String style)

[TomasMikula]

Hi Jeffrey,
inline styles are currently not supported. Although it wouldn't be very hard to implement this, what is your use case that benefits from using inline styles over style classes? Is it the case that you cannot enumerate all the possible style classes in advance?

[jeffreyguenther]

My use case is to use the CodeArea as a richtext editor that uses JavaFX CSS for styling instead of something like an HTMLEditor. In that case, it is difficult to create CSS classes in advance for every possible colour, typeface, and style. With the setStyle method I described, your code area becomes an awesome rich text editor.

[TomasMikula]

I see.
I'm currently thinking of a more general way of applying styles to segments of text. Something like

class StyledTextArea<StyleType> {
    public StyledTextArea(StyleApplicator<StyleType> styleApplicator) {
        // ...
    }
}

interface StyleApplicator<StyleType> {
    void applyStyle(javafx.scene.text.Text text, StyleType style);
}

That is, your style information could be anything as long as you provide a way to apply it to a Text node.

Current CodeArea would then become

class CodeArea extends StyledTextArea<Set<String>> {
    public CodeArea() {
        super(new StyleApplicator<Set<String>>() {
            public void applyStyle(Text text, Set<String> styleClasses) {
                text.getStyleClass().setAll(styleClasses);
            }
        });
        // ...
    }
}

Your rich text area would be

class RichTextArea extends StyledTextArea<String> {
    public RichTextArea() {
        super(new StyleApplicator<String>() {
            public void applyStyle(Text text, String style) {
                text.setStyle(style);
            }
        });
        // ...
    }
}

I may implement this, but be aware that there is at least one more feature missing to implement a rich text editor, namely line wrapping (see Dropped Features). Although that one wouldn't be difficult to implement.

[jeffreyguenther]

I just noticed that you dropped line wrapping. Definitely need that!

I was just working my way through your code to see how to add the method I proposed. I'm still new to control development in JavaF, so it took me a couple minutes to figure out how things are organized.

How quickly are you looking to implement the more generic approach? It is just an idea or are you going ahead with it? It is worth me coding up the setStyle method?

[TomasMikula]

I expect it shouldn't take me more than ~1-2 hours, which I could perhaps find tomorrow or until the end of the working week.

For line wrapping, feel free to open a separate issue.

[TomasMikula]

Done. Check out InlineStyledTextArea

[TomasMikula]

Now that we don't use fixed-width font by default, navigation by Up and Down arrows will look strange, because it maintains the character position, not the x-offset. They are the same with a fixed-width font, but not in general. If you move Up/Down between a line of "i"s and a line of "m"s, the caret will be displaced quite a bit.

[TomasMikula]

Just for the record, this is fixed in the latest build. Now, on vertical navigation, pixel offset is maintained instead of character offset.

[corie-lc]

is it possible to have two different styles on one text segment?

[Jugen]

Yes it is, but it depends what you mean. If I'm not mistaken styles can't be overlaid separately, as in apply one style and then later on apply another style over the previous one. However you can combine styles and apply them on a segment, so you can get the previous style on a segment and add/update it and then reapply it to the segment.

[corie-lc]

@Jugen how are we to change text with lists? I can do

InlineTextArea.setStyle(selection.start, selection.end, "-fx-fill: green");

how could i add multiple styles to selected text?

[Jugen]

@corie-lc can you give a more comprehensive example of what you want to do please ....

[Sylordis]

@corie-lc can you give a more comprehensive example of what you want to do please ....

To take over what @corie-lc asked for, is there a method that can allow to set direct CSS styling to a text. For example, my users can define text styles how they see fit and change them, so I cannot create CSS files with the required classes.
For example, they will define a text style "note" that is italic with a certain colour, and can assign this style to a portion of text whenever they want.
But it seems that setStyle only takes CSS classes as arguments for the collection, not raw CSS styling, so calling setStyle(<start>, <end>, List.of("-fx-fill: #b20000", "-fx-font-style: italic")) does not do anything.

[Jugen]

You should use an InlineCssTextArea then.