@tinymce/tinymce-react - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

CHANGELOG.md

@@ -0,1 +1,4 @@
+## 2.1.3 (2018-01-17)
+* Added `plugins` and `toolbar` shorthands.
+
 ## 2.1.2 (2018-01-08)
@@ -2,0 +5,0 @@ * Use `target` on element instead of `selector` in init config.

lib/cjs/components/Editor.d.ts

@@ -13,2 +13,4 @@ /// <reference types="react" />
     cloudChannel: string;
+    plugins: string | string[];
+    toolbar: string | string[];
 }
@@ -15,0 +17,0 @@ export interface IAllProps extends Partial<IProps>, Partial<IEvents> {

lib/cjs/components/Editor.js

@@ -41,3 +41,3 @@ "use strict";
             var initialValue = typeof _this.props.initialValue === 'string' ? _this.props.initialValue : '';
-            var finalInit = __assign({}, _this.props.init, { target: _this.element, inline: _this.props.inline, setup: function (editor) {
+            var finalInit = __assign({}, _this.props.init, { target: _this.element, inline: _this.props.inline, plugins: Utils_1.mergePlugins(_this.props.init && _this.props.init.plugins, _this.props.plugins), toolbar: _this.props.toolbar || (_this.props.init && _this.props.init.toolbar), setup: function (editor) {
                     _this.editor = editor;
@@ -44,0 +44,0 @@ editor.on('init', function () { return editor.setContent(initialValue); });

lib/cjs/components/EditorPropTypes.js

@@ -19,2 +19,4 @@ "use strict";
     cloudChannel: PropTypes.oneOf(['stable', 'dev', 'testing']),
+    plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     onActivate: PropTypes.func,
@@ -21,0 +23,0 @@ onAddUndo: PropTypes.func,

lib/cjs/Utils.d.ts

 export declare const bindHandlers: (props: any, editor: any) => void;
 export declare const uuid: (prefix: string) => string;
 export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
+export declare const mergePlugins: (initPlugins: string | string[], inputPlugins?: string | string[] | undefined) => string[];

lib/cjs/Utils.js

@@ -33,1 +33,10 @@ "use strict";
 };
+var normalizePluginArray = function (plugins) {
+    if (typeof plugins === 'undefined' || plugins === '') {
+        return [];
+    }
+    return Array.isArray(plugins) ? plugins : plugins.split(' ');
+};
+exports.mergePlugins = function (initPlugins, inputPlugins) {
+    return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
+};

lib/es2015/components/Editor.d.ts

@@ -13,2 +13,4 @@ /// <reference types="react" />
     cloudChannel: string;
+    plugins: string | string[];
+    toolbar: string | string[];
 }
@@ -15,0 +17,0 @@ export interface IAllProps extends Partial<IProps>, Partial<IEvents> {

lib/es2015/components/Editor.js

@@ -29,3 +29,3 @@ /**
 import { getTinymce } from '../TinyMCE';
-import { bindHandlers, isTextarea, uuid } from '../Utils';
+import { bindHandlers, isTextarea, mergePlugins, uuid } from '../Utils';
 import { EditorPropTypes } from './EditorPropTypes';
@@ -40,3 +40,3 @@ var scriptState = ScriptLoader.create();
             var initialValue = typeof _this.props.initialValue === 'string' ? _this.props.initialValue : '';
-            var finalInit = __assign({}, _this.props.init, { target: _this.element, inline: _this.props.inline, setup: function (editor) {
+            var finalInit = __assign({}, _this.props.init, { target: _this.element, inline: _this.props.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: function (editor) {
                     _this.editor = editor;
@@ -43,0 +43,0 @@ editor.on('init', function () { return editor.setContent(initialValue); });

lib/es2015/components/EditorPropTypes.js

@@ -17,2 +17,4 @@ /**
     cloudChannel: PropTypes.oneOf(['stable', 'dev', 'testing']),
+    plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     onActivate: PropTypes.func,
@@ -19,0 +21,0 @@ onAddUndo: PropTypes.func,

lib/es2015/Utils.d.ts

 export declare const bindHandlers: (props: any, editor: any) => void;
 export declare const uuid: (prefix: string) => string;
 export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
+export declare const mergePlugins: (initPlugins: string | string[], inputPlugins?: string | string[] | undefined) => string[];

lib/es2015/Utils.js

@@ -31,1 +31,10 @@ /**
 };
+var normalizePluginArray = function (plugins) {
+    if (typeof plugins === 'undefined' || plugins === '') {
+        return [];
+    }
+    return Array.isArray(plugins) ? plugins : plugins.split(' ');
+};
+export var mergePlugins = function (initPlugins, inputPlugins) {
+    return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
+};

package.json

 {
   "name": "@tinymce/tinymce-react",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Official TinyMCE React Component",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -13,2 +13,119 @@ # Official TinyMCE React component
 ```
+
+## Usage
+
+### Importing the component
+
+First you have to import the component, and how you do this depends on how the app you are developing is set up. 
+
+```js
+// es modules
+import { Editor } from '@tinymce/tinymce-react';
+// commonjs require
+var { Editor } = require('@tinymce/tinymce-react');
+```
+
+### Using the component in your app
+
+Use the editor in your app like this:
+
+```js
+<Editor
+  apiKey="API_KEY"
+  init={{ plugins: 'link table' }}
+/>
+```
+
+### Configuring the editor
+
+The editor accepts the following props:
+* `id`: An id for the editor so you can later grab the instance by using the `tinymce.get('ID')` method on tinymce, defaults to an automatically generated uuid. 
+* `init`: Object sent to the `tinymce.init` method used to initialize the editor.
+* `initialValue`: Initial value that the editor will be initialized with.
+* `inline`: Shorthand for setting that the editor should be inline, `<Editor inline />` is the same as setting `{inline: true}` in the init.
+* `tagName`: Only used if the editor is inline, decides what element to initialize the editor on, defaults to `div`.
+* `plugins`: Shorthand for setting what plugins you want to use, `<Editor plugins="foo bar" />` is the same as setting `{plugins: 'foo bar'}` in the init.
+* `toolbar`: Shorthand for setting what toolbar items you want to show, `<Editor toolbar="foo bar" />` is the same as setting `{toolbar: 'foo bar'}` in the init.
+* `apiKey`: Api key for TinyMCE cloud, more info below.
+* `cloudChannel`: Cloud channel for TinyMCE Cloud, more info below.
+
+### Event binding
+
+You can bind editor events via a shorthand prop on the editor, for example:
+
+```js
+<Editor onSelectionChange="this.handlerFunction" />
+```
+
+Where the handler function will be called with the event and a reference to the editor.
+
+Here is a full list of the events available:
+<details>
+<summary>All available events</summary>
+
+* `onActivate`
+* `onAddUndo`
+* `onBeforeAddUndo`
+* `onBeforeExecCommand`
+* `onBeforeGetContent`
+* `onBeforeRenderUI`
+* `onBeforeSetContent`
+* `onBeforePaste`
+* `onBlur`
+* `onChange`
+* `onClearUndos`
+* `onClick`
+* `onContextMenu`
+* `onCopy`
+* `onCut`
+* `onDblclick`
+* `onDeactivate`
+* `onDirty`
+* `onDrag`
+* `onDragDrop`
+* `onDragEnd`
+* `onDragGesture`
+* `onDragOver`
+* `onDrop`
+* `onExecCommand`
+* `onFocus`
+* `onFocusIn`
+* `onFocusOut`
+* `onGetContent`
+* `onHide`
+* `onInit`
+* `onKeyDown`
+* `onKeyPress`
+* `onKeyUp`
+* `onLoadContent`
+* `onMouseDown`
+* `onMouseEnter`
+* `onMouseLeave`
+* `onMouseMove`
+* `onMouseOut`
+* `onMouseOver`
+* `onMouseUp`
+* `onNodeChange`
+* `onObjectResizeStart`
+* `onObjectResized`
+* `onObjectSelected`
+* `onPaste`
+* `onPostProcess`
+* `onPostRender`
+* `onPreInit`
+* `onPreProcess`
+* `onProgressState`
+* `onRedo`
+* `onRemove`
+* `onReset`
+* `onSaveContent`
+* `onSelectionChange`
+* `onSetAttrib`
+* `onSetContent`
+* `onShow`
+* `onSubmit`
+* `onUndo`
+* `onVisualAid`
+</details>
+
 ## Loading TinyMCE
@@ -15,0 +132,0 @@ ### Auto-loading from TinyMCE Cloud

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40016

increased by13.28%

Lines of code

872

increased by3.56%

Number of lines in readme file

158

increased by285.37%

No dependency changes