feat(editor-libs): extend the feature detection for CSS functions (#1270

)

* Check also property value's validity

* Fix

* Pass choice text to `isPropertySupported()`

* Lint

* Use `isCodeSupported()`

* Naming

* Refactor

* Remove unused import

* Remove unused import x2

---------

Co-authored-by: Niedziolka Michal <niedziolek@hotmail.com>

editor/js/editable-css.js

@@ -1,6 +1,5 @@
 import * as clippy from "./editor-libs/clippy.js";
 import * as mceEvents from "./editor-libs/events.js";
-import * as mceUtils from "./editor-libs/mce-utils.js";
 import * as cssEditorUtils from "./editor-libs/css-editor-utils.js";
 import {
   initCodeEditor,
@@ -14,6 +13,10 @@ import "../css/editable-css.css";
 (function () {
   const exampleChoiceList = document.getElementById("example-choice-list");
   const exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
+  const exampleDeclarations = Array.from(
+    exampleChoices,
+    (choice) => choice.querySelector("code").textContent
+  );
   const editorWrapper = document.getElementById("editor-wrapper");
   const output = document.getElementById("output");
   const warningNoSupport = document.getElementById("warning-no-support");
@@ -138,7 +141,7 @@ import "../css/editable-css.css";
     is a non standard object available only in IE10 and older,
     this will stop JS from executing in those versions. */
   if (
-    mceUtils.isPropertySupported(exampleChoiceList.dataset) &&
+    cssEditorUtils.isAnyDeclarationSetSupported(exampleDeclarations) &&
     !document.all
   ) {
     enableLiveEditor();

editor/js/editor-libs/css-editor-utils.js

@@ -37,6 +37,15 @@ export function applyCode(code, choice, targetElement, immediateInvalidChange) {
   }
 }
 
+/**
+ * Creates a temporary element and tests whether any of the provided CSS sets of declarations are fully supported by the user's browser
+ * @param {Array} declarationSets - Array in which every element is one or multiple declarations separated by semicolons
+ */
+export function isAnyDeclarationSetSupported(declarationSets) {
+  const tmpElem = document.createElement("div");
+  return declarationSets.some(isCodeSupported.bind(null, tmpElem));
+}
+
 /**
  * Checks if every passed declaration is supported by the browser.
  * In case browser recognizes property with vendor prefix(like -webkit-), lacking support for unprefixed property is ignored.

editor/js/editor-libs/mce-utils.js

@@ -16,35 +16,6 @@ export function findParentChoiceElem(element) {
   }
   return parent;
 }
-
-/**
- * Creates a temporary element and tests whether the passed
- * property exists on the `style` property of the element.
- * @param {Object} dataset = The dataset from which to get the property
- */
-export function isPropertySupported(dataset) {
-  /* If there are no 'property' attributes,
-           there is nothing to test, so return true. */
-  if (dataset["property"] === undefined) {
-    return true;
-  }
-
-  // `property` may be a space-separated list of properties.
-  const properties = dataset["property"].split(" ");
-  /* Iterate through properties: if any of them apply,
-        the browser supports this example. */
-  const tmpElem = document.createElement("div");
-  let supported = false;
-
-  for (let i = 0, l = properties.length; i < l; i++) {
-    if (tmpElem.style[properties[i]] !== undefined) {
-      supported = true;
-    }
-  }
-
-  return supported;
-}
-
 /**
  * Interrupts the default click event on external links inside
  * the iframe and opens them in a new tab instead