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') }}