From 4bbbb2a4cc87269335700b37befc680f9f183b08 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 27 Aug 2022 16:06:20 +0200 Subject: [PATCH] Migrate the block definition --- README.md | 10 ++- src/blocks.js | 46 ------------- src/index.js | 58 ----------------- src/index.ts | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 4 ++ 5 files changed, 189 insertions(+), 105 deletions(-) delete mode 100644 src/blocks.js delete mode 100644 src/index.js create mode 100644 src/index.ts create mode 100644 tsconfig.json diff --git a/README.md b/README.md index c021433..08386c0 100644 --- a/README.md +++ b/README.md @@ -18,11 +18,19 @@ Simple countdown component for GrapesJS Editor * Blocks: `countdown` - +* Added `id` +* Removed `blocks` and `labelCountdownCategory` options in favor of `block`. ## Options +| Option | Description | Default | +|-|-|- +| `id` | The ID used to create the block and 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: '' diff --git a/src/blocks.js b/src/blocks.js deleted file mode 100644 index a302ee1..0000000 --- a/src/blocks.js +++ /dev/null @@ -1,46 +0,0 @@ -import { - countdownRef -} from './consts'; - -export default function(editor, opt = {}) { - const c = opt; - const bm = editor.BlockManager; - const pfx = c.countdownClsPfx; - const style = c.defaultStyle ? `` : ''; - - if (c.blocks.indexOf(countdownRef) >= 0) { - bm.add(countdownRef, { - label: c.labelCountdown, - category: c.labelCountdownCategory, - attributes: {class:'fa fa-clock-o'}, - content: ` -
- ${style} - ` - }); - } -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 0712f5d..0000000 --- a/src/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import loadComponents from './components'; -import loadBlocks from './blocks'; -import { countdownRef } from './consts'; - -const plugin = (editor, opts = {}) => { - let c = opts; - - let defaults = { - blocks: [countdownRef], - - // Default style - defaultStyle: true, - - // Default start time, eg. '2018-01-25 00:00' - 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', - - // Countdown category label - labelCountdownCategory: 'Extra', - - // 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', - }; - - // Load defaults - for (let name in defaults) { - if (!(name in c)) - c[name] = defaults[name]; - } - - // Add components - loadComponents(editor, c); - - // Add components - loadBlocks(editor, c); -}; - -export default plugin; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..22f3963 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,176 @@ +import type grapesjs from 'grapesjs'; +import loadComponents from './components'; + +export type PluginOptions = { + /** + * The ID used to create the block and component + * @default 'countdown' + */ + id?: string; + + /** + * The label used for the block and the component. + * @default 'Countdown' + */ + label?: string, + + /** + * Object to extend the default block. Pass a falsy value to avoid adding the block. + * @example + * { label: 'Countdown', category: 'Extra', ... } + */ + block?: Partial; + + /** + * Object to extend the default tooltip block. Pass a falsy value to avoid adding the block. + * @example + * { label: 'Tooltip', category: 'Extra', ... } + */ + blockTooltip?: Partial; + + /** + * Object to extend the default tooltip properties. + * @example + * { name: 'Tooltip', droppable: false, ... } + */ + propsTooltip?: grapesjs.ComponentDefinition; + + /** + * A function which allows to extend default traits by receiving the original array and returning a new one. + */ + extendTraits?: (traits: TraitsOptions) => TraitsOptions, + + /** + * Tooltip attribute prefix. + * @default 'data-tooltip' + */ + attrTooltip?: string, + + /** + * Tooltip class prefix. + * @default 'tooltip-component' + */ + classTooltip?: string, + + /** + * Custom CSS styles for the tooltip component, this will replace the default one. + * @default 'tooltip-component' + */ + style?: string, + + /** + * Additional CSS styles for the tooltip component. + * @default 'tooltip-component' + */ + styleAdditional?: string, + + /** + * Make all tooltip relative classes private. + * @default true + */ + privateClasses?: boolean, + + /** + * Indicate if the tooltip can be styled. + * You can pass an array of which proprties can be styled. + * @example ['color', 'background-color'] + */ + stylableTooltip?: string[] | boolean, + + /** + * If true, force the tooltip to be shown when the default "Style tooltip" trait button is clicked. + * @default true + */ + showTooltipOnStyle?: boolean, +}; + +const plugin: grapesjs.Plugin = (editor, opts = {}) => { + const options: PluginOptions = { + id: 'countdown', + label: 'Countdown', + block: {}, + + // Default style + defaultStyle: true, + + // Default start time, eg. '2018-01-25 00:00' + 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', + ...opts, + }; + + const { block } = options; + const id = options.id!; + const label = options.label!; + + // Create block + if (block) { + editor.BlockManager.add(id, { + media: ` + + `, + label, + category: 'Extra', + select: true, + content: { type: id }, + ...block + }); + } + + /** +const pfx = c.countdownClsPfx; +`` + */ + + // Add components + loadComponents(editor, options); +}; + +export default plugin; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..277b963 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "./node_modules/grapesjs-cli/src/template/tsconfig.json", + "include": ["src"] +} \ No newline at end of file