From b49734db62a891193f66de6392543be1c69e079a Mon Sep 17 00:00:00 2001 From: Helmi Akermi <70575401+hakermi@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:36:58 +0100 Subject: [PATCH] feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#721) Notes editor is not wysiwyg --- .../main/webapp/skin/less/notes/editor.less | 26 ++++++++++++++++--- .../components/NoteTablePluginsDrawer.vue | 2 +- .../components/NotesEditorDashboard.vue | 16 +++++++----- .../components/TranslationsEditBar.vue | 2 +- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/notes-webapp/src/main/webapp/skin/less/notes/editor.less b/notes-webapp/src/main/webapp/skin/less/notes/editor.less index 236862db24..ba7dd9fb90 100644 --- a/notes-webapp/src/main/webapp/skin/less/notes/editor.less +++ b/notes-webapp/src/main/webapp/skin/less/notes/editor.less @@ -4,8 +4,17 @@ blockquote { font-weight: 400 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; + padding: 10px 0 0 10px !important; + border-left-color: @primaryColor !important; + margin: 0 0 10px 0 !important; + + p { + margin-bottom: 0 !important; + } + + strong { + font-weight: bold; + } } a { @@ -13,7 +22,7 @@ } ol, ul, dl { - margin: 0 0 10px 40px; + margin: 0 0 10px 0px; padding: 0 40px; } @@ -95,6 +104,15 @@ 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 { @@ -102,7 +120,7 @@ } img { - margin: 0 10px 10px 0 !important; + margin: 10px !important; } } 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 c67e19aa5d..f781efc23b 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 @@ -24,7 +24,7 @@ {{ noteFormTitle }} @@ -598,11 +598,15 @@ export default { 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 { font-size: 16px; line-height:1.4}'); - CKEDITOR.addCss('p, li, blockquote { font-size: 16px;}'); - CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 40px;padding: 0 40px;}'); + 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('blockquote {font-weight: 400;}'); + CKEDITOR.addCss('table td:not(:has(p)) {padding-bottom: 10px;}'); + CKEDITOR.addCss('blockquote {font-weight: 400; font-style:normal important; padding: 10px 0 0 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;}'); @@ -627,7 +631,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'] }, diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue index 91a56f9a95..c30eaed57e 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue @@ -18,7 +18,7 @@ color="primary" class="ma-1" small - :outlined="!!selectedTranslation?.value" + :outlined="!!selectedTranslation.value" @click="changeTranslation({value: ''})"> {{ $t('notes.label.translation.originalVersion') }}