devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
955 lines (931 loc) • 40.3 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/html_editor/utils/m_toolbar_helper.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ICON_MAP = void 0;
exports.applyFormat = applyFormat;
exports.getDefaultClickHandler = getDefaultClickHandler;
exports.getFormatHandlers = getFormatHandlers;
var _message = _interopRequireDefault(require("../../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _inflector = require("../../../../core/utils/inflector");
var _iterator = require("../../../../core/utils/iterator");
var _size = require("../../../../core/utils/size");
var _type = require("../../../../core/utils/type");
var _window = require("../../../../core/utils/window");
var _button_group = _interopRequireDefault(require("../../../../ui/button_group"));
var _color_box = _interopRequireDefault(require("../../../../ui/color_box"));
var _form = _interopRequireDefault(require("../../../../ui/form"));
var _scroll_view = _interopRequireDefault(require("../../../../ui/scroll_view"));
var _m_quill_importer = require("../m_quill_importer");
var _m_image_uploader_helper = require("./m_image_uploader_helper");
var _m_table_helper = require("./m_table_helper");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const MIN_HEIGHT = 400;
const BORDER_STYLES = ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
const USER_ACTION = "user";
const SILENT_ACTION = "silent";
const DIALOG_COLOR_CAPTION = "dxHtmlEditor-dialogColorCaption";
const DIALOG_BACKGROUND_CAPTION = "dxHtmlEditor-dialogBackgroundCaption";
const DIALOG_LINK_CAPTION = "dxHtmlEditor-dialogLinkCaption";
const DIALOG_TABLE_CAPTION = "dxHtmlEditor-dialogInsertTableCaption";
const DIALOG_LINK_FIELD_URL = "dxHtmlEditor-dialogLinkUrlField";
const DIALOG_LINK_FIELD_TEXT = "dxHtmlEditor-dialogLinkTextField";
const DIALOG_LINK_FIELD_TARGET = "dxHtmlEditor-dialogLinkTargetField";
const DIALOG_LINK_FIELD_TARGET_CLASS = "dx-formdialog-field-target";
const DIALOG_TABLE_FIELD_COLUMNS = "dxHtmlEditor-dialogInsertTableRowsField";
const DIALOG_TABLE_FIELD_ROWS = "dxHtmlEditor-dialogInsertTableColumnsField";
const ICON_MAP = exports.ICON_MAP = {
insertHeaderRow: "header",
clear: "clearformat"
};
function getBorderStylesTranslated() {
return BORDER_STYLES.map((style => ({
id: style,
value: _message.default.format(`dxHtmlEditor-borderStyle${(0,_inflector.camelize)(style,true)}`)
})))
}
function getFormatHandlers(module) {
return {
clear: _ref => {
let {
event: event
} = _ref;
const range = module.quill.getSelection();
if (range) {
var _getToolbarModule;
module.saveValueChangeEvent(event);
module.quill.removeFormat(range);
null === (_getToolbarModule = getToolbarModule(module)) || void 0 === _getToolbarModule || _getToolbarModule.updateFormatWidgets()
}
},
link: prepareLinkHandler(module),
image: prepareImageHandler(module, module.editorInstance.option("imageUpload")),
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: _ref2 => {
let {
event: event
} = _ref2;
module.saveValueChangeEvent(event);
module.quill.history.undo()
},
redo: _ref3 => {
let {
event: event
} = _ref3;
module.saveValueChangeEvent(event);
module.quill.history.redo()
},
increaseIndent: _ref4 => {
let {
event: event
} = _ref4;
applyFormat(module, ["indent", "+1", USER_ACTION], event)
},
decreaseIndent: _ref5 => {
let {
event: event
} = _ref5;
applyFormat(module, ["indent", "-1", USER_ACTION], event)
},
superscript: prepareShortcutHandler(module, "script", "super"),
subscript: prepareShortcutHandler(module, "script", "sub"),
insertTable: prepareInsertTableHandler(module),
insertHeaderRow: (0, _m_table_helper.getTableOperationHandler)(module.quill, "insertHeaderRow"),
insertRowAbove: (0, _m_table_helper.getTableOperationHandler)(module.quill, "insertRowAbove"),
insertRowBelow: (0, _m_table_helper.getTableOperationHandler)(module.quill, "insertRowBelow"),
insertColumnLeft: (0, _m_table_helper.getTableOperationHandler)(module.quill, "insertColumnLeft"),
insertColumnRight: (0, _m_table_helper.getTableOperationHandler)(module.quill, "insertColumnRight"),
deleteColumn: (0, _m_table_helper.getTableOperationHandler)(module.quill, "deleteColumn"),
deleteRow: (0, _m_table_helper.getTableOperationHandler)(module.quill, "deleteRow"),
deleteTable: (0, _m_table_helper.getTableOperationHandler)(module.quill, "deleteTable"),
cellProperties: prepareShowFormProperties(module, "cell"),
tableProperties: prepareShowFormProperties(module, "table")
}
}
function resetFormDialogOptions(editorInstance, _ref6) {
let {
contentTemplate: contentTemplate,
title: title,
minHeight: minHeight,
minWidth: minWidth,
maxWidth: maxWidth
} = _ref6;
editorInstance.formDialogOption({
contentTemplate: contentTemplate,
title: title,
minHeight: minHeight ?? 0,
minWidth: minWidth ?? 0,
maxWidth: maxWidth ?? "none"
})
}
function prepareShowFormProperties(module, type) {
return $element => {
var _$element;
if (!(null !== (_$element = $element) && void 0 !== _$element && _$element.length)) {
$element = (0, _renderer.default)(getTargetTableNode(module, type))
}
const [tableBlot, rowBlot] = module.quill.getModule("table").getTable() ?? [];
const formats = module.quill.getFormat(module.editorInstance.getSelection(true));
const tablePropertiesFormConfig = getFormConfigConstructor(type)(module, {
$element: $element,
formats: formats,
tableBlot: tableBlot,
rowBlot: rowBlot
});
const {
contentTemplate: contentTemplate,
title: title,
minHeight: minHeight,
minWidth: minWidth,
maxWidth: maxWidth
} = module.editorInstance._formDialog._popup.option();
const savedOptions = {
contentTemplate: contentTemplate,
title: title,
minHeight: minHeight,
minWidth: minWidth,
maxWidth: maxWidth
};
let formInstance;
module.editorInstance.formDialogOption({
contentTemplate: container => {
const $content = (0, _renderer.default)("<div>").appendTo(container);
const $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-${type}Properties`),
minHeight: 400,
minWidth: Math.min(800, .9 * (0, _size.getWidth)((0, _window.getWindow)()) - 1),
maxWidth: .9 * (0, _size.getWidth)((0, _window.getWindow)())
});
const promise = module.editorInstance.showFormDialog();
promise.done(((formData, event) => {
module.saveValueChangeEvent(event);
tablePropertiesFormConfig.applyHandler(formInstance);
resetFormDialogOptions(module.editorInstance, savedOptions)
}));
promise.fail((() => {
module.quill.focus();
resetFormDialogOptions(module.editorInstance, savedOptions)
}))
}
}
function applyFormat(module, formatArgs, event) {
module.saveValueChangeEvent(event);
module.quill.format(...formatArgs)
}
function getTargetTableNode(module, partName) {
const currentSelectionParts = module.quill.getModule("table").getTable();
return "table" === partName ? currentSelectionParts[0].domNode : currentSelectionParts[2].domNode
}
function getLinkRange(module, range) {
const Quill = (0, _m_quill_importer.getQuill)();
const LinkBlot = Quill.import("formats/link");
let link;
let linkOffset;
[link, linkOffset] = module.quill.scroll.descendant(LinkBlot, range.index);
if (!link && 0 === range.length) {
[link, linkOffset] = module.quill.scroll.descendant(LinkBlot, range.index - 1);
if (link) {
linkOffset += 1
}
}
const result = !link ? null : {
index: range.index - linkOffset,
length: link.length()
};
return result
}
function getColorFromFormat(value) {
return Array.isArray(value) ? value[0] : value
}
function prepareLinkHandler(module) {
return () => {
var _selection;
module.quill.focus();
let selection = module.quill.getSelection();
const formats = selection ? module.quill.getFormat() : {};
const isCursorAtLink = void 0 !== formats.link && 0 === (null === (_selection = selection) || void 0 === _selection ? void 0 : _selection.length);
let href = formats.link || "";
if (isCursorAtLink) {
const linkRange = getLinkRange(module, selection);
if (linkRange) {
selection = linkRange
} else {
href = ""
}
}
const selectionHasEmbedContent = (0, _m_table_helper.hasEmbedContent)(module, selection);
const formData = {
href: href,
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));
const promise = module.editorInstance.showFormDialog({
formData: formData,
items: getLinkFormItems(selectionHasEmbedContent)
});
promise.done(((formData, event) => {
if (selection && !selectionHasEmbedContent) {
const text = formData.text || formData.href;
const {
index: index,
length: length
} = selection;
formData.text = void 0;
module.saveValueChangeEvent(event);
length && module.quill.deleteText(index, length, "silent");
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((() => {
module.quill.focus()
}))
}
}
function prepareImageHandler(module, imageUploadOption) {
const imageUploader = new _m_image_uploader_helper.ImageUploader(module, imageUploadOption);
return () => {
imageUploader.render()
}
}
function getLinkFormItems(selectionHasEmbedContent) {
return [{
dataField: "href",
label: {
text: _message.default.format(DIALOG_LINK_FIELD_URL)
}
}, {
dataField: "text",
label: {
text: _message.default.format(DIALOG_LINK_FIELD_TEXT)
},
visible: !selectionHasEmbedContent
}, {
dataField: "target",
editorType: "dxCheckBox",
editorOptions: {
text: _message.default.format(DIALOG_LINK_FIELD_TARGET)
},
cssClass: "dx-formdialog-field-target",
label: {
visible: false
}
}]
}
function prepareColorClickHandler(module, name) {
return () => {
const formData = module.quill.getFormat();
const caption = "color" === name ? DIALOG_COLOR_CAPTION : DIALOG_BACKGROUND_CAPTION;
module.editorInstance.formDialogOption("title", _message.default.format(caption));
const promise = module.editorInstance.showFormDialog({
formData: formData,
items: [{
dataField: name,
editorType: "dxColorView",
editorOptions: {
focusStateEnabled: false
},
label: {
visible: false
}
}]
});
promise.done(((formData, event) => {
applyFormat(module, [name, formData[name], USER_ACTION], event)
}));
promise.fail((() => {
module.quill.focus()
}))
}
}
function prepareShortcutHandler(module, name, shortcutValue) {
return _ref7 => {
var _getToolbarModule2;
let {
event: event
} = _ref7;
const formats = module.quill.getFormat();
const value = formats[name] === shortcutValue ? false : shortcutValue;
applyFormat(module, [name, value, USER_ACTION], event);
null === (_getToolbarModule2 = getToolbarModule(module)) || void 0 === _getToolbarModule2 || _getToolbarModule2.updateFormatWidgets(true)
}
}
function getToolbarModule(module) {
return module._updateFormatWidget ? module : module.quill.getModule("toolbar")
}
function getDefaultClickHandler(module, name) {
return _ref8 => {
var _getToolbarModule3;
let {
event: event
} = _ref8;
const formats = module.quill.getFormat();
const value = formats[name];
const newValue = !((0, _type.isBoolean)(value) ? value : (0, _type.isDefined)(value));
applyFormat(module, [name, newValue, USER_ACTION], event);
null === (_getToolbarModule3 = getToolbarModule(module)) || void 0 === _getToolbarModule3 || _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 () => {
const formats = module.quill.getFormat();
const isTableFocused = module._tableFormats.some((format => Object.prototype.hasOwnProperty.call(formats, format)));
if (isTableFocused) {
module.quill.focus();
return
}
module.editorInstance.formDialogOption("title", _message.default.format(DIALOG_TABLE_CAPTION));
const promise = module.editorInstance.showFormDialog({
formData: {
rows: 1,
columns: 1
},
items: insertTableFormItems()
});
promise.done(((formData, event) => {
module.quill.focus();
const table = module.quill.getModule("table");
if (table) {
module.saveValueChangeEvent(event);
const {
columns: columns,
rows: rows
} = formData;
table.insertTable(columns, rows)
}
})).always((() => {
module.quill.focus()
}))
}
}
function getTablePropertiesFormConfig(module, _ref9) {
let {
$element: $element,
formats: formats,
tableBlot: tableBlot
} = _ref9;
const window = (0, _window.getWindow)();
let alignmentEditorInstance;
let borderColorEditorInstance;
let backgroundColorEditorInstance;
const $table = $element;
const {
editorInstance: editorInstance
} = module;
const startTableWidth = parseInt(formats.tableWidth) || (0, _size.getOuterWidth)($table);
const tableStyles = window.getComputedStyle($table.get(0));
const startTextAlign = "start" === tableStyles.textAlign ? "left" : tableStyles.textAlign;
const 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: getBorderStylesTranslated(),
valueExpr: "id",
displayExpr: "value",
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: e => {
const $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").borderColor,
onInitialized: 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: e => {
const $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").backgroundColor,
onInitialized: 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: () => {
const $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: e => {
alignmentEditorInstance = e.component
}
});
return $content
}
}]
}],
showColonAfterLabel: true,
labelLocation: "top",
minColWidth: 400
};
return {
formOptions: formOptions,
applyHandler: formInstance => {
const formData = formInstance.option("formData");
const newWidth = formData.width === startTableWidth ? void 0 : formData.width;
const 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, _ref10) {
let {
$element: $element,
formats: formats,
tableBlot: tableBlot,
rowBlot: rowBlot
} = _ref10;
const window = (0, _window.getWindow)();
let alignmentEditorInstance;
let verticalAlignmentEditorInstance;
let borderColorEditorInstance;
let backgroundColorEditorInstance;
const $cell = $element;
const startCellWidth = (0, _type.isDefined)(formats.cellWidth) ? parseInt(formats.cellWidth) : (0, _size.getOuterWidth)($cell);
const {
editorInstance: editorInstance
} = module;
const cellStyles = window.getComputedStyle($cell.get(0));
const startTextAlign = "start" === cellStyles.textAlign ? "left" : cellStyles.textAlign;
const formOptions = {
colCount: 2,
formData: {
width: startCellWidth,
height: (0, _type.isDefined)(formats.cellHeight) ? parseInt(formats.cellHeight) : (0, _size.getOuterHeight)($cell),
backgroundColor: getColorFromFormat(formats.cellBackgroundColor) || cellStyles.backgroundColor,
borderStyle: formats.cellBorderStyle || cellStyles.borderTopStyle,
borderColor: getColorFromFormat(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: getBorderStylesTranslated(),
valueExpr: "id",
displayExpr: "value"
}
}, {
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: e => {
const $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").borderColor,
onInitialized: 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: e => {
const $content = (0, _renderer.default)("<div>");
editorInstance._createComponent($content, _color_box.default, {
editAlphaChannel: true,
value: e.component.option("formData").backgroundColor,
onInitialized: 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: () => {
const $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: e => {
alignmentEditorInstance = e.component
}
});
return $content
}
}, {
itemType: "simple",
label: {
text: _message.default.format("dxHtmlEditor-vertical")
},
template: () => {
const $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: e => {
verticalAlignmentEditorInstance = e.component
}
});
return $content
}
}]
}],
showColonAfterLabel: true,
labelLocation: "top",
minColWidth: 400
};
return {
formOptions: formOptions,
applyHandler: formInstance => {
const formData = formInstance.option("formData");
const newWidth = formData.width === parseInt(startCellWidth) ? void 0 : formData.width;
const 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, _ref11) {
let {
$table: $table,
newHeight: newHeight,
newWidth: newWidth,
tableBlot: tableBlot
} = _ref11;
if ((0, _type.isDefined)(newWidth)) {
const autoWidthColumns = (0, _m_table_helper.getAutoSizedElements)($table);
if (autoWidthColumns.length > 0) {
module.editorInstance.format("tableWidth", `${newWidth}px`)
} else {
const $columns = (0, _m_table_helper.getColumnElements)($table);
const oldTableWidth = (0, _size.getOuterWidth)($table);
(0, _m_table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
});
(0, _iterator.each)($columns, ((i, element) => {
const $element = (0, _renderer.default)(element);
const newElementWidth = newWidth / oldTableWidth * (0, _size.getOuterWidth)($element);
const $lineElements = (0, _m_table_helper.getLineElements)($table, $element.index(), "horizontal");
(0, _m_table_helper.setLineElementsFormat)(module, {
elements: $lineElements,
property: "width",
value: newElementWidth
})
}))
}
}
const autoHeightRows = (0, _m_table_helper.getAutoSizedElements)($table, "vertical");
if ((null === autoHeightRows || void 0 === autoHeightRows ? void 0 : autoHeightRows.length) > 0) {
tableBlot.format("tableHeight", `${newHeight}px`)
} else {
const $rows = (0, _m_table_helper.getRowElements)($table);
const oldTableHeight = (0, _size.getOuterHeight)($table);
(0, _iterator.each)($rows, ((i, element) => {
const $element = (0, _renderer.default)(element);
const newElementHeight = newHeight / oldTableHeight * (0, _size.getOuterHeight)($element);
const $lineElements = (0, _m_table_helper.getLineElements)($table, i, "vertical");
(0, _m_table_helper.setLineElementsFormat)(module, {
elements: $lineElements,
property: "height",
value: newElementHeight
})
}))
}
}
function applyCellDimensionChanges(module, _ref12) {
let {
$cell: $cell,
newHeight: newHeight,
newWidth: newWidth,
tableBlot: tableBlot,
rowBlot: rowBlot
} = _ref12;
const $table = (0, _renderer.default)($cell.closest("table"));
if ((0, _type.isDefined)(newWidth)) {
const index = (0, _renderer.default)($cell).index();
let $verticalCells = (0, _m_table_helper.getLineElements)($table, index);
const widthDiff = newWidth - (0, _size.getOuterWidth)($cell);
const tableWidth = (0, _size.getOuterWidth)($table);
if (newWidth > tableWidth) {
(0, _m_table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
})
}(0, _m_table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: newWidth
});
const $nextColumnCell = $cell.next();
const shouldUpdateNearestColumnWidth = 0 === (0, _m_table_helper.getAutoSizedElements)($table).length;
if (shouldUpdateNearestColumnWidth) {
(0, _m_table_helper.unfixTableWidth)($table, {
tableBlot: tableBlot
});
if (1 === $nextColumnCell.length) {
$verticalCells = (0, _m_table_helper.getLineElements)($table, index + 1);
const nextColumnWidth = (0, _size.getOuterWidth)($verticalCells.eq(0)) - widthDiff;
(0, _m_table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: Math.max(nextColumnWidth, 0)
})
} else {
const $prevColumnCell = $cell.prev();
if (1 === $prevColumnCell.length) {
$verticalCells = (0, _m_table_helper.getLineElements)($table, index - 1);
const prevColumnWidth = (0, _size.getOuterWidth)($verticalCells.eq(0)) - widthDiff;
(0, _m_table_helper.setLineElementsFormat)(module, {
elements: $verticalCells,
property: "width",
value: Math.max(prevColumnWidth, 0)
})
}
}
}
}
rowBlot.children.forEach((rowCell => {
rowCell.format("cellHeight", `${newHeight}px`)
}));
const autoHeightRows = (0, _m_table_helper.getAutoSizedElements)($table, "vertical");
if (0 === autoHeightRows.length) {
$table.css("height", "auto")
}
}