diff --git a/editors/demo/src/OEN/OEN.js b/editors/demo/src/OEN/OEN.js
index 1d0b4bbd70624717adacd7bc63cf585a1108a122..797043a657cdf84baa746772abc252eecb36850a 100644
--- a/editors/demo/src/OEN/OEN.js
+++ b/editors/demo/src/OEN/OEN.js
@@ -4,7 +4,6 @@ import { Wax } from 'wax-prosemirror-core';
import { OenLayout } from './layout';
import { config } from './config';
-import { demo } from './demo';
import { debounce } from 'lodash';
const renderImage = file => {
@@ -26,7 +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>
+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>`;
diff --git a/editors/demo/src/OEN/config/config.js b/editors/demo/src/OEN/config/config.js
index 64267f80607bda24502346b592f74fffd44fc28c..251f0010cae155aeb16793c1e8e7db4f0632840c 100644
--- a/editors/demo/src/OEN/config/config.js
+++ b/editors/demo/src/OEN/config/config.js
@@ -46,6 +46,7 @@ import {
OENContainersService,
OENLeftToolGroupService,
OENContainersToolGroupService,
+ OENAsideToolGroupService,
} from 'wax-prosemirror-services';
import { EditoriaSchema } from 'wax-prosemirror-utilities';
diff --git a/editors/demo/src/OEN/demo.js b/editors/demo/src/OEN/demo.js
deleted file mode 100644
index 7b145a3585cd7a0df77baef80d78f77c1ec14801..0000000000000000000000000000000000000000
--- a/editors/demo/src/OEN/demo.js
+++ /dev/null
@@ -1 +0,0 @@
-export const demo = `<h1>Chapter Title</h1><h2>Notes with drag and drop</h2><p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis.<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> </span>Vestibulum non nibh at dolor sodales euismod.<footnote id=\"babccc4a-858e-4296-acf5-8f7f76857f82\">note 2 with <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">some</span> more content</footnote> Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit,<footnote id=\"151828f4-7a2a-4b8f-b50e-8f8821c8db57\">note 1 content<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> and tracked text</span></footnote> euismod sit amet tellus sed, molestie gravida tortor.</p><h2>Lists</h2><ol><li><p class=\"paragraph\">list item 1</p></li><li><p class=\"paragraph\">list <span class=\"comment\" data-id=\"6b46da14-ebc3-4398-a243-018d8c0f9c79\" data-conversation=\"[{"content":"demo comment","displayName":"demo","timestamp":1601559766164}]\" data-viewid=\"main\" data-group=\"main\">item</span> 2</p><p class=\"paragraph\">list item 2 second paragraph</p></li><li><p class=\"paragraph\">list item 3</p><ol><li><p class=\"paragraph\">nested 1</p></li><li><p class=\"paragraph\">nested 2</p></li><li><p class=\"paragraph\">nested 3</p></li></ol></li><li><p class=\"paragraph\">list item 4</p></li></ol><h2>Track Changes</h2><p class=\"paragraph\">Quisque posuere <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class=\"format-change\" data-id=\"37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5\" data-user=\"1234\" data-username=\"demo\" data-date=\"1609243477509\" data-before=\"[]\" data-after=\"["strong"]\" data-group=\"main\" data-viewid=\"main\">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. Duis ut volutpat nunc. Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class=\"paragraph\">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam<span class=\"insertion\" data-id=\"\" data-user=\"b3cfc28e-0f2e-45b5-b505-e66783d4f946\" data-username=\"admin\" data-date=\"0\" data-group=\"\" data-viewid=\"\" style=\"color: royalblue;\"> an addition</span> in aliquam ex.</p><h2>Code blocks</h2><pre data-params=\"\"><code>#include <iostream>\nint main(int argc, char *argv[]) {\n\n /* An annoying \"Hello World\" example */\n for (auto i = 0; i < 0xFFFF; i++)\n cout << \"Hello, World!\" << endl;\n\n char c = '\n';\n unordered_map <string, vector<string> > m;\n m[\"key\"] = \"\"; // this is an error\n\n return -2e3 + 12l;\n}</code></pre><h2>Tables</h2><table><tbody><tr><th colspan=\"4\"><p class=\"paragraph\">TABLE HEADER</p></th></tr><tr><td><p class=\"paragraph\">a <span class=\"comment\" data-id=\"dbc46918-f926-4126-85c7-2a6876d24528\" data-conversation=\"[{"content":"comment","displayName":"demo","timestamp":1601559775708}]\" data-viewid=\"main\" data-group=\"main\">random</span> value</p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\">another one</p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr></tbody></table><p class=\"paragraph\">Integer eu ornare turpis, vel faucibus augue. Integer tempus sed nisl ac tempus. Vivamus iaculis tempor nisl ut congue. Ut nec sollicitudin magna. Morbi consequat ultricies ligula, vel egestas lorem. Nulla volutpat lectus lectus, eu feugiat nisl ultrices id. Donec suscipit, felis et eleifend ultricies, sem tortor fermentum libero, at elementum nisl nulla a odio. Ut ut tempus massa. Vestibulum porttitor nisl id velit dapibus, eget molestie ex placerat. Proin sagittis elit in nulla semper gravida. Sed laoreet rutrum fermentum.</p><h2>Math</h2><math-display class=\"math-node\">A = \\begin{bmatrix} x & y \\\\ z & w \\end{bmatrix}</math-display><p class=\"paragraph\"></p><p class=\"paragraph\">Quisque vel vehicula orci. Quisque congue accumsan mi, nec dapibus lectus interdum non. Curabitur consectetur pellentesque mattis. Etiam dignissim quam in dui pretium pulvinar. Vestibulum vehicula vulputate arcu quis luctus. Donec sollicitudin nisl a lacinia placerat. Sed elit odio, fermentum ac tempor eget, viverra et ipsum.</p>`;
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 42f0b5236bc9a66c66f78c9b5fde7176c1c5d493..ed41bf671546a8ff786c30388ee378b18462c211 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -34,3 +34,4 @@ export { default as CustomTagInlineOverlayComponent } from './src/components/cus
export { default as CustomTagBlockComponent } from './src/components/customtag/CustomTagBlockComponent';
export { default as SaveButton } from './src/components/SaveButton';
export { default as ReactDropDownStyles } from './src/helpers/ReactDropDownStyles';
+export { default as OENAsideButton } from './src/components/OEN/OENAsideButton';
diff --git a/wax-prosemirror-components/src/components/OEN/OENAsideButton.js b/wax-prosemirror-components/src/components/OEN/OENAsideButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..44523892299e84bd33ce9547af9f8b8e327980f2
--- /dev/null
+++ b/wax-prosemirror-components/src/components/OEN/OENAsideButton.js
@@ -0,0 +1,75 @@
+/* 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;
diff --git a/wax-prosemirror-components/src/components/OEN/OENToolGroup.js b/wax-prosemirror-components/src/components/OEN/OENToolGroup.js
index 58e2ce6a5887c8bfbc865ee46bb7ef004562fa79..b5d2c6f636f1880353f97143af1f9a2e04d0c851 100644
--- a/wax-prosemirror-components/src/components/OEN/OENToolGroup.js
+++ b/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;
}
});
diff --git a/wax-prosemirror-schema/src/nodes/oenNodes/OenAsideNode.js b/wax-prosemirror-schema/src/nodes/oenNodes/OenAsideNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..60b1cfa2cf7cf4efe831c1000f537f7e817eac3f
--- /dev/null
+++ b/wax-prosemirror-schema/src/nodes/oenNodes/OenAsideNode.js
@@ -0,0 +1,29 @@
+const OenAsideNode = {
+ content: 'block+',
+ group: 'block',
+ attrs: {
+ class: { default: '' },
+ },
+ defining: true,
+ parseDOM: [
+ {
+ tag: 'aside',
+ getAttrs(dom) {
+ return {
+ class: dom.getAttribute('class'),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ 'aside',
+ {
+ class: node.attrs.class,
+ },
+ 0,
+ ];
+ },
+};
+
+export default OenAsideNode;
diff --git a/wax-prosemirror-schema/src/nodes/oenNodes/index.js b/wax-prosemirror-schema/src/nodes/oenNodes/index.js
index 29c443ff092bb657291261e82460e9ef41513a8b..02aa03d340fdc57c0ee3f35e941a8e1a472862cd 100644
--- a/wax-prosemirror-schema/src/nodes/oenNodes/index.js
+++ b/wax-prosemirror-schema/src/nodes/oenNodes/index.js
@@ -1,7 +1,9 @@
+import OenAsideNode from './OenAsideNode';
import OenContainerNode from './OenContainerNode';
import OenSectionNode from './OenSectionNode';
export default {
oen_container: OenContainerNode,
oen_section: OenSectionNode,
+ oen_aside: OenAsideNode,
};
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolBiography.js b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolBiography.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9ab518f270f731473b60324095e4be9e8e714f9
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolBiography.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideLongToolBiography extends Tools {
+ title = 'long';
+ label = 'Biography';
+ name = 'OENAsideLongToolBiography';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('biography')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="long biography"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolCaseStudy.js b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolCaseStudy.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f636bf915bc7b6086bcaa26f507faf45ff05724
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolCaseStudy.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideLongToolCaseStudy extends Tools {
+ title = 'long';
+ label = 'Case Study';
+ name = 'OENAsideLongToolCaseStudy';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('case-study')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="long case-study"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolWorkedExample.js b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolWorkedExample.js
new file mode 100644
index 0000000000000000000000000000000000000000..13d2eb25aa8237f2deb5eab8e2871061017a9da5
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideLongToolWorkedExample.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideLongToolWorkedExample extends Tools {
+ title = 'long';
+ label = 'Worked Example';
+ name = 'OENAsideLongToolWorkedExample';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('worked-example')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="long worked-example"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolNote.js b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolNote.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2a35e455c3339131dbb0d5c7fa60bc702d74f5c
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolNote.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideShortToolNote extends Tools {
+ title = 'Note';
+ label = 'Note';
+ name = 'OENAsideShortToolNote';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('note')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="short note"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolReminder.js b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolReminder.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d647f8ef0e866d5d9823f9ad1da5bec6c1818ef
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolReminder.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideShortToolReminder extends Tools {
+ title = 'Reminder';
+ label = 'Reminder';
+ name = 'OENAsideShortToolReminder';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('reminder')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="short reminder"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolTip.js b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolTip.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2bd2e782116616f147831a254744c6a5e47ea8a
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolTip.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideShortToolTip extends Tools {
+ title = 'Tip';
+ label = 'Tip';
+ name = 'OENAsideShortToolTip';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="short tip"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolWarning.js b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolWarning.js
new file mode 100644
index 0000000000000000000000000000000000000000..23a2d577fe66ab79fc6b1c1c1f56b82d45decd84
--- /dev/null
+++ b/wax-prosemirror-services/src/OENContainersService/OENAsideShortToolWarning.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { OENAsideButton } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+@injectable()
+export default class OENAsideShortToolWarning extends Tools {
+ title = 'Warning';
+ label = 'Warning';
+ name = 'OENAsideShortToolWarning';
+
+ get run() {
+ return (state, dispatch, className) => {};
+ }
+
+ select = (state, activeViewId) => {
+ if (activeViewId !== 'main') return false;
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ 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('warning')) active = true;
+ }
+ });
+ return active;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+
+ return (
+ <OENAsideButton
+ item={this.toJSON()}
+ key={uuidv4()}
+ type="short warning"
+ view={view}
+ />
+ );
+ }
+}
diff --git a/wax-prosemirror-services/src/OENContainersService/OENContainersService.js b/wax-prosemirror-services/src/OENContainersService/OENContainersService.js
index 47ec854116f551f7c3ff48c0feef14f501a88862..836a99d7a76655bfa04dfc09757817970b6c35ff 100644
--- a/wax-prosemirror-services/src/OENContainersService/OENContainersService.js
+++ b/wax-prosemirror-services/src/OENContainersService/OENContainersService.js
@@ -1,6 +1,13 @@
import { OenNodes } from 'wax-prosemirror-schema';
import Service from '../Service';
import OENContainersTool from './OENContainersTool';
+import OENAsideLongToolCaseStudy from './OENAsideLongToolCaseStudy';
+import OENAsideLongToolBiography from './OENAsideLongToolBiography';
+import OENAsideLongToolWorkedExample from './OENAsideLongToolWorkedExample';
+import OENAsideShortToolNote from './OENAsideShortToolNote';
+import OENAsideShortToolTip from './OENAsideShortToolTip';
+import OENAsideShortToolWarning from './OENAsideShortToolWarning';
+import OENAsideShortToolReminder from './OENAsideShortToolReminder';
import './oenContainers.css';
class OENContainersService extends Service {
@@ -8,6 +15,27 @@ class OENContainersService extends Service {
register() {
this.container.bind('OENContainersTool').to(OENContainersTool);
+ this.container
+ .bind('OENAsideLongToolCaseStudy')
+ .to(OENAsideLongToolCaseStudy);
+ this.container
+ .bind('OENAsideLongToolBiography')
+ .to(OENAsideLongToolBiography);
+ this.container
+ .bind('OENAsideLongToolWorkedExample')
+ .to(OENAsideLongToolWorkedExample);
+
+ this.container.bind('OENAsideShortToolNote').to(OENAsideShortToolNote);
+ this.container.bind('OENAsideShortToolTip').to(OENAsideShortToolTip);
+
+ this.container
+ .bind('OENAsideShortToolWarning')
+ .to(OENAsideShortToolWarning);
+
+ this.container
+ .bind('OENAsideShortToolReminder')
+ .to(OENAsideShortToolReminder);
+
const createNode = this.container.get('CreateNode');
Object.keys(OenNodes).forEach(node => {
diff --git a/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js b/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js
index 8d2a2d321e3d411bb40db6f22ed4b26dc7c14db4..c8d5d71d3473b0985580d428c6afbce0648a564b 100644
--- a/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js
+++ b/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js
@@ -1,6 +1,4 @@
import { injectable } from 'inversify';
-import { wrapIn } from 'prosemirror-commands';
-import { liftTarget, findWrapping } from 'prosemirror-transform';
import Tools from '../lib/Tools';
@injectable()
diff --git a/wax-prosemirror-services/src/OENContainersService/oenContainers.css b/wax-prosemirror-services/src/OENContainersService/oenContainers.css
index 71133b75c6fa3edd2fec45f5776825aafc1ec0e5..0b71789bdaa544fbe1cc7b5f8c976054eebf8ea8 100644
--- a/wax-prosemirror-services/src/OENContainersService/oenContainers.css
+++ b/wax-prosemirror-services/src/OENContainersService/oenContainers.css
@@ -1,10 +1,11 @@
-div[data-type="content_structure_element"] {
+div[data-type="content_structure_element"],
+aside {
border-left: 3px solid #f5f5f7;
padding: 10px 10px 0 10px;
}
-div[data-type="content_structure_element"]::before {
+div[data-type="content_structure_element"]::before, aside::before {
border: 3px solid #f5f5f7;
background-color: #f5f5f7;
width: 100%;
@@ -13,6 +14,7 @@ div[data-type="content_structure_element"]::before {
.ProseMirror section {
position: relative;
+ display: block;
padding: 10px 10px 0 10px;
margin-top: 20px;
border: 3px solid #E2EBFF;
@@ -21,9 +23,9 @@ div[data-type="content_structure_element"]::before {
.ProseMirror section::before {
content: 'Section';
color: #c7d8fc;
+ height: 15px;
font-weight: bold;
position: absolute;
- display: inline-block;
bottom: 0;
top: -25px;
left: -3px;
@@ -83,4 +85,32 @@ content: 'Learning Objectives Section';
.content-opener-image::before {
content: 'Content Opener Image Section';
+}
+
+.note::before {
+ content: 'Note(short)';
+}
+
+.tip::before {
+ content: 'Tip(short)';
+}
+
+.warning::before {
+ content: 'Warning(short)';
+}
+
+.reminder::before {
+ content: 'Reminder(short)';
+}
+
+.case-study::before {
+ content: 'Case Study(long)';
+}
+
+.biography::before {
+ content: 'Biography(long)';
+}
+
+.worked-example::before {
+ content: 'Worked Example(long)';
}
\ No newline at end of file
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroup.js b/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroup.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a6824ed211417c9c8a1c55917ae3ff5d8866739
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroup.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { injectable, inject } from 'inversify';
+import { LeftMenuTitle } from 'wax-prosemirror-components';
+import ToolGroup from '../../lib/ToolGroup';
+
+@injectable()
+class OENAsideLongToolGroup extends ToolGroup {
+ tools = [];
+ title = (<LeftMenuTitle title="Long Boxes" />);
+
+ constructor(
+ @inject('OENAsideLongToolCaseStudy') OENAsideLongToolCaseStudy,
+ @inject('OENAsideLongToolBiography') OENAsideLongToolBiography,
+ @inject('OENAsideLongToolWorkedExample') OENAsideLongToolWorkedExample,
+ ) {
+ super();
+ this.tools = [
+ OENAsideLongToolCaseStudy,
+ OENAsideLongToolBiography,
+ OENAsideLongToolWorkedExample,
+ ];
+ }
+}
+
+export default OENAsideLongToolGroup;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e072c00685c3762c35ce0e9fb7b7a1fd5496b2c
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENAsideLongToolGroupService/OENAsideLongToolGroupService.js
@@ -0,0 +1,10 @@
+import Service from '../../Service';
+import OENAsideLongToolGroup from './OENAsideLongToolGroup';
+
+class OENAsideLongToolGroupService extends Service {
+ register() {
+ this.container.bind('OENAsideLongToolGroup').to(OENAsideLongToolGroup);
+ }
+}
+
+export default OENAsideLongToolGroupService;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroup.js b/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroup.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1c3d77436dd7dd22d4f158a63594dfd8c1b5254
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroup.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { injectable, inject } from 'inversify';
+import { LeftMenuTitle } from 'wax-prosemirror-components';
+import ToolGroup from '../../lib/ToolGroup';
+
+@injectable()
+class OENAsideShortToolGroup extends ToolGroup {
+ tools = [];
+ title = (<LeftMenuTitle title="Short Boxes" />);
+
+ constructor(
+ @inject('OENAsideShortToolNote') OENAsideShortToolNote,
+ @inject('OENAsideShortToolTip') OENAsideShortToolTip,
+ @inject('OENAsideShortToolWarning') OENAsideShortToolWarning,
+ @inject('OENAsideShortToolReminder') OENAsideShortToolReminder,
+ ) {
+ super();
+ this.tools = [
+ OENAsideShortToolNote,
+ OENAsideShortToolTip,
+ OENAsideShortToolWarning,
+ OENAsideShortToolReminder,
+ ];
+ }
+}
+
+export default OENAsideShortToolGroup;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..19345c7b21b54df754ee97ddedc56829cbd460a5
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENAsideShortToolGroupService/OENAsideShortToolGroupService.js
@@ -0,0 +1,10 @@
+import Service from '../../Service';
+import OENAsideShortToolGroup from './OENAsideShortToolGroup';
+
+class OENAsideShortToolGroupService extends Service {
+ register() {
+ this.container.bind('OENAsideShortToolGroup').to(OENAsideShortToolGroup);
+ }
+}
+
+export default OENAsideShortToolGroupService;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroup.js b/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroup.js
index b3e265b90d112605a6398d896936cb1792324ff2..74fcb00a94b6dd0865ddc2ddac2731cf04f4f100 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroup.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroup.js
@@ -1,10 +1,8 @@
-import React from 'react';
import { injectable, inject } from 'inversify';
-import { LeftMenuTitle } from 'wax-prosemirror-components';
import ToolGroup from '../../lib/ToolGroup';
@injectable()
-class Display extends ToolGroup {
+class OENContainersToolGroup extends ToolGroup {
tools = [];
title = 'OEN Containers';
@@ -14,4 +12,4 @@ class Display extends ToolGroup {
}
}
-export default Display;
+export default OENContainersToolGroup;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroupService.js
index f3007edc8e333f3a95387d9fbdb6c899fd5c5fd8..e49f413141dc608cc1d26c4b5f8e82e1fb7cf207 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroupService.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENContainersToolGroupService/OENContainersToolGroupService.js
@@ -1,10 +1,17 @@
import Service from '../../Service';
import OENContainersToolGroup from './OENContainersToolGroup';
+import OENAsideShortToolGroupService from '../OENAsideShortToolGroupService/OENAsideShortToolGroupService';
+import OENAsideLongToolGroupService from '../OENAsideLongToolGroupService/OENAsideLongToolGroupService';
class OENContainersToolGroupService extends Service {
register() {
this.container.bind('OENContainersToolGroup').to(OENContainersToolGroup);
}
+
+ dependencies = [
+ new OENAsideShortToolGroupService(),
+ new OENAsideLongToolGroupService(),
+ ];
}
export default OENContainersToolGroupService;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/OENLeftToolGroupService/OENTools.js b/wax-prosemirror-services/src/WaxToolGroups/OENLeftToolGroupService/OENTools.js
index e0cf3b748e3a59c80597cee407ec7ae6d067ebf6..ff1603d2d9088a3f0f7afb3e2522613c3e5a7f83 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/OENLeftToolGroupService/OENTools.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/OENLeftToolGroupService/OENTools.js
@@ -19,6 +19,8 @@ class OENTools extends ToolGroup {
constructor(
@inject('OENContainersToolGroup') OENContainersToolGroup,
+ @inject('OENAsideShortToolGroup') OENAsideShortToolGroup,
+ @inject('OENAsideLongToolGroup') OENAsideLongToolGroup,
@inject('Display') display,
@inject('Text') text,
@inject('CustomTagBlockToolGroup') blockTag,
@@ -27,7 +29,14 @@ class OENTools extends ToolGroup {
this.toolGroups = [
{
name: 'TabA',
- groups: [OENContainersToolGroup, display, text, blockTag],
+ groups: [
+ OENContainersToolGroup,
+ OENAsideShortToolGroup,
+ OENAsideLongToolGroup,
+ display,
+ text,
+ blockTag,
+ ],
},
];
}