new oen elements

editors/demo/src/OEN/OEN.js

@@ -26,8 +26,10 @@ const user = {
   username: 'admin',
 };
 
-const val = `<div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
-              <div class="outline" data-type="content_structure_element"><p>outline</p></div> `;
+const val = `<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 Oen = () => {
   const editorRef = useRef();

wax-prosemirror-schema/index.js

@@ -45,7 +45,7 @@ export { default as codeBlockNode } from './src/nodes/codeBlockNode';
 export { default as mathInlineNode } from './src/nodes/mathInlineNode';
 export { default as mathDisplayNode } from './src/nodes/mathDisplayNode';
 export { default as customBlockNode } from './src/nodes/customBlockNode';
-export { default as OenContainerNode } from './src/nodes/OenContainerNode';
+export { default as OenNodes } from './src/nodes/oenNodes';
 /*
 LIST OF TRACK CHANGES NODES
 */

wax-prosemirror-schema/src/nodes/oenNodes/OenSectionNode.js

+const OenSectionNode = {
+  content: 'block+',
+  group: 'block',
+  attrs: {
+    class: { default: 'section' },
+  },
+  defining: true,
+  parseDOM: [
+    {
+      tag: 'section.section',
+      getAttrs(dom) {
+        return {
+          class: dom.getAttribute('class'),
+          type: dom.dataset.group,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    return ['section', node.attrs, 0];
+  },
+};
+
+export default OenSectionNode;

wax-prosemirror-schema/src/nodes/oenNodes/index.js

+import OenContainerNode from './OenContainerNode';
+import OenSectionNode from './OenSectionNode';
+
+export default {
+  oen_container: OenContainerNode,
+  oen_section: OenSectionNode,
+};

wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js

@@ -8,7 +8,7 @@ const matchingOptionNode = {
     options: { default: [] },
   },
   group: 'inline questions',
-  content: 'text*',
+  content: 'inline*',
   inline: true,
   atom: true,
   defining: true,

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

-import { OenContainerNode } from 'wax-prosemirror-schema';
+import { OenNodes } from 'wax-prosemirror-schema';
 import Service from '../Service';
 import './oenContainers.css';
 
@@ -10,8 +10,10 @@ class OENContainersService extends Service {
   register() {
     const createNode = this.container.get('CreateNode');
 
-    createNode({
-      oen_container: OenContainerNode,
+    Object.keys(OenNodes).forEach(node => {
+      createNode({
+        [node]: OenNodes[node],
+      });
     });
   }
 }

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

@@ -11,6 +11,32 @@ div[data-type="content_structure_element"]::before {
     display: block;
 }
 
+.section {
+    position: relative;
+    padding: 10px 10px 0 10px;
+    margin-top: 20px;
+    border: 3px solid #E2EBFF;
+}
+
+.section::before {
+    content: 'Section';
+    color: #c7d8fc;
+    font-weight: bold;
+    position: absolute;
+    display: inline-block;
+    bottom: 0;
+    top: -25px;
+    left: -3px;
+}
+
+.ProseMirror>section.section:nth-of-type(1) {
+  margin-top: 0px;
+}
+
+.section>div:nth-of-type(1) {
+    padding-top: 0;
+}
+
 .introduction::before {
     content: 'Introduction Section';
 }
@@ -45,4 +71,20 @@ content: 'Objectives Section';
 
 .references::before {
     content: 'References Section';
+}
+
+.main-content::before {
+    content: 'Main Content Section';
+}
+
+.bibliography::before {
+    content: 'Bibliography Section';
+}
+
+.further-reading::before {
+    content: 'Further Reading Section';
+}
+
+.content-opener-image::before {
+    content: 'Content Opener Image Section';
 }
\ No newline at end of file