@optimuscms/editor - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

src/config.js

+let config = {
+    branding: false,
+    menubar: false,
+    height: 500,
+    body_class: 'content p-3',
+    content_css: '/css/front/app.css',
+    plugins: 'hr image link lists paste table',
+    toolbar: `
+        undo redo | 
+        styleselect | 
+        bold italic underline | 
+        alignleft aligncenter alignright | 
+        bullist numlist hr blockquote | 
+        table link image | 
+        removeformat | 
+    `,
+    formats: {
+        alignleft: {
+            classes: '',
+            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+        },
+        aligncenter: {
+            classes: 'has-text-centered',
+            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+        },
+        alignright: {
+            classes: 'has-text-right',
+            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+        }
+    },
+    style_formats: [
+        {
+            title: 'Headings',
+            items: [
+                { title: 'Heading 1', block: 'h1' },
+                { title: 'Heading 2', block: 'h2' },
+                { title: 'Heading 3', block: 'h3' },
+                { title: 'Heading 4', block: 'h4' },
+                { title: 'Heading 5', block: 'h5' },
+                { title: 'Heading 6', block: 'h6' },
+                { title: 'Paragraph', block: 'p' }
+            ]
+        },
+        {
+            title: 'Heading Styles',
+            items: [
+                {
+                    title: 'Title',
+                    classes: 'title',
+                    selector: 'h1,h2,h3,h4,h5,h6'
+                },
+                {
+                    title: 'Subtitle',
+                    classes: 'subtitle',
+                    selector: 'h1,h2,h3,h4,h5,h6'
+                }
+            ]
+        },
+        {
+            title: 'Inline Styles',
+            items: [
+                {
+                    title: 'Button',
+                    classes: 'button is-primary',
+                    selector: 'a'
+                }
+            ]
+        },
+        {
+            title: 'Image Styles',
+            items: [
+                {
+                    title: 'Image left',
+                    classes: 'is-left',
+                    selector: 'img'
+                },
+                {
+                    title: 'Image right',
+                    classes: 'is-right',
+                    selector: 'img'
+                },
+                {
+                    title: 'Image centered',
+                    classes: 'is-centered',
+                    selector: 'img'
+                }
+            ]
+        }
+    ],
+    table_responsive_width: true,
+    table_appearance_options: false,
+    table_default_styles: {
+        width: '100%'
+    },
+    table_default_attributes: {
+        border: 0,
+        class: 'table is-bordered'
+    }
+};
+
+export default config;

src/Editor.vue

+<template>
+    <base-editor
+        :init="init"
+        v-model="content"
+        :api-key="apiKey"
+    ></base-editor>
+</template>
+
+<script>
+    import BaseEditor from '@tinymce/tinymce-vue';
+
+    export default {
+        components: { BaseEditor },
+        
+        props: {
+            config: {
+                type: Object,
+                default: () => {}
+            },
+
+            value: String
+        },
+
+        data() {
+            return {
+                content: this.value
+            }
+        },
+
+        watch: {
+            value(value) {
+                this.content = value;
+            },
+
+            content(value) {
+                this.$emit('input', value);
+            }
+        }
+    }
+</script>
+
+<style>
+    #mce-modal-block {
+        z-index: 110 !important;
+    }
+
+    .mce-window {
+        z-index: 111 !important;
+    }
+</style>

yarn-error.log

+Arguments: 
+  /usr/local/bin/node /Users/rich/.yarn/bin/yarn.js run watch
+
+PATH: 
+  ./vendor/bin:/Users/rich/.yarn/bin:/Users/rich/.config/yarn/global/node_modules/.bin:/Users/rich/bin:/usr/local/bin:/Users/rich/.composer/vendor/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version: 
+  1.5.1
+
+Node version: 
+  9.3.0
+
+Platform: 
+  darwin x64
+
+npm manifest: 
+  {
+    "name": "@optimuscms/editor",
+    "version": "2.1.0",
+    "author": "Rich Moore",
+    "license": "MIT",
+    "main": "src/index.js",
+    "dependencies": {
+      "@tinymce/tinymce-vue": "^1.0.8"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile
+
+Trace: 
+  Error: Command "watch" not found.
+      at new MessageError (/Users/rich/.yarn/lib/cli.js:186:110)
+      at /Users/rich/.yarn/lib/cli.js:87307:17
+      at Generator.next (<anonymous>)
+      at step (/Users/rich/.yarn/lib/cli.js:98:30)
+      at /Users/rich/.yarn/lib/cli.js:116:14
+      at new Promise (<anonymous>)
+      at new F (/Users/rich/.yarn/lib/cli.js:23451:28)
+      at /Users/rich/.yarn/lib/cli.js:95:12
+      at runCommand (/Users/rich/.yarn/lib/cli.js:87312:22)
+      at Object.<anonymous> (/Users/rich/.yarn/lib/cli.js:87412:14)

package.json

 {
   "name": "@optimuscms/editor",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "author": "Rich Moore",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -1,1 +0,52 @@
-# TODO
+# Optimus Editor
+
+The Optimus CMS WYSIWYG editor powered by TinyMCE.
+
+## Installation
+
+```bash
+npm install @optimuscms/editor --save
+yarn add @optimuscms/editor
+```
+
+```javascript
+import Editor from '@optimuscms/editor';
+
+Vue.use(Editor, {
+    apiKey: 'your-api-key'
+});
+```
+
+## Usage
+
+### Configuration
+
+The default configuration [options](src/config.js) can be modified using any of the TinyMCE options.
+
+```javascript
+import Editor, { config } from '@optimuscms/editor';
+
+config.branding = true;
+
+Vue.use(Editor, {
+    apiKey: 'your-api-key'
+});
+```
+
+### Component
+
+The plugin registers an `<editor>` component.
+
+```vue
+<editor v-model="content"></editor>
+```
+
+It's also possible to modifiy a specific component's configuration options via the `config` prop.
+
+```vue
+<editor v-model="content" :config="{ branding: true }"></editor>
+```
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

src/index.js

@@ -1,21 +0,11 @@
-import * as values from './values';
-import BaseEditor from '@tinymce/tinymce-vue';
+import defaultConfig from './config';
+import Editor from './Editor';
 
-export default function install(Vue, { store, options = {} }) {
-    Vue.component('editor', {
-        template: `<base-editor :api-key="apiKey" v-model="content" :init="init"></base-editor>`,
+export default function install(Vue, { apiKey }) {
+    Vue.component('editor', Vue.extend({
+        extends: Editor,
 
-        components: { BaseEditor },
-        
-        props: {
-            value: String,
-            height: Number,
-            toolbar: String,
-            plugins: String
-        },
-
         data() {
             return {
-                apiKey: options.apiKey,
-                content: this.value
+                apiKey: apiKey,
             }
@@ -26,76 +16,8 @@ },
             init() {
-                return {
-                    branding: false,
-                    menubar: options.menubar || false,
-                    height: this.height || options.height || 500,
-                    body_class: options.body_class || 'content p-3',
-                    content_css : options.content_css || '/css/front/app.css',
-                    style_formats: options.style_formats || values.styleFormats,
-                    plugins: this.plugins || options.plugins || 'hr image link lists paste table',
-
-                    toolbar: this.toolbar || options.toolbar || `
-                        undo redo | 
-                        styleselect | 
-                        bold italic underline | 
-                        alignleft aligncenter alignright | 
-                        bullist numlist hr blockquote | 
-                        table link image | 
-                        removeformat | 
-                    `,
-
-                    formats: {
-                        alignleft: {
-                            classes: '',
-                            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
-                        },
-                        aligncenter: {
-                            classes: 'has-text-centered',
-                            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
-                        },
-                        alignright: {
-                            classes: 'has-text-right',
-                            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
-                        }
-                    },
-
-                    table_responsive_width: true,
-                    table_appearance_options: false,
-                    table_default_styles: {
-                        width: '100%'
-                    },
-                    table_default_attributes: {
-                        border: 0,
-                        class: 'table is-bordered'
-                    },
-
-                    file_picker_types: 'image',
-                    file_picker_callback: (callback, value, meta) => {
-                        eventBus.$emit('media-manager-open', {
-                            limit: 1,
-                            accept: store.getters['media/imageExtensions']
-                        });
-
-                        eventBus.$on('media-selected', mediaIds => {
-                            callback(store.getters['media/getActiveMedia'](mediaIds)[0].url, {
-                                alt: store.getters['media/getActiveMedia'](mediaIds)[0].name
-                            });
-                        });
-                    }
-                }
+                return Object.assign({}, defaultConfig, this.config);
             }
-        },
-
-        watch: {
-            value(value) {
-                this.content = value;
-            },
-
-            content(value) {
-                this.$emit('input', value);
-            }
         }
-    });
-
+    }));
 }
 
-export * from './values';
+export { defaultConfig as config };

src/sass/_all.scss

-@charset "utf-8";
-
-@import "modal";

src/sass/modal.scss

-#mce-modal-block {
-    z-index: 110 !important;
-}
-
-.mce-window {
-    z-index: 111 !important;
-}

src/values.js

-let styleFormats = [
-    {
-        title: 'Headings',
-        items: [
-            { title: 'Heading 1', block: 'h1' },
-            { title: 'Heading 2', block: 'h2' },
-            { title: 'Heading 3', block: 'h3' },
-            { title: 'Heading 4', block: 'h4' },
-            { title: 'Heading 5', block: 'h5' },
-            { title: 'Heading 6', block: 'h6' },
-            { title: 'Paragraph', block: 'p' }
-        ]
-    },
-    {
-        title: 'Heading Styles',
-        items: [
-            {
-                title: 'Title',
-                classes: 'title',
-                selector: 'h1,h2,h3,h4,h5,h6'
-            },
-            {
-                title: 'Subtitle',
-                classes: 'subtitle',
-                selector: 'h1,h2,h3,h4,h5,h6'
-            }
-        ]
-    },
-    {
-        title: 'Inline Styles',
-        items: [
-            {
-                title: 'Button',
-                classes: 'button is-primary',
-                selector: 'a'
-            }
-        ]
-    },
-    {
-        title: 'Image Styles',
-        items: [
-            {
-                title: 'Image left',
-                classes: 'is-left',
-                selector: 'img'
-            },
-            {
-                title: 'Image right',
-                classes: 'is-right',
-                selector: 'img'
-            },
-            {
-                title: 'Image centered',
-                classes: 'is-centered',
-                selector: 'img'
-            }
-        ]
-    }
-];
-
-export { styleFormats };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7553

16.96%

Number of lines in readme file

53

2550%

Worsened metrics

Lines of code

118

-19.18%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes