init

public/tinymce/src/plugins/visualblocks/main/css/visualblocks.css

@@ -0,0 +1,154 @@
+.mce-visualblocks p {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h1 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h2 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h3 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h4 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h5 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks h6 {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks div:not([data-mce-bogus]) {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks section {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks article {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks blockquote {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks address {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks pre {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin-left: 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks figure {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks hgroup {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks aside {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks figcaption {
+  border: 1px dashed #BBB;
+}
+
+.mce-visualblocks ul {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks ol {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+  background-repeat: no-repeat;
+}
+
+.mce-visualblocks dl {
+  padding-top: 10px;
+  border: 1px dashed #BBB;
+  margin: 0 0 1em 3px;
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+  background-repeat: no-repeat;
+}

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
+};