diff --git a/editors/editoria/src/demo.js b/editors/editoria/src/demo.js
index aa281d74b7649ee189b0f009e6ae814231e5891a..8e7c1a649d32949d6c45625f02994917b464195a 100644
--- a/editors/editoria/src/demo.js
+++ b/editors/editoria/src/demo.js
@@ -1,4 +1,4 @@
-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="[{"content":"demo comment","displayName":"demo","timestamp":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="5321830" data-before="[]" data-after="["strong"]" 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="[{"content":"comment","displayName":"demo","timestamp":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 <iostream>
+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="[{"content":"demo comment","displayName":"demo","timestamp":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="["strong"]" 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="[{"content":"comment","displayName":"demo","timestamp":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 <iostream>
int main(int argc, char *argv[]) {
diff --git a/wax-prosemirror-components/src/components/rightArea/BoxList.js b/wax-prosemirror-components/src/components/rightArea/BoxList.js
index 8393eeb41c8150cf72302ff982a828db6c370ccb..e710f85e3463a3570166654546b56f30d3db1f12 100644
--- a/wax-prosemirror-components/src/components/rightArea/BoxList.js
+++ b/wax-prosemirror-components/src/components/rightArea/BoxList.js
@@ -3,7 +3,6 @@ import { Mark } from 'prosemirror-model';
import React from 'react';
import ConnectedComment from '../comments/ConnectedComment';
import ConnectedTrackChange from '../trackChanges/ConnectedTrackChange';
-import TrackChangeBox from '../trackChanges/TrackChangeBox';
export default ({ commentsTracks, view, position, recalculateTops }) => {
if (!position) return null;
@@ -20,22 +19,22 @@ export default ({ commentsTracks, view, position, recalculateTops }) => {
if (commentTrack.type && commentTrack.type.name === 'comment') {
return (
<ConnectedComment
- key={id}
comment={commentTrack}
- top={top}
commentId={id}
+ key={id}
recalculateTops={recalculateTops}
+ top={top}
/>
);
}
return (
<ConnectedTrackChange
key={id}
- trackChange={commentTrack}
- view={view}
+ recalculateTops={recalculateTops}
top={top}
+ trackChange={commentTrack}
trackChangeId={id}
- recalculateTops={recalculateTops}
+ view={view}
/>
);
})}
diff --git a/wax-prosemirror-components/src/components/trackChanges/ConnectedTrackChange.js b/wax-prosemirror-components/src/components/trackChanges/ConnectedTrackChange.js
index 23f2204de132da55b52ff18eb83084680d29e5b4..52137326b406cd1e0d2198c717adbe41da4b3b13 100644
--- a/wax-prosemirror-components/src/components/trackChanges/ConnectedTrackChange.js
+++ b/wax-prosemirror-components/src/components/trackChanges/ConnectedTrackChange.js
@@ -3,20 +3,17 @@ import React, { useContext, useMemo, useState, useEffect } from 'react';
import styled from 'styled-components';
// import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { WaxContext } from 'wax-prosemirror-core';
-import TrackChangesBox from '../../ui/trackChanges/TrackChangesBox';
+import TrackChangesBox from './TrackChangesBox';
const ConnectedTrackChangeStyled = styled.div`
- background: red;
- height: 200px;
margin-left: ${props => (props.active ? `${-20}px` : `${50}px`)};
position: absolute;
- width: 200px;
@media (max-width: 600px) {
margin-left: 15px;
}
`;
-export default ({ trackChangeId, top, recalculateTops }) => {
+export default ({ trackChangeId, top, recalculateTops, trackChange }) => {
const { app, activeView } = useContext(WaxContext);
const [isActive, setIsActive] = useState(false);
@@ -50,7 +47,7 @@ export default ({ trackChangeId, top, recalculateTops }) => {
key={trackChangeId}
recalculateTops={recalculateTops}
trackChangeId={trackChangeId}
- trackData=""
+ trackData={trackChange}
/>
</ConnectedTrackChangeStyled>
),
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
new file mode 100644
index 0000000000000000000000000000000000000000..d40fa63f87948ba4e1c97c6655cafa625d2535dc
--- /dev/null
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
@@ -0,0 +1,122 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import styled, { css } from 'styled-components';
+import icons from '../../icons/icons';
+
+const { check, times } = icons;
+
+const activeBorder = css`
+ border-color: gray;
+`;
+
+const Wrapper = styled.div`
+ border: 2px solid transparent;
+ border-radius: 5px;
+ cursor: pointer;
+ ${props => props.active && activeBorder}
+ padding: 8px 16px;
+ transition: border 0.1s ease-in;
+
+ &:hover {
+ ${activeBorder}
+ }
+`;
+
+const HeadWrapper = styled.div`
+ display: flex;
+ margin-bottom: 8px;
+`;
+
+const Info = styled.div`
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+`;
+
+const Name = styled.div``;
+
+const Timestamp = styled.div`
+ color: gray;
+`;
+
+const Tools = styled.div``;
+
+const ChangeWrapper = styled.div``;
+
+const Label = styled.span`
+ font-weight: bold;
+ margin-right: 4px;
+ text-transform: capitalize;
+
+ &:after {
+ content: ':';
+ }
+`;
+
+const Text = styled.span``;
+
+const Icon = styled.div`
+ border-radius: 3px;
+ display: inline-block;
+ height: 16px;
+ padding: 4px;
+ transition: background 0.1s ease-in;
+ width: 16px;
+
+ &:hover {
+ background: gray;
+ }
+`;
+
+const IconButton = props => {
+ // eslint-disable-next-line react/prop-types
+ const { icon, onClick } = props;
+
+ const handleClick = e => {
+ e.stopPropagation();
+ onClick();
+ };
+
+ return (
+ <Icon onClick={handleClick} type="button">
+ {icon}
+ </Icon>
+ );
+};
+
+const TrackChangesBox = props => {
+ const {
+ active,
+ className,
+ label,
+ onClick,
+ onClickAccept,
+ onClickReject,
+ text,
+ trackData,
+ } = props;
+ // console.log(trackData);
+ return (
+ <Wrapper active={active} className={className} onClick={onClick}>
+ <HeadWrapper>
+ <Info>
+ <Name>{trackData.attrs.username}</Name>
+ <Timestamp>{trackData.attrs.date}</Timestamp>
+ </Info>
+ {active && (
+ <Tools>
+ <IconButton icon={check} onClick={onClickAccept} />
+ <IconButton icon={times} onClick={onClickReject} />
+ </Tools>
+ )}
+ </HeadWrapper>
+
+ <ChangeWrapper>
+ <Label>{label}</Label>
+ <Text>{text}</Text>
+ </ChangeWrapper>
+ </Wrapper>
+ );
+};
+
+export default TrackChangesBox;
diff --git a/wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox.js b/wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox.js
index 99083cb8680b39561fd3517bc303d57d0d341414..11d0912dec7b199a7837342f8c327c6ba5d0eb01 100644
--- a/wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox.js
+++ b/wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox.js
@@ -13,11 +13,10 @@ const Wrapper = styled.div`
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
+ ${props => props.active && activeBorder}
padding: 8px 16px;
transition: border 0.1s ease-in;
- ${props => props.active && activeBorder}
-
&:hover {
${activeBorder}
}
@@ -37,7 +36,7 @@ const Info = styled.div`
const Name = styled.div``;
const Timestamp = styled.div`
- font-color: gray;
+ color: gray;
`;
const Tools = styled.div``;
@@ -59,10 +58,10 @@ const Text = styled.span``;
const Icon = styled.div`
border-radius: 3px;
display: inline-block;
- padding: 4px;
- width: 16px;
height: 16px;
+ padding: 4px;
transition: background 0.1s ease-in;
+ width: 16px;
&:hover {
background: gray;
@@ -99,7 +98,7 @@ const TrackChangesBox = props => {
} = props;
return (
- <Wrapper active={active} onClick={onClick} className={className}>
+ <Wrapper active={active} className={className} onClick={onClick}>
{active && (
<HeadWrapper>
<Info>
diff --git a/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js b/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js
index b937de7c3c64cf5d6e614e0e03f24552ee477255..1d8e18fa05e5cba38db11ef0c07b83879c8032ee 100644
--- a/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js
+++ b/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js
@@ -52,7 +52,7 @@ const trackedTransaction = (tr, state, user, group = 'main') => {
// const group = tr.getMeta('outsideView') ? tr.getMeta('outsideView') : 'main';
const newTr = state.tr;
const map = new Mapping();
- const date = Math.floor(Date.now() / 300000);
+ const date = Math.floor(Date.now());
tr.steps.forEach(originalStep => {
const step = originalStep.map(map);