Merge branch 'ckeditor5' into moodle

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 vendor
 *~
-.idea
+.idea

h5p-default-storage.class.php

@@ -137,10 +137,14 @@ public function exportContent($id, $target) {
    *  Folder that library resides in
    */
   public function exportLibrary($library, $target, $developmentPath=NULL) {
-    $folder = \H5PCore::libraryToFolderName($library);
+    $srcFolder = \H5PCore::libraryToFolderName($library);
+    $srcPath = ($developmentPath === NULL ? "/libraries/{$srcFolder}" : $developmentPath);
 
-    $srcPath = ($developmentPath === NULL ? "/libraries/{$folder}" : $developmentPath);
-    self::copyFileTree("{$this->path}{$srcPath}", "{$target}/{$folder}");
+    // Library folders inside the H5P zip file shall not contain patch version in the folder name
+    $library['patchVersionInFolderName'] = false;
+    $destinationFolder = \H5PCore::libraryToFolderName($library);
+
+    self::copyFileTree("{$this->path}{$srcPath}", "{$target}/{$destinationFolder}");
   }
 
   /**

h5p.classes.php

@@ -2072,13 +2072,14 @@ class H5PCore {
 
   public static $coreApi = array(
     'majorVersion' => 1,
-    'minorVersion' => 26
+    'minorVersion' => 27
   );
   public static $styles = array(
     'styles/h5p.css',
     'styles/h5p-confirmation-dialog.css',
     'styles/h5p-core-button.css',
     'styles/h5p-tooltip.css',
+    'styles/h5p-table.css',
   );
   public static $scripts = array(
     'js/jquery.js',
@@ -3780,7 +3781,12 @@ public function getLocalization() {
       'keywordsExits' => $this->h5pF->t('Keywords already exists!'),
       'someKeywordsExits' => $this->h5pF->t('Some of these keywords already exist'),
       'width' => $this->h5pF->t('width'),
-      'height' => $this->h5pF->t('height')
+      'height' => $this->h5pF->t('height'),
+      'rotateLeft' => $this->h5pF->t('Rotate Left'),
+      'rotateRight' => $this->h5pF->t('Rotate Right'),
+      'cropImage' => $this->h5pF->t('Crop Image'),
+      'confirmCrop' => $this->h5pF->t('Confirm Crop'),
+      'cancelCrop' => $this->h5pF->t('Cancel Crop')
     );
   }
 
@@ -3958,7 +3964,6 @@ public function hubAccountInfo() {
     }
 
     if (empty($siteUuid) || empty($secret)) {
-      $this->h5pF->setErrorMessage($this->h5pF->t('Missing Site UUID or Hub Secret. Please check your Hub registration.'));
       return false;
     }
 
@@ -4162,7 +4167,20 @@ class H5PContentValidator {
   public $h5pF;
   public $h5pC;
   private $typeMap, $libraries, $dependencies, $nextWeight;
-  private static $allowed_styleable_tags = array('span', 'p', 'div','h1','h2','h3', 'td');
+  private static $allowed_styleable_tags = [
+    'span',
+    'p',
+    'div',
+    'h1',
+    'h2',
+    'h3',
+    'table',
+    'col',
+    'figure',
+    'td',
+    'th',
+    'li'
+  ];
 
   /** @var bool Allowed styles status. */
   protected $allowedStyles;
@@ -4262,7 +4280,7 @@ public function validateText(&$text, $semantics) {
 
       // Add related tags for table etc.
       if (in_array('table', $tags)) {
-        $tags = array_merge($tags, array('tr', 'td', 'th', 'colgroup', 'thead', 'tbody', 'tfoot'));
+        $tags = array_merge($tags, array('tr', 'td', 'th', 'colgroup', 'col', 'thead', 'tbody', 'tfoot', 'figure', 'figcaption'));
       }
       if (in_array('b', $tags) && ! in_array('strong', $tags)) {
         $tags[] = 'strong';
@@ -4285,13 +4303,13 @@ public function validateText(&$text, $semantics) {
           $stylePatterns[] = '/^font-size: *[0-9.]+(em|px|%) *;?$/i';
         }
         if (isset($semantics->font->family) && $semantics->font->family) {
-          $stylePatterns[] = '/^font-family: *[-a-z0-9," ]+;?$/i';
+          $stylePatterns[] = '/^font-family: *[-a-z0-9,\'&; ]+;?$/i';
         }
         if (isset($semantics->font->color) && $semantics->font->color) {
-          $stylePatterns[] = '/^color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)) *;?$/i';
+          $stylePatterns[] = '/^color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i';
         }
         if (isset($semantics->font->background) && $semantics->font->background) {
-          $stylePatterns[] = '/^background-color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)) *;?$/i';
+          $stylePatterns[] = '/^background-color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i';
         }
         if (isset($semantics->font->spacing) && $semantics->font->spacing) {
           $stylePatterns[] = '/^letter-spacing: *[0-9.]+(em|px|%) *;?$/i';
@@ -4301,6 +4319,28 @@ public function validateText(&$text, $semantics) {
         }
       }
 
+      // Allow styling of tables if they are allowed
+      if (isset($semantics->tags) && in_array('table', $semantics->tags)) {
+        // CKEditor outputs border as width style color
+        $stylePatterns[] = '/^border: *[0-9.]+(em|px|%|) *(none|solid|dotted|dashed|double|groove|ridge|inset|outset) *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i';
+        $stylePatterns[] = '/^border-style: *(none|solid|dotted|dashed|double|groove|ridge|inset|outset) *;?$/i';
+        $stylePatterns[] = '/^border-width: *[0-9.]+(em|px|%|) *;?$/i';
+        $stylePatterns[] = '/^border-color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i';
+
+        $stylePatterns[] = '/^vertical-align: *(middle|top|bottom);?$/i';
+        $stylePatterns[] = '/^padding: *[0-9.]+(em|px|%|) *;?$/i';
+        $stylePatterns[] = '/^width: *[0-9.]+(em|px|%|) *;?$/i';
+        $stylePatterns[] = '/^height: *[0-9.]+(em|px|%|) *;?$/i';
+        $stylePatterns[] = '/^float: *(right|left|none) *;?$/i';
+
+        // Needed for backwards compatibility
+        $stylePatterns[] = '/^border-collapse: *collapse *;?$/i';
+
+        // Table can have background color when font bgcolor is disabled
+        // Double entry of bgcolor in stylePatterns shouldn't matter
+        $stylePatterns[] = '/^background-color: *(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i';
+      }
+
       // Alignment is allowed for all wysiwyg texts
       $stylePatterns[] = '/^text-align: *(center|left|right);?$/i';
 
@@ -4997,13 +5037,25 @@ private function _filter_xss_attributes($attr, $allowedStyles = FALSE) {
           if (preg_match('/^"([^"]*)"(\s+|$)/', $attr, $match)) {
             if ($allowedStyles && $attrName === 'style') {
               // Allow certain styles
+
+              // Prevent font family from getting split wrong because of the ; in "
+              if (str_contains($match[1], 'font-family')) {
+                $match[1] = str_replace('"', "'", $match[1]);
+              }
+
+              $validatedStyles = [];
+              $styles = explode(';', $match[1]);
+
               foreach ($allowedStyles as $pattern) {
-                if (preg_match($pattern, $match[1])) {
-                  // All patterns are start to end patterns, and CKEditor adds one span per style
-                  $attrArr[] = 'style="' . $match[1] . '"';
-                  break;
+                foreach ($styles as $style) {
+                  $style = trim($style);
+                  if (preg_match($pattern, $style)) {
+                    $validatedStyles[] = $style;
+                  }
                 }
               }
+
+              $attrArr[] = 'style="' . implode(';', $validatedStyles) . ';"';
               break;
             }
 

js/h5p.js

@@ -186,7 +186,7 @@ H5P.init = function (target) {
         instance.triggerXAPI('accessed-reuse');
       });
       actionBar.on('copyrights', function () {
-        var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container, $actions.find('.h5p-copyrights')[0]);
+        var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container);
         dialog.open(true);
         instance.triggerXAPI('accessed-copyright');
       });
@@ -1040,11 +1040,12 @@ H5P.t = function (key, vars, ns) {
  * @param {H5P.jQuery} $element
  *   Which DOM element the dialog should be inserted after.
  * @param {H5P.jQuery} $returnElement
- *   Which DOM element the focus should be moved to on close   
+ *   Which DOM element the focus should be moved to on close
  */
 H5P.Dialog = function (name, title, content, $element, $returnElement) {
   /** @alias H5P.Dialog# */
   var self = this;
+  this.activeElement = document.activeElement;
   var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog" aria-labelledby="' + name + '-dialog-header" aria-modal="true" role="dialog" tabindex="-1">\
                               <div class="h5p-inner">\
                                 <h2 id="' + name + '-dialog-header">' + title + '</h2>\
@@ -1109,6 +1110,9 @@ H5P.Dialog = function (name, title, content, $element, $returnElement) {
       if ($returnElement) {
         $returnElement.focus();
       }
+      else if(self.activeElement) {
+        self.activeElement.focus();
+      }
       else {
         $element.focus();
       }

styles/h5p-table.css

@@ -0,0 +1,56 @@
+/* Table styling for content types to imitate ckeditor 5 */
+.h5p-iframe {
+  /* The figure around the table */
+  figure.table {
+    display: table;
+    table-layout: fixed;
+    margin: 0 auto;
+    padding: 0;
+    float: left;
+
+    /* The actual table */
+    table {
+      border-collapse: collapse;
+      height: 100%;
+      width: 100%;
+      border-spacing: 0;
+      border-width: 1px;
+      border-color:  #494949;
+
+      td, th {
+        padding: 1px;
+        border-color:  #494949;
+        border-bottom-style: solid;
+      }
+
+      td {
+        border-width: 0.083em;
+      }
+
+      th {
+        text-align: left;
+        border-width: .167em;
+      }
+
+      tr:last-child > td {
+        border-bottom-style: none;
+      }
+    }
+
+    figcaption {
+      background-color: transparent;
+      caption-side: top;
+      color: #333;
+      display: table-caption;
+      font-size: .75em;
+      outline-offset: -1px;
+      padding: .6em;
+      text-align: center;
+      word-break: break-word;
+    }
+  }
+
+  .table-overflow-protection {
+    clear: both;
+  }
+}

styles/h5p.css

@@ -4,11 +4,11 @@
 /* Custom H5P font to use for icons. */
 @font-face {
   font-family: 'h5p';
-  src:  url('../fonts/h5p-core-28.eot?h1atjl');
-  src:  url('../fonts/h5p-core-28.eot?h1atjl#iefix') format('embedded-opentype'),
-    url('../fonts/h5p-core-28.ttf?h1atjl') format('truetype'),
-    url('../fonts/h5p-core-28.woff?h1atjl') format('woff'),
-    url('../fonts/h5p-core-28.svg?h1atjl#h5p-core-28') format('svg');
+  src:  url('../fonts/h5p-core-30.eot?h1atjl');
+  src:  url('../fonts/h5p-core-30.eot?h1atjl#iefix') format('embedded-opentype'),
+    url('../fonts/h5p-core-30.ttf?h1atjl') format('truetype'),
+    url('../fonts/h5p-core-30.woff?h1atjl') format('woff'),
+    url('../fonts/h5p-core-30.svg?h1atjl#h5p-core-30') format('svg');
   font-weight: normal;
   font-style: normal;
 }