1(self.webpackChunk_local_website=self.webpackChunk_local_website||[]).push([[98815],{52468:function(e,n,t){"use strict";t.d(n,{v:function(){return x},A:function(){return k}});var i=t(27680),o=t(2784),s=t(66734),a=t(94694),l=t(18753),r=t(46836),c=t(43455),d=t(59462),p=t(45275);var m=(0,i.Z)("div",{target:"epgk13d0"})("padding-bottom:2rem;@media screen and (min-width:",l.WV.transitionFromMobile,"){padding-bottom:4rem;}@media screen and (min-width:",l.WV.transitionFromTablet,"){padding-bottom:6rem;}"),h='<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<title>TinyMCE Landing Page Example</title>\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="preconnect" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">\n<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin"><\/script>\n\n<script>\n tinymce.init({\n selector: \'#editor\',\n plugins: \'ai a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists markdown media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\',\n toolbar: \'undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate\',\n toolbar_sticky: true,\n toolbar_mode: \'wrap\',\n height: 620,\n editable_root: false,\n editable_class: \'tiny-editable\',\n elementpath: false,\n object_resizing: false,\n resize: false,\n image_caption: true,\n images_file_types: "jpeg,jpg,png,gif",\n style_formats: [\n {title: \'Heading 1\', block: \'h1\'},\n {title: \'Heading 2\', block: \'h2\'},\n {title: \'Heading 3\', block: \'h3\'},\n {title: \'Paragraph\', block: \'p\'},\n {title: \'Blockquote\', block: \'blockquote\'},\n {title: \'Fancy list\', selector: \'ul\', classes: \'fancy\'},\n ],\n advcode_inline: true,\n ai_shortcuts: [\n { title: \'Summarize content\', prompt: \'Provide the key points and concepts in this content in a succinct summary.\' },\n { title: \'Improve writing\', prompt: \'Rewrite this content with no spelling mistakes, proper grammar, and with more descriptive language, using best writing practices without losing the original meaning.\' }\n ],\n spellchecker_ignore_list: [ \'CMS\', \'devs\' ],\n a11ychecker_level: \'aaa\',\n advtemplate_templates: [\n {\n title: "About us",\n content:\n \'<h2>About our company</h2>\\n<p><a href="https://tiny.cloud">XYZ Inc.</a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest technology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients.</p>\',\n },\n ],\n content_css: \'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\',\n content_style: `\n :root {\n --bs-primary-rgb: 62, 92, 210;\n --bs-border-radius: 0;\n --bs-border-radius-lg: 0;\n }\n\n html {\n font-size: 16px;\n }\n\n .tiny-logo {\n position: absolute;\n top: 2rem;\n left: 2rem;\n }\n\n h1 {\n font-size: 2.75rem;\n }\n\n h1,\n h2,\n h3 {\n margin-bottom: .5em;\n }\n\n ul.fancy li {\n margin-bottom: .5em;\n }\n\n ul.fancy li::marker {\n content: \'â
\';\n }\n\n .tiny-hero {\n background-image: url(images/sbc-cms-template-cover.png);\n background-size: cover;\n background-position: center center;\n }\n\n @media screen and (min-width: 768px) {\n .register-form {\n margin-bottom: -200px;\n }\n }\n\n form {\n pointer-events: none;\n }\n\n .tiny-editable {\n position: relative;\n }\n\n .tiny-editable:hover:not(:focus),\n .tiny-editable:focus {\n outline: 3px solid #b4d7ff;\n outline-offset: 4px;\n }\n\n .tiny-editable:empty::before,\n .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {\n content: "Write here...";\n position: absolute;\n top: 0;\n left: 0;\n color: #999;\n }\n `\n });\n<\/script>\n<style>\n body {\n margin: 2rem;\n }\n\n main {\n max-width: 1100px;\n margin: auto;\n }\n</style>\n</head>\n\n<body>\n<main>\n <textarea id="editor">\n <div class="container-fluid text-bg-dark pt-5 tiny-hero">\n <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120">\n <div class="container-lg">\n <div class="row gx-5 py-5">\n <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col
1-sm-12 pt-5">\n <div class="tiny-editable">\n <p>This is a sample landing page built using TinyMCE</p>\n <h1>Adding rich text editing to your CMS</h1>\n <p><span style="font-size: 22px;">Wednesday, December 16, 2023</span><br><span style="font-size: 22px;">5:00 - 7:00 PM</span></p>\n </div>\n </div>\n <div class="col-xl-4 col-lg-5 col-md-5 col-sm-12 register-form">\n <div class="bg-primary p-3">\n <h2 class="text-center my-3">Register now</h2>\n <form>\n <div class="mb-2">\n <label for="first-name" class="form-label">First name</label>\n <input type="text" class="form-control" id="first-name">\n </div>\n <div class="mb-2">\n <label for="last-name" class="form-label">Last name</label>\n <input type="text" class="form-control" id="last-name">\n </div>\n <div class="mb-2">\n <label for="email" class="form-label">Email address</label>\n <input type="email" class="form-control" id="email">\n </div>\n <div class="text-center my-3">\n <button type="submit" class="btn btn-info btn-lg text-white px-5 py-2">Register</button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid">\n <div class="container-lg">\n <div class="row gx-5 py-5">\n <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12">\n <div class="tiny-editable">\n <h2>Are you:</h2>\n <ul class="fancy">\n <li style="font-size: 20px;"><span style="font-size: 20px;">Building a new CMS and need rich text editor functionality?</span></li>\n <li style="font-size: 20px;"><span style="font-size: 20px;">Extending an existing CMS and need to add more rich text editor functionality, or enhance the default editor?</span></li>\n </ul>\n <p><span style="font-size: 20px;">Then use the only WYSIWYG editor that’s trusted by 1.5M devs.</span></p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid bg-primary text-white">\n <div class="container-lg">\n <div class="row gx-5 py-5 justify-content-center">\n <div class="col-md-10 col-lg-8 col-xl-6 text-center">\n <div class="tiny-editable">\n <h2>How it works</h2>\n <p>This landing page was built using TinyMCE.</p>\n <p>All you have to do is define your page structure, which regions are editable, and then which TinyMCE features you want enabled.</p>\n <p>Play around with this demo to see how TinyMCE works as a CMS WYSIWYG editor!</p>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-lg">\n <div class="row gx-5 pb-5">\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-1.png" alt="Portrait of Andrew Mitchell" width="200px">\n <h3><span style="font-size: 20px;">Andrew Mitchell</span></h3>\n <p>Chief Technology Officer (CTO)<br>Syntech Solutions</p>\n </div>\n </div>\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-2.png" alt="Portrait of Jennifer Lee" width="200"\n height="200">\n <h3><span style="font-size: 20px;">Jennifer Lee</span></h3>\n <p>Director of Product Development<br>Stellar Innovations</p>\n </div>\n </div>\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-3.png" alt="Portrait of David Faraguay" width="200"\n height="200">\n <h3><span style="font-size: 20px;">David Faraguay</span></h3>\n <p>Senior Data Scientist<br>QuantumTech Labs</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid">\n <div class="container-lg">\n <div class="row gx-5 py-4">\n <div class="col offset-xl-1">\n <p>Tiny Technologies, Inc. 2023</p>\n </div>\n </div>\n </div>\n </div>\n\n </textarea>\n</main>\n</body>\n</html>',u='\x3c!--\nThe best way to create a templated web page editor in TinymCE is using\nMulti-Root Editing. This allows you to load your entire page template\ninto the editor, make it read-only, then specify which regions you want\neditable using a custom CSS class.\n\nThis example loads Google Fonts and Bootstrap CSS into the editor, to\nmimic what the web page will look like when it\'s published, eliminating\nthe need to preview.\n--\x3e\n<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<title>TinyMCE Landing Page Example</title>\n<meta name="viewport" content="width=device-width, initial-scale=1">
1\n\x3c!-- Load Google fonts --\x3e\n<link rel="preconnect" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">\n<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin"><\/script>\n\n<script>\n // TinyMCE CMS Starter Config\n\n // Initialize TinyMCE\n tinymce.init({\n\n // Select the element(s) to add TinyMCE to using any valid CSS selector\n selector: \'#editor\',\n\n // To make TinyMCE leaner, only include the plugins you need\n plugins: \'ai a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists markdown media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\',\n\n // Define the toolbar\n // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#basic-toolbar-options\n toolbar: \'undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate\',\n\n // Make the toolbar sticky so it\'s visible as users scroll through the email\n // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#toolbar_sticky\n toolbar_sticky: true,\n\n toolbar_mode: \'wrap\',\n\n // Set editor height\n height: 620,\n\n // Enable Multi-Root Editing by setting editable_root to false. This makes the\n // entire contents of the editor non-editable by default\n // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#editable_root\n editable_root: false,\n\n // Specify which class to use to identify the regions that are editable\n // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#editable_class\n editable_class: \'tiny-editable\',\n\n // Disable the element path in the status bar to avoid user confusion while\n // navigating the multiple editable regions inside the editor\n elementpath: false,\n\n // We don\'t want users to be able to resize images by using\n // drag and drop because it can break layout templates.\n // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing\n object_resizing: false,\n\n // Disable editor resizing\n // https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/#resize\n resize: false,\n\n // Enable captions for images\n // https://www.tiny.cloud/docs/tinymce/latest/image/#image_caption\n image_caption: true,\n\n // Only allow certain image types to be added to emails\n // https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_file_types\n images_file_types: "jpeg,jpg,png,gif",\n\n // The style_formats option controls the styleformat toolbar button menu\n // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats\n style_formats: [\n {title: \'Heading 1\', block: \'h1\'},\n {title: \'Heading 2\', block: \'h2\'},\n {title: \'Heading 3\', block: \'h3\'},\n {title: \'Paragraph\', block: \'p\'},\n {title: \'Blockquote\', block: \'blockquote\'},\n {title: \'Fancy list\', selector: \'ul\', classes: \'fancy\'},\n ],\n\n // Enable inline mode for Enhanced Code Editor\n // https://www.tiny.cloud/docs/tinymce/latest/advcode/\n advcode_inline: true,\n\n // Basic setup guide for AI plugin: https://www.tiny.cloud/docs/tinymce/latest/ai/#basic-setup\n //\n // List of AI Assistant shortcuts available in the AI Shortcuts toolbar button and menu item\n // https://www.tiny.cloud/docs/tinymce/latest/ai/#ai_shortcuts\n ai_shortcuts: [\n { title: \'Summarize content\', prompt: \'Provide the key points and concepts in this content in a succinct summary.\' },\n { title: \'Improve writing\', prompt: \'Rewrite this content with no spelling mistakes, proper grammar, and with more descriptive language, using best writing practices without losing the original meaning.\' }\n ],\n\n // You can add your own words (e.g. brand names) to the spell checker dictionary\n // https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/\n spellchecker_ignore_list: [ \'CMS\', \'devs\' ],\n\n // Specify which WCAG level for the Accessibility Checker to check against\n // https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/\n a11ychecker_level: \'aaa\',\n\n // Templates lets users create, modify and organize content snippets\n // inside the editor. This example uses a basic configuration, where you\n // specify the content snippets in the config. Check out the docs for how to\n // enable users to create their own snippets.\n // https://www.tiny.cloud/docs/tinymce/latest/templates/\n advtemplate_templates: [\n {\n title: "About us",\n content:\n \'<h2>About our company</h2>\\n<p><a href="https://tiny.cloud">XYZ Inc.</a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest te
1chnology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients.</p>\',\n },\n ],\n\n // Load bootstrap CSS inside the editor\n content_css: \'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\',\n\n // Apply CSS styles within the editor to style the content and apply styles\n // to editable regions\n content_style: `\n :root {\n --bs-primary-rgb: 62, 92, 210;\n --bs-border-radius: 0;\n --bs-border-radius-lg: 0;\n }\n\n html {\n font-size: 16px;\n }\n\n .tiny-logo {\n position: absolute;\n top: 2rem;\n left: 2rem;\n }\n\n h1 {\n font-size: 2.75rem;\n }\n\n h1,\n h2,\n h3 {\n margin-bottom: .5em;\n }\n\n ul.fancy li {\n margin-bottom: .5em;\n }\n\n ul.fancy li::marker {\n content: \'â
\';\n }\n\n .tiny-hero {\n background-image: url(images/sbc-cms-template-cover.png);\n background-size: cover;\n background-position: center center;\n }\n\n /* Form styling */\n @media screen and (min-width: 768px) {\n .register-form {\n margin-bottom: -200px;\n }\n }\n\n /* Prevent users clicking in the form */\n form {\n pointer-events: none;\n }\n\n /* Edit area functional css */\n .tiny-editable {\n position: relative;\n }\n .tiny-editable:hover:not(:focus),\n .tiny-editable:focus {\n outline: 3px solid #b4d7ff;\n outline-offset: 4px;\n }\n\n /* Edit placeholder */\n .tiny-editable:empty::before,\n .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {\n content: "Write here...";\n position: absolute;\n top: 0;\n left: 0;\n color: #999;\n }\n `\n });\n<\/script>\n<style>\n body {\n margin: 2rem;\n }\n\n main {\n max-width: 1100px;\n margin: auto;\n }\n</style>\n</head>\n\n<body>\n<main>\n <textarea id="editor">\n <div class="container-fluid text-bg-dark pt-5 tiny-hero">\n <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120">\n <div class="container-lg">\n <div class="row gx-5 py-5">\n <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12 pt-5">\n <div class="tiny-editable">\n <p>This is a sample landing page built using TinyMCE</p>\n <h1>Adding rich text editing to your CMS</h1>\n <p><span style="font-size: 22px;">Wednesday, December 16, 2023</span><br><span style="font-size: 22px;">5:00 - 7:00 PM</span></p>\n </div>\n </div>\n <div class="col-xl-4 col-lg-5 col-md-5 col-sm-12 register-form">\n <div class="bg-primary p-3">\n <h2 class="text-center my-3">Register now</h2>\n <form>\n <div class="mb-2">\n <label for="first-name" class="form-label">First name</label>\n <input type="text" class="form-control" id="first-name">\n </div>\n <div class="mb-2">\n <label for="last-name" class="form-label">Last name</label>\n <input type="text" class="form-control" id="last-name">\n </div>\n <div class="mb-2">\n <label for="email" class="form-label">Email address</label>\n <input type="email" class="form-control" id="email">\n </div>\n <div class="text-center my-3">\n <button type="submit" class="btn btn-info btn-lg text-white px-5 py-2">Register</button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid">\n <div class="container-lg">\n <div class="row gx-5 py-5">\n <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col
1-sm-12">\n <div class="tiny-editable">\n <h2>Are you:</h2>\n <ul class="fancy">\n <li style="font-size: 20px;"><span style="font-size: 20px;">Building a new CMS and need rich text editor functionality?</span></li>\n <li style="font-size: 20px;"><span style="font-size: 20px;">Extending an existing CMS and need to add more rich text editor functionality, or enhance the default editor?</span></li>\n </ul>\n <p><span style="font-size: 20px;">Then use the only WYSIWYG editor that’s trusted by 1.5M devs.</span></p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid bg-primary text-white">\n <div class="container-lg">\n <div class="row gx-5 py-5 justify-content-center">\n <div class="col-md-10 col-lg-8 col-xl-6 text-center">\n <div class="tiny-editable">\n <h2>How it works</h2>\n <p>This landing page was built using TinyMCE.</p>\n <p>All you have to do is define your page structure, which regions are editable, and then which TinyMCE features you want enabled.</p>\n <p>Play around with this demo to see how TinyMCE works as a CMS WYSIWYG editor!</p>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-lg">\n <div class="row gx-5 pb-5">\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-1.png" alt="Portrait of Andrew Mitchell" width="200px">\n <h3><span style="font-size: 20px;">Andrew Mitchell</span></h3>\n <p>Chief Technology Officer (CTO)<br>Syntech Solutions</p>\n </div>\n </div>\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-2.png" alt="Portrait of Jennifer Lee" width="200"\n height="200">\n <h3><span style="font-size: 20px;">Jennifer Lee</span></h3>\n <p>Director of Product Development<br>Stellar Innovations</p>\n </div>\n </div>\n <div class="col text-center">\n <div class="tiny-editable"><img src="images/sbc-cms-template-face-3.png" alt="Portrait of David Faraguay" width="200"\n height="200">\n <h3><span style="font-size: 20px;">David Faraguay</span></h3>\n <p>Senior Data Scientist<br>QuantumTech Labs</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class="container-fluid">\n <div class="container-lg">\n <div class="row gx-5 py-4">\n <div class="col offset-xl-1">\n <p>Tiny Technologies, Inc. 2023</p>\n </div>\n </div>\n </div>\n </div>\n\n </textarea>\n</main>\n</body>\n</html>',g=(0,i.Z)(r.AutoText,{target:"epgk13d1"})("text-align:center;padding:0.5rem 0rem 1.5rem 0rem;@media screen and (min-width:",l.WV.transitionFromMobile,"){padding:1.5rem 4rem 2rem 4rem;}@media screen and (min-width:",l.WV.transitionFromTablet,"){padding:1.5rem 9.7rem 2rem 9.7rem;}"),y=(0,i.Z)("div",{target:"epgk13d2"})({name:"79elbk",styles:"position:relative;"}),b=(0,i.Z)(r.ActionButton,{target:"epgk13d3"})({name:"8atqhb",styles:"width:100%;"}),f=(0,i.Z)("div",{target:"epgk13d4"})("position:absolute;width:3.188rem;right:0.75rem;top:0.75rem;@media screen and (min-width:",l.WV.transitionFromMobile,"){width:4.188rem;right:1.5rem;top:1.5rem;}@media screen and (min-width:",l.WV.transitionFromTablet,"){width:5.169rem;right:1.5rem;top:1.5rem;}"),v=(0,i.Z)("div",{target:"epgk13d5"})("--background-block-color:",c.Colors.secondary.tint[5],";--doctype-color:",c.Colors.tertiary.tint[5],";--tag-color:",c.Colors.primary.tint[4],";--attribute-name-color:",c.Colors.tertiary.tint[5],";--attribute-value-color:#fe9898;--attribute-equals-color:",c.Colors.tertiary.tint[5],";--line-number-color:",c.Colors.base.tint[5],";--js-language-color:",c.Colors.primary.tint[4],";--js-access-color:",c.Colors.tertiary.tint[5],";--js-string-color:#fe9898;--default-text-color:",c.Colors.base.tint[2],";--comment-color:",c.Colors.base.tint[6],";"),w=(0,i.Z)(a.Z,{target:"epgk13d6"})("background-color:",c.Colors.secondary.tint[5]," !important;max-height:36rem;overflow:auto;border-radius:4px;padding:1rem;@media screen and (min-width:",l.WV.transitionFromMobile,"){padding:1rem;}@media screen and (min-width:",l.WV.transitionFromTablet,"){padding:1.5rem;}"),x=function(){var e=o.useState(!1),n=e[0],t=e[1];return o.useEffect((function(){var e=setTimeout((function(){t(!1)}),2500);return function(){clearTimeout(e)}}),[n]),(0,p.tZ)(m,null,(0,p.tZ)(g,{type:"p",mobile:"Body4R",tablet:"Body3R",desktop:"Body3R",color:c.Colors.base.tint[6]},"The basic editing experience every CMS should start with: includes all the familiar editing controls your users expect plus PowerPaste, Accessibility Checker, Image Editing and more."),(0,p.tZ)(y,null,(0,p.tZ)(v,null,(0,p.tZ)(w,{style:d,language:"html",showLineNumbers:!0,wrapLongLines:!1},h)),(0,p.tZ)(s.CopyToClipboard,{text:h,onCopy:function(){return t(!0)}}
1,(0,p.tZ)(f,null,(0,p.tZ)(b,{size:24,spec:n?"tertiary":"primary"},n?"COPIED!":"COPY")))))},k=function(){var e=o.useState(!1),n=e[0],t=e[1];return o.useEffect((function(){var e=setTimeout((function(){t(!1)}),2500);return function(){clearTimeout(e)}}),[n]),(0,p.tZ)(m,null,(0,p.tZ)(g,{type:"p",mobile:"Body4R",tablet:"Body3R",desktop:"Body3R",color:c.Colors.base.tint[6]},"The basic editing experience every CMS should start with: includes all the familiar editing controls your users expect plus PowerPaste, Accessibility Checker, Image Editing and more."),(0,p.tZ)(y,null,(0,p.tZ)(v,null,(0,p.tZ)(w,{style:d,language:"html",showLineNumbers:!0,wrapLongLines:!1},u)),(0,p.tZ)(s.CopyToClipboard,{text:u,onCopy:function(){return t(!0)}},(0,p.tZ)(f,null,(0,p.tZ)(b,{size:24,spec:n?"tertiary":"primary"},n?"COPIED!":"COPY")))))}}}]);
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.