opentiny 6.9.0

package/src/plugins/preview/demo/html/demo.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Plugin: preview Demo Page</title>
+  </head>
+
+  <body>
+  <h2>Plugin: preview Demo Page</h2>
+    <div id="ephox-ui">
+      <textarea cols="30" rows="10" class="tinymce">
+
+        <p><img style="display: block; margin-left: auto; margin-right: auto;" src="data:image/png;base64,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" /></p>
+        <p>&nbsp;</p>
+        <h2>The world&rsquo;s first rich text editor in the cloud</h2>
+        <p>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</p>
+        <p>One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tinymce.com/tinydrive/">tinymce.com/tinydrive</a>, where you&rsquo;ll find a working demo and an opportunity to provide feedback to the product team.</p>
+        <h3>An editor for every project</h3>
+        <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
+        <ul>
+        <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
+        <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
+        <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
+        <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
+        <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
+        </ul>
+        <p>&nbsp;</p>
+        <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
+
+      </textarea>
+    </div>
+    <script src="../../../../../js/tinymce/tinymce.js"></script>
+    <script src="../../../../../scratch/demos/plugins/preview/demo.js"></script>
+  </body>
+</html>

package/src/plugins/preview/demo/ts/demo/Demo.ts

@@ -0,0 +1,14 @@
+import { TinyMCE } from 'tinymce/core/api/PublicApi';
+
+declare let tinymce: TinyMCE;
+
+tinymce.init({
+  selector: 'textarea.tinymce',
+  theme: 'silver',
+  skin_url: '../../../../../js/tinymce/skins/ui/oxide',
+  plugins: 'preview code',
+  toolbar: 'preview code',
+  height: 600
+});
+
+export {};

package/src/plugins/preview/main/ts/Main.ts

@@ -0,0 +1,9 @@
+import Plugin from './Plugin';
+
+Plugin();
+
+/** *****
+ * DO NOT EXPORT ANYTHING
+ *
+ * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE
+ *******/

package/src/plugins/preview/main/ts/Plugin.ts

@@ -0,0 +1,11 @@
+import PluginManager from 'tinymce/core/api/PluginManager';
+
+import * as Commands from './api/Commands';
+import * as Buttons from './ui/Buttons';
+
+export default (): void => {
+  PluginManager.add('preview', (editor) => {
+    Commands.register(editor);
+    Buttons.register(editor);
+  });
+};

package/src/plugins/preview/main/ts/api/Commands.ts

@@ -0,0 +1,13 @@
+import Editor from 'tinymce/core/api/Editor';
+
+import { open } from '../ui/Dialog';
+
+const register = (editor: Editor): void => {
+  editor.addCommand('mcePreview', () => {
+    open(editor);
+  });
+};
+
+export {
+  register
+};

package/src/plugins/preview/main/ts/api/Options.ts

@@ -0,0 +1,20 @@
+import Editor from 'tinymce/core/api/Editor';
+import { EditorOptions } from 'tinymce/core/api/OptionTypes';
+
+const option: {
+  <K extends keyof EditorOptions>(name: K): (editor: Editor) => EditorOptions[K];
+  <T>(name: string): (editor: Editor) => T;
+} = (name: string) => (editor: Editor) =>
+  editor.options.get(name);
+
+const getContentStyle = option('content_style');
+const shouldUseContentCssCors = option('content_css_cors');
+const getBodyClass = option('body_class');
+const getBodyId = option('body_id');
+
+export {
+  getContentStyle,
+  shouldUseContentCssCors,
+  getBodyClass,
+  getBodyId
+};

package/src/plugins/preview/main/ts/core/IframeContent.ts

@@ -0,0 +1,62 @@
+import Editor from 'tinymce/core/api/Editor';
+import Env from 'tinymce/core/api/Env';
+import Tools from 'tinymce/core/api/util/Tools';
+
+import * as Options from '../api/Options';
+
+const getPreviewHtml = (editor: Editor): string => {
+  let headHtml = '';
+  const encode = editor.dom.encode;
+  const contentStyle = Options.getContentStyle(editor) ?? '';
+
+  headHtml += '<base href="' + encode(editor.documentBaseURI.getURI()) + '">';
+
+  const cors = Options.shouldUseContentCssCors(editor) ? ' crossorigin="anonymous"' : '';
+  Tools.each(editor.contentCSS, (url) => {
+    headHtml += '<link type="text/css" rel="stylesheet" href="' + encode(editor.documentBaseURI.toAbsolute(url)) + '"' + cors + '>';
+  });
+
+  if (contentStyle) {
+    headHtml += '<style type="text/css">' + contentStyle + '</style>';
+  }
+
+  const bodyId = Options.getBodyId(editor);
+
+  const bodyClass = Options.getBodyClass(editor);
+
+  const isMetaKeyPressed = Env.os.isMacOS() || Env.os.isiOS() ? 'e.metaKey' : 'e.ctrlKey && !e.altKey';
+
+  const preventClicksOnLinksScript = (
+    '<script>' +
+    'document.addEventListener && document.addEventListener("click", function(e) {' +
+    'for (var elm = e.target; elm; elm = elm.parentNode) {' +
+    'if (elm.nodeName === "A" && !(' + isMetaKeyPressed + ')) {' +
+    'e.preventDefault();' +
+    '}' +
+    '}' +
+    '}, false);' +
+    '</script> '
+  );
+
+  const directionality = editor.getBody().dir;
+  const dirAttr = directionality ? ' dir="' + encode(directionality) + '"' : '';
+
+  const previewHtml = (
+    '<!DOCTYPE html>' +
+    '<html>' +
+    '<head>' +
+    headHtml +
+    '</head>' +
+    '<body id="' + encode(bodyId) + '" class="mce-content-body ' + encode(bodyClass) + '"' + dirAttr + '>' +
+    editor.getContent() +
+    preventClicksOnLinksScript +
+    '</body>' +
+    '</html>'
+  );
+
+  return previewHtml;
+};
+
+export {
+  getPreviewHtml
+};

package/src/plugins/preview/main/ts/ui/Buttons.ts

@@ -0,0 +1,21 @@
+import Editor from 'tinymce/core/api/Editor';
+
+const register = (editor: Editor): void => {
+  const onAction = () => editor.execCommand('mcePreview');
+
+  editor.ui.registry.addButton('preview', {
+    icon: 'preview',
+    tooltip: 'Preview',
+    onAction
+  });
+
+  editor.ui.registry.addMenuItem('preview', {
+    icon: 'preview',
+    text: 'Preview',
+    onAction
+  });
+};
+
+export {
+  register
+};

package/src/plugins/preview/main/ts/ui/Dialog.ts

@@ -0,0 +1,39 @@
+import Editor from 'tinymce/core/api/Editor';
+
+import * as IframeContent from '../core/IframeContent';
+
+export const open = (editor: Editor): void => {
+
+  const content = IframeContent.getPreviewHtml(editor);
+
+  const dataApi = editor.windowManager.open({
+    title: 'Preview',
+    size: 'large',
+    body: {
+      type: 'panel',
+      items: [
+        {
+          name: 'preview',
+          type: 'iframe',
+          sandboxed: true,
+          transparent: false
+        }
+      ]
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        name: 'close',
+        text: 'Close',
+        primary: true
+      }
+    ],
+    initialData: {
+      preview: content
+    }
+  });
+
+  // Focus the close button, as by default the first element in the body is selected
+  // which we don't want to happen here since the body only has the iframe content
+  dataApi.focus('close');
+};

package/src/plugins/preview/test/ts/browser/PreviewContentCssTest.ts

@@ -0,0 +1,33 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+import * as IframeContent from 'tinymce/plugins/preview/core/IframeContent';
+import Plugin from 'tinymce/plugins/preview/Plugin';
+
+describe('browser.tinymce.plugins.preview.PreviewContentCssTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'preview',
+    base_url: '/project/tinymce/js/tinymce',
+    content_css: '/project/tinymce/js/tinymce/skins/content/default/content.css'
+  }, [ Plugin ]);
+
+  const assertIframeHtmlContains = (editor: Editor, text: string) => {
+    const actual = IframeContent.getPreviewHtml(editor);
+    const regexp = new RegExp(text);
+
+    assert.match(actual, regexp, 'Should be the same html');
+  };
+
+  it('TBA: Set content, set content_css_cors and assert link elements. Delete setting and assert crossOrigin attr is removed', () => {
+    const editor = hook.editor();
+    const contentCssUrl = editor.documentBaseURI.toAbsolute('/project/tinymce/js/tinymce/skins/content/default/content.css');
+
+    editor.setContent('<p>hello world</p>');
+    editor.options.set('content_css_cors', true);
+    assertIframeHtmlContains(editor, `<link type="text/css" rel="stylesheet" href="${contentCssUrl}" crossorigin="anonymous">`);
+    editor.options.set('content_css_cors', false);
+    assertIframeHtmlContains(editor, `<link type="text/css" rel="stylesheet" href="${contentCssUrl}">`);
+  });
+});

package/src/plugins/preview/test/ts/browser/PreviewContentStyleTest.ts

@@ -0,0 +1,47 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+import * as IframeContent from 'tinymce/plugins/preview/core/IframeContent';
+import Plugin from 'tinymce/plugins/preview/Plugin';
+
+describe('browser.tinymce.plugins.preview.PreviewContentStyleTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'preview',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const assertIframeContains = (editor: Editor, text: string, shouldMatch: boolean) => {
+    const actual = IframeContent.getPreviewHtml(editor);
+    const regexp = new RegExp(text);
+
+    if (shouldMatch) {
+      assert.match(actual, regexp, 'Should be the same html');
+    } else {
+      assert.notMatch(actual, regexp, 'Should not be the same html');
+    }
+  };
+
+  const assertIframeHtmlContains = (editor: Editor, text: string) => assertIframeContains(editor, text, true);
+
+  const assertIframeHtmlNotContains = (editor: Editor, text: string) => assertIframeContains(editor, text, false);
+
+  it('TBA: Set content, set style setting and assert content and style. Delete style and assert style is removed', () => {
+    const editor = hook.editor();
+    editor.setContent('<p>hello world</p>');
+    editor.options.set('content_style', 'p {color: blue;}');
+    assertIframeHtmlContains(editor, '<style type="text/css">p {color: blue;}</style>');
+    editor.options.unset('content_style');
+    assertIframeHtmlNotContains(editor, '<style type="text/css">p {color: blue;}</style>');
+  });
+
+  it('TINY-6529: Set content, set style settings and assert content and styles. content_style should take precedence.', () => {
+    const editor = hook.editor();
+    const contentCssUrl = editor.documentBaseURI.toAbsolute('/project/tinymce/js/tinymce/skins/content/default/content.css');
+    editor.setContent('<p>hello world</p>');
+    editor.options.set('content_css_cors', true);
+    editor.options.set('content_style', 'p {color: blue;}');
+    assertIframeHtmlContains(editor, `<link type="text/css" rel="stylesheet" href="${contentCssUrl}" crossorigin="anonymous"><style type="text/css">p {color: blue;}</style>`);
+  });
+});

package/src/plugins/preview/test/ts/browser/PreviewSanityTest.ts

@@ -0,0 +1,40 @@
+import { Keys, UiFinder, Waiter } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { SugarBody } from '@ephox/sugar';
+import { TinyHooks, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/preview/Plugin';
+
+describe('browser.tinymce.plugins.preview.PreviewSanityTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'preview',
+    toolbar: 'preview',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const dialogSelector = 'div[role="dialog"]';
+  const docBody = SugarBody.body();
+
+  const pOpenDialog = async (editor: Editor) => {
+    TinyUiActions.clickOnToolbar(editor, 'button');
+    await TinyUiActions.pWaitForDialog(editor, '[role="dialog"] iframe');
+  };
+
+  it('TBA: Open dialog, click Close to close dialog', async () => {
+    const editor = hook.editor();
+    editor.setContent('<strong>a</strong>');
+    await pOpenDialog(editor);
+    TinyUiActions.closeDialog(editor);
+    await Waiter.pTryUntil('Dialog should close', () => UiFinder.notExists(docBody, dialogSelector));
+
+  });
+
+  it('TBA: Open dialog, press escape to close dialog', async () => {
+    const editor = hook.editor();
+    editor.setContent('<strong>a</strong>');
+    await pOpenDialog(editor);
+    TinyUiActions.keyup(editor, Keys.escape());
+    await Waiter.pTryUntil('Dialog should close on esc', () => UiFinder.notExists(docBody, dialogSelector));
+  });
+});

package/src/plugins/quickbars/demo/html/demo.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Plugin: Quick Toolbars Demo Page</title>
+  </head>
+
+  <style>
+    body {
+      margin: 20px;
+    }
+  </style>
+  <body>
+    <h2>Plugin: Quick Toolbars Demo Page</h2>
+    <div id="ephox-ui">
+      <textarea cols="30" rows="10" class="tinymce"></textarea>
+    </div>
+
+    <h2>Distraction free</h2>
+    <div class='demo-dfree'>
+      <h1 class="dfree-header mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
+        The latest and greatest from TinyMCE
+      </h1>
+      <br/>
+      <div class="dfree-body mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
+        <p><img src="https://tiny.cloud/images/medium-pic.jpg" style="display: block; margin-left: auto; margin-right: auto; width: 100%;" data-mce-style="display: block; margin-left: auto; margin-right: auto;" data-mce-selected="1"></p>
+        <br/>
+        <h2>The world’s first rich text editor in the cloud</h2>
+
+        <p>
+          Have you heard about Tiny Cloud?
+          It’s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise.
+          50,000 developers already agree.
+          They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor.
+          They’re also ready for some exciting updates coming soon.
+        </p>
+
+
+        <p>
+          One of these enhancements is <strong>Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy.
+          Learn more at <a href='https://www.tiny.cloud/drive/'>Drive</a>, where you’ll find a working demo and an opportunity to provide feedback to the product team.
+        </p>
+
+        <h3>An editor for every project</h3>
+
+        <p>
+          Here are some of our customer’s most common use cases for TinyMCE:
+          <ul>
+            <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
+            <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
+            <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
+            <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
+            <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
+          </ul>
+        </p>
+
+        <p>
+          And those use cases are just the start.
+          TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project.
+          If you haven’t experienced Tiny Cloud, get started today.
+          You’ll even get a free trial of our premium plugins – no credit card required!
+        </p>
+      </div>
+    </div>
+
+    <script src="../../../../../js/tinymce/tinymce.js"></script>
+    <script src="../../../../../scratch/demos/plugins/quickbars/demo.js"></script>
+  </body>
+</html>

package/src/plugins/quickbars/demo/ts/demo/Demo.ts

@@ -0,0 +1,56 @@
+import { RawEditorOptions, TinyMCE } from 'tinymce/core/api/PublicApi';
+
+declare let tinymce: TinyMCE;
+
+const quickbarsClassicConfig: RawEditorOptions = {
+  selector: 'textarea.tinymce',
+  plugins: 'quickbars link code',
+  toolbar: 'quickbars code',
+  menubar: 'view insert tools custom',
+  link_quicklink: true,
+  height: 600,
+  setup: (ed) => {
+    ed.on('init', () => {
+      ed.hasVisual = true;
+      ed.addVisual();
+    });
+
+    ed.on('init', () => {
+      ed.setContent('<h1>Heading</h1><p><a name="anchor1"></a>anchor here.');
+    });
+  }
+};
+
+const dfreeHeaderConfig: RawEditorOptions = {
+  selector: '.dfree-header',
+  plugins: [ 'quickbars' ],
+  toolbar: false,
+  menubar: false,
+  inline: true,
+  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
+};
+
+const dfreeBodyConfig: RawEditorOptions = {
+  selector: '.dfree-body',
+  menubar: false,
+  inline: true,
+  plugins: [
+    'autolink',
+    'codesample',
+    'link',
+    'lists',
+    'table',
+    'image',
+    'quickbars'
+  ],
+  toolbar: false,
+  quickbars_insert_toolbar: 'bold italic | quicklink h2 h3 blockquote',
+  quickbars_selection_toolbar: 'bold italic | h2 h3 | blockquote quicklink',
+  contextmenu: 'inserttable | cell row column deletetable'
+};
+
+tinymce.init(quickbarsClassicConfig);
+tinymce.init(dfreeHeaderConfig);
+tinymce.init(dfreeBodyConfig);
+
+export {};

package/src/plugins/quickbars/main/ts/Main.ts

@@ -0,0 +1,9 @@
+import Plugin from './Plugin';
+
+Plugin();
+
+/** *****
+ * DO NOT EXPORT ANYTHING
+ *
+ * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE
+ *******/

package/src/plugins/quickbars/main/ts/Plugin.ts

@@ -0,0 +1,16 @@
+import PluginManager from 'tinymce/core/api/PluginManager';
+
+import * as Options from './api/Options';
+import * as InsertButtons from './insert/Buttons';
+import * as InsertToolbars from './insert/Toolbars';
+import * as SelectionToolbars from './selection/Toolbars';
+
+export default (): void => {
+  PluginManager.add('quickbars', (editor) => {
+    Options.register(editor);
+    InsertButtons.setupButtons(editor);
+    InsertToolbars.addToEditor(editor);
+
+    SelectionToolbars.addToEditor(editor);
+  });
+};

package/src/plugins/quickbars/main/ts/api/Options.ts

@@ -0,0 +1,56 @@
+import { Type } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+import { EditorOptions } from 'tinymce/core/api/OptionTypes';
+
+const option: {
+  <K extends keyof EditorOptions>(name: K): (editor: Editor) => EditorOptions[K] | undefined;
+  <T>(name: string): (editor: Editor) => T | undefined;
+} = (name: string) => (editor: Editor) =>
+  editor.options.get(name);
+
+const register = (editor: Editor): void => {
+  const registerOption = editor.options.register;
+
+  const toolbarProcessor = (defaultValue: string) => (value: unknown) => {
+    const valid = Type.isBoolean(value) || Type.isString(value);
+    if (valid) {
+      if (Type.isBoolean(value)) {
+        return { value: value ? defaultValue : '', valid };
+      } else {
+        return { value: value.trim(), valid };
+      }
+    } else {
+      return { valid: false as const, message: 'Must be a boolean or string.' };
+    }
+  };
+
+  const defaultSelectionToolbar = 'bold italic | quicklink h2 h3 blockquote';
+  registerOption('quickbars_selection_toolbar', {
+    processor: toolbarProcessor(defaultSelectionToolbar),
+    default: defaultSelectionToolbar
+  });
+
+  const defaultInsertToolbar = 'quickimage quicktable';
+  registerOption('quickbars_insert_toolbar', {
+    processor: toolbarProcessor(defaultInsertToolbar),
+    default: defaultInsertToolbar
+  });
+
+  const defaultImageToolbar = 'alignleft aligncenter alignright';
+  registerOption('quickbars_image_toolbar', {
+    processor: toolbarProcessor(defaultImageToolbar),
+    default: defaultImageToolbar
+  });
+};
+
+const getTextSelectionToolbarItems = option<string>('quickbars_selection_toolbar');
+const getInsertToolbarItems = option<string>('quickbars_insert_toolbar');
+const getImageToolbarItems = option<string>('quickbars_image_toolbar');
+
+export {
+  register,
+  getTextSelectionToolbarItems,
+  getInsertToolbarItems,
+  getImageToolbarItems
+};

package/src/plugins/quickbars/main/ts/insert/Actions.ts

@@ -0,0 +1,20 @@
+import { Id } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+
+const insertTable = (editor: Editor, columns: number, rows: number): void => {
+  editor.execCommand('mceInsertTable', false, { rows, columns });
+};
+
+const insertBlob = (editor: Editor, base64: string, blob: Blob): void => {
+  const blobCache = editor.editorUpload.blobCache;
+  const blobInfo = blobCache.create(Id.generate('mceu'), blob, base64);
+  blobCache.add(blobInfo);
+
+  editor.insertContent(editor.dom.createHTML('img', { src: blobInfo.blobUri() }));
+};
+
+export {
+  insertTable,
+  insertBlob
+};

package/src/plugins/quickbars/main/ts/insert/Buttons.ts

@@ -0,0 +1,35 @@
+import Editor from 'tinymce/core/api/Editor';
+
+import * as Actions from './Actions';
+import * as Conversions from './Conversions';
+import * as Picker from './Picker';
+
+const setupButtons = (editor: Editor): void => {
+  editor.ui.registry.addButton('quickimage', {
+    icon: 'image',
+    tooltip: 'Insert image',
+    onAction: () => {
+      Picker.pickFile(editor).then((files) => {
+        if (files.length > 0) {
+          const blob = files[0];
+
+          Conversions.blobToBase64(blob).then((base64) => {
+            Actions.insertBlob(editor, base64, blob);
+          });
+        }
+      });
+    }
+  });
+
+  editor.ui.registry.addButton('quicktable', {
+    icon: 'table',
+    tooltip: 'Insert table',
+    onAction: () => {
+      Actions.insertTable(editor, 2, 2);
+    }
+  });
+};
+
+export {
+  setupButtons
+};

package/src/plugins/quickbars/main/ts/insert/Conversions.ts

@@ -0,0 +1,15 @@
+const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      resolve((reader.result as string).split(',')[1]);
+    };
+
+    reader.readAsDataURL(blob);
+  });
+};
+
+export {
+  blobToBase64
+};