--- /dev/null
+/**
+ * @file
+ * Provides theme functions for image Quick Edit's client-side HTML.
+ */
+
+(function (Drupal) {
+ /**
+ * Theme function for validation errors of the Image in-place editor.
+ *
+ * @param {object} settings
+ * Settings object used to construct the markup.
+ * @param {string} settings.errors
+ * Already escaped HTML representing error messages.
+ *
+ * @return {string}
+ * The corresponding HTML.
+ */
+ Drupal.theme.quickeditImageErrors = function (settings) {
+ return `<div class="quickedit-image-errors">${settings.errors}</div>`;
+ };
+
+ /**
+ * Theme function for the dropzone element of the Image module's in-place
+ * editor.
+ *
+ * @param {object} settings
+ * Settings object used to construct the markup.
+ * @param {string} settings.state
+ * State of the upload.
+ * @param {string} settings.text
+ * Text to display inline with the dropzone element.
+ *
+ * @return {string}
+ * The corresponding HTML.
+ */
+ Drupal.theme.quickeditImageDropzone = function (settings) {
+ return `<div class="quickedit-image-dropzone ${settings.state}">` +
+ ' <i class="quickedit-image-icon"></i>' +
+ ` <span class="quickedit-image-text">${settings.text}</span>` +
+ '</div>';
+ };
+
+ /**
+ * Theme function for the toolbar of the Image module's in-place editor.
+ *
+ * @param {object} settings
+ * Settings object used to construct the markup.
+ * @param {bool} settings.alt_field
+ * Whether or not the "Alt" field is enabled for this field.
+ * @param {bool} settings.alt_field_required
+ * Whether or not the "Alt" field is required for this field.
+ * @param {string} settings.alt
+ * The current value for the "Alt" field.
+ * @param {bool} settings.title_field
+ * Whether or not the "Title" field is enabled for this field.
+ * @param {bool} settings.title_field_required
+ * Whether or not the "Title" field is required for this field.
+ * @param {string} settings.title
+ * The current value for the "Title" field.
+ *
+ * @return {string}
+ * The corresponding HTML.
+ */
+ Drupal.theme.quickeditImageToolbar = function (settings) {
+ let html = '<form class="quickedit-image-field-info">';
+ if (settings.alt_field) {
+ html += `${' <div>' +
+ ' <label for="alt" class="'}${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` +
+ ` <input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
+ ' </div>';
+ }
+ if (settings.title_field) {
+ html += `${' <div>' +
+ ' <label for="title" class="'}${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` +
+ ` <input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
+ ' </div>';
+ }
+ html += '</form>';
+
+ return html;
+ };
+}(Drupal));