Skip to content

Commit

Permalink
CKEditor5: Use npm instead of package (#2789)
Browse files Browse the repository at this point in the history
* CKEditor5: Use npm instead of package
relates to xibosignageltd/xibo-private#718
relates to xibosignage/xibo#3546
  • Loading branch information
maurofmferrao authored Dec 19, 2024
1 parent f10bfe7 commit 6a77bd0
Show file tree
Hide file tree
Showing 89 changed files with 1,196 additions and 504 deletions.
880 changes: 880 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
"bootstrap-tagsinput": "^0.7.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "1.0.0",
"ckeditor5": "^43.3.0",
"codemirror": "^6.0.1",
"colors.js": "~1.2.4",
"corejs-typeahead": "^1.3.3",
Expand Down
189 changes: 189 additions & 0 deletions ui/bundle_wysiwyg_editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
/*
* Copyright (C) 2024 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
import {
ClassicEditor,
InlineEditor,
AccessibilityHelp,
Alignment,
Autoformat,
AutoImage,
Autosave,
BlockQuote,
Bold,
CloudServices,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
Paragraph,
SelectAll,
SpecialCharacters,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersEssentials,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
TodoList,
Underline,
Undo,
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

const config = {
toolbar: {
items: [
'undo',
'redo',
'fontFamily',
'fontSize',
'fontColor',
'fontBackgroundColor',
'alignment',
'outdent',
'indent',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'subscript',
'superscript',
'|',
'bulletedList',
'numberedList',
'blockQuote',
'insertTable',
'horizontalLine',
'specialCharacters',
'|',
'heading',
],
shouldNotGroupWhenFull: true,
},
plugins: [
AccessibilityHelp,
Alignment,
Autoformat,
AutoImage,
Autosave,
BlockQuote,
Bold,
CloudServices,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
Paragraph,
SelectAll,
SpecialCharacters,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersEssentials,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableCellProperties,
TableProperties,
TableToolbar,
TextTransformation,
TodoList,
Underline,
Undo,
],
language: 'en-gb',
image: {
toolbar: [
'imageTextAlternative',
'toggleImageCaption',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableProperties',
'tableCellProperties',
],
},
};

ClassicEditor.defaultConfig = config;
InlineEditor.defaultConfig = config;

window.CKEDITOR = {
ClassicEditor,
InlineEditor,
};
91 changes: 90 additions & 1 deletion ui/src/helpers/form-helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -739,6 +739,7 @@ const formHelpers = function() {
$container.css('transform-origin', '0 0');
$container.css('word-wrap', 'inherit');
$container.css('line-height', 'normal');
$container.css('padding', '0');
$container
.css('outline-width', (CKEDITOR_OVERLAY_WIDTH / scale));

Expand All @@ -749,7 +750,10 @@ const formHelpers = function() {
scale: scale,
});

$container.find('p').css('margin', '0 0 16px');
$container.find('p')
.css('margin', '0 0 16px')
.css('margin-top', 0);

$container.show();
} else {
$('#cke_' + field + ' iframe').contents().find('head').append(
Expand Down Expand Up @@ -922,6 +926,15 @@ const formHelpers = function() {
});
}

// If we have a detached editor, we need to add a property
// to the main bar to help with CSS styling
$(
'.ck-editor-body-detached .ck-body-wrapper ' +
'.ck-balloon-panel > .ck-toolbar',
).each((_idx, el) => {
$(el).parent().attr('data-main-toolbar', 1);
});

return false;
});
});
Expand Down Expand Up @@ -1121,6 +1134,82 @@ const formHelpers = function() {
$sourceElement = $sourceElement.siblings('textarea');
}

// Add CKEditor default CSS to the content to match the editor
// Convert into temporary DOM element
const $tempObj = $('<div>' + data + '</div>');

// Inject necessary CSS
const setCSSDefaultRules = function(els, rules) {
$(els).each(function(_idx, el) {
const $el = $(el);

for (const rule in rules) {
if (Object.hasOwn(rules, rule)) {
const value = rules[rule];
const oldStyle = $el.attr('style');

$el.attr('style', `${rule}: ${value}; ${oldStyle}`);
}
}
});
};

// Tables
$tempObj.find('.table').each((_idx, table) => {
const $table = $(table);

setCSSDefaultRules(
$table,
{
margin: '0.9em auto',
display: 'table',
},
);

setCSSDefaultRules(
$table.find('.ck-table-resized'),
{
'table-layout': 'fixed',
},
);

setCSSDefaultRules(
$table.find('table'),
{
overflow: 'hidden',
'border-collapse': 'collapse',
'border-spacing': '0',
width: '100%',
height: '100%',
border: '1px double hsl(0, 0%, 70%)',
},
);

setCSSDefaultRules(
$table.find('td, th'),
{
'text-align': 'left',
'overflow-wrap': 'break-word',
position: 'relative',
'min-width': '2em',
padding: '.4em',
border: '1px solid hsl(0, 0%, 75%)',
},
);

setCSSDefaultRules(
$table.find('th'),
{
'font-weight': 'bold',
'background-color': 'hsla(0, 0%, 0%, 5%)',
},
);
});

// Save object back to data string
// and inhect necessary CSS
data = $tempObj.html();

$sourceElement.val(data);

// If we're not saving, trigger change for saving
Expand Down
26 changes: 24 additions & 2 deletions ui/src/style/forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -180,11 +180,32 @@
z-index: calc($properties-panel-rich-text-container-z-index + 1) !important;
}

.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel.ck-toolbar-container {
.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel[data-main-toolbar] {
z-index: calc($properties-panel-rich-text-container-z-index + 2) !important;
right: 150px !important;
left: auto !important;
top: 66px ! important;
top: auto !important;
bottom: calc(100vh - 100px) !important;
width: calc(100vw - 300px) !important;
display: block;

&::before, &:after {
display: none;
}
}

.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel:not(.ck-powered-by-balloon):not([data-main-toolbar]) {
top: 148px !important;
left: 160px !important;
opacity: 0.95;
}

.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel.ck-powered-by-balloon {
top: auto !important;
left: auto !important;
bottom: 16px !important;
right: 16px !important;
display: block;
}

.rich-text-main-container {
Expand Down Expand Up @@ -227,6 +248,7 @@
.ck-editor__editable_inline {
outline-color: $xibo-color-accent;
outline-style: solid;
border-radius: 0 !important;
}

&.source {
Expand Down
21 changes: 0 additions & 21 deletions ui/src/vendor/ckeditor/LICENSE.md

This file was deleted.

Loading

0 comments on commit 6a77bd0

Please sign in to comment.