diff --git a/README.md b/README.md
index 745caae..84daa45 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 1bb3347..33a181e 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 c22f67d..09ee5d8 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 7cd33fe..a99ec06 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 c0a7654..ed4b2d9 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 931bca7..12888ea 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