Merge branch 'hhmi-fixes' into 'master'

Hhmi fixes

See merge request !407

editors/demo/src/Editoria/layout/EditoriaLayout.js

@@ -47,7 +47,7 @@ const Wrapper = styled.div`
 const Main = styled.div`
   display: flex;
   flex-grow: 1;
-  height: calc(100% - 40px);
+  height: 100%;
 `;
 
 const TopMenu = styled.div`

editors/demo/src/Editors.js

@@ -73,7 +73,7 @@ const Editors = () => {
       case 'oen':
         return <OEN />;
       default:
-        return <OEN />;
+        return <HHMI />;
     }
   };
 

editors/demo/src/OEN/OEN.js

@@ -25,10 +25,7 @@ const user = {
   username: 'admin',
 };
 
-const val = `<h3>33333</h3>><section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
-              <div class="outline" data-type="content_structure_element"><p>outline</p></div></section>
-              <section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
-              <div class="outline" data-type="content_structure_element"><p>outline</p></div></section>`;
+const val = `<p>first paragraph</p><section class=\"whatever\"><h2>Section 1 heading 2</h2><p class=\"paragraph\">normal text</p></section><section class=\"whatever\"><h2>Section 2 heading 2</h2><p class=\"paragraph\">normal text</p></section><section class=\"whatever\"><p class=\"paragraph\">some normal text</p><p class=\"paragraph\">more normal text</p></section><section class=\"whatever\"><h2>Section 4 heading 2</h2><p class=\"paragraph\">normal text</p></section><p class=\"paragraph\">some text</p><div class=\"outline\" data-type=\"content_structure_element\"><p class=\"paragraph\"></p></div>`;
 
 const Oen = () => {
   const editorRef = useRef();

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

@@ -9,6 +9,7 @@ import CommentBox from '../../ui/comments/CommentBox';
 
 const ConnectedCommentStyled = styled.div`
   margin-left: ${props => (props.active ? `${-20}px` : `${50}px`)};
+  transition: ${props => (props.active ? `all 1s` : `all 0.5s`)};
   position: absolute;
   width: 200px;
   @media (max-width: 600px) {

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

@@ -472,4 +472,10 @@ export default {
       <path d="M17 5H20L18.5 7L17 5M3 2H21C22.11 2 23 2.9 23 4V8C23 9.11 22.11 10 21 10H16V20C16 21.11 15.11 22 14 22H3C1.9 22 1 21.11 1 20V4C1 2.9 1.9 2 3 2M3 4V8H14V4H3M21 8V4H16V8H21M3 20H14V10H3V20M5 12H12V14H5V12M5 16H12V18H5V16Z" />
     </Svg>
   ),
+  refresh: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Refresh List</title>
+      <path d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z" />{' '}
+    </Svg>
+  ),
 };

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

@@ -8,6 +8,7 @@ import OENAsideShortToolNote from './OENAsideShortToolNote';
 import OENAsideShortToolTip from './OENAsideShortToolTip';
 import OENAsideShortToolWarning from './OENAsideShortToolWarning';
 import OENAsideShortToolReminder from './OENAsideShortToolReminder';
+import PopulateHeadingsComponent from './PopulateHeadingsComponent';
 import './oenContainers.css';
 
 class OENContainersService extends Service {
@@ -43,6 +44,20 @@ class OENContainersService extends Service {
         [node]: OenNodes[node],
       });
     });
+
+    const createOverlay = this.container.get('CreateOverlay');
+
+    createOverlay(
+      PopulateHeadingsComponent,
+      {},
+      {
+        nodeType: 'oen_container',
+        findInParent: true,
+        markType: '',
+        followCursor: false,
+        selection: false,
+      },
+    );
   }
 }
 

wax-prosemirror-services/src/OENContainersService/PopulateHeadingsComponent.js

+/* eslint-disable react/prop-types */
+import React, { useContext, useLayoutEffect } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DOMParser } from 'prosemirror-model';
+import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
+import { Selection } from 'prosemirror-state';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+
+const StyledButton = styled.span`
+  cursor: pointer;
+`;
+
+const StyledIcon = styled(Icon)`
+  cursor: pointer;
+  position: relative;
+  height: 23px;
+  width: 23px;
+  bottom: 5px;
+`;
+
+const elementFromString = string => {
+  const wrappedValue = `<body>${string}</body>`;
+
+  return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body;
+};
+
+const selectionToInsertionEnd = (tr, startLen, bias) => {
+  const last = tr.steps.length - 1;
+
+  if (last < startLen) {
+    return;
+  }
+
+  const step = tr.steps[last];
+
+  if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep)) {
+    return;
+  }
+
+  const map = tr.mapping.maps[last];
+  let end = 0;
+
+  map.forEach((_from, _to, _newFrom, newTo) => {
+    if (end === 0) {
+      end = newTo;
+    }
+  });
+  tr.setSelection(Selection.near(tr.doc.resolve(end), bias));
+};
+
+export default ({ setPosition, position }) => {
+  const context = useContext(WaxContext);
+  const {
+    activeView,
+    pmViews: { main },
+  } = context;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  useLayoutEffect(() => {
+    const outlineSection = document
+      .getElementsByClassName('outline')[0]
+      .getBoundingClientRect();
+    const WaxSurface = activeView.dom.getBoundingClientRect();
+    const left = outlineSection.width;
+    const top = outlineSection.top - WaxSurface.top + 18;
+    setPosition({ ...position, left, top });
+  }, [position.left]);
+
+  const generateHeadings = () => {
+    const {
+      tr,
+      selection: { from, to },
+      doc,
+    } = main.state;
+
+    const allSectionNodes = [];
+    const sectionHeadings = {};
+
+    doc.descendants((editorNode, index) => {
+      if (editorNode.type.name === 'oen_section') {
+        allSectionNodes.push(editorNode);
+      }
+    });
+
+    allSectionNodes.forEach((node, index) => {
+      node.content.content.forEach(contentNode => {
+        if (contentNode.type.name === 'heading2') {
+          sectionHeadings[index] = contentNode.textContent;
+        } else if (!sectionHeadings[index]) {
+          sectionHeadings[index] = 'untitled';
+        }
+      });
+    });
+
+    let sectionNode;
+    let sectionNodePosition;
+
+    let content = `<ul>`;
+
+    Object.keys(sectionHeadings).forEach(index => {
+      content += `<li>${sectionHeadings[index]}</li>`;
+    });
+
+    content += `</ul>`;
+
+    main.state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type.name === 'oen_container') {
+        sectionNode = node;
+        sectionNodePosition = pos;
+      }
+    });
+
+    const parser = DOMParser.fromSchema(main.state.config.schema);
+    const parsedContent = parser.parse(elementFromString(content));
+
+    tr.replaceWith(
+      sectionNodePosition + 1,
+      sectionNodePosition + sectionNode.content.size,
+      parsedContent,
+    );
+    selectionToInsertionEnd(tr, tr.steps.length - 1, -1);
+    main.dispatch(tr);
+  };
+
+  if (!readOnly) {
+    return (
+      <StyledButton onClick={generateHeadings} type="button">
+        <StyledIcon name="refresh" />
+      </StyledButton>
+    );
+  }
+};

wax-prosemirror-services/src/OENContainersService/oenContainers.css

@@ -9,6 +9,7 @@ div[data-type="content_structure_element"]::before, aside::before {
     border: 3px solid #f5f5f7;
     background-color: #f5f5f7;
     width: 100%;
+    position: relative;
     display: block;
 }
 

wax-prosemirror-services/src/OverlayService/usePosition.js

@@ -21,7 +21,7 @@ export default options => {
   });
 
   let mark = {};
-  let node = {};
+  let node = '';
   /* Sets Default position at the end of the annotation. You
   can overwrite the default position in your component.
   Check: wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
@@ -53,11 +53,10 @@ export default options => {
   };
 
   const displayOnNode = (focusedView, overlayOptions) => {
-    const { nodeType, followCursor } = overlayOptions;
+    const { nodeType, followCursor, findInParent } = overlayOptions;
     const PMnode = focusedView.state.schema.nodes[nodeType];
 
-    node = DocumentHelpers.findNode(focusedView.state, PMnode);
-
+    node = DocumentHelpers.findNode(focusedView.state, PMnode, findInParent);
     if (!isObject(node)) return defaultOverlay;
     const { from, to } = followCursor ? focusedView.state.selection : node;
 

wax-prosemirror-services/src/TrackChangeService/track-changes/helpers/replaceAroundStep.js

@@ -14,6 +14,8 @@ const replaceAroundStep = (
   date,
   group,
   viewId,
+  originalStep,
+  originalStepIndex,
 ) => {
   if (step.from === step.gapFrom && step.to === step.gapTo) {
     // wrapped in something
@@ -21,9 +23,11 @@ const replaceAroundStep = (
     const from = step.getMap().map(step.from, -1);
     const to = step.getMap().map(step.gapFrom);
     markInsertion(newTr, from, to, user, date, group);
-  } else if (!step.slice.size) {
+  } else if (!step.slice.size || step.slice.content.content.length === 2) {
+    const invertStep = originalStep.invert(tr.docs[originalStepIndex]).map(map);
     // unwrapped from something
-    map.appendMap(step.invert(doc).getMap());
+    map.appendMap(invertStep.getMap());
+    // map.appendMap(step.invert(doc).getMap());
     map.appendMap(
       markDeletion(newTr, step.from, step.gapFrom, user, date, group),
     );

wax-prosemirror-services/src/TrackChangeService/track-changes/helpers/replaceStep.js

@@ -15,6 +15,8 @@ const replaceStep = (
   date,
   group,
   viewId,
+  originalStep,
+  originalStepIndex,
 ) => {
   const deletionMarkSchema = state.schema.marks.deletion;
   const deletionMark = DocumentHelpers.findMark(
@@ -32,7 +34,9 @@ const replaceStep = (
   );
 
   // We didn't apply the original step in its original place. We adjust the map accordingly.
-  map.appendMap(step.invert(doc).getMap());
+  const invertStep = originalStep.invert(tr.docs[originalStepIndex]).map(map);
+  map.appendMap(invertStep.getMap());
+  // map.appendMap(step.invert(doc).getMap());
   if (newStep) {
     const trTemp = state.apply(newTr).tr;
     if (trTemp.maybeStep(newStep).failed) {

wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js

@@ -56,7 +56,7 @@ const trackedTransaction = (
   const map = new Mapping();
   const date = Math.floor(Date.now());
 
-  tr.steps.forEach(originalStep => {
+  tr.steps.forEach((originalStep, originalStepIndex) => {
     const step = originalStep.map(map);
     const { doc } = newTr;
     if (!step) return;
@@ -74,6 +74,8 @@ const trackedTransaction = (
           date,
           group,
           viewId,
+          originalStep,
+          originalStepIndex,
         );
         break;
       case ReplaceAroundStep:
@@ -88,6 +90,8 @@ const trackedTransaction = (
           date,
           group,
           viewId,
+          originalStep,
+          originalStepIndex,
         );
         break;
       case AddMarkStep:

wax-prosemirror-utilities/src/document/DocumentHelpers.js

@@ -27,9 +27,29 @@ const findMark = (state, PMmark, toArr = false) => {
   return markFound;
 };
 
-const findNode = (state, PMnode) => {
+const findNode = (state, PMnode, findInParent) => {
   let nodeFound;
-  if (state.selection.node && state.selection.node.type.name === PMnode.name) {
+  if (findInParent) {
+    state.doc.nodesBetween(
+      state.selection.from,
+      state.selection.to,
+      (node, pos) => {
+        if (
+          node.type.name === 'oen_container' &&
+          node.attrs.class === 'outline'
+        ) {
+          nodeFound = {
+            from: state.selection.from,
+            to: state.selection.to,
+            node,
+          };
+        }
+      },
+    );
+  } else if (
+    state.selection.node &&
+    state.selection.node.type.name === PMnode.name
+  ) {
     nodeFound = {
       from: state.selection.from,
       to: state.selection.to,