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