Add TS plugin options

README.md

@@ -20,29 +20,27 @@ Simple countdown component for GrapesJS Editor
 
 * Added `id`
 * Removed `blocks` and `labelCountdownCategory` options in favor of `block`.
+* Removed `defaultStyle` options in favor of `style`.
+* Removed `labelCountdown` options in favor of `label`.
+* Removed `countdownClsPfx` options in favor of `classPrefix`.
 
 
 ## Options
 
 | Option | Description | Default |
 |-|-|-
 | `id` | The ID used to create the block and component. | `countdown` |
+| `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. | `{}` |
-
-
-
-* `blocks` Which blocks to add, default: `['countdown']` (all)
-* `defaultStyle` Add default style to blocks, default: true
-* `startTime` Default start time, eg. '2018-01-25 00:00', default: ''
-* `endText` Text to show when the countdown is ended, default: 'EXPIRED'
-* `dateInputType` Date input type, eg, 'date', 'datetime-local', default: 'date'
-* `countdownClsPfx` Countdown class prefix, default: 'countdown'
-* `labelCountdown` Countdown label, default 'Countdown'
-* `labelCountdownCategory` Countdown category label, default 'Extra'
-* `labelDays` Days label text used in component, default 'days'
-* `labelHours` Hours label text used in component, default 'hours'
-* `labelMinutes` Minutes label text used in component, default 'minutes'
-* `labelSeconds` Seconds label text used in component, default 'seconds'
+| `props` | Object to extend the default component properties., eg. `{ name: 'Countdown', droppable: false, ... }`. | `{}` |
+| `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'` |
+| `labelDays` | Days label text used in component. | `'days'` |
+| `labelHours` | Hours label text used in component. | `'hours'` |
+| `labelMinutes` | Minutes label text used in component. | `'minutes'` |
+| `labelSeconds` | Seconds label text used in component. | `'seconds'` |
+| `classPrefix` | Countdown component class prefix. | `'countdown'` |
 
 
 

src/index.ts

@@ -22,103 +22,90 @@ export type PluginOptions = {
   block?: Partial<grapesjs.BlockOptions>;
 
   /**
-   * Object to extend the default tooltip block. Pass a falsy value to avoid adding the block.
+   * Object to extend the default component properties.
    * @example
-   * { label: 'Tooltip', category: 'Extra', ... }
+   * { name: 'Countdown', droppable: false, ... }
    */
-  blockTooltip?: Partial<grapesjs.BlockOptions>;
+  props?: grapesjs.ComponentDefinition;
 
   /**
-   * Object to extend the default tooltip properties.
-   * @example
-   * { name: 'Tooltip', droppable: false, ... }
+   * Custom CSS styles for the component. This will replace the default one.
+   * @default ''
    */
-  propsTooltip?: grapesjs.ComponentDefinition;
+   style?: string,
 
   /**
-   * A function which allows to extend default traits by receiving the original array and returning a new one.
+   * Additional CSS styles for the component. These will be appended to the default one.
+   * @default 'tooltip-component'
    */
-  extendTraits?: (traits: TraitsOptions) => TraitsOptions,
+  styleAdditional?: string,
 
   /**
-   * Tooltip attribute prefix.
-   * @default 'data-tooltip'
+   * Default start time.
+   * @default ''
+   * @example '2018-01-25 00:00'
    */
-  attrTooltip?: string,
+  startTime?: string,
 
   /**
-   * Tooltip class prefix.
-   * @default 'tooltip-component'
+   * Text to show when the countdown is ended.
+   * @default 'EXPIRED'
    */
-  classTooltip?: string,
+  endText?: string,
 
   /**
-   * Custom CSS styles for the tooltip component, this will replace the default one.
-   * @default 'tooltip-component'
+   * Date input type, eg. `date`, `datetime-local`
+   * @default 'date'
    */
-  style?: string,
+  dateInputType?: string,
 
   /**
-   * Additional CSS styles for the tooltip component.
-   * @default 'tooltip-component'
+   * Days label text used in component.
+   * @default 'days'
    */
-  styleAdditional?: string,
+  labelDays?: string,
 
   /**
-   * Make all tooltip relative classes private.
-   * @default true
+   * Hours label text used in component.
+   * @default 'hours'
    */
-  privateClasses?: boolean,
+  labelHours?: string,
 
   /**
-   * Indicate if the tooltip can be styled.
-   * You can pass an array of which proprties can be styled.
-   * @example ['color', 'background-color']
+   * Minutes label text used in component.
+   * @default 'minutes'
    */
-  stylableTooltip?: string[] | boolean,
+  labelMinutes?: string,
 
   /**
-   * If true, force the tooltip to be shown when the default "Style tooltip" trait button is clicked.
-   * @default true
+   * Seconds label text used in component.
+   * @default 'seconds'
+   */
+  labelSeconds?: string,
+
+  /**
+   * Countdown component class prefix.
+   * @default 'countdown'
    */
-  showTooltipOnStyle?: boolean,
+  classPrefix?: string,
 };
 
 const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
   const options: PluginOptions = {
     id: 'countdown',
     label: 'Countdown',
     block: {},
-
-    // Default style
-    defaultStyle: true,
-
-    // Default start time, eg. '2018-01-25 00:00'
+    props: {},
+    style: '',
+    styleAdditional: '',
     startTime: '',
-
-    // Text to show when the countdown is ended
     endText: 'EXPIRED',
-
-    // Date input type, eg, 'date', 'datetime-local'
     dateInputType: 'date',
-
-    // Countdown class prefix
-    countdownClsPfx: 'countdown',
-
-    // Countdown label
-    labelCountdown: 'Countdown',
-
-    // Days label text used in component
     labelDays: 'days',
-
-    // Hours label text used in component
     labelHours: 'hours',
-
-    // Minutes label text used in component
     labelMinutes: 'minutes',
-
-    // Seconds label text used in component
     labelSeconds: 'seconds',
+    classPrefix: 'countdown',
     ...opts,
   };