info for format_change

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

@@ -56,6 +56,11 @@ const Label = styled.span`
   }
 `;
 
+const ActionWrapper = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+`;
+
 const Text = styled.span``;
 
 const Icon = styled.div`
@@ -91,11 +96,9 @@ const TrackChangesBox = props => {
   const {
     active,
     className,
-    label,
     onClickBox,
     onClickAccept,
     onClickReject,
-    text,
     trackData,
   } = props;
 
@@ -111,6 +114,31 @@ const TrackChangesBox = props => {
     ? trackData.attrs.date
     : trackData.node.attrs.track[0].date;
 
+  const labelRemoved = `removed `;
+  let textRemoved = '';
+  const labelAdded = `added `;
+  let textAdded = '';
+
+  if (trackData.type.name === 'format_change') {
+    const { before, after } = trackData.attrs;
+
+    for (let i = 0; i < before.length; i += 1) {
+      if (i < before.length - 1) {
+        textRemoved += `${before[i]}, `;
+      } else {
+        textRemoved += `${before[i]}`;
+      }
+    }
+
+    for (let i = 0; i < after.length; i += 1) {
+      if (i < after.length - 1) {
+        textAdded += `${after[i]}, `;
+      } else {
+        textAdded += `${after[i]}`;
+      }
+    }
+  }
+
   return (
     <Wrapper active={active} className={className} onClick={onClickTrackBox}>
       <HeadWrapper>
@@ -133,8 +161,18 @@ const TrackChangesBox = props => {
       </HeadWrapper>
 
       <ChangeWrapper>
-        <Label>{label}</Label>
-        <Text>{text}</Text>
+        {textAdded !== '' && (
+          <ActionWrapper>
+            <Label>{labelAdded}</Label>
+            <Text>{textAdded}</Text>
+          </ActionWrapper>
+        )}
+        {textRemoved !== '' && (
+          <ActionWrapper>
+            <Label>{labelRemoved}</Label>
+            <Text>{textRemoved}</Text>
+          </ActionWrapper>
+        )}
       </ChangeWrapper>
     </Wrapper>
   );