Apostrophe 3.45.0 Rich text editor improvements, AI integration, and fixes

[BoDonkey]

Konichiwa Apostrophe Lovers!

The rich text widget has a new customizable floating menu for adding tables, inline images and AI-generated text.

---

This cycle saw some love for the rich text widget. Several cycles ago we added a table maker to the editor, but the UX was somewhat lacking. We've made the first steps toward making this a much better experience by adding a new forward-slash (/) hotkey. Now, if the insert menu has been configured, typing a slash will open a customizable floating menu allowing you to add tables and inline images without selecting any text first. This makes adding these items a lot more intuitive. Since love was being lavished on the rich text widget, we also added a section in the documentation about the Markdown shortcuts already available. See the full changelog below for additional improvements and fixes to this widget.

Our CTO, Tom Boutell, is presenting at the Node.js Philly Meetup during Philly tech week in early May. To celebrate (being honest, he needed something fun to talk about), he spent time this cycle finishing off the new @apostrophecms/ai-helper extension. With this extension installed the new rich text editor floating menu gets a selection of adding OpenAI ChatGPT-generated text!

The new AI integration allows for the addition of generated images to the media library from a prompt!

---

The rich text widget isn't the only part of Apostrophe getting some AI enhancement. The media library now has integration with the OpenAI DALL-E image generation AI! Now with the click of a button and some descriptive prompts, you can get back multiple images of anything that you can imagine to be saved into your media library. Note that these features do require an OpenAI API key to function.

Moving forward, the engineers here at Apostrophe are getting templating for empty pages implemented. This feature will provide a library of pages with pre-populated content and widget layouts to allow editors to compose new pages more easily. Additionally, our team will gather for a week-long, in-person meetup around Philly Tech Week. While this will mean that there is no release planned for May 10th, it means the opportunity for your favorite engineers to have a hackathon to bring even more generative AI features to Apostrophe!

Apostrophe 3.45.0

Adds

• Rich text widgets now support the insert option, an array
  which currently may contain the strings image and table in order to add a
  convenient "insert menu" that pops up when the slash key is pressed.
  This provides a better user experience for rich text features that shouldn't
  require that the user select existing text before using them.
• Auto expand inline array width if needed using width: max-content in the admin UI.
• The "browse" button is now available when selecting pages and pieces
  to link to in the rich text editor.
• The "browse" button is also available when selecting inline images
  in the rich text editor.
• Images are now previewed in the relationship field's compact list view.
• The new apos-refreshing Apostrophe bus event can be used to prevent
  Apostrophe from refreshing the main content zone of the page when images
  and pieces are edited, by clearing the refresh property of the object
  passed to the event.
• To facilitate custom click handlers, an apos.modal.onTopOf(el1, el2) function is now
  available to check whether an element is considered to be "on top of" another element in
  the modal stack.

Changes

• The v-click-outside-element Vue directive now understands that modals "on top of"
  an element should be considered to be "inside" the element, e.g. clicks on them
  shouldn't close the link dialog etc.

Fixes

• Rich text widgets save more reliably when many actions are taken quickly just before save.

Apostrophe 3.x modules

@apostrophecms/ai-helper 1.0.0-beta

This module enhances Apostrophe with AI-driven helpers. Currently this module offers:

• A button to generate an image from a text prompt via OpenAI.
• An insert menu option to generate rich text from a prompt via OpenAI.

See the README for more info.

Adds

• initial release