RTEdit (Rich Text Control) Updated

RTEdit has received a major update with version 1.5 (Github link at the bottom of the post)
I will use this thread from now on to post updates. Thanx for all the feedback and inspiring to see how many are using the control.


Screenshot above : RTEdit in use by our main commercial application

Your ChatBot companion (Video Demonstration : ChatBot using RTEdit.AppendText )
The newest release focuses on AppendText which allows the user to stream chunks of texts into the control which styles the content on the fly using it’s built-in parser. Perfect for ChatBot functionality and I have added a new demo feature, showcasing the use of RTEdit with OpenAI backend.

The control scrolls downward automatically as new content is added, provided the scroll position is already at the bottom of the document. You can use the new ScrollToBottom method to ensure the document continues to scroll as content is appended. This feature is disabled if the user manually scrolls during the stream, allowing for expected behavior.

Special shoutout to my medical colleague Dr. @GarryPettet who recently launched his open source module AIKit which I use to showcase the ChatBot feature. I highly recommend this module as well as more of Garry’s work found on his GitHub. So, thanx a mill Garry!. (More on AIKit can be found here AIKit

You need to enter your own API key. The demo will prompt you for the key at runtime and store it in a file within your application (project) folder, so you won’t need to enter it again.


New Demo showcases the use of AppendText to feed the control a continuous stream of data.

Save/Load Tags
We had the need to store various data alongside each document loaded into / from RTEdit, such as MetaData, permissions, database id’s and more. Instead of maintaining those outside the control in dictionaries / properties, you can feed any data and any number of them, using SaveTag / LoadTag, using the control to maintain those, allowing for a cleaner code.

You can export / import all Tags in an instance by using

ExportDocumentAsJSON
ImportDocumentFromJSON

Both have the same Parameters (below) and by setting IncludeTags = True you can import / use / export your tags with a breeze.

Optional IncludeTags as boolean = True, 
Optional IncludeMentions as Boolean = True, 
Optional IncludeColorScheme as Boolean = False, 
Optional IncludeSettings as Boolean = False, 
Optional includeProperties as boolean = False, 
Optional IncludeCustomCSS as Boolean = False

A complete list of updates:

New Properties

  • ColorBlockQuoteLine
  • ColorMentionBackground
  • ColorMentionPopupBackground
  • ColorMentionPopupBackgroundSelected
  • ColorMentionPopupText
  • ColorMentionPopupTextHover
  • DocumentTitle
  • MentionsEnabled

New Methods

  • AppendText
  • LoadTag
  • SaveTag
  • ScrollToBottom

New Events

  • ClipboardPaste
  • Closing


Demo project now includes an OpenAI ChatBot (File/ChatBox Example…)

Download

In progress

  • Support Links and Images using AppendText method
  • Support Image Insert via toolbar on MacOs
12 Likes

Fantastic piece work here! Super glad AIKit has already found a practical use :slight_smile:

2 Likes

Great update. could you please add the below support as well

  1. Support Table with insert table / insert column
  2. Insert Image via toolbar is not working on Windows (however its working when the image is dragged on to the control)
  3. resize image (click and resize by the mouse)
  4. Font from the toolbar only showing 3 fonts. It will be good to show all the system fonts
  5. Font Size
  6. Line Height
  7. Text direction (RTL / LTR) for languages that is left to right in direction
  8. Text Alignment (Left / Center / Right / Justified)
2 Likes

Thanx for the feedback Sunil, appreciated!


  • Table is in progress (forgot to mention that), will be in the next release (2 weeks or so)
  • Resize image can be done as well
  • Font selection can be expanded to a greater selection
  • Line Height - I should be able to implement that as well.

Already in place

  • FontSize is already in place, use RTEdit.FontSize to define the default size for normal. Other styles (Heading1 Heading2 Heading3 will be calculated as an incremental % increase in size from the defined FontSize. Default FontSize is 14px. Note, if you have have RTEdit.KeyBinding enabled, you can use the keyboard alone to switch between styling (CTRL+1, CTRL+2, CTRL+3, CTRL+4) to trigger Heading1, Heading2, Heading3, Normal correspondingly. For each style you enable (Bold, Italic, Underline etc.) the corresponding keyboard shortcut is enabled too (CTRL+B, CTRL+I, CTRL+U etc.)
  • TextDirection is already supported, but let me know in pm if those don’t work for you
  • TextAlignment is also supported, use RTEdit.AllowAlignment to enable it as a button in the toolbar.
1 Like

thanks for telling people that part of the source code is encrypted and not accessible to modify…

It was in the original post, discussed throughout… let’s not go there again :grinning_face: it’s also mentioned on GitHub. We use this control within our commercial app and I don’t have the authority to set it free, use as is. I do however maintain it and I will compile it into a library once (if ever) Xojo gets to that item on the roadmap. The other option I have since this is 90% javascript, is to simply compile it into a Xojo plugin since that automatically turns off these feedbacks.

Original post:

3 Likes

Can you please provide an option for AllowFontSize in the Toolbar
TextDirection is working as expected.
TextAlignment is also working as expected. thanks.
Is it possible to enable vertical scrollbar when more data is there.

It is in progress (Table, Size). I think I will finish it mid-this week. The table is starting to shape up. Working on keybindings and dynamic insertions.

The scrollbar appears and you can scroll when data fills the control’s container. You mean you would like the scrollbar to me more visible at all times when there is content to scroll?

1 Like

Blockquote
The scrollbar appears and you can scroll when data fills the control’s container. You mean you would like the scrollbar to me more visible at all times when there is content to scroll?

Yes Exactly. Currently on windows its not appearing.

1 Like

Can you pm me a small video / screenshot … i will pm you also a test version with tablet and font sizes prior to release

I have send the screen shot when in snow theme. Please check.

1 Like

Version 1.7 released - Table Support, Font menu, Performance Improvements, and More

New properties

  • AllowFontSelection
  • AllowTables

New methods

  • TableInsert(Rows, Columns)
  • TableDelete

Updated event

  • MouseclickRight(Method, Parameters())

Tables
Built on the Better-Table module for Quill 2.0, this release adds full support for tables, along with an interface for interacting with them through events and methods. You can now detect when a table element is selected, enabling full customization of controls or menus that interact with the editor. You can navigate between cells using the arrow keys and use on-screen handles to resize rows, columns, or the entire table.

:warning: Note: Table functionality is currently supported only when using the Snow theme. The Bubble theme is not compatible with creating tables at this time, but documents containing tables can be viewed in bubble mode.

When a table cell is selected, a floating toolbar appears for streamlined formatting. You can style multiple selected cells simultaneously. The following cell styles are supported:

  • bold
  • italic
  • underline
  • strike
  • size
  • color
  • background
  • font
  • list
  • header
  • align
  • link
  • image

The control now features 15 built-in fonts, compatible with most versions of Windows and macOS.

:rocket: Performance Enhancements
Initialization Speed: The control now initializes up to 50% faster, thanks to improved utilization of JavaScript during both runtime and startup processes.

:test_tube: New Demo Features
The demo project now includes a dedicated window to test out the new table features.

The ImportDocumentFromJSON method now imports a sample JSON document included in the project, demonstrating the method’s power and speed.

:blue_book: Updated Documentation
The built-in User Guide has been updated to reflect the new features introduced in this version.

What’s in the pipeline

  • Resize images
  • Compress images
  • More built-in color-schemes
  • Improve coloring of toolbar for each existing color scheme
  • Set background color of disabled toolbar icons
  • Set default table colors and default table color palette
  • Bug fixes and more compatability testing

Download from GitHub
Thanx to all the users that gave me feedback and feature requests, I am glad that the control is getting a lot of usage, which again helps me to polish it.

3 Likes