From 05f6cdee288f434343545e635a7346b92128ef13 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Thu, 10 Oct 2024 20:59:00 +0530 Subject: [PATCH] fix: caption as boolean or optional --- README.md | 24 ++++++++++++------------ src/index.css | 4 ++-- src/index.ts | 30 ++++++++++++++++++++++++------ src/types/types.ts | 20 ++++++++++++++------ src/ui.ts | 8 -------- 5 files changed, 52 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 84daa457..49d3a96e 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ Image Tool supports these configuration parameters: | buttonContent | `string` | Allows to override HTML content of «Select file» button | | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. | | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. | -| features | `object` | Allows you to enable/disable tunes along with caption. See details below. | +| features | `object` | Allows you to enable/disable additional features such as border, background tunes and caption. See details below. | Note that if you don't implement your custom uploader methods, the `endpoints` param is required. @@ -114,18 +114,18 @@ actions: [ ] ``` -Enable required tunes and caption by adding `features`-array in the configuration: +**_NOTE:_** return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead. + +Enable features such as border, background tunes and caption by adding `features`-array in the configuration: ```js features: { - background: true, - border: false, - caption: true, - stretched: true + background: boolean, + border: boolean, + caption: boolean | 'optional', + stretched: boolean } ``` -**_NOTE:_** return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead. - ## Output data This Tool returns `data` with following format @@ -134,8 +134,8 @@ This Tool returns `data` with following format | -------------- | --------- | ------------------------------- | | file | `object` | Uploaded file data. Any data got from backend uploader. Always contain the `url` property | | caption | `string` | image's caption | -| border | `boolean` | add border to image | -| background | `boolean` | need to add background | +| withBorder | `boolean` | add border to image | +| withBackground | `boolean` | need to add background | | stretched | `boolean` | stretch image to screen's width | @@ -147,8 +147,8 @@ This Tool returns `data` with following format "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg" }, "caption" : "Roadster // tesla.com", - "border" : false, - "background" : false, + "withBorder" : false, + "withBackground" : false, "stretched" : true, } } diff --git a/src/index.css b/src/index.css index 09ee5d8d..82331659 100644 --- a/src/index.css +++ b/src/index.css @@ -123,13 +123,13 @@ * ---------------- */ - &--border { + &--withBorder { ^&__image { border: 1px solid var(--border-color); } } - &--background { + &--withBackground { ^&__image { padding: 15px; background: var(--bg-color); diff --git a/src/index.ts b/src/index.ts index a99ec062..ea1e8c29 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,7 +35,7 @@ import './index.css'; import Ui from './ui'; import Uploader from './uploader'; -import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@codexteam/icons'; +import { IconAddBorder, IconStretch, IconAddBackground, IconPicture, IconText } from '@codexteam/icons'; import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam, FeaturesConfig } from './types/types'; type ImageToolConstructorOptions = BlockToolConstructorOptions; @@ -167,7 +167,7 @@ export default class ImageTool implements BlockTool { public static get tunes(): Array { return [ { - name: 'border', + name: 'withBorder', icon: IconAddBorder, title: 'With border', toggle: true, @@ -179,7 +179,7 @@ export default class ImageTool implements BlockTool { toggle: true, }, { - name: 'background', + name: 'withBackground', icon: IconAddBackground, title: 'With background', toggle: true, @@ -191,8 +191,8 @@ export default class ImageTool implements BlockTool { * Renders Block content */ public render(): HTMLDivElement { - if (this.config.features && this.config.features.caption) { - this.ui.toggleCaption(true); + if (this.config.features && this.config.features.caption === true) { + this.ui.applyTune('caption', true); } return this.ui.render(this.data) as HTMLDivElement; @@ -226,9 +226,27 @@ export default class ImageTool implements BlockTool { // Merge default tunes with the ones that might be added by user // @see https://github.com/editor-js/image/pull/49 const tunes = ImageTool.tunes.concat(this.config.actions || []); + const featureTuneMap: Record = { + border: 'withBorder', + background: 'withBackground', + stretched: 'stretched', + caption: 'caption', + }; + + if (this.config.features?.caption === 'optional') { + tunes.push({ + name: 'caption', + icon: IconText, + title: 'With caption', + toggle: true, + }); + } + const availableTunes = tunes.filter((tune) => { if (this.config.features) { - return this.config.features[tune.name as keyof FeaturesConfig]; + const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name); + + return this.config.features[featureKey as keyof FeaturesConfig]; } } ); diff --git a/src/types/types.ts b/src/types/types.ts index ed4b2d94..54b6aa4d 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -101,16 +101,24 @@ export type ImageToolData = { } & (Actions extends Record ? Actions : {}); /** - * @description Tunes that would be available on each image block. + * @description Enable or disable features. */ export type FeaturesConfig = { - /** Flag to enable/disable tune - background. */ + /** + * Flag to enable/disable tune - background. + */ background: boolean; - /** Flag to enable/disable tune - border */ + /** + * Flag to enable/disable tune - border. + */ border: boolean; - /** Flag to enable/disable caption */ - caption: boolean; - /** Flag to enable/disable tune - stretched */ + /** + * Flag to enable/disable caption. + */ + caption: boolean | 'optional'; + /** + * Flag to enable/disable tune - stretched + */ stretched: boolean; }; diff --git a/src/ui.ts b/src/ui.ts index 12888eaf..931bca72 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -254,14 +254,6 @@ export default class Ui { this.nodes.imageContainer.appendChild(this.nodes.imageEl); } - /** - * Toggles caption input visibility - * @param status - true for enable, false for disable - */ - public toggleCaption(status: boolean): void { - this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--caption`, status); - } - /** * Shows caption input * @param text - caption content text