{"_id":"@ahmgeeks/quill-delta-to-html","_rev":"1-65cfe7dc57fb47b8d86b078d8388ac52","name":"@ahmgeeks/quill-delta-to-html","dist-tags":{"latest":"0.12.2"},"versions":{"0.12.1":{"name":"@ahmgeeks/quill-delta-to-html","version":"0.12.1","description":"Converts Quill's delta ops to HTML","main":"./dist/commonjs/main.js","types":"./dist/commonjs/main.d.ts","dependencies":{"lodash.isequal":"^4.5.0"},"devDependencies":{"@types/lodash.isequal":"^4.5.5","@types/mocha":"^2","@types/node":"^7.0","browserify":"^16.2","coveralls":"^3.0","husky":"^3.0.9","mocha":"^6","nyc":"^14.1","prettier":"^2.0.4","pretty-quick":"^2.0.1","ts-node":"^8","typescript":"^2"},"scripts":{"browserbundle":"./node_modules/browserify/bin/cmd.js ./dist/commonjs/QuillDeltaToHtmlConverter.js -o ./dist/browser/QuillDeltaToHtmlConverter.bundle.js -s QuillDeltaToHtmlConverter ","browser":"npm run browserbundle && echo '; window.QuillDeltaToHtmlConverter = window.QuillDeltaToHtmlConverter ? window.QuillDeltaToHtmlConverter.QuillDeltaToHtmlConverter : window.QuillDeltaToHtmlConverter; ' >> ./dist/browser/QuillDeltaToHtmlConverter.bundle.js ","build":"./node_modules/typescript/bin/tsc && npm run browser ","test":"./node_modules/nyc/bin/nyc.js ./node_modules/mocha/bin/mocha --require ts-node/register -b \"./test/**/*.ts\" ","coverage":"./node_modules/nyc/bin/nyc.js report --reporter=text-lcov | coveralls ","coveragehtml":"./node_modules/nyc/bin/nyc.js report --reporter=html "},"repository":{"type":"git","url":"git+ssh://git@github.com/nozer/quill-delta-to-html.git"},"keywords":["quill","delta","html"],"author":{"name":"Nihat Özer","email":"nihatforweb@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/nozer/quill-delta-to-html/issues"},"homepage":"https://github.com/nozer/quill-delta-to-html#readme","nyc":{"include":["src/**/*.ts"],"exclude":["typings","src/main.ts","**/*.d.ts"],"extension":[".ts"],"require":["ts-node/register"],"reporter":["json","html"],"all":true},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"directories":{"test":"test"},"gitHead":"a75bc6b161331c95423936ab4879cc9bc3b46b3a","_id":"@ahmgeeks/quill-delta-to-html@0.12.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-3avF7LvKTeOHzoPPkCz82P7aNX6fTuCDDYxGVJYLg8qGzkBjXEB7giPGydHcX0qbX6pRPqQU0BtwvjjOG7FKaw==","shasum":"526276f49c1e016d1e161129608d35a0fda167a2","tarball":"https://registry.npmjs.org/@ahmgeeks/quill-delta-to-html/-/quill-delta-to-html-0.12.1.tgz","fileCount":89,"unpackedSize":365676,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH1PAz1YG4UACUw+eoij8AoD9mNT0pvMpB81C0zfCJocCIQDIiDCbmICevbx39K9WwpAMJWgUdBKjPp14qkNPbtA+uw=="}]},"_npmUser":{"name":"ahmgeek","email":"tolpa1@gmail.com"},"maintainers":[{"name":"ahmgeek","email":"tolpa1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-delta-to-html_0.12.1_1699158525122_0.04068281045543287"},"_hasShrinkwrap":false},"0.12.2":{"name":"@ahmgeeks/quill-delta-to-html","version":"0.12.2","description":"Converts Quill's delta ops to HTML","main":"./dist/commonjs/main.js","types":"./dist/commonjs/main.d.ts","dependencies":{"lodash.isequal":"^4.5.0"},"devDependencies":{"@types/lodash.isequal":"^4.5.5","@types/mocha":"^2","@types/node":"^7.0","browserify":"^16.2","coveralls":"^3.0","husky":"^3.0.9","mocha":"^6","nyc":"^14.1","prettier":"^2.0.4","pretty-quick":"^2.0.1","ts-node":"^8","typescript":"^2"},"scripts":{"browserbundle":"./node_modules/browserify/bin/cmd.js ./dist/commonjs/QuillDeltaToHtmlConverter.js -o ./dist/browser/QuillDeltaToHtmlConverter.bundle.js -s QuillDeltaToHtmlConverter ","browser":"npm run browserbundle && echo '; window.QuillDeltaToHtmlConverter = window.QuillDeltaToHtmlConverter ? window.QuillDeltaToHtmlConverter.QuillDeltaToHtmlConverter : window.QuillDeltaToHtmlConverter; ' >> ./dist/browser/QuillDeltaToHtmlConverter.bundle.js ","build":"./node_modules/typescript/bin/tsc && npm run browser ","test":"./node_modules/nyc/bin/nyc.js ./node_modules/mocha/bin/mocha --require ts-node/register -b \"./test/**/*.ts\" ","coverage":"./node_modules/nyc/bin/nyc.js report --reporter=text-lcov | coveralls ","coveragehtml":"./node_modules/nyc/bin/nyc.js report --reporter=html "},"repository":{"type":"git","url":"git+ssh://git@github.com/nozer/quill-delta-to-html.git"},"keywords":["quill","delta","html"],"author":{"name":"Nihat Özer","email":"nihatforweb@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/nozer/quill-delta-to-html/issues"},"homepage":"https://github.com/nozer/quill-delta-to-html#readme","nyc":{"include":["src/**/*.ts"],"exclude":["typings","src/main.ts","**/*.d.ts"],"extension":[".ts"],"require":["ts-node/register"],"reporter":["json","html"],"all":true},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"directories":{"test":"test"},"gitHead":"9fff59a906675997fa8e50c92b1e69ed6fc1399d","_id":"@ahmgeeks/quill-delta-to-html@0.12.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-GBZH2iHI2qs2sL8Pb/fhI+aGT3pR+h6T7k9qXx/uirUxoGQPBPTXmXfJKhZdaZfVFwDruHb72M7HUUI0ofmi5Q==","shasum":"5cca826289c1a0a46f6038209a8f297dc441620b","tarball":"https://registry.npmjs.org/@ahmgeeks/quill-delta-to-html/-/quill-delta-to-html-0.12.2.tgz","fileCount":89,"unpackedSize":365571,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICv2UMEOkm1EpvljJcdTkSStu+spydjXlXwUuLLjmwp1AiBITM6QcBDS8C1Wv6O05nBKQXS2lyfbIxKIfxD0+2vvxg=="}]},"_npmUser":{"name":"ahmgeek","email":"tolpa1@gmail.com"},"maintainers":[{"name":"ahmgeek","email":"tolpa1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-delta-to-html_0.12.2_1699158662907_0.1788008228117961"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-05T04:28:45.051Z","0.12.1":"2023-11-05T04:28:45.349Z","modified":"2023-11-05T04:31:03.460Z","0.12.2":"2023-11-05T04:31:03.223Z"},"maintainers":[{"name":"ahmgeek","email":"tolpa1@gmail.com"}],"description":"Converts Quill's delta ops to HTML","homepage":"https://github.com/nozer/quill-delta-to-html#readme","keywords":["quill","delta","html"],"repository":{"type":"git","url":"git+ssh://git@github.com/nozer/quill-delta-to-html.git"},"author":{"name":"Nihat Özer","email":"nihatforweb@gmail.com"},"bugs":{"url":"https://github.com/nozer/quill-delta-to-html/issues"},"license":"ISC","readme":"[](https://travis-ci.org/nozer/quill-delta-to-html) \n[](https://coveralls.io/github/nozer/quill-delta-to-html?branch=master)\n\n\n# Quill Delta to HTML Converter #\nConverts [Quill's](https://quilljs.com) [Delta](https://quilljs.com/docs/delta/) format to HTML (insert ops only) with properly nested lists.\n\nYou can try a live demo of the conversion by opening the `demo-browser.html` file after cloning the repo.\n\n## Breaking change: `import/require` has changed as of `v0.10.0`. See Usage below ##\n\n\n\n## Quickstart ## \n\nInstallation\n```\nnpm install quill-delta-to-html\n```\n\nUsage\n```javascript\nvar QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;\n\n// TypeScript / ES6:\n// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; \n\nvar deltaOps = [\n {insert: \"Hello\\n\"},\n {insert: \"This is colorful\", attributes: {color: '#f00'}}\n];\n\nvar cfg = {};\n\nvar converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);\n\nvar html = converter.convert(); \n```\n\n## Configuration ## \n\n`QuillDeltaToHtmlConverter` accepts a few configuration options as shown below:\n\n|Option | Type | Default | Description \n|---|---|---|---|\n|`paragraphTag`| string | 'p' | Custom tag to wrap inline html elements|\n|`encodeHtml`| boolean | true | If true, `<, >, /, ', \", &` characters in content will be encoded.|\n|`classPrefix`| string | 'ql' | A css class name to prefix class generating styles such as `size`, `font`, etc. |\n|`inlineStyles`| boolean or object | false | If true or an object, use inline styles instead of classes. See Rendering Inline Styles section below for using an object |\n|`multiLineBlockquote`| boolean | true | Instead of rendering multiple `blockquote` elements for quotes that are consecutive and have same styles(`align`, `indent`, and `direction`), it renders them into only one|\n|`multiLineHeader`| boolean | true | Same deal as `multiLineBlockquote` for headers|\n|`multiLineCodeblock`| boolean | true | Same deal as `multiLineBlockquote` for code-blocks|\n|`multiLineParagraph`| boolean | true | Set to false to generate a new paragraph tag after each enter press (new line)|\n|`linkRel`| string | none generated | Specifies a value to put on the `rel` attr on all links. This can be overridden by an individual link op by specifying the `rel` attribute in the respective op's attributes|\n|`linkTarget`| string | '_blank' | Specifies target for all links; use `''` (empty string) to not generate `target` attribute. This can be overridden by an individual link op by specifiying the `target` with a value in the respective op's attributes.|\n|`allowBackgroundClasses`| boolean | false | If true, css classes will be added for background attr|\n|`urlSanitizer`| function `(url: string): string \\| undefined` | undefined | A function that is called once per url in the ops (image, video, link) for you to do custom sanitization. If your function returns a string, it is assumed that you sanitized the url and no further sanitization will be done by the library; when anything other than a string is returned (e.g. `undefined`), it is assumed that no sanitization has been done and the library's own function will be used to clean up the url|\n|`customTag`| function `(format: string, op: DeltaInsertOp): string \\| undefined` | undefined | Callback allows to provide custom html tag for some format|\n|`customTagAttributes`| function `(op: DeltaInsertOp): { [key: string]: string } \\| undefined` | undefined | Allows to provide custom html tag attributes|\n|`customCssClasses`| function `(op: DeltaInsertOp): string \\| string[] \\| undefined` | undefined | Allows to provide custom css classes|\n|`customCssStyles`| function `(op: DeltaInsertOp): string \\| string[] \\| undefined` | undefined | Allows to provide custom css styles|\n\n\n## Rendering Quill Formats ##\n\nYou can customize the rendering of Quill formats by registering to the render events before calling the `convert()` method. \n\nThere are `beforeRender` and `afterRender` events and they are called multiple times before and after rendering each group. A group is one of:\n\n- continuous sets of inline elements\n- a video element\n- list elements\n- block elements (header, code-block, blockquote, align, indent, and direction)\n\n`beforeRender` event is called with raw operation objects for you to generate and return your own html. If you return a `falsy` value, system will return its own generated html. \n\n`afterRender` event is called with generated html for you to inspect, maybe make some changes and return your modified or original html.\n\n```javascript\n\nconverter.beforeRender(function(groupType, data){\n // ... generate your own html \n // return your html\n});\nconverter.afterRender(function(groupType, htmlString){\n // modify if you wish\n // return the html\n});\n\nhtml = converter.convert();\n\n```\n\nFollowing shows the parameter formats for `beforeRender` event: \n\n\n\n|groupType|data|\n|---|---|\n|`video`|{op: `op object`}|\n|`block`|{op: `op object`: ops: Array<`op object`>}|\n|`list`| {items: Array<{item: `block`, innerList: `list` or `null` }> }|\n|`inline-group`|{ops: Array<`op object`>}|\n\n`op object` will have the following format: \n\n```javascript\n{\n insert: {\n type: '' // one of 'text' | 'image' | 'video' | 'formula',\n value: '' // some string value \n }, \n attributes: {\n // ... quill delta attributes \n }\n}\n```\n\n## Rendering Inline Styles ##\n\nIf you are rendering to HTML that you intend to include in an email, using classes and a style sheet are not recommended, as [not all browsers support style sheets](https://www.campaignmonitor.com/css/style-element/style-in-head/). quill-delta-to-html supports rendering inline styles instead. The easiest way to enable this is to pass the option `inlineStyles: true`.\n\nYou can customize styles by passing an object to `inlineStyles` instead:\n\n```javascript\ninlineStyles: {\n font: {\n 'serif': 'font-family: Georgia, Times New Roman, serif',\n 'monospace': 'font-family: Monaco, Courier New, monospace'\n },\n size: {\n 'small': 'font-size: 0.75em',\n 'large': 'font-size: 1.5em',\n 'huge': 'font-size: 2.5em'\n },\n indent: (value, op) => {\n var indentSize = parseInt(value, 10) * 3;\n var side = op.attributes['direction'] === 'rtl' ? 'right' : 'left';\n return 'padding-' + side + ':' + indentSize + 'em';\n },\n direction: (value, op) => {\n if (value === 'rtl') {\n return 'direction:rtl' + ( op.attributes['align'] ? '' : '; text-align: inherit' );\n } else {\n return '';\n }\n }\n};\n```\n\nKeys to this object are the names of attributes from Quill. The values are either a simple lookup table (like in the 'font' example above) used to map values to styles, or a `fn(value, op)` which returns a style string.\n\n## Rendering Custom Blot Formats ##\n\nYou need to tell system how to render your custom blot by registering a renderer callback function to `renderCustomWith` method before calling the `convert()` method. \n\nIf you would like your custom blot to be rendered as a block (not inside another block or grouped as part of inlines), then add `renderAsBlock: true` to its attributes. \n\nExample:\n```javascript \nlet ops = [\n {insert: {'my-blot': {id: 2, text: 'xyz'}}, attributes: {renderAsBlock: true|false}}\n];\n\nlet converter = new QuillDeltaToHtmlConverter(ops);\n\n// customOp is your custom blot op\n// contextOp is the block op that wraps this op, if any. \n// If, for example, your custom blot is located inside a list item,\n// then contextOp would provide that op. \nconverter.renderCustomWith(function(customOp, contextOp){\n if (customOp.insert.type === 'my-blot') {\n let val = customOp.insert.value;\n return `${val.text}`;\n } else {\n return 'Unmanaged custom blot!';\n }\n});\n\nhtml = converter.convert();\n```\n`customOp object` will have the following format: \n\n```javascript\n{\n insert: {\n type: string //whatever you specified as key for insert, in above example: 'my-blot'\n value: any // value for the custom blot \n }, \n attributes: {\n // ... any attributes custom blot may have\n }\n}\n```\n\n## Advanced Custom Rendering Using Grouped Ops ##\n\nIf you want to do the full rendering yourself, you can do so \nby getting the processed & grouped ops.\n\n```javascript\nlet groupedOps = converter.getGroupedOps();\n```\nEach element in groupedOps array will be an instance of the \nfollowing types: \n\n|type|properties|\n|---|---|\n|`InlineGroup`|ops: Array<`op object`>|\n|`VideoItem`|op: `op object`|\n|`BlockGroup`|op: `op object`, ops: Array<`op object`>|\n|`ListGroup`|items: Array<`ListItem`>|\n||ListItem: {item:`BlockGroup`, innerList:`ListGroup`}|\n|`BlotBlock`|op: `op object`|\n\n`BlotBlock` represents custom blots with `renderAsBlock:true` property pair in its attributes\n\nSee above for `op object` format. \n","readmeFilename":"README.md"}