v2.102.0

Release Date: 01/21/2024

Overview

New Text Editor

With the use of the new text editor Tiptap, the HTML markup generated by the text editor changes for certain elements and formats. For this reason, as part of the release, the existing HTML markup is migrated to meet the requirements of the new text editor.

Text Editor: Changed Markup

The changes from the old to the new text editor markup essentially serve to comply with a modern, valid HTML standard that corresponds to the conventions even more extensively than it was the case with the old markup.

All elements and formatting for which the markup has changed are listed and described below.

Empty Lines

Empty lines were previously displayed as a <p> tag containing a <br> tag. Now they are represented as a <p> tag containing nothing.

Before

<p><br /></p>
<p><br /></p>

After

<p></p>
<p></p>

Lists

List elements (ordered and unordered) were largely displayed in the old text editor using classes and attributes and not using valid, appropriately nested HTML.

For example, only one <ol> tag was used with all <li> tags on the same level and the indentation and the "list style" were represented by classes and attributes on the <li> tag. Now the correct markup with nested <ol> or <ul> tags is used for lists. It should be noted here that this new, valid HTML structure is also sent in mails (e.g. from a form submission).

It was also previously possible to combine unordered and ordered <li> tags on the same level. This does not correspond to the current HTML convention. If this is the case in the database, the following rule was applied during conversion:

• In the case of an ordered list that changes to an unordered list at the same level, the unordered list is displayed as a nested <ul> tag of an <li> tag of the ordered list. This serves to maintain the numbering of the ordered list.

• In the case of an unordered list that changes to an ordered list at the same level, the ordered list is displayed as its own <ol> tag, which is not a sub-item of the current unordered list. This serves to maintain the previous visual representation of the list, which should not be deviated from.

Before

<ol>
  <li data-list="ordered">Item 1</li>
  <li data-list="bullet">Item (bullet)</li>
  <li data-list="bullet">Item (bullet)</li>
  <li data-list="ordered" class="ql-indent-1">Item a</li>
  <li data-list="ordered" class="ql-indent-1">Item b</li>
  <li data-list="ordered" class="ql-indent-1">Item c</li>
  <li data-list="bullet">Item (bullet)</li>
</ol>

After

<ol>
  <li>
    <p>Item 1</p>
    <ul>
      <li>
        <p>Item (bullet)</p>
      </li>
      <li>
        <p>Item (bullet)</p>
        <ol>
          <li>
            <p>Item a</p>
          </li>
          <li>
            <p>Item b</p>
          </li>
          <li>
            <p>Item c</p>
          </li>
        </ol>
      </li>
      <li>
        <p>Item (bullet)</p>
      </li>
    </ul>
  </li>
</ol>

Links

Previously, <a> tags had style and class attributes. Now these attributes are assigned to a <span> tag, which wrappes the <a> tag.

Before

<a style="background-color: #000000" href="https//www.intratool.de/"
  >intratool</a
>

After

<span style="background-color: #000000">
  <a href="https//www.intratool.de/">intratool<a>
</span>

Semantic Elements

Previously, semantic elements (<em>, <strong>, <s> and <u>) had style and class attributes. Now these attributes are assigned to a <span> tag that wrappes the semantic element.

Before

<em style="font-size: 18px">Italic text</em>

After

<span style="font-size: 18px">
  <em>Italic text</em>
</span>

Small Text

Previously, small text was displayed using a ql-size-small class. Now a <small> tag is used for this.

Before

<p>
  <span class="ql-size-small">A small text</span>
</p>

After

<p>
  <small>A small text</small>
</p>

Text sizes

Previously, the text sizes "Large" and "Larger" were represented by the classes ql-size-large and ql-size-huge on the respective element. These classes are no longer used and the font size is represented by the style property font-size (150% or 200%) on the respective element.

Before

<p>
  <span class="ql-size-large">Large text</span>
  <span class="ql-size-huge">Larger text</span>
</p>

After

<p>
  <span style="font-size: 150%">Large text</span>
  <span style="font-size: 200%">Larger text</span>
</p>

Text Background Color

Previously, background colors used for text highlighting were displayed as background-color style attributes on a <span> tag that included the highlighted text. Now the highlighted text is included in a <mark> tag. It has the selected color (as HEX value) defined as data-color attribute and background-color style. Additionally color: inherit; is declared as style to inherit the "default" text color.

Before

<p>
  <span style="background-color: rgb(76, 175, 80);">Green</span>
</p>

After

<p>
  <mark data-color="#4caf50" style="background-color: #4caf50; color: inherit"
    >Green</mark
  >
</p>

Text Alignment

Previously, the alignment of paragraphs (left-aligned, centered, right-aligned and justified) was represented by classes on the respective element. Now the corresponding style declarations in the style attribute are used for this.

Before

<p>Left aligned</p>
<p class="ql-align-center">Centered</p>
<p class="ql-align-right">Right aligned</p>
<p class="ql-align-justify">Justified</p>

After

<p>Left aligned</p>
<p style="text-align: center">Centered</p>
<p style="text-align: right">Right aligned</p>
<p style="text-align: justify">Justified</p>

Indentation of Paragraphs

Previously, it was possible to indent paragraphs completely. Not only the first line of a paragraph was indented, but all lines of the paragraph. This was represented by a class ql-indent-{X}, where the {X} stands for the depth of the indentation. This behavior no longer exists in the new editor. Here, only the current line is indented when the "Tab" key is pressed, which is represented by inserting a symbol at this point. Accordingly, the required number of symbols for the depth of the class is inserted during the conversion.

Before

<p class="ql-indent-1">
  This paragraph was displayed indented. The other lines after the first line
  were also visibly indented.
</p>

After

<p>
  \tThis paragraph is not completely indented. The `\t` symbol only indents the first line.
</p>

Text Editor: Other Changes

Adjustable Link Target

Previously, the target attribute of a link was based on the link's href. Internal links (except links to the Files API) were provided with target="_self" attribute and all other links with target="_blank". The target attribute can now be set via the "Open in new tab" checkbox while creating/editing a link.

With the introduction of the new text editor, every existing <a> tag that was created via the insert link button in the toolbar will have the corresponding target attribute declared directly.

Shared Items

For example, if you share a Form in a InfoboardPost's text, the "Shared Item" is highlighted and is not just a simple link.

Previously, an <a> tag with the class shared-item was stored in the database, which already declared the "speaking" URL to the entity as an href attribute. When the InfoboardPost was retrieved, an attribute with the information about the shared entity was added as an object to the <a> tag representing the shared entity.

Now <a> tags have the static (never changing) URL of the SharedItem defined as href. The "speaking" URL's are resolved via the new URL Context API.

Before

<a class="shared-item" contenteditable="false" href="/formulare/verbesserungsvorschlag">/formulare/verbesserungsvorschlag</a>

After

<a href="/geteilte-inhalte/9b0ce57c-b56a-4e7e-81f9-bca08f4697d2" target="_self" data-show-url-context="false">/geteilte-inhalte/9b0ce57c-b56a-4e7e-81f9-bca08f4697d2</a>

Infoboard Comment Text

Previously, the text of a InfoboardComment was not stored as HTML. With the introduction of the new text editor, this has changed to properly support links and basic formatting like "bold" or "italic".

The existing text has been wrapped in a <p> tag and "New line" symbols (e.g ) have been replaced by <br> tags.

Text Editor: Affected Entities

Here is a list of all affected entity attributes containing HTML markup generated by the new text editor:

InfoboardPost

• text

InfoboardComment

• text - See the related changes here.

ManualEntry

• text

Contacts

• notes

TasksOld

• description

TaskTemplate

• description

TaskTemplateComposition

• description

TaskAssignment

• description

TaskExecution

• deny_reason

• delayed_reason

TaskProgressField

• value - When the related FormField type is rich-text, description or privacy_policy.

• additional_information

Action

• config.body - When type is notify.

• config.description - When type is createTaskAssignment.

CalendarEvent

• description

Form

• email_template - The content of email containing form fields with contents generated by the text editor (see next point) also will contain different markup now. To represent the layout of the form (rows and columns) the <table> element used has the class form-fields-results-layout attached, to differentiate between tables that were generated by the text editor.

FormField

• default_value - When type is rich-text, description or privacy_policy.

FormMessage

• body

FormMessageField

• default_value - When the related FormField type is rich-text, description or privacy_policy.

ChatMessage

• text

TermsOfUse

• text

PrivacyPolicy

• text