From 72388566866d5c357d04fb87330c34d6e56daa35 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 22 Dec 2020 14:33:34 +0200
Subject: [PATCH] feat(track-changes): display basic track-box
---
editors/editoria/src/demo.js | 2 +-
.../src/components/rightArea/BoxList.js | 11 +-
.../trackChanges/ConnectedTrackChange.js | 9 +-
.../trackChanges/TrackChangesBox.js | 122 ++++++++++++++++++
.../src/ui/trackChanges/TrackChangesBox.js | 11 +-
.../track-changes/trackedTransaction.js | 2 +-
6 files changed, 137 insertions(+), 20 deletions(-)
create mode 100644 wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
diff --git a/editors/editoria/src/demo.js b/editors/editoria/src/demo.js
index aa281d74b..8e7c1a649 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 8393eeb41..e710f85e3 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 23f2204de..52137326b 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 000000000..d40fa63f8
--- /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 99083cb86..11d0912de 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 b937de7c3..1d8e18fa0 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);
--
GitLab