diff --git a/app/javascript/packs/tiny_mce.js b/app/javascript/packs/tiny_mce.js index 889e8170d..1443567f8 100644 --- a/app/javascript/packs/tiny_mce.js +++ b/app/javascript/packs/tiny_mce.js @@ -28,7 +28,6 @@ import 'tinymce/plugins/directionality'; import './tinymce/custom_image_uploader/plugin'; import './tinymce/marvinjs/plugin'; import './tinymce/image_toolbar/plugin'; -import './tinymce/placeholder/plugin'; // Content styles, including inline UI like fake cursors // All the above CSS files are loaded on to the page but these two must @@ -184,7 +183,7 @@ window.TinyMCE = (() => { table autosave autoresize link advlist codesample autolink lists charmap anchor searchreplace wordcount visualblocks visualchars insertdatetime nonbreaking save directionality customimageuploader - marvinjs placeholder custom_image_toolbar help quickbars + marvinjs custom_image_toolbar help quickbars `; // if (typeof (MarvinJsEditor) !== 'undefined') plugins += ' marvinjsplugin'; diff --git a/app/javascript/packs/tinymce/placeholder/plugin.js b/app/javascript/packs/tinymce/placeholder/plugin.js deleted file mode 100644 index b53b77a7f..000000000 --- a/app/javascript/packs/tinymce/placeholder/plugin.js +++ /dev/null @@ -1,74 +0,0 @@ -/* global tinymce */ - -tinymce.PluginManager.add('placeholder', (editor) => { - const Label = () => { - // const editorForm = $(editor.getContainer()).closest('form'); - // const editorToolbar = editorForm.find('.tox-editor-header'); - const placeholderText = editor.getElement().getAttribute('placeholder'); - const placeholderAttrs = { - style: ` - position: 'absolute', - top: '0px', - left: '0px', - color: '#888', - padding: '1%', - width: 'calc(100% - 50px)', - overflow: 'hidden', - 'white-space': 'pre-wrap' - ` - }; - const contentAreaContainer = editor.getContentAreaContainer(); - - - // Create label el - this.el = editor.dom.add(contentAreaContainer, 'label', placeholderAttrs, placeholderText); - }; - - - editor.on('init', () => { - const label = new Label(); - - // Correct top css property due to notification bar - function calculatePlaceholderPosition() { - const editorForm = $(editor.getContainer()).closest('form'); - const editorToolbar = editorForm.find('.mce-top-part'); - - const restoreDraftNotification = $(editorForm).find('.restore-draft-notification'); - const restoreDraftHeight = restoreDraftNotification.context ? restoreDraftNotification.height() : 0; - const newTop = $(editorToolbar).height() + restoreDraftHeight; - $(label.el).css('top', `${newTop}px`); - } - - function checkPlaceholder() { - // Show/hide depending on the content - if (editor.getContent() === '') { - label.show(); - } else { - label.hide(); - } - - calculatePlaceholderPosition(); - } - - function onKeydown() { - label.hide(); - } - - $(label.el).click(() => { - editor.focus(); - }); - - checkPlaceholder(); - - editor.on('focus blur change setContent keyup', checkPlaceholder); - editor.on('keydown mousedown', onKeydown); - }); - - Label.prototype.hide = () => { - editor.dom.setStyle(this.el, 'display', 'none'); - }; - - Label.prototype.show = () => { - editor.dom.setStyle(this.el, 'display', ''); - }; -});