RichTextColorizer Examples?

[PeteMichaud]

I see the RichTextColorizer in the repo, but I don’t how to use it.

I assume it’s something like avalonedit, eg: editor.TextArea.TextView.LineTransformers.Add(new RichTextColorizer());, but even if that’s right I don’t know how to actually make it do anything.

Like suppose I have the sample code from the Demo folder of this repo, I want to add rich text formatting to that demo, so I can run the rich text demo, highlight some text in the editor, and italicize it with any or all of: a button or key combo or some kind of pattern matching (eg. _italics_).

How would I do that?

[danipen]

TextMate extension already changes the colors and sets up the font as bold/italic/underline.

You can take a look at how it works here:

AvaloniaEdit/src/AvaloniaEdit.TextMate/TextMateColoringTransformer.cs

Line 34 in 272a695

public TextMateColoringTransformer(

[PeteMichaud]

Thanks, yeah I've seen that, but there are too many layers of abstraction to really follow it.

In the demo we have _textMateInstallation = _textEditor.InstallTextMate(_registryOptions); which eventually assigns the TextMateColoringTransformer, and I guess ProcessTokens is where the rubber meets the road with:

_transformations.Add(new ForegroundTextTransformation(this, _exceptionHandler, lineOffset + startIndex,
lineOffset + endIndex, foreground, background, fontStyle));

And ForegroundTextTransformation has Transform() which takes a GenericLineTransformer which has SetTextStyle() which calls ChangeLinePart and ChangeVisualStyle which sets some properties on a VisualLineElement which comes from somewhere, I guess the base class... the point being that there are a bunch of objects coming from all over, and the API is a monster and I don't know how to pare this back to a minimal example of having a TextEditor control where I can highlight some text and make it, eg, bold or italic.

If I could figure it out I'd be thrilled to add an example implementation to the wiki or something for people like me who are just starting out trying to use the control.

[danipen]

@danwalmsley maybe can help with that...

[PeteMichaud]

Great, well, just to start I've already tried the following naive test, which didn't do anything:

            var richTextModel = new RichTextModel();
            richTextModel.SetFontStyle(0,1,FontStyle.Italic);
            richTextModel.SetFontWeight(0,1, FontWeight.Black);

            _textEditor.TextArea.TextView.LineTransformers.Add(new RichTextColorizer(richTextModel));

I inserted that into the Demo's MainWindow constructor, attempting to set the first character of each line to bold and italic. It compiled fine, but had no effect, either with or without the Texmate line transformers enabled.

[danipen]

@danwalmsley please can you help with LineTransformers here?

[danipen]

Well in fact, it's working:

            var richTextModel = new RichTextModel();
            richTextModel.SetForeground(0, 10, new SimpleHighlightingBrush(Colors.Red));
            richTextModel.SetForeground(15, 20, new SimpleHighlightingBrush(Colors.Red));

            _textEditor.TextArea.TextView.LineTransformers.Add(new RichTextColorizer(richTextModel));

But it seems that the RichTextColorizer is ignoring the italic/bold stuff. You can implement your own DocumentColorizingTransformer for that.

[danipen]

About the coloring and italics... What exactly do you need to color or make italics?

[danipen]

I ask because AvaloniEdit already has a Textmate Language for Markdown.

You could use/extend it to create a new one that fits your requirements.

[PeteMichaud]

Hey by the way, thanks for being so responsive, I appreciate it.

Here’s a basically comprehensive list of what I need:

(This is all essentially a workaround for the fact that AvaloniaEdit isn’t actually a rich text editor. I want to persist the document as markdown, to it can be saved and edited by any text editor later, and be sensibly backed by git.)

• basic markdown formatting for bold, italics and headers
• fine control over the spacing of lines, in particular setting the line-height between visually wrapped lines from the same underlying text line, separately from the line-height between actually separate lines (to differentiate between paragraphs, essentially).
  • I suspect the most sensible way to handle this is to have paragraphs on a single line, and have my “serialization” insert a double break between each line to preserve the markdown paragraph, while deserialization removes double lines so the TextEditor knows how to display it nicely.
• Realtime control over the editor width and margins to keep the column of text a nice size for writing as the window is resized.
• hyperlink-like controls for commenting feature — this will be supported by markdown footnotes, but displayed in the UI similarly to other commenting apps like google docs, with clickable highlighted text in the editor that pops open a comment box on the side. The commenting itself will happen outside the control, but will need to update the contents of the control (ie. I type a comment into the comment textbox, that text is displayed in the comment textbox itself plus internally modifies the text of the AvaloniaEdit TextEditor to include those contents as a markdown footnote.)

Nice to have:

• A fully wysiwyg end user experience, so the editor hides the special markdown characters, eg. “_italics text_” in the raw data is consumed by the LineHighlighter and makes “italics text” actually italicized, while it also hides the underscores, but keeping the underlying plaintext intact for later saving
• Smart display of curly quotes without changing the underlying straight quotes in the string data
• more comprehensive support for markdown with things like images and horizontal rules. If I could somehow get full markdown support for free, that would be fine, but I basically don’t care about most of it because novel prose doesn’t normally need it.

[PeteMichaud]

I ask because AvaloniEdit already has a Textmate Language for Markdown.

You could use/extend it to create a new one that fits your requirements.

Right, I did see this, and it may work. One problem is that when I tried it, it seemed a little broken, eg. putting special markdown characters like **bold** did color that text, but couldn’t actually make the text bold (although that may have been an issue with the font), but worse, it didn’t just color THAT text, but all the text in that entire line. This was true for any inline styles I tried.

So because it was already apparently broken, and couldn’t style the text the way I actually wanted(bold, italic, larger header font), plus because of my end goal to try to actually hide the special characters from the end user for a wysiwyg experience, I have been trying to implement by own LineTransformer that does what I want for at least the limited subset of markdown that I really care about.

[danipen]

putting special markdown characters like bold did color that text, but couldn’t actually make the text bold

This is the expected behavior... You should extend the grammar file if you want to customize the syntax highlighting rules.

[mattj23]

@PeteMichaud,

I understand your interest in the other thread now, and I apologize for missing that and this discussion here.

I can roughly explain the way that I accomplished what you were trying to do here:

• I skipped AvalonEdit/AvaloniaEdit's highlighting mechanisms, because I think as you realized at that point it's too late to mutate the actual characters being displayed
• I used Markdig, a very fast, customizable, regex-free C# markdown parser to capture the entire abstract syntax tree of the document.
• I constructed what's basically a bounding volume hierarchy out of the AST using ITextAnchor objects in the AvaloniaEdit TextDocument, allowing me to take any position in the source and quickly search which markdown syntax entities it's nested inside.
• I wrote a custom VisualLineElementGenerator which produces a custom VisualLineElement. The generator has access to the parsed result and creates individual visual line elements that are broken at the boundaries in the syntax tree. The custom visual line elements contain start and end integer offsets to the position of the text in the source document, since the generator is the last place you'll directly have access to that information.
• After the generators run, AvaloniaEdit assigns default TextRunProperties to the elements. I then wrote a custom transformer that has access to a style-sheet like configuration object and the BVH from the syntax tree. It performs a lookup on each element, sees what markdown syntax constructs it belongs to, and mutates the formatting accordingly. This allows things like nested styling to work as expected.

It's still rough, but it seems to do the job. By taking the generator approach, it will be possible to do things like hide the emphasis characters by generating a custom VisualLineElement that doesn't have those characters and has a longer DocumentLength than it has a VisualLength. It should also be possible to pass the information to the generator on where the cursor is so that those characters can re-appear when the cursor is inside the element.

By constructing the BVH using ITextAnchor objects, it means that the syntax highlighting behaves somewhat consistently in between full parsings of the document. In my testing, I re-parse the entire document about 500ms after the user stops changing the document and then invalidate all of the visual lines to re-draw the display. Markdig is pretty fast (my tests had it take about 5ms on a 15k word document on my 2 year old i7 ultraportable), but it's not actually necessary to re-parse and re-draw everything. I believe that it should be possible to look at a document change through the BVH, find the top-most parent block element (will typically be a paragraph block), and then only re-parse that block and invalidate its associated lines. This should make the performance reasonable even with a document as long as the ones you're testing.

Currently I'm working with their #216 branch, which has a bunch of performance improvements and fixes an error in line breaks (#228) when you use the generator based approach above, but there's some formatting issues they're working through so it's not completely functional yet.

My plan for my own markdown editor is to GPL3 it. As I mentioned in the other thread I would be happy for any assistance on it, but if the vision I have doesn't match what you're thinking for your novel editor, I can break the Markdig/AvaloniaEdit specific code out into a separate project which we can both share between our respective projects, and I can release that particular code on a more permissive license.

Let me know if you're interested.

[danipen]

@mattj23 just out of curiosity. Are you planning to render generated markdown (aka generating html or something and render it) or just making richer the editing markdown experience?

[mattj23]

My aspirational goal would be to do both and give the option to the user to display the preview or not.

I personally like to have a preview (or the option of a preview) available when I write markdown because I don't always trust WYSIWYG markdown editors especially with complex elements. On the other hand, I know a lot of writers who don't care about the preview because they're just using basic formatting elements and don't want to lose the screen space to a preview.

Why do you ask?

[danipen]

In my team we need a solution for previewing markdown in Avalonia.

For the editing experience is enough for us using AvaloniaEdit + markdown syntax highlighting.

For previewing I'm considering using Mardown.Avalonia or generating HTML. We're still evaluating which option is better.