The existing Penelope Rich Text Editor has been 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 replaced in the following places:
Document Set-up fields – header and footer document elements or layout field for letter type documents
For data that is not migrated, you are still 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 older Event Notes in Penelope Mobile, 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.
Editor Toolbar
Name | Icon | Description |
Headings |
| 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 |
| Applies bold styling to the selected text |
Italics |
| Applies italic styling to the selected text |
Font color |
| Applies selected color to the selected text |
Strikeout |
| Strikes out the selected text |
Bullet List |
| Applies bullet list formatting to the selected text or creates a bullet where a list can be started |
Numbered List |
| Applies numbered list formatting to the selected text or creates a numbered item where a list can be started
|
Indent In |
| Indents text in a list (bullet or numbered). Has no effect on text not in a list |
Indent Out |
| Outdents text in a list (bullet or numbered). Has no effect on text not in a list |
Table |
| 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 |
| Adds a new horizontal line at the cursor point |
Quote |
| Adds a block quote at cursor point where a quote can be typed, or changes selected text to a quote |
Image |
| 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
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.
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.
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.
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.