fix inline init bug

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 1.0.2
+* Fixed bug where is wasn't possible to set inline in the init object, only on the shorthand.
+
 # 1.0.1
 * Fixed binding timing issues by moving the binding to after the editor has initialized. 
 

README.md

@@ -76,7 +76,7 @@ You can also use the `v-model` directive (more info in the [VueJS documentation]
 
 You bind editor events via a shorthand prop on the editor, for example:
 ```js
-<editor @onSelectionChang="handlerFunction"></editor>
+<editor @onSelectionChange="handlerFunction"></editor>
 ```
 Here is a full list of the events available:
 <details>

package.json

@@ -33,7 +33,6 @@
     "vue": "^2.5.13"
   },
   "devDependencies": {
-    "tslint-plugin-prettier": "^1.3.0",
     "@storybook/vue": "^3.3.11",
     "@types/node": "^9.4.0",
     "babel-register": "^6.26.0",
@@ -46,6 +45,8 @@
     "rollup-plugin-uglify": "^3.0.0",
     "ts-loader": "^3.4.0",
     "tslint": "^5.9.1",
+    "tslint-config-prettier": "^1.8.0",
+    "tslint-plugin-prettier": "^1.3.0",
     "typescript": "^2.7.1",
     "vue-loader": "^14.0.3",
     "vue-template-compiler": "^2.5.13",

src/ScriptLoader.ts

@@ -15,12 +15,7 @@ export interface IStateObj {
   scriptLoaded: boolean;
 }
 
-const injectScriptTag = (
-  scriptId: string,
-  doc: Document,
-  url: string,
-  callback: callbackFn
-) => {
+const injectScriptTag = (scriptId: string, doc: Document, url: string, callback: callbackFn) => {
   const scriptTag = doc.createElement('script');
   scriptTag.type = 'application/javascript';
   scriptTag.id = scriptId;
@@ -37,12 +32,7 @@ export const create = (): IStateObj => {
   };
 };
 
-export const load = (
-  state: IStateObj,
-  doc: Document,
-  url: string,
-  callback: callbackFn
-) => {
+export const load = (state: IStateObj, doc: Document, url: string, callback: callbackFn) => {
   if (state.scriptLoaded) {
     callback();
   } else {

src/Utils.ts

@@ -89,18 +89,11 @@ export const bindHandlers = (listeners: any, editor: any): void => {
 
 export const bindModelHandlers = (ctx: IEditor, editor: any) => {
   const modelEvents = ctx.$props.modelEvents ? ctx.$props.modelEvents : null;
-  const normalizedEvents = Array.isArray(modelEvents)
-    ? modelEvents.join(' ')
-    : modelEvents;
+  const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
   let currentContent: any;
 
   ctx.$watch('value', (val: string, prevVal: string) => {
-    if (
-      editor &&
-      typeof val === 'string' &&
-      val !== currentContent &&
-      val !== prevVal
-    ) {
+    if (editor && typeof val === 'string' && val !== currentContent && val !== prevVal) {
       editor.setContent(val);
     }
   });
@@ -138,9 +131,7 @@ export const uuid = (prefix: string): string => {
   return prefix + '_' + random + unique + String(time);
 };
 
-export const isTextarea = (
-  element: Element | null
-): element is HTMLTextAreaElement => {
+export const isTextarea = (element: Element | null): element is HTMLTextAreaElement => {
   return element !== null && element.tagName.toLowerCase() === 'textarea';
 };
 
@@ -152,8 +143,5 @@ const normalizePluginArray = (plugins?: string | string[]): string[] => {
   return Array.isArray(plugins) ? plugins : plugins.split(' ');
 };
 
-export const mergePlugins = (
-  initPlugins: string | string[],
-  inputPlugins?: string | string[]
-) =>
+export const mergePlugins = (initPlugins: string | string[], inputPlugins?: string | string[]) =>
   normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));

src/components/Editor.ts

@@ -21,6 +21,7 @@ declare module 'vue/types/vue' {
     elementId: string;
     element: Element | null;
     editor: any;
+    inlineEditor: boolean;
   }
 }
 
@@ -45,12 +46,9 @@ const initialise = (ctx: IEditor) => () => {
   const finalInit = {
     ...ctx.$props.init,
     selector: `#${ctx.elementId}`,
-    plugins: mergePlugins(
-      ctx.$props.init && ctx.$props.init.plugins,
-      ctx.$props.plugins
-    ),
+    plugins: mergePlugins(ctx.$props.init && ctx.$props.init.plugins, ctx.$props.plugins),
     toolbar: ctx.$props.toolbar || (ctx.$props.init && ctx.$props.init.toolbar),
-    inline: ctx.$props.inline,
+    inline: ctx.inlineEditor,
     setup: (editor: any) => {
       ctx.editor = editor;
       editor.on('init', () => initEditor(ctx, editor));
@@ -68,16 +66,11 @@ const initialise = (ctx: IEditor) => () => {
   getTinymce().init(finalInit);
 };
 
-export const Editor: ThisTypedComponentOptionsWithRecordProps<
-  Vue,
-  {},
-  {},
-  {},
-  IPropTypes
-> = {
+export const Editor: ThisTypedComponentOptionsWithRecordProps<Vue, {}, {}, {}, IPropTypes> = {
   props: editorProps,
   created() {
     this.elementId = this.$props.id || uuid('tiny-vue');
+    this.inlineEditor = (this.$props.init && this.$props.init.inline) || this.$props.inline;
   },
   mounted() {
     this.element = this.$el;
@@ -86,9 +79,7 @@ export const Editor: ThisTypedComponentOptionsWithRecordProps<
       initialise(this)();
     } else if (this.element) {
       const doc = this.element.ownerDocument;
-      const channel = this.$props.cloudChannel
-        ? this.$props.cloudChannel
-        : 'stable';
+      const channel = this.$props.cloudChannel ? this.$props.cloudChannel : 'stable';
       const apiKey = this.$props.apiKey ? this.$props.apiKey : '';
       const url = `https://cloud.tinymce.com/${channel}/tinymce.min.js?apiKey=${apiKey}`;
 
@@ -99,9 +90,6 @@ export const Editor: ThisTypedComponentOptionsWithRecordProps<
     getTinymce().remove(this.editor);
   },
   render(h: any) {
-    const { inline, tagName } = this.$props;
-    return inline
-      ? renderInline(h, this.elementId, tagName)
-      : renderIframe(h, this.elementId);
+    return this.inlineEditor ? renderInline(h, this.elementId, this.$props.tagName) : renderIframe(h, this.elementId);
   }
 };

src/components/EditorPropTypes.ts

@@ -31,11 +31,7 @@ export const editorProps: CopyProps<IPropTypes> = {
         return true;
       } else {
         // tslint:disable-next-line:no-console
-        console.error(
-          `VALIDATION ERROR! cloudChannel should be one of: ${validChannels.join(
-            ', '
-          )}`
-        );
+        console.error(`VALIDATION ERROR! cloudChannel should be one of: ${validChannels.join(', ')}`);
         return false;
       }
     }

stories/index.ts

@@ -5,6 +5,13 @@ import { Editor } from '../src/components/Editor';
 import { content } from './fakeContent';
 
 storiesOf('TestComponent', module)
+  .add('inline in init', () => ({
+    components: { Editor },
+    data: () => ({ content }),
+    template: `<div>
+    <editor :init="{inline: true}" v-model="content"></editor>
+  </div>`
+  }))
   .add('inline', () => ({
     components: { Editor },
     data: () => ({ content }),

tslint.json

@@ -1,7 +1,8 @@
 {
     "defaultSeverity": "error",
     "extends": [
-        "tslint:recommended"
+        "tslint:recommended",
+        "tslint-config-prettier"
     ],
     "jsRules": {
       "semicolon": true
@@ -12,7 +13,7 @@
       "quotemark": [true, "single"],
       "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
       "interface-name": false,
-      "prettier": [true, {"singleQuote": true, "arrowParens": "always"}]
+      "prettier": [true, { "singleQuote": true, "arrowParens": "always", "printWidth": 140 }]
     },
     "rulesDirectory": [
       "tslint-plugin-prettier"