feat: support user defined data-aue-label

buuhuu · buuhuu · commit f8ed4f1f9706 · 2025-12-01T14:26:17.000+01:00
diff --git a/blocks/cards/_cards.json b/blocks/cards/_cards.json
@@ -9,6 +9,7 @@
             "resourceType": "core/franklin/components/block/v1/block",
             "template": {
               "name": "Cards",
+              "model": "cards",
               "filter": "cards"
             }
           }
@@ -32,9 +33,28 @@
     }
   ],
   "models": [
+    {
+      "id": "cards",
+      "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Cards"
+        }
+      ]
+    },
     {
       "id": "card",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Card"
+        },
         {
           "component": "reference",
           "valueType": "string",
diff --git a/blocks/columns/_columns.json b/blocks/columns/_columns.json
@@ -8,6 +8,8 @@
           "page": {
             "resourceType": "core/franklin/components/columns/v1/columns",
             "template": {
+              "model": "columns",
+              "template": "columns",
               "columns": "2",
               "rows": "1"
             }
@@ -20,6 +22,13 @@
     {
       "id": "columns",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Columns"
+        },
         {
           "component": "text",
           "valueType": "number",
diff --git a/blocks/fragment/_fragment.json b/blocks/fragment/_fragment.json
@@ -20,6 +20,13 @@
     {
       "id": "fragment",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Fragment"
+        },
         {
           "component": "aem-content",
           "name": "reference",
diff --git a/blocks/hero/_hero.json b/blocks/hero/_hero.json
@@ -20,6 +20,13 @@
     {
       "id": "hero",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Hero"
+        },
         {
           "component": "reference",
           "valueType": "string",
diff --git a/component-definition.json b/component-definition.json
@@ -11,7 +11,9 @@
             "xwalk": {
               "page": {
                 "resourceType": "core/franklin/components/text/v1/text",
-                "template": {}
+                "template": {
+                  "model": "text"
+                }
               }
             }
           }
@@ -37,7 +39,9 @@
             "xwalk": {
               "page": {
                 "resourceType": "core/franklin/components/image/v1/image",
-                "template": {}
+                "template": {
+                  "model": "image"
+                }
               }
             }
           }
@@ -91,6 +95,7 @@
                 "resourceType": "core/franklin/components/block/v1/block",
                 "template": {
                   "name": "Cards",
+                  "model": "cards",
                   "filter": "cards"
                 }
               }
@@ -120,6 +125,8 @@
               "page": {
                 "resourceType": "core/franklin/components/columns/v1/columns",
                 "template": {
+                  "model": "columns",
+                  "template": "columns",
                   "columns": "2",
                   "rows": "1"
                 }
diff --git a/component-models.json b/component-models.json
@@ -26,6 +26,13 @@
   {
     "id": "image",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Image"
+      },
       {
         "component": "reference",
         "name": "image",
@@ -42,6 +49,13 @@
   {
     "id": "title",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Title"
+      },
       {
         "component": "text",
         "name": "title",
@@ -80,9 +94,28 @@
       }
     ]
   },
+  {
+    "id": "text",
+    "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Text"
+      }
+    ]
+  },
   {
     "id": "button",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Button"
+      },
       {
         "component": "aem-content",
         "name": "link",
@@ -141,9 +174,28 @@
       }
     ]
   },
+  {
+    "id": "cards",
+    "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Cards"
+      }
+    ]
+  },
   {
     "id": "card",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Card"
+      },
       {
         "component": "reference",
         "valueType": "string",
@@ -163,6 +215,13 @@
   {
     "id": "columns",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Columns"
+      },
       {
         "component": "text",
         "valueType": "number",
@@ -182,6 +241,13 @@
   {
     "id": "fragment",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Fragment"
+      },
       {
         "component": "aem-content",
         "name": "reference",
@@ -192,6 +258,13 @@
   {
     "id": "hero",
     "fields": [
+      {
+        "component": "text",
+        "name": "aueLabel",
+        "label": "Editor Label",
+        "description": "The label of this component in the editor overlay and content tree.",
+        "value": "Hero"
+      },
       {
         "component": "reference",
         "valueType": "string",
diff --git a/models/_button.json b/models/_button.json
@@ -19,6 +19,13 @@
     {
       "id": "button",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Button"
+        },
         {
           "component": "aem-content",
           "name": "link",
diff --git a/models/_image.json b/models/_image.json
@@ -7,7 +7,9 @@
         "xwalk": {
           "page": {
             "resourceType": "core/franklin/components/image/v1/image",
-            "template": {}
+            "template": {
+              "model": "image"
+            }
           }
         }
       }
@@ -17,6 +19,13 @@
     {
       "id": "image",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Image"
+        },
         {
           "component": "reference",
           "name": "image",
diff --git a/models/_text.json b/models/_text.json
@@ -7,11 +7,26 @@
         "xwalk": {
           "page": {
             "resourceType": "core/franklin/components/text/v1/text",
-            "template": {}
+            "template": {
+              "model": "text"
+            }
           }
         }
       }
     }
   ],
-  "models": []
+  "models": [
+    {
+      "id": "text",
+      "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Text"
+        }
+      ]
+    }
+  ]
 }
diff --git a/models/_title.json b/models/_title.json
@@ -19,6 +19,13 @@
     {
       "id": "title",
       "fields": [
+        {
+          "component": "text",
+          "name": "aueLabel",
+          "label": "Editor Label",
+          "description": "The label of this component in the editor overlay and content tree.",
+          "value": "Title"
+        },
         {
           "component": "text",
           "name": "title",
diff --git a/scripts/editor-support-rte.js b/scripts/editor-support-rte.js
@@ -12,6 +12,8 @@ export function decorateRichtext(container = document) {
     delete element.dataset.richtextProp;
     delete element.dataset.richtextFilter;
     delete element.dataset.richtextLabel;
+    delete element.dataset.richtextModel;
+    delete element.dataset.richtextComponent;
   }
 
   let element;
@@ -21,6 +23,8 @@ export function decorateRichtext(container = document) {
       richtextProp,
       richtextFilter,
       richtextLabel,
+      richtextModel,
+      richtextComponent,
     } = element.dataset;
     deleteInstrumentation(element);
     const siblings = [];
@@ -35,7 +39,7 @@ export function decorateRichtext(container = document) {
 
     let orphanElements;
     if (richtextResource && richtextProp) {
-      orphanElements = document.querySelectorAll(`[data-richtext-id="${richtextResource}"][data-richtext-prop="${richtextProp}"]`);
+      orphanElements = document.querySelectorAll(`[data-richtext-resource="${richtextResource}"][data-richtext-prop="${richtextProp}"]`);
     } else {
       const editable = element.closest('[data-aue-resource]');
       if (editable) {
@@ -59,6 +63,8 @@ export function decorateRichtext(container = document) {
       if (richtextProp) group.dataset.aueProp = richtextProp;
       if (richtextLabel) group.dataset.aueLabel = richtextLabel;
       if (richtextFilter) group.dataset.aueFilter = richtextFilter;
+      if (richtextModel) group.dataset.aueModel = richtextModel;
+      if (richtextComponent) group.dataset.aueComponent = richtextComponent;
       group.dataset.aueType = 'richtext';
       element.replaceWith(group);
       group.append(element, ...siblings);

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,13 @@`
`20`	`20`	`{`
`21`	`21`	`"id": "fragment",`
`22`	`22`	`"fields": [`
	`23`	`+ {`
	`24`	`+ "component": "text",`
	`25`	`+ "name": "aueLabel",`
	`26`	`+ "label": "Editor Label",`
	`27`	`+ "description": "The label of this component in the editor overlay and content tree.",`
	`28`	`+ "value": "Fragment"`
	`29`	`+ },`
`23`	`30`	`{`
`24`	`31`	`"component": "aem-content",`
`25`	`32`	`"name": "reference",`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,9 @@`
`11`	`11`	`"xwalk": {`
`12`	`12`	`"page": {`
`13`	`13`	`"resourceType": "core/franklin/components/text/v1/text",`
`14`		`- "template": {}`
	`14`	`+ "template": {`
	`15`	`+ "model": "text"`
	`16`	`+ }`
`15`	`17`	`}`
`16`	`18`	`}`
`17`	`19`	`}`
`@@ -37,7 +39,9 @@`
`37`	`39`	`"xwalk": {`
`38`	`40`	`"page": {`
`39`	`41`	`"resourceType": "core/franklin/components/image/v1/image",`
`40`		`- "template": {}`
	`42`	`+ "template": {`
	`43`	`+ "model": "image"`
	`44`	`+ }`
`41`	`45`	`}`
`42`	`46`	`}`
`43`	`47`	`}`
`@@ -91,6 +95,7 @@`
`91`	`95`	`"resourceType": "core/franklin/components/block/v1/block",`
`92`	`96`	`"template": {`
`93`	`97`	`"name": "Cards",`
	`98`	`+ "model": "cards",`
`94`	`99`	`"filter": "cards"`
`95`	`100`	`}`
`96`	`101`	`}`
`@@ -120,6 +125,8 @@`
`120`	`125`	`"page": {`
`121`	`126`	`"resourceType": "core/franklin/components/columns/v1/columns",`
`122`	`127`	`"template": {`
	`128`	`+ "model": "columns",`
	`129`	`+ "template": "columns",`
`123`	`130`	`"columns": "2",`
`124`	`131`	`"rows": "1"`
`125`	`132`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,13 @@`
`19`	`19`	`{`
`20`	`20`	`"id": "button",`
`21`	`21`	`"fields": [`
	`22`	`+ {`
	`23`	`+ "component": "text",`
	`24`	`+ "name": "aueLabel",`
	`25`	`+ "label": "Editor Label",`
	`26`	`+ "description": "The label of this component in the editor overlay and content tree.",`
	`27`	`+ "value": "Button"`
	`28`	`+ },`
`22`	`29`	`{`
`23`	`30`	`"component": "aem-content",`
`24`	`31`	`"name": "link",`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,9 @@`
`7`	`7`	`"xwalk": {`
`8`	`8`	`"page": {`
`9`	`9`	`"resourceType": "core/franklin/components/image/v1/image",`
`10`		`- "template": {}`
	`10`	`+ "template": {`
	`11`	`+ "model": "image"`
	`12`	`+ }`
`11`	`13`	`}`
`12`	`14`	`}`
`13`	`15`	`}`
`@@ -17,6 +19,13 @@`
`17`	`19`	`{`
`18`	`20`	`"id": "image",`
`19`	`21`	`"fields": [`
	`22`	`+ {`
	`23`	`+ "component": "text",`
	`24`	`+ "name": "aueLabel",`
	`25`	`+ "label": "Editor Label",`
	`26`	`+ "description": "The label of this component in the editor overlay and content tree.",`
	`27`	`+ "value": "Image"`
	`28`	`+ },`
`20`	`29`	`{`
`21`	`30`	`"component": "reference",`
`22`	`31`	`"name": "image",`
Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,26 @@`
`7`	`7`	`"xwalk": {`
`8`	`8`	`"page": {`
`9`	`9`	`"resourceType": "core/franklin/components/text/v1/text",`
`10`		`- "template": {}`
	`10`	`+ "template": {`
	`11`	`+ "model": "text"`
	`12`	`+ }`
`11`	`13`	`}`
`12`	`14`	`}`
`13`	`15`	`}`
`14`	`16`	`}`
`15`	`17`	`],`
`16`		`- "models": []`
	`18`	`+ "models": [`
	`19`	`+ {`
	`20`	`+ "id": "text",`
	`21`	`+ "fields": [`
	`22`	`+ {`
	`23`	`+ "component": "text",`
	`24`	`+ "name": "aueLabel",`
	`25`	`+ "label": "Editor Label",`
	`26`	`+ "description": "The label of this component in the editor overlay and content tree.",`
	`27`	`+ "value": "Text"`
	`28`	`+ }`
	`29`	`+ ]`
	`30`	`+ }`
	`31`	`+ ]`
`17`	`32`	`}`