[6.0] Add custom classes to the class dropdown in the image dialog in TinyMCE (joomla#45676)

* Added option to define image classes

* Making phpcs happy

Author: RickR2H

administrator/language/en-GB/plg_editors_tinymce.ini

@@ -42,6 +42,11 @@ PLG_TINY_FIELD_EXTERNALPLUGINS_NAME_LABEL="Plugin Name"
 PLG_TINY_FIELD_EXTERNALPLUGINS_PATH_LABEL="Path"
 PLG_TINY_FIELD_HTMLHEIGHT_LABEL="HTML Height"
 PLG_TINY_FIELD_HTMLWIDTH_LABEL="HTML Width"
+PLG_TINY_FIELD_IMG_CLASS_LIST_LABEL="Class List"
+PLG_TINY_FIELD_IMG_CLASS_NAME_LABEL="Name"
+PLG_TINY_FIELD_IMG_CLASS_NO_CLASS="No Class Selected"
+PLG_TINY_FIELD_IMG_CLASSES_LIST_DESC="Add classes to the image class dropdown in the image dialog."
+PLG_TINY_FIELD_IMG_CLASSES_LIST_LABEL="Image Classes List"
 PLG_TINY_FIELD_LABEL_ADVANCEDPARAMS="Advanced"
 PLG_TINY_FIELD_LANGCODE_LABEL="Language Code"
 PLG_TINY_FIELD_LANGSELECT_LABEL="Automatic Language Selection"

plugins/editors/tinymce/forms/setoptions.xml

@@ -445,5 +445,34 @@
 				/>
 			</form>
 		</field>
+
+		<field
+			name="img_classes_list"
+			type="subform"
+			label="PLG_TINY_FIELD_IMG_CLASSES_LIST_LABEL"
+			description="PLG_TINY_FIELD_IMG_CLASSES_LIST_DESC"
+			layout="joomla.form.field.subform.repeatable-table"
+			required="false"
+			multiple="true">
+			<form>
+				<field
+					name="img_class_name"
+					type="text"
+					label="PLG_TINY_FIELD_IMG_CLASS_NAME_LABEL"
+					required="true"
+					filter="string"
+					default=""
+				/>
+				<field
+					name="img_class_list"
+					type="text"
+					label="PLG_TINY_FIELD_IMG_CLASS_LIST_LABEL"
+					required="true"
+					filter="string"
+					validate="CssIdentifier"
+					default=""
+				/>
+			</form>
+		</field>
 	</fieldset>
 </form>

plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php

@@ -410,6 +410,27 @@ public function prepareTinyMCEUploadPath(string $path): string
             }
         }
 
+        // Set the default classes for the image class dropdown
+        $imgClasses = [
+            ['title' => TEXT::_('PLG_TINY_FIELD_IMG_CLASS_NO_CLASS'), 'value' => ''],
+            ['title' => 'None', 'value' => 'float-none'],
+            ['title' => 'Left', 'value' => 'float-start'],
+            ['title' => 'Right', 'value' => 'float-end'],
+            ['title' => 'Center', 'value' => 'mx-auto d-block'],
+        ];
+
+        // Load the image classes list
+        if (isset($extraOptions->img_classes_list) && $extraOptions->img_classes_list) {
+            $imgClassesList = $extraOptions->img_classes_list;
+
+            if ($imgClassesList) {
+                // Create an array for the image classes
+                foreach ($imgClassesList as $imgClassList) {
+                    array_push($imgClasses, ['title' => $imgClassList->img_class_name, 'value' => $imgClassList->img_class_list]);
+                }
+            }
+        }
+
         // Build the final options set
         $scriptOptions   = array_merge(
             $scriptOptions,
@@ -476,12 +497,7 @@ public function prepareTinyMCEUploadPath(string $path): string
                 'a11y_advanced_options' => true,
                 'image_advtab'          => (bool) $levelParams->get('image_advtab', false),
                 'image_title'           => true,
-                'image_class_list'      => [
-                    ['title' => 'None', 'value' => 'float-none'],
-                    ['title' => 'Left', 'value' => 'float-start'],
-                    ['title' => 'Right', 'value' => 'float-end'],
-                    ['title' => 'Center', 'value' => 'mx-auto d-block'],
-                ],
+                'image_class_list'      => $imgClasses,
 
                 // Drag and drop specific
                 'dndEnabled' => $dragdrop,