Full

import { StandaloneSandpack } from '../../components/Sandpack';

<title>Full Editor</title>

<StandaloneSandpack preferPreview activeFile="index.js" files={{ 'index.html': `

<script src="{{site.highlightjs}}/highlight.min.js"></script> <link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" /> <script src="{{site.katex}}/katex.min.js"></script> <link rel="stylesheet" href="{{site.katex}}/katex.min.css" /> <link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" /> <link rel="stylesheet" href="{{site.cdn}}/quill.bubble.css" /> <script src="{{site.cdn}}/quill.js"></script> <div id="standalone-container"> <div id="toolbar-container"> <span class="ql-formats"> <select class="ql-font"></select> <select class="ql-size"></select> </span> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-script" value="sub"></button> <button class="ql-script" value="super"></button> </span> <span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> <button class="ql-blockquote"></button> <button class="ql-code-block"></button> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> <button class="ql-indent" value="-1"></button> <button class="ql-indent" value="+1"></button> </span> <span class="ql-formats"> <button class="ql-direction" value="rtl"></button> <select class="ql-align"></select> </span> <span class="ql-formats"> <button class="ql-link"></button> <button class="ql-image"></button> <button class="ql-video"></button> <button class="ql-formula"></button> </span> <span class="ql-formats"> <button class="ql-clean"></button> </span> </div> <div id="editor" style="height: 220px"> </div> </div> <script src="/index.js"></script> `, 'index.js': ` const quill = new Quill('#editor', { modules: { syntax: true, toolbar: '#toolbar-container', }, placeholder: 'Compose an epic...', theme: 'snow', }); ` }} />