active

editors/demo/src/OEN/OEN.js

@@ -25,7 +25,7 @@ const user = {
   username: 'admin',
 };
 
-const val = `<h3>33333</h3><aside class="tip"><p>hohoh</p></aside><section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
+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>`;

wax-prosemirror-components/src/components/OEN/OENAsideButton.js

+/* eslint react/prop-types: 0 */
+import React, { useContext, useMemo } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { wrapIn } from 'prosemirror-commands';
+import { liftTarget } from 'prosemirror-transform';
+import MenuButton from '../../ui/buttons/MenuButton';
+
+const OENAsideButton = ({ view = {}, item, type }) => {
+  const { active, icon, label, run, select, title } = item;
+
+  const {
+    app,
+    pmViews: { main },
+    activeViewId,
+    activeView,
+  } = useContext(WaxContext);
+
+  const { dispatch, state } = view;
+
+  const handleMouseDown = (e, editorState, editorDispatch) => {
+    e.preventDefault();
+
+    const { from, to } = main.state.selection;
+    let isInOenContainer = false;
+
+    main.state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type.name === 'oen_aside') {
+        isInOenContainer = true;
+      }
+    });
+
+    if (isInOenContainer) {
+      const range = main.state.selection.$from.blockRange(
+        main.state.selection.$to,
+      );
+      const target = range && liftTarget(range);
+      if (target == null) return false;
+      main.dispatch(main.state.tr.lift(range, target));
+    }
+
+    wrapIn(main.state.config.schema.nodes.oen_aside, {
+      class: type,
+    })(main.state, main.dispatch);
+
+    setTimeout(() => {
+      main.focus();
+    });
+  };
+
+  const isActive = !!active(state, activeViewId);
+  let isDisabled = !select(state, activeViewId, activeView);
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
+
+  const OENAsideButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isActive || false}
+        disabled={isDisabled}
+        iconName={icon}
+        label={label}
+        onMouseDown={e => handleMouseDown(e, view.state, view.dispatch)}
+        title={title}
+      />
+    ),
+    [isActive, isDisabled],
+  );
+
+  return OENAsideButtonComponent;
+};
+
+export default OENAsideButton;

wax-prosemirror-components/src/components/OEN/OENToolGroup.js

@@ -81,7 +81,10 @@ const OENToolGroup = ({ item }) => {
                       let isInOenContainer = false;
 
                       main.state.doc.nodesBetween(from, to, (node, pos) => {
-                        if (node.type.name === 'oen_container') {
+                        if (
+                          node.type.name === 'oen_container' ||
+                          node.type.name === 'oen_aside'
+                        ) {
                           isInOenContainer = true;
                         }
                       });

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

@@ -27,7 +27,16 @@ export default class OENAsideLongToolBiography extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('biography')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

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

@@ -27,7 +27,16 @@ export default class OENAsideLongToolCaseStudy extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('case-study')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

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

@@ -27,7 +27,16 @@ export default class OENAsideLongToolWorkedExample extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('worked-example')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

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

@@ -27,7 +27,16 @@ export default class OENAsideShortToolNote extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('note')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

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

@@ -27,7 +27,16 @@ export default class OENAsideShortToolReminder extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('reminder')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

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

@@ -26,6 +26,19 @@ export default class OENAsideShortToolTip extends Tools {
     };
   }
 
+  get active() {
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('tip')) active = true;
+        }
+      });
+      return active;
+    };
+  }
+
   renderTool(view) {
     if (isEmpty(view)) return null;
 

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

@@ -27,7 +27,16 @@ export default class OENAsideShortToolWarning extends Tools {
   }
 
   get active() {
-    return (state, OENToolsConfig) => {};
+    return state => {
+      const { from, to } = state.selection;
+      let active = false;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'oen_aside') {
+          if (node.attrs.class.includes('warning')) active = true;
+        }
+      });
+      return active;
+    };
   }
 
   renderTool(view) {

wax-prosemirror-services/src/WaxToolGroups/OENLeftToolGroupService/OENTools.js

@@ -43,7 +43,6 @@ class OENTools extends ToolGroup {
 
   renderTools(view) {
     if (isEmpty(view)) return null;
-    console.log(this._toolGroups[0]);
     const first = {
       id: '1',
       title: 'block level tools',