New version 3.0.24. Read more https://github.com/xdan/jodit/releases/…

…tag/3.0.24
xdan · Aug 28, 2017 · c250ccd · c250ccd
1 parent 142d3f7
commit c250ccd
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 43 deletions.
diff --git a/build/jodit.min.css b/build/jodit.min.css
diff --git a/build/jodit.min.js b/build/jodit.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jodit",
-  "version": "3.0.23",
+  "version": "3.0.24",
   "description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
   "main": "index.js",
   "scripts": {

diff --git a/src/modules/Widget.ts b/src/modules/Widget.ts
@@ -28,7 +28,7 @@ export namespace Widget {
         const valueHex = normalizeColor(coldColor),
             form: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_colorpicker"></div>'),
             eachColor = (colors) => {
-                let stack = [];
+                const stack: string[] = [];
                 if (isPlainObject(colors)) {
                     Object.keys(colors).forEach((key) => {
                         stack.push('<div class="jodit_colorpicker_group jodit_colorpicker_group-' + key + '">');
@@ -101,6 +101,8 @@ export namespace Widget {
      *
      * @param {Jodit} editor
      * @param {object} tabs PlainObject where 'key' will be tab's Title and `value` is tab's content
+     * @param {object} state You can use for this param any HTML element for remembering active tab
+     * @param {string} state.activeTab
      *
      * @example
      * ```javascript
@@ -113,18 +115,22 @@ export namespace Widget {
      * });
      * ```
      */
-    export const TabsWidget = (editor: Jodit, tabs: {[key: string]: string|HTMLElement|Function}): HTMLDivElement => {
+    export const TabsWidget = (editor: Jodit, tabs: {[key: string]: string|HTMLElement|Function}, state?: {__activeTab: string}): HTMLDivElement => {
         let box: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_tabs"></div>'),
             tabBox: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_tabs_wrapper"></div>'),
             buttons: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_tabs_buttons"></div>'),
+            nameToTab: {[key: string]: {
+                button: HTMLDivElement,
+                tab: HTMLDivElement
+            }} = {},
             tabcount = 0;
 
         box.appendChild(buttons);
         box.appendChild(tabBox);
 
         each(tabs, (name: string, tabOptions: Function|HTMLElement) => {
-            const tab = dom('<div class="jodit_tab"></div>'),
-                button = dom('<a href="javascript:void(0);"></a>');
+            const tab: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_tab"></div>'),
+                button: HTMLDivElement = <HTMLDivElement>dom('<a href="javascript:void(0);"></a>');
 
             button.innerHTML = editor.i18n(name);
             buttons.appendChild(button);
@@ -137,7 +143,7 @@ export namespace Widget {
 
             tabBox.appendChild(tab);
 
-            editor.__on(button, 'mousedown touchstart', (e) => {
+            editor.__on(button, 'mousedown touchstart', (e: MouseEvent) => {
                 $$('a', buttons).forEach((a) => {
                     a.classList.remove('active');
                 });
@@ -151,11 +157,22 @@ export namespace Widget {
                     tabOptions.call(editor);
                 }
                 e.stopPropagation();
+
+                if (state) {
+                    state.__activeTab = name;
+                }
+
                 return false;
             });
 
+            nameToTab[name] = {
+                button,
+                tab,
+            };
+
             tabcount += 1;
         });
+
         if (!tabcount) {
             return;
         }
@@ -164,8 +181,13 @@ export namespace Widget {
             a.style.width = (100 / tabcount).toFixed(10) + '%';
         });
 
-        buttons.querySelector('a:first-child').classList.add('active');
-        tabBox.querySelector('.jodit_tab:first-child').classList.add('active');
+        if (!state || !state.__activeTab || !nameToTab[state.__activeTab]) {
+            buttons.querySelector('a:first-child').classList.add('active');
+            tabBox.querySelector('.jodit_tab:first-child').classList.add('active');
+        } else {
+            nameToTab[state.__activeTab].button.classList.add('active');
+            nameToTab[state.__activeTab].tab.classList.add('active');
+        }
 
         return box;
     };

diff --git a/src/plugins/color.ts b/src/plugins/color.ts
@@ -1,15 +1,18 @@
 import Jodit from '../Jodit';
-import {normalizeColor} from '../modules/Helpers';
+import {css, normalizeColor} from '../modules/Helpers';
 import {Config} from "../Config";
 import {Widget} from "../modules/Widget";
 import TabsWidget = Widget.TabsWidget;
 import ColorPickerWidget = Widget.ColorPickerWidget;
+import Dom from "../modules/Dom";
 
 Config.prototype.controls.brush = {
     css: {
         'backgroundColor' : (editor: Jodit, color: string) => {
             const  check = (colors: {[key:string]:string[]}|string[]) => {
-                let i, keys;
+                let i: number,
+                    keys: string[];
+
                 if (typeof colors === 'object') {
                     keys = Object.keys(colors);
                     for (i = 0; i < keys.length; i += 1) {
@@ -26,10 +29,12 @@ Config.prototype.controls.brush = {
             return check(editor.options.colors);
         }
     },
-    popup: (editor: Jodit, current, self, close) => {
+    popup: (editor: Jodit, current: HTMLElement, self, close) => {
         let color: string = '',
             bg_color: string = '',
-            tabs: {[key: string]: HTMLElement};
+            tabs: {[key: string]: HTMLElement},
+            currentElement: HTMLElement;
+
         /* const sel = editor.win.getSelection(),
              checkRemoveOpportunity = () => {
                  if (current && (!current.hasAttribute("style") || !current.getAttribute("style").length)) {
@@ -58,30 +63,28 @@ Config.prototype.controls.brush = {
                  }
              };*/
 
-        //tryGetCurrent();
-
-        //const widget = new (require('./modules/Widget').default)(editor);
+        if (current && Dom.isNode(current, editor.win) && current.nodeType === Node.ELEMENT_NODE) {
+            color = css(current, 'color').toString();
+            bg_color = css(current, 'background-color').toString();
+            currentElement = current;
+        }
 
         const backgroundTag: HTMLElement = ColorPickerWidget(editor, (value: string) => {
-            //if (!current) {
-            editor.execCommand('background', false, value);
+            if (!currentElement) {
+                editor.execCommand('background', false, value);
+            } else {
+                currentElement.style.backgroundColor = value;
+            }
             close();
-            //tryGetCurrent();
-            // } else {
-            //     current.style.backgroundColor = value;
-            //   }
-            //checkRemoveOpportunity();
         }, bg_color);
 
         const colorTab: HTMLElement = ColorPickerWidget(editor, (value: string) => {
-            // if (!current) {
-            editor.execCommand('forecolor', false, value);
+            if (!currentElement) {
+                editor.execCommand('forecolor', false, value);
+            } else {
+                currentElement.style.color = value;
+            }
             close();
-            //     tryGetCurrent();
-            // } else {
-            //    current.style.color = value;
-            // }
-            //checkRemoveOpportunity();
         }, color);
 
         if (editor.options.colorPickerDefaultTab === 'background') {
@@ -96,7 +99,7 @@ Config.prototype.controls.brush = {
             };
         }
 
-        return TabsWidget(editor, tabs);
+        return TabsWidget(editor, tabs, <any>currentElement);
     },
         tooltip: "Fill color or set the text color"
 };

diff --git a/src/plugins/inlinePopup.ts b/src/plugins/inlinePopup.ts
@@ -57,11 +57,22 @@ declare module "../Config" {
  */
 Config.prototype.popup = {
     a: [
+        {
+            name: 'eye',
+            tooltip: 'Open link',
+            exec: (editor: Jodit, current: HTMLAnchorElement) => {
+                if (current && current.getAttribute('href')) {
+                    window.open(current.getAttribute('href'));
+                }
+            }
+        },
         {
             name: 'link',
+            tooltip: 'Edit link',
             icon: 'pencil'
         },
-        'unlink'
+        'unlink',
+        'brush'
     ],
     img: [
         {
@@ -332,7 +343,7 @@ Jodit.plugins.Popup = function (editor: Jodit) {
         .on('afterInit', () => {
             editor.container
                 .appendChild(popup);
-            editor.__on(popup,'mouseup', (e: MouseEvent) => {
+            editor.__on(popup,'mousedown', (e: MouseEvent) => {
                 e.stopPropagation();
             });
             let clickOnImage: boolean = false;
@@ -346,7 +357,7 @@ Jodit.plugins.Popup = function (editor: Jodit) {
                     clickOnImage = false;
                 }
             });
-            editor.__on(window, 'mouseup', () => {
+            editor.__on(window, 'mousedown', () => {
                 if (!clickOnImage) {
                     hidePopup();
                 }

diff --git a/src/plugins/link.ts b/src/plugins/link.ts
@@ -35,11 +35,12 @@ Config.prototype.link = {
 
 
 Config.prototype.controls.unlink = {
-    exec: (editor, current: Node) => {
+    exec: (editor: Jodit, current: Node) => {
         let anchor: HTMLAnchorElement|false = <HTMLAnchorElement>Dom.closest(current, 'A', editor.editor);
         if (anchor) {
             Dom.unwrap(anchor);
         }
+        editor.events.fire('hidePopup');
     }
 };
 Config.prototype.controls.link = {

diff --git a/src/plugins/source.ts b/src/plugins/source.ts
@@ -100,7 +100,6 @@ Jodit.plugins.source = class extends Component {
 
     private loadNext = (i: number, urls: string[], eventOnFinalize: false|string = 'aceReady', className: string = this.className) => {
         if (eventOnFinalize && urls[i] === undefined && this.jodit && this.jodit.events) {
-            debugger
             this.jodit.events.fire(eventOnFinalize);
             this.__fire(window, eventOnFinalize);
             return;

diff --git a/src/styles/widgets/form.less b/src/styles/widgets/form.less
@@ -75,7 +75,7 @@
       transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
     }
     &:checked:after {
-      //background: data-uri('ok.svg') no-repeat center center;
+      background: data-uri("ok.svg") no-repeat center center;
       background-color: @active_border;
       border-color: @active_border;
     }

diff --git a/src/styles/widgets/ok.svg b/src/styles/widgets/ok.svg
diff --git a/test/tests/commandsTest.js b/test/tests/commandsTest.js
@@ -297,7 +297,6 @@ describe('Commands Jodit Editor Tests', function() {
         sel.addRange(range);
 
         editor.execCommand('underline');
-        //debugger
         editor.selection.insertNode(editor.doc.createTextNode('data'));
 
         expect(editor.getEditorValue()).to.equal('<p>te<u>data</u>st</p>');

diff --git a/test/tests/interfaceTest.js b/test/tests/interfaceTest.js
@@ -22,8 +22,6 @@ describe('Test interface', function() {
                     e.pageX = pos.left + 5;
                     e.pageY = pos.top + 5;
                     // createPoint(e.pageX, e.pageY)
-                    // console.log(editor.doc.elementFromPoint(e.pageX - editor.win.pageXOffset, e.pageY - editor.win.pageYOffset))
-                    // debugger;
                 });
 
                 var newline = editor.container.querySelector('.jodit-add-new-line');