diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index a01df1a82f519b5e26c4dd42657be001a423be13..82fc67860d03d3e611f829e2125777bdabf545ed 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -304,8 +304,9 @@ export default {
},
YjsService: {
// eslint-disable-next-line no-restricted-globals
- connectionUrl: 'ws://localhost:4000',
- docIdentifier: 'prosemirror-demo',
+ connectionUrl: 'ws://localhost:5010',
+ // connectionUrl: 'ws://0.tcp.ap.ngrok.io:17607',
+ docIdentifier: 'prosemirror-demo7',
YjsType: 'prosemirror',
},
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index 8adfb42a7f597b6196e556f866e95568e48a63ed..7fcf0cbcd106d87fe1060056b295e31bb56502cf 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -11,11 +11,6 @@ export default class CommentsService extends Service {
boot() {
const commentsConfig = this.app.config.get('config.CommentsService');
- this.app.PmPlugins.add(
- 'commentPlugin',
- CommentPlugin('commentPlugin', this.app.context),
- );
-
const options = {
existingComments: () => {
const map = this.app.config.get('config.YjsService')
@@ -52,7 +47,6 @@ export default class CommentsService extends Service {
}
commentsConfig.getComments(this.allCommentsFromStates);
- this.app.context.setOption({ comments: this.allCommentsFromStates });
},
};
@@ -61,6 +55,11 @@ export default class CommentsService extends Service {
CommentDecorationPlugin('commentDecorationPlugin', options),
);
+ this.app.PmPlugins.add(
+ 'commentPlugin',
+ CommentPlugin('commentPlugin', this.app.context),
+ );
+
const createOverlay = this.container.get('CreateOverlay');
const layout = this.container.get('Layout');
createOverlay(
diff --git a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
index 0ad4b86940593248ebf8f5bb216d6324c2161cb6..ab67e1c87d8545dca28361129f02bc5482bfdde6 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
@@ -32,7 +32,6 @@ export default ({ comment, top, commentId, recalculateTops, users }) => {
},
app,
activeView,
- options: { commentsMap },
} = context;
const [isActive, setIsActive] = useState(false);
@@ -118,20 +117,6 @@ export default ({ comment, top, commentId, recalculateTops, users }) => {
dispatch(state.tr);
activeView.focus();
-
- if (context.app.config.get('config.YjsService')) {
- commentsMap.observe(() => {
- const transaction = context.pmViews.main.state.tr.setMeta(
- CommentDecorationPluginKey,
- {
- type: 'deleteComment',
- id: activeComment.id,
- },
- );
-
- context.pmViews.main.dispatch(transaction);
- });
- }
};
const onTextAreaBlur = () => {
diff --git a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBubbleComponent.js b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBubbleComponent.js
index 8fe97d8c357e73dfc241c4d8fdf5a0340c2c2a42..8f2e86116118cba93de10d157d95763dbeead396 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBubbleComponent.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBubbleComponent.js
@@ -1,25 +1,13 @@
/* eslint react/prop-types: 0 */
-import React, { useLayoutEffect, useContext, useEffect, useState } from 'react';
+import React, { useLayoutEffect, useContext } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
-import {
- ySyncPluginKey,
- relativePositionToAbsolutePosition,
- absolutePositionToRelativePosition,
-} from 'y-prosemirror';
-
import CommentBubble from './CommentBubble';
import { CommentDecorationPluginKey } from '../../../plugins/CommentDecorationPlugin';
const CommentBubbleComponent = ({ setPosition, position, group }) => {
const context = useContext(WaxContext);
- const {
- activeView,
- activeViewId,
- options: { comments },
- } = context;
+ const { activeView, activeViewId } = context;
const { state, dispatch } = activeView;
- const [fromPos, setFromPos] = useState(state.selection.from);
- const [toPos, setToPos] = useState(state.selection.to);
useLayoutEffect(() => {
const WaxSurface = activeView.dom.getBoundingClientRect();
@@ -37,10 +25,6 @@ const CommentBubbleComponent = ({ setPosition, position, group }) => {
event.preventDefault();
const { selection } = state;
- if (context.app.config.get('config.YjsService')) {
- return createYjsComments(selection);
- }
-
dispatch(
state.tr.setMeta(CommentDecorationPluginKey, {
type: 'addComment',
@@ -62,50 +46,6 @@ const CommentBubbleComponent = ({ setPosition, position, group }) => {
dispatch(state.tr);
};
- const createYjsComments = selection => {
- const ystate = ySyncPluginKey.getState(state);
- const { doc, type, binding } = ystate;
- const from = absolutePositionToRelativePosition(
- fromPos,
- type,
- binding.mapping,
- );
- const to = absolutePositionToRelativePosition(toPos, type, binding.mapping);
-
- dispatch(
- state.tr.setMeta(CommentDecorationPluginKey, {
- type: 'addComment',
- from: relativePositionToAbsolutePosition(
- doc,
- type,
- from,
- binding.mapping,
- ),
- to: relativePositionToAbsolutePosition(doc, type, to, binding.mapping),
- data: {
- yjsFrom: fromPos,
- yjsTo: toPos,
- pmFrom: fromPos,
- pmTo: toPos,
- type: 'comment',
- conversation: [],
- title: '',
- group,
- viewId: activeViewId,
- },
- }),
- );
-
- dispatch(state.tr);
- };
-
- useEffect(() => {
- if (context.app.config.get('config.YjsService')) {
- setFromPos(state.tr.mapping.map(activeView.state.selection.from));
- setToPos(state.tr.mapping.map(activeView.state.selection.to));
- }
- }, [activeView.state]);
-
const isCommentAllowed = () => {
let allowed = true;
state.doc.nodesBetween(
@@ -121,17 +61,21 @@ const CommentBubbleComponent = ({ setPosition, position, group }) => {
}
},
);
-
- if (
- comments.find(
- comm =>
- comm.data.pmFrom === state.selection.from &&
- comm.data.pmTo === state.selection.to,
- )
- ) {
- allowed = false;
- }
-
+ const commentsMap = CommentDecorationPluginKey.getState(state).getMap();
+ const commentData = [];
+ commentsMap.forEach(comment => {
+ console.log(comment);
+ if (
+ comment.data.pmFrom === state.selection.from &&
+ comment.data.pmTo === state.selection.to
+ ) {
+ console.log('here');
+ commentData.push(comment);
+ }
+ console.log(commentData);
+ if (commentData.length !== 0) allowed = false;
+ console.log(allowed);
+ });
return allowed;
};
diff --git a/wax-prosemirror-services/src/CommentsService/plugins/CommentPlugin.js b/wax-prosemirror-services/src/CommentsService/plugins/CommentPlugin.js
index 742a9dd5a949b218f54b01e262552ed0c72498c8..5b5fdc773c3ee2923b7aa3384799512462d4479f 100644
--- a/wax-prosemirror-services/src/CommentsService/plugins/CommentPlugin.js
+++ b/wax-prosemirror-services/src/CommentsService/plugins/CommentPlugin.js
@@ -2,17 +2,21 @@
import { inRange, last, sortBy } from 'lodash';
import { Plugin, PluginKey } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
+import { CommentDecorationPluginKey } from './CommentDecorationPlugin';
const commentPlugin = new PluginKey('commentPlugin');
-const getComment = (state, context) => {
- const {
- options: { comments },
- } = context;
- if (!comments?.length) return;
- let commentData = comments.filter(comment =>
- inRange(state.selection.from, comment.data.pmFrom, comment.data.pmTo),
- );
+const getComment = state => {
+ const commentsMap = CommentDecorationPluginKey.getState(state).getMap();
+
+ if (commentsMap.size === 0) return;
+ let commentData = [];
+
+ commentsMap.forEach(comment => {
+ if (inRange(state.selection.from, comment.data.pmFrom, comment.data.pmTo)) {
+ commentData.push(comment);
+ }
+ });
commentData = sortBy(commentData, ['data.pmFrom']);
if (commentData.length > 0) {
@@ -29,15 +33,15 @@ const getComment = (state, context) => {
return undefined;
};
-export default (key, context) => {
+export default () => {
return new Plugin({
key: commentPlugin,
state: {
init: (_, state) => {
- return { comment: getComment(state, context) };
+ return { comment: getComment(state) };
},
apply(tr, prev, _, newState) {
- const comment = getComment(newState, context);
+ const comment = getComment(newState);
let createDecoration;
if (comment) {
createDecoration = DecorationSet.create(newState.doc, [
diff --git a/wax-prosemirror-services/src/CommentsService/plugins/CommentState.js b/wax-prosemirror-services/src/CommentsService/plugins/CommentState.js
index fd3ae51dd8cdf282df41181237fdb6d9b3961c70..f613bc77c86b6360ace4dbc22fe5baef5fa8b124 100644
--- a/wax-prosemirror-services/src/CommentsService/plugins/CommentState.js
+++ b/wax-prosemirror-services/src/CommentsService/plugins/CommentState.js
@@ -66,17 +66,21 @@ export default class CommentState {
if (ystate?.binding) {
const { doc, type, binding } = ystate;
this.allCommentsList().forEach((annotation, id) => {
- annotation.data.yjsFrom = absolutePositionToRelativePosition(
- annotation.data.pmFrom,
- type,
- binding.mapping,
- );
+ if (typeof annotation.data.yjsFrom !== 'object') {
+ annotation.data.yjsFrom = absolutePositionToRelativePosition(
+ annotation.data.pmFrom,
+ type,
+ binding.mapping,
+ );
+ }
- annotation.data.yjsTo = absolutePositionToRelativePosition(
- annotation.data.pmTo,
- type,
- binding.mapping,
- );
+ if (typeof annotation.data.yjsTo !== 'object') {
+ annotation.data.yjsTo = absolutePositionToRelativePosition(
+ annotation.data.pmTo,
+ type,
+ binding.mapping,
+ );
+ }
const from = relativePositionToAbsolutePosition(
doc,
@@ -157,6 +161,18 @@ export default class CommentState {
annotation.from = newFrom;
annotation.to = newTo;
+ annotation.data.pmFrom = relativePositionToAbsolutePosition(
+ ystate.doc,
+ ystate.type,
+ newFrom,
+ ystate.binding.mapping,
+ );
+ annotation.data.pmTo = relativePositionToAbsolutePosition(
+ ystate.doc,
+ ystate.type,
+ newTo,
+ ystate.binding.mapping,
+ );
this.options.map.set(id, annotation);
});
@@ -185,26 +201,17 @@ export default class CommentState {
const ystate = ySyncPluginKey.getState(state);
- if (ystate?.isChangeOrigin) {
- // this.updateCommentPostions(ystate);
- this.createDecorations(state);
-
- return this;
- }
-
this.decorations = this.decorations.map(
transaction.mapping,
transaction.doc,
);
- map.forEach((annotation, _) => {
- if ('from' in annotation && 'to' in annotation) {
- annotation.data.pmFrom = transaction.mapping.map(
- annotation.data.pmFrom,
- );
- annotation.data.pmTo = transaction.mapping.map(annotation.data.pmTo);
- }
- });
+ if (ystate?.isChangeOrigin) {
+ this.updateCommentPostions(ystate);
+ this.createDecorations(state);
+
+ return this;
+ }
if (ystate?.binding && ystate?.binding.mapping) {
this.updateCommentPostions(ystate);
@@ -212,6 +219,15 @@ export default class CommentState {
return this;
// eslint-disable-next-line no-else-return
} else {
+ // Not YJS
+ map.forEach((annotation, _) => {
+ if ('from' in annotation && 'to' in annotation) {
+ annotation.data.pmFrom = transaction.mapping.map(
+ annotation.data.pmFrom,
+ );
+ annotation.data.pmTo = transaction.mapping.map(annotation.data.pmTo);
+ }
+ });
this.createDecorations(state);
return this;
}