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

N°7552 - Fix CKEditor sources not being scrollable in fullscreen

Browse Source
This commit is contained in:
Stephen Abello
2024-07-22 11:00:54 +02:00
parent 06124a0d94
commit 0ede0719c5
5 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/backoffice/vendors/_ckeditor.scss vendored
View File

@@ -101,6 +101,11 @@ $ibo-vendors-ckeditor--ck-color-image-caption-text: $ibo-color-grey-900 !default
}
}
// N°7552 Allow source editing area to be scrollable in full screen
.ck-maximize_editor_main .ck-source-editing-area textarea{
overflow: auto !important;
}
/* Highlight JS */
.hljs {
padding: $ibo-vendors-highlightjs--padding !important;

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

@@ -4,7 +4,7 @@
*/
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Bold, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
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';
@@ -13,10 +13,10 @@ import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/
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, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties } from '@ckeditor/ckeditor5-list';
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';
@@ -24,7 +24,7 @@ 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 Superscript | typeof Subscript | 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 LinkImage | typeof List | typeof ListProperties | typeof Mention | typeof Table | typeof TableCaption | typeof TableCellProperties | typeof TableColumnResize | typeof TableProperties | typeof TableToolbar | typeof RemoveFormat | typeof InsertCarriageReturnAfterBlock | typeof PictureEditing)[];
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;

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

32
js/ckeditor/src/plugins/maximize/maximize.plugin.ts
View File

@@ -32,56 +32,56 @@ export default class Maximize extends Plugin {
if (oEditor.ui.element !== null) {
if (oButton.isOn) {
// remove classes
document.documentElement.classList.remove('html_editor_full_screen')
document.body.classList.remove('body_editor_full_screen')
document.documentElement.classList.remove('ck-maximize_html_editor')
document.body.classList.remove('ck-maximize_body_editor')
let oParentElement: HTMLElement = oEditor.ui.element;
while (oParentElement.parentElement !== null) {
oParentElement = oParentElement.parentElement;
oParentElement.classList.remove('parent_editor_screen');
oParentElement.classList.remove('ck-maximize_parent_editor');
}
oEditor.ui.element.classList.remove('editor_full_screen');
oEditor.ui.element.children[2].classList.remove('editor__main_full_screen');
oEditor.ui.element.classList.remove('ck-maximize_editor');
oEditor.ui.element.children[2].classList.remove('ck-maximize_editor_main');
oButton.icon = sMaximizeIconSVG;
} else {
// add classes to make editor full screen
document.documentElement.classList.add('html_editor_full_screen')
document.body.classList.add('body_editor_full_screen')
document.documentElement.classList.add('ck-maximize_html_editor')
document.body.classList.add('ck-maximize_body_editor')
let oParentElement: HTMLElement = oEditor.ui.element;
while (oParentElement.parentElement !== null) {
oParentElement = oParentElement.parentElement;
oParentElement.classList.add('parent_editor_screen');
oParentElement.classList.add('ck-maximize_parent_editor');
}
oEditor.ui.element.classList.add('editor_full_screen');
oEditor.ui.element.children[2].classList.add('editor__main_full_screen');
oEditor.ui.element.classList.add('ck-maximize_editor');
oEditor.ui.element.children[2].classList.add('ck-maximize_editor_main');
let oStyle = document.createElement('style');
// CSS rules definitions for each classes
oStyle.innerHTML = `
.editor__main_full_screen > * {
.ck-maximize_editor_main > * {
height: 100% !important;
width: 100% !important;
}
.editor__main_full_screen {
.ck-maximize_editor_main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.parent_editor_screen {
.ck-maximize_parent_editor {
position: fixed !important;
overflow: visible !important;
z-index: 1050 !important;
margin: 0 !important;
}
.body_editor_full_screen {
.ck-maximize_body_editor {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.html_editor_full_screen {
.ck-maximize_html_editor {
position: fixed !important;
width: 0 !important;
height: 0 !important;
}
.editor_full_screen {
.ck-maximize_editor {
position: fixed !important;
top: 0 !important;
left: 0 !important;