{"id":13672795,"url":"https://github.com/x-cold/quill2-image-drop-and-paste","last_synced_at":"2025-04-28T03:33:06.465Z","repository":{"id":45349189,"uuid":"423832529","full_name":"x-cold/quill2-image-drop-and-paste","owner":"x-cold","description":"A quill editor module for drop and paste image, with a callback hook before insert image into the editor","archived":false,"fork":false,"pushed_at":"2021-12-22T10:12:49.000Z","size":23524,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T08:50:53.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://x-cold.github.io/quill2-image-drop-and-paste/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/x-cold.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-02T12:20:44.000Z","updated_at":"2021-12-22T10:09:37.000Z","dependencies_parsed_at":"2022-08-29T20:31:16.439Z","dependency_job_id":null,"html_url":"https://github.com/x-cold/quill2-image-drop-and-paste","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":"x-cold/rollup-ts-library-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-cold%2Fquill2-image-drop-and-paste","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-cold%2Fquill2-image-drop-and-paste/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-cold%2Fquill2-image-drop-and-paste/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-cold%2Fquill2-image-drop-and-paste/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/x-cold","download_url":"https://codeload.github.com/x-cold/quill2-image-drop-and-paste/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251246394,"owners_count":21558762,"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":[],"created_at":"2024-08-02T09:01:48.871Z","updated_at":"2025-04-28T03:33:01.455Z","avatar_url":"https://github.com/x-cold.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"quill2-image-drop-and-paste\n---\n\n\n[![NPM version][npm-image]][npm-url]\n[![build status][gitflow-image]][gitflow-url]\n[![Test coverage][codecov-image]][codecov-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: https://img.shields.io/npm/v/quill2-image-drop-and-paste.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/quill2-image-drop-and-paste\n[gitflow-image]: https://github.com/x-cold/quill2-image-drop-and-paste/actions/workflows/nodejs.yml/badge.svg?branch=master\n[gitflow-url]: https://github.com/x-cold/quill2-image-drop-and-paste/actions/workflows/nodejs.yml\n[codecov-image]: https://codecov.io/gh/x-cold/quill2-image-drop-and-paste/branch/master/graph/badge.svg\n[codecov-url]: https://codecov.io/gh/x-cold/quill2-image-drop-and-paste\n[download-image]: https://badgen.net/npm/dt/quill2-image-drop-and-paste\n[download-url]: https://npmjs.org/package/quill2-image-drop-and-paste\n\nA quill plugin to deal with pasting and droping images and html including images. [Example](https://x-cold.github.io/quill2-image-drop-and-paste/react-demo/).\n\n![Paste html](https://github.com/x-cold/quill2-image-drop-and-paste/blob/master/screenshots/paste-html.gif?raw=true)\n\n## Usage\n\n- Install the plugin\n\n```bash\nnpm i -S quill2-image-drop-and-paste\n```\n\n- Register the plugin and init quill instance\n\n```ts\nimport Quill from 'quill';\nimport Quill2ImageDropAndPaste from 'quill2-image-drop-and-paste';\n\nQuill.register('modules/imageDropAndPaste', Quill2ImageDropAndPaste);\n\nconst quill = new Quill('#editor-container', {\n  modules: {\n    // ...\n    imageDropAndPaste: {\n      upload: uploadImage,\n      imageDomainAllowList: [\n        'cdn.nlark.com'\n      ],\n      imageAllowMatch(url: string) {\n\n      },\n    },\n    history: {\n      userOnly: true, // Recommend to turn on this option\n    },\n    // ...\n  },\n});\n\nfunction uploadImage(file: Blob, originalUrl: string): string {\n\n}\n```\n\n- API documents: https://x-cold.github.io/quill2-image-drop-and-paste/\n\n## Examples\n\n- React Demo\n  - [Online showcase](https://x-cold.github.io/quill2-image-drop-and-paste/react-demo/)\n  - [Source code](https://github.com/x-cold/quill2-image-drop-and-paste/tree/master/examples/react-demo)\n\n## Development\n\n### NPM scripts\n\n - `npm lint`: Eslint code\n - `npm lint:fix`: Eslint code and try to fix problems\n - `npm start`: Realtime complie code\n - `npm run docs`: Generate type documents\n - `npm run build`: Build ths dist products\n - `npm run release`: The same as `npm run release:patch`\n - `npm run release:patch`: Automatically upgrade patch versioin and update CHANGELOG.md\n - `npm run release:minor`: Automatically upgrade minor versioin and update CHANGELOG.md\n - `npm run release:major`: Automatically upgrade major versioin and update CHANGELOG.md\n - `npm run test`: Run test suite via jest with code coverage\n - `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)\n - `npm run test:prod`: Run linting and generate coverage\n - `npm run deploy`: Deploy github pages\n\n### Cookbook\n\n- Local development\n\n```bash\nnpm install\nnpm start\n```\n\n- Local demo\n\n```\ncd examples/react-demo\nnpm install\nnpm link ../../\nnpm start\n```\n\n- Build\n\n```bash\nnpm run build\n```\n\n- Publish the package following [semantic version](https://semver.org/)\n\n```\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-cold%2Fquill2-image-drop-and-paste","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fx-cold%2Fquill2-image-drop-and-paste","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-cold%2Fquill2-image-drop-and-paste/lists"}