\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport {getString, getStrings} from 'core/str';\nimport Pending from 'core/pending';\nimport {displayFilepicker} from 'editor_tiny/utils';\nimport Selectors from './selectors';\nimport ImageModal from './imagemodal';\nimport {getImagePermissions} from './options';\nimport {component} from \"./common\";\nimport {getFilePicker} from 'editor_tiny/options';\n\nexport default class MediaImage {\n DEFAULTS = {\n WIDTH: 160,\n HEIGHT: 160,\n };\n\n form = null;\n rawImageDimensions = null;\n canShowFilePicker = false;\n editor = null;\n currentModal = null;\n selectedImage = null;\n imageAlignment = null;\n\n constructor(editor) {\n const permissions = getImagePermissions(editor);\n\n // Indicates whether the file picker can be shown.\n this.canShowFilePicker = permissions.filepicker && (typeof getFilePicker(editor, 'image') !== 'undefined');\n\n this.editor = editor;\n }\n\n async displayDialogue() {\n // Reset the image dimensions.\n this.rawImageDimensions = null;\n\n const currentImageData = await this.getCurrentImageData();\n this.currentModal = await ImageModal.create({\n title: getString('imageproperties', 'tiny_media'),\n templateContext: await this.getTemplateContext(currentImageData),\n });\n\n if (currentImageData && currentImageData.src) {\n this.loadPreviewImage(currentImageData.src);\n }\n\n await this.registerEventListeners();\n }\n\n async getAlignmentTitles() {\n if (!this.alignmentTitles) {\n const [top, middle, bottom] = await getStrings([\n 'alignment_top',\n 'alignment_middle',\n 'alignment_bottom',\n ].map((key) => ({key, component})));\n\n this.alignmentTitles = {\n top,\n middle,\n bottom,\n };\n }\n\n return this.alignmentTitles;\n }\n\n async getImageAlignment(selected = '') {\n const titles = await this.getAlignmentTitles();\n const alignments = [\n {\n text: titles.top,\n value: 'align-top',\n },\n {\n text: titles.middle,\n value: 'align-middle',\n },\n {\n text: titles.bottom,\n value: 'align-bottom',\n },\n ];\n\n if (selected) {\n alignments.forEach((alignment, index, array) => {\n if (alignment.value === selected) {\n array[index].selected = true;\n }\n });\n }\n\n return alignments;\n }\n\n async getTemplateContext(data) {\n return {\n elementid: this.editor.id,\n showfilepicker: this.canShowFilePicker,\n alignoptions: await this.getImageAlignment(),\n ...data,\n };\n }\n\n async getCurrentImageData() {\n const selectedImageProperties = this.getSelectedImageProperties();\n if (!selectedImageProperties) {\n return {};\n }\n\n const properties = {...selectedImageProperties};\n if (properties.align) {\n properties.alignoptions = await this.getImageAlignment(properties.align);\n }\n\n if (properties.src) {\n properties.haspreview = true;\n }\n\n if (!properties.alt) {\n properties.presentation = true;\n }\n\n return properties;\n }\n\n filePickerCallback(params, self) {\n if (params.url) {\n const input = self.form.querySelector(Selectors.IMAGE.elements.url);\n input.value = params.url;\n\n // Auto set the width and height.\n self.form.querySelector(Selectors.IMAGE.elements.width).value = '';\n self.form.querySelector(Selectors.IMAGE.elements.height).value = '';\n\n // Load the preview image.\n self.loadPreviewImage(params.url);\n }\n }\n\n storeImageDimensions(image) {\n // Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).\n this.rawImageDimensions = {\n width: image.width || this.DEFAULTS.WIDTH,\n height: image.height || this.DEFAULTS.HEIGHT,\n };\n\n const getCurrentWidth = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.width;\n }\n return element.value;\n };\n const getCurrentHeight = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.height;\n }\n return element.value;\n };\n\n const widthInput = this.form.querySelector(Selectors.IMAGE.elements.width);\n const currentWidth = getCurrentWidth(widthInput);\n\n const heightInput = this.form.querySelector(Selectors.IMAGE.elements.height);\n const currentHeight = getCurrentHeight(heightInput);\n\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.setAttribute('src', image.src);\n preview.style.display = 'inline';\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n if (this.isPercentageValue(currentWidth) && this.isPercentageValue(currentHeight)) {\n constrain.checked = currentWidth === currentHeight;\n } else if (image.width === 0 || image.height === 0) {\n // If we don't have both dimensions of the image, we can't auto-size it, so disable control.\n constrain.disabled = 'disabled';\n } else {\n // This is the same as comparing to 3 decimal places.\n const widthRatio = Math.round(1000 * parseInt(currentWidth, 10) / image.width);\n const heightRatio = Math.round(1000 * parseInt(currentHeight, 10) / image.height);\n constrain.checked = widthRatio === heightRatio;\n }\n }\n\n loadPreviewImage(url) {\n const image = new Image();\n\n image.addEventListener('error', () => {\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.style.display = 'none';\n });\n image.addEventListener('load', () => {\n this.storeImageDimensions(image);\n this.autoAdjustSize();\n });\n\n image.src = url;\n }\n\n urlChanged() {\n const input = this.form.querySelector(Selectors.IMAGE.elements.url);\n\n if (input.value) {\n // Load the preview image.\n this.loadPreviewImage(input.value);\n }\n }\n\n hasErrorUrlField() {\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n const urlError = url === '';\n this.toggleVisibility(Selectors.IMAGE.elements.urlWarning, urlError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.url], urlError);\n\n return urlError;\n }\n\n hasErrorAltField() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const presentation = this.form.querySelector(Selectors.IMAGE.elements.presentation).checked;\n const imageAltError = alt === '' && !presentation;\n this.toggleVisibility(Selectors.IMAGE.elements.altWarning, imageAltError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.alt, Selectors.IMAGE.elements.presentation], imageAltError);\n\n return imageAltError;\n }\n\n toggleVisibility(selector, predicate) {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => {\n element.style.display = predicate ? 'block' : 'none';\n });\n }\n\n toggleAriaInvalid(selectors, predicate) {\n selectors.forEach((selector) => {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => element.setAttribute('aria-invalid', predicate));\n });\n }\n\n getAlignmentClass(alignment) {\n return alignment;\n }\n\n updateWarning() {\n const urlError = this.hasErrorUrlField();\n const imageAltError = this.hasErrorAltField();\n\n return urlError || imageAltError;\n }\n\n getImageContext() {\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n return null;\n }\n\n const classList = [];\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain).value;\n if (constrain) {\n classList.push(Selectors.IMAGE.styles.responsive);\n }\n\n // Add the alignment class for the image.\n const alignment = this.getAlignmentClass(this.form.querySelector(Selectors.IMAGE.elements.alignment).value);\n classList.push(alignment);\n\n return {\n url: this.form.querySelector(Selectors.IMAGE.elements.url).value,\n alt: this.form.querySelector(Selectors.IMAGE.elements.alt).value,\n width: this.form.querySelector(Selectors.IMAGE.elements.width).value,\n height: this.form.querySelector(Selectors.IMAGE.elements.height).value,\n presentation: this.form.querySelector(Selectors.IMAGE.elements.presentation).checked,\n customStyle: this.form.querySelector(Selectors.IMAGE.elements.customStyle).value,\n classlist: classList.join(' '),\n };\n }\n\n setImage() {\n const pendingPromise = new Pending('tiny_media:setImage');\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n if (url === '') {\n return;\n }\n\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n pendingPromise.resolve();\n return;\n }\n\n // Check for invalid width or height.\n const width = this.form.querySelector(Selectors.IMAGE.elements.width).value;\n if (!this.isPercentageValue(width) && isNaN(parseInt(width, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.width).focus();\n pendingPromise.resolve();\n return;\n }\n\n const height = this.form.querySelector(Selectors.IMAGE.elements.height).value;\n if (!this.isPercentageValue(height) && isNaN(parseInt(height, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.height).focus();\n pendingPromise.resolve();\n return;\n }\n\n Templates.render('tiny_media/image', this.getImageContext())\n .then((html) => {\n this.editor.insertContent(html);\n this.currentModal.destroy();\n pendingPromise.resolve();\n\n return html;\n })\n .catch();\n }\n\n handleKeyupCharacterCount() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const current = this.form.querySelector('#currentcount');\n current.innerHTML = alt.length;\n }\n\n autoAdjustSize(forceHeight = false) {\n // If we do not know the image size, do not do anything.\n if (!this.rawImageDimensions) {\n return;\n }\n\n const widthField = this.form.querySelector(Selectors.IMAGE.elements.width);\n const heightField = this.form.querySelector(Selectors.IMAGE.elements.height);\n const normalizeFieldData = (fieldData) => {\n fieldData.isPercentageValue = !!this.isPercentageValue(fieldData.field.value);\n if (fieldData.isPercentageValue) {\n fieldData.percentValue = parseInt(fieldData.field.value, 10);\n fieldData.pixelSize = this.rawImageDimensions[fieldData.type] / 100 * fieldData.percentValue;\n } else {\n fieldData.pixelSize = parseInt(fieldData.field.value, 10);\n fieldData.percentValue = fieldData.pixelSize / this.rawImageDimensions[fieldData.type] * 100;\n }\n\n return fieldData;\n };\n\n const getKeyField = () => {\n const getValue = () => {\n if (forceHeight) {\n return {\n field: heightField,\n type: 'height',\n };\n } else {\n return {\n field: widthField,\n type: 'width',\n };\n }\n };\n\n const currentValue = getValue();\n if (currentValue.field.value === '') {\n currentValue.field.value = this.rawImageDimensions[currentValue.type];\n }\n\n return normalizeFieldData(currentValue);\n };\n\n const getRelativeField = () => {\n if (forceHeight) {\n return normalizeFieldData({\n field: widthField,\n type: 'width',\n });\n } else {\n return normalizeFieldData({\n field: heightField,\n type: 'height',\n });\n }\n };\n\n\n const setImageDimensions = (image, keyField, relativeField, forceHeight = false) => {\n const getStyleValue = (field) => field.isPercentageValue ? `${field.percentValue}%` : `${field.pixelSize}px`;\n\n // If the values are constrained, then only update the width.\n if (forceHeight) {\n if (keyField.type === 'width') {\n image.style.width = getStyleValue(keyField);\n } else {\n image.style.width = getStyleValue(relativeField);\n }\n } else {\n image.style[keyField.type] = getStyleValue(keyField);\n image.style[relativeField.type] = getStyleValue(relativeField);\n }\n };\n\n const imagePreview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n // Clear the existing preview sizes.\n imagePreview.style.width = '';\n imagePreview.style.height = '';\n\n // Now update with the new values.\n const constrainField = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n const keyField = getKeyField();\n const relativeField = getRelativeField();\n if (constrainField.checked) {\n // We are keeping the image in proportion.\n // Calculate the size for the relative field.\n if (keyField.isPercentageValue) {\n // In proportion, so the percentages are the same.\n relativeField.field.value = keyField.field.value;\n relativeField.percentValue = keyField.percentValue;\n } else {\n relativeField.pixelSize = Math.round(\n keyField.pixelSize / this.rawImageDimensions[keyField.type] * this.rawImageDimensions[relativeField.type]\n );\n relativeField.field.value = relativeField.pixelSize;\n }\n }\n setImageDimensions(imagePreview, keyField, relativeField, !!constrainField.checked);\n }\n\n getSelectedImageProperties() {\n const image = this.getSelectedImage();\n if (!image) {\n this.selectedImage = null;\n return null;\n }\n\n const properties = {\n src: null,\n alt: null,\n width: null,\n height: null,\n align: '',\n presentation: false,\n };\n\n const getImageHeight = (image) => {\n if (!this.isPercentageValue(String(image.height))) {\n return parseInt(image.height, 10);\n }\n\n return image.height;\n };\n\n const getImageWidth = (image) => {\n if (!this.isPercentageValue(String(image.width))) {\n return parseInt(image.width, 10);\n }\n\n return image.width;\n };\n\n // Get the current selection.\n this.removeLegacyAlignment(image);\n this.selectedImage = image;\n\n properties.customStyle = image.style.cssText;\n\n const width = getImageWidth(image);\n if (width !== 0) {\n properties.width = width;\n }\n\n const height = getImageHeight(image);\n if (height !== 0) {\n properties.height = height;\n }\n\n const alignment = this.getAlignmentProperties(image, properties);\n if (alignment) {\n properties.align = alignment.value;\n }\n\n properties.src = image.getAttribute('src');\n properties.alt = image.getAttribute('alt') || '';\n properties.presentation = (image.getAttribute('role') === 'presentation');\n\n return properties;\n }\n\n removeLegacyAlignment(imageNode) {\n if (!imageNode.style.margin) {\n // There is no margin therefore this cannot match any known alignments.\n return imageNode;\n }\n\n Selectors.IMAGE.alignments.some(alignment => {\n if (imageNode.style[alignment.name] !== alignment.value) {\n // The name/value do not match. Skip.\n return false;\n }\n const normalisedNode = document.createElement('div');\n normalisedNode.style.margin = alignment.margin;\n if (imageNode.style.margin !== normalisedNode.style.margin) {\n // The margin does not match.\n return false;\n }\n\n imageNode.classList.add(this.getAlignmentClass(alignment.value));\n imageNode.style[alignment.name] = null;\n imageNode.style.margin = null;\n\n return true;\n });\n\n return imageNode;\n }\n\n getAlignmentProperties(image) {\n const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {\n if (image.classList.contains(this.getAlignmentClass(alignment.value))) {\n return true;\n }\n\n if (alignment.legacyValues) {\n return alignment.legacyValues.some((legacyValue) => image.classList.contains(legacyValue));\n }\n\n return false;\n });\n if (currentAlignment) {\n return currentAlignment;\n }\n\n return Selectors.IMAGE.alignments.find((alignment) => alignment.isDefault);\n }\n\n getSelectedImage() {\n const imgElm = this.editor.selection.getNode();\n const figureElm = this.editor.dom.getParent(imgElm, 'figure.image');\n if (figureElm) {\n return this.editor.dom.select('img', figureElm)[0];\n }\n\n if (imgElm && (imgElm.nodeName.toUpperCase() !== 'IMG' || this.isPlaceholderImage(imgElm))) {\n return null;\n }\n return imgElm;\n }\n\n isPlaceholderImage(imgElm) {\n if (imgElm.nodeName.toUpperCase() !== 'IMG') {\n return false;\n }\n\n return (imgElm.hasAttribute('data-mce-object') || imgElm.hasAttribute('data-mce-placeholder'));\n }\n\n isPercentageValue(value) {\n return value.match(/\\d+%/);\n }\n\n async registerEventListeners() {\n await this.currentModal.getBody();\n const root = this.currentModal.getRoot()[0];\n\n this.form = root.querySelector(Selectors.IMAGE.elements.form);\n root.addEventListener('click', (e) => {\n const submitAction = e.target.closest(Selectors.IMAGE.actions.submit);\n const imageBrowserAction = e.target.closest(Selectors.IMAGE.actions.imageBrowser);\n if (submitAction) {\n e.preventDefault();\n this.setImage();\n }\n if (imageBrowserAction && this.canShowFilePicker) {\n e.preventDefault();\n displayFilepicker(this.editor, 'image').then((params) => {\n const self = this;\n this.filePickerCallback(params, self);\n\n return;\n }).catch();\n }\n });\n\n root.addEventListener('change', (e) => {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.hasErrorUrlField();\n }\n\n const presentationEle = e.target.closest(Selectors.IMAGE.elements.presentation);\n if (presentationEle) {\n this.hasErrorAltField();\n }\n\n const constrainEle = e.target.closest(Selectors.IMAGE.elements.constrain);\n if (constrainEle) {\n this.autoAdjustSize(true);\n }\n });\n\n root.addEventListener('blur', (e) => {\n if (e.target.nodeType === Node.ELEMENT_NODE) {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.urlChanged();\n }\n\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.hasErrorAltField();\n }\n\n const widthEle = e.target.closest(Selectors.IMAGE.elements.width);\n if (widthEle) {\n this.autoAdjustSize();\n }\n\n const heightEle = e.target.closest(Selectors.IMAGE.elements.height);\n if (heightEle) {\n this.autoAdjustSize(true);\n }\n }\n }, true);\n\n // Character count.\n root.addEventListener('keyup', (e) => {\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.handleKeyupCharacterCount();\n }\n });\n }\n}\n"],"names":["constructor","editor","WIDTH","HEIGHT","permissions","canShowFilePicker","filepicker","rawImageDimensions","currentImageData","this","getCurrentImageData","currentModal","ImageModal","create","title","templateContext","getTemplateContext","src","loadPreviewImage","registerEventListeners","alignmentTitles","top","middle","bottom","map","key","component","selected","titles","getAlignmentTitles","alignments","text","value","forEach","alignment","index","array","data","elementid","id","showfilepicker","alignoptions","getImageAlignment","selectedImageProperties","getSelectedImageProperties","properties","align","haspreview","alt","presentation","filePickerCallback","params","self","url","form","querySelector","Selectors","IMAGE","elements","width","height","storeImageDimensions","image","DEFAULTS","currentWidth","element","getCurrentWidth","currentHeight","getCurrentHeight","preview","setAttribute","style","display","constrain","isPercentageValue","checked","disabled","widthRatio","Math","round","parseInt","heightRatio","Image","addEventListener","autoAdjustSize","urlChanged","input","hasErrorUrlField","urlError","toggleVisibility","urlWarning","toggleAriaInvalid","hasErrorAltField","imageAltError","altWarning","selector","predicate","querySelectorAll","selectors","getAlignmentClass","updateWarning","getImageContext","classList","push","styles","responsive","customStyle","classlist","join","setImage","pendingPromise","Pending","resolve","isNaN","focus","render","then","html","insertContent","destroy","catch","handleKeyupCharacterCount","innerHTML","length","forceHeight","widthField","heightField","normalizeFieldData","fieldData","field","percentValue","pixelSize","type","imagePreview","constrainField","keyField","currentValue","getKeyField","relativeField","getStyleValue","setImageDimensions","getSelectedImage","selectedImage","removeLegacyAlignment","cssText","String","getImageWidth","getImageHeight","getAlignmentProperties","getAttribute","imageNode","margin","some","name","normalisedNode","document","createElement","add","currentAlignment","find","contains","legacyValues","legacyValue","isDefault","imgElm","selection","getNode","figureElm","dom","getParent","select","nodeName","toUpperCase","isPlaceholderImage","hasAttribute","match","getBody","root","getRoot","e","submitAction","target","closest","actions","submit","imageBrowserAction","imageBrowser","preventDefault","nodeType","Node","ELEMENT_NODE"],"mappings":"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"}
\ No newline at end of file
diff --git a/lib/editor/tiny/plugins/media/amd/src/embed.js b/lib/editor/tiny/plugins/media/amd/src/embed.js
index 0fa6c9e499c..3e13bd1ddac 100644
--- a/lib/editor/tiny/plugins/media/amd/src/embed.js
+++ b/lib/editor/tiny/plugins/media/amd/src/embed.js
@@ -33,10 +33,13 @@ import {component} from "./common";
import EmbedModal from './embedmodal';
import Selectors from './selectors';
import {getEmbedPermissions} from './options';
+import {getFilePicker} from 'editor_tiny/options';
export default class MediaEmbed {
editor = null;
canShowFilePicker = false;
+ canShowFilePickerPoster = false;
+ canShowFilePickerTrack = false;
/**
* @property {Object} The names of the alignment options.
@@ -55,7 +58,12 @@ export default class MediaEmbed {
constructor(editor) {
const permissions = getEmbedPermissions(editor);
- this.canShowFilePicker = permissions.filepicker;
+
+ // Indicates whether the file picker can be shown.
+ this.canShowFilePicker = permissions.filepicker && (typeof getFilePicker(editor, 'media') !== 'undefined');
+ this.canShowFilePickerPoster = permissions.filepicker && (typeof getFilePicker(editor, 'image') !== 'undefined');
+ this.canShowFilePickerTrack = permissions.filepicker && (typeof getFilePicker(editor, 'subtitle') !== 'undefined');
+
this.editor = editor;
}
@@ -90,6 +98,8 @@ export default class MediaEmbed {
return Object.assign({}, {
elementid: this.editor.getElement().id,
showfilepicker: this.canShowFilePicker,
+ showfilepickerposter: this.canShowFilePickerPoster,
+ showfilepickertrack: this.canShowFilePickerTrack,
langsinstalled: languages.installed,
langsavailable: languages.available,
link: true,
@@ -437,7 +447,7 @@ export default class MediaEmbed {
await modal.getBody();
const $root = modal.getRoot();
const root = $root[0];
- if (this.canShowFilePicker) {
+ if (this.canShowFilePicker || this.canShowFilePickerPoster || this.canShowFilePickerTrack) {
root.addEventListener('click', this.clickHandler.bind(this));
}
diff --git a/lib/editor/tiny/plugins/media/amd/src/image.js b/lib/editor/tiny/plugins/media/amd/src/image.js
index 16d1484aa8c..773f66ceb32 100644
--- a/lib/editor/tiny/plugins/media/amd/src/image.js
+++ b/lib/editor/tiny/plugins/media/amd/src/image.js
@@ -29,6 +29,7 @@ import Selectors from './selectors';
import ImageModal from './imagemodal';
import {getImagePermissions} from './options';
import {component} from "./common";
+import {getFilePicker} from 'editor_tiny/options';
export default class MediaImage {
DEFAULTS = {
@@ -46,7 +47,10 @@ export default class MediaImage {
constructor(editor) {
const permissions = getImagePermissions(editor);
- this.canShowFilePicker = permissions.filepicker;
+
+ // Indicates whether the file picker can be shown.
+ this.canShowFilePicker = permissions.filepicker && (typeof getFilePicker(editor, 'image') !== 'undefined');
+
this.editor = editor;
}
diff --git a/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache b/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
index 1b95c93ff29..13a4c9e22d2 100644
--- a/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
+++ b/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
@@ -32,9 +32,11 @@
+ {{#showfilepicker}}
+ {{/showfilepicker}}
@@ -298,9 +304,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -356,9 +364,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -406,9 +416,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -464,9 +476,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -514,9 +528,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -572,9 +588,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -622,9 +640,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -681,9 +701,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -731,9 +753,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
diff --git a/lib/editor/tiny/plugins/media/templates/embed_media_modal_link.mustache b/lib/editor/tiny/plugins/media/templates/embed_media_modal_link.mustache
index 6f28995b1b8..1aa2da611f1 100644
--- a/lib/editor/tiny/plugins/media/templates/embed_media_modal_link.mustache
+++ b/lib/editor/tiny/plugins/media/templates/embed_media_modal_link.mustache
@@ -31,9 +31,11 @@
+ {{#showfilepicker}}
+ {{/showfilepicker}}
diff --git a/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache b/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
index 928e6e385b8..d646059bf54 100644
--- a/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
+++ b/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
@@ -32,9 +32,11 @@
+ {{#showfilepicker}}
+ {{/showfilepicker}}
@@ -276,9 +282,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -326,9 +334,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -384,9 +394,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -434,9 +446,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -492,9 +506,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -542,9 +558,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -600,9 +618,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -650,9 +670,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -709,9 +731,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
@@ -759,9 +783,11 @@
+ {{#showfilepickertrack}}
-
-
+
+
+ {{/showfilepickertrack}}
diff --git a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
index 22241b4d917..a45d08ed38b 100644
--- a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
+++ b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
@@ -48,7 +48,7 @@
{{^showfilepicker}}
-
+
{{/showfilepicker}}