Merge branch 'multiple-configs' into 'master'

Multiple configs

See merge request !298

editors/demo/src/Editoria/Editoria.js

@@ -5,6 +5,7 @@ import { Wax } from 'wax-prosemirror-core';
 import { EditoriaLayout, EditoriaMobileLayout } from './layout';
 import { config, configMobile } from './config';
 import { demo } from './demo';
+import { debounce } from 'lodash';
 
 const renderImage = file => {
   const reader = new FileReader();
@@ -47,10 +48,13 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={`<p> some text</p><h2>h2</h2><h3>a head</h3><h4>fff</h4><h1>ttt</h1>`}
+          value={`<p class="paragraph"><span class="small-caps">some</span> text</p><h2>h2</h2><h3>a head</h3><h4>fff</h4><h1>ttt</h1>`}
           // readonly
           layout={layout}
-          // onChange={source => console.log(source)}
+          onChange={debounce(source => {
+            console.log(source);
+          }, 3000)}
+          onBlur={source => console.log(source)}
           user={user}
         />
       </>

wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js

@@ -7,7 +7,7 @@ import React, {
   useEffect,
 } from 'react';
 import styled from 'styled-components';
-import { grid, th } from '@pubsweet/ui-toolkit';
+import { grid, th, override } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
 import { WaxContext } from 'wax-prosemirror-core';
 import { filter, groupBy, debounce } from 'lodash';
@@ -53,24 +53,32 @@ const CharactersListComponent = styled.div`
   overflow-y: scroll;
   overflow-x: hidden;
   padding-top: ${grid(2)};
+
+  ${override('Wax.CharactersListComponent')}
 `;
 
 const SpecialCharactersGroup = styled.div`
   display: flex;
   flex-direction: column;
   padding-top: ${grid(2)};
+
+  ${override('Wax.SpecialCharactersGroup')}
 `;
 
 const GroupTitle = styled.div`
   font-size: 17px;
   color: ${th('colorPrimary')};
   padding: 0 ${grid(2)} ${grid(2)} ${grid(2)};
+
+  ${override('Wax.GroupTitle')}
 `;
 
 const GroupCharacters = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+
+  ${override('Wax.GroupCharacters')}
 `;
 
 const SpecialCharacter = styled.div`
@@ -95,6 +103,8 @@ const SpecialCharacter = styled.div`
       color: ${th('colorPrimary')};
     }
   }
+    ${override('Wax.SpecialCharacterButton')}
+
 `;
 
 // const LastUsedComponent = styled.div`

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { grid } from '@pubsweet/ui-toolkit';
+import { grid, override } from '@pubsweet/ui-toolkit';
 import MenuButton from './MenuButton';
 
 // font size 0 reason: https://stackoverflow.com/a/19212391
@@ -16,6 +16,8 @@ const DropWrapper = styled.div`
   background: white;
   margin-top: ${grid(1)};
   position: absolute;
+
+  ${override('Wax.MoreDropWrapper')}
 `;
 
 const Dropdown = props => {

wax-prosemirror-core/src/Wax.js

@@ -51,49 +51,45 @@ const Wax = props => {
   if (!application) return null;
   const WaxOnchange = onChange || (v => true);
 
-  const finalOnChange = schema =>
-    debounce(
-      content => {
-        /* HACK  alter toDOM of footnote, because of how PM treats inline nodes
+  const finalOnChange = schema => content => {
+    /* HACK  alter toDOM of footnote, because of how PM treats inline nodes
       with content */
 
-        const notes = [];
-        each(schema.nodes, node => {
-          if (node.groups.includes('notes')) notes.push(node);
-        });
-
-        if (notes.length > 0) {
-          notes.forEach(note => {
-            const old = schema.nodes[note.name].spec.toDOM;
-            schema.nodes[note.name].spec.toDOM = node => {
-              // eslint-disable-next-line prefer-rest-params
-              old.apply(this);
-              if (node) return [note.name, node.attrs, 0];
-            };
-          });
-        }
-
-        if (targetFormat === 'JSON') {
-          WaxOnchange(content);
-        } else {
-          const serialize = serializer(schema);
-          WaxOnchange(serialize(content));
-        }
-
-        if (notes.length > 0) {
-          notes.forEach(note => {
-            const old = schema.nodes[note.name].spec.toDOM;
-            schema.nodes[note.name].spec.toDOM = node => {
-              // eslint-disable-next-line prefer-rest-params
-              old.apply(this);
-              if (node) return [note.name, node.attrs];
-            };
-          });
-        }
-      },
-      1000,
-      { maxWait: 5000 },
-    );
+    const notes = [];
+    each(schema.nodes, node => {
+      if (node.groups.includes('notes')) notes.push(node);
+    });
+
+    if (notes.length > 0) {
+      notes.forEach(note => {
+        const old = schema.nodes[note.name].spec.toDOM;
+        schema.nodes[note.name].spec.toDOM = node => {
+          // eslint-disable-next-line prefer-rest-params
+          old.apply(this);
+          if (node) return [note.name, node.attrs, 0];
+        };
+      });
+    }
+
+    if (targetFormat === 'JSON') {
+      WaxOnchange(content);
+    } else {
+      const serialize = serializer(schema);
+      WaxOnchange(serialize(content));
+    }
+
+    if (notes.length > 0) {
+      notes.forEach(note => {
+        const old = schema.nodes[note.name].spec.toDOM;
+        schema.nodes[note.name].spec.toDOM = node => {
+          // eslint-disable-next-line prefer-rest-params
+          old.apply(this);
+          if (node) return [note.name, node.attrs];
+        };
+      });
+    }
+  };
+
   const TrackChange = application.config.get('config.EnableTrackChangeService');
 
   const Layout = application.container.get('Layout');
@@ -114,6 +110,7 @@ const Wax = props => {
           TrackChange={TrackChange}
           user={user}
           value={value}
+          serializer={serializer}
         >
           {({ editor }) => <WaxRender className={className} editor={editor} />}
         </WaxView>

wax-prosemirror-core/src/WaxView.js

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useMemo,
   useEffect,
+  useState,
 } from 'react';
 
 import applyDevTools from 'prosemirror-dev-tools';
@@ -21,11 +22,12 @@ import WaxOptions from './WaxOptions';
 const WaxPortals = ComponentPlugin('waxPortals');
 
 let previousDoc;
-let view;
+
 export default props => {
   const { readonly, onBlur, debug, autoFocus, user, targetFormat } = props;
   const editorRef = useRef();
-
+  let view;
+  const [mounted, setMounted] = useState(false);
   const context = useContext(WaxContext);
   const { createPortal } = useContext(PortalContext);
 
@@ -33,7 +35,7 @@ export default props => {
 
   const schema = context.app.getSchema();
 
-  if (!view) {
+  if (!mounted) {
     context.app.bootServices();
   }
 
@@ -63,9 +65,9 @@ export default props => {
             scrollThreshold: 200,
             handleDOMEvents: {
               blur: onBlur
-                ? // eslint-disable-next-line no-shadow
-                  view => {
-                    onBlur(view.state.doc.content);
+                ? editorView => {
+                    const serialize = props.serializer(schema);
+                    onBlur(serialize(editorView.state.doc.content));
                   }
                 : null,
             },
@@ -78,6 +80,8 @@ export default props => {
           },
         );
 
+        setMounted(true);
+
         context.updateView(
           {
             main: view,

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

@@ -6,8 +6,11 @@ const smallcaps = {
   parseDOM: [
     {
       tag: 'span.small-caps',
-      getAttrs(dom) {
-        return { class: dom.getAttribute('class') };
+      getAttrs(hook, next) {
+        Object.assign(hook, {
+          class: hook.dom.getAttribute('class'),
+        });
+        next();
       },
     },
   ],

wax-prosemirror-services/src/ShortCutsService/ShortCutsService.js

@@ -9,16 +9,23 @@ export default class ShortCutsService extends Service {
     shortCuts.createShortCuts();
   }
 
+  // TODO start ShortCuts as Schema is initiated
   register() {
     const { PmPlugins } = this.app;
     this.container
       .bind('ShortCuts')
       .toDynamicValue(() => {
-        const {
-          schema: { schema },
-        } = this.app;
+        if (this.app.schema) {
+          return new ShortCuts(
+            PmPlugins,
+            this.container.get('Schema').getSchema(),
+          );
+        }
 
-        return new ShortCuts(PmPlugins, schema);
+        return new ShortCuts(
+          PmPlugins,
+          this.container.get('Schema').getSchema(),
+        );
       })
       .inSingletonScope();
   }