MDL-76474 editor_tiny: Implement placeholder selector list

We created a list of placeholder selectors in placeholderSelectors option.
The purpose of this list is to indicate the contents that are only shown
in the editor and not to the users, by that way, we can decide to apply or
not to apply rules, styles, etc... to these contents

lib/editor/tiny/amd/build/options.min.js

@@ -1,3 +1,3 @@
-define("editor_tiny/options",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.register=_exports.getPluginOptionName=_exports.getMoodleLang=_exports.getInitialPluginConfiguration=_exports.getFilepickers=_exports.getFilePicker=_exports.getDraftItemId=_exports.getCurrentLanguage=_exports.getContextId=void 0;_exports.register=(editor,options)=>{const registerOption=editor.options.register,setOption=editor.options.set;registerOption("moodle:contextid",{processor:"number",default:0}),setOption("moodle:contextid",options.context),registerOption("moodle:filepickers",{processor:"object",default:{}}),setOption("moodle:filepickers",options.filepicker),registerOption("moodle:draftitemid",{processor:"number",default:0}),setOption("moodle:draftitemid",options.draftitemid),registerOption("moodle:currentLanguage",{processor:"string",default:"en"}),setOption("moodle:currentLanguage",options.currentLanguage),registerOption("moodle:language",{processor:"object",default:{}}),setOption("moodle:language",options.language)};_exports.getContextId=editor=>editor.options.get("moodle:contextid");_exports.getDraftItemId=editor=>editor.options.get("moodle:draftitemid");const getFilepickers=editor=>editor.options.get("moodle:filepickers");_exports.getFilepickers=getFilepickers;_exports.getFilePicker=(editor,type)=>getFilepickers(editor)[type];_exports.getMoodleLang=editor=>editor.options.get("moodle:language");_exports.getCurrentLanguage=editor=>editor.options.get("moodle:currentLanguage");_exports.getInitialPluginConfiguration=options=>{const config={};return Object.entries(options.plugins).forEach((_ref=>{var _pluginConfig$config;let[pluginName,pluginConfig]=_ref;Object.entries(null!==(_pluginConfig$config=pluginConfig.config)&&void 0!==_pluginConfig$config?_pluginConfig$config:{}).forEach((_ref2=>{let[optionName,value]=_ref2;config[getPluginOptionName(pluginName,optionName)]=value}))})),config};const getPluginOptionName=(pluginName,optionName)=>"".concat(pluginName,":").concat(optionName);_exports.getPluginOptionName=getPluginOptionName}));
+define("editor_tiny/options",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.registerPlaceholderSelectors=_exports.register=_exports.getPluginOptionName=_exports.getPlaceholderSelectors=_exports.getMoodleLang=_exports.getInitialPluginConfiguration=_exports.getFilepickers=_exports.getFilePicker=_exports.getDraftItemId=_exports.getCurrentLanguage=_exports.getContextId=void 0;_exports.register=(editor,options)=>{const registerOption=editor.options.register,setOption=editor.options.set;registerOption("moodle:contextid",{processor:"number",default:0}),setOption("moodle:contextid",options.context),registerOption("moodle:filepickers",{processor:"object",default:{}}),setOption("moodle:filepickers",options.filepicker),registerOption("moodle:draftitemid",{processor:"number",default:0}),setOption("moodle:draftitemid",options.draftitemid),registerOption("moodle:currentLanguage",{processor:"string",default:"en"}),setOption("moodle:currentLanguage",options.currentLanguage),registerOption("moodle:language",{processor:"object",default:{}}),setOption("moodle:language",options.language),registerOption("moodle:placeholderSelectors",{processor:"array",default:[]}),setOption("moodle:placeholderSelectors",options.placeholderSelectors)};_exports.getContextId=editor=>editor.options.get("moodle:contextid");_exports.getDraftItemId=editor=>editor.options.get("moodle:draftitemid");const getFilepickers=editor=>editor.options.get("moodle:filepickers");_exports.getFilepickers=getFilepickers;_exports.getFilePicker=(editor,type)=>getFilepickers(editor)[type];_exports.getMoodleLang=editor=>editor.options.get("moodle:language");_exports.getCurrentLanguage=editor=>editor.options.get("moodle:currentLanguage");_exports.getInitialPluginConfiguration=options=>{const config={};return Object.entries(options.plugins).forEach((_ref=>{var _pluginConfig$config;let[pluginName,pluginConfig]=_ref;Object.entries(null!==(_pluginConfig$config=pluginConfig.config)&&void 0!==_pluginConfig$config?_pluginConfig$config:{}).forEach((_ref2=>{let[optionName,value]=_ref2;config[getPluginOptionName(pluginName,optionName)]=value}))})),config};const getPluginOptionName=(pluginName,optionName)=>"".concat(pluginName,":").concat(optionName);_exports.getPluginOptionName=getPluginOptionName;const getPlaceholderSelectors=editor=>editor.options.get("moodle:placeholderSelectors");_exports.getPlaceholderSelectors=getPlaceholderSelectors;_exports.registerPlaceholderSelectors=(editor,selectors)=>{if(selectors.length){let existingData=getPlaceholderSelectors(editor);existingData=existingData.concat(selectors),editor.options.set("moodle:placeholderSelectors",existingData)}}}));
 
 //# sourceMappingURL=options.min.js.map

lib/editor/tiny/amd/src/options.js

@@ -26,6 +26,7 @@ const optionDraftItemId = 'moodle:draftitemid';
 const filePickers = 'moodle:filepickers';
 const optionsMoodleLang = 'moodle:language';
 const currentLanguage = 'moodle:currentLanguage';
+const optionPlaceholderSelectors = 'moodle:placeholderSelectors';
 
 export const register = (editor, options) => {
     const registerOption = editor.options.register;
@@ -61,6 +62,12 @@ export const register = (editor, options) => {
         "default": {},
     });
     setOption(optionsMoodleLang, options.language);
+
+    registerOption(optionPlaceholderSelectors, {
+        processor: 'array',
+        "default": [],
+    });
+    setOption(optionPlaceholderSelectors, options.placeholderSelectors);
 };
 
 export const getContextId = (editor) => editor.options.get(optionContextId);
@@ -97,3 +104,25 @@ export const getInitialPluginConfiguration = (options) => {
  * @returns {string}
  */
 export const getPluginOptionName = (pluginName, optionName) => `${pluginName}:${optionName}`;
+
+/**
+ * Get the placeholder selectors.
+ *
+ * @param {TinyMCE} editor
+ * @returns {array}
+ */
+export const getPlaceholderSelectors = (editor) => editor.options.get(optionPlaceholderSelectors);
+
+/**
+ * Register placeholder selectos.
+ *
+ * @param {TinyMCE} editor
+ * @param {array} selectors
+ */
+export const registerPlaceholderSelectors = (editor, selectors) => {
+    if (selectors.length) {
+        let existingData = getPlaceholderSelectors(editor);
+        existingData = existingData.concat(selectors);
+        editor.options.set(optionPlaceholderSelectors, existingData);
+    }
+};

lib/editor/tiny/classes/editor.php

@@ -183,10 +183,24 @@ class editor extends \texteditor {
                 'available' => get_string_manager()->get_list_of_languages()
             ],
 
+            // Placeholder selectors.
+            // Some contents (Example: placeholder elements) are only shown in the editor, and not to users. It is unrelated to the
+            // real display. We created a list of placeholder selectors, so we can decide to or not to apply rules, styles... to
+            // these elements.
+            // The default of this list will be empty.
+            // Other plugins can register their placeholder elements to placeholderSelectors list by calling
+            // editor_tiny/options::registerPlaceholderSelectors.
+            'placeholderSelectors' => [],
+
             // Plugin configuration.
             'plugins' => $this->manager->get_plugin_configuration($context, $options, $fpoptions, $this),
         ];
 
+        if (defined('BEHAT_SITE_RUNNING') && BEHAT_SITE_RUNNING) {
+            // Add sample selectors for Behat test.
+            $config->placeholderSelectors = ['.behat-tinymce-placeholder'];
+        }
+
         foreach ($fpoptions as $fp) {
             // Guess the draftitemid for the editor.
             // Note: This is the best we can do at the moment.

lib/editor/tiny/upgrade.txt

@@ -0,0 +1,10 @@
+This files describes API changes in /lib/editor/tiny/* - TinyMCE editor,
+information provided here is intended especially for developers.
+
+=== 4.2 ===
+
+* A list of placeholder selectors was created and can be accessed by placeholderSelectors options. The purpose of this list
+  is to indicate the contents that are only shown in the editor and not to the users, by that way, we can decide to apply or
+  not to apply rules, styles, etc... to these contents.
+  Other Tiny plugins can register their placeholder elements to placeholderSelectors list
+  by calling editor_tiny/options::registerPlaceholderSelectors.