Custom toolbar

Author: Rajat Saxena

packages/text-editor/src/Renderer/index.tsx

@@ -32,6 +32,7 @@ const typeMap: MarkMap = {
     text: TextHandler,
     taskList: "ul",
     taskListItem: "li",
+    // add links to headings for table of contents navigation
     heading: ({ node, children }) => {
         if (!node.content) {
             return null;

packages/text-editor/src/Toolbar.tsx

@@ -1,8 +1,26 @@
 import React, { FC } from "react";
-import { Toolbar as RemirrorToolbar } from "@remirror/react-ui";
+import {
+    FormattingButtonGroup,
+    HeadingLevelButtonGroup,
+    ListButtonGroup,
+    RedoButton,
+    Toolbar as RemirrorToolbar,
+    ToggleBlockquoteButton,
+    UndoButton,
+} from "@remirror/react-ui";
 
 const Toolbar: FC = () => {
-    return <RemirrorToolbar></RemirrorToolbar>;
+    return (
+        <RemirrorToolbar>
+            <UndoButton />
+            <RedoButton />
+            <HeadingLevelButtonGroup showAll />
+            <FormattingButtonGroup>
+                <ToggleBlockquoteButton />
+            </FormattingButtonGroup>
+            <ListButtonGroup />
+        </RemirrorToolbar>
+    );
 };
 
 export default Toolbar;