diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index a1187692dce33a230e0a4905560553ed9b79b022..319094f1a7c8abbc3b3c5b71224b78a255949f01 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -23,6 +23,8 @@ import {
CommentsService
} from "wax-prosemirror-services";
+import { WaxSelectionPlugin } from "wax-prosemirror-plugins";
+
import invisibles, {
space,
hardBreak,
@@ -54,7 +56,12 @@ export default {
RulesService: [emDash, ellipsis],
ShortCutsService: {},
- PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
+ PmPlugins: [
+ columnResizing(),
+ tableEditing(),
+ invisibles([hardBreak()]),
+ WaxSelectionPlugin
+ ],
// Always load first CommentsService and LinkService,
//as it matters on how PM treats nodes and marks
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index e9fed7f0484b6ca37c8de7a08b7502e8a152e744..09d3049f2352a966c544478bdb38e84fcb76c6f4 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": "index.js",
+ "main": "dist/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/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0b9f1205733c0608d4235014ca0774e1299046d
--- /dev/null
+++ b/wax-prosemirror-components/src/components/comments/Comment.js
@@ -0,0 +1,92 @@
+import React, {
+ Fragment,
+ useState,
+ useEffect,
+ useContext,
+ useRef
+} from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core";
+import { DocumentHelpers } from "wax-prosemirror-utilities";
+
+const SinlgeCommentRow = styled.div`
+ padding: 4px;
+ border-bottom: 1px solid #ffab20;
+`;
+
+export default ({ comment, activeView, user }) => {
+ const commentInput = useRef(null);
+ const [currentUser, setCurrentuser] = useState(user);
+ const [commentAnnotation, setCommentAnnotation] = useState(comment);
+ const [commentInputValue, setcommentInputValue] = useState("");
+ const { state, dispatch } = activeView;
+ const { attrs: { conversation } } = comment;
+
+ const handleKeyDown = event => {
+ if (event.key === "Enter" || event.which === 13) {
+ saveComment();
+ }
+ };
+
+ const saveComment = () => {
+ const { current: { value } } = commentInput;
+ const { tr, doc } = state;
+ const commentMark = state.schema.marks.comment;
+
+ const obj = { [user.username]: value };
+ commentAnnotation.attrs.conversation.push(obj);
+ const actualComment = DocumentHelpers.findMark(state, commentMark);
+
+ dispatch(
+ tr.addMark(
+ actualComment.from,
+ actualComment.to,
+ commentMark.create({
+ ...((commentAnnotation && commentAnnotation.attrs) || {}),
+ conversation: commentAnnotation.attrs.conversation
+ })
+ )
+ );
+ setcommentInputValue("");
+ };
+
+ const updateCommentInputValue = () => {
+ const { current: { value } } = commentInput;
+ setcommentInputValue(value);
+ };
+
+ const commentInputReply = () => {
+ return (
+ <Fragment>
+ <input
+ type="text"
+ ref={commentInput}
+ placeholder="add a new comment"
+ onChange={updateCommentInputValue}
+ onKeyPress={handleKeyDown}
+ autoFocus
+ value={commentInputValue}
+ />
+ <button onClick={saveComment}>Post</button>
+ <button>Cancel</button>
+ </Fragment>
+ );
+ };
+
+ return conversation.length === 0 ? (
+ <Fragment>{commentInputReply()}</Fragment>
+ ) : (
+ <Fragment>
+ {conversation.map((singleComment, index) => {
+ return (
+ <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${
+ singleComment[user.username]
+ }`}</SinlgeCommentRow>
+ );
+ })}
+ {commentInputReply()}
+ </Fragment>
+ );
+};
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index e17cc74892d0c3a51d28c06df55e90035e209651..1f8d67f404a7f6d5dd8774eaf93ffeac5fe49b5a 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -9,6 +9,7 @@ import React, {
import { Transition } from "react-transition-group";
import styled from "styled-components";
import { WaxContext } from "wax-prosemirror-core";
+import Comment from "./Comment";
const CommentBoxStyled = styled.div`
display: flex;
@@ -37,11 +38,7 @@ export default ({ comment, view, top, dataBox }) => {
const { view: { main: { props: { user } } }, app, activeView } = useContext(
WaxContext
),
- { state, dispatch } = activeView,
- commentInput = useRef(null),
[animate, setAnimate] = useState(false),
- [commentAnnotation, setCommentAnnotation] = useState(comment),
- [currentUser, setCurrentuser] = useState(user),
{ attrs: { id } } = comment,
activeCommentPlugin = app.PmPlugins.get("activeComment"),
activeComment = activeCommentPlugin.getState(activeView.state).comment;
@@ -52,32 +49,6 @@ export default ({ comment, view, top, dataBox }) => {
setAnimate(true);
}, []);
- const handleKeyDown = event => {
- if (event.key === "Enter" || event.which === 13) {
- saveComment();
- }
- };
-
- const saveComment = () => {
- const { current: { value } } = commentInput;
- const { tr, doc } = state;
- const commentMark = state.schema.marks.comment;
-
- const obj = { [user.username]: value };
- commentAnnotation.attrs.conversation.push(obj);
-
- dispatch(
- tr.addMark(
- commentAnnotation.pos,
- commentAnnotation.pos + commentAnnotation.node.nodeSize,
- commentMark.create({
- ...((commentAnnotation && commentAnnotation.attrs) || {}),
- conversation: commentAnnotation.attrs.conversation
- })
- )
- );
- };
-
return (
<Fragment>
<Transition in={animate} timeout={1000}>
@@ -88,17 +59,12 @@ export default ({ comment, view, top, dataBox }) => {
data-box={dataBox}
active={active}
>
- <div>
- <input
- type="text"
- ref={commentInput}
- placeholder="add a new comment"
- onKeyPress={handleKeyDown}
- autoFocus
- />
- <button onClick={saveComment}>Post</button>
- <button>Cancel</button>
- </div>
+ <Comment
+ comment={comment}
+ active={active}
+ activeView={activeView}
+ user={user}
+ />
</CommentBoxStyled>
)}
</Transition>
diff --git a/wax-prosemirror-components/src/components/link/LinkComponent.js b/wax-prosemirror-components/src/components/link/LinkComponent.js
index a7ac13a3b2ecdc9c3740a01b6571fc4a4308fada..c44c989fe393ce578cf4a4da3f3fc7b7810b8fcc 100644
--- a/wax-prosemirror-components/src/components/link/LinkComponent.js
+++ b/wax-prosemirror-components/src/components/link/LinkComponent.js
@@ -19,7 +19,6 @@ const Button = styled.button`
`;
const LinkComponent = ({ mark, setPosition, position }) => {
- console.log(mark);
const href = mark ? mark.attrs.href : null,
linkMark = mark ? mark : null,
{ view: { main }, activeView } = useContext(WaxContext),
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index 4eae5f947e1c1c93273d180ac1b32035d62a873c..fe0fc66e1504872deb8251c24ebfc3d723a9d9a0 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -156,7 +156,6 @@ const updateMarks = view => {
mark.type.name === "format_change"
) {
mark.pos = node.pos;
- mark.node = node.node;
finalMarks.push(mark);
}
});
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index c1412d604367b242c795e7532062b1249beb064b..bac2a33832a2ae4826439eae8ec4999fa0b38630 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": "index.js",
+ "main": "dist/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 cd8e9ef1b36d7d6bef78121083b09530a1c9af0f..743f1596f5d2c18ce94e43828be0777013ee5b9e 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": "index.js",
+ "main": "dist/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 9fa4996bc4def8a2fbf810e48d0659b0eae86444..b8f77fd859b29292509e668cf65d0db763dde615 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -10,6 +10,12 @@ export default css`
outline: none;
}
}
+
+ .ProseMirror .wax-selection-marker {
+ background: #0a78ff;
+ color: white;
+ }
+
.ProseMirror footnote {
font-size: 0;
display: inline-block;
@@ -28,6 +34,7 @@ export default css`
font-size: 16px;
counter-increment: footnote;
}
+
hr {
padding: 2px 10px;
border: none;
diff --git a/wax-prosemirror-plugins/index.js b/wax-prosemirror-plugins/index.js
index 162ffb9f999494e3ef9cb71660dd2a378aa3bba5..aceed8d2f7e65b45b655590e393fd66f0b636c01 100644
--- a/wax-prosemirror-plugins/index.js
+++ b/wax-prosemirror-plugins/index.js
@@ -3,3 +3,4 @@ export {
} from "./src/trackChanges/TrackChangePlugin";
export { default as ActiveComment } from "./src/comments/ActiveComment";
+export { default as WaxSelectionPlugin } from "./src/WaxSelectionPlugin";
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 823c5561fc5c64b970af7ea6b314bd4c6bfbfb5c..4d356e9549761f3c054ef49c0c0350df4e7f40b2 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": "index.js",
+ "main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
new file mode 100644
index 0000000000000000000000000000000000000000..d01481851c4e35485f854fa6dab701770591380a
--- /dev/null
+++ b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
@@ -0,0 +1,34 @@
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+
+const WaxSelectionPlugin = new Plugin({
+ state: {
+ init(config, instance) {
+ return { deco: DecorationSet.empty };
+ },
+ apply(transaction, state, prevEditorState, editorState) {
+ const sel = transaction.curSelection;
+ if (sel) {
+ const decos = [
+ Decoration.inline(sel.$from.pos, sel.$to.pos, {
+ class: "wax-selection-marker"
+ })
+ ];
+ const deco = DecorationSet.create(editorState.doc, decos);
+ return { deco };
+ }
+
+ return state;
+ }
+ },
+ props: {
+ decorations(state) {
+ if (state && this.getState(state)) {
+ return this.getState(state).deco;
+ }
+ return null;
+ }
+ }
+});
+
+export default WaxSelectionPlugin;
diff --git a/wax-prosemirror-schema/package.json b/wax-prosemirror-schema/package.json
index 02b4770200b291befb4324c02d84012d1bfa9e3f..a6265ae0ae40153878c7112b04cc433d96a665c7 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": "index.js",
+ "main": "dist/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 f639604af144dc8009c83b952919699f4f29c897..8495b9f2066725c170be0929a0f2372da5a2cfe6 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": "index.js",
+ "main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json
index 29cacc3234ecf10baa4b0befa7fa33d792aab2c8..d7b01be25765401e017a693c7fc9b9676defe5de 100644
--- a/wax-prosemirror-themes/package.json
+++ b/wax-prosemirror-themes/package.json
@@ -4,7 +4,7 @@
"version": "0.0.8",
"description": "Wax prosemirror themes",
"license": "MIT",
- "main": "index.js",
+ "main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "BABEL_ENV=production rollup -c"
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index add04696cd415c711032d9afa82b42104f3853d2..7649c7642f7e7fad75286ca694a35301a767d5ae 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": "index.js",
+ "main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "BABEL_ENV=production rollup -c"