devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
1,050 lines (1,016 loc) • 44.2 kB
JavaScript
/**
* DevExtreme (cjs/ui/html_editor/utils/toolbar_helper.js)
* Version: 21.2.4
* Build date: Mon Dec 06 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.ICON_MAP = void 0;
exports.applyFormat = applyFormat;
exports.getDefaultClickHandler = getDefaultClickHandler;
exports.getFormatHandlers = getFormatHandlers;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _message = _interopRequireDefault(require("../../../localization/message"));
var _table_helper = require("./table_helper");
var _type = require("../../../core/utils/type");
var _iterator = require("../../../core/utils/iterator");
var _form = _interopRequireDefault(require("../../form"));
var _button_group = _interopRequireDefault(require("../../button_group"));
var _color_box = _interopRequireDefault(require("../../color_box"));
var _scroll_view = _interopRequireDefault(require("../../scroll_view"));
var _size = require("../../../core/utils/size");
var _window = require("../../../core/utils/window");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread()
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}
function _iterableToArray(iter) {
if ("undefined" !== typeof Symbol && null != iter[Symbol.iterator] || null != iter["@@iterator"]) {
return Array.from(iter)
}
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
return _arrayLikeToArray(arr)
}
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest()
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) {
return
}
if ("string" === typeof o) {
return _arrayLikeToArray(o, minLen)
}
var n = Object.prototype.toString.call(o).slice(8, -1);
if ("Object" === n && o.constructor) {
n = o.constructor.name
}
if ("Map" === n || "Set" === n) {
return Array.from(o)
}
if ("Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) {
return _arrayLikeToArray(o, minLen)
}
}
function _arrayLikeToArray(arr, len) {
if (null == len || len > arr.length) {
len = arr.length
}
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i]
}
return arr2
}
function _iterableToArrayLimit(arr, i) {
var _i = null == arr ? null : "undefined" !== typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null == _i) {
return
}
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) {
break
}
}
} catch (err) {
_d = true;
_e = err
} finally {
try {
if (!_n && null != _i.return) {
_i.return()
}
} finally {
if (_d) {
throw _e
}
}
}
return _arr
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) {
return arr
}
}
var MIN_HEIGHT = 400;
var BORDER_STYLES = ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
var USER_ACTION = "user";
var SILENT_ACTION = "silent";
var DIALOG_COLOR_CAPTION = "dxHtmlEditor-dialogColorCaption";
var DIALOG_BACKGROUND_CAPTION = "dxHtmlEditor-dialogBackgroundCaption";
var DIALOG_LINK_CAPTION = "dxHtmlEditor-dialogLinkCaption";
var DIALOG_IMAGE_CAPTION = "dxHtmlEditor-dialogImageCaption";
var DIALOG_TABLE_CAPTION = "dxHtmlEditor-dialogInsertTableCaption";
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_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 DIALOG_TABLE_FIELD_COLUMNS = "dxHtmlEditor-dialogInsertTableRowsField";
var DIALOG_TABLE_FIELD_ROWS = "dxHtmlEditor-dialogInsertTableColumnsField";
var ICON_MAP = {
insertHeaderRow: "header",
clear: "clearformat"
};
exports.ICON_MAP = ICON_MAP;
function getFormatHandlers(module) {
return {
clear: function(_ref) {
var event = _ref.event;
var range = module.quill.getSelection();
if (range) {
var _getToolbarModule;
module.saveValueChangeEvent(event);
module.quill.removeFormat(range);
null === (_getToolbarModule = getToolbarModule(module)) || void 0 === _getToolbarModule ? void 0 : _getToolbarModule.updateFormatWidgets()
}
},
link: prepareLinkHandler(module),
image: prepareImageHandler(module),
color: prepareColorClickHandler(module, "color"),
background: prepareColorClickHandler(module, "background"),
orderedList: prepareShortcutHandler(module, "list", "ordered"),
bulletList: prepareShortcutHandler(module, "list", "bullet"),
alignLeft: prepareShortcutHandler(module, "align", "left"),
alignCenter: prepareShortcutHandler(module, "align", "center"),
alignRight: prepareShortcutHandler(module, "align", "right"),
alignJustify: prepareShortcutHandler(module, "align", "justify"),
codeBlock: getDefaultClickHandler(module, "code-block"),
undo: function(_ref2) {
var event = _ref2.event;
module.saveValueChangeEvent(event);
module.quill.history.undo()
},
redo: function(_ref3) {
var event = _ref3.event;
module.saveValueChangeEvent(event);
module.quill.history.redo()
},
increaseIndent: function(_ref4) {
var event = _ref4.event;
applyFormat(module, ["indent", "+1", USER_ACTION], event)
},
decreaseIndent: function(_ref5) {
var event = _ref5.event;
applyFormat(module, ["indent", "-1", USER_ACTION], event)
},
superscript: prepareShortcutHandler(module, "script", "super"),
subscript: prepareShortcutHandler(module, "script", "sub"),
insertTable: prepareInsertTableHandler(module),
insertHeaderRow: (0, _table_helper.getTableOperationHandler)(module.quill, "insertHeaderRow"),
insertRowAbove: (0, _table_helper.getTableOperationHandler)(module.quill, "insertRowAbove"),
insertRowBelow: (0, _table_helper.getTableOperationHandler)(module.quill, "insertRowBelow"),
insertColumnLeft: (0, _table_helper.getTableOperationHandler)(module.quill, "insertColumnLeft"),
insertColumnRight: (0, _table_helper.getTableOperationHandler)(module.quill, "insertColumnRight"),
deleteColumn: (0, _table_helper.getTableOperationHandler)(module.quill, "deleteColumn"),
deleteRow: (0, _table_helper.getTableOperationHandler)(module.quill, "deleteRow"),
deleteTable: (0, _table_helper.getTableOperationHandler)(module.quill, "deleteTable"),
cellProperties: prepareShowFormProperties(module, "cell"),
tableProperties: prepareShowFormProperties(module, "table")
}
}
function resetFormDialogOptions(editorInstance, _ref6) {
var contentTemplate = _ref6.contentTemplate,
title = _ref6.title,
minHeight = _ref6.minHeight,
minWidth = _ref6.minWidth,
maxWidth = _ref6.maxWidth;
editorInstance.formDialogOption({
contentTemplate: contentTemplate,
title: title,
minHeight: null !== minHeight && void 0 !== minHeight ? minHeight : 0,
minWidth: null !== minWidth && void 0 !== minWidth ? minWidth : 0,
maxWidth: null !== maxWidth && void 0 !== maxWidth ? maxWidth : "none"
})
}
function prepareShowFormProperties(module, type) {
return function($element) {
var _$element, _module$quill$getModu;
if (!(null !== (_$element = $element) && void 0 !== _$element && _$element.length)) {
$element = (0, _renderer.default)(getTargetTableNode(module, type))
}
var _ref7 = null !== (_module$quill$getModu = module.quill.getModule("table").getTable()) && void 0 !== _module$quill$getModu ? _module$quill$getModu : [],
_ref8 = _slicedToArray(_ref7, 2),
tableBlot = _ref8[0],
rowBlot = _ref8[1];
var formats = module.quill.getFormat(module.editorInstance.getSelection(true));
var tablePropertiesFormConfig = getFormConfigConstructor(type)(module, {
$element: $element,
formats: formats,
tableBlot: tableBlot,
rowBlot: rowBlot
});
var _module$editorInstanc = module.editorInstance._formDialog._popup.option(),
contentTemplate = _module$editorInstanc.contentTemplate,
title = _module$editorInstanc.title,
minHeight = _module$editorInstanc.minHeight,
minWidth = _module$editorInstanc.minWidth,
maxWidth = _module$editorInstanc.maxWidth;
var savedOptions = {
contentTemplate: contentTemplate,
title: title,
minHeight: minHeight,
minWidth: minWidth,
maxWidth: maxWidth
};
var formInstance;
module.editorInstance.formDialogOption({
contentTemplate: function(container) {
var $content = (0, _renderer.default)("<div>").appendTo(container);
var $form = (0, _renderer.default)("<div>").appendTo($content);
module.editorInstance._createComponent($form, _form.default, tablePropertiesFormConfig.formOptions);
module.editorInstance._createComponent($content, _scroll_view.default, {});
formInstance = $form.dxForm("instance");
return $content
},
title: _message.default.format("dxHtmlEditor-".concat(type, "Properties")),
minHeight: MIN_HEIGHT,
minWidth: Math.min(800, .9 * (0, _size.getWidth)((0, _window.getWindow)()) - 1),
maxWidth: .9 * (0, _size.getWidth)((0, _window.getWindow)())
});
var promise = module.editorInstance.showFormDialog();
promise.done((function(formData, event) {
module.saveValueChangeEvent(event);
tablePropertiesFormConfig.applyHandler(formInstance);
resetFormDialogOptions(module.editorInstance, savedOptions)
}));
promise.fail((function() {
module.quill.focus();
resetFormDialogOptions(module.editorInstance, savedOptions)
}))
}
}
function applyFormat(module, formatArgs, event) {
var _module$quill;
module.editorInstance._saveValueChangeEvent(event);
(_module$quill = module.quill).format.apply(_module$quill, _toConsumableArray(formatArgs))
}
function getTargetTableNode(module, partName) {
var currentSelectionParts = module.quill.getModule("table").getTable();
return "table" === partName ? currentSelectionParts[0].domNode : currentSelectionParts[2].domNode
}
function prepareLinkHandler(module) {
return function() {
module.quill.focus();
var selection = module.quill.getSelection();
var selectionHasEmbedContent = (0, _table_helper.hasEmbedContent)(module, selection);
var formats = selection ? module.quill.getFormat() : {};
var formData = {
href: formats.link || "",
text: selection && !selectionHasEmbedContent ? module.quill.getText(selection) : "",
target: Object.prototype.hasOwnProperty.call(formats, "target") ? !!formats.target : true
};
module.editorInstance.formDialogOption("title", _message.default.format(DIALOG_LINK_CAPTION));
var promise = module.editorInstance.showFormDialog({
formData: formData,
items: getLinkFormItems(module, selection)
});
promise.done((function(formData, event) {
if (selection && !selectionHasEmbedContent) {
var text = formData.text || formData.href;
var index = selection.index,
length = selection.length;
formData.text = void 0;
module.saveValueChangeEvent(event);
length && module.quill.deleteText(index, length, SILENT_ACTION);
module.quill.insertText(index, text, "link", formData, USER_ACTION);
module.quill.setSelection(index + text.length, 0, USER_ACTION)
} else {
formData.text = !selection && !formData.text ? formData.href : formData.text;
applyFormat(module, ["link", formData, USER_ACTION], event)
}
}));
promise.fail((function() {
module.quill.focus()
}))
}
}
function prepareImageHandler(module) {
return function() {
var formData = module.quill.getFormat();
var isUpdateDialog = Object.prototype.hasOwnProperty.call(formData, "imageSrc");
var defaultIndex = defaultPasteIndex(module);
if (isUpdateDialog) {
var _module$quill$getForm = module.quill.getFormat(defaultIndex - 1, 1),
imageSrc = _module$quill$getForm.imageSrc;
formData.src = formData.imageSrc;
delete formData.imageSrc;
if (!imageSrc || 0 === defaultIndex) {
module.quill.setSelection(defaultIndex + 1, 0, SILENT_ACTION)
}
}
var formatIndex = embedFormatIndex(module);
module.editorInstance.formDialogOption("title", _message.default.format(DIALOG_IMAGE_CAPTION));
var promise = module.editorInstance.showFormDialog({
formData: formData,
items: imageFormItems()
});
promise.done((function(formData, event) {
var index = defaultIndex;
module.saveValueChangeEvent(event);
if (isUpdateDialog) {
index = formatIndex;
module.quill.deleteText(index, 1, SILENT_ACTION)
}
module.quill.insertEmbed(index, "extendedImage", formData, USER_ACTION);
module.quill.setSelection(index + 1, 0, USER_ACTION)
})).always((function() {
module.quill.focus()
}))
}
}
function getLinkFormItems(module, selection) {
return [{
dataField: "href",
label: {
text: _message.default.format(DIALOG_LINK_FIELD_URL)
}
}, {
dataField: "text",
label: {
text: _message.default.format(DIALOG_LINK_FIELD_TEXT)
},
visible: !(0, _table_helper.hasEmbedContent)(module, selection)
}, {
dataField: "target",
editorType: "dxCheckBox",
editorOptions: {
text: _message.default.format(DIALOG_LINK_FIELD_TARGET)
},
cssClass: DIALOG_LINK_FIELD_TARGET_CLASS,
label: {
visible: false
}
}]
}
function embedFormatIndex(module) {
var selection = module.quill.getSelection();
if (selection) {
if (selection.length) {
return selection.index
} else {
return selection.index - 1
}
} else {
return module.quill.getLength()
}
}
function defaultPasteIndex(module) {
var _selection$index;
var selection = module.quill.getSelection();
return null !== (_selection$index = null === selection || void 0 === selection ? void 0 : selection.index) && void 0 !== _selection$index ? _selection$index : module.quill.getLength()
}
function imageFormItems() {
return [{
dataField: "src",
label: {
text: _message.default.format(DIALOG_IMAGE_FIELD_URL)
}
}, {
dataField: "width",
label: {
text: _message.default.format(DIALOG_IMAGE_FIELD_WIDTH)
}
}, {
dataField: "height",
label: {
text: _message.default.format(DIALOG_IMAGE_FIELD_HEIGHT)
}
}, {
dataField: "alt",
label: {
text: _message.default.format(DIALOG_IMAGE_FIELD_ALT)
}
}]
}
function prepareColorClickHandler(module, name) {
return function() {
var formData = module.quill.getFormat();
var caption = "color" === name ? DIALOG_COLOR_CAPTION : DIALOG_BACKGROUND_CAPTION;
module.editorInstance.formDialogOption("title", _message.default.format(caption));
var promise = module.editorInstance.showFormDialog({
formData: formData,
items: [{
dataField: name,
editorType: "dxColorView",
editorOptions: {
focusStateEnabled: false
},
label: {
visible: false
}
}]
});
promise.done((function(formData, event) {
applyFormat(module, [name, formData[name], USER_ACTION], event)
}));
promise.fail((function() {
module.quill.focus()
}))
}
}
function prepareShortcutHandler(module, name, shortcutValue) {
return function(_ref9) {
var _getToolbarModule2;
var event = _ref9.event;
var formats = module.quill.getFormat();
var value = formats[name] === shortcutValue ? false : shortcutValue;
applyFormat(module, [name, value, USER_ACTION], event);
null === (_getToolbarModule2 = getToolbarModule(module)) || void 0 === _getToolbarModule2 ? void 0 : _getToolbarModule2.updateFormatWidgets(true)
}
}
function getToolbarModule(module) {
return module._updateFormatWidget ? module : module.quill.getModule("toolbar")
}
function getDefaultClickHandler(module, name) {
return function(_ref10) {
var _getToolbarModule3;
var event = _ref10.event;
var formats = module.quill.getFormat();
var value = formats[name];
var newValue = !((0, _type.isBoolean)(value) ? value : (0, _type.isDefined)(value));
applyFormat(module, [name, newValue, USER_ACTION], event);
null === (_getToolbarModule3 = getToolbarModule(module)) || void 0 === _getToolbarModule3 ? void 0 : _getToolbarModule3._updateFormatWidget(name, newValue, formats)
}
}
function insertTableFormItems() {
return [{
dataField: "columns",
editorType: "dxNumberBox",
editorOptions: {
min: 1
},
label: {
text: _message.default.format(DIALOG_TABLE_FIELD_COLUMNS)
}
}, {
dataField: "rows",
editorType: "dxNumberBox",
editorOptions: {
min: 1
},
label: {
text: _message.default.format(DIALOG_TABLE_FIELD_ROWS)
}
}]
}
function prepareInsertTableHandler(module) {
return function() {
var formats = module.quill.getFormat();
var isTableFocused = module._tableFormats.some((function(format) {
return Object.prototype.hasOwnProperty.call(formats, format)
}));
if (isTableFocused) {
module.quill.focus();
return
}
module.editorInstance.formDialogOption("title", _message.default.format(DIALOG_TABLE_CAPTION));
var promise = module.editorInstance.showFormDialog({
formData: {
rows: 1,
columns: 1
},
items: insertTableFormItems()
});
promise.done((function(formData, event) {
module.quill.focus();
var table = module.quill.getModule("table");
if (table) {
module.saveValueChangeEvent(event);
var columns = formData.columns,
rows = formData.rows;
table.insertTable(columns, rows)
}
})).always((function() {
module.quill.focus()
}))
}
}
function getTablePropertiesFormConfig(module, _ref11) {
var $element = _ref11.$element,
formats = _ref11.formats,
tableBlot = _ref11.tableBlot;
var window = (0, _window.getWindow)();
var alignmentEditorInstance;
var borderColorEditorInstance;
var backgroundColorEditorInstance;
var $table = $element;
var editorInstance = module.editorInstance;
var startTableWidth = (0, _type.isDefined)(formats.tableWidth) ? parseInt(formats.tableWidth) : (0, _size.getOuterWidth)($table);
var tableStyles = window.getComputedStyle($table.get(0));
var startTextAlign = "start" === tableStyles.textAlign ? "left" : tableStyles.textAlign;
var formOptions = {
colCount: 2,
formData: {
width: startTableWidth,
height: (0, _type.isDefined)(formats.tableHeight) ? parseInt(formats.tableHeight) : (0, _size.getOuterHeight)($table),
backgroundColor: formats.tableBackgroundColor || tableStyles.backgroundColor,
borderStyle: formats.tableBorderStyle || tableStyles.borderTopStyle,
borderColor: formats.tableBorderColor || tableStyles.borderTopColor,
borderWidth: parseInt((0, _type.isDefined)(formats.tableBorderWidth) ? formats.tableBorderWidth : tableStyles.borderTopWidth),
alignment: formats.tableAlign || startTextAlign
},
items: [{
itemType: "group",
caption: _message.default.format("dxHtmlEditor-border"),
colCountByScreen: {
xs: 2
},
colCount: 2,
items: [{
dataField: "borderStyle",
label: {
text: _message.default.format("dxHtmlEditor-style")
},
editorType: "dxSelectBox",
editorOptions: {
items: BORDER_STYLES,
placeholder: "Select style"
}
}, {
dataField: "borderWidth",
label: {
text: _message.default.format("dxHtmlEditor-borderWidth")
},
editorOptions: {
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
itemType: "simple",
dataField: "borderColor",
label: {
text: _message.default.format("dxHtmlEditor-borderColor")
},
colSpan: 2,
template: function(e) {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").borderColor,
onInitialized: function(e) {
borderColorEditorInstance = e.component
}
});
return $content
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-dimensions"),
colCountByScreen: {
xs: 2
},
colCount: 2,
items: [{
dataField: "width",
label: {
text: _message.default.format("dxHtmlEditor-width")
},
editorOptions: {
min: 0,
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
dataField: "height",
label: {
text: _message.default.format("dxHtmlEditor-height")
},
editorOptions: {
min: 0,
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-tableBackground"),
items: [{
itemType: "simple",
dataField: "backgroundColor",
label: {
text: _message.default.format("dxHtmlEditor-borderColor")
},
template: function(e) {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").backgroundColor,
onInitialized: function(e) {
backgroundColorEditorInstance = e.component
}
});
return $content
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-alignment"),
items: [{
itemType: "simple",
label: {
text: _message.default.format("dxHtmlEditor-horizontal")
},
template: function() {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _button_group.default, {
items: [{
value: "left",
icon: "alignleft"
}, {
value: "center",
icon: "aligncenter"
}, {
value: "right",
icon: "alignright"
}, {
value: "justify",
icon: "alignjustify"
}],
keyExpr: "value",
selectedItemKeys: [startTextAlign],
onInitialized: function(e) {
alignmentEditorInstance = e.component
}
});
return $content
}
}]
}],
showColonAfterLabel: true,
labelLocation: "top",
minColWidth: 400
};
return {
formOptions: formOptions,
applyHandler: function(formInstance) {
var formData = formInstance.option("formData");
var newWidth = formData.width === startTableWidth ? void 0 : formData.width;
var newHeight = formData.height;
applyTableDimensionChanges(module, {
$table: $table,
newHeight: newHeight,
newWidth: newWidth,
tableBlot: tableBlot
});
module.editorInstance.format("tableBorderStyle", formData.borderStyle);
module.editorInstance.format("tableBorderWidth", formData.borderWidth + "px");
module.editorInstance.format("tableBorderColor", borderColorEditorInstance.option("value"));
module.editorInstance.format("tableBackgroundColor", backgroundColorEditorInstance.option("value"));
module.editorInstance.format("tableTextAlign", alignmentEditorInstance.option("selectedItemKeys")[0])
}
}
}
function getCellPropertiesFormConfig(module, _ref12) {
var $element = _ref12.$element,
formats = _ref12.formats,
tableBlot = _ref12.tableBlot,
rowBlot = _ref12.rowBlot;
var window = (0, _window.getWindow)();
var alignmentEditorInstance;
var verticalAlignmentEditorInstance;
var borderColorEditorInstance;
var backgroundColorEditorInstance;
var $cell = $element;
var startCellWidth = (0, _type.isDefined)(formats.cellWidth) ? parseInt(formats.cellWidth) : (0, _size.getOuterWidth)($cell);
var editorInstance = module.editorInstance;
var cellStyles = window.getComputedStyle($cell.get(0));
var startTextAlign = "start" === cellStyles.textAlign ? "left" : cellStyles.textAlign;
var formOptions = {
colCount: 2,
formData: {
width: startCellWidth,
height: (0, _type.isDefined)(formats.cellHeight) ? parseInt(formats.cellHeight) : (0, _size.getOuterHeight)($cell),
backgroundColor: formats.cellBackgroundColor || cellStyles.backgroundColor,
borderStyle: formats.cellBorderStyle || cellStyles.borderTopStyle,
borderColor: formats.cellBorderColor || cellStyles.borderTopColor,
borderWidth: parseInt((0, _type.isDefined)(formats.cellBorderWidth) ? formats.cellBorderWidth : cellStyles.borderTopWidth),
alignment: formats.cellTextAlign || startTextAlign,
verticalAlignment: formats.cellVerticalAlign || cellStyles.verticalAlign,
verticalPadding: parseInt((0, _type.isDefined)(formats.cellPaddingTop) ? formats.cellPaddingTop : cellStyles.paddingTop),
horizontalPadding: parseInt((0, _type.isDefined)(formats.cellPaddingLeft) ? formats.cellPaddingLeft : cellStyles.paddingLeft)
},
items: [{
itemType: "group",
caption: _message.default.format("dxHtmlEditor-border"),
colCountByScreen: {
xs: 2
},
colCount: 2,
items: [{
dataField: "borderStyle",
label: {
text: _message.default.format("dxHtmlEditor-style")
},
editorType: "dxSelectBox",
editorOptions: {
items: BORDER_STYLES
}
}, {
dataField: "borderWidth",
label: {
text: _message.default.format("dxHtmlEditor-borderWidth")
},
editorOptions: {
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
itemType: "simple",
dataField: "borderColor",
colSpan: 2,
label: {
text: _message.default.format("dxHtmlEditor-borderColor")
},
template: function(e) {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").borderColor,
onInitialized: function(e) {
borderColorEditorInstance = e.component
}
});
return $content
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-dimensions"),
colCount: 2,
colCountByScreen: {
xs: 2
},
items: [{
dataField: "width",
label: {
text: _message.default.format("dxHtmlEditor-width")
},
editorOptions: {
min: 0,
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
dataField: "height",
label: {
text: _message.default.format("dxHtmlEditor-height")
},
editorOptions: {
min: 0,
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
dataField: "verticalPadding",
label: {
text: _message.default.format("dxHtmlEditor-paddingVertical")
},
editorOptions: {
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}, {
label: {
text: _message.default.format("dxHtmlEditor-paddingHorizontal")
},
dataField: "horizontalPadding",
editorOptions: {
placeholder: _message.default.format("dxHtmlEditor-pixels")
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-tableBackground"),
items: [{
itemType: "simple",
dataField: "backgroundColor",
label: {
text: _message.default.format("dxHtmlEditor-borderColor")
},
template: function(e) {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").backgroundColor,
onInitialized: function(e) {
backgroundColorEditorInstance = e.component
}
});
return $content
}
}]
}, {
itemType: "group",
caption: _message.default.format("dxHtmlEditor-alignment"),
colCount: 2,
items: [{
itemType: "simple",
label: {
text: _message.default.format("dxHtmlEditor-horizontal")
},
template: function() {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _button_group.default, {
items: [{
value: "left",
icon: "alignleft"
}, {
value: "center",
icon: "aligncenter"
}, {
value: "right",
icon: "alignright"
}, {
value: "justify",
icon: "alignjustify"
}],
keyExpr: "value",
selectedItemKeys: [startTextAlign],
onInitialized: function(e) {
alignmentEditorInstance = e.component
}
});
return $content
}
}, {
itemType: "simple",
label: {
text: _message.default.format("dxHtmlEditor-vertical")
},
template: function() {
var $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _button_group.default, {
items: [{
value: "top",
icon: "verticalaligntop"
}, {
value: "middle",
icon: "verticalaligncenter"
}, {
value: "bottom",
icon: "verticalalignbottom"
}],
keyExpr: "value",
selectedItemKeys: [cellStyles.verticalAlign],
onInitialized: function(e) {
verticalAlignmentEditorInstance = e.component
}
});
return $content
}
}]
}],
showColonAfterLabel: true,
labelLocation: "top",
minColWidth: 400
};
return {
formOptions: formOptions,
applyHandler: function(formInstance) {
var formData = formInstance.option("formData");
var newWidth = formData.width === parseInt(startCellWidth) ? void 0 : formData.width;
var newHeight = formData.height;
applyCellDimensionChanges(module, {
$cell: $cell,
newHeight: newHeight,
newWidth: newWidth,
tableBlot: tableBlot,
rowBlot: rowBlot
});
module.editorInstance.format("cellBorderWidth", formData.borderWidth + "px");
module.editorInstance.format("cellBorderColor", borderColorEditorInstance.option("value"));
module.editorInstance.format("cellBorderStyle", formData.borderStyle);
module.editorInstance.format("cellBackgroundColor", backgroundColorEditorInstance.option("value"));
module.editorInstance.format("cellTextAlign", alignmentEditorInstance.option("selectedItemKeys")[0]);
module.editorInstance.format("cellVerticalAlign", verticalAlignmentEditorInstance.option("selectedItemKeys")[0]);
module.editorInstance.format("cellPaddingLeft", formData.horizontalPadding + "px");
module.editorInstance.format("cellPaddingRight", formData.horizontalPadding + "px");
module.editorInstance.format("cellPaddingTop", formData.verticalPadding + "px");
module.editorInstance.format("cellPaddingBottom", formData.verticalPadding + "px")
}
}
}
function getFormConfigConstructor(type) {
return "cell" === type ? getCellPropertiesFormConfig : getTablePropertiesFormConfig
}
function applyTableDimensionChanges(module, _ref13) {
var $table = _ref13.$table,
newHeight = _ref13.newHeight,
newWidth = _ref13.newWidth,
tableBlot = _ref13.tableBlot;
if ((0, _type.isDefined)(newWidth)) {
var autoWidthColumns = (0, _table_helper.getAutoSizedElements)($table);
if (autoWidthColumns.length > 0) {
module.editorInstance.format("tableWidth", newWidth + "px")
} else {
var $columns = (0, _table_helper.getColumnElements)($table);
var oldTableWidth = (0, _size.getOuterWidth)($table);
(0, _table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
});
(0, _iterator.each)($columns, (function(i, element) {
var $element = (0, _renderer.default)(element);
var newElementWidth = newWidth / oldTableWidth * (0, _size.getOuterWidth)($element);
var $lineElements = (0, _table_helper.getLineElements)($table, $element.index(), "horizontal");
(0, _table_helper.setLineElementsFormat)(module, {
elements: $lineElements,
property: "width",
value: newElementWidth
})
}))
}
}
var autoHeightRows = (0, _table_helper.getAutoSizedElements)($table, "vertical");
if ((null === autoHeightRows || void 0 === autoHeightRows ? void 0 : autoHeightRows.length) > 0) {
tableBlot.format("tableHeight", newHeight + "px")
} else {
var $rows = (0, _table_helper.getRowElements)($table);
var oldTableHeight = (0, _size.getOuterHeight)($table);
(0, _iterator.each)($rows, (function(i, element) {
var $element = (0, _renderer.default)(element);
var newElementHeight = newHeight / oldTableHeight * (0, _size.getOuterHeight)($element);
var $lineElements = (0, _table_helper.getLineElements)($table, i, "vertical");
(0, _table_helper.setLineElementsFormat)(module, {
elements: $lineElements,
property: "height",
value: newElementHeight
})
}))
}
}
function applyCellDimensionChanges(module, _ref14) {
var $cell = _ref14.$cell,
newHeight = _ref14.newHeight,
newWidth = _ref14.newWidth,
tableBlot = _ref14.tableBlot,
rowBlot = _ref14.rowBlot;
var $table = (0, _renderer.default)($cell.closest("table"));
if ((0, _type.isDefined)(newWidth)) {
var index = (0, _renderer.default)($cell).index();
var $verticalCells = (0, _table_helper.getLineElements)($table, index);
var widthDiff = newWidth - (0, _size.getOuterWidth)($cell);
var tableWidth = (0, _size.getOuterWidth)($table);
if (newWidth > tableWidth) {
(0, _table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
})
}(0, _table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: newWidth
});
var $nextColumnCell = $cell.next();
var shouldUpdateNearestColumnWidth = 0 === (0, _table_helper.getAutoSizedElements)($table).length;
if (shouldUpdateNearestColumnWidth) {
(0, _table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
});
if (1 === $nextColumnCell.length) {
$verticalCells = (0, _table_helper.getLineElements)($table, index + 1);
var nextColumnWidth = (0, _size.getOuterWidth)($verticalCells.eq(0)) - widthDiff;
(0, _table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: Math.max(nextColumnWidth, 0)
})
} else {
var $prevColumnCell = $cell.prev();
if (1 === $prevColumnCell.length) {
$verticalCells = (0, _table_helper.getLineElements)($table, index - 1);
var prevColumnWidth = (0, _size.getOuterWidth)($verticalCells.eq(0)) - widthDiff;
(0, _table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: Math.max(prevColumnWidth, 0)
})
}
}
}
}
rowBlot.children.forEach((function(rowCell) {
rowCell.format("cellHeight", newHeight + "px")
}));
var autoHeightRows = (0, _table_helper.getAutoSizedElements)($table, "vertical");
if (0 === autoHeightRows.length) {
$table.css("height", "auto")
}
}