Make use of style options

README.md

@@ -34,6 +34,8 @@ Simple countdown component for GrapesJS Editor
 | `label` | The label used for the block and the component. | `Countdown` |
 | `block` | Object to extend the default block, eg. `{ label: 'Countdown', category: 'Extra', ... }`. Pass a falsy value to avoid adding the block. | `{}` |
 | `props` | Object to extend the default component properties., eg. `{ name: 'Countdown', droppable: false, ... }`. | `{}` |
+| `style` | Custom CSS styles for the component. This will replace the default one. | `''` |
+| `styleAdditional` | Additional CSS styles for the component. These will be appended to the default one. | `''` |
 | `startTime` | Default start time, eg. `2030-01-25 00:00`. | `''` |
 | `endText` | Text to show when the countdown is ended. | `'EXPIRED'` |
 | `dateInputType` | Date input type, eg. `date`, `datetime-local` | `'date'` |

src/index.ts

@@ -35,7 +35,7 @@ export type PluginOptions = {
 
   /**
    * Additional CSS styles for the component. These will be appended to the default one.
-   * @default 'tooltip-component'
+   * @default ''
    */
   styleAdditional?: string,
 
@@ -114,7 +114,7 @@ const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
     ...opts,
   };
 
-  const { block, props } = options;
+  const { block, props, style } = options;
   const id = options.id!;
   const label = options.label!;
   const pfx = options.classPrefix!;
@@ -235,7 +235,7 @@ const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
           </span>
           <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
         `,
-        styles: `
+        styles: (style || `
           .${pfx} {
             text-align: center;
           }
@@ -257,7 +257,7 @@ const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
           .${pfx}-cont {
             display: inline-block;
           }
-        `,
+        `) + (options.styleAdditional),
         ...props,
       },
     },