feat(track-changes): convert date

editors/editoria/src/demo.js

-export const demo = `<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis. <span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">this is an addition </span>Vestibulum non nibh at dolor sodales euismod. Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit, euismod sit amet tellus sed, molestie gravida tortor.</p><ol><li><p class="paragraph">list item 1</p></li><li><p class="paragraph">list <span class="comment" data-id="f109db7c-61df-456b-b933-8cc9d43e65a3" data-conversation="[{&quot;content&quot;:&quot;demo comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559766164}]" data-viewid="main" data-group="main">item</span> 2</p><p class="paragraph">list item 2 second paragraph</p></li><li><p class="paragraph">list item 3</p><ol><li><p class="paragraph">nested 1</p></li><li><p class="paragraph">nested 2</p></li><li><p class="paragraph">nested 3</p></li></ol></li><li><p class="paragraph">list item 4</p></li></ol><p class="paragraph">Quisque posuere <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class="format-change" data-id="37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5" data-user="1234" data-username="demo" data-date="1608638467" data-before="[]" data-after="[&quot;strong&quot;]" data-group="main">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. <footnote id="de87b2a3-6186-440e-9249-fb07ce9ff344">note 2 with <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">some</span> more content </footnote>Duis ut volutpat nunc.<footnote id="b8cc2013-ba52-48cb-b42c-dbe407de0c69">note 1 <span class="comment" data-id="48abf2f8-f58f-4157-b966-42276abee599" data-conversation="[{&quot;content&quot;:&quot;comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559909838}]" data-viewid="b8cc2013-ba52-48cb-b42c-dbe407de0c69" data-group="notes">content</span><span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group=""> and tracked text</span></footnote> Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class="paragraph">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam in aliquam ex.</p><pre data-params=""><code>#include &lt;iostream&gt;
+export const demo = `<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis. <span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">this is an addition </span>Vestibulum non nibh at dolor sodales euismod. Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit, euismod sit amet tellus sed, molestie gravida tortor.</p><ol><li><p class="paragraph">list item 1</p></li><li><p class="paragraph">list <span class="comment" data-id="f109db7c-61df-456b-b933-8cc9d43e65a3" data-conversation="[{&quot;content&quot;:&quot;demo comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559766164}]" data-viewid="main" data-group="main">item</span> 2</p><p class="paragraph">list item 2 second paragraph</p></li><li><p class="paragraph">list item 3</p><ol><li><p class="paragraph">nested 1</p></li><li><p class="paragraph">nested 2</p></li><li><p class="paragraph">nested 3</p></li></ol></li><li><p class="paragraph">list item 4</p></li></ol><p class="paragraph">Quisque posuere <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class="format-change" data-id="37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5" data-user="1234" data-username="demo" data-date="1609243477509" data-before="[]" data-after="[&quot;strong&quot;]" data-group="main">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. <footnote id="de87b2a3-6186-440e-9249-fb07ce9ff344">note 2 with <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">some</span> more content </footnote>Duis ut volutpat nunc.<footnote id="b8cc2013-ba52-48cb-b42c-dbe407de0c69">note 1 <span class="comment" data-id="48abf2f8-f58f-4157-b966-42276abee599" data-conversation="[{&quot;content&quot;:&quot;comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559909838}]" data-viewid="b8cc2013-ba52-48cb-b42c-dbe407de0c69" data-group="notes">content</span><span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group=""> and tracked text</span></footnote> Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class="paragraph">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam in aliquam ex.</p><pre data-params=""><code>#include &lt;iostream&gt;
 
 int main(int argc, char *argv[]) {
 

wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js

 /* eslint react/prop-types: 0 */
 import React from 'react';
 import styled, { css } from 'styled-components';
+import DateParser from '../../helpers/DateParser';
+
 import icons from '../../icons/icons';
 
 const { check, times } = icons;
@@ -101,7 +103,13 @@ const TrackChangesBox = props => {
       <HeadWrapper>
         <Info>
           <Name>{trackData.attrs.username}</Name>
-          <Timestamp>{trackData.attrs.date}</Timestamp>
+          <Timestamp>
+            <DateParser timestamp={trackData.attrs.date}>
+              {(timeStamp, timeAgo) => {
+                return `${timeAgo} ago`;
+              }}
+            </DateParser>
+          </Timestamp>
         </Info>
         {active && (
           <Tools>