1"use strict";(globalThis.webpackChunkdraftail_org=globalThis.webpackChunkdraftail_org||[]).push([[2831],{8380:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"reference/i18n","title":"i18n","description":"The editor comes with default labels in english, but all are overridable.","source":"@site/versioned_docs/version-2.0.0/reference/i18n.md","sourceDirName":"reference","slug":"/reference/i18n","permalink":"/docs/reference/i18n","draft":false,"unlisted":false,"editUrl":"https://github.com/thibaudcolas/draftail.org/edit/main/versioned_docs/version-2.0.0/reference/i18n.md","tags":[],"version":"2.0.0","lastUpdatedBy":"Thibaud Colas","lastUpdatedAt":1763729128000,"frontMatter":{"id":"i18n","title":"i18n"},"sidebar":"docs","previous":{"title":"Customising toolbars","permalink":"/docs/reference/customising-toolbars"},"next":{"title":"Browser support and polyfills","permalink":"/docs/reference/browser-support"}}');var r=n(4848),o=n(8453);const s={id:"i18n",title:"i18n"},l=void 0,a={},c=[{value:"Example",id:"example",level:2}];function d(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"The editor comes with default labels in english, but all are overridable."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["For blocks, styles, and entities, use the ",(0,r.jsx)(t.code,{children:"label"})," and-or ",(0,r.jsx)(t.code,{children:"description"})," prop to set text in the right language."]}),"\n",(0,r.jsxs)(t.li,{children:["For boolean controls (",(0,r.jsx)(t.code,{children:"enableLineBreak"}),", etc), set instead an object with ",(0,r.jsx)(t.code,{children:"icon"}),", ",(0,r.jsx)(t.code,{children:"label"}),", ",(0,r.jsx)(t.code,{children:"description"})," props (all optional)."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Depending on the target language, you may also need to use the ",(0,r.jsx)(t.code,{children:"textDirectionality"})," prop (",(0,r.jsx)(t.code,{children:"LTR"})," or ",(0,r.jsx)(t.code,{children:"RTL"}),"). See the full ",(0,r.jsx)(t.a,{href:"https://draftjs.org/docs/api-reference-editor.html#textdirectionality",children:"Draft.js documentation"})," for more details."]}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsxs)(t.p,{children:["This example is built with ",(0,r.jsx)(t.a,{href:"https://github.com/yahoo/react-intl",children:"react-intl"}),", but the editor integration is completely agnostic of what solution you use."]}),"\n",(0,r.jsx)("iframe",{src:"https://demo.draftail.org/storybook/iframe.html?id=docs--i18n",class:"iframe iframe--docs-200"})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>l});var i=n(6540);const r={},o=i.createContext(r);function s(e){const t=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.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.