Merge the "features to support sections in core" branch (#5032)

* PRO-7339 PRO-7337 Supporting features for sections (#5023)

* features to support sections

* wip

* working

* get the field id through to the sections module

* fix bugs, run quiet

* modal excludes action

* wip

* made the expanded menus work

* changelog

* actual eslint fixes, also tell eslint to chill

* button style

---------

Co-authored-by: Stuart Romanek <stuart@apostrophecms.com>

* stylelint mad about buttons (#5033)

* more merge stuff (#5037)

* more merge stuff

* linty stuff

---------

Co-authored-by: Stuart Romanek <stuart@apostrophecms.com>

Author: boutell

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Adds
 
+* Modules can now call `apos.area.addCreateWidgetOperation` to register a custom operation that invokes a modal and inserts the widget returned by that modal. These operations are offered as choices in all "add widget" menus, both regular and expanded.
+* `AposDocEditor` now accepts a `values` prop, which can be used to pass an object of initial values for some or all fields. Use of this prop is optional. It is not supported when editing existing documents.
+* `apos.doc.edit` now accepts an optional `values` object as the final parameter, containing initial values for some or all fields. This is supported only when editing existing documents.
+* When specifying a modal name to be executed, developers may now register "transformers" to be invoked first, using pipe syntax. For example, the modal name `aposSectionTemplateLibraryWidgetToDoc|AposDocEditor` will invoke the transformer `aposSectionTemplateLibraryWidgetToDoc` with the original props, and pass the returned result to `AposDocEditor`. Note that transformers are awaited. Transformers are registered in frontend admin UI code by passing a name and a function to `apos.ui.addTransformer`.
 * Adds quick image upload UI to `@apostrophecms/image-widget`.
 
 ## 4.20.0 (2025-08-06)
@@ -15,8 +19,11 @@
 
 ### Changes
 
+* A `clone-widget.js` file has been factored out, providing a universal way to return a clone of an existing widget which is distinct from the original.
+* Adds any alt text found in an attribute to the media library attachment during import of rich text inline images by API
+* Adds `prependNodes` and `appendNodes` methods to every module. These methods allow you to inject HTML to every page using a `node` declaration.
 * Changes handling of `order` and `groups` in the `admin-bar` module to respect, rather that reverse, the order of items
-* Interacting with the text inside a rich text widget will hide the widget controls to prevent awkawrd text selection.
+* Interacting with the text inside a rich text widget will hide the widget controls to prevent awkward text selection.
 
 ### Fixes
 

modules/@apostrophecms/area/index.js

@@ -88,6 +88,7 @@ module.exports = {
 
     self.enableBrowserData();
     self.addDeduplicateWidgetIdsMigration();
+    self.createWidgetOperations = [];
   },
   apiRoutes(self) {
     return {
@@ -786,7 +787,6 @@ module.exports = {
             manager.options.initialModal !== false;
           contextualWidgetDefaultData[name] = manager.options.defaultData || {};
         });
-
         return {
           components: {
             editor: 'AposAreaEditor',
@@ -799,7 +799,8 @@ module.exports = {
           widgetPreview,
           contextualWidgetDefaultData,
           widgetManagers,
-          action: self.action
+          action: self.action,
+          createWidgetOperations: self.createWidgetOperations
         };
       },
       async addDeduplicateWidgetIdsMigration() {
@@ -825,6 +826,9 @@ module.exports = {
             }
           });
         });
+      },
+      addCreateWidgetOperation(operation) {
+        self.createWidgetOperations.push(operation);
       }
     };
   },

modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue

@@ -72,7 +72,7 @@
                   <AposAreaMenuItem
                     :item="child"
                     :tabbable="itemIndex === active"
-                    @click="add(child)"
+                    @click="action(child)"
                     @up="switchItem(`child-${itemIndex}-${childIndex - 1}`, -1)"
                     @down="switchItem(`child-${itemIndex}-${childIndex + 1}`, 1)"
                   />
@@ -83,7 +83,7 @@
           <AposAreaMenuItem
             v-else
             :item="item"
-            @click="add(item)"
+            @click="action(item)"
             @up="switchItem(`item-${itemIndex - 1}`, -1)"
             @down="switchItem(`item-${itemIndex + 1}`, 1)"
           />
@@ -130,6 +130,10 @@ export default {
         return {};
       }
     },
+    fieldId: {
+      type: String,
+      required: true
+    },
     menuId: {
       type: String,
       default() {
@@ -196,8 +200,14 @@ export default {
         // If the menu is not open, we don't need to compute it right now
         return [];
       }
-      const clipboard = apos.area.widgetClipboard.get();
       const menu = [ ...this.contextMenuOptions.menu ];
+      for (const createWidgetOperation of this.moduleOptions.createWidgetOperations) {
+        menu.unshift({
+          type: 'operation',
+          ...createWidgetOperation
+        });
+      }
+      const clipboard = apos.area.widgetClipboard.get();
       if (clipboard) {
         const widget = clipboard;
         const matchingChoice = menu.find(option => option.name === widget.type);
@@ -226,7 +236,24 @@ export default {
     this.inContext = !apos.util.closest(this.$el, '[data-apos-schema-area]');
   },
   methods: {
-    async add(item) {
+    async action(item) {
+      if (item.type === 'operation') {
+        const props = {
+          ...item.props,
+          options: this.options,
+          fieldId: this.fieldId
+        };
+        this.$refs.contextMenu.hide();
+        const widget = await apos.modal.execute(item.modal, props);
+        if (widget) {
+          // Insert the widget at the appropriate insertion point, like we normally would
+          this.$emit('add', {
+            widget,
+            index: this.index
+          });
+        }
+        return;
+      }
       // Potential TODO: If we find ourselves manually flipping these bits in
       // other AposContextMenu overrides we should consider refactoring
       // contextmenus to be able to self close when any click takes place within

modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -32,6 +32,7 @@
           :empty="true"
           :index="0"
           :options="options"
+          :field-id="fieldId"
           :max-reached="maxReached"
           :disabled="field && field.readOnly"
           :widget-options="options.widgets"
@@ -80,9 +81,9 @@
 
 <script>
 import { createId } from '@paralleldrive/cuid2';
-import { klona } from 'klona';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
 import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
+import cloneWidget from 'Modules/@apostrophecms/area/lib/clone-widget.js';
 
 export default {
   name: 'AposAreaEditor',
@@ -546,12 +547,7 @@ export default {
       }
     },
     clone(index) {
-      const widget = klona(this.next[index]);
-      delete widget._id;
-      this.regenerateIds(
-        apos.modules[apos.area.widgetManagers[widget.type]].schema,
-        widget
-      );
+      const widget = cloneWidget(this.next[index]);
       this.insert({
         widget,
         index: index + 1
@@ -572,30 +568,6 @@ export default {
         }
       }
     },
-    // Regenerate all array item, area, object and widget ids so they are considered
-    // new. Useful when copying a widget with nested content.
-    regenerateIds(schema, object) {
-      object._id = createId();
-      for (const field of schema) {
-        if (field.type === 'array') {
-          for (const item of (object[field.name] || [])) {
-            this.regenerateIds(field.schema, item);
-          }
-        } else if (field.type === 'object') {
-          this.regenerateIds(field.schema, object[field.name] || {});
-        } else if (field.type === 'area') {
-          if (object[field.name]) {
-            object[field.name]._id = createId();
-            for (const item of (object[field.name].items || [])) {
-              const schema = apos.modules[apos.area.widgetManagers[item.type]].schema;
-              this.regenerateIds(schema, item);
-            }
-          }
-        }
-        // We don't want to regenerate attachment ids. They correspond to
-        // actual files, and the reference count will update automatically
-      }
-    },
     async update(updated, { autosave = true, reverting = false } = {}) {
       if (!reverting) {
         updated.aposPlaceholder = false;
@@ -616,22 +588,29 @@ export default {
       });
       this.edited[updated._id] = true;
     },
-    // Add a widget into an area.
+    // Add a widget into an area. index is required, along
+    // with one and only one of name, widget or clipboard.
+    // If widget is passed it is inserted directly. If
+    // clipboard is passed it is cloned and inserted.
     async add({
       index,
       name,
+      widget,
       clipboard
     }) {
       if (clipboard) {
-        this.regenerateIds(
-          apos.modules[apos.area.widgetManagers[clipboard.type]].schema,
-          clipboard
-        );
+        clipboard = cloneWidget(clipboard);
         return this.insert({
           widget: clipboard,
           index
         });
       }
+      if (widget) {
+        return this.insert({
+          widget,
+          index
+        });
+      }
       if (this.widgetIsContextual(name)) {
         return this.insert({
           widget: {
@@ -643,10 +622,10 @@ export default {
         });
       }
       if (!this.widgetHasInitialModal(name)) {
-        const widget = this.newWidget(name);
+        const newWidget = this.newWidget(name);
         return this.insert({
           widget: {
-            ...widget,
+            ...newWidget,
             aposPlaceholder: this.widgetHasPlaceholder(name)
           },
           index
@@ -656,7 +635,7 @@ export default {
       const componentName = this.widgetEditorComponent(name);
       apos.area.activeEditor = this;
       const preview = this.widgetPreview(name, index, true);
-      const widget = await apos.modal.execute(componentName, {
+      const newWidget = await apos.modal.execute(componentName, {
         modelValue: null,
         options: this.widgetOptionsByType(name),
         type: name,
@@ -666,9 +645,9 @@ export default {
         preview
       });
       apos.area.activeEditor = null;
-      if (widget) {
+      if (newWidget) {
         return this.insert({
-          widget,
+          widget: newWidget,
           index
         });
       }