Skip to content

Add pre-render hook #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
danielhedinn wants to merge 1 commit into from
Closed

Add pre-render hook #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. <br> Contains 2 fields: <br> __byFile__ - for file uploading <br> __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. <br> Contains 2 fields: <br> __byFile__ - for file uploading <br> __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.

Expand Down
3 changes: 3 additions & 0 deletions dev/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
image: {
class: ImageTool,
config: {
renderPreHook: function (data) {
return data;
},
endpoints: {
byFile: "http://localhost:8008/uploadFile",
byUrl: "http://localhost:8008/fetchUrl",
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,6 @@
},
"dependencies": {
"@codexteam/icons": "^0.3.0"
}
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
13 changes: 9 additions & 4 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);

Expand All @@ -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);
Expand All @@ -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();
}

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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('');
}
Expand Down
14 changes: 10 additions & 4 deletions src/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -65,7 +65,7 @@ export interface UploadResponseFormat<AdditionalFileData = {}> {
}

/**
* 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<Actions = {}, AdditionalFileData = {}> = {
/**
Expand All @@ -89,8 +89,7 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
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: {
/**
Expand Down Expand Up @@ -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.
*/
Expand Down