Scrivito JS SDK 1.26.0 Released – Featuring Support for Lazy Image Loading

Improved website performance through lazy image loading

Native lazy-loading is a modern web technology that has been implemented by all major browser vendors in the recent years. It defers loading images until they are scrolled into view and thus reduces the bandwidth needed for a page to be displayed in full.

The Scrivito.ImageTag component is now compatible with browser-level lazy loading by respecting the loading=“lazy” property.

Overhauled in-place text editor

Over the years, Scrivito’s in-place HTML editor has become a bit rusty and has accumulated several small issues so we modernized it!

Editors will notice the new link toolbar for opening the destination of an HTML link even while editing in-place. The second noticeable change is the paragraph format drop-down menu, which combines the mutually exclusive options for headings and pre-formatted text.

We preserved the overall look and feel of the tool so that the editing experience remains the same. Under the hood, however, the new editor rectifies the issues listed below. Note that the new in-place editing features are only available to users of edit.scrivito.com.

Improvements and adjustments

  • Better text accessibility and improved screen reader support. For the bold, italic, and strike-through styles, semantic markup is used now, i.e., “strong”, “em” and “s” tags instead of “b”, “i” and “strike”.
  • Removing the styles of a headline now always works, even after merging it with the next paragraph.
  • Pasting text no longer inserts “span” tags with “style” attributes.
  • Nested lists with advanced CSS-based item numbering schemes now produce the expected numbers and a valid tag hierarchy.
  • Underlined text can now be changed back to non-underlined text in all situations.

Estimating the volume of a working copy

As an editor, you can now instantly see how many pages (or images, etc.) have been changed in a working copy simply by opening the “Working Copies” sidebar. Each element on this sidebar is now equipped with such a counter, enabling you to estimate the effort associated with the corresponding working copy.

Duplicating pages via the page hierarchy

For more convenience, pages can now also be duplicated from within the hierarchy browser. This eliminates the need to open the page before it can be duplicated in a second step using the corresponding item from the main menu.

Further improvements

  • Faster display of properties groups

    The properties of a page or widget can be grouped by means of a propertiesGroups definition in the call to Scrivito.provideEditingConfig. The tabs representing such properties groups in properties views can now be rendered faster by following the React recommendation to make such lists individually identifiable using a unique key. For details, see the documentation.

  • Clearer user interface for workflow actions

    For improved ease of use, when collaborating using workflows, the editing interface now displays buttons only for those actions that are available to the editor or reviewer.

  • Support for programmatically enriching textual website content

    For enhancing HTML markup as it can be found in attributes of the html type (used by text widgets, for example), the Scrivito.resolveHtmlUrls API method has been provided. It returns the markup passed in from such attributes, but with all internal URLs (pointing to content managed by the same Scrivito CMS) transformed to fully qualified URLs, allowing you to customize, i.e. further process, the markup before rendering it. This way, text fragments can be replaced, special highlighting can be applied, etc., to optimize the usability of your content for editors or visitors.

  • Displaying page and widget properties dynamically for more consistency

    On properties views of pages (and other types of content) as well as widgets, the attributes to be displayed or made available for editing can now be determined dynamically. If, for example, selecting a specific option using an enum attribute causes other attributes to become irrelevant, they can now be hidden. For this, the list of properties (and also properties groups) to include on properties views can now be provided by means of a callback in the editing configuration concerned.

  • API for determining a custom component’s context

    Custom components can show up either on a sidebar panel or in properties dialogs. Both use individual themes, dark and light respectively. Using the new Scrivito.uiContext method, such components can adapt their styles to their respective environment.

  • Fixed bugs

    • In some cases, HTML attributes in properties dialogs unexpectedly appeared as read-only. Editing rich text in properties dialogs now always works as expected.

    • Scrivito.ContentTag now handles clicks on links properly even if dangerouslySetInnerHTML has been passed in.

More great blog posts from Andreas Viebke

  • Scrivito Enterprise CMS - Product Illustration

    Scrivito JS SDK 1.39.0 Released

    Improvements Enhanced data classes The Scrivito SDK now offers all attributes of a data class as placeholders for its instances, unless configured otherwise via the editing configuration. > As a developer using > Scrivito.provideDataClass > to load external data, you can now also return IDs of...

  • Bienvenue sur Scrivito !

    Latest updates to edit.scrivito.com

    Bienvenue sur Scrivito ! For all you French-speaking users, the Scrivito editing interface is now also available in your language. In addition to dialogs and buttons in French, input fields for page and widget properties have support for locale-specific calendar labels and French number...

  • Scrivito Enterprise CMS - Product Illustration

    Scrivito JS SDK 1.38.0 Released

    Improvements Accessing the current user’s picture The Scrivito.currentEditor API now seamlessly integrates with IAM, allowing developers to access the picture URL associated with the current editor’s IAM profile. Easier attribute type migration There are situations in which a developer needs to...

  • Creating and Linking a Details Page

    Latest updates to edit.scrivito.com

    > After introducing details pages for data items in version 1.36.0 of the Scrivito SDK, the editing interface now offers you to create such a page for a given data class directly from within a data item. If, for example, you have a card widget in your data list widget, and this card widget has a...

  • Scrivito Enterprise CMS - Product Illustration

    Scrivito JS SDK 1.37.0 Released

    Improvements Updating data items using custom logic By defining the update callback of Scrivito.provideDataItem , you can now smoothly update data items using your own logic. This gives you greater control and flexibility in managing your data within your Scrivito app. Prerendering fails early...

  • Scrivito Enterprise CMS - Product Illustration

    Scrivito JS SDK 1.36.1 Bugfix Release

    This release fixes a bug found in version 1.36.0 of the Scrivito JS SDK: Under certain conditions, the renderChild prop of Scrivito.ChildListTag received an argument that was not a child object. This could lead to unexpected app crashes. We apologize for any inconvenience this may have caused!

  • Managing Users and Teams in the JustRelate Console

    Latest updates to edit.scrivito.com

    Scrivito’s user management has moved to the Console After introducing the JustRelate Console in April this year and announcing that authorized Scrivito users would be able to manage their account’s users and teams there, we finally did it: Clicking “Manage users” in the main menu now opens a new...

  • Scrivito JS SDK 1.35.1 Bugfix Release

    Bugfixes All API keys now work properly in Node.js environments In the Scrivito JS SDK, version 1.35.0, we added support for private API keys in a Node.js environment. Due to an encoding error when passing the credentials to the Scrivito backend, some keys didn’t grant access to restricted...

  • Scrivito Enterprise CMS - Product Illustration

    Scrivito JS SDK 1.36.0 Released

    Introducing data details pages

    In an earlier Scrivito JS SDK release, we introduced data lists for seamlessly integrating not only individual data items but also collections of such items into your Scrivito app. Now, we are happy to present an even more powerful feature for data integration: Data details pages that can display...

  • Your Profile Image on the Sidebar

    Latest updates to edit.scrivito.com

    Logged-in editors can now see their profile image If you have added a profile picture to the IdP (identity provider) account you use to log in, it is now displayed on the sidebar instead of your initials. For example, if you log in with your enterprise account, Scrivito uses the image from your...