add new icon

wax-prosemirror-components/src/icons/icons.js

@@ -472,4 +472,10 @@ export default {
       <path d="M17 5H20L18.5 7L17 5M3 2H21C22.11 2 23 2.9 23 4V8C23 9.11 22.11 10 21 10H16V20C16 21.11 15.11 22 14 22H3C1.9 22 1 21.11 1 20V4C1 2.9 1.9 2 3 2M3 4V8H14V4H3M21 8V4H16V8H21M3 20H14V10H3V20M5 12H12V14H5V12M5 16H12V18H5V16Z" />
     </Svg>
   ),
+  refresh: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Refresh List</title>
+      <path d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z" />{' '}
+    </Svg>
+  ),
 };

wax-prosemirror-services/src/OENContainersService/PopulateHeadingsComponent.js

 /* eslint-disable react/prop-types */
-import React, { useContext, useLayoutEffect, useEffect } from 'react';
+import React, { useContext, useLayoutEffect } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DOMParser } from 'prosemirror-model';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
@@ -7,13 +7,16 @@ import { Selection } from 'prosemirror-state';
 import styled from 'styled-components';
 import { Icon } from 'wax-prosemirror-components';
 
-const IconRemove = styled(Icon)`
+const StyledButton = styled.span`
+  cursor: pointer;
+`;
+
+const StyledIcon = styled(Icon)`
   cursor: pointer;
   position: relative;
-  top: 2px;
-  left: 6px;
-  height: 16px;
-  width: 16px;
+  height: 23px;
+  width: 23px;
+  bottom: 5px;
 `;
 
 const elementFromString = string => {
@@ -80,7 +83,7 @@ export default ({ setPosition, position }) => {
     const allSections = [];
 
     doc.descendants((editorNode, index) => {
-      if (Node.type.name === 'oen_section') {
+      if (editorNode.type.name === 'oen_section') {
         allSections.push(editorNode);
       }
     });
@@ -95,9 +98,9 @@ export default ({ setPosition, position }) => {
 
   if (!readOnly) {
     return (
-      <button onClick={generateHeadings} type="button">
-        generate
-      </button>
+      <StyledButton onClick={generateHeadings} type="button">
+        <StyledIcon name="refresh" />
+      </StyledButton>
     );
   }
 };