Rich text editing, custom HTML markup in Release 3.0.0

In this release the most significant change is stability in saving and restoring projects and documents. Next, in no particular order, is live rich text editing, customization of HTML output, better live HTML editing with scroll position lock, opening files from the welcome screen (through drag and drop) and better HTML export support with more styles exported. There are also more information messages to give you better feedback on asynchronous actions. This release also updates the build to latest AIR version to support native drag and drop, and more.

Rich text editing
With rich text editing you can now format text using familiar editing tools. To use, simply drag a RichText component on to the design view and double click on it. A call out will open with an rich text edit bar.

Rich text editing

Rich text editing with a RichText component

More rich content

rich text

TLF TextFlow markup

TLF TextFlow markup

HTML Features
HTML output has got a lot of attention this release. In the past you were able to add your own CSS styles to any element. Now you can add your own attributes. You can also add markup before the elements markup and after the elements markup. You can now even overwrite the element markup to add your own HTML or JavaScript.

For example, select a Label component and then open the HTML section of the Properties panel.

Label text

Label component

New HTML features

Property Inspector showing HTML properties

Adding styles to the element in CSS

Your styles are added to the element CSS selector

Adding additional attributes to the element

Your attributes are added to the elements markup

Adding code before element markup

Adding code before element markup

Adding code after element markup

Adding code after element markup

Using your own element markup

Using your own element markup

You can add your own JavaScript, CSS and HTML using these powerful features. They are windows for web developers into the export process.

The following will show an alert when you click on the label:

Adding an event to an attribute

Listening to a click event

The next example adds JavaScript in a script tag after the element’s declaration:

Adding a script tag after an element's markup

Adding a script tag after an element’s markup

Retain scroll position in live preview
One of the most useful features is editing code and seeing the changes updated live. But when that content is scrolled off the screen, scrolling back to the last position gets old quick. With this update the scroll position is retained as you edit.

You can’t see it in this image but if you could, you would see that as you type in the code editor the page remains locked at the scroll location even as it’s being updated live.

Retained vertical scroll position as you edit

Retained vertical scroll position as you edit

See the full change log here