PageSourceSearch

https://draft-js-rte-evanmorrison.netlify.app/

html draft-js-rte-evanmorrison.netlify.app collected 2026-10-03 10:39:50 UTC 32,475 bytes, 14 lines download raw bytes

1<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/>
2<!-- This site is hosted on Netlify. Anyone can build and deploy a site
3     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=33f71d51-c711-42c2-95f0-ba6d362abdaa
4     Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" data-optimized-fonts="true"/><title>Rich Text Editor</title><link rel="icon" href="/favicon.ico"/><meta name="next-head-count" content="5"/><link rel="preload" href="/_next/static/css/70de34300d757ebc.css" as="style"/><link rel="stylesheet" href="/_next/static/css/70de34300d757ebc.css" data-n-g=""/><noscript data-n-css=""></noscript>
4<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
4<script src="/_next/static/chunks/webpack-cb4d3eb341f63707.js" defer=""></script>
4<script src="/_next/static/chunks/framework-9fce4819d724ce59.js" defer=""></script>
4<script src="/_next/static/chunks/main-6bf6a39592d39e35.js" defer=""></script>
4<script src="/_next/static/chunks/pages/_app-f27d8bc5a97e32cd.js" defer=""></script>
4<script src="/_next/static/chunks/106-e7c9968bfd0cda97.js" defer=""></script>
4<script src="/_next/static/chunks/pages/index-f2103151bbfe6ee1.js" defer=""></script>
4<script src="/_next/static/yyPZIY8BCRZ2Cd6exh7wh/_buildManifest.js" defer=""></script>
4<script src="/_next/static/yyPZIY8BCRZ2Cd6exh7wh/_ssgManifest.js" defer=""></script>
4<script src="/_next/static/yyPZIY8BCRZ2Cd6exh7wh/_middlewareManifest.js" defer=""></script>
4<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap"/></head><body><div id="__next" data-reactroot=""><style data-emotion="css-global zwfok4-globalStyle">:root{font-family:Roboto,sans-serif;font-size:16px;color:#333333;}*{margin:0;padding:0;box-sizing:border-box;}*:focus{outline:0;}*:before,*:after{box-sizing:border-box;}p{margin:15px 0;}p~ul{margin:-15px 0 0 30px;}.list-options,.list-table,table.fixed{width:100%;}.ordered-list-item:before{content:counter(ol0) '. ';counter-increment:ol0;left:-36px;position:absolute;text-align:right;width:30px;}.ordered-list-item.depth1:before{content:counter(ol1, lower-alpha) ') ';counter-increment:ol1;}.ordered-list-item.depth2:before{content:counter(ol2, lower-roman) '. ';counter-increment:ol2;}.ordered-list-item.depth3:before{content:counter(ol3, upper-alpha) '. ';counter-increment:ol3;}.ordered-list-item.depth4:before{content:counter(ol4) '. ';counter-increment:ol4;}.list.depth0:first-of-type{counter-reset:ol0;}.list.depth1:first-of-type{counter-reset:ol1;}.list.depth2:first-of-type{counter-reset:ol2;}.list.depth3:first-of-type{counter-reset:ol3;}.list.depth4:first-of-type{counter-reset:ol4;}</style><div><style data-emotion="css 7t1xgk-Home">.css-7t1xgk-Home{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><section class="css-7t1xgk-Home"><style data-emotion="css 1stv3gn-Home">.css-1stv3gn-Home{width:1000px;padding:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><div class="css-1stv3gn-Home"><h1>Rich Text Editor</h1><hr/><p>This is a rich text editor I created. It is built on the <a href="https://draftjs.org">Draft.js</a> framework for React. The Github repo for this demo is <a href="https://github.com/EvanMorrison/draft-js-rte">here</a>. You can see other examples of my work at <a href="https://evmorrison.com">evmorrison.com</a>.</p><p>Notable features include:</p><ul><li>support for tables</li><li>insert and resize images</li><li>insert and edit links<br/><br/></li></ul><style data-emotion="css orxort">.css-orxort{margin:6px 0;}.css-orxort .checkbox-wrapper .info-note{margin-left:22px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}.css-orxort .checkbox-wrapper.size-lg .info-note{margin-left:28px;}</style><div class="form-field css-orxort e1vr6skj0"><style data-emotion="css 9s4c0y-LabelStyle">.css-9s4c0y-LabelStyle.form-label{display:block;line-height:16px;font-size:14px;color:#4f4f4f;text-align:left;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0;overflow-y:hidden;border-radius:2px;}.css-9s4c0y-LabelStyle.form-label .label-content{color:#4f4f4f;}.css-9s4c0y-LabelStyle.form-label .required-star{color:#E74C3C;padding-left:3px;}.css-9s4c0y-LabelStyle.form-label.disabled{opacity:0.6;}.css-9s4c0y-LabelStyle.form-label.error .error-text{display:inline-block;font-weight:700;}.css-9s4c0y-LabelStyle.form-label.error .label-content{color:#E74C3C;}.css-9s4c0y-LabelStyle.form-label.error .label-content .error-text{color:#E74C3C;}.css-9s4c0y-LabelStyle.form-label.size-sm{font-size:12px;line-height:14px;}.css-9s4c0y-LabelStyle.form-label.size-lg{font-size:16px;line-height:18px;}</style><label class="form-label size-md css-9s4c0y-LabelStyle epbqw830" for="editor"><div class="label-content"></div></label><div id="editor"><style data-emotion="css 1vts7hw-richEditorDropdown">.css-1vts7hw-richEditorDropdown.rich-text-toolbar{position:relative;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .disabled-toolbar{position:absolute;z-index:1;top:1px;left:1px;height:calc(100% - 1px);width:calc(100% - 2px);background:rgba(255, 255, 255, 0.5);}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls{position:relative;padding:3px 6px;margin:0;background:rgba(204,204,204, 0.2);border:1px solid #4f4f4f;border-bottom:none;border-radius:3px 3px 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-control
4s .control-group{padding:3px 0;-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-flow:row wrap;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button{margin:3px 4px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button >.button{height:30px;min-height:30px;position:relative;padding:2px;line-height:1.2rem;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button >.button .btn-content{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button >.button .btn-content span{margin:auto;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button >.button .btn-content svg:last-of-type{font-size:10px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button >.button .btn-content .fa-chevron-down{position:absolute;top:40%;right:3px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button .dropdown{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button .dropdown[class*='left']{left:0;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button .dropdown[class*='right']{right:0;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button .dropdown .dropdown-content{text-align:left;white-space:nowrap;max-height:470px;overflow-y:auto;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .dropdown-button .dropdown .dropdown-content li{padding:6px 12px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-style-button{color:rgba(51,51,51, 0.75);cursor:pointer;display:inline-block;margin:3px 0;padding:4px 6px;border:1px solid transparent;border-radius:2px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-style-button svg{width:14px;height:14px;fill:currentColor;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-style-button.OUTDENT{padding:4px 0 4px 6px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-style-button.INDENT{padding:4px 6px 4px 0;margin-right:8px;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-style-button:hover{background:#035;color:#FFF;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-active-button{color:#333333;border:1px solid rgba(51,51,51, 0.4);background:rgba(51,51,51, 0.1);box-shadow:inset 0 0 4px rgba(51,51,51, 0.3);}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .rich-editor-active-button svg{fill:currentColor;}.css-1vts7hw-richEditorDropdown.rich-text-toolbar .editor-controls .control-row .spacer{margin:0 10px;}</style><div class="rich-text-toolbar css-1vts7hw-richEditorDropdown e1az0wgl0"><div class="editor-controls"><div class="control-row"><style data-emotion="css xb2irl-Button">.css-xb2irl-Button{position:relative;}</style><div class="css-xb2irl-Button"><div class="BOLD rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bold" class="svg-inline--fa fa-bold fa-w-12 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"></path></svg></div></div><div class="css-xb2irl-Button"><div class="ITALIC rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="italic" class="svg-inline--fa fa-italic fa-w-10 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
4<path fill="currentColor" d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"></path></svg></div></div><div class="css-xb2irl-Button"><div class="UNDERLINE rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="underline" class="svg-inline--fa fa-underline fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg></div></div><div class="css-xb2irl-Button"><div class="BULLETLIST rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-ul" class="svg-inline--fa fa-list-ul fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg><style data-emotion="css 5m2mfy-Tooltip">.css-5m2mfy-Tooltip{position:absolute;opacity:0;visibility:hidden;-webkit-transition:300ms ease;transition:300ms ease;transition-property:opacity visibility;top:NaNpx;left:NaNpx;max-width:380px;}.css-5m2mfy-Tooltip:before{left:calc(50% - 8px - 0px);}.css-5m2mfy-Tooltip:after{left:calc(50% - 6px - 0px);}</style><style data-emotion="css 5be6mu-Tooltip">.css-5be6mu-Tooltip{position:absolute;opacity:0;visibility:hidden;-webkit-transition:300ms ease;transition:300ms ease;transition-property:opacity visibility;top:NaNpx;left:NaNpx;max-width:380px;}.css-5be6mu-Tooltip.tooltip{border-radius:5px;background-color:#FFFFFF;color:#333333;border:2px solid #a6a6a6;box-shadow:2px 2px 14px -7px #000000;z-index:280;padding:6px 12px;white-space:pre-wrap;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.css-5be6mu-Tooltip.tooltip:before,.css-5be6mu-Tooltip.tooltip:after{content:'';position:absolute;width:0;height:0;border-style:solid;}.css-5be6mu-Tooltip.tooltip:before{border-width:12px;}.css-5be6mu-Tooltip.tooltip:after{border-width:10px;}.css-5be6mu-Tooltip.tooltip.lg{font-size:14px;line-height:18px;}.css-5be6mu-Tooltip.tooltip.md{font-size:12px;line-height:14px;}.css-5be6mu-Tooltip.tooltip.sm{font-size:11px;line-height:12px;padding:4px 8px;}.css-5be6mu-Tooltip.tooltip.sm:before{border-width:8px;}.css-5be6mu-Tooltip.tooltip.sm:after{border-width:6px;}.css-5be6mu-Tooltip.tooltip.top:before{top:100%;border-color:#a6a6a6 transparent transparent transparent;border-bottom-width:0;}.css-5be6mu-Tooltip.tooltip.top:after{top:100%;border-color:#FFFFFF transparent transparent transparent;border-bottom-width:0;}.css-5be6mu-Tooltip.tooltip.right:before{right:100%;border-color:transparent #a6a6a6 transparent transparent;border-left-width:0;}.css-5be6mu-Tooltip.tooltip.right:after{right:100%;border-color:transparent #FFFFFF transparent transparent;border-left-width:0;}.css-5be6mu-Tooltip.tooltip.bottom:before{bottom:100%;border-color:transparent transparent #a6a6a6 transparent;border-top-width:0;}.css-5be6mu-Tooltip.tooltip.bottom:after{bottom:100%;border-color:transparent transparent #FFFFFF transparent;border-top-width:0;}.css-5be6mu-Tooltip.tooltip.left:before{left:100%;border-color:transparent transparent transparent #a6a6a6;border-right-width:0;}.css-5be6mu-Tooltip.tooltip.left:after{left:100%;border-color:transparent transparent transparent #FFFFFF;border-right-width:0;}.css-5be6mu-Tooltip:before{left:calc(50% - 8px - 0px);}.css-5be6mu-Tooltip:after{left:calc(50% - 6px - 0px);}</style><div class="tooltip top sm css-5be6mu-Tooltip eioxrwi0" data-testid="tooltip-out">
4bullet list</div></div></div><div class="css-xb2irl-Button"><div class="NUMBERLIST rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-ol" class="svg-inline--fa fa-list-ol fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"></path></svg><div class="tooltip top sm css-5be6mu-Tooltip eioxrwi0" data-testid="tooltip-out">numbered list</div></div></div><div class="css-xb2irl-Button"><div class="OUTDENT rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="outdent" class="svg-inline--fa fa-outdent fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"></path></svg><div class="tooltip top sm css-5be6mu-Tooltip eioxrwi0" data-testid="tooltip-out">decrease indent</div></div></div><div class="css-xb2irl-Button"><div class="INDENT rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="indent" class="svg-inline--fa fa-indent fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M27.31 363.3l96-96a16 16 0 0 0 0-22.62l-96-96C17.27 138.66 0 145.78 0 160v192c0 14.31 17.33 21.3 27.31 11.3zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"></path></svg><div class="tooltip top sm css-5be6mu-Tooltip eioxrwi0" data-testid="tooltip-out">increase indent</div></div></div><div class="css-xb2irl-Button"><div class="VIEWHTML rich-editor-style-button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" class="svg-inline--fa fa-code fa-w-20 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path></svg></div></div></div></div></div><style data-emotion="css 18v1502-RichEditor">.css-18v1502-RichEditor{height:620px;min-height:150px;max-height:800px;}</style><style data-emotion="css 1t8o871-RichEditor">.css-1t8o871-RichEditor{height:620px;min-height:150px;max-height:800px;}.css-1t8o871-RichEditor.rich-text-editor{position:relative;padding:12px;border:1px solid #4f4f4f;border-top:none;border-bottom:none;overflow-y:auto;resize:vertical;}.css-1t8o871-RichEditor.rich-text-editor.no-toolbar{border-top:1px solid #4f4f4f;border-top-left-radius:3px;border-top-right-radius:3px;}.css-1t8o871-RichEditor.rich-text-editor.no-statusbar{border-bottom:1px solid #4f4f4f;border-bottom-left-radius:3px;border-bottom-right-radius:3px;}.css-1t8o871-RichEditor.rich-text-editor section{margin-top:1em;margin-bottom:1em;}.css-1t8o871-RichEditor.rich-text-editor blockquote{color:#999999;font-family:'Hoefler Text',Georgia,serif;font-style:italic;line-height:1.15rem;border-left:5px solid rgba(100, 100, 100, 0.5);margin:0 2rem;padding-left:1rem;}.css-1t8o871-RichEditor.rich-text-editor .text-align-center{text-align:center;}.css-1t8o871-RichEditor.rich-text-editor .text-align-justify{text-align:justify;}.css-1t8o871-RichEditor.rich-text-editor .text-align-left{text-align:left;}.css-1t8o871-RichEditor.rich-text-editor .text-align-right{text-align:right;}.css-1t8o871-RichEditor.rich-text-editor .float-left{float:left;}.css-1t8o871-RichEditor.rich-text-editor .float-right{float:right;}.css-1t8o871-RichEditor.rich-text-editor .indent0{margin-left:0;}.css-1t8o871-RichEditor.rich-text-editor .indent1{margin-left:2.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent2{margin-left:5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent3{margin-left:7.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent4{margin-left:10rem;}.css-1t8o871-RichEditor.rich-text-editor .indent5{margin-left:12.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent6{margin-left:15rem;}.css-1t8o871-RichEditor.rich-text-editor .indent7{margin-left:17.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent8{margin-left:20rem;}.css-1t8o871-RichEditor.rich-text-editor .indent9{margin-left:22.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent10{margin-left:25rem;}.css-1t8o871-RichEditor.rich-text-editor .indent11{margin-left:27.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent12{margin-left:30rem;}.css-1t8o871-RichEditor.rich-text-editor .indent13{margin-left:32.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent14{margin-left:35rem;}.css-1t8o871-RichEditor.rich-text-editor .indent15{margin-left:37.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent16{margin-left:40rem;}.css-1t8o871-RichEditor.rich-text-editor .indent17{margin-left:42.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent18{margin-left:45rem;}.css-1t8o871-RichEditor.rich-text-editor .indent19{margin-left:47.5rem;}.css-1t8o871-RichEditor.rich-text-editor .indent20{margin-left:50rem;}</style><div class="rich-text-editor css-1t8o871-RichEditor emdl7bc0"><style data-emotion="css nzib36">.css-nzib36 .DraftEditor-editorContainer,.css-nzib36 .DraftEditor-root,.css-nzib36 .public-DraftEditor-content{height:inherit;text-align:initial;}.css-nzib36 .public-DraftEditor-content[contenteditable='true']{
4-webkit-user-modify:read-write-plaintext-only;}.css-nzib36 .DraftEditor-editorContainer{position:relative;z-index:1;}.css-nzib36 .public-DraftEditor-block{position:relative;}.css-nzib36 .DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left;}.css-nzib36 .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left;}.css-nzib36 .DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center;}.css-nzib36 .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%;}.css-nzib36 .DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right;}.css-nzib36 .DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right;}.css-nzib36 .public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:1;}.css-nzib36 .public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9;}.css-nzib36 .DraftEditorPlaceholder-hidden{display:none;}.css-nzib36 .public-DraftStyleDefault-block{position:relative;white-space:pre-wrap;}.css-nzib36 .public-DraftStyleDefault-ltr{direction:ltr;text-align:inherit;}.css-nzib36 .public-DraftStyleDefault-rtl{direction:rtl;text-align:right;}.css-nzib36 .public-DraftStyleDefault-listLTR{direction:ltr;}.css-nzib36 .public-DraftStyleDefault-listRTL{direction:rtl;}.css-nzib36 .public-DraftStyleDefault-ol,.css-nzib36 .public-DraftStyleDefault-ul{margin:0;padding:0;}.css-nzib36 .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:2.5rem;}.css-nzib36 .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:2.5rem;}.css-nzib36 .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:4rem;}.css-nzib36 .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:4rem;}.css-nzib36 .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:5.5rem;}.css-nzib36 .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:5.5rem;}.css-nzib36 .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:7rem;}.css-nzib36 .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:7rem;}.css-nzib36 .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:8.5rem;}.css-nzib36 .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:8.5rem;}.css-nzib36 .public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative;}.css-nzib36 .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc;}.css-nzib36 .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle;}.css-nzib36 .public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;font-family:inherit;font-size:inherit;width:30px;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px;}.css-nzib36 .public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) '. ';counter-increment:ol0;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1, lower-alpha) ') ';counter-increment:ol1;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2, lower-roman) '. ';counter-increment:ol2;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3, upper-alpha) '. ';counter-increment:ol3;}.css-nzib36 .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) '. ';counter-increment:ol4;}.css-nzib36 .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0;}.css-nzib36 .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1;}.css-nzib36 .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2;}.css-nzib36 .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3;}.css-nzib36 .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4;}</style><div class="css-nzib36 e17lsifi0"><div class="DraftEditor-root"><div class="public-DraftEditorPlaceholder-root"><div class="public-DraftEditorPlaceholder-inner" id="placeholder-3chd0" style="white-space:pre-wrap">Enter your content here</div></div><div class="DraftEditor-editorContainer"><div aria-describedby="placeholder-3chd0" class="notranslate public-DraftEditor-content" 
4contenteditable="true" role="textbox" spellcheck="false" style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"><div data-contents="true"><div data-block="true" data-editor="3chd0" data-offset-key="1p4r3-0-0" contenteditable="true"><div><div data-offset-key="1p4r3-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="1p4r3-0-0"><br data-text="true"/></span></div></div></div></div></div></div></div></div></div><style data-emotion="css bsuvgf">.css-bsuvgf{height:22px;line-height:22px;font-size:10px;border:1px solid #4f4f4f;background:rgba(204,204,204, 0.2);border-radius:0 0 3px 3px;border-top:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-bsuvgf"><style data-emotion="css g1t9dh-StatusBar">.css-g1t9dh-StatusBar{-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-g1t9dh-StatusBar"></div></div></div></div><style data-emotion="css 1av7fzi-Home">.css-1av7fzi-Home{margin-top:30px;margin-bottom:0;}</style><h4 class="css-1av7fzi-Home">Output Preview - (non-contenteditable HTML generated by exporting the editor&#x27;s internal content state)</h4><style data-emotion="css 14lqmgg-Home">.css-14lqmgg-Home{width:100%;padding:12px;border:1px solid #000;min-height:350px;}</style><div class="css-14lqmgg-Home"><div><div><br></div>
5  <p style="text-align: left">This is some sample content for the <u style='text-decoration: underline'>rich text editor</u>. It demonstrates paragraphs, custom block-level styling, the use of tables, and it has an image floated to the left of the next paragraph. Feel free to modify this content or delete it all and create you own.</p>
6  <figure style="text-align: left; margin: 0 0 0 8px; float: left"><img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="object-fit: contain; height: 140px; width: 256px; margin-right: 12px"/></figure><p>You can click on <u style='text-decoration: underline'><span style='color:#0088FF'><a href='https://github.com/EvanMorrison/draft-js-rte' target='_blank' rel='noreferrer'>this link</a></span></u> or <u style='text-decoration: underline'><span style='color:#0088FF'><a href='https://draftjs.org' target='_blank' rel='noreferrer'>this link</a></span></u> in the editor to see what they point to and edit them.</p>
7  <p>If you click on the image you can resize it. If you have the image selected, you can toggle float-left with cmd+L. To ensure you have the image selected rather than an adjacent paragraph, first click on the image to activate it - you'll see the dotted resize border appear - then click in the empty space between the dotted border and the image and the image will become selected.</p>
8  <p style="text-align: center; padding: 15px; background: #8DD; border: 1px solid #555; border-radius: 3px">You can give a paragraph some custom styling like this while in code view and it<br>will be preserved in editor view and in the html outpout.</p>
9  <hr>
10  <table style="border-collapse: collapse; margin: 15px 0; width: 80%; margin-left: 20%"><tbody><tr><td style="padding: 6px; text-align: left">&nbsp;<strong><span style='color:#00CC00'>ABC Company</span></strong><br>123 Circle Rd.<br>Springfield, UT 84201<br>Phone: 801-233-3332</td><td style="padding: 6px; text-align: left"><strong><span style='color:#FF8800'>XYZ Partners Ltd.</span></strong><br>789 Circuit Ave.<br>Anytown, UT 84111<br>Phone: 385-335-5555</td></tr></tbody></table> 
11  <hr>
12  <div><br></div>
13  <table style="border-collapse: collapse; margin: 15px 0; width: 100%"><tbody><tr style="background-color: rgba(240, 240, 240, 0.8)"><th style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">Sample Table </th><th style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">Column A</th><th style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">Column B</th><th style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">Column C</th></tr><tr><td style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">Criteria for passing</td><td style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">50</td><td style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">37</td><td style="border: 1px solid rgba(0, 0, 0, 0.2); padding: 6px; text-align: center">44</td></tr></tbody></table>
14  <div style="text-align: left"><br></div></div></div></div></section></div></div>
14<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"yyPZIY8BCRZ2Cd6exh7wh","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
14</body></html>

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.