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,18 @@ const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder
     );
 };
 
-export default function (stateFactory, ActiveState, formTpl, formElement, inlineHelper) {
+/**
+ * 
+ * @param {Object} config
+ * @param {Object} config.stateFactory
+ * @param {Object} config.ActiveState
+ * @param {Object} config.formTpl
+ * @param {Object} config.formElement 
+ * @param {Object} config.inlineHelper
+ * @param {Object} config.htmlEditor
+ * @returns 
+ */
+export default function (config) {
     /**
      * media Editor instance if has been initialized
      * @type {null}
@@ -134,8 +147,8 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
     let textareaObserver = null;
     let texareaHTMLElem = null;
 
-    const ImgStateActive = stateFactory.extend(
-        ActiveState,
+    const ImgStateActive = config.stateFactory.extend(
+        config.ActiveState,
         function () {
             this.initForm();
         },
@@ -145,16 +158,17 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
                 textareaObserver.unobserve(texareaHTMLElem);
             }
             this.widget.$form.empty();
+            this.destroyEditor();
         }
     );
 
     ImgStateActive.prototype.initForm = function () {
         initForm({
             widget: this.widget,
-            formElement,
-            formTpl,
+            formElement: config.formElement,
+            formTpl: config.formTpl,
             mediaEditor,
-            togglePlaceholder: inlineHelper.togglePlaceholder
+            togglePlaceholder: config.inlineHelper.togglePlaceholder
         });
         const figurelem = this.widget.element;
         const $texarea = this.widget.$form.find('textarea#figcaption');
@@ -170,5 +184,14 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
         }
     };
 
+    ImgStateActive.prototype.destroyEditor = function () {
+        const widget = this.widget;
+        const $editableContainer = widget.$original.parents('[data-qti-class="_container"]');
+        config.htmlEditor.buildEditor($editableContainer, {});
+        _.defer(() => {
+            config.htmlEditor.destroyEditor($editableContainer);
+        });
+    };
+
     return ImgStateActive;
 }

src/mediaEditor/plugins/mediaAlignment/helper.js

@@ -43,12 +43,17 @@ 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.length) && prevClassName !== className) {
+        // Re-build Figure widget to toggle between inline/block
+        widget.refresh(widget.$container);
+    }
     widget.$original.trigger('contentChange.qti-widget');
 };