Merge branch 'answer-nodeview' into 'master'

Answer nodeview

See merge request !304

editors/demo/src/Editoria/Editoria.js

@@ -51,10 +51,10 @@ const Editoria = () => {
           value={demo}
           // readonly
           layout={layout}
-          onChange={debounce(source => {
-            console.log(source);
-          }, 200)}
-          onBlur={source => console.log(source)}
+          // onChange={debounce(source => {
+          //   console.log(source);
+          // }, 200)}
+          // onBlur={source => console.log(source)}
           user={user}
         />
       </>

editors/demo/src/Editors.js

@@ -54,7 +54,7 @@ const Editors = () => {
       case 'ncbi':
         break;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

editors/demo/src/HHMI/HHMI.js

@@ -183,7 +183,7 @@ const Hhmi = () => {
         config={config}
         autoFocus
         fileUpload={file => renderImage(file)}
-        value={initialValue}
+        value=""
         targetFormat="JSON"
         // readonly
         layout={HhmiLayout}

wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js

@@ -7,7 +7,7 @@ import React, {
   useCallback,
 } from 'react';
 import styled from 'styled-components';
-import { grid, th } from '@pubsweet/ui-toolkit';
+import { grid, override } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
@@ -43,6 +43,7 @@ const Wrapper = styled.div`
     position: relative;
     width: 0;
   }
+  ${override('Wax.CounterWrapper')}
 `;
 
 const DropWrapper = styled.div`
@@ -51,7 +52,9 @@ const DropWrapper = styled.div`
   position: absolute;
   top: 32px;
   width: max-content;
+  ${override('Wax.CounterDropWrapper')}
 `;
+
 const CounterInfoComponent = styled.div`
   background: #fff;
   border-radius: 1.03093% / 8%;
@@ -65,7 +68,9 @@ const CounterInfoComponent = styled.div`
   position: fixed;
   right: 31px;
   transform-origin: 50% 50% 0px;
+  ${override('Wax.CounterInfoComponent')}
 `;
+
 const Counter = styled.div`
   color: black;
   display: block;
@@ -73,6 +78,7 @@ const Counter = styled.div`
   height: 25px;
   margin: 5px;
   min-width: 150px;
+  ${override('Wax.Counters')}
 `;
 
 const EditorInfoTool = ({ view: { state }, item }) => {

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

@@ -36,8 +36,8 @@ const ToolGroupComponent = ({ view, tools, name }) => {
         {toolsShown}
         {rest.length > 0 && (
           <Dropdown
-            iconName="more"
             dropComponent={<DropWrapper>{rest}</DropWrapper>}
+            iconName="more"
             title="Show more tools"
           />
         )}

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

@@ -12,8 +12,8 @@ const ToolGroups = ({ toolGroups, view }) => {
     return (
       <ToolGroupComponent
         key={uuidv4()}
-        view={view}
         tools={toolGroup._tools}
+        view={view}
         // title={this.title}
         // name={name}
       />

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

@@ -34,7 +34,10 @@ const Dropdown = props => {
         disabled={disabled}
         iconName={iconName}
         label={label}
-        onMouseDown={() => setIsOpen(!isOpen)}
+        onMouseDown={event => {
+          event.preventDefault();
+          setIsOpen(!isOpen);
+        }}
         title={title}
       />
 

wax-prosemirror-core/src/Wax.js

@@ -34,6 +34,7 @@ const Wax = props => {
 
   const {
     autoFocus,
+    browserSpellCheck,
     className,
     debug,
     fileUpload,
@@ -95,17 +96,18 @@ const Wax = props => {
       <PortalProvider>
         <WaxView
           autoFocus={autoFocus}
+          browserSpellCheck={browserSpellCheck}
           debug={debug}
           fileUpload={fileUpload}
           onBlur={onBlur || (v => true)}
           onChange={finalOnChange || (v => true)}
           placeholder={placeholder}
           readonly={readonly}
+          serializer={serializer}
           targetFormat={targetFormat}
           TrackChange={TrackChange}
           user={user}
           value={value}
-          serializer={serializer}
         >
           {({ editor }) => <WaxRender className={className} editor={editor} />}
         </WaxView>

wax-prosemirror-core/src/WaxView.js

@@ -24,7 +24,15 @@ const WaxPortals = ComponentPlugin('waxPortals');
 let previousDoc;
 
 export default props => {
-  const { readonly, onBlur, debug, autoFocus, user, targetFormat } = props;
+  const {
+    browserSpellCheck,
+    readonly,
+    onBlur,
+    debug,
+    autoFocus,
+    user,
+    targetFormat,
+  } = props;
   const editorRef = useRef();
   let view;
   const [mounted, setMounted] = useState(false);
@@ -75,7 +83,7 @@ export default props => {
               return transformPasted(slice, view);
             },
             attributes: {
-              spellcheck: 'false',
+              spellcheck: browserSpellCheck ? 'true' : 'false',
             },
           },
         );

wax-prosemirror-schema/src/marks/strongMark.js

 const strong = {
   parseDOM: [
-    { tag: "strong" },
+    { tag: 'strong' },
+    // This works around a Google Docs misbehavior where
+    // pasted content will be inexplicably wrapped in `<b>`
+    // tags with a font-weight normal.
+    { tag: 'b', getAttrs: node => node.style.fontWeight !== 'normal' && null },
     {
-      tag: "b",
-      getAttrs: node => node.style.fontWeight != "normal" && null
-    }
-    // {
-    //   style: "font-weight",
-    //   getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
-    // }
+      style: 'font-weight',
+      getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
+    },
   ],
-  toDOM(hook, next) {
-    hook.value = ["strong", 0];
-    next();
-  }
+  toDOM() {
+    return ['strong', 0];
+  },
 };
 
 export default strong;

wax-prosemirror-services/src/InlineAnnotations/StrongService/StrongService.js

-import Service from "../../Service";
-import { toggleMark } from "prosemirror-commands";
-import { strongMark } from "wax-prosemirror-schema";
-import Strong from "./Strong";
+import Service from '../../Service';
+import { toggleMark } from 'prosemirror-commands';
+import { strongMark } from 'wax-prosemirror-schema';
+import Strong from './Strong';
 
 class StrongService extends Service {
   boot() {
-    const shortCuts = this.container.get("ShortCuts");
-    shortCuts.addShortCut({ "Mod-b": toggleMark(this.schema.marks.strong) });
+    const shortCuts = this.container.get('ShortCuts');
+    shortCuts.addShortCut({ 'Mod-b': toggleMark(this.schema.marks.strong) });
   }
 
   register() {
-    this.container.bind("Strong").to(Strong);
-    const createMark = this.container.get("CreateMark");
-    createMark(
-      {
-        strong: strongMark
-      },
-      { toWaxSchema: true }
-    );
+    this.container.bind('Strong').to(Strong);
+    const createMark = this.container.get('CreateMark');
+    createMark({
+      strong: strongMark,
+    });
   }
 }