Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich text editor templates #3176

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from

Conversation

maradragan
Copy link
Contributor

This makes it possible to enforce a certain document structure in rich text fields.

The structure should be provided through the htmlTemplate property of the RichTextEditor component.

An example of a structure to use:

<h1 class="mandatory" placeholder="Key details 1">Key details 1</h1>
<p class="mandatory" placeholder="Type here key details 1 extra information">Type here key details 1 extra information</p>
<h1 class="mandatory" placeholder="Key details 2">Key details 2</h1>
<p class="mandatory" placeholder="Type here key details 2 extra information">Type here key details 2 extra information</p>
<h1 class="mandatory" placeholder="Key details 3">Key details 3</h1>
<p class="mandatory" placeholder="Type here key details 3 extra information">Type here key details 3 extra information</p><h1>Extra key details</h1>
<p>Type here optional details</p>

Heading or paragraph tags tags may use some extra attributes which make them behave special.
If one of these tags use class="mandatory", the tag will become mandatory. This means that their text can be changed, but they can't be deleted.
If one of these tags use class="mandatory" and a placeholder attribute (like placeholder="Key details 1"), this means that when the user is deleting their text, it will automatically be replaced by the placeholder text.

Note: this is only possible for h1, h2, h3 or p tags .

For now this feature has been added to the reportText field of a report but can be added to other fields too.

TODO:

  • when selecting more than one mandatory blocks => prevent typing into it, as otherwise the mandatory blocks would be replaced by the new text and this way mandatory blocks would be deleted.
  • write tests

Release notes

Closes #3081

User changes

In order to make sure mandatory elements can't be deleted, we changed the way the rich text editor works.

Click Enter does nothing when:

  • at the beginning of a mandatory block
  • the selection contains at least one mandatory block
  • exactly one whole mandatory block is selected
    Delete or backspace does nothing when:
  • the selection contains several blocks and at least one of them is mandatory
    Delete does nothing when:
  • at the end of a block when the next block is mandatory
    Backspace does nothing when:
  • at the beginning of a mandatory block
    Pasting on a selection does nothing when:
  • the selection contains several blocks and at least one of them is mandatory

TODO: Typing on a selection does nothing when:

  • the selection contains several blocks and at least one of them is mandatory

Super User changes

  • See user changes

Admin changes

  • See user changes
  • The admin can specify the default HTML template to be used in anet.yml, by adding a placeholder containing the HTML structure to the fieldsreport.reportText

System admin changes

  • anet.yml needs change
  • db needs migration
  • documentation has changed
  • graphql schema has changed

Checklist

  • Described the user behavior in PR body
  • Referenced/updated all related issues
  • commits follow a repo#issue: Title title format and these 7 rules
  • commits have a clean history, otherwise PR may be squash-merged
  • Added and/or updated unit tests
  • Added and/or updated e2e tests
  • Added and/or updated data migrations
  • Updated documentation
  • Resolved all build errors and warnings
  • Opened debt issues for anything not resolved here

This makes sure that when creating a report, the reportText field
contains a template text. Some of the heading blocks in the template
are readonly and can't be removed.
Note: it only works now on add, after save, on edit, the headings
are no longer readonly (still to be implemented).
This makes sure that if the richTextEditor contains h1 tags marked
with the mandatory class, they can be edited but the tags itself
can not be deleted. Also, when the content is saved, the resulting
html also still has the mandatory class for the h1 tag (this was not
the case before).
In order to be able to save richText content containing also a class,
we need to allow this in the HtmlPolicyBuilder, which is being used to
sanitize the HTML before saving. We updated this one to allow the
class attribute for h1 and p elements.
In the RichTextEditor, replace mandatory elements with a placeholder
when all their text is being deleted.
In the RichTextEditor, replace mandatory elements with a placeholder
when trying to delete their last content character.
Changed the style of the h1 mandatory element. Made sure the mandatory
elements are only having a specific style when in the RichTextEditor.
It is now possible to configure within the anet.yml, through
report.reportText.placeholder the html template to be used per
default for the report text.
This makes sure that if an unstyled block has the mandatory class,
it is also being saved as a html element with the mandatory class.
This makes sure that when specifying a default template for a
richTextEditor type of field, we can also define a placeholder for
the html elements having the class mandatory. This placeholder
is being used to prefill the element if this one becomes empty.
Both the class attribute and the placeholder attribute of an HTML
tag of type h1, h2, h3 or p are being persisted in the database. This
in order to be able to still know the mandatory elements and their
eventual placeholders when editing an object with rich text content.
Prevent return when:
- at the beginning of a mandatory block => it would result in an empty
  mandatory block and a new non-mandatory block containing the text of
  the block which used to be mandatory.
- the selection contains at least one mandatory block => it would result
  in deleting the selection including the mandatory block
- exactly one whole mandatory block is selected, it would result in the
  contents of the mandatory block being deleted and the addition of a
  new empty block afterwards.

Prevent delete or backspace when:
- the selection contains several blocks and at least one of them is
mandatory => we don't want to lose mandatory blocks

Prevent delete when:
- at the end of a block when the next block is => we don't want to merge
  a mandatory block into a previous one

Prevent backspace when:
- at the beginning of a mandatory block => we don't want to merge a
  mandatory block into a previous one

The reason we don't want to merge a mandatory block B into a previous
block A as:
- if block A is not mandatory, block B would lose it's style and data
  (thus also the mandatory property)
- if block A is also mandatory, we would end up with only one mandatory
  block instead of two.

Prevent pasting on a selection when:
- at least one of the selection blocks is mandatory. It would result in
  the removal of mandatory blocks.
@maradragan maradragan self-assigned this Sep 3, 2020
@maradragan maradragan marked this pull request as draft September 3, 2020 08:53
@lgtm-com
Copy link

lgtm-com bot commented Sep 3, 2020

This pull request introduces 1 alert when merging 5fe494d into 8583152 - view on LGTM.com

new alerts:

  • 1 for Unused variable, import, function or class

@gjvoosten gjvoosten changed the title Gh 3081 richt text editor templates Gh 3081 rich text editor templates Mar 25, 2021
@gjvoosten gjvoosten changed the title Gh 3081 rich text editor templates Rich text editor templates Apr 7, 2021
@gjvoosten gjvoosten requested review from midmarch and VassilIordanov and removed request for gjvoosten December 23, 2021 13:46
@midmarch midmarch removed their request for review November 10, 2022 14:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Templates for RichTextEditor
1 participant