From 6b8abd36c87d98ec2a678d27f6ea14581042adb9 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 25 Jul 2020 14:15:27 +0300
Subject: [PATCH] new comment discussion structure
---
.prettierrc.js | 2 +-
editors/editoria/src/Editoria.js | 4 +-
editors/editoria/src/config/config.js | 44 +++++++++----------
.../src/components/comments/Comment.js | 25 ++++++++---
.../src/WaxSelectionPlugin.js | 24 ++++++----
wax-prosemirror-services/index.js | 2 +
6 files changed, 63 insertions(+), 38 deletions(-)
diff --git a/.prettierrc.js b/.prettierrc.js
index e532c9180..bbcd021ed 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,6 +6,6 @@ const { prettier } = require('@coko/lint');
* prettier.semi = true
*
*/
-prettier.printWidth = 120;
+
prettier.semi = true;
module.exports = prettier;
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 405e90268..6e5c718ab 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -47,9 +47,9 @@ const Editoria = () => (
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
- value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the <span class="comment" data-id="203df89d-294b-4e35-b48c-408e135ee8fa" data-conversation="[{"demo":"comment"}]" data-viewid="main" data-group="main">second</span> paragraph</p><p class="author">This is an author</p>`}
+ value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the second paragraph</p><p class="author">This is an author</p>`}
layout={EditoriaLayout}
- TrackChange
+ // TrackChange
// onChange={source => console.log(source)}
user={user}
/>
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 294e15fb5..09caa7d42 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -1,5 +1,5 @@
-import { emDash, ellipsis } from "prosemirror-inputrules";
-import { columnResizing, tableEditing } from "prosemirror-tables";
+import { emDash, ellipsis } from 'prosemirror-inputrules';
+import { columnResizing, tableEditing } from 'prosemirror-tables';
import {
AnnotationToolGroupService,
ImageService,
@@ -20,37 +20,37 @@ import {
NoteService,
NoteToolGroupService,
TrackChangeService,
- CommentsService
-} from "wax-prosemirror-services";
+ CommentsService,
+} from 'wax-prosemirror-services';
-import { WaxSelectionPlugin } from "wax-prosemirror-plugins";
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
import invisibles, {
space,
hardBreak,
- paragraph
-} from "@guardian/prosemirror-invisibles";
+ paragraph,
+} from '@guardian/prosemirror-invisibles';
export default {
MenuService: [
{
- templateArea: "topBar",
+ templateArea: 'topBar',
toolGroups: [
- "Base",
+ 'Base',
{
- name: "Annotations",
- more: ["Superscript", "Subscript", "SmallCaps"]
+ name: 'Annotations',
+ more: ['Superscript', 'Subscript', 'SmallCaps'],
},
- "Notes",
- "Lists",
- "Images",
- "Tables"
- ]
+ 'Notes',
+ 'Lists',
+ 'Images',
+ 'Tables',
+ ],
},
{
- templateArea: "leftSideBar",
- toolGroups: ["Display", "Text"]
- }
+ templateArea: 'leftSideBar',
+ toolGroups: ['Display', 'Text'],
+ },
],
RulesService: [emDash, ellipsis],
@@ -60,7 +60,7 @@ export default {
columnResizing(),
tableEditing(),
invisibles([hardBreak()]),
- WaxSelectionPlugin
+ WaxSelectionPlugin,
],
// Always load first CommentsService and LinkService,
@@ -85,6 +85,6 @@ export default {
new ImageToolGroupService(),
new AnnotationToolGroupService(),
new NoteToolGroupService(),
- new ListToolGroupService()
- ]
+ new ListToolGroupService(),
+ ],
};
diff --git a/wax-prosemirror-components/src/components/comments/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js
index 27d74073a..0dbf293c2 100644
--- a/wax-prosemirror-components/src/components/comments/Comment.js
+++ b/wax-prosemirror-components/src/components/comments/Comment.js
@@ -14,7 +14,10 @@ export default ({ comment, activeView, user }) => {
const [commentAnnotation, setCommentAnnotation] = useState(comment);
const [commentInputValue, setcommentInputValue] = useState('');
const { state, dispatch } = activeView;
- const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(state, comment);
+ const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(
+ state,
+ comment,
+ );
const {
attrs: { conversation },
} = comment;
@@ -34,7 +37,12 @@ export default ({ comment, activeView, user }) => {
} = commentInput;
const { tr, doc } = state;
- const obj = { [user.username]: value };
+ const obj = {
+ content: value,
+ displayName: user.username,
+ timestamp: Math.floor(Date.now() / 300000),
+ };
+
commentAnnotation.attrs.conversation.push(obj);
allCommentsWithSameId.forEach(singleComment => {
@@ -79,12 +87,17 @@ export default ({ comment, activeView, user }) => {
let minPos = comment.pos;
allCommentsWithSameId.forEach(singleComment => {
- const markPosition = DocumentHelpers.findMarkPosition(activeView, singleComment.pos, 'comment');
+ const markPosition = DocumentHelpers.findMarkPosition(
+ activeView,
+ singleComment.pos,
+ 'comment',
+ );
if (markPosition.from < minPos) minPos = markPosition.from;
if (markPosition.to > maxPos) maxPos = markPosition.to;
});
- if (allCommentsWithSameId.length > 1) maxPos += last(allCommentsWithSameId).node.nodeSize;
+ if (allCommentsWithSameId.length > 1)
+ maxPos += last(allCommentsWithSameId).node.nodeSize;
dispatch(state.tr.removeMark(minPos, maxPos, commentMark));
activeView.focus();
};
@@ -121,7 +134,9 @@ export default ({ comment, activeView, user }) => {
<>
{conversation.map((singleComment, index) => {
return (
- <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${singleComment[user.username]}`}</SinlgeCommentRow>
+ <SinlgeCommentRow key={uuidv4()}>
+ {`${singleComment.displayName} : ${singleComment.content}`}
+ </SinlgeCommentRow>
);
})}
{commentInputReply()}
diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
index d01481851..40573224f 100644
--- a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
+++ b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
@@ -1,5 +1,5 @@
-import { Decoration, DecorationSet } from "prosemirror-view";
-import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin } from 'prosemirror-state';
const WaxSelectionPlugin = new Plugin({
state: {
@@ -8,18 +8,26 @@ const WaxSelectionPlugin = new Plugin({
},
apply(transaction, state, prevEditorState, editorState) {
const sel = transaction.curSelection;
- if (sel) {
+
+ // TODO fix the selection when a note is present.
+ let flag = false;
+ const difference = sel.$to.pos - sel.$from.pos;
+ editorState.doc.nodesBetween(sel.$from.pos, sel.$to.pos, (node, from) => {
+ if (node.type.name === 'footnote') flag = true;
+ });
+
+ if (sel && !flag) {
const decos = [
Decoration.inline(sel.$from.pos, sel.$to.pos, {
- class: "wax-selection-marker"
- })
+ class: 'wax-selection-marker',
+ }),
];
const deco = DecorationSet.create(editorState.doc, decos);
return { deco };
}
return state;
- }
+ },
},
props: {
decorations(state) {
@@ -27,8 +35,8 @@ const WaxSelectionPlugin = new Plugin({
return this.getState(state).deco;
}
return null;
- }
- }
+ },
+ },
});
export default WaxSelectionPlugin;
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index 74c1a7f63..614241f5f 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -1,3 +1,5 @@
+export { default as Service } from './src/Service';
+
export { default as componentPlugin } from './src/LayoutService/components/componentPlugin';
export { default as LayoutService } from './src/LayoutService/LayoutService';
export { default as MenuService } from './src/MenuService/MenuService';
--
GitLab