/** * DevExtreme (ui/html_editor/modules/toolbar.js) * Version: 19.1.16 * Build date: Tue Oct 18 2022 * * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ "use strict"; function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { return typeof obj } : function(obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj }, _typeof(obj) } Object.defineProperty(exports, "__esModule", { value: true }); var _quill_importer = require("../quill_importer"); var _renderer = require("../../../core/renderer"); var _renderer2 = _interopRequireDefault(_renderer); var _toolbar = require("../../toolbar"); var _toolbar2 = _interopRequireDefault(_toolbar); require("../../select_box"); require("../../color_box/color_view"); var _widget_collector = require("./widget_collector"); var _widget_collector2 = _interopRequireDefault(_widget_collector); var _iterator = require("../../../core/utils/iterator"); var _type = require("../../../core/utils/type"); var _extend = require("../../../core/utils/extend"); var _message = require("../../../localization/message"); var _inflector = require("../../../core/utils/inflector"); var _events_engine = require("../../../events/core/events_engine"); var _events_engine2 = _interopRequireDefault(_events_engine); var _utils = require("../../../events/utils"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function") } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) { descriptor.writable = true } Object.defineProperty(target, descriptor.key, descriptor) } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) { _defineProperties(Constructor.prototype, protoProps) } if (staticProps) { _defineProperties(Constructor, staticProps) } Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor } function _inherits(subClass, superClass) { if ("function" !== typeof superClass && null !== superClass) { throw new TypeError("Super expression must either be null or a function") } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) { _setPrototypeOf(subClass, superClass) } } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) { o.__proto__ = p; return o }; return _setPrototypeOf(o, p) } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function() { var result, Super = _getPrototypeOf(Derived); if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget) } else { result = Super.apply(this, arguments) } return _possibleConstructorReturn(this, result) } } function _possibleConstructorReturn(self, call) { if (call && ("object" === _typeof(call) || "function" === typeof call)) { return call } else { if (void 0 !== call) { throw new TypeError("Derived constructors may only return object or undefined") } } return _assertThisInitialized(self) } function _assertThisInitialized(self) { if (void 0 === self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return self } function _isNativeReflectConstruct() { if ("undefined" === typeof Reflect || !Reflect.construct) { return false } if (Reflect.construct.sham) { return false } if ("function" === typeof Proxy) { return true } try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})); return true } catch (e) { return false } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o) { return o.__proto__ || Object.getPrototypeOf(o) }; return _getPrototypeOf(o) } var BaseModule = (0, _quill_importer.getQuill)().import("core/module"); var TOOLBAR_WRAPPER_CLASS = "dx-htmleditor-toolbar-wrapper"; var TOOLBAR_CLASS = "dx-htmleditor-toolbar"; var TOOLBAR_FORMAT_WIDGET_CLASS = "dx-htmleditor-toolbar-format"; var TOOLBAR_SEPARATOR_CLASS = "dx-htmleditor-toolbar-separator"; var TOOLBAR_MENU_SEPARATOR_CLASS = "dx-htmleditor-toolbar-menu-separator"; var ACTIVE_FORMAT_CLASS = "dx-format-active"; var BOX_ITEM_CONTENT_CLASS = "dx-box-item-content"; var ICON_CLASS = "dx-icon"; var SELECTION_CHANGE_EVENT = "selection-change"; var DIALOG_COLOR_CAPTION = "dxHtmlEditor-dialogColorCaption"; var DIALOG_BACKGROUND_CAPTION = "dxHtmlEditor-dialogBackgroundCaption"; var DIALOG_LINK_CAPTION = "dxHtmlEditor-dialogLinkCaption"; var DIALOG_LINK_FIELD_URL = "dxHtmlEditor-dialogLinkUrlField"; var DIALOG_LINK_FIELD_TEXT = "dxHtmlEditor-dialogLinkTextField"; var DIALOG_LINK_FIELD_TARGET = "dxHtmlEditor-dialogLinkTargetField"; var DIALOG_LINK_FIELD_TARGET_CLASS = "dx-formdialog-field-target"; var DIALOG_IMAGE_CAPTION = "dxHtmlEditor-dialogImageCaption"; var DIALOG_IMAGE_FIELD_URL = "dxHtmlEditor-dialogImageUrlField"; var DIALOG_IMAGE_FIELD_ALT = "dxHtmlEditor-dialogImageAltField"; var DIALOG_IMAGE_FIELD_WIDTH = "dxHtmlEditor-dialogImageWidthField"; var DIALOG_IMAGE_FIELD_HEIGHT = "dxHtmlEditor-dialogImageHeightField"; var USER_ACTION = "user"; var SILENT_ACTION = "silent"; var HEADING_TEXT = (0, _message.format)("dxHtmlEditor-heading"); var NORMAL_TEXT = (0, _message.format)("dxHtmlEditor-normalText"); var ToolbarModule = function(_BaseModule) { _inherits(ToolbarModule, _BaseModule); var _super = _createSuper(ToolbarModule); function ToolbarModule(quill, options) { var _this; _classCallCheck(this, ToolbarModule); _this = _super.call(this, quill, options); _this._editorInstance = options.editorInstance; _this._toolbarWidgets = new _widget_collector2.default; _this._formatHandlers = _this._getFormatHandlers(); if ((0, _type.isDefined)(options.items)) { _this._addCallbacks(); _this._renderToolbar(); _this.quill.on("editor-change", function(eventName) { var isSelectionChanged = eventName === SELECTION_CHANGE_EVENT; _this._updateToolbar(isSelectionChanged) }) } return _this } _createClass(ToolbarModule, [{ key: "_addCallbacks", value: function() { this._editorInstance.addCleanCallback(this.clean.bind(this)); this._editorInstance.addContentInitializedCallback(this.updateHistoryWidgets.bind(this)) } }, { key: "_updateToolbar", value: function(isSelectionChanged) { this.updateFormatWidgets(isSelectionChanged); this.updateHistoryWidgets() } }, { key: "_getDefaultClickHandler", value: function(formatName) { var _this2 = this; return function(e) { var formats = _this2.quill.getFormat(); var value = formats[formatName]; var newValue = !((0, _type.isBoolean)(value) ? value : (0, _type.isDefined)(value)); _this2.quill.format(formatName, newValue, USER_ACTION); _this2._updateFormatWidget(formatName, newValue, formats) } } }, { key: "_updateFormatWidget", value: function(formatName, isApplied, formats) { var widget = this._toolbarWidgets.getByName(formatName); if (!widget) { return } if (isApplied) { this._markActiveFormatWidget(formatName, widget, formats) } else { this._resetFormatWidget(formatName, widget); if (Object.prototype.hasOwnProperty.call(formatName)) { delete formats[formatName] } } this._toggleClearFormatting(isApplied || !(0, _type.isEmptyObject)(formats)) } }, { key: "_getFormatHandlers", value: function() { var _this3 = this; return { clear: function(e) { var range = _this3.quill.getSelection(); if (range) { _this3.quill.removeFormat(range); _this3.updateFormatWidgets() } }, link: this._prepareLinkHandler(), image: this._prepareImageHandler(), color: this._prepareColorClickHandler("color"), background: this._prepareColorClickHandler("background"), orderedList: this._prepareShortcutHandler("list", "ordered"), bulletList: this._prepareShortcutHandler("list", "bullet"), alignLeft: this._prepareShortcutHandler("align", "left"), alignCenter: this._prepareShortcutHandler("align", "center"), alignRight: this._prepareShortcutHandler("align", "right"), alignJustify: this._prepareShortcutHandler("align", "justify"), codeBlock: this._getDefaultClickHandler("code-block"), undo: function() { _this3.quill.history.undo() }, redo: function() { _this3.quill.history.redo() }, increaseIndent: function() { _this3.quill.format("indent", "+1", USER_ACTION) }, decreaseIndent: function() { _this3.quill.format("indent", "-1", USER_ACTION) }, superscript: this._prepareShortcutHandler("script", "super"), subscript: this._prepareShortcutHandler("script", "sub") } } }, { key: "_prepareShortcutHandler", value: function(formatName, shortcutValue) { var _this4 = this; return function() { var formats = _this4.quill.getFormat(); var value = formats[formatName] === shortcutValue ? false : shortcutValue; _this4.quill.format(formatName, value, USER_ACTION); _this4.updateFormatWidgets(true) } } }, { key: "_prepareLinkHandler", value: function() { var _this5 = this; return function() { _this5.quill.focus(); var selection = _this5.quill.getSelection(); var hasEmbedContent = _this5._hasEmbedContent(selection); var formats = selection ? _this5.quill.getFormat() : {}; var formData = { href: formats.link || "", text: selection && !hasEmbedContent ? _this5.quill.getText(selection) : "", target: Object.prototype.hasOwnProperty.call(formats, "target") ? !!formats.target : true }; _this5._editorInstance.formDialogOption("title", (0, _message.format)(DIALOG_LINK_CAPTION)); var promise = _this5._editorInstance.showFormDialog({ formData: formData, items: _this5._getLinkFormItems(selection) }); promise.done(function(formData) { if (selection && !hasEmbedContent) { var text = formData.text || formData.href; var index = selection.index, length = selection.length; formData.text = void 0; length && _this5.quill.deleteText(index, length, SILENT_ACTION); _this5.quill.insertText(index, text, "link", formData, USER_ACTION); _this5.quill.setSelection(index + text.length, 0, USER_ACTION) } else { formData.text = !selection && !formData.text ? formData.href : formData.text; _this5.quill.format("link", formData, USER_ACTION) } }); promise.fail(function() { _this5.quill.focus() }) } } }, { key: "_hasEmbedContent", value: function(selection) { return !!selection && this.quill.getText(selection).trim().length < selection.length } }, { key: "_getLinkFormItems", value: function(selection) { return [{ dataField: "href", label: { text: (0, _message.format)(DIALOG_LINK_FIELD_URL) } }, { dataField: "text", label: { text: (0, _message.format)(DIALOG_LINK_FIELD_TEXT) }, visible: !this._hasEmbedContent(selection) }, { dataField: "target", editorType: "dxCheckBox", editorOptions: { text: (0, _message.format)(DIALOG_LINK_FIELD_TARGET) }, cssClass: DIALOG_LINK_FIELD_TARGET_CLASS, label: { visible: false } }] } }, { key: "_prepareImageHandler", value: function() { var _this6 = this; return function() { var formData = _this6.quill.getFormat(); var isUpdateDialog = Object.prototype.hasOwnProperty.call(formData, "imageSrc"); var defaultIndex = _this6._defaultPasteIndex; if (isUpdateDialog) { var _this6$quill$getForma = _this6.quill.getFormat(defaultIndex - 1, 1), imageSrc = _this6$quill$getForma.imageSrc; formData.src = formData.imageSrc; delete formData.imageSrc; if (!imageSrc || 0 === defaultIndex) { _this6.quill.setSelection(defaultIndex + 1, 0, SILENT_ACTION) } } var formatIndex = _this6._embedFormatIndex; _this6._editorInstance.formDialogOption("title", (0, _message.format)(DIALOG_IMAGE_CAPTION)); var promise = _this6._editorInstance.showFormDialog({ formData: formData, items: _this6._imageFormItems }); promise.done(function(formData) { var index = defaultIndex; if (isUpdateDialog) { index = formatIndex; _this6.quill.deleteText(index, 1, SILENT_ACTION) } _this6.quill.insertEmbed(index, "extendedImage", formData, USER_ACTION); _this6.quill.setSelection(index + 1, 0, USER_ACTION) }).always(function() { _this6.quill.focus() }) } } }, { key: "_embedFormatIndex", get: function() { var selection = this.quill.getSelection(); if (selection) { if (selection.length) { return selection.index } else { return selection.index - 1 } } else { return this.quill.getLength() } } }, { key: "_defaultPasteIndex", get: function() { var selection = this.quill.getSelection(); return selection && selection.index || this.quill.getLength() } }, { key: "_imageFormItems", get: function() { return [{ dataField: "src", label: { text: (0, _message.format)(DIALOG_IMAGE_FIELD_URL) } }, { dataField: "width", label: { text: (0, _message.format)(DIALOG_IMAGE_FIELD_WIDTH) } }, { dataField: "height", label: { text: (0, _message.format)(DIALOG_IMAGE_FIELD_HEIGHT) } }, { dataField: "alt", label: { text: (0, _message.format)(DIALOG_IMAGE_FIELD_ALT) } }] } }, { key: "_renderToolbar", value: function() { var _this7 = this; var container = this.options.container || this._getContainer(); this._$toolbar = (0, _renderer2.default)("