init

public/tinymce/src/plugins/visualblocks/main/ts/Plugin.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+import { Cell } from '@ephox/katamari';
+import PluginManager from 'tinymce/core/api/PluginManager';
+import Commands from './api/Commands';
+import Bindings from './core/Bindings';
+import Buttons from './ui/Buttons';
+
+PluginManager.add('visualblocks', function (editor, pluginUrl) {
+  const enabledState = Cell(false);
+
+  Commands.register(editor, pluginUrl, enabledState);
+  Buttons.register(editor, enabledState);
+  Bindings.setup(editor, pluginUrl, enabledState);
+});
+
+export default function () { }

public/tinymce/src/plugins/visualblocks/main/ts/api/Commands.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+import VisualBlocks from '../core/VisualBlocks';
+
+const register = function (editor, pluginUrl, enabledState) {
+  editor.addCommand('mceVisualBlocks', function () {
+    VisualBlocks.toggleVisualBlocks(editor, pluginUrl, enabledState);
+  });
+};
+
+export default {
+  register
+};

public/tinymce/src/plugins/visualblocks/main/ts/api/Events.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+const fireVisualBlocks = function (editor, state) {
+  editor.fire('VisualBlocks', { state });
+};
+
+export default {
+  fireVisualBlocks
+};

public/tinymce/src/plugins/visualblocks/main/ts/api/Settings.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+const isEnabledByDefault = function (editor) {
+  return editor.getParam('visualblocks_default_state', false);
+};
+
+const getContentCss = function (editor) {
+  return editor.settings.visualblocks_content_css;
+};
+
+export default {
+  isEnabledByDefault,
+  getContentCss
+};

public/tinymce/src/plugins/visualblocks/main/ts/core/Bindings.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+import Settings from '../api/Settings';
+import VisualBlocks from './VisualBlocks';
+
+const setup = function (editor, pluginUrl, enabledState) {
+  // Prevents the visualblocks from being presented in the preview of formats when that is computed
+  editor.on('PreviewFormats AfterPreviewFormats', function (e) {
+    if (enabledState.get()) {
+      editor.dom.toggleClass(editor.getBody(), 'mce-visualblocks', e.type === 'afterpreviewformats');
+    }
+  });
+
+  editor.on('init', function () {
+    if (Settings.isEnabledByDefault(editor)) {
+      VisualBlocks.toggleVisualBlocks(editor, pluginUrl, enabledState);
+    }
+  });
+
+  editor.on('remove', function () {
+    editor.dom.removeClass(editor.getBody(), 'mce-visualblocks');
+  });
+};
+
+export default {
+  setup
+};

public/tinymce/src/plugins/visualblocks/main/ts/core/LoadCss.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
+import Tools from 'tinymce/core/api/util/Tools';
+
+const cssId = DOMUtils.DOM.uniqueId();
+
+const load = function (doc, url) {
+  const linkElements = Tools.toArray(doc.getElementsByTagName('link'));
+  const matchingLinkElms = Tools.grep(linkElements, function (head) {
+    return head.id === cssId;
+  });
+
+  if (matchingLinkElms.length === 0) {
+    const linkElm = DOMUtils.DOM.create('link', {
+      id: cssId,
+      rel: 'stylesheet',
+      href: url
+    });
+
+    doc.getElementsByTagName('head')[0].appendChild(linkElm);
+  }
+};
+
+export default {
+  load
+};

public/tinymce/src/plugins/visualblocks/main/ts/core/VisualBlocks.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+import Events from '../api/Events';
+import Settings from '../api/Settings';
+import LoadCss from './LoadCss';
+
+const toggleVisualBlocks = function (editor, pluginUrl, enabledState) {
+  const dom = editor.dom;
+  const contentCss = Settings.getContentCss(editor);
+
+  LoadCss.load(editor.getDoc(), contentCss ? contentCss : pluginUrl + '/css/visualblocks.css');
+  dom.toggleClass(editor.getBody(), 'mce-visualblocks');
+  enabledState.set(!enabledState.get());
+
+  Events.fireVisualBlocks(editor, enabledState.get());
+};
+
+export default {
+  toggleVisualBlocks
+};

public/tinymce/src/plugins/visualblocks/main/ts/ui/Buttons.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+const toggleActiveState = function (editor, enabledState) {
+  return function (e) {
+    const ctrl = e.control;
+
+    ctrl.active(enabledState.get());
+
+    editor.on('VisualBlocks', function (e) {
+      ctrl.active(e.state);
+    });
+  };
+};
+
+const register = function (editor, enabledState) {
+  editor.addButton('visualblocks', {
+    active: false,
+    title: 'Show blocks',
+    cmd: 'mceVisualBlocks',
+    onPostRender: toggleActiveState(editor, enabledState)
+  });
+
+  editor.addMenuItem('visualblocks', {
+    text: 'Show blocks',
+    cmd: 'mceVisualBlocks',
+    onPostRender: toggleActiveState(editor, enabledState),
+    selectable: true,
+    context: 'view',
+    prependToContext: true
+  });
+};
+
+export default {
+  register
+};