Merge branch 'publish@0.9.20' into 'master'

Publish@0.9.20

See merge request !559

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',
   },
 

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(

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 = () => {

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBubbleComponent.js

 /* 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;
   };
 

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, [

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;
     }