Merge pull request #542 in TINYMCE/tinymce from TINY-1514 to master

* commit '34d5775bd7c092a826b9def7b690b5855a6d44ea': TINY-1514: added a ui_container demo TINY-1514: fixed so there can be multiple ui_containers TINY-1514: fixed various issues with the ui_container option
tinymce · Feb 19, 2018 · 6a5ae9b · 6a5ae9b
2 parents 7832865 + 34d5775
commit 6a5ae9b
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 44 deletions.
diff --git a/src/core/demo/html/ui_container.html b/src/core/demo/html/ui_container.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>ui_container Demo Page</title>
+</head>
+
+<body>
+  <div id="left" style="position: relative; right: 10px; top: 10px; width: 500px; height: 500px; overflow: scroll; margin: 40px; padding: 20px; border: 1px solid black">
+    <h2 style="height: 400px">Left side iframe</h2>
+    <textarea>
+        <table style="border-collapse: collapse; width: 100%;" border="1">
+            <tbody>
+            <tr>
+            <td style="width: 50%;">&nbsp;</td>
+            <td style="width: 50%;">&nbsp;</td>
+            </tr>
+            <tr>
+            <td style="width: 50%;">&nbsp;</td>
+            <td style="width: 50%;">&nbsp;</td>
+            </tr>
+            </tbody>
+        </table>
+      </textarea>
+
+      <h2>Left side inline</h2>
+      <div class="tinymce" style="margin-bottom: 1000px">
+        <table style="border-collapse: collapse; width: 100%;" border="1">
+          <tbody>
+            <tr>
+              <td style="width: 50%;">&nbsp;</td>
+              <td style="width: 50%;">&nbsp;</td>
+            </tr>
+            <tr>
+              <td style="width: 50%;">&nbsp;</td>
+              <td style="width: 50%;">&nbsp;</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+  </div>
+
+  <div id="right" style="position: absolute; right: 10px; top: 10px; width: 500px; height: 500px; overflow: scroll; margin: 40px; padding: 20px; border: 1px solid black">
+    <h2 style="height: 400px">Right side iframe</h2>
+    <textarea>
+      <table style="border-collapse: collapse; width: 100%;" border="1">
+          <tbody>
+          <tr>
+          <td style="width: 50%;">&nbsp;</td>
+          <td style="width: 50%;">&nbsp;</td>
+          </tr>
+          <tr>
+          <td style="width: 50%;">&nbsp;</td>
+          <td style="width: 50%;">&nbsp;</td>
+          </tr>
+          </tbody>
+      </table>
+    </textarea>
+
+    <h2>Right side inline</h2>
+    <div class="tinymce" style="margin-bottom: 1000px">
+      <table style="border-collapse: collapse; width: 100%;" border="1">
+        <tbody>
+          <tr>
+            <td style="width: 50%;">&nbsp;</td>
+            <td style="width: 50%;">&nbsp;</td>
+          </tr>
+          <tr>
+            <td style="width: 50%;">&nbsp;</td>
+            <td style="width: 50%;">&nbsp;</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <script src="../../../../js/tinymce/tinymce.js"></script>
+  <script src="../../../../scratch/demos/core/demo.js"></script>
+  <script>demos.UiContainerDemo();</script>
+</body>
+</html>
diff --git a/src/core/demo/ts/demo/Demos.ts b/src/core/demo/ts/demo/Demos.ts
@@ -3,6 +3,7 @@ import ContentEditableFalseDemo from './ContentEditableFalseDemo';
 import CustomThemeDemo from './CustomThemeDemo';
 import FullDemo from './FullDemo';
 import TinyMceDemo from './TinyMceDemo';
+import UiContainerDemo from './UiContainerDemo';
 
 declare const window: any;
 
@@ -11,5 +12,6 @@ window.demos = {
   ContentEditableFalseDemo,
   CustomThemeDemo,
   FullDemo,
-  TinyMceDemo
+  TinyMceDemo,
+  UiContainerDemo
 };
diff --git a/src/core/demo/ts/demo/UiContainerDemo.ts b/src/core/demo/ts/demo/UiContainerDemo.ts
@@ -0,0 +1,126 @@
+/**
+ * UiContainer.ts
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2017 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+import { Merger } from '@ephox/katamari';
+
+declare let tinymce: any;
+
+export default function () {
+  const generalSettings = {
+    skin_url: '../../../../js/tinymce/skins/lightgray',
+    codesample_content_css: '../../../../js/tinymce/plugins/codesample/css/prism.css',
+    visualblocks_content_css: '../../../../js/tinymce/plugins/visualblocks/css/visualblocks.css',
+    images_upload_url: 'd',
+    // rtl_ui: true,
+    link_list: [
+      { title: 'My page 1', value: 'http://www.tinymce.com' },
+      { title: 'My page 2', value: 'http://www.moxiecode.com' }
+    ],
+    image_list: [
+      { title: 'My page 1', value: 'http://www.tinymce.com' },
+      { title: 'My page 2', value: 'http://www.moxiecode.com' }
+    ],
+    image_class_list: [
+      { title: 'None', value: '' },
+      { title: 'Some class', value: 'class-name' }
+    ],
+    importcss_append: true,
+    height: 400,
+    file_picker_callback (callback, value, meta) {
+      // Provide file and text for the link dialog
+      if (meta.filetype === 'file') {
+        callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
+      }
+
+      // Provide image and alt text for the image dialog
+      if (meta.filetype === 'image') {
+        callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
+      }
+
+      // Provide alternative source and posted for the media dialog
+      if (meta.filetype === 'media') {
+        callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
+      }
+    },
+    spellchecker_callback (method, text, success, failure) {
+      const words = text.match(this.getWordCharPattern());
+
+      if (method === 'spellcheck') {
+        const suggestions = {};
+
+        for (let i = 0; i < words.length; i++) {
+          suggestions[words[i]] = ['First', 'Second'];
+        }
+
+        success(suggestions);
+      }
+
+      if (method === 'addToDictionary') {
+        success();
+      }
+    },
+    templates: [
+      { title: 'Some title 1', description: 'Some desc 1', content: 'My content' },
+      { title: 'Some title 2', description: 'Some desc 2', content: '<div class="mceTmpl"><span class="cdate">cdate</span><span class="mdate">mdate</span>My content2</div>' }
+    ],
+    template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
+    template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
+    image_caption: true,
+    theme: 'modern',
+    mobile: {
+      plugins: [
+        'autosave lists'
+      ]
+    },
+    plugins: [
+      'autosave advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
+      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
+      'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern',
+      'codesample help noneditable print'
+    ],
+    // rtl_ui: true,
+    add_unload_trigger: false,
+    autosave_ask_before_unload: false
+  };
+
+  const iframeSettings = Merger.deepMerge(generalSettings, {
+    toolbar: 'fontsizeselect fontselect insertfile undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
+    'bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table codesample code | ltr rtl'
+  });
+
+  const inlineSettings = Merger.deepMerge(generalSettings, {
+    inline: true,
+    toolbar: [
+      'fontsizeselect fontselect insertfile undo redo | insert | styleselect',
+      'bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+      'print preview media fullpage | forecolor backcolor emoticons table codesample code | ltr rtl'
+    ]
+  });
+
+  tinymce.init(Merger.deepMerge(iframeSettings, {
+    selector: '#left textarea',
+    ui_container: '#left'
+  }));
+
+  tinymce.init(Merger.deepMerge(inlineSettings, {
+    selector: '#left div.tinymce',
+    ui_container: '#left'
+  }));
+
+  tinymce.init(Merger.deepMerge(iframeSettings, {
+    selector: '#right textarea',
+    ui_container: '#right'
+  }));
+
+  tinymce.init(Merger.deepMerge(inlineSettings, {
+    selector: '#right div.tinymce',
+    ui_container: '#right'
+  }));
+}
diff --git a/src/plugins/contextmenu/main/ts/core/Coords.ts b/src/plugins/contextmenu/main/ts/core/Coords.ts
@@ -8,8 +8,8 @@
  * Contributing: http://www.tinymce.com/contributing
  */
 
-import Env from 'tinymce/core/api/Env';
 import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
+import { getUiContainer } from 'tinymce/plugins/contextmenu/core/UiContainer';
 
 const nu = function (x, y) {
   return { x, y };
@@ -43,10 +43,6 @@ const transposeContentAreaContainer = function (element, pos) {
   return transpose(pos, containerPos.x, containerPos.y);
 };
 
-const getUiContainer = function (editor) {
-  return Env.container;
-};
-
 const getPos = function (editor, e) {
   if (editor.inline) {
     return transposeUiContainer(getUiContainer(editor), fromPageXY(e));

diff --git a/src/plugins/contextmenu/main/ts/core/UiContainer.ts b/src/plugins/contextmenu/main/ts/core/UiContainer.ts
@@ -0,0 +1,20 @@
+/**
+ * UiContainer.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2018 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
+import { Editor } from 'tinymce/core/api/Editor';
+
+const getUiContainer = (editor: Editor): HTMLElement => {
+  return DOMUtils.DOM.select(editor.settings.ui_container)[0];
+};
+
+export {
+  getUiContainer
+};
diff --git a/src/plugins/contextmenu/main/ts/ui/ContextMenu.ts b/src/plugins/contextmenu/main/ts/ui/ContextMenu.ts
@@ -11,6 +11,7 @@
 import Factory from 'tinymce/core/api/ui/Factory';
 import Tools from 'tinymce/core/api/util/Tools';
 import Settings from '../api/Settings';
+import { getUiContainer } from 'tinymce/plugins/contextmenu/core/UiContainer';
 
 const renderMenu = function (editor, visibleState) {
   let menu, contextmenu;
@@ -42,7 +43,10 @@ const renderMenu = function (editor, visibleState) {
     items,
     context: 'contextmenu',
     classes: 'contextmenu'
-  }).renderTo();
+  });
+
+  menu.uiContainer = getUiContainer(editor);
+  menu.renderTo(getUiContainer(editor));
 
   menu.on('hide', function (e) {
     if (e.control === this) {

diff --git a/src/themes/modern/main/ts/modes/Iframe.ts b/src/themes/modern/main/ts/modes/Iframe.ts
@@ -20,6 +20,7 @@ import Resize from '../ui/Resize';
 import Sidebar from '../ui/Sidebar';
 import SkinLoaded from '../ui/SkinLoaded';
 import Toolbar from '../ui/Toolbar';
+import UiContainer from 'tinymce/ui/UiContainer';
 
 const DOM = DOMUtils.DOM;
 
@@ -82,6 +83,8 @@ const render = function (editor, theme, args) {
     ]
   });
 
+  UiContainer.setUiContainer(editor, panel);
+
   if (Settings.getResize(editor) !== 'none') {
     resizeHandleCtrl = {
       type: 'resizehandle',

diff --git a/src/themes/modern/main/ts/modes/Inline.ts b/src/themes/modern/main/ts/modes/Inline.ts
@@ -8,7 +8,6 @@
  * Contributing: http://www.tinymce.com/contributing
  */
 
-import Env from 'tinymce/core/api/Env';
 import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
 import Factory from 'tinymce/core/api/ui/Factory';
 import Events from '../api/Events';
@@ -19,9 +18,10 @@ import Menubar from '../ui/Menubar';
 import SkinLoaded from '../ui/SkinLoaded';
 import Toolbar from '../ui/Toolbar';
 import FloatPanel from 'tinymce/ui/FloatPanel';
+import UiContainer from 'tinymce/ui/UiContainer';
 
-const isFixed = function (inlineToolbarContainer) {
-  return !!(inlineToolbarContainer && !Env.container);
+const isFixed = function (inlineToolbarContainer, editor) {
+  return !!(inlineToolbarContainer && !editor.settings.ui_container);
 };
 
 const render = function (editor, theme, args) {
@@ -88,15 +88,17 @@ const render = function (editor, theme, args) {
       direction: 'column',
       align: 'stretch',
       autohide: false,
-      autofix: isFixed(inlineToolbarContainer),
-      fixed: isFixed(inlineToolbarContainer),
+      autofix: isFixed(inlineToolbarContainer, editor),
+      fixed: isFixed(inlineToolbarContainer, editor),
       border: 1,
       items: [
         Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
         Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
       ]
     });
 
+    UiContainer.setUiContainer(editor, panel);
+
     // Add statusbar
     /*if (settings.statusbar !== false) {
       panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [