Feature Wiki

Information about planned and released features

Tabs

Page Editor » Text Editing

Page Overview

[Hide]

This request is part of the project for a New Page Editor.

1 Initial Problem

Text is the central page element for providing information. Already with ILIAS 6 formatting and functions have been moved into slate. However, it needs more overview, adjustments to the handling concept, easier and more intuitive usage.

  • Adding the content of a footnote takes place in the text where the footnote is inserted and not in a separate text input at the bottom of the page. That is irritating when adding longer texts to footnotes. »» ILIAS 8
  • Editing external links is difficult for some users as entire link information has to be inserted properly into link tag. In addition, there is no option to add a link description and a target. Use modals to define Links »» ILIAS 8 
  • Internal links are presented as tag. It would be better to present them as link and to prevent showing tag code. »» ILIAS 8
  • There is currently no easy way to highlight a text snippet with colour without defining new character styles. »» Decision against this Request. ILIAS uses semantic definitons. 
  • Improve Markdown. »» ILIAS 8

Saving and formatting while typing is far away on mobile devices
The formatting used is not visible.
Absatzformate wollen immer wieder mal nur auf markierten Text angewendet werden.
It is not self-explaining how to deal with the xln and iln tags.

2 Conceptual Summary

Central changes:

  • Creating a new text paragraph using Return creates a new text paragraph (<p> </p>). (Pseudo paragraphs are no longer possible. It is no longer necessary to always create sense sections by explicitly creating a new paragraph by saving and creating a new paragraph.)
  • The formatting options for text in slate are revised. The grouping and arrangement is optimized. The design of the slate content is revised.
  • The paragraph formats for text are strongly cleaned up and redundancies to sections formatting are removed. Headings and alignments are offered via a standard repertoire of paragraph formats. Typical ILIAS semantic markup is used for this purpose
  • The creation of sections is made possible from the text creation process. This enables further semantic markup and supports the section concept.

Visual Customization Formatting Elements
Line break < p> leads to a new text section.
Block formats can be used directly from text editing.
If a new paragraph is created in a block, you stay in that block.

Creating texts, recalling text paragraphs and return behaviour

  • A page element of type text can be created via the Create button.
  • There is no symbol image/simolacrum in the content area. The text is created immediately.
  • Texts can be formatted using the formatting options in Slate. They are used without having to be saved separately.
  • A text paragraph is completed and a new one started by pressing Return on the keyboard.  (Shift+Return prevents this).
  • The new text paragraph is created below. It has the standard formatting.
 
  • "Save and new paragraph" in the slate is omitted.Lists are not valid over several paragraphs
  • You can switch between different newly created and existing text paragraphs with a single click. When leaving a text paragraph is saved.
 
  • If a return is executed between two characters (for example between two sentences), the text paragraph is split into two text paragraphs at this point. The user is positioned with the cursor at the beginning of the second paragraph just created.
    • Examples
      • Open Text1 , Return somewhere in the text   ==>   Text1, Text2
      • Open Text1 in Section , Return somewhere in the text   ==>   Section [Text1, Text2]
  • A backspace at zero position / at the beginning of the paragraph will delete the second paragraph. The text contents of the second paragraph thus belong to the first.
    • The formatting of the first paragraph applies to the common contents of the paragraph.
    • This only works if the content element on the same level before it is a text element.
  • Text paragraphs that are saved empty or left empty will be deleted. »» Changed with JourFixe-Decision on 19 APR 2021 »» see Discussion on end of page.
  • There will be no explicit function to merge two text paragraphs. (Semantically both could be grouped by a common section).
 
  • Miscellaneous:
    • Internal link should have the title of the target object by default.
    • Transformation of existing content (ILIAS 6 and earlier): existing "returns" in text paragraphs are evaluated as "Shift+Return".There is no automatic splitting of text paragraphs.
    • When inserting external content (text from Word, Text Edit, other web pages) the result cannot be defined exactly. It is unknown what information the source program provides about paragraphs (<p></p> or </br>). Furthermore, it is open what interpretation the Tiny delivers. It could be delivered as pseudo paragraphs (Shift+Return) or several paragraphs could be generated during the paste process. The given dependency can not be eliminated here!
    • When creating a new paragraph you can jump to another existing paragraph. This leads to saving the leaved paragraph.(In ILIAS 6 (and earlier) this is not so. This always leads to irritations because you can jump between several existing paragraphs.)

Contents of the slate
The slate contains different formatting options and functions for text. (See screenshot)

  • Save and return (Primary button) (Former Primary Split Button. No more "Save and new" and no more „Save" (We have AutoSave.)
  • Cancel (Standard Button)
  • Paragraph (explanations in the next section)
  • Character
    • strong » str (or B)
    • emphatic » emp (or I)
    • important » imp (U)
    • superscript " x2
    • subscript " x2
    • Accent (drop-down) (former A)
    • Remove format » Strikethrough Character (former Ix)
  • Lists
    • Bullet List
    • Numbered List
  • More
    • Links (via Chain-Glyph, new grouping and call of the link variants as dropdown)
      • external link (former xln)
      • internal link (former iln)
      • personal link
      • (Wiki links and other object specific)
    • Tex (former tex)
    • Footnote (former fn)
    • Anchor (former anc)
    • Keyword (former key)
  • Surrounding Section (explanations in the next section)

The formatting of the paragraph is cleaned up.
Redundant formattings of texts and sections are removed. Typical for ILIAS semantic markups are used.
Formatting of text paragraphs 

  • Formatting of text paragraphs 
    • Code
    • Headline1         (technical no <h1>)
    • Headline2         (technical no <h2>)
    • Headline3         (technical no <h3>)
    • Additional     
    • Attention
    • CitationText
    • ConfirmationText
    • ExampleText
    • InformationText
    • Link
    • Literature
    • Mnemonic
    • Remark
    • Separator
    • Standard
    • Verse/Stanza (german: Lyrik/Strophe) (Standard "Center")
    • Numbers (german: Zahlen) (Standard "Right") 
    • Book (german: Buchdruck) (Standard "Block")
  • Two formattings are required for technical reasons only for other page elements in which text is used: "List" and "TableContent". They should be filtered out in the paragraph formatting drop-down. These classes are only shown in Content Style Editor and used as default in tables or in lists.
  • New paragraphs created after a return always have "standard" as style format
  • Note: The group has agreed that it is okay if the headlines in the editor area are not mapped to the technical labels. (h1 in text would be h3 or h4 in the complete structure of the website. h2 » h4/h5 and h3 » h5/h6)

Semantic markups of contents are to be achieved primarily via sections.
The section concept should be strengthened. The mixing of formatting in different places is to be eliminated.

  • The paragraph formats of type text, which are redundant with the paragraph formats that exist in sections, are only available in sections.
  • The default selection for "Surrounding Section" is "None" - not "Standard". There is no block around the text paragraph or paragraphs.
  • The same styles are offered for surrounding sections as for the usual adding of a section.

Examples for the use of surrounding sections:

  • Add Text1, Add Section, Add Text2, Add Text3, Close   ==>   Section [Text1, Text2, Text3]
  • Add Text1, Add Text2, Add Block, Add Text3, Close   ==>   Text1, Section [Text2, Text3]
  • Add Text1, Add Section1, Add Text2, Add Text3, Add Text4, change to  Section2, Close   ==>   Section2 [Text1, Text2, Text3, Text4] 
  • Add Text1, Add Section1, Add Text2, Add Text3, Close, Add Text4, Add Section2, Close   ==>   Section1 [Text1, Text2, Text3], Block2 [Text4] 
  • Add Text1, Add Section1, Add Text2, Add Text3, Add Text4, change to  Section "None", Close   ==>   Text1, Text2, Text3, Text4

3 User Interface Modifications

3.1 List of Affected Views

Screens in which a page element of type Text is being created or edited.
 
The data table largely uses the same contents in the slate for the input in the data fields. The display of the contents in the slate should then also be oriented in the data table to the contents in the slate during text editing. Visual and concerning the grouping of functions.

3.2 User Interface Details

Changes described under "Contents of the slate".

3.3 New User Interface Concepts

  • Exists:
    • The Slate and its elements already exist as lagacy view.
  • New
    • buttons and dropdowns must be transferred to the respective KS elements
    • button group with Headline
    • Glyphs like Strikethrough Character

4 Technical Information

Killing, Alexander [alex], 11 Aug 2020: Thanks for the specs. I was wondering about the new style class "News Column/Multi-Column (german: Zeitungsspalte/Mehrspaltensatz) (Standard "Block" with width-sensitive number of columns)", maybe this is a misunderstanding on my side. But imo this is a little bit underspecified and the CSS rules that will be needed are currently not featured directly in the content css editor, see https://www.mediaevent.de/css/text-columns.html. In browsers the column- properties are well supported. Other properties that make the handling of these blocks easy are not supported so well, especially orphans/widows are not supported on Firefox https://caniuse.com/#search=orphans

4.1 Return creates new Paragraph Issues

The behaviour and the fact to not allow "pseudo" paragraphs brings up migration issues. First of all, it is no problem to allow br-tags on shift-Return and to keep them these brs in the current editor. BUT it will not be possible to just listen to RETURN key events and to only act in these cases. Copy/pasting, creating lists, doing indentations and so on all have effects on the p-Tags in Tiny (and other editors). ILIAS will have to check the DOM with each action and to auto-split as soon as multiple p (or list) tags exist under the root node. This is not a huge performance issue, since counting the direct children of the root node is quickly done (and action only needed if there is more than one child).

BUT as soon as combinations of lists and no-list texts are involved ILIAS will "auto-split" and change existing content immediately on editing. Note that the Gutenberg editor does not allow to mix lists and no-list content, too. Example:

Before:

After:

The example is using the styles on the paragraph level, which are used heavily currently. To get back a similar outcome, the author would need to nest the three paragraphs into a section with similar style manually. This cannot be done automatically, since there is no technical way to determine the correct section class (there might be none at all).

5 Privacy Information

No new information is collected, processed, or shown. Thus this feature has no privacy implications.

6 Security Implications

No security implications.

7 Contact

8 Funding

If you are interest in funding this feature, please add your name and institution to this list.

9 Discussion

Samoila, Oliver [oliver.samoila] 11 AUG 2020: This article does not deal with the special case of text processing on small devices. The special case includes the specification of how text input should work and how the actions and formatting can be accessed in the same time.
Therefore a separate article is to be written, discussed and adopted. »» Page Editor » Text Editing on small devices
We ask the JourFixe to confirm this proceeding.

Killing, Alexander [alex], 11 Aug 2020: I support the request, with some minor technical remarks (see technical section).

Kunkel, Matthias [mkunkel], 17 AUG 2020 : I fully support the central change of the 'Return' behaviour. That's a good improvement of usability and makes creating text paragraphs much easier. But when HTML is forbidden in texts (due to security), there is no chance to make a 'new line' anymore. So either we need to support something like "SHIFT+RETURN" to create a new line. Or a new button "New Line" has to be offered in the slate. I prefer the second option because it is more obvious.

JourFixe, ILIAS [jourfixe], 17 AUG 2020 : We highly appreciate this suggestion and schedule it for ILIAS 7.

Samoila, Oliver [oliver.samoila], 09 NOV 2020 :
The problems around lists (separating, merging, inserting,, pasting, copying) should be solved as described below:

backspace behaviour for elements after lists and when merging lists

Example:
  Text paragraph1
  - bullet1
  - bullet2
  Text paragraph 2
  - Bulletin3
  - bulletin4

  • Case 1) Deleting the separation between first list and text paragraph2 »» "Text paragraph2" is linked to "Bullet2"

    1
    <ul><li>Bullet1</li><li>Bullet2Textparagraph2</li></ul><ul><li>Bullet3</li><li>Bullet4</li></ul>

  • Case 2) Deleting the separation between Text paragraph 2 and Bullet3 »» "Bullet3" is linked to "Text paragraph 2" and removed from the list

    1
    <ul><li>Bullet1</li><li>Bullet2</li></ul><p>Textparagraph2Bullet3</p><ul><li>Bullet4</li></ul>

  • Case 3) Deleting the text paragraph 2 (including separation and actual content) »» two lists separated from each othe

    1
    <ul><li>Bullet1</li><li>Bullet2</li></ul><ul><li>Bullet3</li><li>Bullet4</li></ul>

  • Case 3.1) Deleting the separation between the two lists using a backspace at the beginning of "Bullet3" links the two lists and links "Bullet3" to "Bullet2"

    1
    <ul><li>Bullet1</li><li>Bullet2Bullet3</li><li>Bullet4</li></ul>

  • For numbered lists: Case3 » A list with 1. and 2. and another list with 1. and 2. gives
    1. bullet1
    2. bullet2
    1. bullet3
    2. bullet4

    1
    <ol><li>Bullet1</li>Bullet2</li></ol><ol><li>Bullet3<li>Bullet4</li></ol>

  • For numbered lists: Case3.1 » Only one list with 1., 2. and 3.
    1st bullet1
    2nd Bullet2Bullet3
    3rd bulletin4

    1
    <ol><li>Bullet1</li><li>Bullet2Bullet3</li><li>Bullet4</li></ol>

Return in lists

  • Return on the last bullet of a list without top level text results in a new paragraph with the style standardR
  • Return for a bullet without text at a lower level moves the bullet one level up (e.g. level 2 -> level 1)
  • Return at the beginning of a bullet with text leads to a new bullet above the own position on the same list level

Disengaging list elements

At the beginning of a top level bullet, disengagement is not available … 

  • using  a disabled button
  • preventing transformation into text and resolving list structures.
  • keyboard must not accept Shift+Tab

Pasting in lists

  • If the text to be inserted contains only inline formatted text, it is inserted in the bulletpoint.

    1
    <ul><li>BuKo<br>pier</br>terTextlet1</li><li>

  • If the text to be inserted contains block formatting, a new paragraph is created at the cursor position and the text including all formatting is inserted.

    1
    <ul>...</li><li>BulletN</li></ul><p>KopierterText....

  • If the cursor position is in the middle of a list, the list is split and two lists are created with the inserted text in between.

    1
    <ul>...</li><li>Bullet2</li></ul><p>KopierterText....</p><ul><li>Bullet3</li><li>...

  • If the cursor position is not at the end of the text in the bulletpoint, the rest of the text of the bulletpoint is added to the last inserted paragraph (no further paragraph is created).

    1
    <ul>...</li><li>Bu</li></ul><p>KopierterText....llet2</p>

  • If the last bullet point is empty after saving, it is saved as a blank bullet point. (Current behavior)

Copying from an existing element

  • Case: Copies an existing element of [Text1, List, Text2] and pastes it on the same page or other location.
  • Behavior: No transformation to [Text1] [List] [Text2] takes place. This type of transformation is reserved for the process of editing the page element. After copying, an element in the form of [Text1, List, Text2] exists in a new location.

JourFixe, ILIAS [jourfixe], 09 NOV 2020 : We accept the described behaviour of lists as mentioned above by Oliver. The behaviour is adapted to the behaviour of other text editors.

Samoila, Oliver [oliver.samoila]: Bugreport to empty paragraphs : https://mantis.ilias.de/view.php?id=30329 : Leere Paragraphen sollen nicht gespeichert werden.
JourFixe, ILIAS [jourfixe]: 19 APR 2021: Also empty paragraphs should be saved - and not deleted automatically. This would be unexpected behaviour. Report closed accordingly.

10 Implementation

Test Cases

Test cases completed at 12 NOV 2020 by Zenzen, Enrico [ezenzen]

  • C344: Text einfügen
  • C345: Textabsatz formatieren
  • C346: Einzelne Wörter oder Sätze im Text formatierten
  • C5200: Formatierung entfernen
  • C347: Ankerlinks einfügen
  • C348: Externe Links einfügen
  • C350: Vorhandenen Text bearbeiten
  • C5089: Text als Superscript /Subscript formatieren
  • C5096: Automatische Verlinkung von URLs in Administration aktivieren
  • C5097: Klickbare URLs im Text eingeben
  • C6965: Absatz auswählen - Löschen
  • C6966: Absatz auswählen - Kopieren
  • C6967: Absatz auswählen - Ausschneiden
  • C6968: Absatz auswählen - (De-)Aktivieren
  • C349: Interne Links einfügen
  • C18772: Benutzer verlinken
  • C5098: Automatische Verlinkung von Benutzernamen im Text
  • C42459: Absatz auswählen - Ausschneiden
  • C18614: Absatz einfügen
  • C18618: Anzeige der Absatzformate im Page Editor

Approval

Approved at 12 NOV 2020 by Samoila, Oliver [oliver.samoila] as agreed with FH Aachen, Hochschule Bremen, Universität Hohenheim, Universität Marburg.

Styling of text in iOS
Support of markdown (example from GitHub)

Last edited: 16. Nov 2023, 17:00, Tödt, Alexandra [atoedt]