TRichView 21 - HTML

[Sergey Tkachenko]

New versions of our controls have been released: TRichView 21, ScaleRichView 12, ReportWorkshop 5.

ReportWorkshop is announced in a separate forum thread.

Trial versions are available here: https://www.trichview.com/download/

The main new features of this update are new HTML import and reworked HTML export.

This update is free for customers who ordered in 2021 and later. If you do not know how to renew, please contact me (by sending a private forum message, or email to richviewgmailcom).

The complete list of changes since the previous major update:

• TRichView
• RichViewActions
• ScaleRichView

This topic discusses changes that were added since the last minor update.

Previous version:
viewtopic.php?t=11226

[Sergey Tkachenko]

Changes in the setup

RAD Studio Community Edition.

Since this update, the trial setup is partially compatible with RAD Studio 10.4 Community Edition.
This version of RAD Studio does not include command line compilers, so the installer cannot generate package files.
In this update, the setup includes all necessary precompiled files to install TRichView, RichViewActions, ScaleRichView, core of ReportWorkshop in RAD Studio 10.4 Community Edition. These packages are installed automatically.
Unfortunately, there are too many packages to make a precompiled versions of them, so other packages need to be installed manually in RAD Studio Community Edition IDE, see https://www.trichview.com/download/tric ... stall.html

Help and demos

Help and demo files for our components are located in different folders (each set of components, including integration with third-party components, may have its own folders for help and demo projects).
For your convenience, we created two new folders, "Help" and "Demos" in the root folder of the installation. These folders contain links to help files and folders of demo projects respectively.
The Demos folder have subfolders:

• Delphi New - all demos for Delphi from version 2009 to 11
• CBuilder New - all demos for C++Builder from version 2009 to 11
• Lazarus - all demos for Lazarus (only in a non-trial version)
• Delphi 5-2007 - all demos for Delphi from version 5 to 2007
• CBuilder 6-2007 - all demos for C++Builder from version 6 to 2007

[Sergey Tkachenko]

HTML import

Before TRichView version 21, HTML was the only export-only format of all formats supported by the components (RTF, DocX, HTML, Markdown, plain text). TRichView 21 closes this problem.

Well, HTML import was possible using additional components (TRvHtmlImporter and TrvHtmlViewImporter), but these components have their disadvantages. In the new versions, these HTML importer components are still available, but only for a backward compatibility. They are marked as deprecated.
New HTML import provides better results, and it is compatible with all versions of TRichView (VCL, LCL, FireMonkey).

TRichView 21's HTML import code is all-new, and is not based on any of previous code.

New methods:

• TRichView.LoadHTML, LoadHTMLFromStream: append HTML to the end of the document
• TRichViewEdit.InsertHTMLFromFileEd, InsertHTMLFromStreamEd: insert HTML at the caret position, as an editing (undoable) operation
• TRichViewEdit.PasteHTML: pastes HTML from the Clipboard (supported FireMonkey platforms: Windows, macOS)

TRichView-html-import.png (131.14 KiB) Viewed 60569 times

Old version of TRichView web site loaded in TRichView editor

HTML import is controlled by properties collected in TRichView.HTMLReadProperties.
Other editing components (ScaleRichView, and an edtor for DevExpress VCL) have a similar property.

[Sergey Tkachenko]

Using HTML

New HTML import allows using HTML in new areas.

1. TRichView.LoadFromFile, LoadFromStream can load HTML (these methods auto-detect format by content: RTF/DocX/HTML/[Markdown or text]).

2. Data-aware components (TDBRichView, TDBRichView, ScaleRichView's TDBSRichViewEdit) support HTML as a DB field format.

3. ReportWorkshop supports HTML data fields

4. ppDBRichView (objects for ReportBuilder (by Digital Metaphors)) support HTML data fields

5. TcxTRichViewEdit (an editor for Developer Express VCL) supports HTML as a value format.

HTML import in RichViewActions

RichViewActions is a set of actions and components for creating user interface for a TRichView/ScaleRichView-based word processor.
Since this version, they support new HTML import in the following actions: TrvActionOpen (opening file), TrvActionInsertFile (file insertion at the caret position), TrvActionPaste and TrvActionPastSpecial (pasting from the Clipboard).
For backward compatibility, TRVAControlPanel.HTMLComponent still exists and allows using the old HTML importers. However, this property is deprecated, and I highly recommend removing these components from your project.

[Sergey Tkachenko]

Some details about HTML import

HTML + CSS is a very complex format, even modern browsers do not support its specifications completely.
Of course, HTML import in TRichView has its limitation.

Details of HTML import are explained below.

Encoding

TRichView supports all standard HTML encodings (+ several non-standard encodings). It supports encodings:

• specified in HTML or CSS files directly,
• detected by Unicode byte order mark
• specified directly in HTML loading/inserting methods.

Limitation: UTF-16 (BE and LE) encodings are detected only by a Unicode byte order mark (except for LoadFromFile/LoadFromStream methods that can detect UTF-16 by format). I do not think that this is an important problem because this encoding is rarely used.

HTML tags

TRichView supports all HTML tags. However, TRichView document has a model similar to a word processors (like Microsoft Word) rather than HTML, so not all tags can be loaded as they are. TRichView tries to convert HTML to the most similar own analogs to display it as good as possible. Howewer, HTML files that use tables are displayed much better than HTML files that use floating divs or flex-boxes.

CSS

TRichView supports CSS defined in HTML head, external files, inline in tags.
TRichView supports all CSS properties that it can display, with very few exceptions (the main of them is "logical margins").
TRichView supports basic CSS media queries, to choose content designed for screens.
TRichView supports "inherited", "initial", "revert", "unset" values.
TRichView supports all CSS measure inits that it can display.
TRichView supports CSS variables (custom CSS properties)
TRichView supports importance of CSS properties
TRichView does not support CSS layers yet (all layer's properties are processed as if they do not belong to a layer; planned for future updates).
TRichView supports pseudo-classes: root, first-child, nth-child
TRichView supports CSS selector syntax almost completely (except for siblings and columns combinators)
TRichView supports few CSS functions (rgb, rgba, url, var)
TRichView does not support CSS pseudo-elements yet (most of them do not have TRichView analogs, but properties for active hyperlinks and list markers will be supported in future updates)
TRichView does not support CSS list counters (planned for future updates)

Images
TRichView supports images (normal images, background images, images in list markers), both external and internal (specified directly in HTML in base64 encoding).

HTML version

TRichView supports:

• normal HTML
• XHTML
• HTML in "quirks mode" (detected by absence of <!DOCTYPE>)

[Sergey Tkachenko]

HTML import and styles

TRichView editor can optionally use named styles (StyleTemplates).
These styles have a model that is very similar to a model of word processors like Microsoft Word.
Because of this, StyleTemplates are perfectly imported and exported from DocX and RTF files; but styles from HTML files are different.

If StyleTemplates are used, TRichView converts the state of certain HTML tags at the moment of reading <body> tag to styles. For example, properties of <p> are converted to "Normal" style, properties of <a> are converted to "Hyperlink", and so on. A complete list can be found in this topic.

This approach works very well if styles are defined in HTML <head> (directly or in external CSS files). StyleTemplates correspond to formatting that is actually used in documents. StyleTemplateInsertMode works well for HTML insertion, allowing to convert HTML formatting to the existing formatting, if necessary.
But this approach it is not so good if most of CSS styles are specified inline in tags. Unfortunately, modern browsers use inline tags when copying HTML to Clipboard. Because of this, if the Clipboard contains both HTML and RTF, TRichViewEdit chooses RTF.

[Sergey Tkachenko]

HTML export

New methods

Before this version, TRichView had two groups of methods for saving HTML: SaveHTMLEx and SaveHTMLToStreamEx to save normal HTML+CSS, and SaveHTML/SaveHTMLToStream to save a simplified version of HTML (using formatting tags instead of CSS).
These methods had many parameters.
The main problems with these methods:

• specifying parameters when a component needs to save HTML implicitly (for example, TDBRichViewEdit needs to save HTML to a database field)
• problems for extending these properties (adding or changing parameters of methods leads to backward compatibility problems).

To solve these problems, new HTML saving methods were introduced: SaveHTML and SaveHTMLToStream
These methods have a minimal set of parameters. Most parameters of HTML export are defined in the new HTMLSaveProperties property.

The old HTML saving methods are not removed, but they are marked as deprecated.

New features

The new methods not only cover all the functionality of the old methods, but also have improvements.
Some of them:

• an option to save all images directly in HTML (in base64 encoding) instead of creating external files*
• storing not only HTML title, but also description and author (optionally). These properties are defined in DocParameters property, and are used by HTML, RTF, DocX, and RVF formats.
• in HTML+CSS version, more object properties are saved using CSS instead of tag attributes
• some CSS attributes were changed to more modern and more proper alternatives.
• some parameters that were available only for HTML+CSS version now can be applied to simplified HTML version as well
• ability to override encoding specified in HTML**
• any text can be used as a paragraph list's bullet and saved to HTML+CSS (not only disk/circle/square as in the previous versions)

* This option is turned on by default in data-aware editors (TDBRichViewEdit, TDBSRichViewEdit) and in editors for DevExpress VCL (TcxTRichViewEdit), to allow storing HTML in a DB field or a variant value without external files.
** This feature is useful if you want to convert HTML to another encoding after saving. For example, TDBRichViewEdit saves HTML to wide memo fields as UnicodeString, and specify "UTF-16" encoding in this case.

Compatibility issues

Normally, your projects that used HTML saving methods will continue working as before (only "deprecated" warnings are displaying on compilation).
However, there are some compatibility issues:

• in RichViewActions, all properties related to HTML export were removed from actions; the actions use HTMLSaveProperties of the target editor instead
• if you saved CSS files externally using TRVStyle.SaveCSS and SaveCSSToStreams methods, you need to modify your code, because these parameters were changed.
• in RichViewActions, methods for initialization/finalization of downloading of external images were changed (to support downloading not only images but external CSS files); these methods are rarely used explicitly, because normally the actions do this work automatically.

[Sergey Tkachenko]

ScaleRichView

ScaleRichView (WYSIWYG add-on to TRichView) supports all the new HTML-related features.

In addition, to complete the work that was started in earlier updates, it implements LiveBindings in SRVControls:

• TSRVEdit, TSRVMemo, TSRVCheckBox can be used as a LiveBindings value editors
• TSRVButton, TSRVLabel, TSRVPanel publish their caption as a default LiveBindings value source.

SRVControls is a set of controls designed for insertion in a WYSIWYG editor's document; but they can be used as normal controls on a form as well.

[Sergey Tkachenko]

Demo projects

Changes in the demo projects.

1. All TRichView and ScaleRichView demo projects use the new HTML saving methods (affected demos: "Editor 1" and "HTMLSave")
2. "Editor 2", "Notes", "StyleTemplates" demo of TRichView and ScaleRichView support HTML format (in addition to RVF, RTF, DocX and Markdown)
3. In ScaleRichView ActionTest demos, page thumbnails are hidden by default (to increase UI responsiveness on old slow computers); the user can show them using a toolbar button.

[jgkoehn]

This new HTML addition is excellent work, it works very well. Good work sir.

[Sergey Tkachenko]

TRichView 21.1

We've updated TRichView to version 21.1.
This update fixes all bugs reported for version 21.0.

Markdown and images

Since this update, inline images (base64-encoded) are supported not only in HTML, but in Markdown too.

New option in TRichView.MarkdownProperties.SaveOptions: rvmdsoInlineImages. If included, images are stored directly in Markdown text instead of external graphic files.
On reading, inline images are loaded automatically, no changes in settings or code are needed.
Note: in Markdown, an image must be encoded on a single line, without line break characters.

Shortcuts on macOS

Previous versions of TRichView used Ctrl in shortcuts for all platforms, for example Ctrl+C for copying. However, this is not a standard for macOS.
Since this update, TRichView uses Command key (⌘) in shortcuts instead of Ctrl (⌃): ⌘+C for copying, ⌘+Z for undo, and so on.
Menus and toolbars in FireMonkey demos are changed accordingly (at designtime, the demos still use Ctrl in shortcuts. But when running on macOS, shortcuts are changed to Cmd when a form is created).
Since this update, on macOS, hyperlinks in editor are activated when pressing ⌘ instead of ⌃.

[Sergey Tkachenko]

An update without changing a version number: equation item is fixed.