{"id":16647494,"url":"https://github.com/cathood0/quill-delta-from-html","last_synced_at":"2026-02-23T15:02:07.764Z","repository":{"id":248461743,"uuid":"828036725","full_name":"CatHood0/quill-delta-from-html","owner":"CatHood0","description":"Convert easily HTML inputs content to Quill Js Delta format","archived":false,"fork":false,"pushed_at":"2024-12-30T17:48:03.000Z","size":176,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-04T16:59:50.063Z","etag":null,"topics":["converter","delta","delta-from-html","html","html-to-delta","parser","quill-delta"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/quill-delta-from-html","language":"TypeScript","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/CatHood0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-13T00:19:24.000Z","updated_at":"2025-07-20T03:51:06.000Z","dependencies_parsed_at":"2024-07-15T05:10:28.951Z","dependency_job_id":"1903ad68-2eed-4c3d-8173-05dda6e46ac2","html_url":"https://github.com/CatHood0/quill-delta-from-html","commit_stats":null,"previous_names":["cathood0/quill-delta-from-html"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/CatHood0/quill-delta-from-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fquill-delta-from-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fquill-delta-from-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fquill-delta-from-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fquill-delta-from-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CatHood0","download_url":"https://codeload.github.com/CatHood0/quill-delta-from-html/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fquill-delta-from-html/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29746499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["converter","delta","delta-from-html","html","html-to-delta","parser","quill-delta"],"created_at":"2024-10-12T08:44:57.332Z","updated_at":"2026-02-23T15:02:07.742Z","avatar_url":"https://github.com/CatHood0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quill Delta from HTML\n\nThis is a package that converts **HTML** input into Quill **Delta** format, which is used in the [Quill Js](https://quilljs.com/) package.\n\n**This package** supports the conversion of a wide range of **HTML** tags and attributes into their corresponding **Delta** operations, ensuring that your **HTML** content is accurately represented in the **Quill editor**.\n\n## Supported tags\n\n```html\n    \u003c!--Text Formatting--\u003e\n        \u003cb\u003e, \u003cstrong\u003e: Bold text\n        \u003ci\u003e, \u003cem\u003e: Italic text\n        \u003cu\u003e, \u003cins\u003e: Underlined text\n        \u003cs\u003e, \u003cdel\u003e: Strikethrough text\n        \u003csup\u003e: Superscript text\n        \u003csub\u003e: Subscript text\n\n    \u003c!--Headings--\u003e\n        \u003ch1\u003e to \u003ch6\u003e: Headings of various levels\n\n    \u003c!--Lists and nested ones--\u003e\n        \u003cul\u003e: Unordered lists\n        \u003col\u003e: Ordered lists\n        \u003cli\u003e: List items\n        \u003cli data-checked=\"true\"\u003e: Check lists\n        \u003cinput type=\"checkbox\"\u003e: Another alternative to make a check lists\n\n    \u003c!--Links--\u003e\n        \u003ca\u003e: Hyperlinks with support for the href attribute\n\n    \u003c!--Images--\u003e\n        \u003cimg\u003e: Images with support for the src, align, and styles\n\n    \u003c!--div--\u003e\n        \u003cdiv\u003e: HTML tag containers\n\n    \u003c!--Videos --\u003e\n        \u003cvideo\u003e: Videos with support for the src\n\n    \u003c!--Blockquotes--\u003e\n        \u003cblockquote\u003e: Block quotations\n\n    \u003c!--Code Blocks--\u003e\n        \u003cpre\u003e, \u003ccode\u003e: Code blocks\n\n    \u003c!--Text Alignment, inline text align and direction--\u003e\n        \u003cp style=\"text-align:left|center|right|justify\"\u003e: Paragraph style alignment\n        \u003cp align=\"left|center|right|justify\"\u003e: Paragraph alignment\n        \u003cp dir=\"rtl\"\u003e: Paragraph direction\n\n    \u003c!--Text attributes--\u003e\n        \u003cp style=\"padding: 10px;font-size: 12px;font-family: Times New Roman;color:#ffffff\"\u003e: Inline attributes\n\n    \u003c!--Custom Blocks--\u003e\n        \u003cpullquote data-author=\"john\"\u003e: Custom html\n```\n\n## Quick Example\n\n```typescript\nimport { HtmlToDelta } from 'quill-delta-from-html';\n\nconst htmlContent: string = '\u003cp\u003eHello, \u003cb\u003eworld\u003c/b\u003e!\u003c/p\u003e';\nconst delta = new HtmlToDelta(\u003cyour_custom_blocks\u003e, \u003cYourHtmlToOperationsImpl\u003e, \u003cyour_black_nodes_list\u003e).convert(htmlContent);\n\n/*\n   { \"insert\": \"hello, \" },\n   { \"insert\": \"world\", \"attributes\": {\"bold\": true} },\n   { \"insert\": \"!\\n\" }\n*/\n```\n\n## Creating your own `CustomHtmlPart`\n\n#### What is a CustomHtmlPart?\n\n`CustomHtmlPart`is a special class that let us convert custom `HTML` elements in Operation to `Quill Delta`. \n\nFirst you need to define your own `CustomHtmlPart`\n\n```typescript\nimport { CustomHtmlPart } from 'quill-delta-from-html';\nimport { HTMLElement } from 'node-html-parser';\nimport Delta, { AttributeMap, Op } from 'quill-delta';\n\n/// Custom block handler for \u003cpullquote\u003e elements.\nclass PullquoteBlock extends CustomHtmlPart {\n  matches(element: HTMLElement): boolean {\n    // you can put here the validation that you want\n    // To detect a \u003cp\u003e, you just need to do something like:\n    // element.rawTagName === 'p'\n    return element.rawTagName === 'pullquote';\n  }\n\n  convert(element: HTMLElement, currentAttributes: AttributeMap): Op[] {\n    const delta: Delta = new Delta();\n    const attributes = { ...currentAttributes };\n\n    // Extract custom attributes from the \u003cpullquote\u003e element\n    // The attributes represent the data into a html tag\n    // at this point, \u003cpullquote\u003e should have these attributes\n    //\n    // \u003cpullquote data-author=\"John Doe\" data-style=\"italic\"\u003e\n    // These attributes can be optional, so ensure not to use \"!\" to avoid any null conflict\n    const author = element.attribs['data-author'];\n    const style = element.attribs['data-style'];\n\n    // Apply custom attributes to the Delta operations\n    if (author) {\n      delta.insert(\n        `Pullquote: \"${element.children[0].data}\" by ${author}`,\n        attributes,\n      );\n    } else {\n      delta.insert(`Pullquote: \"${element.children[0].data}\"`, attributes);\n    }\n\n    if (style \u0026\u0026 style.toLowerCase() === 'italic') {\n      attributes['italic'] = true;\n    }\n    return delta;\n  }\n}\n```\n\nAfter, put your `PullquoteBlock` to `HtmlToDelta` using the param `customBlocks`\n\n```typescript\nimport { HtmlToDelta } from 'quill-delta-from-html';\n\nconst htmlText: string = `\n  \u003chtml\u003e\n    \u003cbody\u003e\n      \u003cp\u003eRegular paragraph before the custom block\u003c/p\u003e\n      \u003cpullquote data-author=\"John Doe\" data-style=\"italic\"\u003eThis is a custom pullquote\u003c/pullquote\u003e\n      \u003cp\u003eRegular paragraph after the custom block\u003c/p\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n`;\n\n// Registering the custom block\nconst customBlocks = [new PullquoteBlock()];\n\n// Initialize HtmlToDelta with the HTML text and custom blocks\nconst converter = new HtmlToDelta(customBlocks);\n\n// Convert HTML to Delta operations\nconst delta = converter.convert(htmlText);\n\n/*\nThis should be resulting delta\n  {\"insert\": \"Regular paragraph before the custom block\"},\n  {\"insert\": \"Pullquote: \\\"This is a custom pullquote\\\" by John Doe\", \"attributes\": {\"italic\": true}},\n  {\"insert\": \"\\n\"},\n  {\"insert\": \"Regular paragraph after the custom block\\n\"}\n*/\n```\n\n## HtmlOperations\n\nThe `HtmlOperations` class is designed to streamline the conversion process from `HTML` to `Delta` operations, accommodating a wide range of `HTML` structures and attributes commonly used in web content.\n\nTo utilize `HtmlOperations`, extend this class and implement the methods necessary to handle specific `HTML` elements. Each method corresponds to a different `HTML` tag or element type and converts it into Delta operations suitable for use with `Quill JS`.\n\n```typescript\nabstract class HtmlOperations {\n  // customBlocks are passed internally by HtmlToDelta\n  protected customBlocks?: CustomHtmlPart[];\n\n  // You don't need to override this method\n  // as it simply calls the other methods\n  // to detect the type of HTML tag\n  resolveCurrentElement(\n    element: dom.Element,\n    indentLevel?: number,\n  ): Operation[];\n\n  abstract brToOp(element: dom.Element): Operation[];\n  abstract headerToOp(element: dom.Element): Operation[];\n  abstract listToOp(element: dom.Element, indentLevel?: number): Operation[];\n  abstract paragraphToOp(element: dom.Element): Operation[];\n  abstract linkToOp(element: dom.Element): Operation[];\n  abstract spanToOp(element: dom.Element): Operation[];\n  abstract imgToOp(element: dom.Element): Operation[];\n  abstract videoToOp(element: dom.Element): Operation[];\n  abstract codeblockToOp(element: dom.Element): Operation[];\n  abstract blockquoteToOp(element: dom.Element): Operation[];\n}\n```\n\n### Passing a custom `HtmlOperations` implementation \n\n```typescript\nimport { HtmlToDelta } from 'quill-delta-from-html';\n\nconst converter = new HtmlToDelta(...your_custom_blocks, \u003cYourHtmlToOperationsImpl\u003e);\n```\n\n## Contributions\n\nIf you find a bug or want to add a new feature, please open an issue or submit a pull request on the [GitHub repository](https://github.com/CatHood0/quill-delta-from-html).\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/CatHood0/quill-delta-from-html/blob/Main/LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcathood0%2Fquill-delta-from-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcathood0%2Fquill-delta-from-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcathood0%2Fquill-delta-from-html/lists"}