How to set default text color with word highlighting of CodeArea?

[KnightPL]

I want to color the words which have not yet been colored with word highlightning (patterns etc.)
I tried:

CodeArea codeArea = new CodeArea();
codeArea.setId("codearea");

and in .css file

#codearea .text {
    -fx-fill: whitesmoke;
}

but it colors all text in CodeArea
Any ideas or help ?
Sorry about my bad english :)
Thanks

[JordanMartinez]

If I'm understanding you correctly, you want to do the following, right?

1. Create a CodeArea
2. Make all of that area's text styled to a "regular text" style at its starting state.
3. As time goes on, calculate what text in the area (according some some pattern) should now be styled to "highlight text"
4. As time goes on, any "highlight text"-styled text should not be restyled back to "regular text" style if it no longer adheres to some pattern.

[KnightPL]

So, first i create CodeArea object, set id (style from css file), then I add highlightning

        codeArea = new CodeArea();
        codeArea.setId("codearea");
        codeArea.richChanges()
                .filter(ch -> !ch.getInserted().equals(ch.getRemoved()))
                .subscribe(change -> {
                    codeArea.setStyleSpans(0, computeHighlighting(codeArea.getText().toLowerCase()));
                });

But still all text is colored :( Maybe Im doing something wrong

Here highlightning (without style & dark background):

I need to color rest of text, i dont have already any ideas how to do that :(
Thanks :)

[JordanMartinez]

What happens if you don't set the area's ID? Does the highlighting work then?

And what does your computeHighlighting method's innards look like?

[KnightPL]

What happens if you don't set the area's ID? Does the highlighting work then?

It works, but default text color is black and dark background need white text or something. (I need dark background so...)

computeHighlighting is method from here:
https://github.com/TomasMikula/RichTextFX/blob/master/richtextfx-demos/src/main/java/org/fxmisc/richtext/demo/JavaKeywords.java

private static StyleSpans<Collection<String>> computeHighlighting(String text) {
        Matcher matcher = PATTERN.matcher(text);
        int lastKwEnd = 0;
        StyleSpansBuilder<Collection<String>> spansBuilder
                = new StyleSpansBuilder<>();
        while(matcher.find()) {
            String styleClass =
                    matcher.group("KEYWORD") != null ? "keyword" :
                    matcher.group("PAREN") != null ? "paren" :
                    matcher.group("BRACE") != null ? "brace" :
                    matcher.group("BRACKET") != null ? "bracket" :
                    matcher.group("SEMICOLON") != null ? "semicolon" :
                    matcher.group("STRING") != null ? "string" :
                    matcher.group("COMMENT") != null ? "comment" :
                    null; /* never happens */ assert styleClass != null;
            spansBuilder.add(Collections.emptyList(), matcher.start() - lastKwEnd);
            spansBuilder.add(Collections.singleton(styleClass), matcher.end() - matcher.start());
            lastKwEnd = matcher.end();
        }
        spansBuilder.add(Collections.emptyList(), text.length() - lastKwEnd);
        return spansBuilder.create();
}

[JordanMartinez]

Wait, so you're using the computeHighlighting method from the JavaKeywords demo? Have you modified its implementation at all?

[KnightPL]

Only patterns for matcher:

private static StyleSpans<Collection<String>> computeHighlighting(String text) {
        Matcher matcher = PATTERN.matcher(text);
        int lastKwEnd = 0;
        StyleSpansBuilder<Collection<String>> spansBuilder
                = new StyleSpansBuilder<>();
        while(matcher.find()) {
            String styleClass =
                    matcher.group("MNEMONIC") != null ? "mnemonic" :
                    matcher.group("REGISTRY") != null ? "registry" :
                    matcher.group("DIRECTIVE") != null ? "directive" :
                    matcher.group("COMMENT") != null ? "comment" :
                    matcher.group("LABEL") != null ? "label_j" :
                             null; /* never happens */ assert styleClass != null;
            spansBuilder.add(Collections.emptyList(), matcher.start() - lastKwEnd);
            spansBuilder.add(Collections.singleton(styleClass), matcher.end() - matcher.start());
            lastKwEnd = matcher.end();
        }
        spansBuilder.add(Collections.emptyList(), text.length() - lastKwEnd);
        return spansBuilder.create();
    }

[JordanMartinez]

It doesn't seem like you're doing anything wrong. Have you debugged it via ScenicView yet? It does seem clear that the initial CSS overrides the highlighting CSS.

You will probably need to subclass StyledTextArea in the same way that StyleClassedTextArea does, but modify the applyStyle to account for ID-specific CSS.

[KnightPL]

Ok, thanks for help, I will try ;)

[liz3]

Same here i think, im trying to set the default text color, the highlighting works fine.
btw. im not even setting an id.
But the property: -fx-fill: white does not change anything, but it is working, trough if i set the property:
-fx-background-color: black just works fine.

[JordanMartinez]

After looking at this further, I wonder if the issue is the same thing arising from #303, part of which was fixed in #398.

[liz3]

Yeah, but not the text-color, is there maybe a work around for that issue?

[JordanMartinez]

@liz3 After looking at it a bit more, I got the default color to work by using the following CSS file:

.styled-text-area {
    -fx-background-color: black;
}
.paragraph-box > .paragraph-text > .text {
    -fx-fill: white;
}

Technically, the CSS should be .styled-text-area > .virtual-flow > .paragraph-box > .paragraph-text > .text { /* CSS */ } However, this doesn't work. Everything from paragraph-box forward works, so I'm not sure why the virtual-flow selector screws things up.

[JordanMartinez]

I've updated the CSS Reference Guide to properly demonstrate the three selector usage to style the default text.

[JordanMartinez]

Update: I found that if I replaced the > to denote immediate children with to denote within its children, then this CSS string works:

.styled-text-area {
    -fx-background-color: black;
}
.styled-text-area .virtual-flow .paragraph-box .paragraph-text .text {
    -fx-fill: white;
}

Thus, @KnightPL, you can achieve your goal without subclassing the area by using this CSS:

#codearea .virtual-flow .paragraph-box .paragraph-text .text {
    -fx-fill: whitesmoke;
}

[JordanMartinez]

I've updated CSS Ref Guide to include the full selector string