What is the proper way to lazily add styles to paragraphs in RichTextFX?

[PavelTurk]

Suppose I have a document with a huge number of paragraphs (e.g., 10,000,000+). It makes no sense to add styles to all paragraphs at once for performance reasons. What is the correct approach to:

• Apply styles only when paragraphs become visible (e.g., during scrolling).
• Avoid showing unstyled paragraphs (ensure styles are applied before rendering).

Is there a built-in mechanism in RichTextFX for this, or do I need a custom solution?

[PavelTurk]

For example in JavaFX CodeArea they use decorator:

        codeArea.setSyntaxDecorator(new SyntaxDecorator() {
            @Override
            public RichParagraph createRichParagraph(CodeTextModel ctm, int i) {
                System.out.println("LINE: " + i);
                StyleAttributeMap a = StyleAttributeMap.builder().setBold(true).build();
                RichParagraph.Builder b = RichParagraph.builder();
                b.addSegment(ctm.getPlainText(i), a);
                b.addHighlight(19, 4, Color.rgb(255, 128, 128, 0.5));
                b.addHighlight(20, 7, Color.rgb(128, 255, 128, 0.5));
                return b.build();
            }

            @Override
            public void handleChange(CodeTextModel ctm, TextPos tp, TextPos tp1, int i, int i1, int i2) {

            }
        });

createRichParagraph method is called every time when view is updated. For example, when user adds one character about 110 lines are updated and for every paragraph createRichParagraph is called. Is it possible to have a handler that will be called on paragraph update in RichTextFX?

[Jugen]

Yes, have a look at JavaKeywordsDemo

[PavelTurk]

@Jugen Thank you very much for your help. Do I understand correctly - you are talking about this one:

        // recompute syntax highlighting only for visible paragraph changes
        // Note that this shows how it can be done but is not recommended for production where multi-
        // line syntax requirements are needed, like comment blocks without a leading * on each line. 
        codeArea.getVisibleParagraphs().addModificationObserver
        (
            new VisibleParagraphStyler<>( codeArea, this::computeHighlighting )
        );

[Jugen]

Yes :-)

[PavelTurk]

@Jugen Thank you very much. This is what I was looking for. The only problem it doesn't work as expected :).

This is my code - the idea is very simple to make every paragraph red:

class ParagraphStyler implements
        Consumer<ListModification<? extends Paragraph<Collection<String>, String, Collection<String>>>> {

    private final org.fxmisc.richtext.CodeArea area;

    private final BiFunction<Integer, String, StyleSpans<Collection<String>>> styler;

    private int prevParagraph, prevTextLength;

    public ParagraphStyler(org.fxmisc.richtext.CodeArea area, BiFunction<Integer, String, StyleSpans<Collection<String>>> styler) {
        this.styler = styler;
        this.area = area;
    }

    @Override
    public void accept(ListModification<? extends Paragraph<Collection<String>, String, Collection<String>>> lm) {
        if (lm.getAddedSize() > 0) Platform.runLater(() -> {
            int paragraph = Math.min(area.firstVisibleParToAllParIndex() + lm.getFrom(),
                    area.getParagraphs().size() - 1);
            String text = area.getText(paragraph, 0, paragraph, area.getParagraphLength(paragraph));
            if (paragraph != prevParagraph || text.length() != prevTextLength) {
                if (paragraph < area.getParagraphs().size() - 1) {
                    int startPos = area.getAbsolutePosition(paragraph, 0);
                    area.setStyleSpans(startPos, styler.apply(paragraph, text));
                }
                prevTextLength = text.length();
                prevParagraph = paragraph;
            }
        });
    }
};

public class CodeAreaTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        CodeArea codeArea = new CodeArea();

        var red = Collections.singleton("red");

        BiFunction<Integer, String, StyleSpans<Collection<String>>> styler = (paragraphNumber, paragraphText) -> {
            System.out.println("LINE: " + paragraphNumber + ", text: " + paragraphText);
            StyleSpansBuilder<Collection<String>> spansBuilder = new StyleSpansBuilder<>();
            spansBuilder.add(red, paragraphText.length() + 1); // 1 - EOL
            return spansBuilder.create();
        };
        codeArea.getVisibleParagraphs().addModificationObserver(new ParagraphStyler(codeArea, styler));
        VirtualizedScrollPane scrollPane = new VirtualizedScrollPane(codeArea);

        Scene scene = new Scene(scrollPane, 1000, 600);
        String css = ".red { -fx-fill: red; } ";
        scene.getStylesheets().add("data:text/css," + css);

        primaryStage.setScene(scene);
        primaryStage.show();

        String content = getContent();
        codeArea.appendText(content);
    }

    private String getContent() throws Exception {
        String url = "https://raw.githubusercontent.com/openjdk/valhalla/e1280b3e11a98d98c0fdad73ce9c8bb9d2417a70/src/jdk.compiler/share/classes/com/sun/tools/javac/parser/JavacParser.java";
        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create(url))
                .build();
        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        String content = response.body();
        return content;
    }

    public static void main(String[] args) {
        launch(args);
    }

}

And this is result:

As you can see, the number of unpainted lines at the end of the document is increasing. The console data shows that not all lines are being passed to the styler. I use RichTextFX 0.11.5. Could you say how to fix it?

[PavelTurk]

@Jugen Could you say, what is the proper way to update styles when this approach is used? For example when it is necessary to update only styles for paragraphs 1 - 100? I tried this way:

var green = Collections.singleton("green");
        var button = new Button("Test");
        button.setOnAction(e -> {
            for (var i = 0; i < 100; i++) {
                var p = codeArea.getParagraphs().get(i);
                StyleSpansBuilder<Collection<String>> ssb = new StyleSpansBuilder<>();
                ssb.add(green, p.getText().length() + 1);
                p.restyle(0, ssb.create());
            }
            System.out.println("Updated");
        });

but it didn't work. I also tried to use absolute position and codeArea.setStyleSpans(startPos, styles); but it didn't work either.

[PavelTurk]

@Jugen Any ideas? Or it is a bug that should be fixed?

I’m currently working on a project that uses two code areas — one based on JavaFX and one based on RichTextFX. The core of the project is already complete and works with both JFX and RTFX. The only remaining tasks are implementing lazy style application and style updates in RTFX. Once those are done, the project will be ready to share with the community for feedback and review.

[Jugen]

I'll try and have a look next week .....

[PavelTurk]

@Jugen Thank you very much!

[Jugen]

@PavelTurk Sorry for the delayed response. Last week didn't go as planned and then this issue took me some time to figure out.
Anyway, see PR #1277 to address the issue you show in the video clip you posted.

[Jugen]

@Jugen Could you say, what is the proper way to update styles when this approach is used? For example when it is necessary to update only styles for paragraphs 1 - 100? I tried this way:

var green = Collections.singleton("green");
        var button = new Button("Test");
        button.setOnAction(e -> {
            for (var i = 0; i < 100; i++) {
                var p = codeArea.getParagraphs().get(i);
                StyleSpansBuilder<Collection<String>> ssb = new StyleSpansBuilder<>();
                ssb.add(green, p.getText().length() + 1);
                p.restyle(0, ssb.create());
            }
            System.out.println("Updated");
        });

but it didn't work. I also tried to use absolute position and codeArea.setStyleSpans(startPos, styles); but it didn't work either.

WRT your green button test above. It doesn't work because Paragraph is an immutable object, so p.restyle( ... ) returns a new Paragraph object without changing the original. If you replace that line with codeArea.setStyleSpans( i, 0, ssb.create() ); instead, it should work.

[PavelTurk]

@Jugen Thank you very much for your help. I am testing #1277 . In your example you use

int startPos = area.getAbsolutePosition( addList.get(0).get1(), 0 );

to calculate offset. But can we avoid it? we do have

var paragraph = tuple.get2();
paragraph.restyle(0, styleSpans); //doesn't work

We have a reference to the paragraph and this paragraph has a "beautiful" restyle method. Why can't we use it?

[Jugen]

I share your sentiment, but the problem is that Paragraph is an immutable object, so p.restyle( ... ) returns a new Paragraph object without changing the original.

[PavelTurk]

@Jugen I am testing #1277, the situation has become much better. All paragraphs are styled. However, I found two problems.

The first one is that paragraph are styled AFTER they are displayed to the user on scrolling. It seems that the reason of this is the Platform.runLater():

The styles are applied to all paragraphs, but with a slight delay, which results in the user seeing both unstyled and styled text.

I want to be extremely precise here. At the moment, the styling speed (which is very important!) is very good, and I strongly want to avoid decreasing it by making the code more complex. But maybe there's a way to handle this — for example, by adding a boolean property to control whether the unstyled text is shown or not.

Why a separate property? Because we can add an observer to either codeArea.getVisibleParagraphs() or codeArea.getVisibleParagraphIndexes().

I haven’t identified the cause of the second issue yet — it might be in my own code.