The new Rich Text Editor is now live as per the rollout schedule here.


The existing Penelope Rich Text Editor is being replaced throughout the application in the following places:

  • All Notes/rich text fields

  • Internal discussion text (currently simple text because of Chromium bug)

  • Rich Text Memo fields within documents

  • Document description field

It is NOT being replaced in the following places:

  • Document Set-up fields – header and footer document elements or layout field for letter type documents

As part of this migration, all text within rich text fields for data entered within the last year from the date the migration starts in your region will be sanitized to ensure that it does not contain potentially harmful data and ensure compatibility with Penelope Mobile with the most relevant information.

For data that is not migrated, you will still be able to view and edit this in Penelope, it will just be using the old Rich Text Editor.

All new Rich Text notes will use the new Rich Text Editor. When viewing or attempting to modify any Event Notes in Penelope Mobile that are older than a year, Penelope will migrate these on the fly to ensure you are able to edit and view this text successfully.

For the majority of customers that are using cross-site scripting (existing sanitization script) this should be a minimal change. For the handful of customers who are not, the change is likely to be more impactful.

Service File Note page showing the new rich text editor.

Editor Toolbar

Name

Icon

Description

Headings

heading icon

Shows a drop-down of Header stylings that will be applied to the selected text. An easy way to change the size of text within the editor.

Bold

bold icon

Applies bold styling to the selected text

Italics

italics icon

Applies italic styling to the selected text

Font color

font color icon

Applies selected color to the selected text

Strikeout

strike-out icon

Strikes out the selected text

Bullet List

bullet list icon

Applies bullet list formatting to the selected text or creates a bullet where a list can be started

Numbered List

Numbered list icon

Applies numbered list formatting to the selected text or creates a numbered item where a list can be started

Indent In

Indent In icon

Indents text in a list (bullet or numbered). Has no effect on text not in a list

Indent Out

Indent out icon

Outdents text in a list (bullet or numbered). Has no effect on text not in a list

Table

table icon

Shows dropdown to select number of columns and rows and then inserts a table of that dimension into the text. Click into any cell and begin typing.

Horizontal Line

line icon

Adds a new horizontal line at the cursor point

Quote

quote icon

Adds a block quote at cursor point where a quote can be typed, or changes selected text to a quote

Image

image icon

Shows dropdown to select an image file to be uploaded at cursor point. This option is only allowed in certain note fields in the application.

Cutting and Pasting

Text and images may be cut and pasted into the editor, but in many cases will not retain original formatting. Notes below refer to pasting text from Word, other editors may differ:

  • Bolding, italics, strike-through and alignment (right, left, center) formatting will not be retained

  • Font color from Word will be retained

  • Images must be pasted separately from text

  • Tables will be maintained but may gain a header row

  • All lists copied will be shown as numbered lists

Images

Images are only supported in certain Penelope fields:

  • Individual Note

  • Service File Note

  • Group Note

  • Service Event Note

  • Group Event Agenda

  • Informal Event Note

  • Indirect Event Note

  • Referral Note

  • Pre-Enrollment Note

  • Bluebook Note

  • Rich Text Memo fields within Documents

In areas where images are not supported, the image control is not shown in the editor, and images pasted in will generate an error.

Image Resizing

When images are loaded into the editor, if they are larger than 500px wide they are automatically scaled to 500px wide (height is adjusted to maintain proper aspect ratio).

Users can then right-click on the image to bring up a resizing menu with the following options:

  • Small – scales picture to 300px wide

  • Medium – scales picture to 500px wide

  • Large – scales picture to 1000px wide

  • Original – shows picture at original size

Graphical user interface, website Description automatically generated

Scaling is remembered when image is saved, and will be used when images are printed.

Image Error Handling

When there is an issue with the image (wrong type (e.g. svg), too big, etc), a modal is shown and when dismissed the image with the error is shown with a red box in the editor, and if the user hovers over the image the error will be shown in help text. If the user saves without making any change these images will NOT be saved.

If user tries to paste multiple images at one time, only 1 will be pasted. There is an expected limit of 5 images per text editor. More than that could cause performance issues when viewing and saving.

There is a hard limit of 5MB for all images uploaded. There is a recommended maximum size of 100 characters for the title of the image, which is populated to the alt text shown on hover.

SVG images are not supported by the Penelope virus scanner.

Other Known Issues

  • ToastUI displays rectangle box in editor for some scenarios, e.g.: adding blockquote right after adding line, adding line right after heading1 tag. Adding a space in between generally solves the issue.

  • There are a few places in Penelope where the right-click alignment/resize menu appears in odd places (generally within wizards or other complicated pages). If you can see it, it will still work, but it may not appear where you expect it to.

  • Table Remove Column and Remove Row feature will not work with table migrated from old Rich Text Editor. Content will need to be added into a new table.

  • Certain areas within Penelope do not have image error handling working correctly. In these areas, a typical error modal will be displayed to the user explaining the error and control will return to the Rich Text Editor, however the editor will not show a red border around the affected image or have the hover text. They include the following:

    • Adding a group (the 2nd page of the wizard)

    • Adding an entry to the Pre-Enrollment list

    • Editing an entry in the Pre-Enrollment list

  • For copy/pasting of images to work, the user must have copied the actual image. Copying a link to an image, or image combined with other text will not paste into the editor. In general, if having trouble pasting an image directly from a document, try pasting into an image viewer and pasting from there. In particular, images will not paste correctly directly from Google Docs or Word Office browser because of the way they handle images (it will paste correctly from Office 365 Word desktop application).

  • Penelope Mobile does not support the right-click alignment or resizing menus because there is no right-click on a mobile device.

  • Penelope Mobile does not support rich text memo fields for documents at this time.

Migrating Text

If text was previously sanitized, there should be minimal change when migrating to the new editor, what changes occur are related to different html styling for formatting from old editor to the new.

Clients with Previously Sanitized Text

  • All text content will be maintained

  • Bolding, italics and font color will be maintained

  • Loss of alignment formatting

    • In some cases, centered text will remain centered until the text is edited and saved, at which point it will become left justified unless it was changed to a header styling and centered in the new editor before being saved.

  • For rich text content containing images (links or embedded) before the conversion. Different things can happen depending on the type of image:

    • Editor supports images:

      • The image was a linked image (src attribute is an http url)

        • The image is removed entirely from the content during the sanitization step of the archival process.

        • User is not notified of this - they will just see the updated content that no longer contains their linked image

        • All behavior for linked images will be the same

      • The image was embedded (src attribute is data url)

        • The image remains in the content.

        • They see the embedded image when they first load the content within Penelope

        • If they edit and save the content and the image is still within the content, it will be uploaded to S3 and replaced with our replacement markup

    • Editor does NOT support images:

      • The image was a linked image

        • Same as above when editor supports images

      • The image was embedded

        • The image remains in the content

        • They see the embedded image when they first load the content within Penelope

        • If they edit, the user will see an 'Images not supported in this text area' error pop-up, once for each image within the content and each image will be removed from the content within the editor.

          • In order to preserve the images, they can simply cancel the modal the editor is in and it won't save.

Clients with Non-Sanitized Text (Cross-site scripting Disabled)

  • Same as the above, except that it is possible for text content to be removed during the sanitization process.

  • For this reason, we have provided ability to view Archived Text for the most common text areas in the system:

    • Individual Note

    • Service File Notes

    • Group Note

    • Service Event Note

    • Group Event Agenda

    • Informal Event Note

    • Indirect Event Note

    • Referral Note

    • Pre-Enrollment Note

    • Bluebook Note

    • Document Rich-Text Fields

Viewing Archived Text

For notes in the areas shown above, the migrated text note will be shown as usual, but there will be a new ‘View Archived Note’ link. Note that no Edit capability is available for the Archived note, it is simply there for reference and to allow copying any text that the sanitization may have removed back into the new text. Also, no last modified date is shown.

Service Event note page in Penelope showing migrated Event Notes

Service Event note page in Penelope showing archived Event Notes

Document Rich Text Memo Fields

Documents that contain rich text memo fields will also have a ‘View Archived Answers’ option to show rich text fields.

  • When showing Archived Text, current answers for other fields are still shown as we do not archive other document answers.

  • If there is no Archived Text available for a particular answer, the new text is shown.

  • No ‘last modified date’ information will be shown for the archived text.

Service Event Document showing migrated rich text field

Reporting on Rich Text Fields

The most common reports in the system showing rich text note fields will now have an option to show the archived rich text instead of the new (migrated) rich text:

  • A pop-up will appear when the option is selected to warn the user that they may be viewing insecure information

  • When ‘Archived Text’ is selected

    • report header will show that archived text is shown along with the archive date to be clear how old the data may be, as well as a general warning about potential security issue.

    • report will show archived note text when it exists. If it does not, new note text is shown instead. All other information in the report is current.

Report Parameters page showing new parameter option to select New Text or Archived Text.

My Event Notes report header showing text included to indicate that archived text is being shown.

Troubleshooting

  • Missing Text

    • If any text was removed due to sanitization:

      • View the archived text to see the missing text.

      • Copy the text.

      • Return to the new note, edit

      • Scroll to place the cursor in the right part of the note

      • Paste the text into the new note

      • And Save.

  • Linked Images being removed

    • For this problem:

      • View the archived text to see the picture.

      • Take a screenshot of the picture (you should be able to capture just the picture not the whole screen).

      • Return to the new note, edit

      • Scroll to place the cursor in the right part of the note

      • Paste the image into the new note

      • And Save.

  • Centering reverts to left-justified after being edited and saved.

    • For this problem, when editing the new note with the centered text:

      • Select centered text

      • Select Header button and choose header that best represents your text (Paragraph 6 for normal text)

      • Hover over the centered text and right-click for alignment menu

      • Select Centered from menu

      • And Save

If there is missing text or images from areas where Archived Notes link is not shown, you will need to contact support for help. In these cases, we can provide the missing text for you to return to the appropriate note area. If there are images, these will no longer be supported, but they can usually be provided as an attachment or added to a note in a nearby location.

Did this answer your question?