@tinymce/tinymce-webcomponent 1.2.1-rc.20210919052935061.sha755c450

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Change log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Fixed
+- Updated dependencies to latest available versions.
+
+## [1.2.0] - 2021-03-11
+### Fixed
+- Updated dependencies to latest available versions.
+
+## [1.1.0] - 2021-01-07
+### Changed
+- Converted demo server app to TypeScript.
+- Updated dependencies.
+- Added eslint.
+- Adopted beehive-flow branching and versioning process/tooling.
+
+## [1.0.2] - 2020-09-22
+### Changed
+- Updated dependencies to latest available versions
+
+## [1.0.1] - 2020-08-31
+### Added
+- Added CDN demo.
+
+### Changed
+- Updated README.md
+
+## [1.0.0] - 2020-08-27
+### Added
+- Initial release of web component wrapper around TinyMCE.

package/LICENSE.txt

@@ -0,0 +1,13 @@
+Copyright 2020-present Tiny Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,19 @@
+
+# Official TinyMCE Web Component
+
+Web Components are a set of built-in browser capabilities that let developers create custom HTML elements in a similar manner to what is available in frameworks like React or Angular.
+
+Web Components comprise 3 basic capabilities:
+- Shadow DOM
+- Custom Elements
+- HTML Templating
+
+Shadow DOM provides the ability to create a "sandboxed" area of a web page, in a similar manner to iframes. An HTML element can have a "shadow root" attached to it, which is a tree of elements that are separate to the main document. Shadow roots are useful for having an area of the document that doesn't inherit styles from the main document. This is particularly handy for rich components like TinyMCE which have their own complex stylesheets and have to fit into any of our customer's web apps. 
+
+Custom Elements allow a developer to register a new tag/element that can be included in the HTML of the page. The custom element's behaviour is defined in JavaScript code and then registered for use in HTML.
+TinyMCE for Web Components provides the Custom Element, building on the experimental Shadow DOM support added in TinyMCE 5.4. 
+
+Once the TinyMCE custom element is installed on a web page, creating an editor instance is as simple as adding a `<tinymce-editor></tinymce-editor>` tag to the page. This tag is used in place of calling tinymce.init(). Many of the standard configuration properties can be specified as attributes to this tag, instead of using JavaScript code.
+
+TinyMCE for Web Components is available for free under an Apache 2.0 license, and can be installed via NPM. It is compatible with open source TinyMCE, Tiny Cloud, and TinyMCE commercial self-hosted offerings. 
+At this stage, TinyMCE for Web Components is an experimental integration - we would love to hear your [feedback](https://github.com/tinymce/tinymce-webcomponent/issues) on how it can be improved.

package/dist/tinymce-webcomponent.js

@@ -0,0 +1,465 @@
+(function () {
+    'use strict';
+
+    var Global = typeof window !== 'undefined' ? window : Function('return this;')();
+
+    var path = function (parts, scope) {
+      var o = scope !== undefined && scope !== null ? scope : Global;
+      for (var i = 0; i < parts.length && o !== undefined && o !== null; ++i) {
+        o = o[parts[i]];
+      }
+      return o;
+    };
+    var resolve = function (p, scope) {
+      var parts = p.split('.');
+      return path(parts, scope);
+    };
+
+    var identity = function (x) {
+      return x;
+    };
+
+    var hasOwnProperty = Object.hasOwnProperty;
+    var has = function (obj, key) {
+      return hasOwnProperty.call(obj, key);
+    };
+
+    var unique = 0;
+    var generate = function (prefix) {
+      var date = new Date();
+      var time = date.getTime();
+      var random = Math.floor(Math.random() * 1000000000);
+      unique++;
+      return prefix + '_' + random + unique + String(time);
+    };
+
+    const createState = () => ({
+      listeners: [],
+      scriptId: generate('tiny-script'),
+      scriptLoaded: false
+    });
+    const CreateScriptLoader = () => {
+      let state = createState();
+      const injectScriptTag = (scriptId, doc, url, callback) => {
+        const scriptTag = doc.createElement('script');
+        scriptTag.referrerPolicy = 'origin';
+        scriptTag.type = 'application/javascript';
+        scriptTag.id = scriptId;
+        scriptTag.src = url;
+        const handler = () => {
+          scriptTag.removeEventListener('load', handler);
+          callback();
+        };
+        scriptTag.addEventListener('load', handler);
+        if (doc.head) {
+          doc.head.appendChild(scriptTag);
+        }
+      };
+      const load = (doc, url, callback) => {
+        if (state.scriptLoaded) {
+          callback();
+        } else {
+          state.listeners.push(callback);
+          if (!doc.getElementById(state.scriptId)) {
+            injectScriptTag(state.scriptId, doc, url, () => {
+              state.listeners.forEach(fn => fn());
+              state.scriptLoaded = true;
+            });
+          }
+        }
+      };
+      const reinitialize = () => {
+        state = createState();
+      };
+      return {
+        load,
+        reinitialize
+      };
+    };
+    const ScriptLoader = CreateScriptLoader();
+
+    var Status;
+    (function (Status) {
+      Status[Status['Raw'] = 0] = 'Raw';
+      Status[Status['Initializing'] = 1] = 'Initializing';
+      Status[Status['Ready'] = 2] = 'Ready';
+    }(Status || (Status = {})));
+    const lookup = values => key => has(values, key) ? values[key] : key;
+    const parseGlobal = resolve;
+    const parseString = identity;
+    const parseFalseOrString = lookup({ 'false': false });
+    const parseBooleanOrString = lookup({
+      'true': true,
+      'false': false
+    });
+    const parseNumberOrString = value => /^\d+$/.test(value) ? Number.parseInt(value, 10) : value;
+    const configAttributes = {
+      setup: parseGlobal,
+      toolbar: parseFalseOrString,
+      menubar: parseFalseOrString,
+      plugins: parseString,
+      content_css: parseString,
+      content_style: parseString,
+      width: parseNumberOrString,
+      height: parseNumberOrString,
+      toolbar_mode: parseString,
+      contextmenu: parseFalseOrString,
+      quickbars_insert_toolbar: parseFalseOrString,
+      quickbars_selection_toolbar: parseFalseOrString,
+      powerpaste_word_import: parseString,
+      powerpaste_html_import: parseString,
+      powerpaste_allow_local_images: parseBooleanOrString,
+      resize: parseBooleanOrString,
+      skin: parseString,
+      skin_url: parseString,
+      images_upload_url: parseString,
+      images_upload_handler: parseGlobal,
+      images_upload_base_path: parseString,
+      images_upload_credentials: parseBooleanOrString,
+      images_reuse_filename: parseBooleanOrString,
+      icons: parseString,
+      icons_url: parseString
+    };
+    const configRenames = {};
+    class TinyMceEditor extends HTMLElement {
+      constructor() {
+        super();
+        this._eventAttrHandler = records => {
+          records.forEach(record => {
+            var _a;
+            if (record.type === 'attributes' && record.target === this && ((_a = record.attributeName) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith('on-'))) {
+              this._updateEventAttr(record.attributeName, this.getAttribute(record.attributeName));
+            }
+          });
+        };
+        this._formDataHandler = evt => {
+          const name = this.name;
+          if (name !== null) {
+            const data = evt.formData;
+            data.append(name, this.value);
+          }
+        };
+        this._status = Status.Raw;
+        this._shadowDom = this.attachShadow({ mode: 'open' });
+        this._form = null;
+        this._eventHandlers = {};
+        this._mutationObserver = new MutationObserver(this._eventAttrHandler);
+      }
+      static get formAssociated() {
+        return true;
+      }
+      static get observedAttributes() {
+        const nativeEvents = [
+          'on-BeforePaste',
+          'on-Blur',
+          'on-Click',
+          'on-ContextMenu',
+          'on-Copy',
+          'on-Cut',
+          'on-Dblclick',
+          'on-Drag',
+          'on-DragDrop',
+          'on-DragEnd',
+          'on-DragGesture',
+          'on-DragOver',
+          'on-Drop',
+          'on-Focus',
+          'on-FocusIn',
+          'on-FocusOut',
+          'on-KeyDown',
+          'on-KeyPress',
+          'on-KeyUp',
+          'on-MouseDown',
+          'on-MouseEnter',
+          'on-MouseLeave',
+          'on-MouseMove',
+          'on-MouseOut',
+          'on-MouseOver',
+          'on-MouseUp',
+          'on-Paste',
+          'on-SelectionChange'
+        ];
+        const tinyEvents = [
+          'on-Activate',
+          'on-AddUndo',
+          'on-BeforeAddUndo',
+          'on-BeforeExecCommand',
+          'on-BeforeGetContent',
+          'on-BeforeRenderUI',
+          'on-BeforeSetContent',
+          'on-Change',
+          'on-ClearUndos',
+          'on-Deactivate',
+          'on-Dirty',
+          'on-ExecCommand',
+          'on-GetContent',
+          'on-Hide',
+          'on-Init',
+          'on-LoadContent',
+          'on-NodeChange',
+          'on-PostProcess',
+          'on-PostRender',
+          'on-PreProcess',
+          'on-ProgressState',
+          'on-Redo',
+          'on-Remove',
+          'on-Reset',
+          'on-SaveContent',
+          'on-SetAttrib',
+          'on-ObjectResizeStart',
+          'on-ObjectResized',
+          'on-ObjectSelected',
+          'on-SetContent',
+          'on-Show',
+          'on-Submit',
+          'on-Undo',
+          'on-VisualAid'
+        ];
+        return [
+          'form',
+          'readonly',
+          'autofocus',
+          'placeholder'
+        ].concat(nativeEvents).concat(tinyEvents);
+      }
+      _updateEventAttr(attrKey, attrValue) {
+        const event = attrKey.substring('on-'.length).toLowerCase();
+        const handler = attrValue !== null ? resolve(attrValue) : undefined;
+        if (this._eventHandlers[event] !== handler) {
+          if (this._editor && this._eventHandlers[event]) {
+            this._editor.off(event, this._eventHandlers[event]);
+          }
+          if (handler) {
+            if (this._editor) {
+              this._editor.on(event, handler);
+            }
+            this._eventHandlers[event] = handler;
+          } else {
+            delete this._eventHandlers[event];
+          }
+        }
+      }
+      _updateForm() {
+        if (this.isConnected) {
+          const formId = this.getAttribute('form');
+          const form = formId !== null ? this.ownerDocument.querySelector('form#' + formId) : this.closest('form');
+          if (this._form !== form) {
+            if (this._form !== null) {
+              this._form.removeEventListener('formdata', this._formDataHandler);
+            }
+            this._form = form;
+            if (this._form !== null) {
+              this._form.addEventListener('formdata', this._formDataHandler);
+            }
+          }
+        } else {
+          if (this._form !== null) {
+            this._form.removeEventListener('formdata', this._formDataHandler);
+            this._form = null;
+          }
+        }
+      }
+      _getTinymce() {
+        return Global.tinymce;
+      }
+      _getConfig() {
+        var _a, _b;
+        const config = (_b = parseGlobal((_a = this.getAttribute('config')) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : {};
+        for (let i = 0; i < this.attributes.length; i++) {
+          const attr = this.attributes.item(i);
+          if (attr !== null) {
+            if (has(configAttributes, attr.name)) {
+              const prop = has(configRenames, attr.name) ? configRenames[attr.name] : attr.name;
+              config[prop] = configAttributes[attr.name](attr.value);
+            }
+          }
+        }
+        if (this.readonly) {
+          config.readonly = true;
+        }
+        if (this.autofocus) {
+          config.auto_focus = true;
+        }
+        delete config.target;
+        delete config.selector;
+        return config;
+      }
+      _getEventHandlers() {
+        const handlers = {};
+        for (let i = 0; i < this.attributes.length; i++) {
+          const attr = this.attributes.item(i);
+          if (attr !== null) {
+            if (attr.name.toLowerCase().startsWith('on-')) {
+              const event = attr.name.toLowerCase().substr('on-'.length);
+              const handler = resolve(attr.value);
+              handlers[event] = handler;
+            }
+          }
+        }
+        return handlers;
+      }
+      _doInit() {
+        var _a;
+        this._status = Status.Initializing;
+        const target = document.createElement('textarea');
+        target.value = (_a = this.textContent) !== null && _a !== void 0 ? _a : '';
+        if (this.placeholder !== null) {
+          target.placeholder = this.placeholder;
+        }
+        this._shadowDom.appendChild(target);
+        const baseConfig = this._getConfig();
+        const conf = Object.assign(Object.assign({}, baseConfig), {
+          target,
+          setup: editor => {
+            this._editor = editor;
+            editor.on('init', _e => {
+              this._status = Status.Ready;
+            });
+            editor.on('SwitchMode', _e => {
+              this.readonly = this.readonly;
+            });
+            Object.keys(this._eventHandlers).forEach(event => {
+              editor.on(event, this._eventHandlers[event]);
+            });
+            if (typeof baseConfig.setup === 'function') {
+              baseConfig.setup(editor);
+            }
+          }
+        });
+        this._getTinymce().init(conf);
+      }
+      _getTinymceSrc() {
+        var _a;
+        const src = this.getAttribute('src');
+        if (src) {
+          return src;
+        }
+        const channel = (_a = this.getAttribute('channel')) !== null && _a !== void 0 ? _a : '5-stable';
+        const apiKey = this.hasAttribute('api-key') ? this.getAttribute('api-key') : 'no-api-key';
+        return `https://cdn.tiny.cloud/1/${ apiKey }/tinymce/${ channel }/tinymce.min.js`;
+      }
+      _loadTinyDoInit() {
+        if (this._getTinymce()) {
+          this._doInit();
+        } else {
+          ScriptLoader.load(this.ownerDocument, this._getTinymceSrc(), () => this._doInit());
+        }
+      }
+      attributeChangedCallback(attribute, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          if (attribute === 'form') {
+            this._updateForm();
+          } else if (attribute === 'readonly') {
+            this.readonly = newValue !== null;
+          } else if (attribute === 'autofocus') {
+            this.autofocus = newValue !== null;
+          } else if (attribute === 'placeholder') {
+            this.placeholder = newValue;
+          } else if (attribute.toLowerCase().startsWith('on')) {
+            this._updateEventAttr(attribute, newValue);
+          }
+        }
+      }
+      connectedCallback() {
+        this._eventHandlers = this._getEventHandlers();
+        this._mutationObserver.observe(this, {
+          attributes: true,
+          childList: false,
+          subtree: false
+        });
+        this._updateForm();
+        if (this._status === Status.Raw) {
+          this._loadTinyDoInit();
+        }
+      }
+      disconnectedCallback() {
+        this._mutationObserver.disconnect();
+        this._updateForm();
+      }
+      get value() {
+        return this._status === Status.Ready ? this._editor.getContent() : undefined;
+      }
+      set value(newValue) {
+        if (this._status === Status.Ready) {
+          this._editor.setContent(newValue);
+        }
+      }
+      get readonly() {
+        if (this._editor) {
+          return this._editor.mode.get() === 'readonly';
+        } else {
+          return this.hasAttribute('readonly');
+        }
+      }
+      set readonly(value) {
+        if (value) {
+          if (this._editor && this._editor.mode.get() !== 'readonly') {
+            this._editor.mode.set('readonly');
+          }
+          if (!this.hasAttribute('readonly')) {
+            this.setAttribute('readonly', '');
+          }
+        } else {
+          if (this._editor && this._editor.mode.get() === 'readonly') {
+            this._editor.mode.set('design');
+          }
+          if (this.hasAttribute('readonly')) {
+            this.removeAttribute('readonly');
+          }
+        }
+      }
+      get placeholder() {
+        return this.getAttribute('placeholder');
+      }
+      set placeholder(value) {
+        if (this._editor) {
+          const target = this._editor.getElement();
+          if (target !== null) {
+            if (value !== null) {
+              target.setAttribute('placeholder', value);
+            } else {
+              target.removeAttribute('placeholder');
+            }
+          }
+        }
+        if (value !== null) {
+          if (this.getAttribute('placeholder') !== value) {
+            this.setAttribute('placeholder', value);
+          }
+        } else {
+          if (this.hasAttribute('placeholder')) {
+            this.removeAttribute('placeholder');
+          }
+        }
+      }
+      get autofocus() {
+        return this.hasAttribute('autofocus');
+      }
+      set autofocus(value) {
+        if (value) {
+          if (!this.hasAttribute('autofocus')) {
+            this.setAttribute('autofocus', '');
+          }
+        } else {
+          if (this.hasAttribute('autofocus')) {
+            this.removeAttribute('autofocus');
+          }
+        }
+      }
+      get form() {
+        return this._form;
+      }
+      get name() {
+        return this.getAttribute('name');
+      }
+      get type() {
+        return this.localName;
+      }
+    }
+    var Editor = () => {
+      window.customElements.define('tinymce-editor', TinyMceEditor);
+    };
+
+    Editor();
+
+}());

package/package.json

@@ -0,0 +1,49 @@
+{
+  "description": "Official TinyMCE Web Component",
+  "repository": {
+    "url": "https://github.com/tinymce/tinymce-webcomponent"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE.txt"
+  ],
+  "main": "dist/tinymce-webcomponent.js",
+  "scripts": {
+    "test": "bedrock-auto -b chrome-headless -d src/test/ts",
+    "build": "tsc -p ./tsconfig.json && rollup -c rollup.config.js",
+    "lint": "yarn eslint src/**/*.ts",
+    "serve": "yarn ts-node -r esm src/demo/ts/Server.ts"
+  },
+  "keywords": [
+    "TinyMCE",
+    "webcomponent"
+  ],
+  "author": "Tiny Technologies",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@ephox/agar": "^5.3.1",
+    "@ephox/bedrock-client": "^11.3.0",
+    "@ephox/bedrock-server": "^11.3.0",
+    "@ephox/katamari": "^7.2.1",
+    "@ephox/sugar": "^7.1.3",
+    "@ephox/swag": "^4.3.1",
+    "@tinymce/beehive-flow": "^0.15.0",
+    "@tinymce/eslint-plugin": "^1.8.2",
+    "@types/esm": "^3.2.0",
+    "@types/express": "^4.17.12",
+    "@types/node": "^15.12.2",
+    "eslint": "^7.28.0",
+    "esm": "^3.2.25",
+    "express": "^4.17.1",
+    "rollup": "^2.51.1",
+    "tinymce": "^5.7.1",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.0.0",
+    "typescript": "~4.2.4"
+  },
+  "dependencies": {},
+  "version": "1.2.1-rc.20210919052935061.sha755c450",
+  "name": "@tinymce/tinymce-webcomponent"
+}