Issue #76: Add custom fullscreen plugin

ckeditor5.module

@@ -124,6 +124,16 @@ function ckeditor5_library_info() {
       $module_path . '/js/plugins/backdrop-link/backdrop-link.js' => array(),
     ),
   );
+  $libraries['backdrop.ckeditor5.maximize'] = array(
+    'title' => 'Provides a CKEditor 5 plugin to maximize the editor.',
+    'version' => $info['version'],
+    'js' => array(
+      $module_path . '/js/plugins/backdrop-maximize/backdrop-maximize.js' => array(),
+    ),
+    'css' => array(
+      $module_path . '/css/ckeditor5-maximize.css' => array(),
+    ),
+  );
 
   $libraries['ckeditor5'] = array(
     'title' => 'Loads the main CKEditor library.',
@@ -744,6 +754,19 @@ function ckeditor5_ckeditor5_plugins() {
     ),
   );
 
+  $plugins['backdropMaximize.Maximize'] = array(
+    'library' => array('ckeditor5', 'backdrop.ckeditor5.maximize'),
+    'buttons' => array(
+      'maximize' => array(
+        'label' => t('Maximize'),
+        'image' => $image_prefix . '/maximize.svg',
+      ),
+    ),
+    'config' => array(
+      'maximizeLabel' => t('Maximize'),
+    ),
+  );
+
   // See https://ckeditor.com/docs/ckeditor5/latest/features/undo-redo.html
   $plugins['undo.Undo'] = array(
     'buttons' => array(

css/ckeditor5-maximize.css

@@ -0,0 +1,40 @@
+/**
+ * @file
+ * Styles to maximize the editor.
+ */
+:root {
+  /* Keep editor modal elements above maximized item. */
+  --ck-z-modal: 1002 !important;
+}
+body.ck-scroll-prevented {
+  /* Prevent double scroll bars with large content. */
+  overflow: hidden;
+}
+.ck-maximize-active .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
+  /* Force to ignore the space for admin-bar. */
+  top: 0 !important;
+  /* Force full width. */
+  width: 100% !important;
+}
+.ck-maximize-active {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  z-index: 1001;
+  overflow: auto;
+}
+.ck-maximize-active .ck.ck-editor {
+  flex-grow: 1;
+}
+.ck-maximize-active .ck.ck-editor__main {
+  height: calc(100% - 41px);
+}
+.ck-maximize-active .ck.ck-content {
+  height: 100%;
+}

js/plugins/backdrop-maximize/backdrop-maximize.js

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Backdrop maximize plugin.
+ */
+(function (Backdrop, CKEditor5) {
+
+  "use strict";
+
+  class Maximize extends CKEditor5.core.Plugin {
+    init() {
+      const editor = this.editor;
+
+      editor.ui.componentFactory.add( 'maximize', () => {
+        const button = new CKEditor5.ui.ButtonView();
+        const activeClass = 'ck-maximize-active';
+
+        button.set( {
+          label: editor.config.get('maximizeLabel'),
+          tooltip: true,
+          icon: '<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m7 2h-5v5l1.8-1.8 2.7 2.8 1.5-1.5-2.8-2.7zm6 0 1.8 1.8-2.8 2.7 1.5 1.5 2.7-2.7 1.8 1.7v-5zm.5 10-1.5 1.5 2.7 2.7-1.7 1.8h5v-5l-1.8 1.8zm-7 0-2.7 2.7-1.8-1.7v5h5l-1.8-1.8 2.8-2.7z"/></svg>',
+          isToggleable: true,
+          isOn: false
+        });
+
+        button.on( 'execute', () => {
+          // Applying the class to the parent keeps the sticky toolbar working.
+          const editorParent = editor.ui.view.element.parentNode;
+
+          if (editorParent.classList.contains(activeClass)) {
+            editorParent.classList.remove(activeClass);
+            document.body.classList.remove('ck-scroll-prevented');
+            button.isOn = false;
+          }
+          else {
+            editorParent.classList.add(activeClass);
+            document.body.classList.add('ck-scroll-prevented');
+            button.isOn = true;
+          }
+          window.dispatchEvent(new Event('resize'));
+          editor.editing.view.focus();
+          editor.editing.view.scrollToTheSelection();
+        });
+
+        return button;
+      });
+    }
+  }
+
+  // Expose the plugin to the CKEditor5 namespace.
+  CKEditor5.backdropMaximize = {
+    'Maximize': Maximize
+  };
+
+})(Backdrop, CKEditor5);