@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
1,050 lines • 62.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, Property, NotifyPropertyChanges, L10n, Complex, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
import { Event } from '@syncfusion/ej2-base';
import { DocumentEditor, DocumentEditorSettings, DocumentSettings } from '../document-editor/document-editor';
import { HeaderFooterProperties } from './properties-pane/header-footer-pane';
import { ImageProperties } from './properties-pane/image-properties-pane';
import { TocProperties } from './properties-pane/table-of-content-pane';
import { TableProperties } from './properties-pane/table-properties-pane';
import { StatusBar } from './properties-pane/status-bar';
import { createSpinner } from '@syncfusion/ej2-popups';
import { beforeAutoResize, internalAutoResize, internalZoomFactorChange, beforeCommentActionEvent, commentDeleteEvent, contentChangeEvent, trackChangeEvent, beforePaneSwitchEvent, serviceFailureEvent, documentChangeEvent, selectionChangeEvent, customContextMenuSelectEvent, customContextMenuBeforeOpenEvent, internalviewChangeEvent, beforeXmlHttpRequestSend, protectionTypeChangeEvent, internalDocumentEditorSettingsChange, internalStyleCollectionChange, revisionActionEvent, trackChanges, internalOptionPaneChange, beforePaste, internalAsyncPagesVisible } from '../document-editor/base/constants';
import { HelperMethods } from '../index';
import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { defaultLocaleStrings } from './locale-strings';
/**
* Document Editor container component.
*/
var DocumentEditorContainer = /** @class */ (function (_super) {
__extends(DocumentEditorContainer, _super);
/**
* Initializes a new instance of the DocumentEditorContainer class.
*
* @param { DocumentEditorContainerModel } options Specifies the DocumentEditorContainer model as options.
* @param { string | HTMLElement } element Specifies the element that is rendered as a DocumentEditorContainer.
*/
function DocumentEditorContainer(options, element) {
var _this = _super.call(this, options, element) || this;
/**
* @private
*/
_this.previousContext = '';
/**
* @private
*/
_this.showHeaderProperties = true;
/**
* This will hold the value of showPropertiesPane during initial rendering or whenever the propertyChange occurs
*
* @private
*/
_this.showPane = true;
/**
* default locale
*
* @private
*/
_this.defaultLocale = defaultLocaleStrings;
return _this;
}
Object.defineProperty(DocumentEditorContainer.prototype, "documentEditor", {
/* eslint-enable */
/**
* Gets the DocumentEditor instance.
*
* @aspType DocumentEditor
* @returns {DocumentEditor} Returns the DocumentEditor instance.
*/
get: function () {
return this.documentEditorInternal;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DocumentEditorContainer.prototype, "toolbar", {
/**
* Gets the toolbar instance.
*
* @returns {Toolbar} Returns the toolbar module.
*/
get: function () {
return this.toolbarModule;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DocumentEditorContainer.prototype, "ribbon", {
/**
* Gets the ribbon instance.
*
* @returns {Ribbon} Returns the ribbon module.
*/
get: function () {
return this.ribbonModule;
},
enumerable: true,
configurable: true
});
/* eslint-enable @typescript-eslint/naming-convention */
/**
* @private
* @returns {string} Returns the DocumentEditorContainer module name.
*/
DocumentEditorContainer.prototype.getModuleName = function () {
return 'DocumentEditorContainer';
};
Object.defineProperty(DocumentEditorContainer.prototype, "toolbarHandler", {
// Create a property to hold the current toolbar handler
get: function () {
if (this.toolbarMode === 'Ribbon') {
return this.ribbonModule;
}
else {
return this.toolbarModule;
}
},
enumerable: true,
configurable: true
});
/**
* @private
*/
/* eslint-disable */
DocumentEditorContainer.prototype.onPropertyChanged = function (newModel, oldModel) {
for (var _i = 0, _a = Object.keys(newModel); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'restrictEditing':
this.restrictEditingToggleHelper(newModel.restrictEditing);
break;
case 'showPropertiesPane':
this.showHidePropertiesPane(newModel.showPropertiesPane);
this.showPane = this.showPropertiesPane;
break;
case 'enableTrackChanges':
if (this.documentEditor.documentHelper.isTrackedOnlyMode && !newModel.enableTrackChanges && newModel.enableTrackChanges !== this.enableTrackChanges) {
this.enableTrackChanges = true;
}
if (this.documentEditor) {
this.documentEditor.enableTrackChanges = newModel.enableTrackChanges;
if (this.toolbarHandler) {
this.toolbarHandler.toggleTrackChanges(newModel.enableTrackChanges);
}
this.documentEditor.resize();
}
break;
case 'enableLocalPaste':
if (this.documentEditor) {
this.documentEditor.enableLocalPaste = newModel.enableLocalPaste;
}
break;
case 'serviceUrl':
if (this.documentEditor) {
this.documentEditor.serviceUrl = newModel.serviceUrl;
}
break;
case 'serverActionSettings':
if (this.documentEditor) {
this.setserverActionSettings();
}
break;
case 'zIndex':
if (this.documentEditor) {
this.documentEditor.zIndex = newModel.zIndex;
}
break;
case 'headers':
if (this.documentEditor) {
this.documentEditor.headers = newModel.headers;
}
break;
case 'locale':
case 'enableRtl':
this.refresh();
break;
case 'enableComment':
if (this.documentEditor) {
this.documentEditor.enableComment = newModel.enableComment;
}
if (this.toolbarHandler) {
this.toolbarHandler.enableDisableInsertComment(newModel.enableComment);
}
break;
case 'enableSpellCheck':
if (this.documentEditor) {
this.documentEditor.enableSpellCheck = newModel.enableSpellCheck;
}
break;
case 'documentSettings':
if (this.documentEditor) {
this.documentEditor.documentSettings.compatibilityMode = this.documentSettings.compatibilityMode;
}
break;
case 'documentEditorSettings':
if (this.documentEditor) {
this.customizeDocumentEditorSettings();
}
if (!isNullOrUndefined(newModel.documentEditorSettings.fontFamilies)) {
var fontFamilyValue = newModel.documentEditorSettings.fontFamilies;
this.refreshFontFamilies(fontFamilyValue);
}
break;
case 'toolbarItems':
if (this.toolbarModule) {
this.toolbarModule.reInitToolbarItems(newModel.toolbarItems);
}
break;
case 'currentUser':
if (this.documentEditor) {
this.documentEditor.currentUser = newModel.currentUser;
}
break;
case 'userColor':
if (this.documentEditor) {
this.documentEditor.userColor = newModel.userColor;
}
break;
case 'layoutType':
if (this.documentEditor) {
if (this.documentEditor.documentHelper.isDocumentLoadAsynchronously) {
break;
}
this.documentEditor.layoutType = newModel.layoutType;
if (newModel.layoutType === 'Continuous') {
this.statusBar.togglePageLayout();
}
else {
this.statusBar.toggleWebLayout();
}
if (this.ribbon) {
this.ribbon.tabManager.viewTab.onSelectionChange();
}
}
break;
case 'toolbarMode':
case 'enableToolbar':
this.handleToolbarModeChange();
break;
case 'height':
this.element.style.height = formatUnit(this.height);
if (this.documentEditor) {
this.documentEditor.resize();
}
this.resize();
break;
case 'width':
this.element.style.width = formatUnit(this.width);
if (this.documentEditor) {
this.documentEditor.resize();
}
break;
case 'enableAutoFocus':
if (this.documentEditor) {
this.documentEditor.enableAutoFocus = newModel.enableAutoFocus;
}
break;
case 'autoResizeOnVisibilityChange':
if (this.documentEditor) {
this.documentEditor.autoResizeOnVisibilityChange = newModel.autoResizeOnVisibilityChange;
}
break;
case 'backstageMenu':
if (this.ribbonModule) {
this.ribbonModule.backstageMenu = newModel.backstageMenu;
this.ribbonModule.ribbon.refresh();
}
break;
case 'fileMenuItems':
if (this.ribbonModule) {
this.ribbonModule.fileMenuItems = newModel.fileMenuItems;
this.ribbonModule.ribbon.refresh();
}
break;
}
}
};
DocumentEditorContainer.prototype.handleToolbarModeChange = function () {
this.createToolbarContainer(this.enableRtl, true);
if (this.toolbarHandler) {
this.toolbarHandler.initialize(true);
}
if (this.documentEditor) {
this.documentEditor.resize();
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.preRender = function () {
this.localObj = new L10n('documenteditorcontainer', this.defaultLocale, this.locale);
if (!isNullOrUndefined(this.element) && this.element.id === '') {
//Set unique id, if id is empty
this.element.id = HelperMethods.getUniqueElementId();
}
this.initContainerElement();
};
/**
* @private
*/
DocumentEditorContainer.prototype.render = function () {
if (this.toolbarHandler) {
this.toolbarHandler.initialize();
}
if (this.height !== '') {
this.element.style.height = formatUnit(this.height);
}
if (this.width !== '') {
this.element.style.width = formatUnit(this.width);
}
this.element.style.minHeight = '320px';
this.initializeDocumentEditor();
if (this.restrictEditing) {
this.restrictEditingToggleHelper(this.restrictEditing);
}
if (this.toolbarMode !== 'Ribbon') {
this.initializePane();
}
this.statusBar = new StatusBar(this.statusBarElement, this);
// Waiting popup
createSpinner({ target: this.containerTarget, cssClass: 'e-spin-overlay' });
this.setserverActionSettings();
this.renderComplete();
};
/**
* @return {void}
* @private
*/
DocumentEditorContainer.prototype.initializePane = function () {
if (!this.headerFooterProperties) {
this.headerFooterProperties = new HeaderFooterProperties(this, this.enableRtl);
}
if (!this.imageProperties) {
this.imageProperties = new ImageProperties(this, this.enableRtl);
}
if (!this.tocProperties) {
this.tocProperties = new TocProperties(this, this.enableRtl);
}
if (!this.tableProperties) {
this.tableProperties = new TableProperties(this, this.imageProperties, this.enableRtl);
}
};
/**
* @return {void}
* @private
*/
DocumentEditorContainer.prototype.destroyPane = function () {
if (this.headerFooterProperties) {
this.headerFooterProperties.destroy();
this.headerFooterProperties = undefined;
}
if (this.imageProperties) {
this.imageProperties.destroy();
this.imageProperties = undefined;
}
if (this.tocProperties) {
this.tocProperties.destroy();
this.tocProperties = undefined;
}
if (this.tableProperties) {
this.tableProperties.destroy();
this.tableProperties = undefined;
}
if (this.propertiesPaneContainer) {
this.propertiesPaneContainer.parentElement.removeChild(this.propertiesPaneContainer);
this.propertiesPaneContainer = undefined;
}
};
DocumentEditorContainer.prototype.restrictEditingToggleHelper = function (restrictEditing) {
this.documentEditor.isReadOnly = restrictEditing;
if (this.toolbarHandler) {
this.toolbarHandler.restrictEditingToggleHelper(restrictEditing);
}
if (this.showPane && this.toolbarMode !== 'Ribbon') {
this.showPropertiesPane = !restrictEditing;
this.showHidePropertiesPane(!restrictEditing);
}
this.documentEditor.trackChangesPane.enableDisableButton(!restrictEditing && !this.documentEditor.documentHelper.isDocumentProtected);
};
DocumentEditorContainer.prototype.setFormat = function () {
if (this.characterFormat && this.documentEditor) {
this.documentEditor.setDefaultCharacterFormat(this.characterFormat);
}
if (this.paragraphFormat && this.documentEditor) {
this.documentEditor.setDefaultParagraphFormat(this.paragraphFormat);
}
if (this.sectionFormat && this.documentEditor) {
this.documentEditor.setDefaultSectionFormat(this.sectionFormat);
}
if (this.documentParagraphFormat && this.documentEditor) {
this.documentEditor.setDocumentParagraphFormat(this.documentParagraphFormat);
}
if (this.documentCharacterFormat && this.documentEditor) {
this.documentEditor.setDocumentCharacterFormat(this.documentCharacterFormat);
}
};
DocumentEditorContainer.prototype.setserverActionSettings = function () {
if (this.serviceUrl) {
this.documentEditor.serviceUrl = HelperMethods.sanitizeString(this.serviceUrl);
}
if (this.serverActionSettings.spellCheck) {
this.documentEditor.serverActionSettings.spellCheck = HelperMethods.sanitizeString(this.serverActionSettings.spellCheck);
}
if (this.serverActionSettings.spellCheckByPage) {
this.documentEditor.serverActionSettings.spellCheckByPage = HelperMethods.sanitizeString(this.serverActionSettings.spellCheckByPage);
}
if (this.serverActionSettings.restrictEditing) {
this.documentEditor.serverActionSettings.restrictEditing = HelperMethods.sanitizeString(this.serverActionSettings.restrictEditing);
}
if (this.serverActionSettings.systemClipboard) {
this.documentEditor.serverActionSettings.systemClipboard = HelperMethods.sanitizeString(this.serverActionSettings.systemClipboard);
}
if (this.serverActionSettings.import) {
this.documentEditor.serverActionSettingsImport = HelperMethods.sanitizeString(this.serverActionSettings.import);
}
if (this.headers) {
this.documentEditor.headers = JSON.parse(HelperMethods.sanitizeString(JSON.stringify(this.headers)));
}
};
DocumentEditorContainer.prototype.customizeDocumentEditorSettings = function () {
if (this.documentEditorSettings.formFieldSettings) {
var settings = this.documentEditorSettings.formFieldSettings;
var documentEditor = this.documentEditor;
if (!isNullOrUndefined(settings.applyShading)) {
documentEditor.documentEditorSettings.formFieldSettings.applyShading = settings.applyShading;
}
if (!isNullOrUndefined(settings.formFillingMode)) {
documentEditor.documentEditorSettings.formFieldSettings.formFillingMode = settings.formFillingMode;
}
if (!isNullOrUndefined(settings.formattingExceptions)) {
documentEditor.documentEditorSettings.formFieldSettings.formattingExceptions = settings.formattingExceptions;
}
if (!isNullOrUndefined(settings.selectionColor)) {
documentEditor.documentEditorSettings.formFieldSettings.selectionColor = settings.selectionColor;
}
if (!isNullOrUndefined(settings.shadingColor)) {
documentEditor.documentEditorSettings.formFieldSettings.shadingColor = settings.shadingColor;
}
}
if (this.documentEditorSettings.searchHighlightColor) {
this.documentEditor.documentEditorSettings.searchHighlightColor = HelperMethods.sanitizeString(this.documentEditorSettings.searchHighlightColor);
}
if (this.documentEditorSettings.fontFamilies) {
this.documentEditor.documentEditorSettings.fontFamilies = JSON.parse(HelperMethods.sanitizeString(JSON.stringify(this.documentEditorSettings.fontFamilies)));
}
if (this.documentEditorSettings.collaborativeEditingSettings) {
this.documentEditor.documentEditorSettings.collaborativeEditingSettings = this.documentEditorSettings.collaborativeEditingSettings;
}
if (this.documentEditorSettings.printDevicePixelRatio) {
this.documentEditor.documentEditorSettings.printDevicePixelRatio = this.documentEditorSettings.printDevicePixelRatio;
}
if (!isNullOrUndefined(this.documentEditorSettings.enableOptimizedTextMeasuring)) {
this.documentEditor.documentEditorSettings.enableOptimizedTextMeasuring = this.documentEditorSettings.enableOptimizedTextMeasuring;
}
if (!isNullOrUndefined(this.documentEditorSettings.maximumRows)) {
this.documentEditor.documentEditorSettings.maximumRows = this.documentEditorSettings.maximumRows;
}
if (!isNullOrUndefined(this.documentEditorSettings.maximumColumns)) {
this.documentEditor.documentEditorSettings.maximumColumns = this.documentEditorSettings.maximumColumns;
}
if (!isNullOrUndefined(this.documentEditorSettings.showHiddenMarks)) {
this.documentEditor.documentEditorSettings.showHiddenMarks = this.documentEditorSettings.showHiddenMarks;
}
if (!isNullOrUndefined(this.documentEditorSettings.showBookmarks)) {
this.documentEditor.documentEditorSettings.showBookmarks = this.documentEditorSettings.showBookmarks;
}
if (!isNullOrUndefined(this.documentEditorSettings.highlightEditableRanges)) {
this.documentEditor.documentEditorSettings.highlightEditableRanges = this.documentEditorSettings.highlightEditableRanges;
}
if (!isNullOrUndefined(this.documentEditorSettings.allowDragAndDrop)) {
this.documentEditor.documentEditorSettings.allowDragAndDrop = this.documentEditorSettings.allowDragAndDrop;
}
if (!isNullOrUndefined(this.documentEditorSettings.optimizeSfdt)) {
this.documentEditor.documentEditorSettings.optimizeSfdt = this.documentEditorSettings.optimizeSfdt;
}
if (!isNullOrUndefined(this.documentEditorSettings.autoResizeSettings)) {
this.documentEditor.documentEditorSettings.autoResizeSettings = this.documentEditorSettings.autoResizeSettings;
}
if (!isNullOrUndefined(this.documentEditorSettings.showRuler)) {
this.documentEditor.documentEditorSettings.showRuler = this.documentEditorSettings.showRuler;
}
if (!isNullOrUndefined(this.documentEditorSettings.colorPickerSettings)) {
this.documentEditor.documentEditorSettings.colorPickerSettings = this.documentEditorSettings.colorPickerSettings;
}
if (!isNullOrUndefined(this.documentEditorSettings.popupTarget)) {
this.documentEditor.documentEditorSettings.popupTarget = this.documentEditorSettings.popupTarget;
}
if (!isNullOrUndefined(this.documentEditorSettings.showNavigationPane)) {
this.documentEditor.documentEditorSettings.showNavigationPane = this.documentEditorSettings.showNavigationPane;
}
if (!isNullOrUndefined(this.documentEditorSettings.mentionSettings)) {
this.documentEditor.documentEditorSettings.mentionSettings = this.documentEditorSettings.mentionSettings;
}
if (!isNullOrUndefined(this.documentEditorSettings.pasteAsNewParagraph)) {
this.documentEditor.documentEditorSettings.pasteAsNewParagraph = this.documentEditorSettings.pasteAsNewParagraph;
}
if (!isNullOrUndefined(this.documentEditorSettings.enableScreenReader)) {
this.documentEditor.documentEditorSettings.enableScreenReader = this.documentEditorSettings.enableScreenReader;
}
if (!isNullOrUndefined(this.documentEditorSettings.enableSpellCheckOnScroll)) {
this.documentEditor.documentEditorSettings.enableSpellCheckOnScroll = this.documentEditorSettings.enableSpellCheckOnScroll;
}
if (!isNullOrUndefined(this.documentEditorSettings.revisionSettings)) {
this.documentEditor.documentEditorSettings.revisionSettings = this.documentEditorSettings.revisionSettings;
}
if (!isNullOrUndefined(this.documentEditorSettings.openAsyncSettings)) {
this.documentEditor.documentEditorSettings.openAsyncSettings = this.documentEditorSettings.openAsyncSettings;
}
if (!isNullOrUndefined(this.documentEditorSettings.allowHyphensInBookmarkNames)) {
this.documentEditor.documentEditorSettings.allowHyphensInBookmarkNames = this.documentEditorSettings.allowHyphensInBookmarkNames;
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.getPersistData = function () {
return 'documenteditor-container';
};
/* eslint-disable */
DocumentEditorContainer.prototype.requiredModules = function () {
var modules = [];
if (this.enableToolbar) {
if (this.toolbarMode === 'Ribbon') {
modules.push({
member: 'ribbon', args: [this]
});
}
else {
modules.push({
member: 'toolbar', args: [this]
});
}
}
return modules;
};
DocumentEditorContainer.prototype.initContainerElement = function () {
// Toolbar container
var isRtl = this.enableRtl;
this.containerTarget = this.createElement('div', { className: 'e-de-ctn' });
this.containerTarget.contentEditable = 'false';
this.createToolbarContainer(isRtl);
this.containerTarget.appendChild(this.editorContainer);
this.statusBarElement = this.createElement('div', { className: 'e-de-status-bar' });
if (isRtl) {
this.statusBarElement.style.direction = 'rtl';
}
this.containerTarget.appendChild(this.statusBarElement);
this.element.appendChild(this.containerTarget);
};
DocumentEditorContainer.prototype.initializePaneElement = function () {
if (this.toolbarMode != 'Ribbon' && !this.propertiesPaneContainer) {
var propertiesPaneContainerBorder = void 0;
if (!this.enableRtl) {
propertiesPaneContainerBorder = 'e-de-pane';
}
else {
propertiesPaneContainerBorder = 'e-de-pane-rtl';
}
this.propertiesPaneContainer = this.createElement('div', { className: propertiesPaneContainerBorder, styles: 'display:none' });
this.editorContainer.appendChild(this.propertiesPaneContainer);
}
};
DocumentEditorContainer.prototype.createToolbarContainer = function (isRtl, isCustom) {
var _a, _b;
if (isNullOrUndefined((this.editorContainer))) {
this.editorContainer = this.createElement('div', { className: 'e-de-tool-ctnr-properties-pane' + (isRtl ? ' e-de-ctnr-rtl' : '') });
}
if (this.enableToolbar) {
(_a = this.editorContainer.classList).remove.apply(_a, ['e-de-tool-ctnr-properties-pane', 'e-de-ribbon-simplified-ctnr-properties-pane', 'e-de-ribbon-classic-ctnr-properties-pane']);
if (this.toolbarMode === 'Ribbon') {
// Create ribbon container
this.ribbonContainer = this.createElement('div', {
className: 'e-de-ctnr-ribbon' + (isRtl ? ' e-de-ctnr-rtl' : '')
// styles: 'min-height: 150px' // Adjust height as needed
});
// Add to DOM
if (isCustom) {
this.containerTarget.insertBefore(this.ribbonContainer, this.containerTarget.firstChild);
}
else {
this.containerTarget.appendChild(this.ribbonContainer);
}
if (this.ribbonLayout === 'Simplified') {
this.editorContainer.classList.add('e-de-ribbon-simplified-ctnr-properties-pane');
}
else {
this.editorContainer.classList.add('e-de-ribbon-classic-ctnr-properties-pane');
}
}
else {
// Original toolbar container creation
this.toolbarContainer = this.createElement('div', {
className: 'e-de-ctnr-toolbar' + (isRtl ? ' e-de-ctnr-rtl' : '')
});
if (isCustom) {
this.containerTarget.insertBefore(this.toolbarContainer, this.containerTarget.firstChild);
}
else {
this.containerTarget.appendChild(this.toolbarContainer);
}
this.editorContainer.classList.add('e-de-tool-ctnr-properties-pane');
}
this.editorContainer.classList.remove('e-de-ctnr-properties-pane');
}
else {
(_b = this.editorContainer.classList).remove.apply(_b, ['e-de-tool-ctnr-properties-pane', 'e-de-ribbon-simplified-ctnr-properties-pane', 'e-de-ribbon-classic-ctnr-properties-pane']);
this.editorContainer.classList.add('e-de-ctnr-properties-pane');
}
this.initializePaneElement();
};
DocumentEditorContainer.prototype.initializeDocumentEditor = function () {
var id = this.element.id + '_editor';
var documentEditorTarget = this.createElement('div', { id: id, styles: 'width:100%;height:100%' });
this.documentEditorInternal = new DocumentEditor({
isReadOnly: false, enableRtl: this.enableRtl,
selectionChange: this.onSelectionChange.bind(this),
contentChange: this.onContentChange.bind(this),
documentChange: this.onDocumentChange.bind(this),
beforePaste: this.onBeforePaste.bind(this),
requestNavigate: this.onRequestNavigate.bind(this),
viewChange: this.onViewChange.bind(this),
customContextMenuSelect: this.onCustomContextMenuSelect.bind(this),
customContextMenuBeforeOpen: this.onCustomContextMenuBeforeOpen.bind(this),
beforePaneSwitch: this.onBeforePaneSwitch.bind(this),
commentBegin: this.onCommentBegin.bind(this),
commentEnd: this.onCommentEnd.bind(this),
commentDelete: this.onCommentDelete.bind(this),
beforeAcceptRejectChanges: this.onBeforeAcceptRejectChanges.bind(this),
beforeCommentAction: this.onCommentAction.bind(this),
trackChange: this.onTrackChange.bind(this),
serviceFailure: this.fireServiceFailure.bind(this),
beforeXmlHttpRequestSend: this.beforeXmlHttpSend.bind(this),
locale: this.locale,
acceptTab: true,
zIndex: this.zIndex,
enableLocalPaste: this.enableLocalPaste,
layoutType: this.layoutType,
pageOutline: '#E0E0E0',
currentUser: this.currentUser,
userColor: this.userColor,
height: '100%',
width: '100%',
enableTrackChanges: this.enableTrackChanges,
showRevisions: true,
showComments: true,
enableLockAndEdit: this.enableLockAndEdit,
enableAutoFocus: this.enableAutoFocus
});
this.wireEvents();
this.customizeDocumentEditorSettings();
this.documentEditor.enableAllModules();
this.documentEditor.enableComment = this.enableComment;
this.showPane = this.showPropertiesPane;
this.editorContainer.insertBefore(documentEditorTarget, this.editorContainer.firstChild);
this.setFormat();
this.documentEditor.isInitializedContainerComponent = true;
this.documentEditor.appendTo(documentEditorTarget);
this.documentEditor.resize();
};
DocumentEditorContainer.prototype.wireEvents = function () {
window.addEventListener('resize', this.onWindowResize.bind(this));
this.documentEditor.on(internalZoomFactorChange, this.onZoomFactorChange, this);
this.documentEditor.on(internalviewChangeEvent, this.onViewChange, this);
this.documentEditor.on(protectionTypeChangeEvent, this.onProtectionChange, this);
this.documentEditor.on(internalDocumentEditorSettingsChange, this.updateShowHiddenMarks, this);
this.documentEditor.on(internalStyleCollectionChange, this.updateStyleCollection, this);
this.documentEditor.on(internalAsyncPagesVisible, this.onAsyncPagesVisible, this);
// Internal event to trigger auto resize.
this.documentEditor.on(internalAutoResize, this.triggerAutoResize, this);
this.documentEditor.on(beforeAutoResize, this.onBeforeAutoResize, this);
this.documentEditor.on(trackChanges, this.onEnableTrackChanges, this);
this.documentEditor.on(internalOptionPaneChange, this.onOptionPaneChange, this);
};
DocumentEditorContainer.prototype.onWindowResize = function () {
if (!isNullOrUndefined(this.documentEditor)) {
this.documentEditor.isContainerResize = true;
this.resize();
}
};
DocumentEditorContainer.prototype.onOptionPaneChange = function (args) {
//this.documentEditorSettings.showNavigationPane = args.show;
if (this.toolbarMode === 'Ribbon' && this.ribbonModule) {
this.ribbonModule.tabManager.viewTab.onSelectionChange();
}
};
DocumentEditorContainer.prototype.onEnableTrackChanges = function (model) {
if (model.enableTrackChanges !== this.enableTrackChanges) {
this.enableTrackChanges = model.enableTrackChanges;
}
};
DocumentEditorContainer.prototype.triggerAutoResize = function (args) {
// Cancels the auto resize of the document editor.
args.cancel = true;
this.resize();
};
DocumentEditorContainer.prototype.onBeforeAutoResize = function (args) {
args.element = this.element;
};
DocumentEditorContainer.prototype.unWireEvents = function () {
if (isNullOrUndefined(this.documentEditor)) {
return;
}
else {
if (this.documentEditor.isDestroyed) {
return;
}
}
this.documentEditor.off(internalZoomFactorChange, this.onZoomFactorChange);
this.documentEditor.off(internalviewChangeEvent, this.onViewChange);
this.documentEditor.off(protectionTypeChangeEvent, this.onProtectionChange);
this.documentEditor.off(internalDocumentEditorSettingsChange, this.updateShowHiddenMarks);
this.documentEditor.off(internalStyleCollectionChange, this.updateStyleCollection);
this.documentEditor.off(internalAsyncPagesVisible, this.onAsyncPagesVisible);
};
DocumentEditorContainer.prototype.onCommentBegin = function () {
if (this.toolbarHandler) {
this.toolbarHandler.enableDisableInsertComment(false);
}
};
DocumentEditorContainer.prototype.onCommentEnd = function () {
if (this.toolbarHandler) {
this.toolbarHandler.enableDisableInsertComment(true && this.enableComment);
}
};
DocumentEditorContainer.prototype.beforeXmlHttpSend = function (args) {
this.trigger(beforeXmlHttpRequestSend, args);
};
DocumentEditorContainer.prototype.onCommentDelete = function (args) {
this.trigger(commentDeleteEvent, args);
};
DocumentEditorContainer.prototype.onBeforeAcceptRejectChanges = function (args) {
this.trigger(revisionActionEvent, args);
};
DocumentEditorContainer.prototype.onCommentAction = function (args) {
this.trigger(beforeCommentActionEvent, args);
};
DocumentEditorContainer.prototype.onBeforePaste = function (args) {
this.trigger(beforePaste, args);
};
DocumentEditorContainer.prototype.onTrackChange = function (args) {
this.trigger(trackChangeEvent, args);
if (this.toolbarHandler) {
this.toolbarHandler.toggleTrackChanges(args.isTrackChangesEnabled);
}
};
DocumentEditorContainer.prototype.onBeforePaneSwitch = function (args) {
this.trigger(beforePaneSwitchEvent, args);
};
/**
* @private
*/
DocumentEditorContainer.prototype.fireServiceFailure = function (eventArgs) {
this.trigger(serviceFailureEvent, eventArgs);
};
/**
* @private
*/
DocumentEditorContainer.prototype.showHidePropertiesPane = function (show) {
if (this.showPropertiesPane) {
this.showPropertiesPaneOnSelection();
}
if (this.propertiesPaneContainer) {
this.propertiesPaneContainer.style.display = show ? 'block' : 'none';
}
if (this.toolbarModule) {
this.toolbarModule.propertiesPaneButton.element.style.opacity = show ? '1' : '0.5';
}
this.documentEditor.resize();
};
DocumentEditorContainer.prototype.updateStyleCollection = function () {
if (this.documentEditor.skipStyleUpdate) {
return;
}
if (!isNullOrUndefined(this.tableProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties.paragraph)) {
this.tableProperties.tableTextProperties.paragraph.updateStyleNames();
}
if (this.toolbarMode == 'Ribbon' && this.ribbon) {
this.ribbon.tabManager.homeTab.updateStyleGallery();
}
};
/**
* Resizes the container component and its sub elements based on given size or client size.
* @param width The width to be applied.
* @param height The height to be applied.
*/
DocumentEditorContainer.prototype.resize = function (width, height) {
if (this.element) {
if (!this.documentEditor.isContainerResize) {
if (isNullOrUndefined(height) && this.element && this.element.parentElement) {
height = this.element.parentElement.clientHeight;
}
if (isNullOrUndefined(width) && this.element && this.element.parentElement) {
width = this.element.parentElement.clientWidth;
}
if (!isNullOrUndefined(width) && width > 200) {
this.width = width.toString();
this.element.style.width = width + 'px';
}
if (!isNullOrUndefined(height) && height > 200) {
this.height = height.toString();
this.element.style.height = height + 'px';
}
}
if (this.documentEditor) {
this.documentEditor.resize();
}
if (this.toolbarModule) {
this.toolbarModule.toolbar.refreshOverflow();
}
if (this.showPropertiesPane && this.tableProperties) {
this.tableProperties.updateTabContainerHeight();
}
if (this.toolbarMode == 'Ribbon' && this.ribbon && this.ribbon.ribbon.tabs[this.ribbon.ribbon.selectedTab].header === this.ribbon.localObj.getConstant('Layout')) {
this.ribbon.tabManager.layoutTab.layoutParagraphGroup.initializeNumericTextBoxes();
this.ribbon.tabManager.layoutTab.layoutParagraphGroup.updateSelection();
}
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.refreshFontFamilies = function (fontFamilies) {
if (!isNullOrUndefined(this.tableProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties.text)) {
var text = this.tableProperties.tableTextProperties.text;
text.fontFamily.refresh();
for (var i = 0; i < fontFamilies.length; i++) {
var fontValue = fontFamilies[i];
var fontStyleValue = { 'FontName': fontValue, 'FontValue': fontValue };
text.fontFamily.addItem(fontStyleValue, i);
}
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.onContentChange = function (args) {
if (this.toolbarHandler) {
this.toolbarHandler.onContentChange();
}
if (this.statusBar) {
this.statusBar.updatePageCount();
}
var eventArgs = { source: this, operations: args.operations };
this.trigger(contentChangeEvent, eventArgs);
};
/**
* @private
*/
DocumentEditorContainer.prototype.onDocumentChange = function () {
this.enableTrackChanges = this.documentEditor.enableTrackChanges;
if (!isNullOrUndefined(this.documentSettings) && !isNullOrUndefined(this.documentEditor)
&& !isNullOrUndefined(this.documentEditor.documentSettings)) {
this.documentSettings.compatibilityMode = this.documentEditor.documentSettings.compatibilityMode;
}
if (!isNullOrUndefined(this.documentEditorSettings) && !isNullOrUndefined(this.documentEditorSettings.fontFamilies)) {
var fontFamilyValue = this.documentEditorSettings.fontFamilies;
this.refreshFontFamilies(fontFamilyValue);
}
if (this.toolbarHandler) {
this.toolbarHandler.onDocumentChange();
}
if (this.statusBar) {
this.statusBar.updatePageCount();
this.statusBar.loadingDiv.style.display = 'none';
}
var eventArgs = { source: this };
this.trigger(documentChangeEvent, eventArgs);
this.updateStyleCollection();
};
/**
* @private
*/
DocumentEditorContainer.prototype.onSelectionChange = function () {
var _this = this;
setTimeout(function () {
if (!isNullOrUndefined(_this.documentEditor)) {
_this.showPropertiesPaneOnSelection();
if (_this.ribbonModule) {
_this.ribbonModule.updateRibbonState();
}
var eventArgs = { source: _this, isCompleted: _this.documentEditor.documentHelper.isSelectionCompleted };
_this.trigger(selectionChangeEvent, eventArgs);
_this.documentEditor.documentHelper.isSelectionCompleted = true;
}
});
};
/**
* @private
*/
DocumentEditorContainer.prototype.onZoomFactorChange = function () {
if (this.statusBar) {
this.statusBar.updateZoomContent();
}
// Update ribbon zoom button states if ribbon is active
if (this.toolbarMode === 'Ribbon' && this.ribbonModule) {
this.ribbonModule.onZoomFactorChange();
}
};
DocumentEditorContainer.prototype.onProtectionChange = function () {
if (this.toolbarMode == 'Ribbon') {
this.ribbon.stateManager.updateRibbonState(this.ribbon.ribbon);
}
else {
this.showPropertiesPaneOnSelection();
}
};
DocumentEditorContainer.prototype.updateShowHiddenMarks = function (settings) {
this.documentEditorSettings.showHiddenMarks = settings.showHiddenMarks;
this.tableProperties.tableTextProperties.paragraph.toggleHiddenMarks();
};
/**
* @private
*/
DocumentEditorContainer.prototype.onRequestNavigate = function (args) {
if (args.linkType !== 'Bookmark') {
var navLink = args.navigationLink;
var link = SanitizeHtmlHelper.sanitize(navLink);
if (args.localReference.length > 0) {
link += '#' + args.localReference;
}
if (navLink.substring(0, 8) === 'file:///'
|| (navLink.substring(0, 7) === 'http://' && navLink.length > 7)
|| (navLink.substring(0, 8) === 'https://' && navLink.length > 8)
|| (navLink.substring(0, 4) === 'www.' && navLink.length > 4)
|| (navLink.substring(0, 7) === 'mailto:' && navLink.length > 7)) {
window.open(link);
}
else {
DialogUtility.alert({
title: this.localObj.getConstant("Information"),
content: this.localObj.getConstant("The address of this site is not valid. Check the address and try again."),
okButton: { text: this.localObj.getConstant("OK") },
closeOnEscape: true,
});
}
args.isHandled = true;
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.onViewChange = function (args) {
if (this.statusBar) {
this.statusBar.updatePageNumberOnViewChange(args);
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.onCustomContextMenuSelect = function (args) {
this.trigger(customContextMenuSelectEvent, args);
};
/**
* @private
*/
DocumentEditorContainer.prototype.onCustomContextMenuBeforeOpen = function (args) {
this.trigger(customContextMenuBeforeOpenEvent, args);
};
/**
* @private
*/
DocumentEditorContainer.prototype.onAsyncPagesVisible = function () {
if (this.statusBar) {
this.statusBar.updatePageCount();
this.statusBar.loadingDiv.style.display = 'inline-flex';
}
};
/**
* @private
*/
DocumentEditorContainer.prototype.showPropertiesPaneOnSelection = function () {
if (((this.restrictEditing) && !this.showPropertiesPane) || isNullOrUndefined(this.tableProperties)) {
return;
}
var isProtectedDocument = this.documentEditor.documentHelper.protectionType !== 'NoProtection';
var allowFormatting = isProtectedDocument && this.documentEditor.documentHelper.restrictFormatting;
var isSelectionInProtectecRegion = this.documentEditor.editorModule.restrictEditing;
if (isProtectedDocument) {
if (this.toolbarModule) {
this.toolbarModule.enableDisableToolBarItem(!isSelectionInProtectecRegion, true);
}
this.tableProperties.enableDisableElements(!allowFormatting && !isSelectionInProtectecRegion);
this.tocProperties.enableDisableElements(!isSelectionInProtectecRegion);
this.headerFooterProperties.enableDisableElements(!isSelectionInProtectecRegion);
this.imageProperties.enableDisableElements(!isSelectionInProtectecRegion);
}
else {
var isReadOnly = !this.documentEditor.isReadOnly;
if (this.toolbarModule) {
this.toolbarModule.enableDisableToolBarItem(isReadOnly, true || this.showPropertiesPane);
}
this.tableProperties.enableDisableElements(true);
this.tocProperties.enableDisableElements(true);
this.headerFooterProperties.enableDisableElements(true);
this.imageProperties.enableDisableElements(true);
}
var currentContext = this.documentEditor.selectionModule.contextType;
var isInHeaderFooter = currentContext.indexOf('Header') >= 0
|| currentContext.indexOf('Footer') >= 0;
if (!isInHeaderFooter) {
this.showHeaderProperties = true;
}
if (!this.showPropertiesPane) {
this.showHidePropertiesPane(false);
this.propertiesPaneContainer.style.display = 'none';
}
else {
this.propertiesPaneContainer.style.display = 'block';
if (isInHeaderFooter && this.showHeaderProperties) {
this.showProperties('headerfooter');
}
else if ((currentContext.indexOf('List') >= 0 || currentContext.indexOf('Text') >= 0
&& currentContext.indexOf('Table') < 0)) {
this.showProperties('text');
}
else if (currentContext.indexOf('Image') >= 0) {
this.showProperties('image');
}
else if (currentContext.indexOf('TableOfContents') >= 0) {
this.showProperties('toc');
}
else if (currentContext.indexOf('Table') >= 0) {
this.showProperties('table');
}
}
this.previousContext = this.documentEditor.selectionModule.contextType;
if (this.toolbarHandler) {
this.toolbarModule.enableDisableInsertComment(!this.documentEditor.enableHeaderAndFooter && this.enableComment && (!this.documentEditor.isReadOnlyMode || this.documentEditor.documentHelper.isDocumentLoadAsynchronously) && !this.documentEditor.selectionModule.isinFootnote && !this.documentEditor.selectionModule.isinEndnote &&
!this.documentEditor.selectionModule.isPlainContentControl());
}
};
/**
* @private
* @param property
*/
DocumentEditorContainer.prototype.showProperties = function (property) {
if (this.toolbarModule && property !== 'headerfooter' && property !== 'toc') {
this.toolbarModule.enableDisablePropertyPaneButton(true);
}
this.tableProperties.showTableProperties((property === 'table' || property === 'text'), property);
this.imageProperties.showImageProperties(property === 'image');
this.headerFooterProperties.showHeaderFooterPane(property === 'headerfooter');
this.tocProperties.show