{"id":13758289,"url":"https://github.com/Soreine/draft-js-simpledecorator","last_synced_at":"2025-05-10T07:30:49.078Z","repository":{"id":57215977,"uuid":"60839171","full_name":"Soreine/draft-js-simpledecorator","owner":"Soreine","description":"Create a Draft.Decorator simply, with more flexibility than Draft.CompositeDecorator","archived":false,"fork":false,"pushed_at":"2017-02-13T09:16:32.000Z","size":8,"stargazers_count":25,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-06T17:12:24.291Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Soreine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-10T10:09:55.000Z","updated_at":"2022-09-18T16:05:17.000Z","dependencies_parsed_at":"2022-08-26T13:31:44.916Z","dependency_job_id":null,"html_url":"https://github.com/Soreine/draft-js-simpledecorator","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Soreine%2Fdraft-js-simpledecorator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Soreine%2Fdraft-js-simpledecorator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Soreine%2Fdraft-js-simpledecorator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Soreine%2Fdraft-js-simpledecorator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Soreine","download_url":"https://codeload.github.com/Soreine/draft-js-simpledecorator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253379464,"owners_count":21899259,"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-03T13:00:24.636Z","updated_at":"2025-05-10T07:30:48.867Z","avatar_url":"https://github.com/Soreine.png","language":"JavaScript","funding_links":[],"categories":["Common Utilities"],"sub_categories":[],"readme":"# draft-js-simpledecorator\n\n[![NPM version](https://badge.fury.io/js/draft-js-simpledecorator.svg)](http://badge.fury.io/js/draft-js-simpledecorator)\n\n#### Description\n\nCreate some `Draft.Decorators` as simply as with `Draft.CompositeDecorator`, but with the possibility to pass custom `props` to your decorating component.\n\n#### Why ?\n\nWhen making `Decorators`, you normally either implement the [`DecoratorType` interface](interface) yourself (tedious), or use the convenient [`Draft.CompositeDecorator`](composite). `Draft.CompositeDecorator` asks to define a `strategy` and to provide a rendering `component`. The `strategy` function simply tells what part of the document should be decorated by the `component`. But **you have no way to pass custom `props` to the `component`**.\n\n`SimpleDecorator` implements the `DecoratorType` interface for you, and still offers the flexibility of passing custom `props` in your `strategy`.\n\n#### Installation\n\n```\n$ npm install draft-js-simpledecorator\n```\n\n#### Usage\n\nThis module uses the same convention than `Draft.CompositeDecorator`, and ask to provide a `strategy` and a `component`.\n\n```js\nvar Draft = require('draft-js');\nvar SimpleDecorator = require('draft-js-simpledecorator');\n\nvar decorator = new SimpleDecorator(\n    function strategy(contentBlock, callback, contentState) {\n        // Decorate any span of text in the content block,\n        // providing custom props!\n        var customProps = {};\n        callback(start, end, customProps);\n    },\n\n    function component(props) {\n        // return some React.Component\n    }\n);\n\nvar editorState = Draft.EditorState.createEmpty(decorator)\n```\n\n#### Example: Coloring hexadecimal color codes\n\nBelow is an example decorator that finds any _hexadecimal color code_ (ex: `#ffca40`), and color them accordingly:\n\n```jsx\nconst hexColorDecorator = new SimpleDecorator(\n\n    function strategy(contentBlock, callback, contentState) {\n        const text = contentBlock.getText()\n\n        // Match text like #ac00ff and #EEE\n        let HEX_COLOR = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g\n\n        // For all Hex color matches\n        let match\n        while ((match = HEX_COLOR.exec(text)) !== null) {\n            // Decorate the color code\n            let colorText = match[0]\n            let start = match.index\n            let end = start + colorText.length\n            let props = {\n                color: colorText\n            }\n            callback(start, end, props)\n        }\n    },\n\n    /**\n     * @prop {String} color\n     */\n    function component(props) {\n        // Colorize the text with the given color\n        return \u003cspan style={{ color: props.color }}\u003e{ props.children }\u003c/span\u003e\n    }\n)\n```\n\nTo do that in Draft, you would not be able to use `Draft.CompositeDecorator`. Instead, you would have to re-implement the [`DecoratorType` interface](interface) yourself.\n\n#### See also\n\n`Draft.CompositeDecorator` permits to define multiple decorators. To do so with `SimpleDecorator`, you can use [MultiDecorators](https://github.com/SamyPesse/draft-js-multidecorators), which allows to easily compose any decorator.\n\n[interface]: https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecoratorType.js\n[composite]: https://facebook.github.io/draft-js/docs/api-reference-composite-decorator.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSoreine%2Fdraft-js-simpledecorator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSoreine%2Fdraft-js-simpledecorator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSoreine%2Fdraft-js-simpledecorator/lists"}