From c7c33b889aa47df4b20944c83bc16403a612a6ab Mon Sep 17 00:00:00 2001 From: Mara Karagianni Date: Thu, 29 Feb 2024 13:07:39 +0200 Subject: [PATCH] assets: ckeditor5 js and style --- .../assets/extra_css/_ckeditor.scss | 227 ++++++++++++++++++ adhocracy-plus/assets/js/app.js | 5 - .../scss/components/_ck_embed_iframe.scss | 14 ++ adhocracy-plus/assets/scss/style.scss | 2 + apps/documents/assets/ParagraphForm.jsx | 12 +- 5 files changed, 249 insertions(+), 11 deletions(-) create mode 100644 adhocracy-plus/assets/extra_css/_ckeditor.scss create mode 100644 adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss diff --git a/adhocracy-plus/assets/extra_css/_ckeditor.scss b/adhocracy-plus/assets/extra_css/_ckeditor.scss new file mode 100644 index 0000000000..c67b0bc616 --- /dev/null +++ b/adhocracy-plus/assets/extra_css/_ckeditor.scss @@ -0,0 +1,227 @@ +/* + * CKEditor 5 (v40.2.0) content styles. + * Generated on Wed, 13 Dec 2023 08:57:10 GMT. + * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html + */ + +:root { + --ck-color-image-caption-background: hsl(0deg, 0%, 97%); + --ck-color-image-caption-text: hsl(0deg, 0%, 20%); + --ck-color-mention-background: hsla(341deg, 100%, 30%, 0.1); + --ck-color-mention-text: hsl(341deg, 100%, 30%); + --ck-color-selector-caption-background: hsl(0deg, 0%, 97%); + --ck-color-selector-caption-text: hsl(0deg, 0%, 20%); + --ck-highlight-marker-blue: hsl(201deg, 97%, 72%); + --ck-highlight-marker-green: hsl(120deg, 93%, 68%); + --ck-highlight-marker-pink: hsl(345deg, 96%, 73%); + --ck-highlight-marker-yellow: hsl(60deg, 97%, 73%); + --ck-highlight-pen-green: hsl(112deg, 100%, 27%); + --ck-highlight-pen-red: hsl(0deg, 85%, 49%); + --ck-image-style-spacing: 1.5em; + --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2); + --ck-todo-list-checkmark-size: 16px; +} + +/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */ +.ck-content .media { + clear: both; + margin: 0.9em 0; + display: block; + min-width: 15em; +} + +/* @ckeditor/ckeditor5-image/theme/image.css */ +.ck-content .image img { + display: block; + margin: 0 auto; + max-width: 100%; + min-width: 100%; + height: auto; +} + +/* @ckeditor/ckeditor5-image/theme/image.css */ +.ck-content .image-inline { + /* + * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).; + * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root. + * This strange behavior does not happen with inline-flex. + */ + display: inline-flex; + max-width: 100%; + align-items: flex-start; +} + +/* @ckeditor/ckeditor5-image/theme/image.css */ +.ck-content .image-inline picture, +.ck-content .image-inline img { + flex-grow: 1; + flex-shrink: 1; + max-width: 100%; +} + +/* @ckeditor/ckeditor5-image/theme/imageresize.css */ +.ck-content img.image_resized { + height: auto; +} + +/* @ckeditor/ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized { + max-width: 100%; + display: block; + box-sizing: border-box; +} + +/* @ckeditor/ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized img { + width: 100%; +} + +/* @ckeditor/ckeditor5-image/theme/imagecaption.css */ +.ck-content .image > figcaption { + display: table-caption; + caption-side: bottom; + word-break: break-word; + color: var(--ck-color-image-caption-text); + background-color: var(--ck-color-image-caption-background); + padding: 0.6em; + font-size: 0.75em; + outline-offset: -1px; +} + +/* @ckeditor/ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized > figcaption { + display: block; +} + +/* @ckeditor/ckeditor5-image/theme/image.css */ +.ck-content .image { + display: table; + clear: both; + text-align: center; + margin: 0.9em auto; + min-width: 50px; +} + +/* @ckeditor/ckeditor5-image/theme/image.css */ +.ck-content .image-inline picture { + display: flex; +} + + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ol { + list-style-type: decimal; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ol ol { + list-style-type: lower-latin; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ol ol ol { + list-style-type: lower-roman; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ol ol ol ol { + list-style-type: upper-latin; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ol ol ol ol ol { + list-style-type: upper-roman; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ul { + list-style-type: disc; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ul ul { + list-style-type: circle; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ul ul ul { + list-style-type: square; +} + +/* @ckeditor/ckeditor5-list/theme/list.css */ +.ck-content ul ul ul ul { + list-style-type: square; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-block-align-left, +.ck-content .image-style-block-align-right { + max-width: calc(100% - var(--ck-image-style-spacing)); +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-left, +.ck-content .image-style-align-right { + clear: none; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-side { + float: right; + margin-left: var(--ck-image-style-spacing); + max-width: 50%; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-left { + float: left; + margin-right: var(--ck-image-style-spacing); +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-center { + margin-left: auto; + margin-right: auto; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-right { + float: right; + margin-left: var(--ck-image-style-spacing); +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-block-align-right { + margin-right: 0; + margin-left: auto; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-block-align-left { + margin-left: 0; + margin-right: auto; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content p + .image-style-align-left, +.ck-content p + .image-style-align-right, +.ck-content p + .image-style-side { + margin-top: 0; +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-inline.image-style-align-left, +.ck-content .image-inline.image-style-align-right { + margin-top: var(--ck-inline-image-style-spacing); + margin-bottom: var(--ck-inline-image-style-spacing); +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-inline.image-style-align-left { + margin-right: var(--ck-inline-image-style-spacing); +} + +/* @ckeditor/ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-inline.image-style-align-right { + margin-left: var(--ck-inline-image-style-spacing); +} diff --git a/adhocracy-plus/assets/js/app.js b/adhocracy-plus/assets/js/app.js index a25cb6b9f3..d9df2e8143 100644 --- a/adhocracy-plus/assets/js/app.js +++ b/adhocracy-plus/assets/js/app.js @@ -68,11 +68,6 @@ function init () { $('.js-select2').select2() } - // This function adds required classes to iframes added by ckeditor - $('.rich-text iframe').addClass('ck_embed_iframe') - $('.ck_embed_iframe').parent('div').addClass('ck_embed_iframe__container') -} - document.addEventListener('DOMContentLoaded', init, false) export function getCurrentPath () { diff --git a/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss b/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss new file mode 100644 index 0000000000..05b551c758 --- /dev/null +++ b/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss @@ -0,0 +1,14 @@ +.ck_embed_iframe__container { + overflow: hidden; + padding-top: 56.25%; // 16:9 aspect ratio + position: relative; + + .ck_embed_iframe { + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/adhocracy-plus/assets/scss/style.scss b/adhocracy-plus/assets/scss/style.scss index deb8605448..83aa28bad9 100644 --- a/adhocracy-plus/assets/scss/style.scss +++ b/adhocracy-plus/assets/scss/style.scss @@ -77,6 +77,7 @@ @import "components/complete"; @import "components/contact_form"; @import "components/copyright"; +@import "components/ck_embed_iframe"; @import "components/creator_count"; @import "components/dashboard_nav"; @import "components/data_table"; @@ -135,3 +136,4 @@ @import "utility"; @import "shame"; +@import "../extra_css/ckeditor"; diff --git a/apps/documents/assets/ParagraphForm.jsx b/apps/documents/assets/ParagraphForm.jsx index 46ae752f74..f171fb178b 100644 --- a/apps/documents/assets/ParagraphForm.jsx +++ b/apps/documents/assets/ParagraphForm.jsx @@ -107,16 +107,16 @@ class ParagraphForm extends React.Component {