jodit 3.2.37 → 3.2.44

package/src/modules/helpers/checker/hasBrowserColorPicker.ts

@@ -0,0 +1,27 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * License GNU General Public License version 2 or later;
+ * Copyright 2013-2019 Valeriy Chupurnov https://xdsoft.net
+ */
+
+/**
+ * Check if browser has a color picker (a new HTML5 attribute for input tag)
+ *
+ * @method hasBrowserColorPicker
+ * @return {boolean}
+ */
+export const hasBrowserColorPicker = (): boolean => {
+    let supportsColor = true;
+
+    try {
+        const
+            a = document.createElement("input");
+
+        a.type = "color";
+        supportsColor = a.type === "color" && typeof a.selectionStart !== "number";
+    } catch (e) {
+        supportsColor = false;
+    }
+
+    return supportsColor;
+};

package/src/modules/helpers/checker/index.ts

@@ -11,4 +11,5 @@ export * from './isLicense';
 export * from './isNumeric';
 export * from './isPlainObject';
 export * from './isURL';
-export * from './isWindow';
+export * from './isWindow';
+export * from './hasBrowserColorPicker';

package/src/modules/helpers/html/cleanFromWord.ts

@@ -5,6 +5,7 @@
  */
 
 import { Dom } from '../../Dom';
+import { trim } from '../string';
 
 /**
  * The method automatically cleans up content from Microsoft Word and other HTML sources to ensure clean, compliant
@@ -34,26 +35,36 @@ export const cleanFromWord = (html: string): string => {
                 }
                 switch (node.nodeType) {
                     case Node.ELEMENT_NODE:
-                        if (node.nodeName === 'FONT') {
-                            Dom.unwrap(node);
-                        } else {
-                            [].slice
-                                .call((node as Element).attributes)
-                                .forEach((attr: Attr) => {
-                                    if (
-                                        [
-                                            'src',
-                                            'href',
-                                            'rel',
-                                            'content',
-                                        ].indexOf(attr.name.toLowerCase()) ===
-                                        -1
-                                    ) {
-                                        (node as Element).removeAttribute(
-                                            attr.name
-                                        );
-                                    }
-                                });
+                        switch (node.nodeName) {
+                            case 'STYLE':
+                            case 'LINK':
+                            case 'META':
+                                marks.push(node);
+                                break;
+
+                            case 'W:SDT':
+                            case 'W:SDTPR':
+                            case 'FONT':
+                                Dom.unwrap(node);
+                                break;
+
+                            default:
+                                Array.from((node as Element).attributes)
+                                    .forEach((attr: Attr) => {
+                                        if (
+                                            [
+                                                'src',
+                                                'href',
+                                                'rel',
+                                                'content',
+                                            ].indexOf(attr.name.toLowerCase()) ===
+                                            -1
+                                        ) {
+                                            (node as Element).removeAttribute(
+                                                attr.name
+                                            );
+                                        }
+                                    });
                         }
                         break;
                     case Node.TEXT_NODE:
@@ -73,7 +84,9 @@ export const cleanFromWord = (html: string): string => {
         html = convertedString;
     }
 
+    html = html.split(/(\n)/).filter(trim).join('\n');
+
     return html
         .replace(/<(\/)?(html|colgroup|col|o:p)[^>]*>/g, '')
         .replace(/<!--[^>]*>/g, '');
-};
+};

package/src/modules/helpers/html/clear.ts

@@ -1,4 +1,4 @@
-/*!
+    /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * License GNU General Public License version 2 or later;
  * Copyright 2013-2019 Valeriy Chupurnov https://xdsoft.net
@@ -28,4 +28,4 @@ export const clear = (value: string, removeEmptyBlocks = false): string => {
     }
 
     return value;
-};
+};

package/src/modules/popup/popup.ts

@@ -115,7 +115,7 @@ export class Popup extends Component {
      * @param {boolean} [noStandartActions=false] No call standarts action
      */
     open(
-        content: any,
+        content: string | HTMLElement | IControlTypeStrong,
         rightAlign?: boolean,
         noStandartActions: boolean = false
     ) {

package/src/modules/toolbar/button.ts

@@ -130,15 +130,17 @@ export class ToolbarButton extends ToolbarElement implements IToolbarButton {
                     popup
                 ) !== false
             ) {
-                popup.open(
-                    control.popup(
-                        this.jodit,
-                        getTarget(),
-                        control,
-                        popup.close,
-                        this
-                    )
+                const popupElm = control.popup(
+                    this.jodit,
+                    getTarget(),
+                    control,
+                    popup.close,
+                    this
                 );
+
+                if (popupElm) {
+                    popup.open(popupElm);
+                }
             }
             /**
              * Fired after popup was opened for some control button
@@ -230,6 +232,13 @@ export class ToolbarButton extends ToolbarElement implements IToolbarButton {
 
         this.container.classList.add('jodit_toolbar_btn-' + clearName);
 
+        if (this.jodit.options.direction) {
+            const
+                direction = this.jodit.options.direction.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
+
+            this.container.style.direction = direction;
+        }
+
         if (control.isInput) {
             this.container.classList.add('jodit_toolbar-input');
         } else {

package/src/modules/toolbar/collection.ts

@@ -237,10 +237,20 @@ export class ToolbarCollection<T extends IViewBased = IViewBased>
 
     container: HTMLElement;
 
+    /**
+     * Set direction
+     * @param direction
+     */
+    setDirection(direction: 'rtl' | 'ltr'): void {
+        this.container.style.direction = direction;
+        this.container.setAttribute('dir', direction);
+    }
+
     constructor(jodit: IViewBased) {
         super(<T>jodit);
         this.container = this.jodit.create.element('ul');
         this.container.classList.add('jodit_toolbar');
+
         this.initEvents();
     }
 

package/src/modules/view/panel.ts

@@ -20,7 +20,7 @@ export class Panel extends Component implements IPanel {
     public container: HTMLDivElement;
 
     /**
-     * @property {Create} Creator
+     * @property {Create} Native DOM element creator
      */
     public create: Create;
 

package/src/plugins/hotkeys.ts

@@ -18,13 +18,13 @@ declare module '../Config' {
 /**
  * You can redefine hotkeys for some command
  *
+ * @example
  * var jodit = new Jodit('#editor', {
  *  commandToHotkeys: {
  *      bold: 'ctrl+shift+b',
  *      italic: ['ctrl+i', 'ctrl+b'],
  *  }
  * })
- * @type {{}}
  */
 Config.prototype.commandToHotkeys = {
     removeFormat: ['ctrl+shift+m', 'cmd+shift+m'],

package/src/plugins/iframe.ts

@@ -207,6 +207,7 @@ export function iframe(editor: IJodit) {
             editor.iframe = editor.ownerDocument.createElement(
                 'iframe'
             ) as HTMLIFrameElement;
+
             editor.iframe.style.display = 'block';
             editor.iframe.src = 'about:blank';
             editor.iframe.className = 'jodit_wysiwyg_iframe';
@@ -227,6 +228,8 @@ export function iframe(editor: IJodit) {
             editor.editorDocument = doc;
             editor.editorWindow = editor.iframe.contentWindow as Window;
 
+            editor.create.inside.setDocument(doc);
+
             editor.editor = doc.body as HTMLBodyElement;
 
             if (editor.options.height === 'auto') {
@@ -263,7 +266,7 @@ export function iframe(editor: IJodit) {
                 e.matches || (e.matches = Element.prototype.matches); // fix inside iframe polifill
             })((editor.editorWindow as any).Element.prototype);
 
-            // throw events in our word
+            // throw events in our world
             if (editor.editorDocument.documentElement) {
                 editor.events
                     .on(

package/src/plugins/resizer.ts

@@ -48,6 +48,7 @@ Config.prototype.useTableResizer = true;
  * @property{boolean} useImageResizer=true Use true image editing frame size
  */
 Config.prototype.useImageResizer = true;
+
 /**
  * @property {object} resizer
  * @property {int} resizer.min_width=10 The minimum width for the editable element
@@ -66,10 +67,11 @@ Config.prototype.resizer = {
  * @param {Jodit} editor
  */
 export function resizer(editor: IJodit) {
-    // let clicked = false,
-    //     resized = false,
-    const LOCK_KEY = 'resizer';
-    let handle: HTMLElement,
+    const
+        LOCK_KEY = 'resizer';
+
+    let
+        handle: HTMLElement,
         currentElement: null | HTMLElement,
         resizeElementClicked: boolean = false,
         isResizing: boolean = false,
@@ -82,12 +84,11 @@ export function resizer(editor: IJodit) {
         new_w: number,
         diff_x: number,
         diff_y: number,
-        // timeouts = [],
-
         resizerIsVisible: boolean = false,
         timeoutSizeViewer: number = 0;
 
-    const resizerElm: HTMLElement = editor.create.fromHTML(
+    const
+        resizerElm: HTMLElement = editor.create.fromHTML(
             '<div data-editor_id="' +
                 editor.id +
                 '" style="display:none" class="jodit_resizer">' +
@@ -98,18 +99,22 @@ export function resizer(editor: IJodit) {
                 '<span>100x100</span>' +
                 '</div>'
         ),
+
         sizeViewer: HTMLSpanElement = resizerElm.getElementsByTagName(
             'span'
         )[0],
+
         hideResizer = () => {
             isResizing = false;
             resizerIsVisible = false;
             currentElement = null;
             resizerElm.style.display = 'none';
         },
+
         hideSizeViewer = () => {
             sizeViewer.style.opacity = '0';
         },
+
         showSizeViewer = (w: number, h: number) => {
             if (!editor.options.resizer.showSize) {
                 return;
@@ -129,9 +134,11 @@ export function resizer(editor: IJodit) {
                 editor.options.resizer.hideSizeTimeout
             );
         },
+
         updateSize = () => {
             if (resizerIsVisible && currentElement && resizerElm) {
-                const workplacePosition: IBound = offset(
+                const
+                    workplacePosition: IBound = offset(
                         (resizerElm.parentNode ||
                             editor.ownerDocument
                                 .documentElement) as HTMLElement,
@@ -152,8 +159,9 @@ export function resizer(editor: IJodit) {
                 // 1 - because need move border higher and toWYSIWYG the left than the picture
                 // 2 - in box-sizing: border-box mode width is real width indifferent by border-width.
 
-                const newTop: number = pos.top - 1 - workplacePosition.top;
-                const newLeft: number = pos.left - 1 - workplacePosition.left;
+                const
+                    newTop: number = pos.top - 1 - workplacePosition.top,
+                    newLeft: number = pos.left - 1 - workplacePosition.left;
 
                 if (
                     top !== newTop ||
@@ -178,6 +186,7 @@ export function resizer(editor: IJodit) {
                 }
             }
         },
+
         showResizer = () => {
             if (editor.options.readonly) {
                 return;
@@ -199,6 +208,7 @@ export function resizer(editor: IJodit) {
 
             updateSize();
         },
+
         /**
          * Bind an edit element toWYSIWYG element
          * @param {HTMLElement} element The element that you want toWYSIWYG add a function toWYSIWYG resize

package/src/plugins/size.ts

@@ -26,6 +26,7 @@ Config.prototype.allowResizeY = true;
 export function size(editor: IJodit) {
     const setHeight = (height: number | string) => {
         css(editor.container, 'height', height);
+
         if (editor.options.saveHeightInStorage) {
             editor.storage.set('height', height);
         }
@@ -70,17 +71,16 @@ export function size(editor: IJodit) {
                 'mousemove touchmove',
                 throttle((e: MouseEvent) => {
                     if (isResized) {
-                        setHeight(
-                            editor.options.allowResizeY
-                                ? start.h + e.clientY - start.y
-                                : start.h
-                        );
-                        setWidth(
-                            editor.options.allowResizeX
-                                ? start.w + e.clientX - start.x
-                                : start.w
-                        );
+                        if (editor.options.allowResizeY) {
+                            setHeight(start.h + e.clientY - start.y);
+                        }
+
+                        if (editor.options.allowResizeX) {
+                            setWidth(start.w + e.clientX - start.x);
+                        }
+
                         resizeWorkspaceImd();
+
                         editor.events.fire('resize');
                     }
                 }, editor.defaultTimeout / 10)

package/src/plugins/source.ts

@@ -137,12 +137,10 @@ export class source extends Plugin {
         if (
             eventOnFinalize &&
             urls[i] === undefined &&
-            this.jodit &&
-            this.jodit.events &&
             !this.isDestructed
         ) {
-            this.jodit.events.fire(eventOnFinalize);
-            this.jodit.events.fire(this.jodit.ownerWindow, eventOnFinalize);
+            this.jodit && this.jodit.events && this.jodit.events.fire(eventOnFinalize);
+            this.jodit && this.jodit.events && this.jodit.events.fire(this.jodit.ownerWindow, eventOnFinalize);
 
             return;
         }

package/src/plugins/table.ts

@@ -15,6 +15,7 @@ import {
     offset,
     scrollIntoView,
 } from '../modules/helpers/';
+import { setTimeout } from '../modules/helpers/async';
 import { IControlType } from '../types/toolbar';
 import { IBound, IDictionary } from '../types/types';
 import { IJodit } from '../types';
@@ -87,8 +88,10 @@ Config.prototype.controls.table = {
                     '</div>' +
                     '</form>'
             ) as HTMLFormElement,
+
             rows: HTMLSpanElement = form.querySelectorAll('span')[0],
             cols: HTMLSpanElement = form.querySelectorAll('span')[1],
+
             blocksContainer: HTMLDivElement = form.querySelector(
                 '.jodit_form-container'
             ) as HTMLDivElement,
@@ -285,14 +288,31 @@ Config.prototype.controls.table = {
  * Process tables in editor
  */
 export class TableProcessor extends Plugin {
-    public static isCell(tag: Node | null): boolean {
+    static isCell(tag: Node | null): boolean {
         return !!tag && /^TD|TH$/i.test(tag.nodeName);
     }
+
     private __key: string = 'table_processor_observer';
+
     private __selectMode: boolean = false;
 
     private __resizerDelta: number = 0;
     private __resizerHandler: HTMLElement;
+
+    showResizer() {
+        clearTimeout(this.hideTimeout);
+        this.__resizerHandler.style.display = 'block';
+    }
+
+    hideResizer() {
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = setTimeout(() => {
+            this.__resizerHandler.style.display = 'none';
+        }, this.jodit.defaultTimeout);
+    }
+
+    private hideTimeout: number;
+
     private __drag: boolean = false;
 
     private __wholeTable: boolean | null;
@@ -355,11 +375,12 @@ export class TableProcessor extends Plugin {
                     'jodit_table_resizer'
                 );
 
-                let startX: number = 0; // , startLeft = 0;
+                let startX: number = 0;
+
                 this.jodit.events
                     .on(
                         this.__resizerHandler,
-                        'mousedown touchstart',
+                        'mousedown.table touchstart.table',
                         (event: MouseEvent) => {
                             this.__drag = true;
 
@@ -416,12 +437,28 @@ export class TableProcessor extends Plugin {
                         }
                     )
                     .on(
-                        this.jodit.ownerWindow,
-                        'mousemove touchmoove',
+                        this.__resizerHandler,
+                        'mouseenter.table',
+                        () => {
+                            clearTimeout(this.hideTimeout);
+                        }
+                    )
+                    .on(
+                        this.jodit.editorWindow,
+                        'mousemove.table touchmove.table',
                         (event: MouseEvent) => {
                             if (this.__drag) {
                                 let x = event.clientX;
 
+                                const workplacePosition: IBound = offset(
+                                    (this.__resizerHandler.parentNode ||
+                                        this.jodit.ownerDocument
+                                            .documentElement) as HTMLElement,
+                                    this.jodit,
+                                    this.jodit.ownerDocument,
+                                    true
+                                );
+
                                 if (x < this.__minX) {
                                     x = this.__minX;
                                 }
@@ -429,12 +466,13 @@ export class TableProcessor extends Plugin {
                                     x = this.__maxX;
                                 }
 
-                                this.__resizerDelta = x - startX;
-                                this.__resizerHandler.style.left = x + 'px';
+                                this.__resizerDelta = x - startX + (!this.jodit.options.iframe ? 0 : workplacePosition.left);
+                                this.__resizerHandler.style.left = (x - (this.jodit.options.iframe ? 0 : workplacePosition.left)) + 'px';
 
                                 this.jodit.editorWindow
                                     .getSelection()
                                     .removeAllRanges();
+
                                 if (event.preventDefault) {
                                     event.preventDefault();
                                 }
@@ -442,7 +480,7 @@ export class TableProcessor extends Plugin {
                         }
                     );
 
-                this.jodit.container.appendChild(this.__resizerHandler);
+                this.jodit.workplace.appendChild(this.__resizerHandler);
             }
         }
     };
@@ -463,21 +501,32 @@ export class TableProcessor extends Plugin {
         offsetX: number = 0,
         delta: number = 0
     ) {
-        const box = offset(cell, this.jodit, this.jodit.editorDocument);
+        const
+            box = offset(cell, this.jodit, this.jodit.editorDocument);
+
         if (offsetX <= consts.NEARBY || box.width - offsetX <= consts.NEARBY) {
-            const parentBox: IBound = offset(
-                table,
-                this.jodit,
-                this.jodit.editorDocument
-            );
+            const
+                workplacePosition: IBound = offset(
+                    (this.__resizerHandler.parentNode ||
+                        this.jodit.ownerDocument
+                            .documentElement) as HTMLElement,
+                    this.jodit,
+                    this.jodit.ownerDocument,
+                    true
+                ),
+                parentBox: IBound = offset(
+                    table,
+                    this.jodit,
+                    this.jodit.editorDocument
+                );
 
             this.__resizerHandler.style.left =
-                (offsetX <= consts.NEARBY ? box.left : box.left + box.width) +
-                delta +
-                'px';
+                ((offsetX <= consts.NEARBY ? box.left : box.left + box.width) - workplacePosition.left + delta) + 'px';
+
             this.__resizerHandler.style.height = parentBox.height + 'px';
-            this.__resizerHandler.style.top = parentBox.top + 'px';
-            this.__resizerHandler.style.display = 'block';
+            this.__resizerHandler.style.top = (parentBox.top - workplacePosition.top) + 'px';
+
+            this.showResizer();
 
             if (offsetX <= consts.NEARBY) {
                 const prevTD = Dom.prev(
@@ -499,7 +548,7 @@ export class TableProcessor extends Plugin {
                 this.__setWorkCell(cell, !nextTD ? false : null);
             }
         } else {
-            this.__resizerHandler.style.display = 'none';
+            this.hideResizer();
         }
     }
 
@@ -577,12 +626,13 @@ export class TableProcessor extends Plugin {
         }
     };
 
-    public observe(table: HTMLTableElement) {
+    observe(table: HTMLTableElement) {
         (table as any)[this.__key] = true;
+
         let start: HTMLTableCellElement;
 
         this.jodit.events
-            .on(table, 'mousedown touchstart', (event: MouseEvent) => {
+            .on(table, 'mousedown.table touchstart.table', (event: MouseEvent) => {
                 if (this.jodit.options.readonly) {
                     return;
                 }
@@ -607,15 +657,15 @@ export class TableProcessor extends Plugin {
                     this.__selectMode = true;
                 }
             })
-            .on(table, 'mouseleave', (e: MouseEvent) => {
+            .on(table, 'mouseleave.table', (e: MouseEvent) => {
                 if (
                     this.__resizerHandler &&
                     this.__resizerHandler !== e.relatedTarget
                 ) {
-                    this.__resizerHandler.style.display = 'none';
+                    this.hideResizer();
                 }
             })
-            .on(table, 'mousemove touchmove', (event: MouseEvent) => {
+            .on(table, 'mousemove.table touchmove.table', (event: MouseEvent) => {
                 if (this.jodit.options.readonly) {
                     return;
                 }
@@ -658,7 +708,8 @@ export class TableProcessor extends Plugin {
                             }
                         }
 
-                        const max = box[bound[1][0]][bound[1][1]],
+                        const
+                            max = box[bound[1][0]][bound[1][1]],
                             min = box[bound[0][0]][bound[0][1]];
 
                         this.jodit.events.fire(
@@ -780,6 +831,7 @@ export class TableProcessor extends Plugin {
                                 '%';
                         }
                     }
+
                     editor.setEditorValue();
                     editor.selection.focus();
                 }

package/src/styles/icons/index.ts

@@ -78,6 +78,7 @@ import * as update from './update.svg';
 import * as upload from './upload.svg';
 import * as valign from './valign.svg';
 import * as video from './video.svg';
+import * as palette from './palette.svg';
 
 export {
     about,
@@ -154,4 +155,5 @@ export {
     upload,
     valign,
     video,
+    palette
 };

package/src/styles/icons/palette.svg

@@ -0,0 +1,13 @@
+<svg x="0px" y="0px" viewBox="0 0 459 459">
+<g>
+	<g>
+		<path d="M229.5,0C102,0,0,102,0,229.5S102,459,229.5,459c20.4,0,38.25-17.85,38.25-38.25c0-10.2-2.55-17.85-10.2-25.5
+			c-5.1-7.65-10.2-15.3-10.2-25.5c0-20.4,17.851-38.25,38.25-38.25h45.9c71.4,0,127.5-56.1,127.5-127.5C459,91.8,357,0,229.5,0z
+			 M89.25,229.5c-20.4,0-38.25-17.85-38.25-38.25S68.85,153,89.25,153s38.25,17.85,38.25,38.25S109.65,229.5,89.25,229.5z
+			 M165.75,127.5c-20.4,0-38.25-17.85-38.25-38.25S145.35,51,165.75,51S204,68.85,204,89.25S186.15,127.5,165.75,127.5z
+			 M293.25,127.5c-20.4,0-38.25-17.85-38.25-38.25S272.85,51,293.25,51s38.25,17.85,38.25,38.25S313.65,127.5,293.25,127.5z
+			 M369.75,229.5c-20.4,0-38.25-17.85-38.25-38.25S349.35,153,369.75,153S408,170.85,408,191.25S390.15,229.5,369.75,229.5z"
+		/>
+	</g>
+</g>
+</svg>

package/src/styles/modules/btn.less

@@ -9,10 +9,10 @@
     border-radius: 0;
 
     background-color: #f5f5f5;
-    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-    border-color: #cccccc;
+    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
+    border-color: #ccc;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-    color: #333333;
+    color: #333;
 
     background-repeat: repeat-x;
     outline: 0;