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 000000000..82e76f948 --- /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 201f4070f..b0f6d6c6e 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 31d57126e..f0ee0628a 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 936afa1d9..e27666b16 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 2a7ffcf3d..528ea0288 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"> \ \