feat : added script for OpenGraph placeholder in build folder

Author: shahzan01

.gitignore

@@ -107,5 +107,3 @@ cypress.config.mjs
 
 # WebAuthn FIDO metadata cache
 /plugins/system/webauthn/fido.jwt
-administrator/language/en-GB/en-GB.plg_system_cccsocialmedia.ini
-administrator/language/en-GB/en-GB.plg_system_cccsocialmedia.sys.ini

build/media_source/plg_system_opengraph/joomla.asset.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
+  "name": "plg_system_opengraph",
+  "version": " __DEPLOY_VERSION__",
+  "description": "Joomla CMS",
+  "license": "GPL-2.0-or-later",
+  "assets": [
+    {
+      "name": "plg_system_opengraph.opengraph-placeholder",
+      "type": "script",
+      "uri": "plg_system_opengraph/opengraph-placeholder.min.js",
+      "dependencies": ["core"],
+      "attributes": {
+        "type": "module"
+      }
+    }
+  ]
+}

build/media_source/plg_system_opengraph/js/opengraph-placeholder.es6.js

@@ -0,0 +1,94 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const maps = Joomla.getOptions("plgOgMappings", {});
+
+  const selectorFor = (token) => {
+    if (token.startsWith("field.")) {
+      const n = CSS.escape(token.slice(6));
+      return `[name="jform[com_fields][${n}]"]`;
+    }
+    if (token.startsWith("image_")) {
+      return `[name="jform[images][${CSS.escape(token)}]"]`;
+    }
+    return `[name="jform[${CSS.escape(token)}]"]`;
+  };
+
+  function getSourceName(token) {
+    if (token.startsWith("field.")) {
+      const fieldKey = token.slice(6).replace(/_/g, " ");
+      return `Custom Field: ${fieldKey}`;
+    }
+
+    const mapCoreNames = {
+      title: "Title",
+      alias: "Alias",
+      metadesc: "Meta Description",
+      metakey: "Meta Keywords",
+      articletext: "Article Text",
+      image_intro: "Intro Image",
+      image_intro_alt: "Intro Image Alt",
+      image_fulltext: "Fulltext Image",
+      image_fulltext_alt: "Fulltext Image Alt",
+      created_by_alias: "Author Alias",
+    };
+
+    return mapCoreNames[token] || token;
+  }
+
+  function sanitizeText(input, maxLen = 60) {
+    if (typeof input !== "string" || !input.trim()) return "";
+
+    // Remove HTML tags manually (just in case innerText fails)
+    const noTags = input.replace(/<[^>]*>/g, " ");
+
+    // Decode HTML entities using a temporary div
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = noTags;
+    const decoded = tempDiv.textContent || tempDiv.innerText || "";
+
+    // Normalize whitespace
+    const cleaned = decoded.replace(/\s+/g, " ").trim();
+
+    // Truncate with word boundary safety
+    if (cleaned.length <= maxLen) return cleaned;
+
+    const cut = cleaned.lastIndexOf(" ", maxLen - 1);
+    const safeCut = cut > maxLen * 0.6 ? cut : maxLen - 1;
+    return cleaned.slice(0, safeCut).replace(/[.,;:\-\s]+$/, "") + "…";
+  }
+
+  const maxLen = {
+    og_title: Number(maps.maxTitleLen) || 60,
+    og_description: Number(maps.maxDescLen) || 160,
+    og_image_alt: Number(maps.maxAltLen) || 125,
+  };
+
+  Object.entries(maps).forEach(([ogKey, token]) => {
+    const ogInput = document.getElementById(`jform_attribs_${ogKey}`);
+    const srcInput = document.querySelector(selectorFor(token));
+
+    if (!ogInput || !srcInput) return;
+
+    const originalPh = ogInput.placeholder;
+    const inherited = Joomla.Text._("PLG_SYSTEM_OPENGRAPH_INHERITED");
+    const paint = () => {
+      if (ogInput.value.trim()) return; // user override
+      let v = srcInput.value.trim();
+
+      if (ogKey !== "og_image") {
+        v = sanitizeText(v, maxLen[ogKey]);
+      }
+      const sourceLabel = getSourceName(token);
+      ogInput.placeholder = v
+        ? `${v} — ${inherited} from ${sourceLabel}`
+        : originalPh;
+    };
+
+    paint(); // initial
+    srcInput.addEventListener("input", paint);
+
+    ogInput.addEventListener("input", () => {
+      ogInput.placeholder = originalPh; // detach
+      srcInput.removeEventListener("input", paint);
+    });
+  });
+});

libraries/src/Opengraph/OpengraphServiceInterface.php

@@ -13,6 +13,44 @@
 \defined('_JEXEC') or die;
 // phpcs:enable PSR1.Files.SideEffects
 
+
+
+/**
+ * Enumerates the logical OpenGraph groups that a custom field-type can
+ * register itself under.
+ *
+ * Third-party field-type plugins should return one of these cases from
+ * {@see MappableFieldInterface::getOpengraphGroup()} so the System – OpenGraph
+ * plugin knows how to categorise the field inside its mapping drop-down.
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+enum OpengraphGroup: string
+{
+/** Standard textual content (e.g. single-line, multi-line). */
+    case TEXT       = 'text-fields';
+
+/** Image or media file (intro/full images, custom media fields, …). */
+    case IMAGE      = 'image-fields';
+
+/** Alternate-text associated with an image (accessibility / SEO). */
+    case IMAGE_ALT  = 'image-alt-fields';
+
+    // TODO : implement these cases in the future, if needed
+
+    // /** Meta-information such as description or keywords. */
+    // case META       = 'meta-fields';
+
+    // /** Locale or language codes (e.g. `en-US`). */
+    // case LOCALE     = 'locale-fields';
+
+    // /** Author-related data (creator, modifier, alias, …). */
+    // case AUTHOR     = 'author-fields';
+
+    // /** Date-time values (created, modified, publish-up/down, …). */
+    // case DATE       = 'date-fields';
+}
+
 /**
  * The Opengraph service.
  *
@@ -26,6 +64,22 @@ interface OpengraphServiceInterface
      * @return  array
      *
      * @since   __DEPLOY_VERSION__
+     *
      */
     public function getOpengraphFields(): array;
 }
+
+
+
+
+interface MappableFieldInterface
+{
+    /**
+     * Returns the OpenGraph group this field should be listed under.
+     *
+     * @return  OpengraphGroup  One of the enum cases defined in {@see OpengraphGroup}.
+     *
+     * @since   __DEPLOY_VERSION__
+     */
+    public function getOpengraphGroup(): OpengraphGroup;
+}

plugins/system/opengraph/opengraph.xml

@@ -13,6 +13,11 @@
     <version>__DEPLOY_VERSION__</version>
     <description>PLG_SYSTEM_OPENGRAPH_DESCRIPTION</description>
     <namespace path="src">Joomla\Plugin\System\Opengraph</namespace>
+    <media destination="plg_system_opengraph"
+           folder="media">
+        <folder>js</folder>
+        <filename>joomla.asset.json</filename>
+    </media>
     <files>
         <folder plugin="opengraph">src</folder>
         <folder>services</folder>
@@ -82,4 +87,4 @@
             </fieldset>
         </fields>
     </config>
-</extension>
+</extension>

plugins/system/opengraph/src/Extension/opengraph.php

@@ -191,15 +191,8 @@ public function onContentPrepareForm(PrepareFormEvent $event): void
         /** @var WebAssetManager $wa */
         $wa  = $document->getWebAssetManager();
 
-        $wa->registerAndUseScript(
-            'plg.opengraph.placeholder',
-            'media/plg_system_opengraph/js/opengraph-placeholder.js',
-            [
-                'type' => 'module',
-                'version' => 'auto',
-                'dependencies' => ['core'],
-            ]
-        );
+        $wa->getRegistry()->addExtensionRegistryFile('plg_system_opengraph');
+        $wa->useScript('plg_system_opengraph.opengraph-placeholder');
     }
 
 

plugins/system/opengraph/src/Field/OpengraphField.php

@@ -14,7 +14,10 @@
 use Joomla\CMS\Form\Field\GroupedlistField;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
+use Joomla\CMS\Opengraph\MappableFieldInterface;
+use Joomla\CMS\Opengraph\OpengraphGroup;
 use Joomla\CMS\Opengraph\OpengraphServiceInterface;
+use Joomla\CMS\Plugin\PluginHelper;
 use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
 
 // phpcs:disable PSR1.Files.SideEffects
@@ -83,12 +86,12 @@ protected function getGroups()
 
         // Allowed field types for each OpenGraph group
         $allowedFieldTypes = [
-            'text-fields'      => ['text', 'textarea'],
-            'image-fields'     => ['media', 'imagelist'],
-            'image-alt-fields' => ['text'],
+            OpengraphGroup::TEXT->value       => ['text', 'textarea'],
+            OpengraphGroup::IMAGE->value      => ['media', 'imagelist'],
+            OpengraphGroup::IMAGE_ALT->value  => ['text'],
         ];
 
-        $allowedTypes = $allowedFieldTypes[$fieldType] ?? [];
+        $nativeTypes = $allowedFieldTypes[$fieldType] ?? [];
 
 
 
@@ -105,10 +108,33 @@ protected function getGroups()
         $customOptions = [];
 
         foreach ($customFields as $field) {
-            if (!\in_array($field->type, $allowedTypes, true)) {
+            $accept = \in_array($field->type, $nativeTypes, true);
+
+
+            // If not native-allowed, see if the field’s plugin implements our interface
+            if (!$accept) {
+                // Class name convention: PlgFields{Type}
+                $class = 'PlgFields' . ucfirst($field->type);
+
+                // Ensure plugin autoloaded
+                PluginHelper::importPlugin('fields');
+
+                if (
+                    \class_exists($class)
+                    && \is_subclass_of($class, MappableFieldInterface::class)
+                    && $class::getOpengraphGroup()->value === $fieldType
+                ) {
+                    $accept = true;
+                }
+            }
+
+
+            if (!$accept) {
                 continue;
             }
 
+
+
             $label           = $field->title . ' (' . $field->name . ')';
             $customOptions[] = HTMLHelper::_('select.option', 'field.' . $field->name, $label);
         }