editor-js / editor-js/image

SVG Icon Disappears When Using buttonContent in ImageTool Configuration

Open
#226 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
285
Forks
307
PR merge metrics
No merged PRs in 30d

Description

When the `buttonContent` property is set in the configuration for the `ImageTool` of EditorJS, the SVG icon disappears, leaving only the text message visible.

## Examples:

### Example 1:

```javascript
import ImageTool from '@editorjs/image';

var editor = EditorJS({
...

tools: {
...
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
}
}
}
}

...
});
```

![image](https://github.com/editor-js/image/assets/74191596/2fae3edc-94e7-435b-b110-c0cf3bb8f1c0)

### Example 2:

```javascript
import ImageTool from '@editorjs/image';

var editor = EditorJS({
...

tools: {
...
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
},
buttonContent: 'Select an image',
}
}
}

...
});
```

![image](https://github.com/editor-js/image/assets/74191596/e8daaacd-346e-4e19-b60f-126ecd8409fb)

## Temporary Solution:

A temporary fix is to include the SVG icon within the buttonContent property:

```javascript
import ImageTool from '@editorjs/image';

var editor = EditorJS({
...

tools: {
...
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
},
buttonContent: ' Select an image',
}
}
}

...
});
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the ImageTool configuration and trace how buttonContent is rendered for the image selection button. Compare the default button with the custom-content case, then verify that setting buttonContent preserves the SVG icon alongside the supplied text.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.