fix/AUT-2673/inline-figure-img

scss/inc/_feedback.scss

@@ -148,3 +148,7 @@
 .bg-error {
     background-color: $errorBgColor;
 }
+
+textarea + .feedback-info {
+    padding: 5px;
+}

src/figure/FigureStateActive.js

@@ -97,12 +97,14 @@ const formCallbacks = ({ widget, formElement, mediaEditor, togglePlaceholder })
 const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder }) => {
     const imageElem = getImageElement(widget);
     const figcaptionElem = getCaptionElement(widget);
+    const showFigure = widget.element.attr('showFigure');
     widget.$form.html(
         formTpl({
             baseUrl: widget.options.baseUrl || '',
             src: imageElem.attr('src'),
             alt: imageElem.attr('alt'),
-            figcaption: figcaptionElem ? figcaptionElem.body() : ''
+            figcaption: figcaptionElem ? figcaptionElem.body() : '',
+            showFigure: showFigure
         })
     );
 
@@ -125,7 +127,15 @@ const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder
     );
 };
 
-export default function (stateFactory, ActiveState, formTpl, formElement, inlineHelper) {
+/**
+ * @param {Object} stateFactory
+ * @param {Object} ActiveState
+ * @param {Object} formTpl
+ * @param {Object} formElement
+ * @param {Object} inlineHelper
+ * @returns
+ */
+export default function ({ stateFactory, ActiveState, formTpl, formElement, inlineHelper }) {
     /**
      * media Editor instance if has been initialized
      * @type {null}
@@ -134,7 +144,7 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
     let textareaObserver = null;
     let texareaHTMLElem = null;
 
-    const ImgStateActive = stateFactory.extend(
+    const FigureStateActive = stateFactory.extend(
         ActiveState,
         function () {
             this.initForm();
@@ -148,7 +158,7 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
         }
     );
 
-    ImgStateActive.prototype.initForm = function () {
+    FigureStateActive.prototype.initForm = function () {
         initForm({
             widget: this.widget,
             formElement,
@@ -170,5 +180,5 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
         }
     };
 
-    return ImgStateActive;
+    return FigureStateActive;
 }

src/mediaEditor/plugins/mediaAlignment/helper.js

@@ -15,10 +15,34 @@
  *
  * Copyright (c) 2021-2022  (original work) Open Assessment Technologies SA;
  */
+import _ from 'lodash';
 
 export const FLOAT_LEFT_CLASS = 'wrap-left';
 export const FLOAT_RIGHT_CLASS = 'wrap-right';
 
+const searchRecurse = (parentElement, serial) => {
+    if (!parentElement) {
+        return null;
+    }
+    if (parentElement.serial === serial) {
+        return parentElement;
+    }
+    let found = null;
+    _.some(parentElement['elements'], childElement => {
+        if (childElement.serial === serial) {
+            found = parentElement;
+        } else if (childElement['elements']) {
+            found = searchRecurse(childElement, serial);
+        } else if (childElement['prompt']) {
+            found = searchRecurse(childElement.prompt.bdy, serial);
+        }
+        if (found) {
+            return true;
+        }
+    });
+    return found;
+};
+
 export const positionFloat = function positionFloat(widget, position) {
     if (!position) {
         return;
@@ -43,12 +67,33 @@ export const positionFloat = function positionFloat(widget, position) {
     // Update DOM
     widget.$container.addClass(className);
     // Update model
+    const prevClassName = widget.element.attr('class') || '';
     if (className) {
         widget.element.attr('class', className);
     } else {
         widget.element.removeAttr('class');
     }
 
+    if (prevClassName !== className) {
+        // Re-build Figure widget to toggle between inline/block
+        const parent = searchRecurse(widget.element.bdy.rootElement.bdy, widget.serial);
+        // avoid changes on Figure in a prompt
+        if (parent.contentModel && parent.contentModel === 'inlineStatic') {
+            return;
+        }
+        widget.element.data('widget').changeState('sleep');
+        _.defer(() => {
+            if (parent && parent.data('widget')) {
+                parent.data('widget').changeState('active');
+                _.defer(() => {
+                    parent.data('widget').changeState('sleep');
+                    _.defer(() => {
+                        widget.element.data('widget').changeState('active');
+                    });
+                });
+            }
+        });
+    }
     widget.$original.trigger('contentChange.qti-widget');
 };