TINY-1561: fixed inlite table insert and blur problem, sprinkled types

src/core/main/ts/api/geom/Rect.ts

@@ -14,6 +14,13 @@
  * @class tinymce.geom.Rect
  */
 
+export interface GeomRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
 const min = Math.min, max = Math.max, round = Math.round;
 
 /**

src/core/main/ts/api/util/Promise.ts

@@ -194,4 +194,4 @@ const promise = function () {
 };
 
 const promiseObj = window.Promise ? window.Promise : promise();
-export default promiseObj;
+export default promiseObj as PromiseConstructor;

src/core/main/ts/file/ImageScanner.ts

@@ -91,7 +91,7 @@ export default function (uploadStatus, blobCache) {
   const cachedPromises = {};
 
   const findAll = function (elm, predicate?) {
-    let images, promises;
+    let images;
 
     if (!predicate) {
       predicate = Fun.constant(true);
@@ -127,9 +127,7 @@ export default function (uploadStatus, blobCache) {
       return false;
     });
 
-    promises = Arr.map(images, function (img) {
-      let newPromise;
-
+    const promises = Arr.map(images, function (img) {
       if (cachedPromises[img.src]) {
         // Since the cached promise will return the cached image
         // We need to wrap it and resolve with the actual image
@@ -146,7 +144,7 @@ export default function (uploadStatus, blobCache) {
         });
       }
 
-      newPromise = new Promise(function (resolve, reject) {
+      const newPromise = new Promise<{image, blogIfo}>(function (resolve, reject) {
         imageToBlobInfo(blobCache, img, resolve, reject);
       }).then(function (result) {
         delete cachedPromises[result.image.src];

src/plugins/image/main/ts/core/Utils.ts

@@ -168,7 +168,7 @@ const waitLoadImage = function (editor, data, imgElm) {
 };
 
 const blobToDataUri = function (blob) {
-  return new Promise(function (resolve, reject) {
+  return new Promise<string>(function (resolve, reject) {
     const reader = new FileReader();
     reader.onload = function () {
       resolve(reader.result);

src/plugins/imagetools/main/ts/core/Utils.ts

@@ -27,7 +27,7 @@ const traverse = function (json, path) {
 };
 
 const requestUrlAsBlob = function (url, headers) {
-  return new Promise(function (resolve) {
+  return new Promise<{status: number, blob: Blob}>(function (resolve) {
     let xhr;
 
     xhr = new XMLHttpRequest();

src/plugins/media/main/ts/core/Service.ts

@@ -14,7 +14,7 @@ import DataToHtml from './DataToHtml';
 
 const cache = {};
 const embedPromise = function (data, dataToHtml, handler) {
-  return new Promise(function (res, rej) {
+  return new Promise<{url: string, html: string}>(function (res, rej) {
     const wrappedResolve = function (response) {
       if (response.html) {
         cache[data.source1] = response;
@@ -33,7 +33,7 @@ const embedPromise = function (data, dataToHtml, handler) {
 };
 
 const defaultPromise = function (data, dataToHtml) {
-  return new Promise(function (res) {
+  return new Promise<{url: string, html: string}>(function (res) {
     res({ html: dataToHtml(data), url: data.source1 });
   });
 };

src/themes/inlite/demo/css/demo.css

@@ -15,9 +15,9 @@ blockquote {
   border: 1px solid gray;
 }
 
-table, td {
+/* table, td {
   border: 1px dashed gray;
-}
+} */
 
 /*.mce-tinymce-inline {
   transition: left 50ms ease-in-out, top 50ms ease-in-out;

src/themes/inlite/main/ts/Theme.ts

@@ -11,7 +11,7 @@
 import ThemeManager from 'tinymce/core/api/ThemeManager';
 import ThemeApi from './api/ThemeApi';
 import Buttons from './ui/Buttons';
-import Panel from './ui/Panel';
+import * as Panel from './ui/Panel';
 import Api from 'tinymce/ui/Api';
 import FormatControls from 'tinymce/ui/FormatControls';
 
@@ -21,7 +21,7 @@ Api.registerToFactory();
 Api.appendTo(window.tinymce ? window.tinymce : {});
 
 ThemeManager.add('inlite', function (editor) {
-  const panel = Panel();
+  const panel = Panel.create();
 
   FormatControls.setup(editor);
   Buttons.addToEditor(editor, panel);

src/themes/inlite/main/ts/alien/Arr.ts

@@ -8,8 +8,8 @@
  * Contributing: http://www.tinymce.com/contributing
  */
 
-const flatten = function (arr) {
-  return arr.reduce(function (results, item) {
+const flatten = function (arr: any[]) {
+  return arr.reduce(function (results: any[], item) {
     return Array.isArray(item) ? results.concat(flatten(item)) : results.concat(item);
   }, []);
 };

src/themes/inlite/main/ts/alien/EditorSettings.ts

@@ -9,6 +9,7 @@
  */
 
 import Type from './Type';
+import { Editor } from 'tinymce/core/api/Editor';
 
 const validDefaultOrDie = function (value, predicate) {
   if (predicate(value)) {
@@ -19,14 +20,14 @@ const validDefaultOrDie = function (value, predicate) {
 };
 
 const getByTypeOr = function (predicate) {
-  return function (editor, name, defaultValue) {
+  return function (editor: Editor, name: string, defaultValue) {
     const settings = editor.settings;
     validDefaultOrDie(defaultValue, predicate);
     return name in settings && predicate(settings[name]) ? settings[name] : defaultValue;
   };
 };
 
-const splitNoEmpty = function (str, delim) {
+const splitNoEmpty = function (str: string, delim: RegExp) {
   return str.split(delim).filter(function (item) {
     return item.length > 0;
   });
@@ -37,7 +38,7 @@ const itemsToArray = function (value, defaultValue) {
     return typeof value === 'string' ? splitNoEmpty(value, /[ ,]/) : value;
   };
 
-  const boolToItemsArray = function (value, defaultValue) {
+  const boolToItemsArray = function (value: boolean, defaultValue) {
     return value === false ? [] : defaultValue;
   };
 
@@ -53,7 +54,7 @@ const itemsToArray = function (value, defaultValue) {
 };
 
 const getToolbarItemsOr = function (predicate) {
-  return function (editor, name, defaultValue) {
+  return function (editor: Editor, name: string, defaultValue) {
     const value = name in editor.settings ? editor.settings[name] : defaultValue;
     validDefaultOrDie(defaultValue, predicate);
     return itemsToArray(value, defaultValue);

src/themes/inlite/main/ts/alien/Type.ts

@@ -14,9 +14,7 @@ const isType = function (type) {
   };
 };
 
-const isArray = function (value) {
-  return Array.isArray(value);
-};
+const isArray = (value: any): value is any[] => Array.isArray(value);
 
 const isNull = function (value) {
   return value === null;
@@ -27,12 +25,16 @@ const isObject = function (predicate) {
     return !isNull(value) && !isArray(value) && predicate(value);
   };
 };
+const isString = (value: any): value is string => isType('string')(value);
+const isNumber = (value: any): value is number => isType('number')(value);
+const isFunction = (value: any): value is Function => isType('function')(value);
+const isBoolean = (value: any): value is boolean => isType('boolean')(value);
 
 export default {
-  isString: isType('string'),
-  isNumber: isType('number'),
-  isBoolean: isType('boolean'),
-  isFunction: isType('function'),
+  isString,
+  isNumber,
+  isBoolean,
+  isFunction,
   isObject: isObject(isType('object')),
   isNull,
   isArray

src/themes/inlite/main/ts/alien/UiContainer.ts

@@ -12,7 +12,7 @@ import { Option } from '@ephox/katamari';
 import Env from 'tinymce/core/api/Env';
 import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
 
-const getUiContainerDelta = function () {
+const getUiContainerDelta = function (): Option<{x: number, y: number}> {
   const uiContainer = Env.container;
   if (uiContainer && DOMUtils.DOM.getStyle(uiContainer, 'position', true) !== 'static') {
     const containerPos = DOMUtils.DOM.getPos(uiContainer);

src/themes/inlite/main/ts/alien/Unlink.ts

@@ -12,6 +12,7 @@ import Bookmark from './Bookmark';
 import Tools from 'tinymce/core/api/util/Tools';
 import TreeWalker from 'tinymce/core/api/dom/TreeWalker';
 import RangeUtils from 'tinymce/core/api/dom/RangeUtils';
+import { Editor } from 'tinymce/core/api/Editor';
 
 /**
  * Unlink implementation that doesn't leave partial links for example it would produce:
@@ -20,7 +21,7 @@ import RangeUtils from 'tinymce/core/api/dom/RangeUtils';
  *  a[b<a href="x">c]d</a>e -> a[bc]<a href="x">d</a>e
  */
 
-const getSelectedElements = function (rootElm, startNode, endNode) {
+const getSelectedElements = function (rootElm: HTMLElement, startNode: Node, endNode: Node) {
   let walker, node;
   const elms = [];
 
@@ -38,7 +39,7 @@ const getSelectedElements = function (rootElm, startNode, endNode) {
   return elms;
 };
 
-const unwrapElements = function (editor, elms) {
+const unwrapElements = function (editor: Editor, elms: HTMLElement) {
   let bookmark, dom, selection;
 
   dom = editor.dom;
@@ -52,16 +53,16 @@ const unwrapElements = function (editor, elms) {
   selection.setRng(Bookmark.resolve(dom, bookmark));
 };
 
-const isLink = function (elm) {
+const isLink = function (elm: HTMLElement) {
   return elm.nodeName === 'A' && elm.hasAttribute('href');
 };
 
-const getParentAnchorOrSelf = function (dom, elm) {
+const getParentAnchorOrSelf = function (dom, elm: Node) {
   const anchorElm = dom.getParent(elm, isLink);
   return anchorElm ? anchorElm : elm;
 };
 
-const getSelectedAnchors = function (editor) {
+const getSelectedAnchors = function (editor: Editor) {
   let startElm, endElm, rootElm, anchorElms, selection, dom, rng;
 
   selection = editor.selection;
@@ -75,7 +76,7 @@ const getSelectedAnchors = function (editor) {
   return anchorElms;
 };
 
-const unlinkSelection = function (editor) {
+const unlinkSelection = function (editor: Editor) {
   unwrapElements(editor, getSelectedAnchors(editor));
 };
 

src/themes/inlite/main/ts/alien/Uuid.ts

@@ -23,7 +23,7 @@ const seed = function () {
   return 's' + Date.now().toString(36) + rnd() + rnd() + rnd();
 };
 
-const uuid = function (prefix) {
+const uuid = function (prefix: string) {
   return prefix + (count++) + seed();
 };
 

src/themes/inlite/main/ts/api/Events.ts

@@ -7,12 +7,13 @@
  * License: http://www.tinymce.com/license
  * Contributing: http://www.tinymce.com/contributing
  */
+import { Editor } from 'tinymce/core/api/Editor';
 
-const fireSkinLoaded = function (editor) {
+const fireSkinLoaded = function (editor: Editor) {
   editor.fire('SkinLoaded');
 };
 
-const fireBeforeRenderUI = function (editor) {
+const fireBeforeRenderUI = function (editor: Editor) {
   return editor.fire('BeforeRenderUI');
 };
 

src/themes/inlite/main/ts/api/Settings.ts

@@ -11,34 +11,35 @@
 import EditorManager from 'tinymce/core/api/EditorManager';
 import EditorSettings from '../alien/EditorSettings';
 import Layout from '../core/Layout';
+import { Editor } from 'tinymce/core/api/Editor';
 
-const toAbsoluteUrl = function (editor, url) {
+const toAbsoluteUrl = function (editor: Editor, url: string) {
   return editor.documentBaseURI.toAbsolute(url);
 };
 
-const urlFromName = function (name) {
+const urlFromName = function (name: string) {
   const prefix = EditorManager.baseURL + '/skins/';
   return name ? prefix + name : prefix + 'lightgray';
 };
 
-const getTextSelectionToolbarItems = function (editor) {
+const getTextSelectionToolbarItems = function (editor: Editor) {
   return EditorSettings.getToolbarItemsOr(editor, 'selection_toolbar', ['bold', 'italic', '|', 'quicklink', 'h2', 'h3', 'blockquote']);
 };
 
-const getInsertToolbarItems = function (editor) {
+const getInsertToolbarItems = function (editor: Editor) {
   return EditorSettings.getToolbarItemsOr(editor, 'insert_toolbar', ['quickimage', 'quicktable']);
 };
 
-const getPositionHandler = function (editor) {
+const getPositionHandler = function (editor: Editor) {
   return EditorSettings.getHandlerOr(editor, 'inline_toolbar_position_handler', Layout.defaultHandler);
 };
 
-const getSkinUrl = function (editor) {
+const getSkinUrl = function (editor: Editor) {
   const settings = editor.settings;
   return settings.skin_url ? toAbsoluteUrl(editor, settings.skin_url) : urlFromName(settings.skin);
 };
 
-const isSkinDisabled = function (editor) {
+const isSkinDisabled = function (editor: Editor) {
   return editor.settings.skin === false;
 };
 

src/themes/inlite/main/ts/api/ThemeApi.ts

@@ -11,8 +11,10 @@
 import Render from '../core/Render';
 import NotificationManagerImpl from 'tinymce/ui/NotificationManagerImpl';
 import WindowManagerImpl from 'tinymce/ui/WindowManagerImpl';
+import { Editor } from 'tinymce/core/api/Editor';
+import { InlitePanel } from 'tinymce/themes/inlite/ui/Panel';
 
-const get = function (editor, panel) {
+const get = function (editor: Editor, panel: InlitePanel) {
   const renderUI = function () {
     return Render.renderUI(editor, panel);
   };