Page Editor » Code Editing

1 Initial Problem

The Code Element has not been adapted to the new gerneral Page Layout of ILIAS 6. 

• The Code Elements allow inserting code for display on pages. This is very important for software training. 

Screenshot ILIAS 6

2 Conceptual Summary

Inserting Element Form 

• Stacking:
  • The Langauge element is dropped.
  • Remaining controls are re-stacked according to importance - see screen shot.
  • The field to paste code moves to the main content and out of the form. 
• Label: 
  • Paste-code-input gets inside of the form a little prompt: "Type or paste your code here"
• Controls: The text inpult field needs a new type

1. Click Create button in page editor.
2. ILIAS presents Create menu. 
3. Select Code. 
4. Decicde about Ressource "Import File | Manual Editing" via Accordion
   1. "Insert by Import" Workflow 
      1. Click Select File. 
      2. Select file from computer
      3. ILIAS presents file title in form.
      4. If necessary, make further settings
      5. Click Add Code. 
      6. ILIAS presents uploaded code in Main part of the screen. (No editing of Page Element "Code" in the moment.)
   2. "Insert manually" Workflow 
      1. make further settings
      2. Click Add Code.
      3. ILIAS presents uploaded code in Main part of the screen. ILIAS presents "Edit Code" List Form in Slate. 
      4. Typing can start. 
      5. Changes are saved after clicking Save

Editing Element 

1. ILIAS presents the blank slate and in the main content area the Code Element is presented. 
2. Click once on the Code Element. 
3. The Code Element gets a highlight and the slate displays the Edit Code.
   • Settings (Source Code, show line numbers, Download Title) can be changed.
4. Actual changes to Code can noly be made in the text input in the main content area. 
5. All changes are saved after clicking Save or discarded after clicking Cancel.

3 User Interface Modifications

3.1 List of Affected Views

• Editor > Insert Code>   Insert source code
• Editor > Edit Code  > Edit source code

3.2 User Interface Details

Inserting

Editing

3.3 New User Interface Concepts

It would be nice to have a new text input field type "with prompt". (This is not a basic requirement for implementation.)
We want to prompt the user directly. Like in OnScreenChat  (Example for this case: "Please enter your code here.")

4 Technical Information

No technical issues.

5 Privacy Information

For current state of page editor see https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/Services/COPage/PRIVACY.md

No personal data is stored or processed to implement this feature. 

6 Security Implications

We do not see any special security relevant changes.

7 Contact

• Author of the Request: Tödt, Alexandra [atoedt] & Samoila, Oliver [oliver.samoila]
• Maintainer: Killing, Alexander [alex]
• Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

8 Funding

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

• FH Aachen

9 Discussion

Killing, Alexander [alex], 17 Feb. 2021: I would offer the import option only when creating the element and the main editing area on the right only after the first step in the creation process.

Samoila, Oliver [oliver.samoila], 22 Feb. 2021: Requirement integrated.

JourFixe, ILIAS [jourfixe], 22 FEB 2021: Feature is highly appreciated and scheduled for ILIAS 8.

Killing, Alexander [alex], 20.3.2023: I still support this feature.

Erkens, Jochen [j.erkens] 2.6.2023: As part of the revision of the code element for the page editor, the list of selectable languages should also be reconsidered. 
Currently supported are: "other", Java, PHP, C, C++, HTML, XML, Visual Basic, Delphi.
Currently the PHP lib GeShi is used which provides many more languages. If not all should be supported, we would at least add these: Python, CSS, Javascript, LaTeX, SQL, Bash, PowerShell.
Since the lib is apparently no longer being developed and modern standards such as YAML, JSON, md or Go are missing, a replacement should be considered in the medium term. A JavaScript variant could be interesting here, which does the interpretation in the user's browser. https://highlightjs.org/
The possibility of autodtection would also be interesting here.

JourFixe, ILIAS [jourfixe], 12 JUN 2023: We follow the suggestion by Jochen and accept the aforementioned languages ( Python, CSS, Javascript, LaTeX, SQL, Bash, PowerShell ) for syntax highlighting, too.

10 Implementation

{The maintainer has to give a description of the final implementation and add screenshots if possible.}

Screenshots of implementation

Test Cases

Test cases completed at 2023-05-25 by Spirou, Ilias [ispirou]

• 42458 : Programmcode manuell einfügen
• 58106 : Programmcode importieren
• 63452 : Syntax Highlighting von Programmcode

Approval

Approved at 2023-09-01 by Erkens, Jochen [j.erkens].