Merge branch 'fixes' into 'master'

Fixes

See merge request !177

editors/editoria/src/Editoria.js

@@ -47,7 +47,7 @@ const Editoria = () => (
       // 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}
       // debug
-      onChange={source => console.log(source)}
+      // onChange={source => console.log(source)}
       user={user}
     />
   </Fragment>

wax-prosemirror-components/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror UI components",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-components/src/components/Button.js

@@ -28,7 +28,7 @@ const Button = ({ view = {}, item }) => {
 
   return (
     <MenuButton
-      active={isActive}
+      active={isActive || false}
       disabled={isDisabled}
       iconName={icon}
       label={label}

wax-prosemirror-components/src/components/comments/ConnectedComment.js

@@ -112,6 +112,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
     let minPos = comment.pos;
 
     allCommentsWithSameId.forEach(singleComment => {
+      console.log(singleComment.pos);
       const markPosition = DocumentHelpers.findMarkPosition(
         state,
         singleComment.pos,
@@ -120,9 +121,8 @@ export default ({ comment, top, commentId, recalculateTops }) => {
       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();
   };

wax-prosemirror-components/src/ui/buttons/Dropdown.js

@@ -9,11 +9,13 @@ import { grid } from '@pubsweet/ui-toolkit';
 const Wrapper = styled.div`
   font-size: 0;
   position: relative;
+  z-index: 2;
 `;
 
 const DropWrapper = styled.div`
   margin-top: ${grid(1)};
   position: absolute;
+  background: white;
 `;
 
 const Dropdown = props => {

wax-prosemirror-core/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror core",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-core/src/WaxView.js

@@ -52,7 +52,10 @@ export default props => {
         'main',
       );
       if (debug) applyDevTools(view);
-      if (autoFocus) view.focus();
+      if (autoFocus)
+        setTimeout(() => {
+          view.focus();
+        });
 
       return () => view.destroy();
     }
@@ -61,7 +64,6 @@ export default props => {
 
   const dispatchTransaction = transaction => {
     const { TrackChange } = props;
-
     const tr =
       TrackChange && TrackChange.enabled
         ? trackedTransaction(transaction, view.state, user)

wax-prosemirror-layouts/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror layouts",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-layouts/src/layouts/EditorElements.js

@@ -36,8 +36,7 @@ export default css`
   }
 
   .ProseMirror .wax-selection-marker {
-    background-color: ${th('colorPrimary')};
-    color: white;
+    background-color: ${th('colorSelection')};
   }
 
   div[contenteditable='false'] {
@@ -51,8 +50,9 @@ export default css`
     text-align: center;
     width: 17px;
     height: 17px;
-    background: black;
-    color: white;
+    background: white;
+    border-bottom: 2px solid black;
+    color: black;
     cursor: pointer;
   }
 
@@ -207,7 +207,7 @@ export default css`
 
   span.insertion {
     color: royalblue;
-    footnote: {
+    footnote {
       background: royalblue;
     }
   }
@@ -252,7 +252,7 @@ export default css`
 
     .active-comment {
       background-color: gold;
-      color: black;
+      /* color: black; */
     }
   }
 `;

wax-prosemirror-plugins/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror plugins",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-schema/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror schema",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-services/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror services",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-services/src/MenuService/MenuWrapper.js

@@ -2,9 +2,7 @@
 /* eslint react/prop-types: 0 */
 
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { map } from 'lodash';
-import { ToolGroupComponent, ToolGroups } from 'wax-prosemirror-components';
 
 const MainMenuBar = ({ items = [], view }) => {
   return <>{map(items, item => item.renderTools(view))}</>;

wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js

 import React from 'react';
 import { injectable, inject } from 'inversify';
 import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components';
-import ToolGroup from '../../lib/ToolGroup';
 import { isEmpty } from 'lodash';
 import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import ToolGroup from '../../lib/ToolGroup';
 
 const Empty = styled.div`
   background: khaki;
@@ -49,7 +50,7 @@ class DisplayText extends ToolGroup {
     };
 
     const tabList = [first, second];
-    return <Tabs tabList={tabList} />;
+    return <Tabs key={uuidv4()} tabList={tabList} />;
   }
 }
 

wax-prosemirror-themes/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror themes",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-themes/src/coko-theme/index.js

@@ -20,6 +20,7 @@ const cokoTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#ffc107',
   colorBackgroundToolBar: '#D9D9D9',
+  colorSelection: '#D3D3D3',
 
   /* Text variables */
 

wax-prosemirror-utilities/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.20",
   "description": "Wax prosemirror utilities",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-utilities/src/commands/Commands.js

@@ -33,9 +33,11 @@ const setBlockType = (nodeType, attrs = {}) => {
 const markActive = type => state => {
   const { from, $from, to, empty } = state.selection;
 
-  return empty
+  const mark = empty
     ? type.isInSet(state.storedMarks || $from.marks())
     : state.doc.rangeHasMark(from, to, type);
+  if (mark) return true;
+  return false;
 };
 
 const blockActive = (nodeType, attrs = {}) => {