fix: Added icon for comment; Changed initial toolbar lineup for heading; (#440)

Because there is no icon for comment, there is this bug that is causing unnecessary padding on the toolbar; Initial toolbar now includes a group containing all headings w/ their keyboard shortcuts

Author: alpharomercoma

core/src/commands/comment.tsx

@@ -19,4 +19,10 @@ export const comment: ICommand = {
       end: state2.selection.end - 4,
     });
   },
+  icon: (
+    <svg role="img" viewBox="0 0 512 512" width="12" height="12">
+      <path fill="currentColor" d="M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z" />
+      <path fill="currentColor" d="M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z" />
+    </svg>
+  )
 };

core/src/commands/index.ts

@@ -1,27 +1,27 @@
 import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../Context';
+import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
 import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { comment } from './comment';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
-import { ContextStore, ExecuteCommandState } from '../Context';
 
 export interface CommandOrchestrator {
   executeCommand(command: ICommand): void;
@@ -84,7 +84,11 @@ const getCommands: () => ICommand[] = () => [
   italic,
   strikethrough,
   hr,
-  title,
+  group([title1, title2, title3, title4, title5, title6], {
+			name: "title",
+			groupName: "title",
+			buttonProps: { "aria-label": "Insert title", title: "Insert title" },
+		}),
   divider,
   link,
   quote,
@@ -163,7 +167,6 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
 }
 
 export {
-  // Toolbars.
   title,
   title1,
   title2,
@@ -196,3 +199,4 @@ export {
   TextAreaCommandOrchestrator,
   TextAreaTextApi,
 };
+