argous 1.2.132 → 1.2.136

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 */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["content/dark/content.css"],"names":[],"mappings":";;;;;;AAMA,KACE,iBAAkB,QAClB,MAAO,QACP,YAAa,MAAM,CAAE,aAAa,CAAE,kBAAkB,CAAE,UAAU,CAAE,MAAM,CAAE,MAAM,CAAE,SAAS,CAAE,WAAW,CAAE,gBAAgB,CAAE,WAC9H,YAAa,IACb,OAAQ,KAEV,EACE,MAAO,QAET,MACE,gBAAiB,SAInB,4BADA,4BAEE,QAAS,MAKX,8DADA,8DAEE,aAAc,IAKhB,8DADA,8DAEE,aAAc,MAKhB,8DADA,8DAEE,aAAc,QAEhB,OACE,QAAS,MACT,OAAQ,KAAK,KAEf,kBACE,MAAO,QACP,QAAS,MACT,WAAY,OACZ,WAAY,OAEd,GACE,aAAc,QACd,aAAc,MACd,aAAc,IAAI,EAAE,EAAE,EAExB,KACE,iBAAkB,QAClB,cAAe,IACf,QAAS,MAAO,MAElB,4CACE,YAAa,IAAI,MAAM,QACvB,YAAa,OACb,aAAc,KAEhB,sCACE,aAAc,IAAI,MAAM,QACxB,aAAc,OACd,cAAe","file":"content.min.css","sourcesContent":["/**\n * Copyright (c) Tiny Technologies, Inc. All rights reserved.\n * Licensed under the LGPL or a commercial license.\n * For LGPL see License.txt in the project root for license information.\n * For commercial licenses see https://www.tiny.cloud/\n */\nbody {\n  background-color: #2f3742;\n  color: #dfe0e4;\n  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  line-height: 1.4;\n  margin: 1rem;\n}\na {\n  color: #4099ff;\n}\ntable {\n  border-collapse: collapse;\n}\n/* Apply a default padding if legacy cellpadding attribute is missing */\ntable:not([cellpadding]) th,\ntable:not([cellpadding]) td {\n  padding: 0.4rem;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-width\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-width\"]) td {\n  border-width: 1px;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-style\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-style\"]) td {\n  border-style: solid;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-color\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-color\"]) td {\n  border-color: #6d737b;\n}\nfigure {\n  display: table;\n  margin: 1rem auto;\n}\nfigure figcaption {\n  color: #8a8f97;\n  display: block;\n  margin-top: 0.25rem;\n  text-align: center;\n}\nhr {\n  border-color: #6d737b;\n  border-style: solid;\n  border-width: 1px 0 0 0;\n}\ncode {\n  background-color: #6d737b;\n  border-radius: 3px;\n  padding: 0.1rem 0.2rem;\n}\n.mce-content-body:not([dir=rtl]) blockquote {\n  border-left: 2px solid #6d737b;\n  margin-left: 1.5rem;\n  padding-left: 1rem;\n}\n.mce-content-body[dir=rtl] blockquote {\n  border-right: 2px solid #6d737b;\n  margin-right: 1.5rem;\n  padding-right: 1rem;\n}\n"]}

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

@@ -0,0 +1,67 @@
+/**
+ * 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 {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+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: #ccc;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #999;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #e8e8e8;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}

package/lib/components/Editor/skins/content/default/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{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}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:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
+/*# sourceMappingURL=content.min.css.map */

package/lib/components/Editor/skins/content/default/content.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["content/default/content.css"],"names":[],"mappings":";;;;;;AAMA,KACE,YAAa,aAAa,CAAE,kBAAkB,CAAE,UAAU,CAAE,MAAM,CAAE,MAAM,CAAE,MAAM,CAAE,SAAS,CAAE,WAAW,CAAE,gBAAgB,CAAE,WAC9H,YAAa,IACb,OAAQ,KAEV,MACE,gBAAiB,SAInB,4BADA,4BAEE,QAAS,MAKX,8DADA,8DAEE,aAAc,IAKhB,8DADA,8DAEE,aAAc,MAKhB,8DADA,8DAEE,aAAc,KAEhB,OACE,QAAS,MACT,OAAQ,KAAK,KAEf,kBACE,MAAO,KACP,QAAS,MACT,WAAY,OACZ,WAAY,OAEd,GACE,aAAc,KACd,aAAc,MACd,aAAc,IAAI,EAAE,EAAE,EAExB,KACE,iBAAkB,QAClB,cAAe,IACf,QAAS,MAAO,MAElB,4CACE,YAAa,IAAI,MAAM,KACvB,YAAa,OACb,aAAc,KAEhB,sCACE,aAAc,IAAI,MAAM,KACxB,aAAc,OACd,cAAe","file":"content.min.css","sourcesContent":["/**\n * Copyright (c) Tiny Technologies, Inc. All rights reserved.\n * Licensed under the LGPL or a commercial license.\n * For LGPL see License.txt in the project root for license information.\n * For commercial licenses see https://www.tiny.cloud/\n */\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  line-height: 1.4;\n  margin: 1rem;\n}\ntable {\n  border-collapse: collapse;\n}\n/* Apply a default padding if legacy cellpadding attribute is missing */\ntable:not([cellpadding]) th,\ntable:not([cellpadding]) td {\n  padding: 0.4rem;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-width\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-width\"]) td {\n  border-width: 1px;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-style\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-style\"]) td {\n  border-style: solid;\n}\n/* Set default table styles if a table has a positive border attribute\n   and no inline css */\ntable[border]:not([border=\"0\"]):not([style*=\"border-color\"]) th,\ntable[border]:not([border=\"0\"]):not([style*=\"border-color\"]) td {\n  border-color: #ccc;\n}\nfigure {\n  display: table;\n  margin: 1rem auto;\n}\nfigure figcaption {\n  color: #999;\n  display: block;\n  margin-top: 0.25rem;\n  text-align: center;\n}\nhr {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 1px 0 0 0;\n}\ncode {\n  background-color: #e8e8e8;\n  border-radius: 3px;\n  padding: 0.1rem 0.2rem;\n}\n.mce-content-body:not([dir=rtl]) blockquote {\n  border-left: 2px solid #ccc;\n  margin-left: 1.5rem;\n  padding-left: 1rem;\n}\n.mce-content-body[dir=rtl] blockquote {\n  border-right: 2px solid #ccc;\n  margin-right: 1.5rem;\n  padding-right: 1rem;\n}\n"]}