Merge pull request #2083 from vrk-kpa/AV-2017_more_ckeditor5_tweaks

AV-2017: More ckeditor5 tweaks
vrk-kpa · Oct 12, 2023 · d85b02d · d85b02d
2 parents d67d435 + fa9482a
commit d85b02d
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 10 deletions.
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/css/styles.css b/drupal/modules/avoindata-ckeditor5-plugins/css/styles.css
@@ -39,6 +39,11 @@
   display: inline-block;
   width: calc(100% - 45px);
 }
+.avoindata-expander-title h2,
+.avoindata-expander-title h3,
+.avoindata-expander-title h4 {
+  margin: 0;
+}
 .avoindata-expander-content {
   display: none;
   padding: 0 20px 15px;
@@ -257,6 +262,12 @@ a.external svg {
   color: #2a6ebb;
   display: block;
 }
+.ck-content .avoindata-expander .avoindata-expander-title h2,
+.ck-content .avoindata-expander .avoindata-expander-title h3,
+.ck-content .avoindata-expander .avoindata-expander-title h4 {
+  margin: 0;
+  margin-top: 1em;
+}
 .ck-content .avoindata-expander .avoindata-expander-content {
   padding: 0 20px 15px;
 }

diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExample.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExample.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExpander.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExpander.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExternalLink.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataExternalLink.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataHint.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataHint.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataNote.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataNote.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataSection.js b/drupal/modules/avoindata-ckeditor5-plugins/js/avoindataSection.js
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataExample/avoindataExampleEditing.js b/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataExample/avoindataExampleEditing.js
@@ -206,5 +206,22 @@ export default class AvoindataExampleEditing extends Plugin {
         return toWidgetEditable(div, viewWriter);
       },
     });
+
+    // Extra converters for the older format ckeditor4 plugins
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataExampleTitle',
+      view: {
+        name: 'h2',
+        classes: 'avoindata-example-title',
+      },
+    });
+
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataExampleTitle',
+      view: {
+        name: 'h3',
+        classes: 'avoindata-example-title',
+      },
+    });
   }
 }
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataExpander/avoindataExpanderEditing.js b/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataExpander/avoindataExpanderEditing.js
@@ -222,5 +222,13 @@ export default class AvoindataExpanderEditing extends Plugin {
         classes: 'avoindata-expander-title',
       },
     });
+
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataExpanderTitle',
+      view: {
+        name: 'h3',
+        classes: 'avoindata-expander-title',
+      },
+    });
   }
 }
diff --git a/...dules/avoindata-ckeditor5-plugins/src/avoindataExpander/insertAvoindataExpanderCommand.js b/...dules/avoindata-ckeditor5-plugins/src/avoindataExpander/insertAvoindataExpanderCommand.js
@@ -49,7 +49,7 @@ function createAvoindataExpander(writer) {
 
   // The text content will automatically be wrapped in a
   // `<p>`.
-  const title = writer.createElement('paragraph');
+  const title = writer.createElement('heading4');
   writer.insertText('Title', title, 0);
   writer.append(title, avoindataExpanderTitle);
   const content = writer.createElement('paragraph');

diff --git a/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataNote/avoindataNoteEditing.js b/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataNote/avoindataNoteEditing.js
@@ -260,5 +260,21 @@ export default class AvoindataNoteEditing extends Plugin {
         classes: 'avoindata-note-header-image'
       },
     });
+
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataNoteTitle',
+      view: {
+        name: 'h2',
+        classes: 'avoindata-note-title'
+      },
+    });
+
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataNoteTitle',
+      view: {
+        name: 'h3',
+        classes: 'avoindata-note-title'
+      },
+    });
   }
 }
diff --git a/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataNote/insertAvoindataNoteCommand.js b/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataNote/insertAvoindataNoteCommand.js
@@ -51,7 +51,7 @@ function createAvoindataNote(writer) {
 
   // The text content will automatically be wrapped in a
   // `<p>`.
-  const title = writer.createElement('paragraph');
+  const title = writer.createElement('heading4');
   writer.insertText('Title', title, 0);
   writer.append(title, avoindataNoteTitle);
   const content = writer.createElement('paragraph');

diff --git a/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataSection/avoindataSectionEditing.js b/drupal/modules/avoindata-ckeditor5-plugins/src/avoindataSection/avoindataSectionEditing.js
@@ -221,6 +221,14 @@ export default class AvoindataSectionEditing extends Plugin {
 
 
     // Extra converters for the older format ckeditor4 plugins
+    conversion.for('upcast').elementToElement({
+      model: 'avoindataSectionTitle',
+      view: {
+        name: 'h2',
+        classes: 'avoindata-section__title',
+      },
+    });
+
     conversion.for('upcast').elementToElement({
       model: 'avoindataSectionTitle',
       view: {

diff --git a/...modules/avoindata-ckeditor5-plugins/src/avoindataSection/insertAvoindataSectionCommand.js b/...modules/avoindata-ckeditor5-plugins/src/avoindataSection/insertAvoindataSectionCommand.js
@@ -56,7 +56,7 @@ function createAvoindataSection(writer, id) {
 
   // The text content will automatically be wrapped in a
   // `<p>`.
-  const title = writer.createElement('paragraph');
+  const title = writer.createElement('heading3');
   writer.insertText('Title', title, 0);
   writer.append(title, avoindataSectionTitle);
   const content = writer.createElement('paragraph');

diff --git a/opendata-assets/src/less/drupal/custom-elements.less b/opendata-assets/src/less/drupal/custom-elements.less
@@ -47,6 +47,12 @@
   padding: 20px 0 20px 20px;
   display: inline-block;
   width: calc(100% - 45px);
+
+  h2,
+  h3,
+  h4 {
+    margin: 0;
+  }
 }
 
 .avoindata-expander-content {

diff --git a/opendata-assets/src/less/drupal/editor.less b/opendata-assets/src/less/drupal/editor.less
@@ -42,13 +42,21 @@
     border: 1px solid #ecedee;
     margin: 0;
 
-    .avoindata-expander-title {
+
+  .avoindata-expander-title {
       font-size: 18px;
       font-weight: 600;
       line-height: 27px;
       padding: 0 20px 5px;
       color: #2a6ebb;
       display: block;
+
+      h2,
+      h3,
+      h4 {
+        margin: 0;
+        margin-top: 1em;
+      }
     }
 
     .avoindata-expander-content {