Add toolbar buttons

[qmfkdldks]

Issue

Add the next basic buttons to the text editor.

• Title (h1)
• Subtitle (h3)
• Bold
• Italic
• Underline

https://framer.com/share/Vivid-Editor--7Q83aVSNJbEd7Mx5R13s

Acceptance Criteria

• Clicking button should change the text appropriately

[qmfkdldks]

you would need to read styled-components before adding the buttons. The icons are feather icons and you can find it in styled-icons package.

https://styled-components.com/docs/basics https://styled-icons.js.org/

[i-fer]

@qmfkdldks i'm unable to start the project. Im getting this exception: User@firahola MINGW64 ~/repos/vivid-editor/dev (master) $ yarn dev yarn run v1.22.4 $ next ready - started server on http://localhost:3000 event - compiled successfully event - build page: / wait - compiling... info - Using external babel configuration from C:\Users\User\repos\vivid-editor\dev.babelrc event - compiled successfully Error: Unable to find the path for Slate node: {"children":{"initialValue":[{"type":"paragraph","children":[{"text":"This is editable "},{"text":"rich","bold":true},{"text":" text, "},{"text":"much","italic":true},{"text":" better than a "},{"text":"","code":true},{"text":"!"}]},{"type":"paragraph","children":[{"text":"Since it's rich tex t, you can do things like turn a selection of text "},{"text":"bold","bold":true},{"text":", or add a semantically rendered block quote in the middle of the page, like this:"} ]},{"type":"block-quote","children":[{"text":"A wise quote."}]},{"type":"paragraph","children":[{"text":"Try it out for yourself!"}]}]},"operations":[],"selection":null,"marks ":null,"history":{"undos":[],"redos":[]}} at Object.findPath (C:\Users\User\repos\vivid-editor\node_modules\slate-react\dist\index.js:291:11) at Children (C:\Users\User\repos\vivid-editor\node_modules\slate-react\dist\index.js:1342:26) at processChild (C:\Users\User\repos\vivid-editor\dev\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14) at resolve (C:\Users\User\repos\vivid-editor\dev\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (C:\Users\User\repos\vivid-editor\dev\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (C:\Users\User\repos\vivid-editor\dev\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\User\repos\vivid-editor\dev\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\User\repos\vivid-editor\dev\node_modules\next\dist\next-server\server\render.js:48:686) at Function.getInitialProps (C:\Users\User\repos\vivid-editor\dev.next\server\pages_document.js:276:19) at loadGetInitialProps (C:\Users\User\repos\vivid-editor\dev\node_modules\next\dist\next-server\lib\utils.js:5:101)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/qmfkdldks"><img src="https://avatars.githubusercontent.com/u/19354273?v=4" />qmfkdldks</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@i-fer The issue happens when Slate component receives wrong initial value.</p> <pre><code class="language-js"> <Slate editor={editor} value={value} onChange={(value) => setValue(value)}></code></pre> <p><a href="https://github.com/ianstormtaylor/slate/issues/3556">https://github.com/ianstormtaylor/slate/issues/3556</a></p> <p>May be you can try following commands to get most recent repo:</p> <pre><code class="language-shell">git checkout master git pull origin master</code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>