1:HL["/_next/static/media/2d141e1a38819612-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 2:HL["/_next/static/css/cf073754662ee1dd.css","style",{"crossOrigin":""}] 0:["PKb518kvGJ1fSv37ZR9-f",[[["",{"children":["blog",{"children":[["slug","integrate-react-quill-with-antd-forms","d"],{"children":["__PAGE__?{\"slug\":\"integrate-react-quill-with-antd-forms\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cf073754662ee1dd.css","precedence":"next","crossOrigin":""}]],"$L4"]]]] 5:I[7221,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"ThemeProvider"] 6:I[2920,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"Header"] 7:I[6899,[],""] 8:I[345,[],""] 9:I[9311,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""] c:I[9328,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"GoogleAnalytics"] d:I[5097,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""] 4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Integrating React Quill Editor with Ant Design Forms | Adarsha Acharya"}],["$","meta","2",{"name":"description","content":"Integrate rich text editor react-quill with popular React UI framework Ant Design."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"Integrating React Quill Editor with Ant Design Forms"}],["$","meta","7",{"property":"og:description","content":"Integrate rich text editor react-quill with popular React UI framework Ant Design."}],["$","meta","8",{"property":"og:url","content":"https://adarsha.dev/blog/integrate-react-quill-with-antd-forms"}],["$","meta","9",{"property":"og:site_name","content":"Adarsha Acharya"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://adarsha.dev/og?title=Integrating%20React%20Quill%20Editor%20with%20Ant%20Design%20Forms"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"Integrating React Quill Editor with Ant Design Forms"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"property":"article:published_time","content":"2021-01-13\r"}],["$","meta","17",{"property":"article:author","content":"Adarsha Acharya"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Integrating React Quill Editor with Ant Design Forms"}],["$","meta","20",{"name":"twitter:description","content":"Integrate rich text editor react-quill with popular React UI framework Ant Design."}],["$","meta","21",{"name":"twitter:image","content":"https://adarsha.dev/og?title=Integrating%20React%20Quill%20Editor%20with%20Ant%20Design%20Forms"}],["$","meta","22",{"name":"next-size-adjust"}]] 3:[null,["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/_static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/_static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/_static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/_static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/_static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","meta",null,{"name":"google-site-verification","content":"br9AjaAyJgS4OVigpXtHmm2DwdzuzMqzpK4G77lD2TY"}]],["$","body",null,{"className":"mx-auto min-h-screen max-w-3xl antialiased dark:bg-zinc-950 dark:text-gray-100 __className_0aa4ae","children":[["$","$L5",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","main",null,{"className":"mx-4 px-2 md:px-0 lg:mx-auto flex flex-col justify-between min-h-screen","children":[["$","$L6",null,{}],["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","$L9",null,{"href":"/","className":"underline","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children",["slug","integrate-react-quill-with-antd-forms","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La","$Lb",null],"segment":"__PAGE__?{\"slug\":\"integrate-react-quill-with-antd-forms\"}"},"styles":[]}],"segment":["slug","integrate-react-quill-with-antd-forms","d"]},"styles":[]}],"segment":"blog"},"styles":[]}],["$","footer",null,{"className":"flex justify-center align-center pt-10 pb-5 h-20px","children":["$","p",null,{"className":"text-gray-500 dark:text-gray-400 text-sm","children":["© ",2024," ",["$","a",null,{"href":"https://x.com/adarsha_ach","target":"_blank","rel":"noopener noreferrer","children":"Adarsha Acharya."}],"  All rights reserved."]}]}]]}],null]}],["$","$Lc",null,{"gaId":"$undefined"}],["$","$Ld",null,{"async":true,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-undefined","crossOrigin":"anonymous","strategy":"afterInteractive"}]]}]]}],null] e:I[3364,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""] f:I[5900,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"Image"] 10:I[419,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"BlogComments"] b:["$","section",null,{"children":[["$","h1",null,{"className":"text-2xl font-bold tracking-tighter","children":["$","$Le",null,{"children":"Integrating React Quill Editor with Ant Design Forms"}]}],["$","div",null,{"className":"mb-8 mt-2 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400","children":["$","p",null,{"children":["January 13, 2021"," - ","3 min read"]}]}],[["$","article",null,{"className":"prose prose-neutral dark:prose-invert prose-quoteless max-w-none","children":[["$","p",null,{"children":["Ant design ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://ant.design/docs/react/recommendation","children":"docs"}]," recommends the react-quill editor as the rich text editor to be integrated with the ant design forms."]}],"\n",["$","p",null,{"children":"There are majorly two task to do. First one is making the React Quill Editor controlled component and second one is to integrate it with AntD forms by using values from the react-quill editor."}],"\n",["$","h3",null,{"id":"requirements-","children":[["$","a",null,{"className":"anchor","href":"#requirements-","children":["$","span",null,{"className":"icon icon-link"}]}],"Requirements :"]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["React project generated using ",["$","code",null,{"children":"create-react-app"}]]}],"\n",["$","li",null,{"children":[["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/ant-design/ant-design","children":"antd"}]," >= \"^4.7.3\""]}],"\n"]}],"\n",["$","p",null,{"children":["First let's install ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/zenoamaro/react-quill","children":"React Quill"}]," package. By the time I'm writing this post it's version 1.3.5."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"install"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"react-quill"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--save"}]]}]}]}]}],"\n",["$","h3",null,{"id":"standalone-react-quill-editor-component","children":[["$","a",null,{"className":"anchor","href":"#standalone-react-quill-editor-component","children":["$","span",null,{"className":"icon icon-link"}]}],"Standalone React Quill Editor Component"]}],"\n",["$","p",null,{"children":"Let's make standalone React Quill editor component so that we can reuse it again, may be while posting new post or comment."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// TextEditor.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"ReactQuill"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-quill\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-quill/dist/quill.snow.css\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"modules"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"toolbar"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" [{ "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"header"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}],["$","span",null,{"style":{"color":"#D19A66"},"children":"1"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"2"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"false"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"] }],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"bold\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"italic\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"underline\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"strike\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"blockquote\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"list"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"ordered\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"list"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"bullet\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"indent"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"-1\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"indent"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"+1\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ],"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"link\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"code\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"clean\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ],"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"formats"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"header\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"bold\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"italic\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"underline\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"strike\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"blockquote\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"list\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"bullet\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"indent\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"link\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"code\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"];"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"interface"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"OnChangeHandler"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"e"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"any"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"): "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"void"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"type"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"string"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"placeholder"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"string"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"onChange"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"OnChangeHandler"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"TextEditor"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"FC"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"> "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ({ "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"onChange"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"placeholder"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }) "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <>"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"ReactQuill"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"theme"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"snow\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"value"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"||"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"\""}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"modules"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"modules"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"formats"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"formats"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"onChange"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"onChange"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"placeholder"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"placeholder"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"TextEditor"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["We can customize the toolbar by adding the modules and toolbar array. Learn more about it ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/zenoamaro/react-quill#custom-toolbar","children":"here"}],"."]}],"\n",["$","h3",null,{"id":"integrate-with-ant-design-forms","children":[["$","a",null,{"className":"anchor","href":"#integrate-with-ant-design-forms","children":["$","span",null,{"className":"icon icon-link"}]}],"Integrate with Ant Design Forms"]}],"\n",["$","p",null,{"children":["We are using the above ",["$","code",null,{"children":"TextEditor"}]," component in the component/page where we are creating the post."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// Post.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Button"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Input"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Typography"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"antd\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"TextEditor"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"components/TextEditor\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useState"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Item"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"TextArea"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Input"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Title"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Typography"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"interface"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"IPostCreate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"body"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"string"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"PostCreate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"] "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useForm"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"onSubmit"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"values"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"IPostCreate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// logic to submit form to server"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"console"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"log"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"values"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"body"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"resetFields"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <>"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Title"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"level"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#D19A66"},"children":"5"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Your Post"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"layout"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"vertical\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"form"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"form"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"onFinish"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"onSubmit"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Item"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"name"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"body\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"rules"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"["}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"required"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"true"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"message"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"Please enter body of post\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ]"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" >"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"/* @ts-ignore */"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"TextEditor"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Item"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Button"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"htmlType"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"submit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"type"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"primary\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" Submit"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":["The above code is just the basic Form component taken from AntD docs. Main thing is that we are now wrapping the ",["$","code",null,{"children":"TextEditor"}]," component with the ",["$","code",null,{"children":"Item"}]," component imported from the ",["$","code",null,{"children":"antd"}]," forms. It also covers basic client side validation to check if the form field is empty or not.❓"]}],"\n",["$","p",null,{"children":["Here, we are just logging the value of editor in the console, in real-world application we add logic to submit the form values to the server there. And finally reseting the fields using ",["$","code",null,{"children":"form.resetFields()"}],". You can add more ",["$","code",null,{"children":""}]," component inside the form it will get the value as usual."]}],"\n",["$","p",null,{"children":"The final output will look like this : 👇"}],"\n",["$","$Lf",null,{"src":"/_static/blogs/integrate-react-quill-with-antd-forms/output.png","width":1280,"height":720,"alt":"quill editor","className":"rounded-lg"}],"\n",["$","p",null,{"children":"That's it ! 👋"}],"\n",["$","p",null,{"children":"Ant Design has been my go to framework for building the React Application. I will post more tutorials on it if I find anything interesting on Ant Design."}]]}],["$","$L10",null,{}]]]}] a:null