@syncfusion/ej2-richtexteditor 20.2.49 → 20.3.47

package/src/rich-text-editor/models/toolbar-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { AjaxSettings, AjaxSettingsModel, ContextMenuSettings, ContextMenuSettingsModel } from '@syncfusion/ej2-filemanager';import { DetailsViewSettings, DetailsViewSettingsModel, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';import { NavigationPaneSettingsModel, SearchSettings, SearchSettingsModel, SortOrder } from '@syncfusion/ej2-filemanager';import { ToolbarSettingsModel as FileToolbarSettingsModel, ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';import { UploadSettings, UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';import { SaveFormat } from '../../common';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';import { backgroundColor, fontColor, fontFamily, fontSize,  formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList  } from './items';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { AjaxSettings, AjaxSettingsModel, ContextMenuSettings, ContextMenuSettingsModel } from '@syncfusion/ej2-filemanager';import { DetailsViewSettings, DetailsViewSettingsModel, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';import { NavigationPaneSettingsModel, SearchSettings, SearchSettingsModel, SortOrder } from '@syncfusion/ej2-filemanager';import { ToolbarSettingsModel as FileToolbarSettingsModel, ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';import { UploadSettings, UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';import { SaveFormat, DisplayLayoutOptions } from '../../common';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';import { backgroundColor, fontColor, fontFamily, fontSize,  formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList  } from './items';
 
 /**
  * Interface for a class ToolbarSettings
@@ -152,6 +152,160 @@ export interface ImageSettingsModel {
 
 }
 
+/**
+ * Interface for a class AudioSettings
+ */
+export interface AudioSettingsModel {
+
+    /**
+     * Specifies whether to allowType based file select.
+     *
+     * @default ['.wav', '.mp3', '.m4a','.wma']
+     */
+    allowedTypes?: string[];
+
+    /**
+     * Specifies whether insert audio inline or break.
+     *
+     * @default 'Inline'
+     */
+    layoutOption?: DisplayLayoutOptions;
+
+    /**
+     * Specifies whether the inserted audio is saved as blob or base64.
+     *
+     * @default 'Blob'
+     */
+    saveFormat?: SaveFormat;
+
+    /**
+     * Specifies the URL of save action that will receive the upload files and save in the server.
+     *
+     * @default 'null'
+     */
+    saveUrl?: string;
+
+    /**
+     * Specifies the URL of remove action that receives the file information and handle the remove operation in server.
+     *
+     * @default 'null'
+     */
+    removeUrl?: string;
+
+    /**
+     * Specifies the path of the location to store the audio and refer it to display the audio.
+     *
+     * @default 'null'
+     */
+    path?: string;
+
+}
+
+/**
+ * Interface for a class VideoSettings
+ */
+export interface VideoSettingsModel {
+
+    /**
+     * Specifies whether to allowType based file select.
+     *
+     * @default ['.mp4', '.mov', '.wmv','.avi']
+     */
+    allowedTypes?: string[];
+
+    /**
+     * Specifies whether insert video inline or break.
+     *
+     * @default 'Inline'
+     */
+    layoutOption?: DisplayLayoutOptions;
+
+    /**
+     * Specifies whether the inserted video is saved as blob or base64.
+     *
+     * @default 'Blob'
+     */
+    saveFormat?: SaveFormat;
+
+    /**
+     * Specifies whether video width.
+     *
+     * @default 'auto'
+     */
+    width?: string;
+
+    /**
+     * Specifies whether video height.
+     *
+     * @default 'auto'
+     */
+    height?: string;
+
+    /**
+     * Specifies the URL of save action that will receive the upload files and save in the server.
+     *
+     * @default 'null'
+     */
+    saveUrl?: string;
+
+    /**
+     * Specifies the path of the location to store the images and refer it to display the images.
+     *
+     * @default 'null'
+     */
+    path?: string;
+
+    /**
+     * To enable resizing for video element.
+     *
+     * @default 'true'
+     */
+    resize?: boolean;
+
+    /**
+     * Specifies the URL of remove action that receives the file information and handle the remove operation in server.
+     *
+     * @default 'null'
+     */
+    removeUrl?: string;
+
+    /**
+     * Defines the minimum Width of the video.
+     *
+     * @default '0'
+     */
+    minWidth?: string | number;
+
+    /**
+     * Defines the maximum Width of the video.
+     *
+     * @default null
+     */
+    maxWidth?: string | number;
+
+    /**
+     * Defines the minimum Height of the video.
+     *
+     * @default '0'
+     */
+    minHeight?: string | number;
+
+    /**
+     * Defines the maximum Height of the video.
+     *
+     * @default null
+     */
+    maxHeight?: string | number;
+
+    /**
+     * Video resizing should be done by percentage calculation.
+     *
+     * @default false
+     */
+    resizeByPercent?: boolean;
+
+}
+
 /**
  * Interface for a class FileManagerSettings
  */
@@ -390,6 +544,20 @@ export interface QuickToolbarSettingsModel {
      */
     image?: (string | IToolbarItems)[];
 
+    /**
+     * Specifies the items to render in quick toolbar, when audio selected.
+     *
+     * @default ['AudioReplace', 'Remove', 'AudioLayoutOption']
+     */
+    audio?: (string | IToolbarItems)[];
+
+    /**
+     * Specifies the items to render in quick toolbar, when video selected.
+     *
+     * @default ['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension']
+     */
+    video?: (string | IToolbarItems)[];
+
     /**
      * Specifies the items to render in quick toolbar, when text selected.
      *

package/src/rich-text-editor/models/toolbar-settings.d.ts

@@ -4,7 +4,7 @@ import { DetailsViewSettingsModel } from '@syncfusion/ej2-filemanager';
 import { NavigationPaneSettingsModel, SearchSettingsModel, SortOrder } from '@syncfusion/ej2-filemanager';
 import { ToolbarSettingsModel as FileToolbarSettingsModel } from '@syncfusion/ej2-filemanager';
 import { UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';
-import { SaveFormat } from '../../common';
+import { SaveFormat, DisplayLayoutOptions } from '../../common';
 import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';
 import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';
 /**
@@ -138,6 +138,136 @@ export declare class ImageSettings extends ChildProperty<ImageSettings> {
      */
     resizeByPercent: boolean;
 }
+/**
+ * Configures the audio settings of the RichTextEditor.
+ */
+export declare class AudioSettings extends ChildProperty<AudioSettings> {
+    /**
+     * Specifies whether to allowType based file select.
+     *
+     * @default ['.wav', '.mp3', '.m4a','.wma']
+     */
+    allowedTypes: string[];
+    /**
+     * Specifies whether insert audio inline or break.
+     *
+     * @default 'Inline'
+     */
+    layoutOption: DisplayLayoutOptions;
+    /**
+     * Specifies whether the inserted audio is saved as blob or base64.
+     *
+     * @default 'Blob'
+     */
+    saveFormat: SaveFormat;
+    /**
+     * Specifies the URL of save action that will receive the upload files and save in the server.
+     *
+     * @default 'null'
+     */
+    saveUrl: string;
+    /**
+     * Specifies the URL of remove action that receives the file information and handle the remove operation in server.
+     *
+     * @default 'null'
+     */
+    removeUrl: string;
+    /**
+     * Specifies the path of the location to store the audio and refer it to display the audio.
+     *
+     * @default 'null'
+     */
+    path: string;
+}
+/**
+ * Configures the video settings of the RichTextEditor.
+ */
+export declare class VideoSettings extends ChildProperty<VideoSettings> {
+    /**
+     * Specifies whether to allowType based file select.
+     *
+     * @default ['.mp4', '.mov', '.wmv','.avi']
+     */
+    allowedTypes: string[];
+    /**
+     * Specifies whether insert video inline or break.
+     *
+     * @default 'Inline'
+     */
+    layoutOption: DisplayLayoutOptions;
+    /**
+     * Specifies whether the inserted video is saved as blob or base64.
+     *
+     * @default 'Blob'
+     */
+    saveFormat: SaveFormat;
+    /**
+     * Specifies whether video width.
+     *
+     * @default 'auto'
+     */
+    width: string;
+    /**
+     * Specifies whether video height.
+     *
+     * @default 'auto'
+     */
+    height: string;
+    /**
+     * Specifies the URL of save action that will receive the upload files and save in the server.
+     *
+     * @default 'null'
+     */
+    saveUrl: string;
+    /**
+     * Specifies the path of the location to store the images and refer it to display the images.
+     *
+     * @default 'null'
+     */
+    path: string;
+    /**
+     * To enable resizing for video element.
+     *
+     * @default 'true'
+     */
+    resize: boolean;
+    /**
+     * Specifies the URL of remove action that receives the file information and handle the remove operation in server.
+     *
+     * @default 'null'
+     */
+    removeUrl: string;
+    /**
+     * Defines the minimum Width of the video.
+     *
+     * @default '0'
+     */
+    minWidth: string | number;
+    /**
+     * Defines the maximum Width of the video.
+     *
+     * @default null
+     */
+    maxWidth: string | number;
+    /**
+     * Defines the minimum Height of the video.
+     *
+     * @default '0'
+     */
+    minHeight: string | number;
+    /**
+     * Defines the maximum Height of the video.
+     *
+     * @default null
+     */
+    maxHeight: string | number;
+    /**
+     * Video resizing should be done by percentage calculation.
+     *
+     * @default false
+     */
+    resizeByPercent: boolean;
+}
 /**
  * Configures the file manager settings of the RichTextEditor.
  */
@@ -341,6 +471,18 @@ export declare class QuickToolbarSettings extends ChildProperty<QuickToolbarSett
      * @default ['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink','OpenImageLink', 'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension']
      */
     image: (string | IToolbarItems)[];
+    /**
+     * Specifies the items to render in quick toolbar, when audio selected.
+     *
+     * @default ['AudioReplace', 'Remove', 'AudioLayoutOption']
+     */
+    audio: (string | IToolbarItems)[];
+    /**
+     * Specifies the items to render in quick toolbar, when video selected.
+     *
+     * @default ['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension']
+     */
+    video: (string | IToolbarItems)[];
     /**
      * Specifies the items to render in quick toolbar, when text selected.
      *

package/src/rich-text-editor/models/toolbar-settings.js

@@ -104,6 +104,88 @@ var ImageSettings = /** @class */ (function (_super) {
     return ImageSettings;
 }(ChildProperty));
 export { ImageSettings };
+/**
+ * Configures the audio settings of the RichTextEditor.
+ */
+var AudioSettings = /** @class */ (function (_super) {
+    __extends(AudioSettings, _super);
+    function AudioSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(['.wav', '.mp3', '.m4a', '.wma'])
+    ], AudioSettings.prototype, "allowedTypes", void 0);
+    __decorate([
+        Property('Inline')
+    ], AudioSettings.prototype, "layoutOption", void 0);
+    __decorate([
+        Property('Blob')
+    ], AudioSettings.prototype, "saveFormat", void 0);
+    __decorate([
+        Property(null)
+    ], AudioSettings.prototype, "saveUrl", void 0);
+    __decorate([
+        Property(null)
+    ], AudioSettings.prototype, "removeUrl", void 0);
+    __decorate([
+        Property(null)
+    ], AudioSettings.prototype, "path", void 0);
+    return AudioSettings;
+}(ChildProperty));
+export { AudioSettings };
+/**
+ * Configures the video settings of the RichTextEditor.
+ */
+var VideoSettings = /** @class */ (function (_super) {
+    __extends(VideoSettings, _super);
+    function VideoSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(['.mp4', '.mov', '.wmv', '.avi'])
+    ], VideoSettings.prototype, "allowedTypes", void 0);
+    __decorate([
+        Property('Inline')
+    ], VideoSettings.prototype, "layoutOption", void 0);
+    __decorate([
+        Property('Blob')
+    ], VideoSettings.prototype, "saveFormat", void 0);
+    __decorate([
+        Property('auto')
+    ], VideoSettings.prototype, "width", void 0);
+    __decorate([
+        Property('auto')
+    ], VideoSettings.prototype, "height", void 0);
+    __decorate([
+        Property(null)
+    ], VideoSettings.prototype, "saveUrl", void 0);
+    __decorate([
+        Property(null)
+    ], VideoSettings.prototype, "path", void 0);
+    __decorate([
+        Property(true)
+    ], VideoSettings.prototype, "resize", void 0);
+    __decorate([
+        Property(null)
+    ], VideoSettings.prototype, "removeUrl", void 0);
+    __decorate([
+        Property(0)
+    ], VideoSettings.prototype, "minWidth", void 0);
+    __decorate([
+        Property(null)
+    ], VideoSettings.prototype, "maxWidth", void 0);
+    __decorate([
+        Property(0)
+    ], VideoSettings.prototype, "minHeight", void 0);
+    __decorate([
+        Property(null)
+    ], VideoSettings.prototype, "maxHeight", void 0);
+    __decorate([
+        Property(false)
+    ], VideoSettings.prototype, "resizeByPercent", void 0);
+    return VideoSettings;
+}(ChildProperty));
+export { VideoSettings };
 /**
  * Configures the file manager settings of the RichTextEditor.
  */
@@ -212,6 +294,12 @@ var QuickToolbarSettings = /** @class */ (function (_super) {
     __decorate([
         Property(['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'OpenImageLink', 'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'])
     ], QuickToolbarSettings.prototype, "image", void 0);
+    __decorate([
+        Property(['AudioReplace', 'AudioRemove', 'AudioLayoutOption'])
+    ], QuickToolbarSettings.prototype, "audio", void 0);
+    __decorate([
+        Property(['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension'])
+    ], QuickToolbarSettings.prototype, "video", void 0);
     __decorate([
         Property(['Cut', 'Copy', 'Paste'])
     ], QuickToolbarSettings.prototype, "text", void 0);

package/src/rich-text-editor/renderer/audio-module.d.ts

@@ -0,0 +1,76 @@
+import { IImageNotifyArgs } from '../base/interface';
+import { Uploader } from '@syncfusion/ej2-inputs';
+import { Dialog } from '@syncfusion/ej2-popups';
+/**
+ * `Audio` module is used to handle audio actions.
+ */
+export declare class Audio {
+    element: HTMLElement;
+    private rteID;
+    private parent;
+    dialogObj: Dialog;
+    uploadObj: Uploader;
+    private i10n;
+    private inputUrl;
+    private uploadUrl;
+    private contentModule;
+    private rendererFactory;
+    private quickToolObj;
+    private audEle;
+    private isAudioUploaded;
+    private isAllowedTypes;
+    private dialogRenderObj;
+    private deletedAudio;
+    private removingAudioName;
+    private prevSelectedAudEle;
+    private constructor();
+    protected addEventListener(): void;
+    protected removeEventListener(): void;
+    private afterRender;
+    private checkAudioBack;
+    private checkAudioDel;
+    private undoStack;
+    private touchStart;
+    private onToolbarAction;
+    private onKeyUp;
+    private onKeyDown;
+    private openDialog;
+    private showDialog;
+    private closeDialog;
+    private deleteAudio;
+    private audioRemovePost;
+    private triggerPost;
+    private audioClick;
+    private onDocumentClick;
+    private alignmentSelect;
+    private break;
+    private inline;
+    private editAreaClickHandler;
+    private isAudioElem;
+    private showAudioQuickToolbar;
+    private hideAudioQuickToolbar;
+    private insertingAudio;
+    insertAudio(e: IImageNotifyArgs): void;
+    private audioUrlPopup;
+    private audioUpload;
+    private checkExtension;
+    private fileSelect;
+    private cancelDialog;
+    private insertAudioUrl;
+    /**
+     * Destroys the ToolBar.
+     *
+     * @method destroy
+     * @returns {void}
+     * @hidden
+
+     */
+    destroy(): void;
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {void}
+     * @hidden
+     */
+    private getModuleName;
+}