From 6dd9e5061da3c620990a30e71872f61220ef2d93 Mon Sep 17 00:00:00 2001 From: Fabian Braun Date: Sat, 21 Dec 2024 18:01:02 +0100 Subject: [PATCH] update formatting --- .../static/djangocms_text/css/cms.text.css | 2 +- .../js/cms.ckeditor.js | 511 ------------------ .../static/djangocms_text_ckeditor/js/post.js | 2 - .../static/djangocms_text_ckeditor/js/pre.js | 2 - package.json | 2 +- private/js/cms.ckeditor4.js | 5 + private/js/cms.dialog.js | 1 + private/js/cms.tiptap.js | 16 +- private/js/tiptap_plugins/cms.styles.js | 8 +- .../js/tiptap_plugins/cms.tiptap.toolbar.js | 2 +- 10 files changed, 23 insertions(+), 528 deletions(-) delete mode 100644 djangocms_text/static/djangocms_text_ckeditor/js/cms.ckeditor.js delete mode 100644 djangocms_text/static/djangocms_text_ckeditor/js/post.js delete mode 100644 djangocms_text/static/djangocms_text_ckeditor/js/pre.js diff --git a/djangocms_text/static/djangocms_text/css/cms.text.css b/djangocms_text/static/djangocms_text/css/cms.text.css index b7dce63c..d46dd774 100644 --- a/djangocms_text/static/djangocms_text/css/cms.text.css +++ b/djangocms_text/static/djangocms_text/css/cms.text.css @@ -93,7 +93,7 @@ dialog.cms-form-dialog { margin: unset; left: auto; transform: translate(-50%, -50%); - min-width: 200px; + min-width: 240px; padding: 10px 15px; background-color: var(--dca-white); border: 1px solid var(--dca-gray-light); diff --git a/djangocms_text/static/djangocms_text_ckeditor/js/cms.ckeditor.js b/djangocms_text/static/djangocms_text_ckeditor/js/cms.ckeditor.js deleted file mode 100644 index f542855b..00000000 --- a/djangocms_text/static/djangocms_text_ckeditor/js/cms.ckeditor.js +++ /dev/null @@ -1,511 +0,0 @@ -(function ($, CMS) { - 'use strict'; - window.CKEDITOR_BASEPATH = $('[data-ckeditor-basepath]').attr('data-ckeditor-basepath'); - - // CMS.$ will be passed for $ - /** - * CMS.CKEditor - * - * @description: Adds cms specific plugins to CKEditor - */ - CMS.CKEditor = { - - options: { - // ckeditor default settings, will be overwritten by CKEDITOR_SETTINGS - language: 'en', - skin: 'moono-lisa', - toolbar_CMS: [ - ['Undo', 'Redo'], - ['cmsplugins', 'cmswidget', '-', 'ShowBlocks'], - ['Format', 'Styles'], - ['TextColor', 'BGColor', '-', 'PasteText', 'PasteFromWord'], - ['Scayt'], - ['Maximize', ''], - '/', - ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'], - ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], - ['HorizontalRule'], - ['NumberedList', 'BulletedList'], - ['Outdent', 'Indent', '-', 'Blockquote', '-', 'Link', 'Unlink', '-', 'Table'], - ['Source'] - ], - toolbar_HTMLField: [ - ['Undo', 'Redo'], - ['ShowBlocks'], - ['Format', 'Styles'], - ['TextColor', 'BGColor', '-', 'PasteText', 'PasteFromWord'], - ['Scayt'], - ['Maximize', ''], - '/', - ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'], - ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], - ['HorizontalRule'], - ['Link', 'Unlink'], - ['NumberedList', 'BulletedList'], - ['Outdent', 'Indent', '-', 'Blockquote', '-', 'Link', 'Unlink', '-', 'Table'], - ['Source'] - ], - - allowedContent: true, - toolbarCanCollapse: false, - removePlugins: 'resize', - extraPlugins: '' - }, - - // Meaningful default, overwritten by the backend - static_url: '/static/djangocms-text-ckeditor', - - CSS: [], - editors: {}, - - - init: function (element, mode, options, settings, callback) { - var container = $(element); - - container.data('ckeditor-initialized', true); - container.attr('contenteditable', true); - // add additional settings to options - this.options.toolbar = settings.toolbar; - this.options = $.extend(false, { - settings: settings - }, this.options, options); - - // add extra plugins that we absolutely must have - this.options.extraPlugins = this.options.extraPlugins += - ',cmsplugins,cmswidget,cmsdialog,cmsresize,widget'; - - document.createElement('cms-plugin'); - CKEDITOR.dtd['cms-plugin'] = CKEDITOR.dtd.div; - CKEDITOR.dtd.$inline['cms-plugin'] = 1; - // has to be here, otherwise extra

tags appear - CKEDITOR.dtd.$nonEditable['cms-plugin'] = 1; - CKEDITOR.dtd.$transparent['cms-plugin'] = 1; - CKEDITOR.dtd.body['cms-plugin'] = 1; - - // add additional plugins (autoloads plugins.js) - CKEDITOR.skin.addIcon('cmsplugins', settings.static_url + - '/ckeditor_plugins/cmsplugins/icons/cmsplugins.svg'); - - var editor; - if (mode === 'admin') { - // render ckeditor - editor = CKEDITOR.replace(container[0], this.options); - } else { - editor = CKEDITOR.inline(container[0], this.options); - } - - CMS.CKEditor.editors[editor.id] = { - editor: editor, - options: options, - settings: settings, - container: container, - changed: false, - child_changed: false - }; - editor.on('instanceReady', callback); - }, - - initInlineEditors: function () { - if (CMS._plugins === undefined) { - // no plugins -> no inline editors - return; - } - - CMS.CKEditor.observer = CMS.CKEditor.observer || new IntersectionObserver(function (entries, opts) { - entries.forEach(function (entry) { - if (entry.isIntersecting) { - var target = $(entry.target); - var plugin_id = target.data('cms_plugin_id'); - var url = target.data('cms_edit_url'); - - CMS.CKEditor.startInlineEditor(plugin_id, url); - } - }); - }, { - root: null, - threshold: 0.05 - }); - - CMS._plugins.forEach(function (plugin) { - if (plugin[1].plugin_type === 'TextPlugin') { - var url = plugin[1].urls.edit_plugin; - var id = plugin[1].plugin_id; - var elements = $('.cms-plugin.cms-plugin-' + id); - var wrapper; - - if (elements.length > 0) { - if (elements.length === 1 && elements.prop('tagName') === 'DIV') { // already wrapped? - wrapper = elements.addClass('cms-ckeditor-inline-wrapper'); - } else { // no, wrap now! - wrapper = elements - .wrapAll('

') - .parent(); - elements - .removeClass('cms-plugin') - .removeClass('cms-plugin-' + id); - wrapper.addClass('cms-plugin').addClass('cms-plugin-' + id); - } - wrapper.data('cms_edit_url', url); - wrapper.data('cms_plugin_id', id); - wrapper.on('dblclick.cms-ckeditor', function (event) { - // Double-click is needed by CKEditor - event.stopPropagation(); - }); - wrapper.on('pointerover.cms-ckeditor', function (event) { - // use time out to let other event handlers (CMS' !) run first. - setTimeout(function () { - // do not show tooltip on inline editing text fields. - CMS.API.Tooltip.displayToggle(false, event.target, '', id); - }, 0); - }); - CMS.CKEditor.observer.observe(wrapper[0]); - } - } - }); - $(window).on('beforeunload.cms-ckeditor', function () { - for (var editor_id in CMS.CKEditor.editors) { - if (CMS.CKEditor.editors.hasOwnProperty(editor_id) && - CMS.CKEditor.editors[editor_id].changed) { - return 'Do you really want to leave this page?'; - } - } - }); - }, - - startInlineEditor: function (plugin_id, url) { - var options; - var settings = JSON.parse(document.getElementById('ck-cfg-' + plugin_id).textContent); - var wrapper = $('.cms-plugin.cms-plugin-' + plugin_id); - - if (wrapper.data('ckeditor-initialized')) { - return; - } - - settings.plugin_id = plugin_id; - settings.url = url; - options = settings.options; - delete settings.options; - - CMS.CKEditor.init( - wrapper[0], - 'inline', - options, - settings, - function (callback) { - callback.editor.element.removeAttribute('title'); - callback.editor.on('change', function () { - CMS.CKEditor.editors[callback.editor.id].changed = true; - }); - wrapper.on('blur.cms-ckeditor', function () { - setTimeout(function () { - // avoid save when clicking on editor dialogs or toolbar - if (!document.activeElement.classList.contains('cke_panel_frame') && - !document.activeElement.classList.contains('cke_dialog_ui_button')) { - CMS.CKEditor.save_data(callback.editor.id); - } - }, 0); - }); - wrapper.on('click.cms-ckeditor', function () { - // Highlight plugin in structure board - // Needs to be done manually, since the tooltip is suppressed and django CMS - // only automatically highlights the plugin if the tooltip is visible - CMS.CKEditor._highlight_Textplugin(plugin_id); - }); - // store css that ckeditor loaded before save - CMS.CKEditor.storeCSSlinks(); - } - ); - }, - - save_data: function (editor_id, action) { - var instance = CMS.CKEditor.editors[editor_id]; - - if (instance && instance.changed) { - CMS.CKEditor.storeCSSlinks(); // store css that ckeditor loaded before save - var data = instance.editor.getData(); - - CMS.API.Toolbar.showLoader(); - $.post(CMS.API.Helpers.updateUrlWithPath(instance.settings.url), { // send changes - csrfmiddlewaretoken: CMS.config.csrf, - body: data, - _save: 'Save' - }, function (response) { - instance.changed = false; - CMS.API.Toolbar.hideLoader(); - if (action !== undefined) { - action(instance, response); - } - if (instance.child_changed) { - var scripts = $(response).find('script:not([src])').addClass('cms-ckeditor-result'); - - CMS.CKEditor._destroyAll(); - scripts.each(function (item, element) { - $('body').append(element); - }); - } else { - CMS.CKEditor.loadToolbar(); - } - }).fail(function (error) { - instance.changed = true; - CMS.API.Messages.open({ - message: error.message, - error: true - }); - }); - } - }, - - loadToolbar: function () { - if (CMS.settings && CMS.settings.version && this._toolbar_bug_version(CMS.settings.version)) { - // Before django CMS 3.10 a bug prevents the toolbar to be loaded correctly - // Refresh whole page instead - CMS.API.Helpers.reloadBrowser(); - } else { - CMS.API.StructureBoard._loadToolbar() - .done(function (newToolbar) { - CMS.API.Toolbar._refreshMarkup($(newToolbar).find('.cms-toolbar')); - }) - .fail(CMS.API.Helpers.reloadBrowser); - } - }, - - _toolbar_bug_version: function (version) { - var parts = version.split('.'); - - return parts[0] === '3' && parts[1].length < 2; - }, - - storeCSSlinks: function () { - $("link[rel='stylesheet'][type='text/css'][href*='ckeditor']").each( - function (index, element) { - if (!CMS.CKEditor.CSS.includes(element.href)) { - CMS.CKEditor.CSS.push(element.href); - } - } - ); - }, - - - // setup is called after ckeditor has been initialized - setupAdmin: function (editor) { - // auto maximize modal if alone in a modal - var that = this; - var win = window.parent || window; - // 70px is hardcoded to make it more performant. 20px + 20px - paddings, 30px label height - var TOOLBAR_HEIGHT_WITH_PADDINGS = 70; - - if (this._isAloneInModal(CMS.CKEditor.editors[editor.id].container)) { - editor.resize('100%', win.CMS.$('.cms-modal-frame').height() - TOOLBAR_HEIGHT_WITH_PADDINGS); - editor.execCommand('maximize'); - - $(window).on('resize.ckeditor', function () { - that._repositionDialog(CKEDITOR.dialog.getCurrent(), win); - }).trigger('resize.ckeditor'); - - win.CMS.API.Helpers.addEventListener('modal-maximized modal-restored', function () { - try { - if (!$('.cke_maximized').length) { - editor.resize( - '100%', - win.CMS.$('.cms-modal-frame').height() - TOOLBAR_HEIGHT_WITH_PADDINGS - ); - setTimeout(function () { - that._repositionDialog(CKEDITOR.dialog.getCurrent(), win); - }, 0); - } - } catch (e) { - // sometimes throws errors if modal with text plugin is closed too fast - } - }); - } - - // add css tweaks to the editor - this.styles(); - this._resizing(); - }, - - styles: function () { - // add styling to source and fullscreen view - $('.cke_button__maximize, .cke_button__source').parent() - .css('margin-right', 0).parent() - .css('float', 'right'); - }, - - _resizing: function () { - $(document).on('pointerdown', '.cms-ckeditor-resizer', function (e) { - e.preventDefault(); - var event = new CMS.$.Event('mousedown'); - - $.extend(event, { - screenX: e.originalEvent.screenX, - screenY: e.originalEvent.screenY - }); - $(this).trigger(event); - }); - }, - - _isAloneInModal: function (container) { - var body = container.closest('body'); - - // return true if the ckeditor is alone in a modal popup - return body.is('.app-djangocms_text_ckeditor.model-text'); - }, - - /** - * @method _repositionDialog - * @private - * @param {CKEDITOR.dialog} dialog instance - */ - _repositionDialog: function (dialog) { - var OFFSET = 80; - - if (!dialog) { - return; - } - var size = dialog.getSize(); - var position = dialog.getPosition(); - var win = CKEDITOR.document.getWindow(); - var viewSize = win.getViewPaneSize(); - var winWidth = viewSize.width; - var winHeight = viewSize.height; - - if (position.x < 0) { - dialog.move(0, position.y); - position.x = 0; - } - - if (position.y < 0) { - dialog.move(position.x, 0); - position.y = 0; - } - - if (position.y + size.height > winHeight) { - dialog.resize(size.width, winHeight - position.y - OFFSET); - } - - if (position.x + size.width > winWidth) { - dialog.resize(winWidth - position.x, size.height); - } - }, - - initAdminEditors: function () { - window._cmsCKEditors = window._cmsCKEditors || []; - var dynamics = []; - var settings; - var options; - - window._cmsCKEditors.forEach(function (editorConfig) { - var elementId = 'ck-cfg-' + (editorConfig[1] ? editorConfig[1] : editorConfig[0]); - - settings = JSON.parse(document.getElementById(elementId).textContent); - options = settings.options; - delete settings.options; - - if (editorConfig[0].match(/__prefix__/)) { - dynamics.push(editorConfig); - } else { - CMS.CKEditor.init( - document.getElementById(editorConfig[0]), - 'admin', - options, - settings, - function (callback) { - return CMS.CKEditor.setupAdmin(callback.editor); - } - ); - } - }); - - $('.add-row a').on('click', function () { - $('.CMS_CKEditor').each(function (i, el) { - var container = $(el); - - if (container.data('ckeditor-initialized')) { - return; - } - - var containerId = container.attr('id'); - - // in case there are multiple different inlines we need to check - // newly added one against all of them - dynamics.forEach(function (config) { - var selector = config[0].id; - var regex = new RegExp(selector.replace('__prefix__', '\\d+')); - - if (containerId.match(regex)) { - CMS.CKEditor.init( - document.getElementById(containerId), - options, - settings - ); - } - }); - }); - }); - }, - - _highlight_Textplugin: function (pluginId) { - var HIGHLIGHT_TIMEOUT = 10; - - var draggable = $('.cms-draggable-' + pluginId); - var doc = $(document); - var currentExpandmode = doc.data('expandmode'); - - - // expand necessary parents - doc.data('expandmode', false); - draggable - .parents('.cms-draggable') - .find('> .cms-dragitem-collapsable:not(".cms-dragitem-expanded") > .cms-dragitem-text') - .each(function (i, el) { - $(el).triggerHandler(CMS.Plugin.click); - }); - if (draggable.length > 0) { // Expanded elements available - setTimeout(function () { - doc.data('expandmode', currentExpandmode); - }); - setTimeout(function () { - CMS.Plugin._highlightPluginStructure(draggable.find('.cms-dragitem:first'), - {successTimeout: 200, delay: 2000, seeThrough: true}); - }, HIGHLIGHT_TIMEOUT); - } - }, - - _initAll: function () { - CMS.CKEditor.touchdevice = 'ontouchstart' in window || navigator.msMaxTouchPoints; // on touch device? - if (!CMS.CKEditor.touchdevice) { // no inline editing on touch devices to not interfere with scrolling - CMS.CKEditor.initInlineEditors(); - $('div.cms a.cms-btn.cms-edit-toggle').show(); - } else { - $('div.cms a.cms-btn.cms-edit-toggle').hide(); - } - CMS.CKEditor.initAdminEditors(); - }, - - _destroyAll: function () { - for (var id in CMS.CKEditor.editors) { - if (CMS.CKEditor.editors.hasOwnProperty(id)) { - CMS.CKEditor.editors[id].editor.destroy(); - $(CMS.CKEditor.editors[id].container).off('.cms-ckeditor'); - delete CMS.CKEditor.editors[id]; - } - } - $(window).off('.cms-ckeditor'); - }, - - _resetInlineEditors: function () { - CMS.CKEditor.CSS.forEach(function (stylefile) { - if ($("link[href='" + stylefile + "']").length === 0) { - $('head').append($("")); - } - }); - CMS.CKEditor._destroyAll(); - CMS.CKEditor._initAll(); - } - }; - - setTimeout(function init() { - CMS.CKEditor._initAll(); - }, 0); - $(window).on('cms-content-refresh', CMS.CKEditor._resetInlineEditors); -})(window.CMS.$, window.CMS); diff --git a/djangocms_text/static/djangocms_text_ckeditor/js/post.js b/djangocms_text/static/djangocms_text_ckeditor/js/post.js deleted file mode 100644 index 55ba5f92..00000000 --- a/djangocms_text/static/djangocms_text_ckeditor/js/post.js +++ /dev/null @@ -1,2 +0,0 @@ -}); -})(CMS.$); diff --git a/djangocms_text/static/djangocms_text_ckeditor/js/pre.js b/djangocms_text/static/djangocms_text_ckeditor/js/pre.js deleted file mode 100644 index 7297588e..00000000 --- a/djangocms_text/static/djangocms_text_ckeditor/js/pre.js +++ /dev/null @@ -1,2 +0,0 @@ -(function ($) { - $(function () { diff --git a/package.json b/package.json index 3a56aa1d..d1e98813 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "bugs": { "url": "https://github.com/django-cms/djangocms-text/issues" }, - "homepage": "https://github.com/django-cms/djangocms-text-rte", + "homepage": "https://github.com/django-cms/djangocms-text", "devDependencies": { "@babel/core": "^7.26.0", "@babel/preset-env": "^7.26.0", diff --git a/private/js/cms.ckeditor4.js b/private/js/cms.ckeditor4.js index f3853dc3..68b52620 100644 --- a/private/js/cms.ckeditor4.js +++ b/private/js/cms.ckeditor4.js @@ -3,6 +3,11 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ +/* eslint-env es6 */ +/* jshint esversion: 6 */ +/* global document, window, console */ + + import './ckeditor4_plugins/cmsdialog/plugin'; import './ckeditor4_plugins/cmsplugins/plugin'; import './ckeditor4_plugins/cmsresize/plugin'; diff --git a/private/js/cms.dialog.js b/private/js/cms.dialog.js index 3bc373b2..384e9721 100644 --- a/private/js/cms.dialog.js +++ b/private/js/cms.dialog.js @@ -2,6 +2,7 @@ /* jshint esversion: 6 */ /* global document, window, console */ + class CmsDialog { /** * Constructor for creating an instance of the class showing a django CMS modal in a diff --git a/private/js/cms.tiptap.js b/private/js/cms.tiptap.js index 2ed5d28c..b26dc437 100644 --- a/private/js/cms.tiptap.js +++ b/private/js/cms.tiptap.js @@ -10,10 +10,10 @@ import CmsDynLink from './tiptap_plugins/cms.dynlink'; import Placeholder from '@tiptap/extension-placeholder'; import Subscript from '@tiptap/extension-subscript'; import Superscript from '@tiptap/extension-superscript'; -import Table from '@tiptap/extension-table' -import TableCell from '@tiptap/extension-table-cell' -import TableHeader from '@tiptap/extension-table-header' -import TableRow from '@tiptap/extension-table-row' +import Table from '@tiptap/extension-table'; +import TableCell from '@tiptap/extension-table-cell'; +import TableHeader from '@tiptap/extension-table-header'; +import TableRow from '@tiptap/extension-table-row'; import { TextAlign, TextAlignOptions } from '@tiptap/extension-text-align'; import { CmsPluginNode, CmsBlockPluginNode } from './tiptap_plugins/cms.plugin'; import TiptapToolbar from "./tiptap_plugins/cms.tiptap.toolbar"; @@ -24,10 +24,10 @@ import CmsBalloonToolbar from "./tiptap_plugins/cms.balloon-toolbar"; import FormExtension from "./tiptap_plugins/cms.formextension"; import { formToHtml, populateForm } from './cms.dialog'; -import LinkField from "./cms.linkfield"; +import LinkField from './cms.linkfield'; -import "../css/cms.tiptap.css"; -import "../css/cms.linkfield.css"; +import '../css/cms.tiptap.css'; +import '../css/cms.linkfield.css'; class CMSTipTapPlugin { @@ -122,7 +122,7 @@ class CMSTipTapPlugin { save_callback: save_callback, settings: settings, }); - el.addEventListener('blur', ({editor, event}) => { + el.addEventListener('focusout', ({editor, event}) => { this._blurEditor(editor, event); }); editor.on('update', ({editor}) => { diff --git a/private/js/tiptap_plugins/cms.styles.js b/private/js/tiptap_plugins/cms.styles.js index 1e20dd6f..e81da2c9 100644 --- a/private/js/tiptap_plugins/cms.styles.js +++ b/private/js/tiptap_plugins/cms.styles.js @@ -1,5 +1,5 @@ -/* eslint-env es6 */ -/* jshint esversion: 6 */ +/* eslint-env es11 */ +/* jshint esversion: 11 */ /* global document, window, console */ @@ -8,11 +8,13 @@ import {Mark, mergeAttributes,} from '@tiptap/core'; const _markElement = { addOptions() { + 'use strict'; return { HTMLAttributes: {}, }; }, parseHTML() { + 'use strict'; return [ { tag: this.name.toLowerCase() @@ -20,9 +22,11 @@ const _markElement = { ]; }, renderHTML({ HTMLAttributes }) { + 'use strict'; return [this.name.toLowerCase(), mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]; }, addCommands() { + 'use strict'; let commands = {}; commands[`set${this.name}`] = () => ({ commands }) => { diff --git a/private/js/tiptap_plugins/cms.tiptap.toolbar.js b/private/js/tiptap_plugins/cms.tiptap.toolbar.js index fc6ff28c..9078183d 100644 --- a/private/js/tiptap_plugins/cms.tiptap.toolbar.js +++ b/private/js/tiptap_plugins/cms.tiptap.toolbar.js @@ -2,7 +2,7 @@ /* jshint esversion: 6 */ /* global document, window, console */ -"use strict"; +'use strict'; const TiptapToolbar = {