From 022e2a6b3a728965ac15f7c58f3411a315fb082b Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 5 May 2020 16:17:35 +0300
Subject: [PATCH] active comment plugin plus boxes movement(fix heights when
 active)

---
 editors/editoria/src/config/config.js         |  9 +----
 wax-prosemirror-components/package.json       |  2 +-
 .../src/components/comments/CommentBox.js     | 12 +++++--
 .../comments/CommentBubbleComponent.js        |  3 +-
 .../components/comments/CommentComponent.js   | 12 ++++---
 wax-prosemirror-core/package.json             |  2 +-
 wax-prosemirror-layouts/package.json          |  2 +-
 .../src/layouts/EditorElements.js             |  4 +++
 wax-prosemirror-plugins/index.js              |  2 +-
 wax-prosemirror-plugins/package.json          |  2 +-
 .../src/comments/ActiveComment.js             | 33 +++++++++++++++++--
 wax-prosemirror-schema/package.json           |  2 +-
 wax-prosemirror-services/package.json         |  2 +-
 .../src/CommentsService/CommentsService.js    |  4 +++
 wax-prosemirror-themes/package.json           |  5 +--
 wax-prosemirror-utilities/package.json        |  2 +-
 16 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index c363d597e..08f4a99e4 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -23,8 +23,6 @@ import {
   CommentsService
 } from "wax-prosemirror-services";
 
-import { ActiveCommnet } from "wax-prosemirror-plugins";
-
 import invisibles, {
   space,
   hardBreak,
@@ -56,12 +54,7 @@ export default {
   RulesService: [emDash, ellipsis],
   ShortCutsService: {},
 
-  PmPlugins: [
-    columnResizing(),
-    tableEditing(),
-    invisibles([hardBreak()]),
-    ActiveCommnet()
-  ],
+  PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
 
   services: [
     new PlaceholderService(),
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index afe50449c..3852da307 100644
--- a/wax-prosemirror-components/package.json
+++ b/wax-prosemirror-components/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror UI components",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index f5f011961..f790aa2f1 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -1,6 +1,7 @@
-import React, { Fragment, useState, useCallback, useEffect } from "react";
+import React, { Fragment, useState, useEffect, useContext } from "react";
 import { Transition } from "react-transition-group";
 import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core";
 
 const CommentBoxStyled = styled.div`
   height: 50px;
@@ -12,7 +13,7 @@ const CommentBoxStyled = styled.div`
   position: absolute;
   transition: ${({ state }) => "top 1s, opacity 1.5s"};
   top: ${props => (props.top ? `${props.top}px` : 0)};
-
+  left: ${props => (props.active ? `${63}%` : `${65}%`)};
   opacity: ${({ state }) => {
     switch (state) {
       case "exited":
@@ -29,7 +30,11 @@ const CommentBoxStyled = styled.div`
 
 export default ({ mark, view, top, dataComment }) => {
   const [animate, setAnimate] = useState(false);
-
+  const { view: { main }, app } = useContext(WaxContext);
+  const activeCommentPlugin = app.PmPlugins.get("activeComment");
+  const activeComment = activeCommentPlugin.getState(main.state).comment;
+  let active = false;
+  if (activeComment && mark.attrs.id === activeComment.attrs.id) active = true;
   useEffect(() => {
     setAnimate(true);
   }, []);
@@ -42,6 +47,7 @@ export default ({ mark, view, top, dataComment }) => {
             top={top}
             state={state}
             data-comment={dataComment}
+            active={active}
           />
         )}
       </Transition>
diff --git a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
index 62cec9d4d..fe5a3bac2 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
@@ -1,8 +1,7 @@
 import React, { useLayoutEffect, useState, useContext } from "react";
 import styled from "styled-components";
-import { Commands } from "wax-prosemirror-utilities";
+import { Commands, DocumentHelpers } from "wax-prosemirror-utilities";
 import { WaxContext } from "wax-prosemirror-core";
-import { DocumentHelpers } from "wax-prosemirror-utilities";
 
 const CommentBubbleComponent = ({
   setPosition,
diff --git a/wax-prosemirror-components/src/components/comments/CommentComponent.js b/wax-prosemirror-components/src/components/comments/CommentComponent.js
index 21f1b1945..8152e2237 100644
--- a/wax-prosemirror-components/src/components/comments/CommentComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentComponent.js
@@ -13,7 +13,8 @@ import CommentsBoxList from "./CommentsBoxList";
 import { each } from "lodash";
 
 export default ({ area }) => {
-  const { view: { main } } = useContext(WaxContext);
+  const { view: { main }, app } = useContext(WaxContext);
+  const activeCommentPlugin = app.PmPlugins.get("activeComment");
   const [comments, setComments] = useState([]);
   const [position, setPosition] = useState();
 
@@ -29,8 +30,10 @@ export default ({ area }) => {
     each(comments[area], (comment, pos) => {
       const WaxSurface = main.dom.getBoundingClientRect();
       const { attrs: { id } } = comment;
+      const activeComment = activeCommentPlugin.getState(main.state).comment;
       let isActive = false;
-      // if (comment.id === active) isActive = true
+      if (activeComment && comment.attrs.id === activeComment.attrs.id)
+        isActive = true;
 
       //annotation top
       if (area === "main") {
@@ -81,7 +84,7 @@ export default ({ area }) => {
         let i = pos;
 
         // first one active, none above
-        if (i === 0) b = false;
+        if (pos === 0) b = false;
 
         while (b) {
           const boxAbove = comments[area][i - 1];
@@ -100,8 +103,9 @@ export default ({ area }) => {
         }
       }
 
-      allCommentsTop[id] = top;
+      allCommentsTop[id] = result[pos];
     });
+    console.log(allCommentsTop);
     return allCommentsTop;
   });
 
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index 53ffdd9c3..b70bf1404 100644
--- a/wax-prosemirror-core/package.json
+++ b/wax-prosemirror-core/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror core",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-layouts/package.json b/wax-prosemirror-layouts/package.json
index 55533a47a..615957c08 100644
--- a/wax-prosemirror-layouts/package.json
+++ b/wax-prosemirror-layouts/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror layouts",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index fb8cbccf6..9fa4996bc 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -200,5 +200,9 @@ export default css`
   span.comment {
     border-bottom: 2px solid #ffab20;
     border-radius: 3px 3px 0 0;
+
+    .active-comment {
+      background-color: #ffab20;
+    }
   }
 `;
diff --git a/wax-prosemirror-plugins/index.js b/wax-prosemirror-plugins/index.js
index 7c894916c..162ffb9f9 100644
--- a/wax-prosemirror-plugins/index.js
+++ b/wax-prosemirror-plugins/index.js
@@ -2,4 +2,4 @@ export {
   default as TrackChangePlugin
 } from "./src/trackChanges/TrackChangePlugin";
 
-export { default as ActiveCommnet } from "./src/comments/ActiveComment";
+export { default as ActiveComment } from "./src/comments/ActiveComment";
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 4d356e954..823c5561f 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/wax-prosemirror-plugins/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror plugins",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-plugins/src/comments/ActiveComment.js b/wax-prosemirror-plugins/src/comments/ActiveComment.js
index 70a1e4083..1ab7725e9 100644
--- a/wax-prosemirror-plugins/src/comments/ActiveComment.js
+++ b/wax-prosemirror-plugins/src/comments/ActiveComment.js
@@ -1,14 +1,41 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { Commands, DocumentHelpers } from "wax-prosemirror-utilities";
 
-const activeCommnet = new PluginKey("activeCommnet");
+const activeComment = new PluginKey("activeComment");
+
+const getComment = state => {
+  const commentMark = state.schema.marks["comment"];
+  return DocumentHelpers.findMark(state, commentMark);
+};
 
 export default props => {
   return new Plugin({
-    key: activeCommnet,
+    key: activeComment,
+    state: {
+      init: (_, state) => {
+        return { comment: getComment(state) };
+      },
+      apply(tr, prev, _, newState) {
+        const comment = getComment(newState);
+        let createDecoration;
+        if (comment) {
+          createDecoration = DecorationSet.create(newState.doc, [
+            Decoration.inline(comment.from, comment.to, {
+              class: "active-comment"
+            })
+          ]);
+        }
+        return {
+          comment,
+          createDecoration
+        };
+      }
+    },
     props: {
       decorations: state => {
-        console.log("111");
+        const commentPluginState = state && activeComment.getState(state);
+        return commentPluginState.createDecoration;
       }
     }
   });
diff --git a/wax-prosemirror-schema/package.json b/wax-prosemirror-schema/package.json
index e9496f15e..bdc57cff0 100644
--- a/wax-prosemirror-schema/package.json
+++ b/wax-prosemirror-schema/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror schema",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json
index 757a64d8a..01681fa80 100644
--- a/wax-prosemirror-services/package.json
+++ b/wax-prosemirror-services/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror services",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index fb0a3fbd5..ad91909f2 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -4,11 +4,15 @@ import {
   CommentComponent,
   CommentBubbleComponent
 } from "wax-prosemirror-components";
+import { ActiveComment } from "wax-prosemirror-plugins";
+
+const PLUGIN_KEY = "activeComment";
 
 export default class CommentsService extends Service {
   name = "CommentsService";
 
   boot() {
+    this.app.PmPlugins.add(PLUGIN_KEY, ActiveComment(PLUGIN_KEY));
     const createOverlay = this.container.get("CreateOverlay");
     const layout = this.container.get("Layout");
     createOverlay(
diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json
index e4019f043..29cacc323 100644
--- a/wax-prosemirror-themes/package.json
+++ b/wax-prosemirror-themes/package.json
@@ -4,14 +4,15 @@
   "version": "0.0.8",
   "description": "Wax prosemirror themes",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
   },
   "dependencies": {
     "@pubsweet/ui-toolkit": "^2.2.13",
-    "cokourier-prime-sans": "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git",
+    "cokourier-prime-sans":
+      "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git",
     "typeface-fira-sans-condensed": "^0.0.54",
     "typeface-vollkorn": "^0.0.54"
   }
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index 7649c7642..add04696c 100644
--- a/wax-prosemirror-utilities/package.json
+++ b/wax-prosemirror-utilities/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror utilities",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"
-- 
GitLab