scinote-web/app/javascript/packs/tinymce/image_toolbar/plugin.js

57 lines
2.3 KiB
JavaScript

/* global I18n tinymce MarvinJsEditor */
tinymce.PluginManager.add('custom_image_toolbar', (editor) => {
editor.ui.registry.addIcon(
'download',
`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" focusable="false">
<path d="M26.835 17.1193c-.4295-.0002-.8415.1703-1.1452.474a1.618 1.618 0 0 0-.474 1.1453v4.8579H5.7843v-4.8579c0-.8943-.725-1.6193-1.6193-1.6193s-1.6193.725-1.6193 1.6193v6.4771c-.0002.4296.1703.8416.474 1.1453a1.618 1.618 0 0 0 1.1453.474h22.67c.4296.0003.8416-.1702 1.1453-.474s.4743-.7157.474-1.1453v-6.4771a1.618 1.618 0 0 0-.474-1.1453c-.3037-.3037-.7157-.4742-1.1453-.474zm-12.4799 2.7642a1.619 1.619 0 0 0 2.2898 0l4.8579-4.8579c.6293-.6328.6279-1.6555-.0032-2.2866s-1.6538-.6325-2.2866-.0032l-2.0937 2.0937V5.7843c0-.8943-.725-1.6193-1.6193-1.6193s-1.6193.725-1.6193 1.6193v9.0452l-2.0937-2.0937c-.6328-.6293-1.6555-.6278-2.2866.0032s-.6325 1.6538-.0032 2.2866z"></path>
</svg>`
);
editor.ui.registry.addButton('image_download', {
icon: 'download',
tooltip: I18n.t('general.download'),
onAction: () => {
const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
const image = editorIframe.contents().find('img[data-mce-selected="1"]');
window.open(`/tiny_mce_assets/${image.data('mce-token')}/download`, '_blank');
}
});
editor.ui.registry.addButton('marvinjs_edit', {
icon: 'edit-block',
onAction: () => {
const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
const image = editorIframe.contents().find('img[data-mce-selected="1"]');
MarvinJsEditor.open({
mode: 'edit-tinymce',
marvinUrl: `/tiny_mce_assets/${image[0].dataset.mceToken}/marvinjs`,
editor,
image
});
}
});
function isImage(elem) {
return editor.dom.is(elem, 'img') && elem.dataset.mceToken;
}
function isMarvinJs(elem) {
return elem.dataset.sourceType === 'marvinjs';
}
editor.ui.registry.addContextToolbar('marvinJsToolbar', {
predicate: (node) => isMarvinJs(node),
items: 'marvinjs_edit',
position: 'node',
scope: 'node'
});
editor.ui.registry.addContextToolbar('ImageToolbar', {
predicate: (node) => isImage(node),
items: 'image_download',
position: 'node',
scope: 'node'
});
});