plugin.js 47 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475
  1. /**
  2. * TinyMCE version 6.0.3 (2022-05-25)
  3. */
  4. (function () {
  5. 'use strict';
  6. var global$4 = tinymce.util.Tools.resolve('tinymce.PluginManager');
  7. const getPrototypeOf = Object.getPrototypeOf;
  8. const hasProto = (v, constructor, predicate) => {
  9. var _a;
  10. if (predicate(v, constructor.prototype)) {
  11. return true;
  12. } else {
  13. return ((_a = v.constructor) === null || _a === void 0 ? void 0 : _a.name) === constructor.name;
  14. }
  15. };
  16. const typeOf = x => {
  17. const t = typeof x;
  18. if (x === null) {
  19. return 'null';
  20. } else if (t === 'object' && Array.isArray(x)) {
  21. return 'array';
  22. } else if (t === 'object' && hasProto(x, String, (o, proto) => proto.isPrototypeOf(o))) {
  23. return 'string';
  24. } else {
  25. return t;
  26. }
  27. };
  28. const isType = type => value => typeOf(value) === type;
  29. const isSimpleType = type => value => typeof value === type;
  30. const eq = t => a => t === a;
  31. const is = (value, constructor) => isObject(value) && hasProto(value, constructor, (o, proto) => getPrototypeOf(o) === proto);
  32. const isString = isType('string');
  33. const isObject = isType('object');
  34. const isPlainObject = value => is(value, Object);
  35. const isArray = isType('array');
  36. const isNull = eq(null);
  37. const isBoolean = isSimpleType('boolean');
  38. const isNullable = a => a === null || a === undefined;
  39. const isNonNullable = a => !isNullable(a);
  40. const isFunction = isSimpleType('function');
  41. const isNumber = isSimpleType('number');
  42. const isArrayOf = (value, pred) => {
  43. if (isArray(value)) {
  44. for (let i = 0, len = value.length; i < len; ++i) {
  45. if (!pred(value[i])) {
  46. return false;
  47. }
  48. }
  49. return true;
  50. }
  51. return false;
  52. };
  53. const noop = () => {
  54. };
  55. class Optional {
  56. constructor(tag, value) {
  57. this.tag = tag;
  58. this.value = value;
  59. }
  60. static some(value) {
  61. return new Optional(true, value);
  62. }
  63. static none() {
  64. return Optional.singletonNone;
  65. }
  66. fold(onNone, onSome) {
  67. if (this.tag) {
  68. return onSome(this.value);
  69. } else {
  70. return onNone();
  71. }
  72. }
  73. isSome() {
  74. return this.tag;
  75. }
  76. isNone() {
  77. return !this.tag;
  78. }
  79. map(mapper) {
  80. if (this.tag) {
  81. return Optional.some(mapper(this.value));
  82. } else {
  83. return Optional.none();
  84. }
  85. }
  86. bind(binder) {
  87. if (this.tag) {
  88. return binder(this.value);
  89. } else {
  90. return Optional.none();
  91. }
  92. }
  93. exists(predicate) {
  94. return this.tag && predicate(this.value);
  95. }
  96. forall(predicate) {
  97. return !this.tag || predicate(this.value);
  98. }
  99. filter(predicate) {
  100. if (!this.tag || predicate(this.value)) {
  101. return this;
  102. } else {
  103. return Optional.none();
  104. }
  105. }
  106. getOr(replacement) {
  107. return this.tag ? this.value : replacement;
  108. }
  109. or(replacement) {
  110. return this.tag ? this : replacement;
  111. }
  112. getOrThunk(thunk) {
  113. return this.tag ? this.value : thunk();
  114. }
  115. orThunk(thunk) {
  116. return this.tag ? this : thunk();
  117. }
  118. getOrDie(message) {
  119. if (!this.tag) {
  120. throw new Error(message !== null && message !== void 0 ? message : 'Called getOrDie on None');
  121. } else {
  122. return this.value;
  123. }
  124. }
  125. static from(value) {
  126. return isNonNullable(value) ? Optional.some(value) : Optional.none();
  127. }
  128. getOrNull() {
  129. return this.tag ? this.value : null;
  130. }
  131. getOrUndefined() {
  132. return this.value;
  133. }
  134. each(worker) {
  135. if (this.tag) {
  136. worker(this.value);
  137. }
  138. }
  139. toArray() {
  140. return this.tag ? [this.value] : [];
  141. }
  142. toString() {
  143. return this.tag ? `some(${ this.value })` : 'none()';
  144. }
  145. }
  146. Optional.singletonNone = new Optional(false);
  147. const keys = Object.keys;
  148. const hasOwnProperty = Object.hasOwnProperty;
  149. const each = (obj, f) => {
  150. const props = keys(obj);
  151. for (let k = 0, len = props.length; k < len; k++) {
  152. const i = props[k];
  153. const x = obj[i];
  154. f(x, i);
  155. }
  156. };
  157. const objAcc = r => (x, i) => {
  158. r[i] = x;
  159. };
  160. const internalFilter = (obj, pred, onTrue, onFalse) => {
  161. const r = {};
  162. each(obj, (x, i) => {
  163. (pred(x, i) ? onTrue : onFalse)(x, i);
  164. });
  165. return r;
  166. };
  167. const filter = (obj, pred) => {
  168. const t = {};
  169. internalFilter(obj, pred, objAcc(t), noop);
  170. return t;
  171. };
  172. const has = (obj, key) => hasOwnProperty.call(obj, key);
  173. const hasNonNullableKey = (obj, key) => has(obj, key) && obj[key] !== undefined && obj[key] !== null;
  174. const nativePush = Array.prototype.push;
  175. const flatten = xs => {
  176. const r = [];
  177. for (let i = 0, len = xs.length; i < len; ++i) {
  178. if (!isArray(xs[i])) {
  179. throw new Error('Arr.flatten item ' + i + ' was not an array, input: ' + xs);
  180. }
  181. nativePush.apply(r, xs[i]);
  182. }
  183. return r;
  184. };
  185. const get = (xs, i) => i >= 0 && i < xs.length ? Optional.some(xs[i]) : Optional.none();
  186. const head = xs => get(xs, 0);
  187. const findMap = (arr, f) => {
  188. for (let i = 0; i < arr.length; i++) {
  189. const r = f(arr[i], i);
  190. if (r.isSome()) {
  191. return r;
  192. }
  193. }
  194. return Optional.none();
  195. };
  196. typeof window !== 'undefined' ? window : Function('return this;')();
  197. const rawSet = (dom, key, value) => {
  198. if (isString(value) || isBoolean(value) || isNumber(value)) {
  199. dom.setAttribute(key, value + '');
  200. } else {
  201. console.error('Invalid call to Attribute.set. Key ', key, ':: Value ', value, ':: Element ', dom);
  202. throw new Error('Attribute value was not simple');
  203. }
  204. };
  205. const set = (element, key, value) => {
  206. rawSet(element.dom, key, value);
  207. };
  208. const remove = (element, key) => {
  209. element.dom.removeAttribute(key);
  210. };
  211. const fromHtml = (html, scope) => {
  212. const doc = scope || document;
  213. const div = doc.createElement('div');
  214. div.innerHTML = html;
  215. if (!div.hasChildNodes() || div.childNodes.length > 1) {
  216. const message = 'HTML does not have a single root node';
  217. console.error(message, html);
  218. throw new Error(message);
  219. }
  220. return fromDom(div.childNodes[0]);
  221. };
  222. const fromTag = (tag, scope) => {
  223. const doc = scope || document;
  224. const node = doc.createElement(tag);
  225. return fromDom(node);
  226. };
  227. const fromText = (text, scope) => {
  228. const doc = scope || document;
  229. const node = doc.createTextNode(text);
  230. return fromDom(node);
  231. };
  232. const fromDom = node => {
  233. if (node === null || node === undefined) {
  234. throw new Error('Node cannot be null or undefined');
  235. }
  236. return { dom: node };
  237. };
  238. const fromPoint = (docElm, x, y) => Optional.from(docElm.dom.elementFromPoint(x, y)).map(fromDom);
  239. const SugarElement = {
  240. fromHtml,
  241. fromTag,
  242. fromText,
  243. fromDom,
  244. fromPoint
  245. };
  246. var global$3 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
  247. var global$2 = tinymce.util.Tools.resolve('tinymce.util.URI');
  248. const isNotEmpty = s => s.length > 0;
  249. const option = name => editor => editor.options.get(name);
  250. const register$2 = editor => {
  251. const registerOption = editor.options.register;
  252. registerOption('image_dimensions', {
  253. processor: 'boolean',
  254. default: true
  255. });
  256. registerOption('image_advtab', {
  257. processor: 'boolean',
  258. default: false
  259. });
  260. registerOption('image_uploadtab', {
  261. processor: 'boolean',
  262. default: true
  263. });
  264. registerOption('image_prepend_url', {
  265. processor: 'string',
  266. default: ''
  267. });
  268. registerOption('image_class_list', { processor: 'object[]' });
  269. registerOption('image_description', {
  270. processor: 'boolean',
  271. default: true
  272. });
  273. registerOption('image_title', {
  274. processor: 'boolean',
  275. default: false
  276. });
  277. registerOption('image_caption', {
  278. processor: 'boolean',
  279. default: false
  280. });
  281. registerOption('image_list', {
  282. processor: value => {
  283. const valid = value === false || isString(value) || isArrayOf(value, isObject) || isFunction(value);
  284. return valid ? {
  285. value,
  286. valid
  287. } : {
  288. valid: false,
  289. message: 'Must be false, a string, an array or a function.'
  290. };
  291. },
  292. default: false
  293. });
  294. };
  295. const hasDimensions = option('image_dimensions');
  296. const hasAdvTab = option('image_advtab');
  297. const hasUploadTab = option('image_uploadtab');
  298. const getPrependUrl = option('image_prepend_url');
  299. const getClassList = option('image_class_list');
  300. const hasDescription = option('image_description');
  301. const hasImageTitle = option('image_title');
  302. const hasImageCaption = option('image_caption');
  303. const getImageList = option('image_list');
  304. const showAccessibilityOptions = option('a11y_advanced_options');
  305. const isAutomaticUploadsEnabled = option('automatic_uploads');
  306. const hasUploadUrl = editor => isNotEmpty(editor.options.get('images_upload_url'));
  307. const hasUploadHandler = editor => isNonNullable(editor.options.get('images_upload_handler'));
  308. const parseIntAndGetMax = (val1, val2) => Math.max(parseInt(val1, 10), parseInt(val2, 10));
  309. const getImageSize = url => new Promise(callback => {
  310. const img = document.createElement('img');
  311. const done = dimensions => {
  312. img.onload = img.onerror = null;
  313. if (img.parentNode) {
  314. img.parentNode.removeChild(img);
  315. }
  316. callback(dimensions);
  317. };
  318. img.onload = () => {
  319. const width = parseIntAndGetMax(img.width, img.clientWidth);
  320. const height = parseIntAndGetMax(img.height, img.clientHeight);
  321. const dimensions = {
  322. width,
  323. height
  324. };
  325. done(Promise.resolve(dimensions));
  326. };
  327. img.onerror = () => {
  328. done(Promise.reject(`Failed to get image dimensions for: ${ url }`));
  329. };
  330. const style = img.style;
  331. style.visibility = 'hidden';
  332. style.position = 'fixed';
  333. style.bottom = style.left = '0px';
  334. style.width = style.height = 'auto';
  335. document.body.appendChild(img);
  336. img.src = url;
  337. });
  338. const removePixelSuffix = value => {
  339. if (value) {
  340. value = value.replace(/px$/, '');
  341. }
  342. return value;
  343. };
  344. const addPixelSuffix = value => {
  345. if (value.length > 0 && /^[0-9]+$/.test(value)) {
  346. value += 'px';
  347. }
  348. return value;
  349. };
  350. const mergeMargins = css => {
  351. if (css.margin) {
  352. const splitMargin = String(css.margin).split(' ');
  353. switch (splitMargin.length) {
  354. case 1:
  355. css['margin-top'] = css['margin-top'] || splitMargin[0];
  356. css['margin-right'] = css['margin-right'] || splitMargin[0];
  357. css['margin-bottom'] = css['margin-bottom'] || splitMargin[0];
  358. css['margin-left'] = css['margin-left'] || splitMargin[0];
  359. break;
  360. case 2:
  361. css['margin-top'] = css['margin-top'] || splitMargin[0];
  362. css['margin-right'] = css['margin-right'] || splitMargin[1];
  363. css['margin-bottom'] = css['margin-bottom'] || splitMargin[0];
  364. css['margin-left'] = css['margin-left'] || splitMargin[1];
  365. break;
  366. case 3:
  367. css['margin-top'] = css['margin-top'] || splitMargin[0];
  368. css['margin-right'] = css['margin-right'] || splitMargin[1];
  369. css['margin-bottom'] = css['margin-bottom'] || splitMargin[2];
  370. css['margin-left'] = css['margin-left'] || splitMargin[1];
  371. break;
  372. case 4:
  373. css['margin-top'] = css['margin-top'] || splitMargin[0];
  374. css['margin-right'] = css['margin-right'] || splitMargin[1];
  375. css['margin-bottom'] = css['margin-bottom'] || splitMargin[2];
  376. css['margin-left'] = css['margin-left'] || splitMargin[3];
  377. }
  378. delete css.margin;
  379. }
  380. return css;
  381. };
  382. const createImageList = (editor, callback) => {
  383. const imageList = getImageList(editor);
  384. if (isString(imageList)) {
  385. fetch(imageList).then(res => {
  386. if (res.ok) {
  387. res.json().then(callback);
  388. }
  389. });
  390. } else if (isFunction(imageList)) {
  391. imageList(callback);
  392. } else {
  393. callback(imageList);
  394. }
  395. };
  396. const waitLoadImage = (editor, data, imgElm) => {
  397. const selectImage = () => {
  398. imgElm.onload = imgElm.onerror = null;
  399. if (editor.selection) {
  400. editor.selection.select(imgElm);
  401. editor.nodeChanged();
  402. }
  403. };
  404. imgElm.onload = () => {
  405. if (!data.width && !data.height && hasDimensions(editor)) {
  406. editor.dom.setAttribs(imgElm, {
  407. width: String(imgElm.clientWidth),
  408. height: String(imgElm.clientHeight)
  409. });
  410. }
  411. selectImage();
  412. };
  413. imgElm.onerror = selectImage;
  414. };
  415. const blobToDataUri = blob => new Promise((resolve, reject) => {
  416. const reader = new FileReader();
  417. reader.onload = () => {
  418. resolve(reader.result);
  419. };
  420. reader.onerror = () => {
  421. reject(reader.error.message);
  422. };
  423. reader.readAsDataURL(blob);
  424. });
  425. const isPlaceholderImage = imgElm => imgElm.nodeName === 'IMG' && (imgElm.hasAttribute('data-mce-object') || imgElm.hasAttribute('data-mce-placeholder'));
  426. const isSafeImageUrl = (editor, src) => {
  427. const getOption = editor.options.get;
  428. return global$2.isDomSafe(src, 'img', {
  429. allow_html_data_urls: getOption('allow_html_data_urls'),
  430. allow_script_urls: getOption('allow_script_urls'),
  431. allow_svg_data_urls: getOption('allow_svg_data_urls')
  432. });
  433. };
  434. const DOM = global$3.DOM;
  435. const getHspace = image => {
  436. if (image.style.marginLeft && image.style.marginRight && image.style.marginLeft === image.style.marginRight) {
  437. return removePixelSuffix(image.style.marginLeft);
  438. } else {
  439. return '';
  440. }
  441. };
  442. const getVspace = image => {
  443. if (image.style.marginTop && image.style.marginBottom && image.style.marginTop === image.style.marginBottom) {
  444. return removePixelSuffix(image.style.marginTop);
  445. } else {
  446. return '';
  447. }
  448. };
  449. const getBorder = image => {
  450. if (image.style.borderWidth) {
  451. return removePixelSuffix(image.style.borderWidth);
  452. } else {
  453. return '';
  454. }
  455. };
  456. const getAttrib = (image, name) => {
  457. if (image.hasAttribute(name)) {
  458. return image.getAttribute(name);
  459. } else {
  460. return '';
  461. }
  462. };
  463. const getStyle = (image, name) => image.style[name] ? image.style[name] : '';
  464. const hasCaption = image => image.parentNode !== null && image.parentNode.nodeName === 'FIGURE';
  465. const updateAttrib = (image, name, value) => {
  466. if (value === '') {
  467. image.removeAttribute(name);
  468. } else {
  469. image.setAttribute(name, value);
  470. }
  471. };
  472. const wrapInFigure = image => {
  473. const figureElm = DOM.create('figure', { class: 'image' });
  474. DOM.insertAfter(figureElm, image);
  475. figureElm.appendChild(image);
  476. figureElm.appendChild(DOM.create('figcaption', { contentEditable: 'true' }, 'Caption'));
  477. figureElm.contentEditable = 'false';
  478. };
  479. const removeFigure = image => {
  480. const figureElm = image.parentNode;
  481. DOM.insertAfter(image, figureElm);
  482. DOM.remove(figureElm);
  483. };
  484. const toggleCaption = image => {
  485. if (hasCaption(image)) {
  486. removeFigure(image);
  487. } else {
  488. wrapInFigure(image);
  489. }
  490. };
  491. const normalizeStyle = (image, normalizeCss) => {
  492. const attrValue = image.getAttribute('style');
  493. const value = normalizeCss(attrValue !== null ? attrValue : '');
  494. if (value.length > 0) {
  495. image.setAttribute('style', value);
  496. image.setAttribute('data-mce-style', value);
  497. } else {
  498. image.removeAttribute('style');
  499. }
  500. };
  501. const setSize = (name, normalizeCss) => (image, name, value) => {
  502. if (image.style[name]) {
  503. image.style[name] = addPixelSuffix(value);
  504. normalizeStyle(image, normalizeCss);
  505. } else {
  506. updateAttrib(image, name, value);
  507. }
  508. };
  509. const getSize = (image, name) => {
  510. if (image.style[name]) {
  511. return removePixelSuffix(image.style[name]);
  512. } else {
  513. return getAttrib(image, name);
  514. }
  515. };
  516. const setHspace = (image, value) => {
  517. const pxValue = addPixelSuffix(value);
  518. image.style.marginLeft = pxValue;
  519. image.style.marginRight = pxValue;
  520. };
  521. const setVspace = (image, value) => {
  522. const pxValue = addPixelSuffix(value);
  523. image.style.marginTop = pxValue;
  524. image.style.marginBottom = pxValue;
  525. };
  526. const setBorder = (image, value) => {
  527. const pxValue = addPixelSuffix(value);
  528. image.style.borderWidth = pxValue;
  529. };
  530. const setBorderStyle = (image, value) => {
  531. image.style.borderStyle = value;
  532. };
  533. const getBorderStyle = image => getStyle(image, 'borderStyle');
  534. const isFigure = elm => elm.nodeName === 'FIGURE';
  535. const isImage = elm => elm.nodeName === 'IMG';
  536. const getIsDecorative = image => DOM.getAttrib(image, 'alt').length === 0 && DOM.getAttrib(image, 'role') === 'presentation';
  537. const getAlt = image => {
  538. if (getIsDecorative(image)) {
  539. return '';
  540. } else {
  541. return getAttrib(image, 'alt');
  542. }
  543. };
  544. const defaultData = () => ({
  545. src: '',
  546. alt: '',
  547. title: '',
  548. width: '',
  549. height: '',
  550. class: '',
  551. style: '',
  552. caption: false,
  553. hspace: '',
  554. vspace: '',
  555. border: '',
  556. borderStyle: '',
  557. isDecorative: false
  558. });
  559. const getStyleValue = (normalizeCss, data) => {
  560. const image = document.createElement('img');
  561. updateAttrib(image, 'style', data.style);
  562. if (getHspace(image) || data.hspace !== '') {
  563. setHspace(image, data.hspace);
  564. }
  565. if (getVspace(image) || data.vspace !== '') {
  566. setVspace(image, data.vspace);
  567. }
  568. if (getBorder(image) || data.border !== '') {
  569. setBorder(image, data.border);
  570. }
  571. if (getBorderStyle(image) || data.borderStyle !== '') {
  572. setBorderStyle(image, data.borderStyle);
  573. }
  574. return normalizeCss(image.getAttribute('style'));
  575. };
  576. const create = (normalizeCss, data) => {
  577. const image = document.createElement('img');
  578. write(normalizeCss, {
  579. ...data,
  580. caption: false
  581. }, image);
  582. setAlt(image, data.alt, data.isDecorative);
  583. if (data.caption) {
  584. const figure = DOM.create('figure', { class: 'image' });
  585. figure.appendChild(image);
  586. figure.appendChild(DOM.create('figcaption', { contentEditable: 'true' }, 'Caption'));
  587. figure.contentEditable = 'false';
  588. return figure;
  589. } else {
  590. return image;
  591. }
  592. };
  593. const read = (normalizeCss, image) => ({
  594. src: getAttrib(image, 'src'),
  595. alt: getAlt(image),
  596. title: getAttrib(image, 'title'),
  597. width: getSize(image, 'width'),
  598. height: getSize(image, 'height'),
  599. class: getAttrib(image, 'class'),
  600. style: normalizeCss(getAttrib(image, 'style')),
  601. caption: hasCaption(image),
  602. hspace: getHspace(image),
  603. vspace: getVspace(image),
  604. border: getBorder(image),
  605. borderStyle: getStyle(image, 'borderStyle'),
  606. isDecorative: getIsDecorative(image)
  607. });
  608. const updateProp = (image, oldData, newData, name, set) => {
  609. if (newData[name] !== oldData[name]) {
  610. set(image, name, newData[name]);
  611. }
  612. };
  613. const setAlt = (image, alt, isDecorative) => {
  614. if (isDecorative) {
  615. DOM.setAttrib(image, 'role', 'presentation');
  616. const sugarImage = SugarElement.fromDom(image);
  617. set(sugarImage, 'alt', '');
  618. } else {
  619. if (isNull(alt)) {
  620. const sugarImage = SugarElement.fromDom(image);
  621. remove(sugarImage, 'alt');
  622. } else {
  623. const sugarImage = SugarElement.fromDom(image);
  624. set(sugarImage, 'alt', alt);
  625. }
  626. if (DOM.getAttrib(image, 'role') === 'presentation') {
  627. DOM.setAttrib(image, 'role', '');
  628. }
  629. }
  630. };
  631. const updateAlt = (image, oldData, newData) => {
  632. if (newData.alt !== oldData.alt || newData.isDecorative !== oldData.isDecorative) {
  633. setAlt(image, newData.alt, newData.isDecorative);
  634. }
  635. };
  636. const normalized = (set, normalizeCss) => (image, name, value) => {
  637. set(image, value);
  638. normalizeStyle(image, normalizeCss);
  639. };
  640. const write = (normalizeCss, newData, image) => {
  641. const oldData = read(normalizeCss, image);
  642. updateProp(image, oldData, newData, 'caption', (image, _name, _value) => toggleCaption(image));
  643. updateProp(image, oldData, newData, 'src', updateAttrib);
  644. updateProp(image, oldData, newData, 'title', updateAttrib);
  645. updateProp(image, oldData, newData, 'width', setSize('width', normalizeCss));
  646. updateProp(image, oldData, newData, 'height', setSize('height', normalizeCss));
  647. updateProp(image, oldData, newData, 'class', updateAttrib);
  648. updateProp(image, oldData, newData, 'style', normalized((image, value) => updateAttrib(image, 'style', value), normalizeCss));
  649. updateProp(image, oldData, newData, 'hspace', normalized(setHspace, normalizeCss));
  650. updateProp(image, oldData, newData, 'vspace', normalized(setVspace, normalizeCss));
  651. updateProp(image, oldData, newData, 'border', normalized(setBorder, normalizeCss));
  652. updateProp(image, oldData, newData, 'borderStyle', normalized(setBorderStyle, normalizeCss));
  653. updateAlt(image, oldData, newData);
  654. };
  655. const normalizeCss$1 = (editor, cssText) => {
  656. const css = editor.dom.styles.parse(cssText);
  657. const mergedCss = mergeMargins(css);
  658. const compressed = editor.dom.styles.parse(editor.dom.styles.serialize(mergedCss));
  659. return editor.dom.styles.serialize(compressed);
  660. };
  661. const getSelectedImage = editor => {
  662. const imgElm = editor.selection.getNode();
  663. const figureElm = editor.dom.getParent(imgElm, 'figure.image');
  664. if (figureElm) {
  665. return editor.dom.select('img', figureElm)[0];
  666. }
  667. if (imgElm && (imgElm.nodeName !== 'IMG' || isPlaceholderImage(imgElm))) {
  668. return null;
  669. }
  670. return imgElm;
  671. };
  672. const splitTextBlock = (editor, figure) => {
  673. const dom = editor.dom;
  674. const textBlockElements = filter(editor.schema.getTextBlockElements(), (_, parentElm) => !editor.schema.isValidChild(parentElm, 'figure'));
  675. const textBlock = dom.getParent(figure.parentNode, node => hasNonNullableKey(textBlockElements, node.nodeName), editor.getBody());
  676. if (textBlock) {
  677. return dom.split(textBlock, figure);
  678. } else {
  679. return figure;
  680. }
  681. };
  682. const readImageDataFromSelection = editor => {
  683. const image = getSelectedImage(editor);
  684. return image ? read(css => normalizeCss$1(editor, css), image) : defaultData();
  685. };
  686. const insertImageAtCaret = (editor, data) => {
  687. const elm = create(css => normalizeCss$1(editor, css), data);
  688. editor.dom.setAttrib(elm, 'data-mce-id', '__mcenew');
  689. editor.focus();
  690. editor.selection.setContent(elm.outerHTML);
  691. const insertedElm = editor.dom.select('*[data-mce-id="__mcenew"]')[0];
  692. editor.dom.setAttrib(insertedElm, 'data-mce-id', null);
  693. if (isFigure(insertedElm)) {
  694. const figure = splitTextBlock(editor, insertedElm);
  695. editor.selection.select(figure);
  696. } else {
  697. editor.selection.select(insertedElm);
  698. }
  699. };
  700. const syncSrcAttr = (editor, image) => {
  701. editor.dom.setAttrib(image, 'src', image.getAttribute('src'));
  702. };
  703. const deleteImage = (editor, image) => {
  704. if (image) {
  705. const elm = editor.dom.is(image.parentNode, 'figure.image') ? image.parentNode : image;
  706. editor.dom.remove(elm);
  707. editor.focus();
  708. editor.nodeChanged();
  709. if (editor.dom.isEmpty(editor.getBody())) {
  710. editor.setContent('');
  711. editor.selection.setCursorLocation();
  712. }
  713. }
  714. };
  715. const writeImageDataToSelection = (editor, data) => {
  716. const image = getSelectedImage(editor);
  717. write(css => normalizeCss$1(editor, css), data, image);
  718. syncSrcAttr(editor, image);
  719. if (isFigure(image.parentNode)) {
  720. const figure = image.parentNode;
  721. splitTextBlock(editor, figure);
  722. editor.selection.select(image.parentNode);
  723. } else {
  724. editor.selection.select(image);
  725. waitLoadImage(editor, data, image);
  726. }
  727. };
  728. const sanitizeImageData = (editor, data) => {
  729. const src = data.src;
  730. return {
  731. ...data,
  732. src: isSafeImageUrl(editor, src) ? src : ''
  733. };
  734. };
  735. const insertOrUpdateImage = (editor, partialData) => {
  736. const image = getSelectedImage(editor);
  737. if (image) {
  738. const selectedImageData = read(css => normalizeCss$1(editor, css), image);
  739. const data = {
  740. ...selectedImageData,
  741. ...partialData
  742. };
  743. const sanitizedData = sanitizeImageData(editor, data);
  744. if (data.src) {
  745. writeImageDataToSelection(editor, sanitizedData);
  746. } else {
  747. deleteImage(editor, image);
  748. }
  749. } else if (partialData.src) {
  750. insertImageAtCaret(editor, {
  751. ...defaultData(),
  752. ...partialData
  753. });
  754. }
  755. };
  756. const deep = (old, nu) => {
  757. const bothObjects = isPlainObject(old) && isPlainObject(nu);
  758. return bothObjects ? deepMerge(old, nu) : nu;
  759. };
  760. const baseMerge = merger => {
  761. return (...objects) => {
  762. if (objects.length === 0) {
  763. throw new Error(`Can't merge zero objects`);
  764. }
  765. const ret = {};
  766. for (let j = 0; j < objects.length; j++) {
  767. const curObject = objects[j];
  768. for (const key in curObject) {
  769. if (has(curObject, key)) {
  770. ret[key] = merger(ret[key], curObject[key]);
  771. }
  772. }
  773. }
  774. return ret;
  775. };
  776. };
  777. const deepMerge = baseMerge(deep);
  778. var global$1 = tinymce.util.Tools.resolve('tinymce.util.ImageUploader');
  779. var global = tinymce.util.Tools.resolve('tinymce.util.Tools');
  780. const getValue = item => isString(item.value) ? item.value : '';
  781. const getText = item => {
  782. if (isString(item.text)) {
  783. return item.text;
  784. } else if (isString(item.title)) {
  785. return item.title;
  786. } else {
  787. return '';
  788. }
  789. };
  790. const sanitizeList = (list, extractValue) => {
  791. const out = [];
  792. global.each(list, item => {
  793. const text = getText(item);
  794. if (item.menu !== undefined) {
  795. const items = sanitizeList(item.menu, extractValue);
  796. out.push({
  797. text,
  798. items
  799. });
  800. } else {
  801. const value = extractValue(item);
  802. out.push({
  803. text,
  804. value
  805. });
  806. }
  807. });
  808. return out;
  809. };
  810. const sanitizer = (extractor = getValue) => list => {
  811. if (list) {
  812. return Optional.from(list).map(list => sanitizeList(list, extractor));
  813. } else {
  814. return Optional.none();
  815. }
  816. };
  817. const sanitize = list => sanitizer(getValue)(list);
  818. const isGroup = item => has(item, 'items');
  819. const findEntryDelegate = (list, value) => findMap(list, item => {
  820. if (isGroup(item)) {
  821. return findEntryDelegate(item.items, value);
  822. } else if (item.value === value) {
  823. return Optional.some(item);
  824. } else {
  825. return Optional.none();
  826. }
  827. });
  828. const findEntry = (optList, value) => optList.bind(list => findEntryDelegate(list, value));
  829. const ListUtils = {
  830. sanitizer,
  831. sanitize,
  832. findEntry
  833. };
  834. const makeTab$2 = _info => ({
  835. title: 'Advanced',
  836. name: 'advanced',
  837. items: [{
  838. type: 'grid',
  839. columns: 2,
  840. items: [
  841. {
  842. type: 'input',
  843. label: 'Vertical space',
  844. name: 'vspace',
  845. inputMode: 'numeric'
  846. },
  847. {
  848. type: 'input',
  849. label: 'Horizontal space',
  850. name: 'hspace',
  851. inputMode: 'numeric'
  852. },
  853. {
  854. type: 'input',
  855. label: 'Border width',
  856. name: 'border',
  857. inputMode: 'numeric'
  858. },
  859. {
  860. type: 'listbox',
  861. name: 'borderstyle',
  862. label: 'Border style',
  863. items: [
  864. {
  865. text: 'Select...',
  866. value: ''
  867. },
  868. {
  869. text: 'Solid',
  870. value: 'solid'
  871. },
  872. {
  873. text: 'Dotted',
  874. value: 'dotted'
  875. },
  876. {
  877. text: 'Dashed',
  878. value: 'dashed'
  879. },
  880. {
  881. text: 'Double',
  882. value: 'double'
  883. },
  884. {
  885. text: 'Groove',
  886. value: 'groove'
  887. },
  888. {
  889. text: 'Ridge',
  890. value: 'ridge'
  891. },
  892. {
  893. text: 'Inset',
  894. value: 'inset'
  895. },
  896. {
  897. text: 'Outset',
  898. value: 'outset'
  899. },
  900. {
  901. text: 'None',
  902. value: 'none'
  903. },
  904. {
  905. text: 'Hidden',
  906. value: 'hidden'
  907. }
  908. ]
  909. }
  910. ]
  911. }]
  912. });
  913. const AdvTab = { makeTab: makeTab$2 };
  914. const collect = editor => {
  915. const urlListSanitizer = ListUtils.sanitizer(item => editor.convertURL(item.value || item.url, 'src'));
  916. const futureImageList = new Promise(completer => {
  917. createImageList(editor, imageList => {
  918. completer(urlListSanitizer(imageList).map(items => flatten([
  919. [{
  920. text: 'None',
  921. value: ''
  922. }],
  923. items
  924. ])));
  925. });
  926. });
  927. const classList = ListUtils.sanitize(getClassList(editor));
  928. const hasAdvTab$1 = hasAdvTab(editor);
  929. const hasUploadTab$1 = hasUploadTab(editor);
  930. const hasUploadUrl$1 = hasUploadUrl(editor);
  931. const hasUploadHandler$1 = hasUploadHandler(editor);
  932. const image = readImageDataFromSelection(editor);
  933. const hasDescription$1 = hasDescription(editor);
  934. const hasImageTitle$1 = hasImageTitle(editor);
  935. const hasDimensions$1 = hasDimensions(editor);
  936. const hasImageCaption$1 = hasImageCaption(editor);
  937. const hasAccessibilityOptions = showAccessibilityOptions(editor);
  938. const automaticUploads = isAutomaticUploadsEnabled(editor);
  939. const prependURL = Optional.some(getPrependUrl(editor)).filter(preUrl => isString(preUrl) && preUrl.length > 0);
  940. return futureImageList.then(imageList => ({
  941. image,
  942. imageList,
  943. classList,
  944. hasAdvTab: hasAdvTab$1,
  945. hasUploadTab: hasUploadTab$1,
  946. hasUploadUrl: hasUploadUrl$1,
  947. hasUploadHandler: hasUploadHandler$1,
  948. hasDescription: hasDescription$1,
  949. hasImageTitle: hasImageTitle$1,
  950. hasDimensions: hasDimensions$1,
  951. hasImageCaption: hasImageCaption$1,
  952. prependURL,
  953. hasAccessibilityOptions,
  954. automaticUploads
  955. }));
  956. };
  957. const makeItems = info => {
  958. const imageUrl = {
  959. name: 'src',
  960. type: 'urlinput',
  961. filetype: 'image',
  962. label: 'Source'
  963. };
  964. const imageList = info.imageList.map(items => ({
  965. name: 'images',
  966. type: 'listbox',
  967. label: 'Image list',
  968. items
  969. }));
  970. const imageDescription = {
  971. name: 'alt',
  972. type: 'input',
  973. label: 'Alternative description',
  974. enabled: !(info.hasAccessibilityOptions && info.image.isDecorative)
  975. };
  976. const imageTitle = {
  977. name: 'title',
  978. type: 'input',
  979. label: 'Image title'
  980. };
  981. const imageDimensions = {
  982. name: 'dimensions',
  983. type: 'sizeinput'
  984. };
  985. const isDecorative = {
  986. type: 'label',
  987. label: 'Accessibility',
  988. items: [{
  989. name: 'isDecorative',
  990. type: 'checkbox',
  991. label: 'Image is decorative'
  992. }]
  993. };
  994. const classList = info.classList.map(items => ({
  995. name: 'classes',
  996. type: 'listbox',
  997. label: 'Class',
  998. items
  999. }));
  1000. const caption = {
  1001. type: 'label',
  1002. label: 'Caption',
  1003. items: [{
  1004. type: 'checkbox',
  1005. name: 'caption',
  1006. label: 'Show caption'
  1007. }]
  1008. };
  1009. const getDialogContainerType = useColumns => useColumns ? {
  1010. type: 'grid',
  1011. columns: 2
  1012. } : { type: 'panel' };
  1013. return flatten([
  1014. [imageUrl],
  1015. imageList.toArray(),
  1016. info.hasAccessibilityOptions && info.hasDescription ? [isDecorative] : [],
  1017. info.hasDescription ? [imageDescription] : [],
  1018. info.hasImageTitle ? [imageTitle] : [],
  1019. info.hasDimensions ? [imageDimensions] : [],
  1020. [{
  1021. ...getDialogContainerType(info.classList.isSome() && info.hasImageCaption),
  1022. items: flatten([
  1023. classList.toArray(),
  1024. info.hasImageCaption ? [caption] : []
  1025. ])
  1026. }]
  1027. ]);
  1028. };
  1029. const makeTab$1 = info => ({
  1030. title: 'General',
  1031. name: 'general',
  1032. items: makeItems(info)
  1033. });
  1034. const MainTab = {
  1035. makeTab: makeTab$1,
  1036. makeItems
  1037. };
  1038. const makeTab = _info => {
  1039. const items = [{
  1040. type: 'dropzone',
  1041. name: 'fileinput'
  1042. }];
  1043. return {
  1044. title: 'Upload',
  1045. name: 'upload',
  1046. items
  1047. };
  1048. };
  1049. const UploadTab = { makeTab };
  1050. const createState = info => ({
  1051. prevImage: ListUtils.findEntry(info.imageList, info.image.src),
  1052. prevAlt: info.image.alt,
  1053. open: true
  1054. });
  1055. const fromImageData = image => ({
  1056. src: {
  1057. value: image.src,
  1058. meta: {}
  1059. },
  1060. images: image.src,
  1061. alt: image.alt,
  1062. title: image.title,
  1063. dimensions: {
  1064. width: image.width,
  1065. height: image.height
  1066. },
  1067. classes: image.class,
  1068. caption: image.caption,
  1069. style: image.style,
  1070. vspace: image.vspace,
  1071. border: image.border,
  1072. hspace: image.hspace,
  1073. borderstyle: image.borderStyle,
  1074. fileinput: [],
  1075. isDecorative: image.isDecorative
  1076. });
  1077. const toImageData = (data, removeEmptyAlt) => ({
  1078. src: data.src.value,
  1079. alt: data.alt.length === 0 && removeEmptyAlt ? null : data.alt,
  1080. title: data.title,
  1081. width: data.dimensions.width,
  1082. height: data.dimensions.height,
  1083. class: data.classes,
  1084. style: data.style,
  1085. caption: data.caption,
  1086. hspace: data.hspace,
  1087. vspace: data.vspace,
  1088. border: data.border,
  1089. borderStyle: data.borderstyle,
  1090. isDecorative: data.isDecorative
  1091. });
  1092. const addPrependUrl2 = (info, srcURL) => {
  1093. if (!/^(?:[a-zA-Z]+:)?\/\//.test(srcURL)) {
  1094. return info.prependURL.bind(prependUrl => {
  1095. if (srcURL.substring(0, prependUrl.length) !== prependUrl) {
  1096. return Optional.some(prependUrl + srcURL);
  1097. }
  1098. return Optional.none();
  1099. });
  1100. }
  1101. return Optional.none();
  1102. };
  1103. const addPrependUrl = (info, api) => {
  1104. const data = api.getData();
  1105. addPrependUrl2(info, data.src.value).each(srcURL => {
  1106. api.setData({
  1107. src: {
  1108. value: srcURL,
  1109. meta: data.src.meta
  1110. }
  1111. });
  1112. });
  1113. };
  1114. const formFillFromMeta2 = (info, data, meta) => {
  1115. if (info.hasDescription && isString(meta.alt)) {
  1116. data.alt = meta.alt;
  1117. }
  1118. if (info.hasAccessibilityOptions) {
  1119. data.isDecorative = meta.isDecorative || data.isDecorative || false;
  1120. }
  1121. if (info.hasImageTitle && isString(meta.title)) {
  1122. data.title = meta.title;
  1123. }
  1124. if (info.hasDimensions) {
  1125. if (isString(meta.width)) {
  1126. data.dimensions.width = meta.width;
  1127. }
  1128. if (isString(meta.height)) {
  1129. data.dimensions.height = meta.height;
  1130. }
  1131. }
  1132. if (isString(meta.class)) {
  1133. ListUtils.findEntry(info.classList, meta.class).each(entry => {
  1134. data.classes = entry.value;
  1135. });
  1136. }
  1137. if (info.hasImageCaption) {
  1138. if (isBoolean(meta.caption)) {
  1139. data.caption = meta.caption;
  1140. }
  1141. }
  1142. if (info.hasAdvTab) {
  1143. if (isString(meta.style)) {
  1144. data.style = meta.style;
  1145. }
  1146. if (isString(meta.vspace)) {
  1147. data.vspace = meta.vspace;
  1148. }
  1149. if (isString(meta.border)) {
  1150. data.border = meta.border;
  1151. }
  1152. if (isString(meta.hspace)) {
  1153. data.hspace = meta.hspace;
  1154. }
  1155. if (isString(meta.borderstyle)) {
  1156. data.borderstyle = meta.borderstyle;
  1157. }
  1158. }
  1159. };
  1160. const formFillFromMeta = (info, api) => {
  1161. const data = api.getData();
  1162. const meta = data.src.meta;
  1163. if (meta !== undefined) {
  1164. const newData = deepMerge({}, data);
  1165. formFillFromMeta2(info, newData, meta);
  1166. api.setData(newData);
  1167. }
  1168. };
  1169. const calculateImageSize = (helpers, info, state, api) => {
  1170. const data = api.getData();
  1171. const url = data.src.value;
  1172. const meta = data.src.meta || {};
  1173. if (!meta.width && !meta.height && info.hasDimensions) {
  1174. if (isNotEmpty(url)) {
  1175. helpers.imageSize(url).then(size => {
  1176. if (state.open) {
  1177. api.setData({ dimensions: size });
  1178. }
  1179. }).catch(e => console.error(e));
  1180. } else {
  1181. api.setData({
  1182. dimensions: {
  1183. width: '',
  1184. height: ''
  1185. }
  1186. });
  1187. }
  1188. }
  1189. };
  1190. const updateImagesDropdown = (info, state, api) => {
  1191. const data = api.getData();
  1192. const image = ListUtils.findEntry(info.imageList, data.src.value);
  1193. state.prevImage = image;
  1194. api.setData({ images: image.map(entry => entry.value).getOr('') });
  1195. };
  1196. const changeSrc = (helpers, info, state, api) => {
  1197. addPrependUrl(info, api);
  1198. formFillFromMeta(info, api);
  1199. calculateImageSize(helpers, info, state, api);
  1200. updateImagesDropdown(info, state, api);
  1201. };
  1202. const changeImages = (helpers, info, state, api) => {
  1203. const data = api.getData();
  1204. const image = ListUtils.findEntry(info.imageList, data.images);
  1205. image.each(img => {
  1206. const updateAlt = data.alt === '' || state.prevImage.map(image => image.text === data.alt).getOr(false);
  1207. if (updateAlt) {
  1208. if (img.value === '') {
  1209. api.setData({
  1210. src: img,
  1211. alt: state.prevAlt
  1212. });
  1213. } else {
  1214. api.setData({
  1215. src: img,
  1216. alt: img.text
  1217. });
  1218. }
  1219. } else {
  1220. api.setData({ src: img });
  1221. }
  1222. });
  1223. state.prevImage = image;
  1224. changeSrc(helpers, info, state, api);
  1225. };
  1226. const changeFileInput = (helpers, info, state, api) => {
  1227. const data = api.getData();
  1228. api.block('Uploading image');
  1229. head(data.fileinput).fold(() => {
  1230. api.unblock();
  1231. }, file => {
  1232. const blobUri = URL.createObjectURL(file);
  1233. const finalize = () => {
  1234. api.unblock();
  1235. URL.revokeObjectURL(blobUri);
  1236. };
  1237. const updateSrcAndSwitchTab = url => {
  1238. api.setData({
  1239. src: {
  1240. value: url,
  1241. meta: {}
  1242. }
  1243. });
  1244. api.showTab('general');
  1245. changeSrc(helpers, info, state, api);
  1246. };
  1247. blobToDataUri(file).then(dataUrl => {
  1248. const blobInfo = helpers.createBlobCache(file, blobUri, dataUrl);
  1249. if (info.automaticUploads) {
  1250. helpers.uploadImage(blobInfo).then(result => {
  1251. updateSrcAndSwitchTab(result.url);
  1252. finalize();
  1253. }).catch(err => {
  1254. finalize();
  1255. helpers.alertErr(err);
  1256. });
  1257. } else {
  1258. helpers.addToBlobCache(blobInfo);
  1259. updateSrcAndSwitchTab(blobInfo.blobUri());
  1260. api.unblock();
  1261. }
  1262. });
  1263. });
  1264. };
  1265. const changeHandler = (helpers, info, state) => (api, evt) => {
  1266. if (evt.name === 'src') {
  1267. changeSrc(helpers, info, state, api);
  1268. } else if (evt.name === 'images') {
  1269. changeImages(helpers, info, state, api);
  1270. } else if (evt.name === 'alt') {
  1271. state.prevAlt = api.getData().alt;
  1272. } else if (evt.name === 'fileinput') {
  1273. changeFileInput(helpers, info, state, api);
  1274. } else if (evt.name === 'isDecorative') {
  1275. api.setEnabled('alt', !api.getData().isDecorative);
  1276. }
  1277. };
  1278. const closeHandler = state => () => {
  1279. state.open = false;
  1280. };
  1281. const makeDialogBody = info => {
  1282. if (info.hasAdvTab || info.hasUploadUrl || info.hasUploadHandler) {
  1283. const tabPanel = {
  1284. type: 'tabpanel',
  1285. tabs: flatten([
  1286. [MainTab.makeTab(info)],
  1287. info.hasAdvTab ? [AdvTab.makeTab(info)] : [],
  1288. info.hasUploadTab && (info.hasUploadUrl || info.hasUploadHandler) ? [UploadTab.makeTab(info)] : []
  1289. ])
  1290. };
  1291. return tabPanel;
  1292. } else {
  1293. const panel = {
  1294. type: 'panel',
  1295. items: MainTab.makeItems(info)
  1296. };
  1297. return panel;
  1298. }
  1299. };
  1300. const submitHandler = (editor, info, helpers) => api => {
  1301. const data = deepMerge(fromImageData(info.image), api.getData());
  1302. const finalData = {
  1303. ...data,
  1304. style: getStyleValue(helpers.normalizeCss, toImageData(data, false))
  1305. };
  1306. editor.execCommand('mceUpdateImage', false, toImageData(finalData, info.hasAccessibilityOptions));
  1307. editor.editorUpload.uploadImagesAuto();
  1308. api.close();
  1309. };
  1310. const imageSize = editor => url => {
  1311. if (!isSafeImageUrl(editor, url)) {
  1312. return Promise.resolve({
  1313. width: '',
  1314. height: ''
  1315. });
  1316. } else {
  1317. return getImageSize(editor.documentBaseURI.toAbsolute(url)).then(dimensions => ({
  1318. width: String(dimensions.width),
  1319. height: String(dimensions.height)
  1320. }));
  1321. }
  1322. };
  1323. const createBlobCache = editor => (file, blobUri, dataUrl) => editor.editorUpload.blobCache.create({
  1324. blob: file,
  1325. blobUri,
  1326. name: file.name ? file.name.replace(/\.[^\.]+$/, '') : null,
  1327. filename: file.name,
  1328. base64: dataUrl.split(',')[1]
  1329. });
  1330. const addToBlobCache = editor => blobInfo => {
  1331. editor.editorUpload.blobCache.add(blobInfo);
  1332. };
  1333. const alertErr = editor => message => {
  1334. editor.windowManager.alert(message);
  1335. };
  1336. const normalizeCss = editor => cssText => normalizeCss$1(editor, cssText);
  1337. const parseStyle = editor => cssText => editor.dom.parseStyle(cssText);
  1338. const serializeStyle = editor => (stylesArg, name) => editor.dom.serializeStyle(stylesArg, name);
  1339. const uploadImage = editor => blobInfo => global$1(editor).upload([blobInfo], false).then(results => {
  1340. if (results.length === 0) {
  1341. return Promise.reject('Failed to upload image');
  1342. } else if (results[0].status === false) {
  1343. return Promise.reject(results[0].error.message);
  1344. } else {
  1345. return results[0];
  1346. }
  1347. });
  1348. const Dialog = editor => {
  1349. const helpers = {
  1350. imageSize: imageSize(editor),
  1351. addToBlobCache: addToBlobCache(editor),
  1352. createBlobCache: createBlobCache(editor),
  1353. alertErr: alertErr(editor),
  1354. normalizeCss: normalizeCss(editor),
  1355. parseStyle: parseStyle(editor),
  1356. serializeStyle: serializeStyle(editor),
  1357. uploadImage: uploadImage(editor)
  1358. };
  1359. const open = () => {
  1360. collect(editor).then(info => {
  1361. const state = createState(info);
  1362. return {
  1363. title: 'Insert/Edit Image',
  1364. size: 'normal',
  1365. body: makeDialogBody(info),
  1366. buttons: [
  1367. {
  1368. type: 'cancel',
  1369. name: 'cancel',
  1370. text: 'Cancel'
  1371. },
  1372. {
  1373. type: 'submit',
  1374. name: 'save',
  1375. text: 'Save',
  1376. primary: true
  1377. }
  1378. ],
  1379. initialData: fromImageData(info.image),
  1380. onSubmit: submitHandler(editor, info, helpers),
  1381. onChange: changeHandler(helpers, info, state),
  1382. onClose: closeHandler(state)
  1383. };
  1384. }).then(editor.windowManager.open);
  1385. };
  1386. return { open };
  1387. };
  1388. const register$1 = editor => {
  1389. editor.addCommand('mceImage', Dialog(editor).open);
  1390. editor.addCommand('mceUpdateImage', (_ui, data) => {
  1391. editor.undoManager.transact(() => insertOrUpdateImage(editor, data));
  1392. });
  1393. };
  1394. const hasImageClass = node => {
  1395. const className = node.attr('class');
  1396. return className && /\bimage\b/.test(className);
  1397. };
  1398. const toggleContentEditableState = state => nodes => {
  1399. let i = nodes.length;
  1400. const toggleContentEditable = node => {
  1401. node.attr('contenteditable', state ? 'true' : null);
  1402. };
  1403. while (i--) {
  1404. const node = nodes[i];
  1405. if (hasImageClass(node)) {
  1406. node.attr('contenteditable', state ? 'false' : null);
  1407. global.each(node.getAll('figcaption'), toggleContentEditable);
  1408. }
  1409. }
  1410. };
  1411. const setup = editor => {
  1412. editor.on('PreInit', () => {
  1413. editor.parser.addNodeFilter('figure', toggleContentEditableState(true));
  1414. editor.serializer.addNodeFilter('figure', toggleContentEditableState(false));
  1415. });
  1416. };
  1417. const register = editor => {
  1418. editor.ui.registry.addToggleButton('image', {
  1419. icon: 'image',
  1420. tooltip: 'Insert/edit image',
  1421. onAction: Dialog(editor).open,
  1422. onSetup: buttonApi => {
  1423. buttonApi.setActive(isNonNullable(getSelectedImage(editor)));
  1424. return editor.selection.selectorChangedWithUnbind('img:not([data-mce-object]):not([data-mce-placeholder]),figure.image', buttonApi.setActive).unbind;
  1425. }
  1426. });
  1427. editor.ui.registry.addMenuItem('image', {
  1428. icon: 'image',
  1429. text: 'Image...',
  1430. onAction: Dialog(editor).open
  1431. });
  1432. editor.ui.registry.addContextMenu('image', { update: element => isFigure(element) || isImage(element) && !isPlaceholderImage(element) ? ['image'] : [] });
  1433. };
  1434. var Plugin = () => {
  1435. global$4.add('image', editor => {
  1436. register$2(editor);
  1437. setup(editor);
  1438. register(editor);
  1439. register$1(editor);
  1440. });
  1441. };
  1442. Plugin();
  1443. })();