@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
250 lines (249 loc) • 11.5 kB
JavaScript
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
/**
* Helper class for style operations in Document Editor
* @private
*/
var StylesHelper = /** @class */ (function () {
function StylesHelper() {
}
/**
* Get style items for gallery
*
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {L10n} localObj - Localization object
* @returns {RibbonGalleryItemModel[]} Array of style gallery items
*/
StylesHelper.getStyleItems = function (documentEditor, localObj) {
var styles = [];
// Get styles from document's stylesMap
if (documentEditor && documentEditor.documentHelper && documentEditor.documentHelper.stylesMap) {
var stylesMap = documentEditor.documentHelper.stylesMap;
// First add important default styles in proper order
var defaultStyleNames = [
'Normal', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4',
'Title', 'Subtitle', 'Quote', 'Emphasis', 'Strong'
];
// Process styles by type: Paragraph, Character, and Linked
var paragraphStyles = stylesMap.get('Paragraph') || [];
var characterStyles = stylesMap.get('Character') || [];
var linkedStyles = stylesMap.get('Linked') || [];
// Create lookup maps for faster access
var stylesMaps = StylesHelper.createStyleMaps(paragraphStyles, linkedStyles, characterStyles);
// Add default styles first in the specified order
StylesHelper.addDefaultStyles(styles, defaultStyleNames, stylesMaps, localObj);
// Track added styles to avoid duplicates
var addedStylesMap_1 = {};
/* eslint-disable */
defaultStyleNames.forEach(function (name) { if (localObj.getConstant(name) !== '')
addedStylesMap_1[localObj.getConstant(name)] = true; });
// defaultStyleNames.forEach((name: string) => {
// Object.prototype.hasOwnProperty.call(addedStylesMap, name) || (addedStylesMap[name] = true);
// });
// Add remaining styles
StylesHelper.addRemainingStyles(styles, paragraphStyles, linkedStyles, addedStylesMap_1);
//Add character styles
for (var _i = 0, linkedStyles_1 = linkedStyles; _i < linkedStyles_1.length; _i++) {
var linkedStyle = linkedStyles_1[_i];
for (var _a = 0, characterStyles_1 = characterStyles; _a < characterStyles_1.length; _a++) {
var charStyle = characterStyles_1[_a];
if (linkedStyle['StyleName'] + ' Char' === charStyle['StyleName']) {
characterStyles.splice(characterStyles.indexOf(charStyle), 1);
break;
}
}
}
StylesHelper.addRemainingStyles(styles, characterStyles, linkedStyles, addedStylesMap_1);
}
// If no styles found, provide some defaults
if (styles.length === 0) {
styles.push({
content: localObj.getConstant('Normal'),
htmlAttributes: {
style: 'font-family: Calibri; font-size: 11pt;',
title: localObj.getConstant('Normal')
}
});
styles.push({
content: localObj.getConstant('Heading 1'),
htmlAttributes: {
style: 'font-family: "Calibri Light"; font-size: 16pt; color: #2F5496; font-weight: bold;',
title: localObj.getConstant('Heading 1')
}
});
}
return styles;
};
StylesHelper.createStyleMaps = function (paragraphStyles, linkedStyles, characterStyles) {
var createStyleMap = function (styles) {
var map = {};
for (var i = 0; i < styles.length; i++) {
map[styles[parseInt(i.toString(), 10)].StyleName] = styles[parseInt(i.toString(), 10)];
}
return map;
};
return {
paragraphStyleMap: createStyleMap(paragraphStyles),
linkedStyleMap: createStyleMap(linkedStyles),
characterStyleMap: createStyleMap(characterStyles)
};
};
StylesHelper.addDefaultStyles = function (styles, defaultStyleNames, stylesMaps, localObj) {
var paragraphStyleMap = stylesMaps.paragraphStyleMap, linkedStyleMap = stylesMaps.linkedStyleMap, characterStyleMap = stylesMaps.characterStyleMap;
for (var i = 0; i < defaultStyleNames.length; i++) {
var styleName = localObj.getConstant(defaultStyleNames[parseInt(i.toString(), 10)]);
// Direct lookup is much faster than looping
var styleInfo = paragraphStyleMap[styleName] ||
linkedStyleMap[styleName] ||
characterStyleMap[styleName];
if (styleInfo) {
styles.push({
content: styleName,
htmlAttributes: {
style: styleInfo.Style,
title: styleName
}
});
}
}
};
StylesHelper.addRemainingStyles = function (styles, paragraphStyles, linkedStyles, addedStylesMap) {
// Add remaining paragraph styles
for (var i = 0; i < paragraphStyles.length; i++) {
var style = paragraphStyles[parseInt(i.toString(), 10)];
if (!addedStylesMap[style.StyleName]) {
styles.push({
content: style.StyleName,
htmlAttributes: {
style: style.Style,
title: style.StyleName
}
});
addedStylesMap[style.StyleName] = true;
}
}
// Add linked styles
for (var i = 0; i < linkedStyles.length; i++) {
var style = linkedStyles[parseInt(i.toString(), 10)];
if (!addedStylesMap[style.StyleName]) {
styles.push({
content: style.StyleName,
htmlAttributes: {
style: style.Style,
title: style.StyleName
}
});
addedStylesMap[style.StyleName] = true;
}
}
};
/**
* Get the current style name from selection
*
* @param {DocumentEditor} documentEditor - Document editor instance
* @returns {string} The current style name
*/
StylesHelper.getCurrentStyleName = function (documentEditor, localObj) {
if (!documentEditor || !documentEditor.selection) {
return 'Normal';
}
var characterFormat = documentEditor.selection.characterFormat;
var paragraphFormat = documentEditor.selection.paragraphFormat;
if (paragraphFormat && paragraphFormat.styleName) {
var localeValue = localObj.getConstant(paragraphFormat.styleName);
return (isNullOrUndefined(localeValue) || localeValue == '') ? paragraphFormat.styleName : localeValue;
}
else if (characterFormat && characterFormat.styleName &&
characterFormat.styleName !== 'Default Paragraph Font') {
return localObj.getConstant(characterFormat.styleName);
}
return 'Normal';
};
/**
* Find the index of a style in the gallery items
*
* @param {string} styleName - Style name to find
* @param {RibbonGalleryItemModel[]} items - Gallery items array
* @returns {number} Index of the style or -1 if not found
*/
StylesHelper.findStyleIndex = function (styleName, items) {
if (!items) {
return -1;
}
for (var i = 0; i < items.length; i++) {
if (items[parseInt(i.toString(), 10)] && items[parseInt(i.toString(), 10)].content === styleName) {
return i;
}
}
return -1;
};
/**
* Apply a style to the document
*
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {string} styleName - Style name to apply
* @returns {void}
*/
StylesHelper.applyStyle = function (documentEditor, styleName) {
if (!documentEditor.isReadOnly && documentEditor.editorModule) {
documentEditor.editorModule.applyStyle(styleName, true);
}
};
/**
* Update style names in ComboBox
*
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {any} style - ComboBox instance
* @param {L10n} localObj - Localization object
* @returns {string} Current style name
*/
StylesHelper.updateStyleNames = function (documentEditor, style, localObj) {
var styleName = !isNullOrUndefined(style.itemData) ? style.itemData.StyleName : undefined;
var stylesMap = documentEditor.documentHelper.stylesMap;
var paraStyles = stylesMap.get('Paragraph') ? stylesMap.get('Paragraph') : [];
var linkedStyles = stylesMap.get('Linked') ? stylesMap.get('Linked') : [];
var charStyles = stylesMap.get('Character') ? stylesMap.get('Character') : [];
// Filter out character styles that are part of linked styles
for (var _i = 0, linkedStyles_2 = linkedStyles; _i < linkedStyles_2.length; _i++) {
var linkedStyle = linkedStyles_2[_i];
for (var i = 0; i < charStyles.length; i++) {
var charStyle = charStyles[parseInt(i.toString(), 10)];
if (linkedStyle['StyleName'] + ' Char' === charStyle['StyleName']) {
charStyles.splice(i, 1);
break;
}
}
}
// Update ComboBox data source
style.dataSource = paraStyles.concat(linkedStyles, charStyles);
return styleName;
};
/* eslint-enable */
/**
* Apply style value from ComboBox selection
*
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {any} args - ComboBox change event arguments
* @returns {void}
*/
StylesHelper.applyStyleValue = function (documentEditor, args) {
if (!documentEditor.isReadOnly && documentEditor.editorModule) {
var styleName = documentEditor.stylesDialogModule.getStyleName(SanitizeHtmlHelper.sanitize(args.itemData.StyleName));
if (!isNullOrUndefined(documentEditor.documentHelper.styles.findByName(styleName))) {
documentEditor.editorModule.applyStyle(styleName, true);
// Update tree view if options pane is showing
var treeViewResult = document.getElementById(documentEditor.containerId + '_treeDiv');
if (!isNullOrUndefined(treeViewResult) &&
!isNullOrUndefined(documentEditor.optionsPaneModule) &&
documentEditor.optionsPaneModule.isOptionsPaneShow &&
documentEditor.optionsPaneModule.isHeadingTab) {
treeViewResult.innerHTML = '';
documentEditor.optionsPaneModule.data = documentEditor.optionsPaneModule.dataForTreeview();
documentEditor.optionsPaneModule.initHeadingTab();
}
}
}
};
return StylesHelper;
}());
export { StylesHelper };