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

Templates for RichTextEditor #3081

Open
VassilIordanov opened this issue Jun 22, 2020 · 0 comments · May be fixed by #3176
Open

Templates for RichTextEditor #3081

VassilIordanov opened this issue Jun 22, 2020 · 0 comments · May be fixed by #3176

Comments

@VassilIordanov
Copy link
Contributor

Is your feature request related to a problem? Please describe.
We would like to enforce a certain document structure in certain rich text fields.

Describe the solution you'd like
I propose to have the ability for certain rich text fields to be primed with a default structure.
We could define this structure as html with some extra attributes (i.e. a mandatory attribute).
The widget start with an empty template when first created. The user is prevented from deleting elements with the mandatory attribute.
We could start with a template such as:

<h1 mandatory placelholder="Key issue 1"/>
<h1 mandatory placelholder="Key issue 2"/>
<h1 mandatory placelholder="Key issue 3"/>

We could also apply different styling to these attributes, for example we could display placeholder text when they are empty.

Describe alternatives you've considered
We considered separate fields for each template component, but that is too cumbersome and not user-friendly.

Additional context
Similar to: https://www.slatejs.org/examples/forced-layout

@maradragan maradragan added this to Triage in ANET via automation Jun 22, 2020
@maradragan maradragan moved this from Triage to Doing in ANET Jun 22, 2020
maradragan added a commit that referenced this issue Jun 23, 2020
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).
maradragan added a commit that referenced this issue Jun 25, 2020
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).
maradragan added a commit that referenced this issue Jun 25, 2020
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.
maradragan added a commit that referenced this issue Jun 25, 2020
In the RichTextEditor, replace mandatory elements with a placeholder
when all their text is being deleted.
maradragan added a commit that referenced this issue Jul 1, 2020
In the RichTextEditor, replace mandatory elements with a placeholder
when trying to delete their last content character.
maradragan added a commit that referenced this issue Jul 1, 2020
Changed the style of the h1 mandatory element. Made sure the mandatory
elements are only having a specific style when in the RichTextEditor.
maradragan added a commit that referenced this issue Jul 1, 2020
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.
maradragan added a commit that referenced this issue Jul 1, 2020
maradragan added a commit that referenced this issue Jul 1, 2020
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.
maradragan added a commit that referenced this issue Jul 1, 2020
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.
maradragan added a commit that referenced this issue Jul 1, 2020
maradragan added a commit that referenced this issue Jul 24, 2020
This makes sure that if the RichTextEditor is using a template containing
mandatory blocks, we can not merge them with next/previous blocks using
delete/backspace.
maradragan added a commit that referenced this issue Jul 29, 2020
This makes sure that if the RichTextEditor is using a template containing
mandatory blocks, we can not merge them with next/previous blocks using
delete/backspace and we can not delete them.
maradragan added a commit that referenced this issue Jul 31, 2020
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 linked a pull request Sep 3, 2020 that will close this issue
14 tasks
@gjvoosten gjvoosten moved this from Doing to On Hold / stuck in ANET Feb 24, 2021
@midmarch midmarch changed the title Templates for DraftJS Templates for RichTextEditor Oct 6, 2021
@midmarch midmarch moved this from On Hold / stuck to Confirmed in ANET Oct 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
ANET
  
Confirmed
Development

Successfully merging a pull request may close this issue.

3 participants