{"id":20768002,"url":"https://github.com/human-connection/quill-url-embeds","last_synced_at":"2025-04-30T11:22:53.879Z","repository":{"id":65479603,"uuid":"126705270","full_name":"Human-Connection/quill-url-embeds","owner":"Human-Connection","description":null,"archived":false,"fork":false,"pushed_at":"2018-04-13T15:05:32.000Z","size":10134,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T10:52:30.375Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Human-Connection.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-03-25T14:22:50.000Z","updated_at":"2019-11-14T05:07:17.000Z","dependencies_parsed_at":"2023-01-25T18:31:29.621Z","dependency_job_id":null,"html_url":"https://github.com/Human-Connection/quill-url-embeds","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2Fquill-url-embeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2Fquill-url-embeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2Fquill-url-embeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2Fquill-url-embeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Human-Connection","download_url":"https://codeload.github.com/Human-Connection/quill-url-embeds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251689078,"owners_count":21627833,"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-11-17T11:34:25.860Z","updated_at":"2025-04-30T11:22:53.856Z","avatar_url":"https://github.com/Human-Connection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quill-url-embeds\n\n**Important: This is a WIP, do not use it in production**\n\nChecks for URLs during typing and pasting and automatically converts them to embeds.\n\n## Prerequisites\n \n\nSetup an instance of [embed-api](https://github.com/Human-Connection/Embed-API) to provide a REST endpoint for local development or on your production server.\n\n## Install\n\n```bash\nnpm install quill-url-embeds --save\n```\n\n## Usage\n\n```javascript\nimport Quill from 'quill'\nimport { urlEmbed, urlEmbedModule } from 'quill-url-embeds'\nQuill.register({\n  'blots/urlEmbed': urlEmbed,\n  'modules/urlEmbeds': urlEmbedModule({\n    metaApi\n  })\n})\n\nconst quill = new Quill(editor, {\n  modules: {\n    urlEmbeds: {}\n  }\n});\n```\n\n## Behaviour\n\n### 1. Check for URLs\n\nThis module checks for URLs that are inserted on single lines.\n\n**Examples that *will* trigger embeds:**\n\n```html\nCheck this out:\nhttps://vimeo.com/70591644\n```\n\n```html\nhttps://vimeo.com/70591644\nThis is awesome.\n```\n\n**Examples that *will not* trigger embeds:**\n```html\nCheck this out: https://vimeo.com/70591644\n```\n```html\nhttps://vimeo.com/70591644 is awesome.\n```\n\n### 2. Fetch Meta Infos\n\nAfter triggering, meta info for the given URL is fetched from the provided REST endpoint.\n\n### 3. Render Embed Code\n\nAfter successfully fetching the meta info, an embed is rendered.\n\n**Example Output:**\n```html\n\u003cdiv data-url-embed=\"https://vimeo.com/70591644\" contenteditable=\"false\"\u003e\n  \u003ciframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"https://player.vimeo.com/video/70591644/\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\n\n## Utility functions\n\n### utils.embedToAnchor\n\nConverts embeds to a-tags.\n\n**Client Usage:**\n\n```javascript\nimport { utils } from 'quill-url-embeds'\nutils.embedToAnchor(content)\n```\n\n**Server Usage:**\n\n```javascript\nimport embedToAnchor from 'quill-url-embeds/dist/embed-to-anchor'\nembedToAnchor(content)\n```\n\n**Example:**\n```html\n\u003cdiv data-url-embed=\"https://vimeo.com/70591644\" contenteditable=\"false\"\u003e\n  \u003ciframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"https://player.vimeo.com/video/70591644/\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\nis converted to:\n```html\n\u003ca target=\"_blank\" href=\"https://vimeo.com/70591644\" data-url-embed=\"\"\u003ehttps://vimeo.com/70591644\u003c/a\u003e\n```\n\n### utils.populator\n\nConverts all single line a-tags inside a DOM node to embeds.\n\n**Usage:**\n\n```javascript\nimport { utils } from 'quill-url-embeds'\nconst populator = new utils.populator(metaApi)\npopulator.populate(node)\n```\n\n**Example:**\n```html\n\u003ca target=\"_blank\" href=\"https://vimeo.com/70591644\" data-url-embed=\"\"\u003ehttps://vimeo.com/70591644\u003c/a\u003e\n```\nis converted to:\n```html\n\u003cdiv data-url-embed=\"https://vimeo.com/70591644\" contenteditable=\"false\"\u003e\n  \u003ciframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"https://player.vimeo.com/video/70591644/\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\n\n##Security\n\nIn order to secure your application against XSS attacks it is necessary to sanitize the editor content before saving it. To achieve this we need a few extra steps in managing the data.\n\nThis module provides some utility functions to help making the process as smooth as possible.\n\n### 1. Sanitize editor content\n\nContent sanitizing needs to be handled in your backend.\n\n**Example:**\n\nThis example uses [sanitize-html](https://www.npmjs.com/package/sanitize-html), so be sure to install it first:\n```bash\nnpm install sanitize-html --save\n```\n\n```javascript\nimport sanitizeHtml from 'sanitize-html'\nimport embedToAnchor from 'quill-url-embeds/dist/embed-to-anchor'\n\nconst sanitizeContent = (content) =\u003e {\n  // Convert embeds to a-tags\n  content = embedToAnchor(content);\n\n  // Sanitize content\n  content = sanitizeHtml(content, {\n    allowedTags: ['img', 'p', 'br', 'b', 'i', 'em', 'strong', 'a', 'pre', 'ul', 'li', 'ol', 'span'],\n    allowedAttributes: {\n      a: ['href', 'target', 'data-*'],\n      img: [ 'src' ]\n    },\n    parser: {\n      lowerCaseTags: true\n    },\n    transformTags: {\n      i: 'em',\n      b: 'strong'\n    }\n  });\n  \n  return content;\n}\n```\n\n### 2. Render sanitized content\n\nIn your frontend you need to populate the sanitized content with embed code. (Note: Quill will do this for it's own content after initialization)\n\n**Example:**\n\n```javascript\nimport { utils } from 'quill-url-embeds'\n\nconst metaApi = 'http://your.metainfo.rest.service'\nconst populator = new utils.populator(metaApi)\n\n// Convert a-tags in #editor-content to embeds\nconst node = document.getElementById('editor-content')\npopulator.populate(node)\n\n```\n\n## Development\n\nSetup a standalone version of this module + quill for local development:\n\n1. Make sure you have [yarn](https://yarnpkg.com) installed.\n\n2. Clone this repo\n   ``` bash\n   $ git clone https://github.com/Human-Connection/quill-url-embeds\n   ```\n\n3. Install your dependencies\n   ``` bash\n   $ cd ./quill-url-embeds\n   $ yarn\n   ```\n   \n4. Start development\n   ``` bash\n   $ yarn dev\n   ```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuman-connection%2Fquill-url-embeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuman-connection%2Fquill-url-embeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuman-connection%2Fquill-url-embeds/lists"}