1"use strict";(globalThis.webpackChunkdraftail_org=globalThis.webpackChunkdraftail_org||[]).push([[5104],{20030:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>i,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"introduction/decorators","title":"Decorators","description":"Those extensions require a good understanding of the Draft.js API.","source":"@site/docs/introduction/decorators.md","sourceDirName":"introduction","slug":"/introduction/decorators","permalink":"/docs/next/introduction/decorators","draft":false,"unlisted":false,"editUrl":"https://github.com/thibaudcolas/draftail.org/edit/main/docs/introduction/decorators.md","tags":[],"version":"current","lastUpdatedBy":"Thi","lastUpdatedAt":1791068756000,"frontMatter":{"id":"decorators","title":"Decorators"},"sidebar":"docs","previous":{"title":"Entities","permalink":"/docs/next/introduction/entities"},"next":{"title":"Arbitrary controls","permalink":"/docs/next/introduction/arbitrary-controls"}}');var n=o(74848),s=o(28453);const a={id:"decorators",title:"Decorators"},c=void 0,i={},d=[{value:"Examples",id:"examples",level:2}];function l(e){const t={a:"a",blockquote:"blockquote",code:"code",h2:"h2",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsxs)(t.p,{children:["Those extensions require a good understanding of the ",(0,n.jsx)(t.a,{href:"/docs/next/draft-js/quickstart/overview",children:"Draft.js"})," API."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Custom decorators follow the Draft.js ",(0,n.jsx)(t.a,{href:"/docs/next/draft-js/advanced-topics/decorators#compositedecorator",children:"CompositeDecorator"})," API. They can be specified as an array via the ",(0,n.jsx)(t.a,{href:"/docs/next/reference/api#decorators-docs-decorators",children:(0,n.jsx)(t.code,{children:"decorators"})})," prop of the editor, with ",(0,n.jsx)(t.code,{children:"strategy"})," and ",(0,n.jsx)(t.code,{children:"component"})," attributes."]}),"\n",(0,n.jsx)(t.p,{children:"A very basic example would be a hashtag decorator:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'decorators={[\n {\n strategy: (block, callback) => {\n const text = block.getText();\n let matches;\n while ((matches = /#[\\w]+/g.exec(text)) !== null) {\n callback(matches.index, matches.index + matches[0].length);\n }\n },\n component: ({ children }) => (\n <span style={{ color: "#007d7e" }}>{children}</span>\n ),\n },\n]}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Other more advanced examples could share state between the strategy and its rendering. For example, to build ",(0,n.jsx)(t.a,{href:"https://github.com/wagtail/draftail/blob/c22d867a6b57dc45144b9af3202c08873c24258b/examples/components/PrismDecorator.js",children:"syntax highlighting for code blocks"})," in rich text."]}),"\n",(0,n.jsx)(t.h2,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)("iframe",{src:"https://demo.draftail.org/storybook/iframe.html?id=docs--decorators",class:"iframe iframe--docs-200"})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},28453:(e,t,o)=>{o.d(t,{R:()=>a,x:()=>c});var r=o(96540);const n={},s=r.createContext(n);function a(e){const t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.