From cc0ee6a5116cc6ff5781dfa190d17e47c909cf3f Mon Sep 17 00:00:00 2001 From: Vineeth Date: Mon, 30 Sep 2024 17:39:23 +0530 Subject: [PATCH 1/7] Added support for selecting enabled tunes in ImageTool --- README.md | 8 ++++++-- dev/index.html | 35 +++++++++++++++++++++++++++++++++++ package.json | 2 +- src/index.css | 12 ++++++++++-- src/index.ts | 23 ++++++++++++++--------- src/types/types.ts | 15 +++++++++++++++ 6 files changed, 81 insertions(+), 14 deletions(-) create mode 100644 dev/index.html diff --git a/README.md b/README.md index a0d59f39..745caae2 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Image Block for the [Editor.js](https://editorjs.io). - Pasting copied content from the web - Pasting images by drag-n-drop - Pasting files and screenshots from Clipboard -- Allows adding a border, and a background +- Allows adding a border, a background and a caption - Allows stretching an image to the container's full-width **Notes** @@ -96,6 +96,8 @@ Note that if you don't implement your custom uploader methods, the `endpoints` p 3. Add background +4. Add caption + Add extra setting-buttons by adding them to the `actions`-array in the configuration: ```js actions: [ @@ -120,6 +122,7 @@ This Tool returns `data` with following format | Field | Type | Description | | -------------- | --------- | ------------------------------- | | file | `object` | Uploaded file data. Any data got from backend uploader. Always contain the `url` property | +| withCaption | `boolean` | need to enable caption | | caption | `string` | image's caption | | withBorder | `boolean` | add border to image | | withBackground | `boolean` | need to add background | @@ -136,7 +139,8 @@ This Tool returns `data` with following format "caption" : "Roadster // tesla.com", "withBorder" : false, "withBackground" : false, - "stretched" : true + "stretched" : true, + "withCaption" : true, } } ``` diff --git a/dev/index.html b/dev/index.html new file mode 100644 index 00000000..1bb33479 --- /dev/null +++ b/dev/index.html @@ -0,0 +1,35 @@ + + + + + + Image Plugin Test | EditorJS + + + +
+ + + + + diff --git a/package.json b/package.json index 7b27d495..0859da47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/image", - "version": "2.9.3", + "version": "2.10", "keywords": [ "codex editor", "image", diff --git a/src/index.css b/src/index.css index 2823c160..c22f67d4 100644 --- a/src/index.css +++ b/src/index.css @@ -44,6 +44,8 @@ } &__caption { + display: none; + &[contentEditable="true"][data-placeholder]::before { position: absolute !important; content: attr(data-placeholder); @@ -86,7 +88,7 @@ margin: 0 6px 0 0; } } - + &--filled { .cdx-button { display: none; @@ -147,13 +149,19 @@ } } + &--withCaption { + ^&__caption { + display: block; + } + } } @keyframes image-preloader-spin { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 7c7145aa..7cd33fee 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,6 @@ * 1) index.ts — main Tool's interface, public API and methods for working with data * 2) uploader.ts — module that has methods for sending files via AJAX: from device, by URL or File pasting * 3) ui.ts — module for UI manipulations: render, showing preloader, etc - * 4) tunes.js — working with Block Tunes: render buttons, handle clicks * * For debug purposes there is a testing server * that can save uploaded files and return a Response {@link UploadResponseFormat} @@ -37,7 +36,7 @@ import Ui from './ui'; import Uploader from './uploader'; import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@codexteam/icons'; -import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam } from './types/types'; +import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam, FeaturesConfig } from './types/types'; type ImageToolConstructorOptions = BlockToolConstructorOptions; @@ -50,11 +49,6 @@ export default class ImageTool implements BlockTool { */ private api: API; - /** - * Flag indicating read-only mode - */ - private readOnly: boolean; - /** * Current Block API instance */ @@ -90,7 +84,6 @@ export default class ImageTool implements BlockTool { */ constructor({ data, config, api, readOnly, block }: ImageToolConstructorOptions) { this.api = api; - this.readOnly = readOnly; this.block = block; /** @@ -106,6 +99,7 @@ export default class ImageTool implements BlockTool { buttonContent: config.buttonContent, uploader: config.uploader, actions: config.actions, + features: config.features, }; /** @@ -141,6 +135,7 @@ export default class ImageTool implements BlockTool { withBorder: false, withBackground: false, stretched: false, + withCaption: false, file: { url: '', }, @@ -190,6 +185,12 @@ export default class ImageTool implements BlockTool { title: 'With background', toggle: true, }, + { + name: 'withCaption', + icon: IconAddBackground, + title: 'With caption', + toggle: true, + }, ]; } @@ -228,8 +229,12 @@ 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 enabledTunes = this.config.features || []; + const availableTunes = tunes.filter(tune => + enabledTunes.length === 0 || enabledTunes.includes(tune.name as FeaturesConfig) + ); - return tunes.map(tune => ({ + return availableTunes.map(tune => ({ icon: tune.icon, label: this.api.i18n.t(tune.title), name: tune.name, diff --git a/src/types/types.ts b/src/types/types.ts index 6b4da7e7..c0a7654a 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -88,6 +88,11 @@ export type ImageToolData = { */ stretched: boolean; + /** + * Flag indicating whether the image has caption + */ + withCaption: boolean; + /** * Object containing the URL of the image file. * Also can contain any additional data. @@ -100,6 +105,11 @@ export type ImageToolData = { } & AdditionalFileData; } & (Actions extends Record ? Actions : {}); +/** + * @description Tunes that would be available on each image block. + */ +export type FeaturesConfig = 'withCaption' | 'withBorder' | 'withBackground' | 'stretched'; + /** * * @description Config supported by Tool @@ -171,6 +181,11 @@ export interface ImageConfig { * Additional actions for the tool. */ actions?: ActionConfig[]; + + /** + * Tunes to be enabled. + */ + features?: FeaturesConfig[]; } /** From ad233c70c68c531a04a223b102e5f38effe1bd61 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Thu, 3 Oct 2024 17:26:39 +0530 Subject: [PATCH 2/7] fix: removed caption as from tunes --- README.md | 21 +++++++++++++++------ dev/index.html | 12 ++++++------ src/index.css | 6 +++--- src/index.ts | 23 +++++++++++------------ src/types/types.ts | 18 +++++++++++------- src/ui.ts | 8 ++++++++ 6 files changed, 54 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 745caae2..84daa457 100644 --- a/README.md +++ b/README.md @@ -83,6 +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. | Note that if you don't implement your custom uploader methods, the `endpoints` param is required. @@ -113,6 +114,16 @@ actions: [ ] ``` +Enable required tunes and caption by adding `features`-array in the configuration: +```js +features: { + background: true, + border: false, + caption: true, + stretched: true +} +``` + **_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 @@ -122,10 +133,9 @@ This Tool returns `data` with following format | Field | Type | Description | | -------------- | --------- | ------------------------------- | | file | `object` | Uploaded file data. Any data got from backend uploader. Always contain the `url` property | -| withCaption | `boolean` | need to enable caption | | caption | `string` | image's caption | -| withBorder | `boolean` | add border to image | -| withBackground | `boolean` | need to add background | +| border | `boolean` | add border to image | +| background | `boolean` | need to add background | | stretched | `boolean` | stretch image to screen's width | @@ -137,10 +147,9 @@ 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", - "withBorder" : false, - "withBackground" : false, + "border" : false, + "background" : false, "stretched" : true, - "withCaption" : true, } } ``` diff --git a/dev/index.html b/dev/index.html index 1bb33479..33a181e8 100644 --- a/dev/index.html +++ b/dev/index.html @@ -4,10 +4,6 @@ Image Plugin Test | EditorJS -
@@ -24,8 +20,12 @@ byFile: "http://localhost:8008/uploadFile", byUrl: "http://localhost:8008/fetchUrl", }, - //features: ["withCaption", "withBorder", "stretched", "withBackground"], - features: ["withCaption", "withBorder"], + features: { + background: true, + border: true, + caption: true, + stretched: true, + }, }, }, }, diff --git a/src/index.css b/src/index.css index c22f67d4..09ee5d8d 100644 --- a/src/index.css +++ b/src/index.css @@ -123,13 +123,13 @@ * ---------------- */ - &--withBorder { + &--border { ^&__image { border: 1px solid var(--border-color); } } - &--withBackground { + &--background { ^&__image { padding: 15px; background: var(--bg-color); @@ -149,7 +149,7 @@ } } - &--withCaption { + &--caption { ^&__caption { display: block; } diff --git a/src/index.ts b/src/index.ts index 7cd33fee..a99ec062 100644 --- a/src/index.ts +++ b/src/index.ts @@ -135,7 +135,6 @@ export default class ImageTool implements BlockTool { withBorder: false, withBackground: false, stretched: false, - withCaption: false, file: { url: '', }, @@ -168,7 +167,7 @@ export default class ImageTool implements BlockTool { public static get tunes(): Array { return [ { - name: 'withBorder', + name: 'border', icon: IconAddBorder, title: 'With border', toggle: true, @@ -180,17 +179,11 @@ export default class ImageTool implements BlockTool { toggle: true, }, { - name: 'withBackground', + name: 'background', icon: IconAddBackground, title: 'With background', toggle: true, }, - { - name: 'withCaption', - icon: IconAddBackground, - title: 'With caption', - toggle: true, - }, ]; } @@ -198,6 +191,10 @@ export default class ImageTool implements BlockTool { * Renders Block content */ public render(): HTMLDivElement { + if (this.config.features && this.config.features.caption) { + this.ui.toggleCaption(true); + } + return this.ui.render(this.data) as HTMLDivElement; } @@ -229,9 +226,11 @@ 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 enabledTunes = this.config.features || []; - const availableTunes = tunes.filter(tune => - enabledTunes.length === 0 || enabledTunes.includes(tune.name as FeaturesConfig) + const availableTunes = tunes.filter((tune) => { + if (this.config.features) { + return this.config.features[tune.name as keyof FeaturesConfig]; + } + } ); return availableTunes.map(tune => ({ diff --git a/src/types/types.ts b/src/types/types.ts index c0a7654a..ed4b2d94 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -88,11 +88,6 @@ export type ImageToolData = { */ stretched: boolean; - /** - * Flag indicating whether the image has caption - */ - withCaption: boolean; - /** * Object containing the URL of the image file. * Also can contain any additional data. @@ -108,7 +103,16 @@ export type ImageToolData = { /** * @description Tunes that would be available on each image block. */ -export type FeaturesConfig = 'withCaption' | 'withBorder' | 'withBackground' | 'stretched'; +export type FeaturesConfig = { + /** Flag to enable/disable tune - background. */ + background: boolean; + /** Flag to enable/disable tune - border */ + border: boolean; + /** Flag to enable/disable caption */ + caption: boolean; + /** Flag to enable/disable tune - stretched */ + stretched: boolean; +}; /** * @@ -185,7 +189,7 @@ export interface ImageConfig { /** * Tunes to be enabled. */ - features?: FeaturesConfig[]; + features?: FeaturesConfig; } /** diff --git a/src/ui.ts b/src/ui.ts index 931bca72..12888eaf 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -254,6 +254,14 @@ 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 From 05f6cdee288f434343545e635a7346b92128ef13 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Thu, 10 Oct 2024 20:59:00 +0530 Subject: [PATCH 3/7] 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 From bd0b1fd62b90b0e2aa12c3254f1ec8d81c137419 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Fri, 18 Oct 2024 22:12:52 +0530 Subject: [PATCH 4/7] fix : address feedback from PR --- README.md | 4 +++- src/index.ts | 29 ++++++++++++++++++----------- src/types/types.ts | 3 ++- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 49d3a96e..a0a97ba7 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,7 @@ actions: [ **_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: +You can enable/disable features such as border, background tunes and caption by adding `features` array in the configuration: ```js features: { background: boolean, @@ -126,6 +126,8 @@ features: { } ``` +**_NOTE:_** set caption to `optional` in order to configure caption as a tune. + ## Output data This Tool returns `data` with following format diff --git a/src/index.ts b/src/index.ts index ea1e8c29..c8302a9d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -191,7 +191,7 @@ export default class ImageTool implements BlockTool { * Renders Block content */ public render(): HTMLDivElement { - if (this.config.features && this.config.features.caption === true) { + if (this.config.features?.caption === true || (this.config.features?.caption === 'optional' && this.data.caption)) { this.ui.applyTune('caption', true); } @@ -226,12 +226,12 @@ 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', - }; + const featureTuneMap = new Map([ + ['border', 'withBorder'], + ['background', 'withBackground'], + ['stretched', 'stretched'], + ['caption', 'caption'], + ]); if (this.config.features?.caption === 'optional') { tunes.push({ @@ -244,12 +244,19 @@ export default class ImageTool implements BlockTool { const availableTunes = tunes.filter((tune) => { if (this.config.features) { - const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name); + const featureKey = [...featureTuneMap.entries()].find( + ([, value]) => value === tune.name + )?.[0]; + + if (featureKey != null) { + return this.config.features[featureKey as keyof FeaturesConfig]; + } - return this.config.features[featureKey as keyof FeaturesConfig]; + return false; } - } - ); + + return false; + }); return availableTunes.map(tune => ({ icon: tune.icon, diff --git a/src/types/types.ts b/src/types/types.ts index 54b6aa4d..1008fcb8 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -101,7 +101,7 @@ export type ImageToolData = { } & (Actions extends Record ? Actions : {}); /** - * @description Enable or disable features. + * @description Allows to enable or disable features. */ export type FeaturesConfig = { /** @@ -114,6 +114,7 @@ export type FeaturesConfig = { border: boolean; /** * Flag to enable/disable caption. + * Can be set to 'optional' to allow users to toggle via block tunes. */ caption: boolean | 'optional'; /** From b5b4e5cc5beb371fcc9dea08788e24896dfe21b5 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Sun, 27 Oct 2024 17:30:57 +0530 Subject: [PATCH 5/7] fix : only disable required feature from config --- README.md | 9 ++++----- dev/index.html | 6 +++--- package.json | 2 +- src/index.ts | 30 ++++++++++++------------------ src/types/types.ts | 8 ++++---- 5 files changed, 24 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index a0a97ba7..5168de58 100644 --- a/README.md +++ b/README.md @@ -116,13 +116,12 @@ actions: [ **_NOTE:_** return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead. -You can enable/disable features such as border, background tunes and caption by adding `features` array in the configuration: +You can disable features such as border, background tunes and caption by defining `features` in the configuration: ```js features: { - background: boolean, - border: boolean, - caption: boolean | 'optional', - stretched: boolean + border: false, + caption: 'optional', + stretched: false } ``` diff --git a/dev/index.html b/dev/index.html index 33a181e8..99eb89dc 100644 --- a/dev/index.html +++ b/dev/index.html @@ -21,9 +21,9 @@ byUrl: "http://localhost:8008/fetchUrl", }, features: { - background: true, - border: true, - caption: true, + caption: "optional", + border: false, + background: false, stretched: true, }, }, diff --git a/package.json b/package.json index 0859da47..5f75a71d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/image", - "version": "2.10", + "version": "2.10.0", "keywords": [ "codex editor", "image", diff --git a/src/index.ts b/src/index.ts index c8302a9d..0722afe9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -99,7 +99,7 @@ export default class ImageTool implements BlockTool { buttonContent: config.buttonContent, uploader: config.uploader, actions: config.actions, - features: config.features, + features: config.features || {}, }; /** @@ -191,7 +191,7 @@ export default class ImageTool implements BlockTool { * Renders Block content */ public render(): HTMLDivElement { - if (this.config.features?.caption === true || (this.config.features?.caption === 'optional' && this.data.caption)) { + if (this.config.features?.caption === true || this.config.features?.caption === undefined || (this.config.features?.caption === 'optional' && this.data.caption)) { this.ui.applyTune('caption', true); } @@ -226,12 +226,12 @@ 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 = new Map([ - ['border', 'withBorder'], - ['background', 'withBackground'], - ['stretched', 'stretched'], - ['caption', 'caption'], - ]); + const featureTuneMap: Record = { + border: 'withBorder', + background: 'withBackground', + stretched: 'stretched', + caption: 'caption', + }; if (this.config.features?.caption === 'optional') { tunes.push({ @@ -243,19 +243,13 @@ export default class ImageTool implements BlockTool { } const availableTunes = tunes.filter((tune) => { - if (this.config.features) { - const featureKey = [...featureTuneMap.entries()].find( - ([, value]) => value === tune.name - )?.[0]; - - if (featureKey != null) { - return this.config.features[featureKey as keyof FeaturesConfig]; - } + const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name); - return false; + if (featureKey === 'caption') { + return this.config.features?.caption !== false; } - return false; + return featureKey == null || this.config.features?.[featureKey as keyof FeaturesConfig] !== false; }); return availableTunes.map(tune => ({ diff --git a/src/types/types.ts b/src/types/types.ts index 1008fcb8..8b9e8d7b 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -107,20 +107,20 @@ export type FeaturesConfig = { /** * Flag to enable/disable tune - background. */ - background: boolean; + background?: boolean; /** * Flag to enable/disable tune - border. */ - border: boolean; + border?: boolean; /** * Flag to enable/disable caption. * Can be set to 'optional' to allow users to toggle via block tunes. */ - caption: boolean | 'optional'; + caption?: boolean | 'optional'; /** * Flag to enable/disable tune - stretched */ - stretched: boolean; + stretched?: boolean; }; /** From 3427b620be4b00bf81deec86127be4a8fed216c2 Mon Sep 17 00:00:00 2001 From: Vineeth Date: Sun, 27 Oct 2024 22:07:24 +0530 Subject: [PATCH 6/7] fix : rename property 'stretched' to 'stretch' --- dev/index.html | 4 ++-- src/index.ts | 8 +++++++- src/types/types.ts | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/dev/index.html b/dev/index.html index 99eb89dc..f9495ce7 100644 --- a/dev/index.html +++ b/dev/index.html @@ -21,10 +21,10 @@ byUrl: "http://localhost:8008/fetchUrl", }, features: { - caption: "optional", + // caption: false, border: false, background: false, - stretched: true, + stretch: false, }, }, }, diff --git a/src/index.ts b/src/index.ts index 0722afe9..de1bece8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -229,7 +229,7 @@ export default class ImageTool implements BlockTool { const featureTuneMap: Record = { border: 'withBorder', background: 'withBackground', - stretched: 'stretched', + stretch: 'stretched', caption: 'caption', }; @@ -421,6 +421,12 @@ export default class ImageTool implements BlockTool { private tuneToggled(tuneName: keyof ImageToolData): void { // inverse tune state this.setTune(tuneName, !(this._data[tuneName] as boolean)); + + // reset caption on toggle + if (tuneName === 'caption' && !this._data[tuneName]) { + this._data.caption = ''; + this.ui.fillCaption(''); + } } /** diff --git a/src/types/types.ts b/src/types/types.ts index 8b9e8d7b..3de55056 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -120,7 +120,7 @@ export type FeaturesConfig = { /** * Flag to enable/disable tune - stretched */ - stretched?: boolean; + stretch?: boolean; }; /** From d5d98f3ece2fdb1306b849629504e498c097c81f Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Mon, 28 Oct 2024 19:02:07 +0300 Subject: [PATCH 7/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5168de58..39e29a2d 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ You can disable features such as border, background tunes and caption by definin features: { border: false, caption: 'optional', - stretched: false + stretch: false } ```