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: Fix rendering in the portal

Browse Source
This commit is contained in:
Molkobain
2024-07-23 16:04:46 +02:00
parent b2a377d7f1
commit a7c5d9e92a
10 changed files with 74 additions and 1906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
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

2
js/ckeditor/build/compiled-theme.scss
View File

@@ -93,4 +93,4 @@
:root{--ck-color-selector-caption-background:#f7f7f7;--ck-color-selector-caption-text:#333;--ck-color-selector-caption-highlighted-background:#fd0}.ck-content .table>figcaption{background-color:var(--ck-color-selector-caption-background);caption-side:top;color:var(--ck-color-selector-caption-text);display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word}@media (forced-colors:active){.ck-content .table>figcaption{background-color:unset;color:unset}}@media (forced-colors:none){.ck.ck-editor__editable .table>figcaption.table__caption_highlighted{animation:ck-table-caption-highlight .6s ease-out}}.ck.ck-editor__editable .table>figcaption.ck-placeholder:before{overflow:hidden;padding-left:inherit;padding-right:inherit;text-overflow:ellipsis;white-space:nowrap}@keyframes ck-table-caption-highlight{0%{background-color:var(--ck-color-selector-caption-highlighted-background)}to{background-color:var(--ck-color-selector-caption-background)}}
:root{--ck-color-selector-column-resizer-hover:var(--ck-color-base-active);--ck-table-column-resizer-width:7px;--ck-table-column-resizer-position-offset:calc(var(--ck-table-column-resizer-width)*-0.5 - 0.5px)}.ck-content .table .ck-table-resized{table-layout:fixed}.ck-content .table table{overflow:hidden}.ck-content .table td,.ck-content .table th{overflow-wrap:break-word;position:relative}.ck.ck-editor__editable .table .ck-table-column-resizer{bottom:0;cursor:col-resize;position:absolute;right:var(--ck-table-column-resizer-position-offset);top:0;user-select:none;width:var(--ck-table-column-resizer-width);z-index:var(--ck-z-default)}.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer,.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer{display:none}.ck.ck-editor__editable .table .ck-table-column-resizer:hover,.ck.ck-editor__editable .table .ck-table-column-resizer__active{background-color:var(--ck-color-selector-column-resizer-hover);bottom:-999999px;opacity:.25;top:-999999px}.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer{left:var(--ck-table-column-resizer-position-offset);right:unset}
.ck-source-editing-area{overflow:hidden;position:relative}.ck-source-editing-area textarea,.ck-source-editing-area:after{border:1px solid transparent;font-family:monospace;font-size:var(--ck-font-size-normal);line-height:var(--ck-line-height-base);margin:0;padding:var(--ck-spacing-large);white-space:pre-wrap}.ck-source-editing-area:after{content:attr(data-value) " ";display:block;visibility:hidden}.ck-source-editing-area textarea{border-color:var(--ck-color-base-border);border-radius:0;box-sizing:border-box;height:100%;outline:none;overflow:hidden;position:absolute;resize:none;width:100%}.ck-rounded-corners .ck-source-editing-area textarea,.ck-source-editing-area textarea.ck-rounded-corners{border-radius:var(--ck-border-radius);border-top-left-radius:0;border-top-right-radius:0}.ck-source-editing-area textarea:not([readonly]):focus{border:var(--ck-focus-ring);box-shadow:var(--ck-inner-shadow),0 0;outline:none}
: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:#000;--ck-color-image-caption-background:transparent;--ck-spacing-small:0.35rem;--ck-ui-component-min-height:1rem;--ck-icon-size:1.3rem;--ck-z-default:9999;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:calc(var(--ck-z-panel) + 9999);--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-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)}.ck-editor{z-index:0}.ck-content .image img{min-width:inherit}.ck-content .image-style-align-left,.ck-content .image-style-align-right{display:block;float:unset}.ck-content .image-style-align-left{margin-right:0;text-align:left}.ck-content .image-style-align-right{margin-left:0;text-align:right}.ck-content figure table{text-align:initial}.ck-content .table table th{background-color:#f4f4f4}.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}
: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:#000;--ck-color-image-caption-background:transparent;--ck-spacing-small:0.35rem;--ck-ui-component-min-height:1rem;--ck-icon-size:1.3rem;--ck-z-default:9999;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:calc(var(--ck-z-panel) + 9999);--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-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)}.ck-editor{z-index:0}.ck-content .image img{margin-left:0;margin-right:0;min-width:inherit}.ck-content .image-style-align-left,.ck-content .image-style-align-right{display:block;float:unset}.ck-content .image-style-align-left{margin-right:0;text-align:left}.ck-content .image-style-align-right{margin-left:0;text-align:right}.ck-content figure{margin-left:0;margin-right:0}.ck-content figure table{text-align:initial}.ck-content .table{margin-left:0;margin-right:0}.ck-content .table table th{background-color:#f4f4f4}.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}

12
js/ckeditor/src/plugins/append-itop-classes/append-itop-classes.plugin.ts
View File

@@ -3,7 +3,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
/**
* AppendITopClasses Plugin.
*
* Appends ibo-is-html-content class
* Appends ibo-is-html-content (backoffice) & ipb-is-html-content (portal) classes
*/
export default class AppendITopClasses extends Plugin {
@@ -16,11 +16,17 @@ export default class AppendITopClasses extends Plugin {
// retrieve editor instance
const oEditor = this.editor;
// appends ibo-is-html-content class
// appends ibo-is-html-content (backoffice) & ipb-is-html-content (portal) classes
oEditor.editing.view.change( oWriter => {
const oRootElement = oEditor.editing.view.document.getRoot();
if(oRootElement !== null){
oWriter.addClass( 'ibo-is-html-content', oRootElement);
// Add the proper class depending on the GUI we are in
const sGUIType = document.body.getAttribute('data-gui-type');
if (sGUIType === 'backoffice') {
oWriter.addClass( 'ibo-is-html-content', oRootElement);
} else if (sGUIType === 'portal') {
oWriter.addClass('ipb-is-html-content', oRootElement);
}
}
});
}

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

@@ -53,9 +53,10 @@
}
/* Figures / images */
/* - Avoid text being typed next to the image, only below */
.ck-content .image img {
min-width: inherit;
min-width: inherit; /* Avoid text being typed next to the image, only below */
margin-left: 0; /* Avoid image to be centered */
margin-right: 0; /* Avoid image to be centered */
}
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
@@ -70,12 +71,22 @@
text-align: right;
margin-left: 0;
}
/* - Avoid figures to be centered */
.ck-content figure {
margin-left: 0;
margin-right: 0;
}
/* - Avoid tables in figure being align centered */
.ck-content figure table {
text-align: initial;
}
/* Tables */
/* - Avoid tables to be centered */
.ck-content .table {
margin-left: 0;
margin-right: 0;
}
/* - Force header background to an HEX color so it works with emails */
.ck-content .table table th {
background-color: #F4F4F4;