From a3f1218a642fbdfd3dba250a3f7116eba5744c86 Mon Sep 17 00:00:00 2001 From: Helmi Akermi <70575401+hakermi@users.noreply.github.com> Date: Wed, 30 Aug 2023 20:36:00 +0100 Subject: [PATCH] feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#70 (#713) Notes editor is not wysiwyg feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#721) Notes editor is not wysiwyg fix: Adjust blockquote wysiwyg styles - EXO-65725 - Meeds-io/MIPs#71 (#732) Adjust blockquote wysiwyg styles fix: Adjust blockquote of list of items styles - EXO-65725 - Meeds-io/MIPs#71 (#737) Adjust blockquote of list of items styles fix: blockquotes in notes view mode are not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#744) Prior to this change, blockquotes in notes view mode are not wysiwyg in term of font style. The PR makes sure to have the same normal font style in both view and edit mode --- .../main/webapp/skin/less/notes/editor.less | 130 ++++++++++++++++++ .../main/webapp/skin/less/notes/notes.less | 62 ++------- .../components/NoteTablePluginsDrawer.vue | 2 +- .../components/NotesEditorDashboard.vue | 30 +++- .../notes/components/NotesOverview.vue | 2 +- 5 files changed, 165 insertions(+), 61 deletions(-) create mode 100644 notes-webapp/src/main/webapp/skin/less/notes/editor.less diff --git a/notes-webapp/src/main/webapp/skin/less/notes/editor.less b/notes-webapp/src/main/webapp/skin/less/notes/editor.less new file mode 100644 index 0000000000..82e76f9484 --- /dev/null +++ b/notes-webapp/src/main/webapp/skin/less/notes/editor.less @@ -0,0 +1,130 @@ +#notesOverviewApplication { + + .notes-application-content { + + blockquote { + font-weight: 400 !important; + padding: 10px !important; + border-left-color: @primaryColor !important; + margin: 0 0 10px 0 !important; + + p { + margin-bottom: 0 !important; + line-height: 1.4 !important; + font-size: 16px !important; + font-style: normal !important; + } + + strong { + font-weight: bold; + } + } + + a { + color: #0782C1; + } + + ol, ul, dl { + margin: 0 0 10px 0 !important; + padding: 0 40px !important; + } + + ol { + list-style-type: decimal; + + & ol { + list-style-type: lower-latin; + + & ol { + list-style-type: lower-roman; + + & ol { + list-style-type: upper-latin; + + & ol { + list-style-type: upper-roman; + } + } + } + } + } + + .video { + position: relative; + clear: both; + width: 80%; + height: 0; + padding-bottom: 33.74%; + margin: 15px auto; + + iframe { + position: absolute; + left: 0; + width: 100%; + height: 100%; + } + } + + ul li, ol li { + list-style: revert; + font-size: 16px; + line-height: 1.4; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: normal; + line-height: 1.2; + } + + h1, h2, h3 { + font-weight: 500 !important; + line-height: 1.2 !important; + } + + h1 { + font-size: 28px !important; + margin-top: 45px !important; + } + + h2 { + font-size: 23px !important; + margin-top: 35px !important; + } + + h3 { + font-size: 18px !important; + margin-top: 25px !important; + } + + p, li { + line-height: 1.4 !important; + } + + p, li, blockquote { + font-size: 16px !important; + } + + table { + margin-top: 0 !important; + margin-bottom: 10px !important; + + td { + line-height: 1.4 !important; + font-size: 16px !important; + } + + td:not(:has(p)) { + padding-bottom: 10px; + } + } + + .content-link { + font-size: 16px !important; + } + + img { + margin: 10px !important; + } + + } +} diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less index 201f4070fd..b0f6d6c6ed 100644 --- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less +++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less @@ -7,7 +7,7 @@ @import "Notifications/Style.less"; @import "Sprites/Style.less"; @import "UIWikiRichTextEditor/Stylesheet.less"; - +@import "editor.less"; /************ New css feature notes ****************/ .customPluginsDrawer { z-index: 99999 !important; @@ -180,6 +180,14 @@ } } +#notesOverviewApplication { + + .notes-application-content { + overflow: auto; + min-height: calc(~"100vh - 350px"); + margin: 4px; + } +} #notesOverviewApplication, .notesApplication { max-width: 100%; @@ -205,51 +213,6 @@ margin: 5px auto 0; } } - .notes-application-content { - overflow: auto; - min-height: calc(~"100vh - 350px"); - .video { - position: relative; - clear: both; - width: 80%; - height: 0; - padding-bottom: 33.74%; - margin: 15px auto; - - iframe { - position: absolute; - left: 0; - width: 100%; - height: 100%; - } - } - - h1, h2, h3 { - font-weight: 400 !important; - } - - h1 { - font-size: 34px !important; - } - - h2 { - font-size: 28px !important; - } - - h3 { - font-size: 21.84px !important; - } - - p, li { - font-size:18.6667px !important; - line-height: 1.4 !important; - } - - blockquote p { - font-size:17.5px !important; - font-weight: 300 !important; - } - } table { width: auto; @@ -297,13 +260,6 @@ } } } - - .notes-application-content { - ul li { - list-style-position: inside; - list-style-type: disc; - } - } } .notes-tree-items { diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue index 31d57126ed..f0ee0628a2 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue @@ -336,7 +336,7 @@ export default { elementContainer.appendChild(contentSummary); elementContainer.appendChild(table); div.appendChild(elementContainer); - table.setAttribute('width', this.width); + table.setAttribute('style', `width:${this.width}px !important`); table.setAttribute('border', this.border); table.setAttribute('cellPadding', this.internal); table.setAttribute('height', this.height); diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue index 936afa1d9f..e27666b16f 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue @@ -533,13 +533,27 @@ export default { removePlugins = `${removePlugins},${ckEditorRemovePlugins}`; } } - CKEDITOR.addCss('h1 { font-size: 34px;font-weight: 400;}'); - CKEDITOR.addCss('h2 { font-size: 28px;font-weight: 400;}'); - CKEDITOR.addCss('h3 { font-size: 21.84px;font-weight: 400;}'); - CKEDITOR.addCss('p,li { font-size: 18.6667px;}'); - CKEDITOR.addCss('blockquote p { font-size: 17.5px;font-weight: 300;}'); + + CKEDITOR.addCss('h1 { font-size: 28px;margin-top:45px; }'); + CKEDITOR.addCss('h2 { font-size: 23px;margin-top:35px; }'); + CKEDITOR.addCss('h3 { font-size: 18px;margin-top:25px; }'); + CKEDITOR.addCss('h1, h2, h3 { font-weight: 500; line-height:1.2; }'); + CKEDITOR.addCss('p,li, table td { line-height:1.4}'); + CKEDITOR.addCss('p, li, table td, blockquote { font-size: 16px;}'); + CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 0px;padding: 0 40px;}'); + CKEDITOR.addCss('ul li {list-style: revert; list-style-type: inherit !important;}'); + CKEDITOR.addCss('table td:not(:has(p)) {padding-bottom: 10px;}'); + CKEDITOR.addCss('blockquote {font-weight: 400; font-style:normal !important; padding: 10px !important; margin: 0 0 10px 0 !important;}'); + CKEDITOR.addCss('table {margin-bottom: 10px !important; margin-top: 0 !important;}'); + CKEDITOR.addCss('td {margin-bottom: 10px !important; margin-top: 0 !important;}'); + CKEDITOR.addCss('img {margin:10px !important; }'); CKEDITOR.addCss('.cke_editable { font-size: 14px; line-height: 1.4 !important;}'); CKEDITOR.addCss('.placeholder { color: #5f708a!important;}'); + CKEDITOR.addCss('ol li {list-style-type: decimal !important;}'); + CKEDITOR.addCss('ol ol li {list-style-type: lower-latin !important;}'); + CKEDITOR.addCss('ol ol ol li {list-style-type: lower-roman !important;}'); + CKEDITOR.addCss('ol ol ol ol li {list-style-type: upper-latin !important;}'); + CKEDITOR.addCss('ol ol ol ol ol li {list-style-type: upper-roman !important;}'); // this line is mandatory when a custom skin is defined @@ -557,7 +571,7 @@ export default { toolbarLocation: 'top', extraAllowedContent: 'table[!summary]; img[style,class,src,referrerpolicy,alt,width,height]; span(*)[*]{*}; span[data-atwho-at-query,data-atwho-at-value,contenteditable]; a[*];i[*];', removeButtons: '', - enterMode: CKEDITOR.ENTER_BR, + enterMode: CKEDITOR.ENTER_P, shiftEnterMode: CKEDITOR.ENTER_BR, toolbar: [ { name: 'format', items: ['Format'] }, @@ -569,6 +583,10 @@ export default { { name: 'insert' }, { name: 'links', items: [ 'simpleLink','InsertOptions'] }, ], + indentBlock: { + offset: 40, + unit: 'px' + }, format_tags: 'p;h1;h2;h3', autoGrow_minHeight: self.noteFormContentHeight, height: self.noteFormContentHeight, diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue index 2a7ffcf3d3..528ea02886 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue @@ -354,7 +354,7 @@ export default { :items="noteChildItems" \ item-key="noteId"> \ \