{"id":13769697,"url":"https://github.com/kommitters/editorjs-inline-image","last_synced_at":"2025-05-16T11:05:49.257Z","repository":{"id":42125504,"uuid":"266148127","full_name":"kommitters/editorjs-inline-image","owner":"kommitters","description":"Unsplash inline images plugin for editorjs ","archived":false,"fork":false,"pushed_at":"2025-05-02T21:41:21.000Z","size":17025,"stargazers_count":106,"open_issues_count":4,"forks_count":31,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-12T09:10:01.496Z","etag":null,"topics":["editorjs","editorjs-plugin","hacktoberfest","javascript","unsplash"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-inline-image","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kommitters.png","metadata":{"funding":{"github":["kommitters"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-22T15:46:03.000Z","updated_at":"2025-05-03T08:19:23.000Z","dependencies_parsed_at":"2023-10-03T07:13:10.506Z","dependency_job_id":"e06596d6-0456-40c3-ad61-654f460bbb0b","html_url":"https://github.com/kommitters/editorjs-inline-image","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-inline-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-inline-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-inline-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-inline-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kommitters","download_url":"https://codeload.github.com/kommitters/editorjs-inline-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","editorjs-plugin","hacktoberfest","javascript","unsplash"],"created_at":"2024-08-03T17:00:30.586Z","updated_at":"2025-05-16T11:05:44.247Z","avatar_url":"https://github.com/kommitters.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kommitters"],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"# EditorJS Unsplash Inline Image Tool\n\n![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)\n![](https://badgen.net/badge/Editor.js/v2.0/blue)\n[![Coverage Status](https://coveralls.io/repos/github/kommitters/editorjs-inline-image/badge.svg)](https://coveralls.io/github/kommitters/editorjs-inline-image)\n[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/6469/badge)](https://bestpractices.coreinfrastructure.org/projects/6469)\n[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-inline-image/badge)](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-inline-image)\n\nImage tool for [Editor.js](https://editorjs.io) that enables you to embed images from [Unsplash](https://unsplash.com/), blobs, or URLs directly into your content.\n![](assets/demo.gif)\n\n## Notes\n\nRequires a proxy for the Unsplash API to avoid exposing the Unsplash Access Key on the client-side. See [Proxy for Unsplash API](proxy_api.md) for more information.\n\nBuilt following the [Unsplash API Guidelines](https://help.unsplash.com/en/articles/2511245-unsplash-api-guidelines).\n\nExtends the functionality of [simple-image](https://github.com/editor-js/simple-image).\n\n## Installation\n\nYou can install the tool via npm or load it from a CDN.\n\n### Install via NPM\nGet the package\n```shell\n$ npm i --save-dev editorjs-inline-image\n```\n\nInclude module at your application\n\n```javascript\nimport InlineImage from 'editorjs-inline-image';\n```\n\n### Load from CDN\n\nYou can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-inline-image).\n\nRequire this script on a page with Editor.js.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-inline-image\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nconst editor = EditorJS({\n  tools: {\n      image: {\n        class: InlineImage,\n        inlineToolbar: true,\n        config: {\n          embed: {\n            display: true,\n          },\n          unsplash: {\n            appName: 'your_app_name',\n            apiUrl: 'https://your-proxy-api-url.com',\n            maxResults: 30,\n            imageParams: {\n              q:85,\n              w:1500,\n            }\n          }\n        }\n      }\n  }\n});\n```\n\n## Config Params\n\n| Field          | Type      | Description                     |\n| -------------- | --------- | ------------------------------- |\n| embed          | `{display: boolean}` | You could display or not the embed tab, If you don't fill the embed config by default the value is set on `true`. |\n| unsplash       | `{appName: string, apiUrl: string, maxResults: Number, imageParams: Object}`  | Config for **Unsplash API**. Contains 3 fields: \u003cbr\u003e\u003cbr\u003e **appName**: Unsplash `Application Name`. \u003cbr\u003e\u003cbr\u003e **apiUrl**: URL of the Proxy for Unsplash API. \u003cbr\u003e\u003cbr\u003e **maxResults**: Max number of images per search (default 30). \u003cbr\u003e\u003cbr\u003e **imageParams**: Additional configuration parameters for image quality and dimensions. See [Dynamically resizable images](https://unsplash.com/documentation#dynamically-resizable-images) for more information. |\n\n## Tool's tunes\n\n1. Add border\n\n2. Stretch to full-width\n\n3. Add background\n\n## Output data\n\n| Field          | Type      | Description                     |\n| -------------- | --------- | ------------------------------- |\n| url            | `string`  | Image's url                     |\n| caption        | `string`  | Image's caption                 |\n| withBorder     | `boolean` | Add border to image             |\n| withBackground | `boolean` | Add background          |\n| stretched      | `boolean` | Stretch image to screen's width |\n| unsplash       | `{author: string, profileLink: string}` | Unsplash image author information. \u003cbr\u003e\u003cbr\u003e **author**: Author's name. \u003cbr\u003e\u003cbr\u003e **profileLink**: Unsplash porfile link.\n\n**Image**\n\n```json\n{\n    \"type\" : \"image\",\n    \"data\" : {\n        \"url\" : \"https://www.example.com/image.jpg\",\n        \"caption\" : \"An image\",\n        \"withBorder\" : false,\n        \"withBackground\" : false,\n        \"stretched\" : true\n    }\n}\n```\n\n**Unsplash image**\n\n```json\n{\n  \"type\": \"image\",\n  \"data\": {\n    \"url\": \"https://images.unsplash.com/photo-xxxxxxxxxxxxxxxxx\",\n    \"caption\": \"An image from Unsplash\",\n    \"withBorder\": false,\n    \"withBackground\": true,\n    \"stretched\": false,\n    \"unsplash\": {\n      \"author\": \"John Doe\",\n      \"profileLink\": \"https://unsplash.com/@john_doe_fake\"\n    }\n  }\n}\n```\n\n## Development\n\n**Development mode**\n```shell\n$ yarn build:dev\n```\n\n**Production release**\n1. Create a production bundle\n```shell\n$ yarn build\n```\n\n2. Commit `dist/bundle.js`\n\n**Run tests**\n```shell\n$ yarn test\n```\n\n## Code of conduct\nWe welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.\n\n## Contributing\nFor information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.\n\n## Changelog\nFeatures and bug fixes are listed in the [CHANGELOG][changelog] file.\n\n## License\nThis library is licensed under an MIT license. See [LICENSE][license] for details.\n\n## Acknowledgements\nMade with 💙 by [kommitters Open Source](https://kommit.co)\n\n[license]: https://github.com/kommitters/editorjs-inline-image/blob/master/LICENSE\n[coc]: https://github.com/kommitters/editorjs-inline-image/blob/master/CODE_OF_CONDUCT.md\n[changelog]: https://github.com/kommitters/editorjs-inline-image/blob/master/CHANGELOG.md\n[contributing]: https://github.com/kommitters/editorjs-inline-image/blob/master/CONTRIBUTING.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-inline-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkommitters%2Feditorjs-inline-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-inline-image/lists"}