1"use strict";(globalThis.webpackChunkdraftail_org=globalThis.webpackChunkdraftail_org||[]).push([[961],{4624:t=>{t.exports=JSON.parse('{"permalink":"/blog/2018/03/16/introducing-draft-js-in-wagtail","source":"@site/blog/2018-03-16-introducing-draft-js-in-wagtail.md","title":"Introducing Draft.js in Wagtail","description":"Here is a talk I gave at Wagtail Space 2018. The video recording is available on YouTube. The talk was 90% demos so the purpose of this presentation is to share the links.","date":"2018-03-16T00:00:00.000Z","tags":[],"readingTime":1.69,"hasTruncateMarker":true,"authors":[{"name":"Thibaud Colas","url":"https://thib.me/","socials":{"x":"https://x.com/thibaud_colas","github":"https://github.com/thibaudcolas"},"imageURL":"https://avatars1.githubusercontent.com/u/877585?s=460&v=4","key":"thibaudcolas","page":null}],"frontMatter":{"title":"Introducing Draft.js in Wagtail","authors":"thibaudcolas"},"unlisted":false,"prevItem":{"title":"Live coding \u2013 Draft.js copy-paste fix","permalink":"/blog/2018/06/07/live-coding-draftjs-copy-paste-fix"},"nextItem":{"title":"Rethinking rich text pipelines with Draft.js","permalink":"/blog/2018/03/13/rethinking-rich-text-pipelines-with-draft-js"}}')},8158:(t,i,e)=>{e.r(i),e.d(i,{assets:()=>h,contentTitle:()=>l,default:()=>c,frontMatter:()=>a,metadata:()=>s,toc:()=>o});var s=e(4624),n=e(4848),r=e(8453);const a={title:"Introducing Draft.js in Wagtail",authors:"thibaudcolas"},l=void 0,h={authorsImageUrls:[void 0]},o=[{value:"Demos! \ud83c\udf08",id:"demos-",level:2},{value:"Draftail",id:"draftail",level:3},{value:"Draft.js plugins",id:"draftjs-plugins",level:3},{value:"More Draft.js",id:"more-draftjs",level:3},{value:"What next",id:"what-next",level:2}];function d(t){const i={a:"a",blockquote:"blockquote",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(i.p,{children:["Here is a talk I gave at ",(0,n.jsx)(i.a,{href:"https://www.wagtail.space",children:"Wagtail Space 2018"}),". The video recording is available ",(0,n.jsx)(i.a,{href:"https://www.youtube.com/watch?v=lh9nmN1mzwQ&t=2618s",children:"on YouTube"}),". The talk was 90% demos so the purpose of this presentation is to share the links."]}),"\n",(0,n.jsx)("a",{href:"https://www.youtube.com/watch?v=mf8AS5EwHvc",children:(0,n.jsx)("img",{src:"https://i.ytimg.com/vi_webp/mf8AS5EwHvc/maxresdefault.webp",alt:"Introducing Draft.js in Wagtail \u2013 Wagtail Space 2018",width:560,height:315})}),"\n",(0,n.jsxs)(i.p,{children:["Hi \ud83d\udc4b, I'm ",(0,n.jsx)(i.a,{href:"https://thib.me/",children:"Thibaud"}),"!."]}),"\n",(0,n.jsx)(i.p,{children:"Why this happened, and how \u2013 read the following blog posts:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/blog/2018/03/05/why-wagtail-new-editor-is-built-with-draft-js",children:"Why Wagtail\u2019s new editor is built with Draft.js"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/blog/2018/03/13/rethinking-rich-text-pipelines-with-draft-js",children:"Rethinking rich text pipelines with Draft.js"})}),"\n",(0,n.jsx)(i.li,{children:"(UI/UX blog post on its way)"}),"\n"]}),"\n",(0,n.jsx)(i.hr,{}),"\n",(0,n.jsx)(i.h2,{id:"demos-",children:"Demos! \ud83c\udf08"}),"\n",(0,n.jsxs)(i.blockquote,{children:["\n",(0,n.jsxs)(i.p,{children:["Demos built with the ",(0,n.jsx)(i.a,{href:"https://draftjs.org/",children:"Draft.js"})," framework, not (only) with Wagtail\u2019s editor."]}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"draftail",children:"Draftail"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://playground.draftail.org/",children:"Draftail Playground"})}),"\n",(0,n.jsxs)(i.li,{children:["Rich text formats: ",(0,n.jsx)(i.a,{href:"https://www.draftail.org/",children:"Draftail"})]}),"\n",(0,n.jsxs)(i.li,{children:["Copy-paste: ",(0,n.jsx)(i.a,{href:"https://thibaudcolas.github.io/draftjs-filters/",children:"Draft.js filters"})]}),"\n",(0,n.jsxs)(i.li,{children:["More formats: ",(0,n.jsx)(i.a,{href:"https://www.draftail.org/examples",children:"Draftail examples"})]}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"draftjs-plugins",children:"Draft.js plugins"}),"\n",(0,n.jsxs)(i.blockquote,{children:["\n",(0,n.jsx)(i.p,{children:"High quality plugins with great UX on top of Draft.js."}),"\n"]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://www.draft-js-plugins.com/plugin/emoji",children:"\ud83d\ude04 emojis!"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://www.draft-js-plugins.com/plugin/mention",children:"@mentions"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://www.draft-js-plugins.com/plugin/video",children:"Videos (embeds)"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://www.draft-js-plugins.com/plugin/counter",children:"Counter"})}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"more-draftjs",children:"More Draft.js"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://www.draft-js-plugins.com/plugin/sticker",children:"Stickers"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://efloti.github.io/draft-js-mathjax-plugin/",children:"Mathjax"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://letranloc.github.io/draft-js-katex-plugin/",children:"KaTeX"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://ngs.github.io/draft-js-markdown-shortcuts-plugin/",children:"Markdown shortcuts"})}),"\n"]}),"\n",(0,n.jsx)(i.hr,{}),"\n",(0,n.jsx)(i.h2,{id:"what-next",children:"What next"}),"\n",(0,n.jsx)(i.p,{children:"Blog posts to learn more:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/blog/2018/03/05/why-wagtail-new-editor-is-built-with-draft-js",children:"Why Wagtail\u2019s new editor is built with Draft.js"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/blog/2018/03/13/rethinking-rich-text-pipelines-with-draft-js",children:"Rethinking rich text pipelines with Draft.js"})}),"\n",(0,n.jsx)(i.li,{children:"(UI/UX blog post on its way)"}),"\n"]}),"\n",(0,n.jsx)(i.p,{children:"How you can help:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:["Try out the editor, inside and ",(0,n.jsx)(i.a,{href:"hhttps://www.draftail.org/",children:"outside of Wagtail"})]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsxs)(i.strong,{children:["Try to ",(0,n.jsx)(i.a,{href:"hhttps://www.draftail.org/",children:"break it"})]})," (and report issues \ud83d\ude04)"]}),"\n",(0,n.jsxs)(i.li,{children:["Review and improve the ",(0,n.jsx)(i.a,{href:"/docs/user-guide",children:"user guide"})]}),"\n"]}),"\n",(0,n.jsxs)(i.p,{children:["The presentation was originally available on ",(0,n.jsx)(i.a,{href:"http://playground.draftail.org/",children:"playground.draftail.org/"}),"."]})]})}function c(t={}){const{wrapper:i}={...(0,r.R)(),...t.components};return i?(0,n.jsx)(i,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}},8453:(t,i,e)=>{e.d(i,{R:()=>a,x:()=>l});var s=e(6540);const n={},r=s.createContext(n);function a(t){const i=s.useContext(r);return s.useMemo(function(){return"function"==typeof t?t(i):{...i,...t}},[i,t])}function l(t){let i;return i=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:a(t.components),s.createElement(r.Provider,{value:i},t.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.