.

client/src/components/ElementEditor/AddElementPopover.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { inject } from 'lib/Injector';
 import { elementTypeType } from 'types/elementTypeType';
 import i18n from 'i18n';
+import backend from 'lib/Backend';
 
 /**
  * The AddElementPopover component used in the context of an ElementEditor shows the
@@ -27,13 +28,13 @@ class AddElementPopover extends Component {
    */
   getGraphQLElementButtonClickHandler(elementType) {
     return (event) => {
+      // handleAddElementToArea comes from addElementMutation.js
       const {
         actions: { handleAddElementToArea },
         insertAfterElement
       } = this.props;
 
       event.preventDefault();
-      // TODO This should probably use the GraphQL element type name (element.__typeName)
       handleAddElementToArea(elementType.class, insertAfterElement).then(
         () => {
           const preview = window.jQuery('.cms-preview');
@@ -51,7 +52,22 @@ class AddElementPopover extends Component {
    * - also then update the preview via jquery/entwine
    */
   getElementButtonClickHandler(elementType) {
-    // todo
+    return (event) => {
+      event.preventDefault();
+      backend.post(`/admin/elemental-area/add/`,{
+        elementClass: elementType.class,
+        elementalAreaID: this.props.areaId,
+        insertAfterElementID: this.props.insertAfterElement,
+      })
+        .then(() => {
+          // todo call read blocks from area endpoint (areaID)
+        })
+        .then(() => {
+            const preview = window.jQuery('.cms-preview');
+            preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        });
+      this.handleToggle();
+    };
   }
 
   /**
@@ -78,7 +94,7 @@ class AddElementPopover extends Component {
       extraClass
     );
 
-    const globalUseGraphQL = true;
+    const globalUseGraphQL = false;
 
     const buttons = elementTypes.map((elementType) => ({
       content: elementType.title,

src/Controllers/ElementalAreaController.php

@@ -15,6 +15,10 @@
 use SilverStripe\Core\Injector\Injector;
 use SilverStripe\Forms\Form;
 use SilverStripe\Security\SecurityToken;
+use InvalidArgumentException;
+use DNADesign\Elemental\Models\ElementalArea;
+use SilverStripe\GraphQL\QueryHandler\UserContextProvider;
+use DNADesign\Elemental\Services\ReorderElements;
 
 /**
  * Controller for "ElementalArea" - handles loading and saving of in-line edit forms in an elemental area in admin
@@ -31,15 +35,72 @@ class ElementalAreaController extends CMSMain
         // API access points with structured data
         'POST api/saveForm/$ID' => 'apiSaveForm',
         '$FormName/field/$FieldName' => 'formAction',
+        //
+        'POST add' => 'add',
     ];
 
     private static $allowed_actions = [
         'elementForm',
         'schema',
         'apiSaveForm',
         'formAction',
+        //a
+        'add',
     ];
 
+    // ===
+
+    // Resolver.php resolveAddElementToArea()
+    public function add()
+    {
+        $request = $this->getRequest();
+        $postVars = json_decode($request->getBody(), true);
+        $elementClass = $postVars['elementClass'];
+        $elementalAreaID = $postVars['elementalAreaID'];
+        $afterElementID = $postVars['afterElementID'] ?? null;
+
+        // validate post vars
+        if (!is_subclass_of($elementClass, BaseElement::class)) {
+            throw new InvalidArgumentException("$elementClass is not a subclass of " . BaseElement::class);
+        }
+        $elementalArea = ElementalArea::get()->byID($elementalAreaID);
+        if (!$elementalArea) {
+            throw new InvalidArgumentException("Invalid ElementalAreaID: $elementalAreaID");
+        }
+
+        // permission checks
+        if (!$elementalArea->canEdit()) {
+            throw new InvalidArgumentException("The current user has insufficient permission to edit ElementalAreas");
+        }
+        /** @var BaseElement $newElement */
+        $newElement = Injector::inst()->create($elementClass);
+        if (!$newElement->canEdit()) {
+            throw new InvalidArgumentException(
+                'The current user has insufficient permission to edit Elements'
+            );
+        }
+
+        // Assign the parent ID directly rather than via HasManyList to prevent multiple writes.
+        // See BaseElement::$has_one for the "Parent" naming.
+        $newElement->ParentID = $elementalArea->ID;
+        // Ensure that a sort order is assigned - see BaseElement::onBeforeWrite()
+        $newElement->onBeforeWrite();
+
+        if ($afterElementID !== null) {
+            /** @var ReorderElements $reorderer */
+            $reorderer = Injector::inst()->create(ReorderElements::class, $newElement);
+            $reorderer->reorder($afterElementID); // also writes the element
+        } else {
+            $newElement->write();
+        }
+
+        $response = $this->getResponse();
+        $response->setStatusCode(201);
+        // return $newElement;
+    }
+
+    // ===
+
     public function getClientConfig()
     {
         $clientConfig = parent::getClientConfig();