argous 1.2.131 → 1.2.135

package/lib/components/Editor/TinyMCE.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2017-present, Ephox, Inc.
+ *
+ * This source code is licensed under the Apache 2 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { TinyMCE as TinyMCEGlobal } from './tinymce/tinymce';
+
+const getGlobal = (): any => (typeof window !== 'undefined' ? window : global);
+
+const getTinymce = (): TinyMCEGlobal | null => {
+  const global = getGlobal();
+
+  return global && global.tinymce ? global.tinymce : null;
+};
+
+export { getTinymce };

package/lib/components/Editor/Utils.ts

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2017-present, Ephox, Inc.
+ *
+ * This source code is licensed under the Apache 2 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { IAllProps } from './components/Editor';
+import { eventPropTypes, IEventPropTypes } from './components/EditorPropTypes';
+import { Editor as TinyMCEEditor, EditorEvent } from './tinymce/tinymce';
+
+export const isFunction = (x: unknown): x is Function => typeof x === 'function';
+
+const isEventProp = (name: string): name is keyof IEventPropTypes => name in eventPropTypes;
+
+const eventAttrToEventName = <T extends string>(attrName: `on${T}`): T => attrName.substr(2) as T;
+
+type PropLookup = <K extends keyof IAllProps>(key: K) => IAllProps[K] | undefined;
+
+export const configHandlers2 = <H> (
+  handlerLookup: PropLookup,
+  on: (name: string, handler: H) => void,
+  off: (name: string, handler: H) => void,
+  adapter: <K extends keyof IEventPropTypes> (lookup: PropLookup, key: K) => H,
+  prevProps: Partial<IAllProps>,
+  props: Partial<IAllProps>,
+  boundHandlers: Record<string, H>
+): void => {
+  const prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+  const currEventKeys = Object.keys(props).filter(isEventProp);
+
+  const removedKeys = prevEventKeys.filter((key) => props[key] === undefined);
+  const addedKeys = currEventKeys.filter((key) => prevProps[key] === undefined);
+
+  removedKeys.forEach((key) => {
+    // remove event handler
+    const eventName = eventAttrToEventName(key);
+    const wrappedHandler = boundHandlers[eventName];
+    off(eventName, wrappedHandler);
+    delete boundHandlers[eventName];
+  });
+
+  addedKeys.forEach((key) => {
+    const wrappedHandler = adapter(handlerLookup, key);
+    const eventName = eventAttrToEventName(key);
+    boundHandlers[eventName] = wrappedHandler;
+    on(eventName, wrappedHandler);
+  });
+};
+
+export const configHandlers = (
+  editor: TinyMCEEditor,
+  prevProps: Partial<IAllProps>,
+  props: Partial<IAllProps>,
+  boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>,
+  lookup: PropLookup
+): void =>
+  configHandlers2(
+    lookup,
+    editor.on.bind(editor),
+    editor.off.bind(editor),
+    (handlerLookup, key) => (e) => handlerLookup(key)?.(e, editor),
+    prevProps,
+    props,
+    boundHandlers
+  );
+
+let unique = 0;
+
+export const uuid = (prefix: string): string => {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+
+  unique++;
+
+  return prefix + '_' + random + unique + String(time);
+};
+
+export const isTextareaOrInput = (element: Element | null): element is (HTMLTextAreaElement | HTMLInputElement) =>
+  element !== null && (element.tagName.toLowerCase() === 'textarea' || element.tagName.toLowerCase() === 'input');
+
+const normalizePluginArray = (plugins?: string | string[]): string[] => {
+  if (typeof plugins === 'undefined' || plugins === '') {
+    return [];
+  }
+
+  return Array.isArray(plugins) ? plugins : plugins.split(' ');
+};
+
+// eslint-disable-next-line max-len
+export const mergePlugins = (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined): string[] => normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
+
+export const isBeforeInputEventAvailable = () => window.InputEvent && typeof (InputEvent.prototype as any).getTargetRanges === 'function';
+

package/lib/components/Editor/components/Editor.tsx

@@ -0,0 +1,375 @@
+/**
+ * Copyright (c) 2017-present, Ephox, Inc.
+ *
+ * This source code is licensed under the Apache 2 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
+import { IEvents } from '../Events';
+import { ScriptLoader } from '../ScriptLoader';
+import { getTinymce } from '../TinyMCE';
+import { Bookmark, Editor as TinyMCEEditor, EditorEvent, RawEditorSettings } from '../tinymce/tinymce';
+import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable } from '../Utils';
+import { useTheme } from '@material-ui/core';
+import * as React from 'react';
+
+export interface IProps {
+  apiKey: string;
+  id: string;
+  inline: boolean;
+  initialValue: string;
+  onEditorChange: (a: string, editor: TinyMCEEditor) => void;
+  value: string;
+  init: RawEditorSettings & { selector?: undefined; target?: undefined };
+  /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
+  outputFormat: 'html' | 'text';
+  tagName: string;
+  cloudChannel: string;
+  plugins: NonNullable<RawEditorSettings['plugins']>;
+  toolbar: NonNullable<RawEditorSettings['toolbar']>;
+  disabled: boolean;
+  textareaName: string;
+  tinymceScriptSrc: string;
+  scriptLoading: {
+    async?: boolean;
+    defer?: boolean;
+    delay?: number;
+  };
+}
+
+export interface IAllProps extends Partial<IProps>, Partial<IEvents> { }
+
+const changeEvents = () => getTinymce()?.Env?.browser?.isIE() ? 'change keyup compositionend setcontent' : 'change input compositionend setcontent';
+const beforeInputEvent = () => isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
+
+export class Editor extends React.Component<IAllProps> {
+  public static propTypes: IEditorPropTypes = EditorPropTypes;
+
+  public static defaultProps: Partial<IAllProps> = {
+    cloudChannel: '5'
+  };
+
+  public editor?: TinyMCEEditor;
+
+  private id: string;
+  private elementRef: React.RefObject<HTMLElement>;
+  private inline: boolean;
+  private currentContent?: string;
+  private boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>;
+  private rollbackTimer: number | undefined = undefined;
+  private valueCursor: Bookmark | undefined = undefined;
+
+  public constructor(props: Partial<IAllProps>) {
+    super(props);
+    this.id = this.props.id || uuid('tiny-react');
+    this.elementRef = React.createRef<HTMLElement>();
+    this.inline = this.props.inline ?? this.props.init?.inline ?? false;
+    this.boundHandlers = {};
+  }
+
+  public componentDidUpdate(prevProps: Partial<IAllProps>) {
+    if (this.rollbackTimer) {
+      clearTimeout(this.rollbackTimer);
+      this.rollbackTimer = undefined;
+    }
+    if (this.editor) {
+      this.bindHandlers(prevProps);
+      if (this.editor.initialized) {
+        this.currentContent = this.currentContent ?? this.editor.getContent();
+        if (typeof this.props.initialValue === 'string' && this.props.initialValue !== prevProps.initialValue) {
+          // same as resetContent in TinyMCE 5
+          this.editor.setContent(this.props.initialValue);
+          this.editor.undoManager.clear();
+          this.editor.undoManager.add();
+          this.editor.setDirty(false);
+        } else if (typeof this.props.value === 'string' && this.props.value !== this.currentContent) {
+          const localEditor = this.editor;
+          localEditor.undoManager.transact(() => {
+            // inline editors grab focus when restoring selection
+            // so we don't try to keep their selection unless they are currently focused
+            let cursor: Bookmark | undefined;
+            if (!this.inline || localEditor.hasFocus()) {
+              try {
+                // getBookmark throws exceptions when the editor has not been focused
+                // possibly only in inline mode but I'm not taking chances
+                cursor = localEditor.selection.getBookmark(3);
+              } catch (e) { /* ignore */ }
+            }
+            const valueCursor = this.valueCursor;
+            localEditor.setContent(this.props.value as string);
+            if (!this.inline || localEditor.hasFocus()) {
+              for (const bookmark of [cursor, valueCursor]) {
+                if (bookmark) {
+                  try {
+                    localEditor.selection.moveToBookmark(bookmark);
+                    this.valueCursor = bookmark;
+                    break;
+                  } catch (e) { /* ignore */ }
+                }
+              }
+            }
+          });
+        }
+        if (this.props.disabled !== prevProps.disabled) {
+          const disabled = this.props.disabled ?? false;
+          this.editor.setMode(disabled ? 'readonly' : 'design');
+        }
+      }
+    }
+  }
+
+  public componentDidMount() {
+    if (getTinymce() !== null) {
+      this.initialise();
+    } else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
+      ScriptLoader.load(
+        this.elementRef.current.ownerDocument,
+        this.getScriptSrc(),
+        this.props.scriptLoading?.async ?? false,
+        this.props.scriptLoading?.defer ?? false,
+        this.props.scriptLoading?.delay ?? 0,
+        this.initialise
+      );
+    }
+  }
+
+  public componentWillUnmount() {
+    const editor = this.editor;
+    if (editor) {
+      editor.off(changeEvents(), this.handleEditorChange);
+      editor.off(beforeInputEvent(), this.handleBeforeInput);
+      editor.off('keypress', this.handleEditorChangeSpecial);
+      editor.off('keydown', this.handleBeforeInputSpecial);
+      editor.off('NewBlock', this.handleEditorChange);
+      Object.keys(this.boundHandlers).forEach((eventName) => {
+        editor.off(eventName, this.boundHandlers[eventName]);
+      });
+      this.boundHandlers = {};
+      editor.remove();
+      this.editor = undefined;
+    }
+  }
+
+  public render() {
+    return <>
+      <Tema>
+        {this.inline ? this.renderInline() : this.renderIframe()}
+      </Tema>
+    </>;
+  }
+
+  private renderInline() {
+    const { tagName = 'div' } = this.props;
+
+    return React.createElement(tagName, {
+      ref: this.elementRef,
+      id: this.id
+    });
+  }
+
+  private renderIframe() {
+    return React.createElement('textarea', {
+      ref: this.elementRef,
+      style: { visibility: 'hidden' },
+      name: this.props.textareaName,
+      id: this.id
+    });
+  }
+
+  private getScriptSrc() {
+    // if (typeof this.props.tinymceScriptSrc === 'string') {
+    //   return this.props.tinymceScriptSrc;
+    // } 
+    const channel = this.props.cloudChannel;
+    const apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+    
+    return `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
+  }
+
+  private getInitialValue() {
+    if (typeof this.props.initialValue === 'string') {
+      return this.props.initialValue;
+    } else if (typeof this.props.value === 'string') {
+      return this.props.value;
+    } 
+    return '';
+    
+  }
+
+  private bindHandlers(prevProps: Partial<IAllProps>) {
+    if (this.editor !== undefined) {
+      // typescript chokes trying to understand the type of the lookup function
+      configHandlers(this.editor as any, prevProps, this.props, this.boundHandlers, (key) => this.props[key] as any);
+      // check if we should monitor editor changes
+      const isValueControlled = (p: Partial<IAllProps>) => p.onEditorChange !== undefined || p.value !== undefined;
+      const wasControlled = isValueControlled(prevProps);
+      const nowControlled = isValueControlled(this.props);
+      if (!wasControlled && nowControlled) {
+        this.editor.on(changeEvents(), this.handleEditorChange);
+        this.editor.on(beforeInputEvent(), this.handleBeforeInput);
+        this.editor.on('keydown', this.handleBeforeInputSpecial);
+        this.editor.on('keyup', this.handleEditorChangeSpecial);
+        this.editor.on('NewBlock', this.handleEditorChange);
+      } else if (wasControlled && !nowControlled) {
+        this.editor.off(changeEvents(), this.handleEditorChange);
+        this.editor.off(beforeInputEvent(), this.handleBeforeInput);
+        this.editor.off('keydown', this.handleBeforeInputSpecial);
+        this.editor.off('keyup', this.handleEditorChangeSpecial);
+        this.editor.off('NewBlock', this.handleEditorChange);
+      }
+    }
+  }
+
+  private rollbackChange = () => {
+    const editor = this.editor;
+    const value = this.props.value;
+    if (editor && value && value !== this.currentContent) {
+      editor.undoManager.ignore(() => {
+        editor.setContent(value);
+        // only restore cursor on inline editors when they are focused
+        // as otherwise it will cause a focus grab
+        if (this.valueCursor && (!this.inline || editor.hasFocus())) {
+          try {
+            editor.selection.moveToBookmark(this.valueCursor);
+          } catch (e) { /* ignore */ }
+        }
+      });
+    }
+    this.rollbackTimer = undefined;
+  };
+
+  private handleBeforeInput = (_evt: EditorEvent<unknown>) => {
+    if (this.props.value !== undefined && this.props.value === this.currentContent && this.editor) {
+      if (!this.inline || this.editor.hasFocus) {
+        try {
+          // getBookmark throws exceptions when the editor has not been focused
+          // possibly only in inline mode but I'm not taking chances
+          this.valueCursor = this.editor.selection.getBookmark(3);
+        } catch (e) { /* ignore */ }
+      }
+    }
+  };
+
+  private handleBeforeInputSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+    if (evt.key === 'Enter' || evt.key === 'Backspace' || evt.key === 'Delete') {
+      this.handleBeforeInput(evt);
+    }
+  };
+
+  private handleEditorChange = (_evt: EditorEvent<unknown>) => {
+    const editor = this.editor;
+    if (editor && editor.initialized) {
+      const newContent = editor.getContent();
+      if (this.props.value !== undefined && this.props.value !== newContent) {
+        // start a timer and revert to the value if not applied in time
+        if (!this.rollbackTimer) {
+          this.rollbackTimer = window.setTimeout(this.rollbackChange, 200);
+        }
+      }
+
+      if (newContent !== this.currentContent) {
+        this.currentContent = newContent;
+        if (isFunction(this.props.onEditorChange)) {
+          const format = this.props.outputFormat;
+          const out = format === 'html' ? newContent : editor.getContent({ format });
+          this.props.onEditorChange(out, editor);
+        }
+      }
+    }
+  };
+
+  private handleEditorChangeSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+    if (evt.key === 'Backspace' || evt.key === 'Delete') {
+      this.handleEditorChange(evt);
+    }
+  };
+
+  private initialise = () => {
+    const target = this.elementRef.current;
+    if (!target) {
+      return; // Editor has been unmounted
+    }
+
+    const tinymce = getTinymce();
+    if (!tinymce) {
+      throw new Error('tinymce should have been loaded into global scope');
+    }
+
+    const finalInit: RawEditorSettings = {
+      ...this.props.init,
+      selector: undefined,
+      target,
+      readonly: this.props.disabled,
+      inline: this.inline,
+      plugins: mergePlugins(this.props.init && this.props.init.plugins, this.props.plugins),
+      toolbar: this.props.toolbar || (this.props.init && this.props.init.toolbar),
+      setup: (editor) => {
+        this.editor = editor;
+        this.bindHandlers({});
+
+        // When running in inline mode the editor gets the initial value
+        // from the innerHTML of the element it is initialized on.
+        // However we don't want to take on the responsibility of sanitizing
+        // to remove XSS in the react integration so we have a chicken and egg
+        // problem... We avoid it by sneaking in a set content before the first
+        // "official" setContent and using TinyMCE to do the sanitization.
+        if (this.inline && !isTextareaOrInput(target)) {
+          editor.once('PostRender', (_evt) => {
+            editor.setContent(this.getInitialValue(), { no_events: true });
+          });
+        }
+
+        if (this.props.init && isFunction(this.props.init.setup)) {
+          this.props.init.setup(editor);
+        }
+      },
+      init_instance_callback: (editor) => {
+        // check for changes that happened since tinymce.init() was called
+        const initialValue = this.getInitialValue();
+        this.currentContent = this.currentContent ?? editor.getContent();
+        if (this.currentContent !== initialValue) {
+          this.currentContent = initialValue;
+          // same as resetContent in TinyMCE 5
+          editor.setContent(initialValue);
+          editor.undoManager.clear();
+          editor.undoManager.add();
+          editor.setDirty(false);
+        }
+        const disabled = this.props.disabled ?? false;
+        editor.setMode(disabled ? 'readonly' : 'design');
+        // ensure existing init_instance_callback is called
+        if (this.props.init && isFunction(this.props.init.init_instance_callback)) {
+          this.props.init.init_instance_callback(editor);
+        }
+      }
+    };
+    if (!this.inline) {
+      target.style.visibility = '';
+    }
+    if (isTextareaOrInput(target)) {
+      target.value = this.getInitialValue();
+    }
+
+    tinymce.init(finalInit as any);
+  };
+}
+
+const Tema = ({ children }) => {
+
+  const theme = useTheme().palette.type;
+
+  return (
+    <div>
+      {theme === 'dark' ? <>
+        <link rel='stylesheet' href='./skins/ui/dark/skin.min.css' />
+        <link rel='stylesheet' href='./skins/ui/dark/content.min.css' />
+      </> : <>
+        <link rel='stylesheet' href='./skins/ui/default/content.min.css' />
+        <link rel='stylesheet' href='./skins/ui/default/skin.min.css' />
+      </>}
+      {children}
+    </div>
+  );
+};

package/lib/components/Editor/components/EditorPropTypes.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2017-present, Ephox, Inc.
+ *
+ * This source code is licensed under the Apache 2 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { IProps } from './Editor';
+import { IEvents } from '../Events';
+import * as PropTypes from 'prop-types';
+
+export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<P | unknown> };
+
+export type IEventPropTypes = CopyProps<IEvents>;
+
+export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps> {}
+
+export const eventPropTypes: IEventPropTypes = {
+  onActivate: PropTypes.func,
+  onAddUndo: PropTypes.func,
+  onBeforeAddUndo: PropTypes.func,
+  onBeforeExecCommand: PropTypes.func,
+  onBeforeGetContent: PropTypes.func,
+  onBeforeRenderUI: PropTypes.func,
+  onBeforeSetContent: PropTypes.func,
+  onBeforePaste: PropTypes.func,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClearUndos: PropTypes.func,
+  onClick: PropTypes.func,
+  onContextMenu: PropTypes.func,
+  onCopy: PropTypes.func,
+  onCut: PropTypes.func,
+  onDblclick: PropTypes.func,
+  onDeactivate: PropTypes.func,
+  onDirty: PropTypes.func,
+  onDrag: PropTypes.func,
+  onDragDrop: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  onDragGesture: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onDrop: PropTypes.func,
+  onExecCommand: PropTypes.func,
+  onFocus: PropTypes.func,
+  onFocusIn: PropTypes.func,
+  onFocusOut: PropTypes.func,
+  onGetContent: PropTypes.func,
+  onHide: PropTypes.func,
+  onInit: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onLoadContent: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onNodeChange: PropTypes.func,
+  onObjectResizeStart: PropTypes.func,
+  onObjectResized: PropTypes.func,
+  onObjectSelected: PropTypes.func,
+  onPaste: PropTypes.func,
+  onPostProcess: PropTypes.func,
+  onPostRender: PropTypes.func,
+  onPreProcess: PropTypes.func,
+  onProgressState: PropTypes.func,
+  onRedo: PropTypes.func,
+  onRemove: PropTypes.func,
+  onReset: PropTypes.func,
+  onSaveContent: PropTypes.func,
+  onSelectionChange: PropTypes.func,
+  onSetAttrib: PropTypes.func,
+  onSetContent: PropTypes.func,
+  onShow: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onUndo: PropTypes.func,
+  onVisualAid: PropTypes.func
+};
+
+export const EditorPropTypes: IEditorPropTypes = {
+  apiKey: PropTypes.string,
+  id: PropTypes.string,
+  inline: PropTypes.bool,
+  init: PropTypes.object,
+  initialValue: PropTypes.string,
+  onEditorChange: PropTypes.func,
+  outputFormat: PropTypes.oneOf(['html', 'text']),
+  value: PropTypes.string,
+  tagName: PropTypes.string,
+  cloudChannel: PropTypes.string,
+  plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  disabled: PropTypes.bool,
+  textareaName: PropTypes.string,
+  tinymceScriptSrc: PropTypes.string,
+  scriptLoading: PropTypes.shape({
+    async: PropTypes.bool,
+    defer: PropTypes.bool,
+    delay: PropTypes.number
+  }),
+  ...eventPropTypes
+};

package/lib/components/Editor/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2017-present, Ephox, Inc.
+ *
+ * This source code is licensed under the Apache 2 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Editor } from './components/Editor';
+
+export { Editor };

package/lib/components/Editor/skins/content/dark/content.css

@@ -0,0 +1,72 @@
+/**
+ * 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/
+ */
+body {
+  background-color: #2f3742;
+  color: #dfe0e4;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+a {
+  color: #4099ff;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #6d737b;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #8a8f97;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #6d737b;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #6d737b;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #6d737b;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #6d737b;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}

package/lib/components/Editor/skins/content/dark/content.min.css

@@ -0,0 +1,8 @@
+/**
+ * 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/
+ */
+body{background-color:#2f3742;color:#dfe0e4;font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}a{color:#4099ff}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#6d737b}figure{display:table;margin:1rem auto}figure figcaption{color:#8a8f97;display:block;margin-top:.25rem;text-align:center}hr{border-color:#6d737b;border-style:solid;border-width:1px 0 0 0}code{background-color:#6d737b;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #6d737b;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #6d737b;margin-right:1.5rem;padding-right:1rem}
+/*# sourceMappingURL=content.min.css.map */