1"use strict";(globalThis.webpackChunkdraftail_org=globalThis.webpackChunkdraftail_org||[]).push([[1387],{2057:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>c,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"introduction/blocks","title":"Blocks","description":"Blocks provide structure to the content. They do not overlap \u2013 no content can be both a paragraph and a heading.","source":"@site/docs/introduction/blocks.md","sourceDirName":"introduction","slug":"/introduction/blocks","permalink":"/docs/next/introduction/blocks","draft":false,"unlisted":false,"editUrl":"https://github.com/thibaudcolas/draftail.org/edit/main/docs/introduction/blocks.md","tags":[],"version":"current","lastUpdatedBy":"Thibaud Colas","lastUpdatedAt":1763729128000,"frontMatter":{"id":"blocks","title":"Blocks"},"sidebar":"docs","previous":{"title":"Inline styles","permalink":"/docs/next/introduction/inline-styles"},"next":{"title":"Entities","permalink":"/docs/next/introduction/entities"}}');var s=t(4848),i=t(8453);const c={id:"blocks",title:"Blocks"},l=void 0,r={},a=[{value:"Built-in blocks",id:"built-in-blocks",level:2},{value:"Custom blocks",id:"custom-blocks",level:2},{value:"Examples",id:"examples",level:3},{value:"Custom block rendering",id:"custom-block-rendering",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Blocks provide structure to the content. They do not overlap \u2013 no content can be both a paragraph and a heading."}),"\n",(0,s.jsx)(n.h2,{id:"built-in-blocks",children:"Built-in blocks"}),"\n",(0,s.jsx)(n.p,{children:"To use built-in blocks, simply use their predefined type."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import { BLOCK_TYPE } from 'draftail';\n\nblockTypes={[\n {\n type: BLOCK_TYPE.BLOCKQUOTE,\n },\n]}\n"})}),"\n",(0,s.jsx)(n.p,{children:"Built-in blocks come with default labels or icons, styles, as well as an english description and often keyboard shortcuts."}),"\n",(0,s.jsx)(n.h2,{id:"custom-blocks",children:"Custom blocks"}),"\n",(0,s.jsxs)(n.p,{children:["Simple blocks are very easy to create. Add a new block type to ",(0,s.jsx)(n.a,{href:"/docs/next/reference/api#blocks-docs-blocks",children:(0,s.jsx)(n.code,{children:"blockTypes"})}),'. Here is an example, creating a "Tiny text" block:']}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"blockTypes={[\n {\n type: 'tiny-text',\n label: 'Tiny',\n },\n]}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You may also use CSS to style the block, via the ",(0,s.jsx)(n.code,{children:"Draftail-block--tiny-text"})," class:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".Draftail-block--tiny-text {\n font-size: 0.7625rem;\n font-style: italic;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"examples",children:"Examples"}),"\n",(0,s.jsx)(n.p,{children:"With a live editor,"}),"\n",(0,s.jsx)("iframe",{src:"https://demo.draftail.org/storybook/iframe.html?id=docs--blocks",class:"iframe iframe--docs-200"}),"\n",(0,s.jsx)(n.h2,{id:"custom-block-rendering",children:"Custom block rendering"}),"\n",(0,s.jsxs)(n.p,{children:["For even more advanced blocks requiring custom React components to render, please refer to the ",(0,s.jsx)(n.a,{href:"/docs/next/introduction/plugins",children:(0,s.jsx)(n.code,{children:"plugins"})})," API."]})]})}function u(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>l});var o=t(6540);const s={},i=o.createContext(s);function c(e){const n=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),o.createElement(i.Provider,{value:n},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.