Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix/AUT-2673/inline-figure-img #528

Merged
merged 12 commits into from
Nov 28, 2022
Merged

fix/AUT-2673/inline-figure-img #528

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d57654b
fix: Figure widget re-build on alignment change
marpesia Nov 15, 2022
e686533
fix: add showFigure param in Figcaption panel
marpesia Nov 15, 2022
f6b30ec
fix: add CSS styles to feedback on Figure panel
marpesia Nov 15, 2022
73af5aa
fix: remove caption destroy code
marpesia Nov 16, 2022
86fb44a
fix: rebuild editor on leave Figure
marpesia Nov 16, 2022
6bf18d9
fix: refactor function with config param
marpesia Nov 21, 2022
4967e53
fix: remove unnecesary check
marpesia Nov 22, 2022
9119c90
fix: set config data to improve redeability
marpesia Nov 22, 2022
237ed65
fix: move the parent rebuild to the change scope
marpesia Nov 23, 2022
fc1189f
fix: refactor the library location
marpesia Nov 23, 2022
7cf054d
fix: refactor rebuild editor
marpesia Nov 24, 2022
a39aca8
fix: solve toggle position on prompt
marpesia Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions scss/inc/_feedback.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,3 +148,7 @@
.bg-error {
background-color: $errorBgColor;
}

textarea + .feedback-info {
padding: 5px;
}
16 changes: 14 additions & 2 deletions src/figure/FigureStateActive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
);

Expand All @@ -125,7 +127,7 @@ const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder
);
};

export default function (stateFactory, ActiveState, formTpl, formElement, inlineHelper) {
export default function (stateFactory, ActiveState, formTpl, formElement, inlineHelper, htmlEditor) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

quibble: The signatures becomes heavier and heavier. Maybe it is the right time to think about simplifying it. If the API is not used in too many places, it could be simplified with a config object, allowing to addition of more entries without breaking the signature.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point!

/**
* media Editor instance if has been initialized
* @type {null}
Expand All @@ -145,6 +147,7 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline
textareaObserver.unobserve(texareaHTMLElem);
}
this.widget.$form.empty();
this.destroyEditor();
}
);

Expand All @@ -170,5 +173,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"]');
htmlEditor.buildEditor($editableContainer, {});
_.defer(() => {
htmlEditor.destroyEditor($editableContainer);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Why building then destroying the editor immediately?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CKEditor reads the Figure HTML tag, and if it is inside a block, it moves out of it.
To achieve this effect, I must rebuild the editor, but I don't want to have it active, so I destroy it afterwards. Otherwise, I will have an error in the XML structure.

};

return ImgStateActive;
}
7 changes: 6 additions & 1 deletion src/mediaEditor/plugins/mediaAlignment/helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Why test the value only for one variable and the length only for the other variable? Both are string, so it could be tested by value for both...

suggestion:

Suggested change
if ((prevClassName || className.length) && prevClassName !== className) {
if ((prevClassName || className) && prevClassName !== className) {

// Re-build Figure widget to toggle between inline/block
widget.refresh(widget.$container);
}
widget.$original.trigger('contentChange.qti-widget');
};

Expand Down