composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°7552 - CKEditor: Harmonize HTML content rendering in edit, read and emails

Browse Source
This commit is contained in:
Molkobain
2024-07-23 11:53:22 +02:00
parent 086d2f0ba4
commit 38065791da
30 changed files with 105 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/htmlsanitizer.class.inc.php
View File

@@ -301,6 +301,8 @@ class HTMLDOMSanitizer extends DOMSanitizer
'section' => array('style', 'class'),
'code' => array('style', 'class'),
'table' => array('style', 'class', 'width', 'summary', 'align', 'border', 'cellpadding', 'cellspacing'),
'colgroup' => array(),
'col' => array('style'),
'thead' => array('style', 'class'),
'tbody' => array('style', 'class'),
'tr' => array('style', 'class', 'colspan', 'rowspan'),

30
js/ckeditor/build/ckeditor.d.ts vendored
View File

@@ -1,30 +0,0 @@
/**
* @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Highlight } from '@ckeditor/ckeditor5-highlight';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Mention } from '@ckeditor/ckeditor5-mention';
import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import InsertCarriageReturnAfterBlock from "./plugins/insert-carriage-return-after-block/insert-carriage-return-after-block.plugin";
import './resources/styles/default-theme.css';
declare class Editor extends ClassicEditor {
static builtinPlugins: (typeof Alignment | typeof Bold | typeof Italic | typeof Strikethrough | typeof Underline | typeof BlockQuote | typeof CodeBlock | typeof Undo | typeof Essentials | typeof FontBackgroundColor | typeof FontColor | typeof FontFamily | typeof FontSize | typeof Heading | typeof Highlight | typeof HorizontalLine | typeof Image | typeof ImageCaption | typeof ImageResize | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Indent | typeof Link | typeof List | typeof Mention | typeof Table | typeof TableCaption | typeof TableCellProperties | typeof TableColumnResize | typeof TableProperties | typeof TableToolbar | typeof RemoveFormat | typeof InsertCarriageReturnAfterBlock)[];
static defaultConfig: EditorConfig;
}
export default Editor;

4
js/ckeditor/build/ckeditor.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/ckeditor/build/ckeditor.js.map
View File

File diff suppressed because one or more lines are too long

4
js/ckeditor/build/maximize.plugin.d.ts vendored
View File

@@ -1,4 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export declare class Maximize extends Plugin {
init(): void;
}

10
js/ckeditor/build/plugins/append-itop-classes/append-itop-classes.plugin.d.ts vendored
View File

@@ -1,10 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* AppendITopClasses Plugin.
*
* Appends ibo-is-html-content class
*/
export default class AppendITopClasses extends Plugin {
static get pluginName(): string;
init(): void;
}

13
js/ckeditor/build/plugins/detect-change/detect-change.plugin.d.ts vendored
View File

@@ -1,13 +0,0 @@
import { Plugin, type Editor } from 'ckeditor5/src/core.js';
import InsertCarriageReturnAfterBlock from "../insert-carriage-return-after-block/insert-carriage-return-after-block.plugin";
/**
* DetectChanges Plugin.
*
*/
export default class DetectChanges extends Plugin {
private readonly _processor;
constructor(editor: Editor);
init(): void;
static get pluginName(): string;
static get requires(): (typeof InsertCarriageReturnAfterBlock)[];
}

24
js/ckeditor/build/plugins/detect-change/itop-data-processor.d.ts vendored
View File

@@ -1,24 +0,0 @@
import { HtmlDataProcessor, type ViewDocument, type ViewDocumentFragment } from 'ckeditor5/src/engine.js';
export default class iTopDataProcessor extends HtmlDataProcessor {
/**
* HTML data processor used to process HTML if we detect changes
* @private
*/
private _htmlDP;
/**
* Initial value of the editor, we'll return it if we don't detect any changes
* @private
*/
private readonly _initialValue;
/**
* Transformed initial value of the editor, we'll use it to detect changes
* @private
*/
private _transformedInitialValue;
/**
* Creates a new instance of the Markdown data processor class.
*/
constructor(document: ViewDocument, initialValue: string, transformedInitialValue: string);
setTransformedInitialValue(transformedInitialValue: string): void;
toData(viewFragment: ViewDocumentFragment): string;
}

12
js/ckeditor/build/plugins/editor-features.plugin.d.ts vendored
View File

@@ -1,12 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* EditorFeatures Plugin.
*
* - trigger update event when editor is ready
* - dispatch submit event on the closest editor form when Ctrl+Enter pressed
*
*/
export declare class EditorFeatures extends Plugin {
static get pluginName(): string;
init(): void;
}

13
js/ckeditor/build/plugins/editor_features/editor-features.plugin.d.ts vendored
View File

@@ -1,13 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* EditorFeatures Plugin.
*
* - trigger update event when editor is ready
* - dispatch submit event on the closest editor form when Ctrl+Enter pressed
* - converter for mentions
* - appends ibo-is-html-content class
*/
export default class EditorFeatures extends Plugin {
static get pluginName(): string;
init(): void;
}

11
js/ckeditor/build/plugins/ibo-compatibility.plugin.d.ts vendored
View File

@@ -1,11 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* IBOCompatibility Plugin.
*
* - exclude ck-reset_all for mention dropdown
* - appends ibo-is-html-content class
*/
export declare class IBOCompatibility extends Plugin {
static get pluginName(): string;
init(): Promise<unknown> | void | undefined | null;
}

8
js/ckeditor/build/plugins/insert-html/insert-html.command.d.ts vendored
View File

@@ -1,8 +0,0 @@
import { Command } from 'ckeditor5/src/core';
/**
* InsertHtmlCommand Command.
*
*/
export default class InsertHtmlCommand extends Command {
execute(sContent: string): void;
}

9
js/ckeditor/build/plugins/insert-html/insert-html.plugin.d.ts vendored
View File

@@ -1,9 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* InsertHtml Plugin.
*
*/
export default class InsertHtml extends Plugin {
static get pluginName(): string;
init(): void;
}

5
js/ckeditor/build/plugins/itop-mention.plugin.d.ts vendored
View File

@@ -1,5 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export declare class ITopMention extends Plugin {
init(): Promise<unknown> | void | undefined | null;
static get pluginName(): string;
}

10
js/ckeditor/build/plugins/keyboard-shortcut/keyboard-shortcut.plugin.d.ts vendored
View File

@@ -1,10 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* KeyboardShortcut Plugin.
*
* - Dispatch submit event on the closest editor form when Ctrl+Enter pressed
*/
export default class KeyboardShortcut extends Plugin {
static get pluginName(): string;
init(): void;
}

5
js/ckeditor/build/plugins/maximize.plugin.d.ts vendored
View File

@@ -1,5 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export declare class Maximize extends Plugin {
static get pluginName(): string;
init(): void;
}

5
js/ckeditor/build/plugins/maximize/maximize.plugin.d.ts vendored
View File

@@ -1,5 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export default class Maximize extends Plugin {
static get pluginName(): string;
init(): void;
}

5
js/ckeditor/build/plugins/mention-converter.plugin.d.ts vendored
View File

@@ -1,5 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export declare class MentionConverter extends Plugin {
static get pluginName(): string;
init(): Promise<unknown> | void | undefined | null;
}

10
js/ckeditor/build/plugins/mentions-markup/mentions-markup.plugin.d.ts vendored
View File

@@ -1,10 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* MentionsMarkup Plugin.
*
* - Converter for mentions
*/
export default class MentionsMarkup extends Plugin {
static get pluginName(): string;
init(): void;
}

18
js/ckeditor/build/plugins/object-shortcut.form-view.d.ts vendored
View File

@@ -1,18 +0,0 @@
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
import { View, LabeledFieldView, ButtonView } from '@ckeditor/ckeditor5-ui';
import { Locale } from '@ckeditor/ckeditor5-utils';
export default class FormView extends View {
abbrInputView: LabeledFieldView;
titleInputView: LabeledFieldView;
saveButtonView: ButtonView;
cancelButtonView: ButtonView;
childViews: any;
constructor(locale: Locale);
render(): void;
focus(): void;
_createInput(label: string): LabeledFieldView<import("@ckeditor/ckeditor5-ui").InputTextView>;
_createButton(label: string, icon: string, className: string): ButtonView;
}

12
js/ckeditor/build/plugins/object-shortcut.plugin.d.ts vendored
View File

@@ -1,12 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { Dialog } from '@ckeditor/ckeditor5-ui';
/**
* ObjectShortcut Plugin.
*
*
*/
export declare class ObjectShortcut extends Plugin {
static get pluginName(): string;
get requires(): (typeof Dialog)[];
init(): void;
}

6
js/ckeditor/build/plugins/object-shortcut/object-shortcut.editing.d.ts vendored
View File

@@ -1,6 +0,0 @@
import { Plugin } from '@ckeditor/ckeditor5-core';
export default class ObjectShortcutEditing extends Plugin {
init(): void;
_defineSchema(): void;
_defineConverters(): void;
}

19
js/ckeditor/build/plugins/object-shortcut/object-shortcut.form-view.d.ts vendored
View File

@@ -1,19 +0,0 @@
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
import { View, LabeledFieldView, ButtonView } from '@ckeditor/ckeditor5-ui';
import { Locale } from '@ckeditor/ckeditor5-utils';
export default class FormView extends View {
oLabelInputView: LabeledFieldView;
oClassInputView: LabeledFieldView;
oReferenceInputView: LabeledFieldView;
oSaveButtonView: ButtonView;
oCancelButtonView: ButtonView;
oChildViews: any;
constructor(oLocale: Locale);
render(): void;
focus(): void;
_createInput(sLabel: string): LabeledFieldView<import("@ckeditor/ckeditor5-ui").InputTextView>;
_createButton(sLabel: string, sIcon: string, sClassName: string): ButtonView;
}

5
js/ckeditor/build/plugins/object-shortcut/object-shortcut.plugin.d.ts vendored
View File

@@ -1,5 +0,0 @@
import { Plugin } from '@ckeditor/ckeditor5-core';
import ObjectShortcutUI from './object-shortcut.ui';
export default class ObjectShortcut extends Plugin {
static get requires(): (typeof ObjectShortcutUI)[];
}

16
js/ckeditor/build/plugins/object-shortcut/object-shortcut.ui.d.ts vendored
View File

@@ -1,16 +0,0 @@
import { Plugin } from '@ckeditor/ckeditor5-core';
import { ContextualBalloon } from '@ckeditor/ckeditor5-ui';
import FormView from './object-shortcut.form-view';
import './styles.css';
export default class ObjectShortcutUI extends Plugin {
static get requires(): (typeof ContextualBalloon)[];
oBalloon: ContextualBalloon | undefined;
oFormView: FormView | undefined;
init(): void;
_createFormView(): FormView;
_showUI(): void;
_hideUI(): void;
_getBalloonPositionData(): {
oTarget: (() => Range) | null;
};
}

10
js/ckeditor/build/plugins/trigger_update_on_ready/trigger_update_on_ready.plugin.d.ts vendored
View File

@@ -1,10 +0,0 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* TriggerUpdateOnReady Plugin.
*
* - Trigger update event when editor is ready
*/
export default class TriggerUpdateOnReady extends Plugin {
static get pluginName(): string;
init(): void;
}

51
js/ckeditor/build/styles/console-theme.css
View File

@@ -1,51 +0,0 @@
/* mention list ui customization */
:root {
--ck-color-list-button-on-background: #EFF0EF;
--ck-color-list-button-on-background-focus: #EFF0EF;
--ck-color-list-button-hover-background: #EFF0EF;
--ck-color-list-button-on-text: black;
--ck-z-default: 9999;
/* Custom variables overloaded by backoffice or portals */
--ck-text-tiny-font-size: 0.7rem;
--ck-text-small-font-size: 0.85rem;
--ck-text-big-font-size: 1.4rem;
--ck-text-huge-font-size: 1.8rem;
}
/** text size classes */
.text-tiny {
font-size: var(--ck-text-tiny-font-size);
}
.text-small {
font-size: var(--ck-text-small-font-size);
}
.text-big {
font-size: var(--ck-text-big-font-size);
}
.text-huge {
font-size: var(--ck-text-huge-font-size);
}
/** marker classes */
.marker-yellow {
background-color: var(--ck-highlight-marker-yellow);
}
.marker-green {
background-color: var(--ck-highlight-marker-green);
}
.marker-pink {
background-color: var(--ck-highlight-marker-pink);
}
.marker-blue {
background-color: var(--ck-highlight-marker-blue);
}

1
js/ckeditor/build/translations/ti.js Normal file
View File

File diff suppressed because one or more lines are too long

80
js/ckeditor/src/ckeditor.ts
View File

@@ -74,6 +74,70 @@ const transformationsConfig = {
remove: [ 'ellipsis' ]
}
// Colors to be used in the different palettes (font color, table cell background color, table cell border color, ...)
const colorsPalette = [
{
color: '#000000',
label: 'Black'
},
{
color: '#4D4D4D',
label: 'Dim grey'
},
{
color: '#999999',
label: 'Grey'
},
{
color: '#E6E6E6',
label: 'Light grey'
},
{
color: '#FFFFFF',
label: 'White'
},
{
color: '#E64D4D',
label: 'Red'
},
{
color: '#E6994D',
label: 'Orange'
},
{
color: '#E6E64D',
label: 'Yellow'
},
{
color: '#99E64D',
label: 'Light green'
},
{
color: '#4DE64D',
label: 'Green'
},
{
color: '#4DE699',
label: 'Aquamarine'
},
{
color: '#4DE6E6',
label: 'Turquoise'
},
{
color: '#4D99E6',
label: 'Light blue'
},
{
color: '#4D4DE6',
label: 'Blue'
},
{
color: '#994DE6',
label: 'Purple'
},
];
class Editor extends ClassicEditor {
public static override builtinPlugins = [
Alignment,
@@ -171,6 +235,10 @@ class Editor extends ClassicEditor {
shouldNotGroupWhenFull: true
},
language: 'en',
fontColor: {
// Colors are redefined to be in HEX instead of RGB in order to be supported by mail clients
colors: colorsPalette,
},
image: {
toolbar: [
'resizeImage:25',
@@ -208,6 +276,10 @@ class Editor extends ClassicEditor {
'|',
'toggleTableCaption'
],
tableCellProperties: {
borderColors: colorsPalette,
backgroundColors: colorsPalette,
},
},
htmlSupport: {
allow: [
@@ -224,10 +296,10 @@ class Editor extends ClassicEditor {
},
highlight: {
options: [
{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)', type: 'marker' },
{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' },
{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' },
{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' },
{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#FDFD77', type: 'marker' },
{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#62f962', type: 'marker' },
{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#FC7899', type: 'marker' },
{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72CCFD', type: 'marker' },
]
},
codeBlock: {

41
js/ckeditor/src/resources/styles/default-theme.css
View File

@@ -46,30 +46,12 @@
font-size: var(--ck-text-huge-font-size);
}
/* Marker classes */
.marker-yellow {
background-color: var(--ck-highlight-marker-yellow);
}
.marker-green {
background-color: var(--ck-highlight-marker-green);
}
.marker-pink {
background-color: var(--ck-highlight-marker-pink);
}
.marker-blue {
background-color: var(--ck-highlight-marker-blue);
}
/* Editor base style */
/* - Fix editor base z-index to avoid its children (images, drop down buttons, ...) passing on top of other elements */
.ck-editor {
z-index: 0;
}
/* Figures / images */
/* - Avoid text being typed next to the image, only below */
.ck-content .image img {
@@ -87,4 +69,27 @@
.ck-content .image-style-align-right {
text-align: right;
margin-left: 0;
}
/* Tables */
/* - Force header background to an HEX color so it works with emails */
.ck-content .table table th {
background-color: #F4F4F4;
}
/* Marker classes */
.ck-content .marker-yellow {
background-color: #FDFD77;
}
.ck-content .marker-green {
background-color: #62F962;
}
.ck-content .marker-pink {
background-color: #FC7899;
}
.ck-content .marker-blue {
background-color: #72CCFD;
}