@optimuscms/editor - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

package.json

 {
   "name": "@optimuscms/editor",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": "Rich Moore",
   "license": "MIT",
   "main": "src/index.js",
+  "scripts": {
+    "sass": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
   "dependencies": {
     "@tinymce/tinymce-vue": "^1.1.0"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "laravel-mix": "^4.0.14",
+    "resolve-url-loader": "2.3.1",
+    "sass": "^1.17.2",
+    "sass-loader": "^7.1.0"
   }
 }

README.md

@@ -9,5 +9,7 @@ # Optimus Editor
 npm install @optimuscms/editor --save
+
 yarn add @optimuscms/editor
 ```
 
+#### Javascript
 ```javascript
@@ -21,2 +23,7 @@ import Editor from '@optimuscms/editor';
 
+#### SCSS
+```scss
+@import '~@optimuscms/editor/dist/styles.css';
+```
+
 ## Usage
@@ -34,9 +41,13 @@
 Vue.use(Editor, {
-    apiKey: 'your-api-key'
+    apiKey: 'your-api-key',
+    config: config
 });
 ```
 
+An optional parameter of `componentName` can be passed allowing you to set a custom component name for
+the editor, by default this is `editor`.
+
 ### Component
 
-The plugin registers an `<editor>` component.
+By default the plugin registers an `<editor>` component.
 
@@ -43,0 +54,0 @@ ```vue

src/config.js

@@ -1,100 +0,109 @@
-let config = {
-    branding: false,
-    menubar: false,
-    height: 500,
-    body_class: 'content p-4',
-    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'
+function config() {
+    return {
+        height: 500,
+        menubar: false,
+        branding: false,
+        convert_urls: false,
+        body_class: 'content p-4',
+        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: 'text-center',
+                selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+            },
+            
+            alignright: {
+                classes: 'text-right',
+                selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+            }
         },
-        aligncenter: {
-            classes: 'text-center',
-            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 button-primary',
+                        selector: 'a'
+                    }
+                ]
+            },
+            {
+                title: 'Image Styles',
+                items: [
+                    {
+                        title: 'Image left',
+                        classes: 'image-left',
+                        selector: 'img'
+                    },
+                    {
+                        title: 'Image right',
+                        classes: 'image-right',
+                        selector: 'img'
+                    },
+                    {
+                        title: 'Image centered',
+                        classes: 'image-center',
+                        selector: 'img'
+                    }
+                ]
+            }
+        ],
+
+        table_responsive_width: true,
+        table_appearance_options: false,
+        table_default_styles: {
+            width: '100%'
         },
-        alignright: {
-            classes: 'text-right',
-            selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,table,img'
+        table_default_attributes: {
+            border: 0
         }
-    },
-    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 button-primary',
-                    selector: 'a'
-                }
-            ]
-        },
-        {
-            title: 'Image Styles',
-            items: [
-                {
-                    title: 'Image left',
-                    classes: 'image-left',
-                    selector: 'img'
-                },
-                {
-                    title: 'Image right',
-                    classes: 'image-right',
-                    selector: 'img'
-                },
-                {
-                    title: 'Image centered',
-                    classes: 'image-center',
-                    selector: 'img'
-                }
-            ]
-        }
-    ],
-    table_responsive_width: true,
-    table_appearance_options: false,
-    table_default_styles: {
-        width: '100%'
-    },
-    table_default_attributes: {
-        border: 0
-    }
-};
+    };
+}
 
-export default config;
+export default config();

src/index.js

@@ -1,6 +0,11 @@
-import defaultConfig from './config';
+import config from './config';
 import Editor from './Editor';
 
-export default function install(Vue, { apiKey }) {
-    Vue.component('editor', Vue.extend({
+export default function install(Vue, options = {}) {
+    let defaultOptions = {
+        config: options.config || config,
+        componentName: options.componentName || 'editor'
+    };
+
+    Vue.component(defaultOptions.componentName, Vue.extend({
         extends: Editor,
@@ -10,3 +15,3 @@
             return {
-                apiKey: apiKey,
+                apiKey: options.apiKey,
             }
@@ -17,3 +22,6 @@ },
             init() {
-                return Object.assign({}, defaultConfig, this.config);
+                return {
+                    ...defaultOptions.config,
+                    ...this.config
+                };
             }
@@ -24,2 +32,2 @@ }
 
-export { defaultConfig as config };
+export { config };

No alert changes

Improved metrics

Total package byte prevSize

10121

increased by22.56%

Number of package files

11

increased by57.14%

Lines of code

133

increased by13.68%

Number of lines in readme file

64

increased by20.75%

Worsened metrics

Dev dependency count

5

increased byInfinity%

No dependency changes