/* global tinymce, editorIdentifier, ss */ import i18n from 'i18n'; import TinyMCEActionRegistrar from 'lib/TinyMCEActionRegistrar'; import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider } from 'react-apollo'; import { Provider } from 'react-redux'; import jQuery from 'jquery'; import ShortcodeSerialiser from 'lib/ShortcodeSerialiser'; import { createInsertLinkModal } from 'containers/InsertLinkModal/InsertLinkModal'; import { provideInjector } from 'lib/Injector'; import { updatedCurrentField } from '../state/anchorSelector/AnchorSelectorActions'; const commandName = 'sslinkanchor'; // Link to external url TinyMCEActionRegistrar .addAction( 'sslink', { text: i18n._t('CMS.LINKLABEL_ANCHOR', 'Anchor on a page'), onclick: (activeEditor) => activeEditor.execCommand(commandName), priority: 60, }, editorIdentifier, ) .addCommandWithUrlTest(commandName, /^\[sitetree_link.+]#[^#\]]+$/); const plugin = { init(editor) { editor.addCommand(commandName, () => { const field = jQuery(`#${editor.id}`).entwine('ss'); // Get the anchors in the current field and save them as props for AnchorSelectorField const currentPageID = Number(jQuery('#Form_EditForm_ID').val() || 0); const validTargets = editor .$('[id],[name]', editor.getBody()) .toArray() .map((element) => element.id || element.name); ss.store.dispatch(updatedCurrentField(currentPageID, validTargets, editor.id)); // Open the anchor link form field.openLinkAnchorDialog(); }); }, }; const modalId = 'insert-link__dialog-wrapper--anchor'; const sectionConfigKey = 'SilverStripe\\CMS\\Controllers\\CMSPageEditController'; const formName = 'editorAnchorLink'; const InsertLinkInternalModal = provideInjector(createInsertLinkModal(sectionConfigKey, formName)); jQuery.entwine('ss', ($) => { $('textarea.htmleditor').entwine({ openLinkAnchorDialog() { let dialog = $(`#${modalId}`); if (!dialog.length) { dialog = $(`
`); $('body').append(dialog); } dialog.addClass('insert-link__dialog-wrapper'); dialog.setElement(this); dialog.open(); }, }); /** * Assumes that $('.insert-link__dialog-wrapper').entwine({}); is defined for shared functions */ $(`#${modalId}`).entwine({ renderModal(isOpen) { const store = ss.store; const client = ss.apolloClient; const handleHide = () => this.close(); const handleInsert = (...args) => this.handleInsert(...args); const attrs = this.getOriginalAttributes(); const requireLinkText = this.getRequireLinkText(); const currentPageID = Number($('#Form_EditForm_ID').val() || 0); // create/update the react component ReactDOM.render(