diff --git a/README.md b/README.md index 39e29a2..42099a2 100644 --- a/README.md +++ b/README.md @@ -72,18 +72,19 @@ var editor = EditorJS({ Image Tool supports these configuration parameters: -| Field | Type | Description | -| ----- | -------- | ------------------ | -| endpoints | `{byFile: string, byUrl: string}` | Endpoints for file uploading.
Contains 2 fields:
__byFile__ - for file uploading
__byUrl__ - for uploading by URL | -| field | `string` | (default: `image`) Name of uploaded image field in POST request | -| types | `string` | (default: `image/*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).| -| additionalRequestData | `object` | Object with any data you want to send with uploading requests | -| additionalRequestHeaders | `object` | Object with any custom headers which will be added to request. [See example](https://github.com/codex-team/ajax/blob/e5bc2a2391a18574c88b7ecd6508c29974c3e27f/README.md#headers-object) | -| captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input | -| 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 additional features such as border, background tunes and caption. See details below. | +| Field | Type | Description | +|--------------------------|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| endpoints | `{byFile: string, byUrl: string}` | Endpoints for file uploading.
Contains 2 fields:
__byFile__ - for file uploading
__byUrl__ - for uploading by URL | +| field | `string` | (default: `image`) Name of uploaded image field in POST request | +| types | `string` | (default: `image/*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string). | +| additionalRequestData | `object` | Object with any data you want to send with uploading requests | +| additionalRequestHeaders | `object` | Object with any custom headers which will be added to request. [See example](https://github.com/codex-team/ajax/blob/e5bc2a2391a18574c88b7ecd6508c29974c3e27f/README.md#headers-object) | +| captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input | +| renderPreHook | `function(ImageToolData) => ImageToolData` | A function that is called just before the image is rendered. This can for example be used to fetch pre-signed urls for images uploaded to e.g. s3 | +| 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 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. diff --git a/dev/index.html b/dev/index.html index 2383256..b3c1d55 100644 --- a/dev/index.html +++ b/dev/index.html @@ -35,6 +35,9 @@ image: { class: ImageTool, config: { + renderPreHook: function (data) { + return data; + }, endpoints: { byFile: "http://localhost:8008/uploadFile", byUrl: "http://localhost:8008/fetchUrl", diff --git a/package.json b/package.json index cdc99cf..0aa157b 100644 --- a/package.json +++ b/package.json @@ -55,5 +55,6 @@ }, "dependencies": { "@codexteam/icons": "^0.3.0" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/index.ts b/src/index.ts index c35f436..66fc72b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -98,6 +98,7 @@ export default class ImageTool implements BlockTool { * Tool's initial config */ this.config = { + renderPreHook: config.renderPreHook, endpoints: config.endpoints, additionalRequestData: config.additionalRequestData, additionalRequestHeaders: config.additionalRequestHeaders, @@ -281,7 +282,7 @@ export default class ImageTool implements BlockTool { toggle: tune.toggle, isActive: isActive(tune), onActivate: () => { - /** If it'a user defined tune, execute it's callback stored in action property */ + /** If it's a user defined tune, execute its callback stored in action property */ if (typeof tune.action === 'function') { tune.action(tune.name); @@ -291,7 +292,7 @@ export default class ImageTool implements BlockTool { /** * For the caption tune, we can't rely on the this._data - * because it can be manualy toggled by user + * because it can be manually toggled by user */ if (tune.name === 'caption') { this.isCaptionEnabled = !(this.isCaptionEnabled ?? false); @@ -307,7 +308,7 @@ export default class ImageTool implements BlockTool { * Fires after clicks on the Toolbox Image Icon * Initiates click on the Select File button */ - public appendCallback(): void { + public rendered(): void { this.ui.nodes.fileButton.click(); } @@ -420,6 +421,10 @@ export default class ImageTool implements BlockTool { private set image(file: ImageSetterParam | undefined) { this._data.file = file || { url: '' }; + if (this.config.renderPreHook !== undefined) { + this._data = this.config.renderPreHook(this._data); + } + if (file && file.url) { this.ui.fillImage(file.url); } @@ -460,7 +465,7 @@ export default class ImageTool implements BlockTool { if (tuneName === 'caption') { this.ui.applyTune(tuneName, state); - if (state == false) { + if (!state) { this._data.caption = ''; this.ui.fillCaption(''); } diff --git a/src/types/types.ts b/src/types/types.ts index 3de5505..40a28a3 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -40,7 +40,7 @@ export interface ActionConfig { * An optional action function to be executed when the tune is activated. */ action?: Function; -}; +} /** * UploadResponseFormat interface representing the response format expected from the backend on file uploading. @@ -65,7 +65,7 @@ export interface UploadResponseFormat { } /** - * ImageToolData type representing the input and output data format for the image tool, including optional custome actions. + * ImageToolData type representing the input and output data format for the image tool, including optional custom actions. */ export type ImageToolData = { /** @@ -89,8 +89,7 @@ export type ImageToolData = { stretched: boolean; /** - * Object containing the URL of the image file. - * Also can contain any additional data. + * Object containing the URL of the image file, can also contain additional data. */ file: { /** @@ -144,6 +143,13 @@ export interface ImageConfig { byUrl?: string; }; + /** + * Optional function that is run prior to rendering the image. This can prove useful for e.g. images that are + * uploaded to private s3 buckets and need a pre-signed url generate before they can be viewed. + * Input is a function that is allowed to mutate the imageToolData object. + */ + renderPreHook?: (data: ImageToolData) => ImageToolData; + /** * Field name for the uploaded image. */