diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 1b8623619ce3aa22d9f3bb4f7b39fdacf367f5ca..290a7b726d42f082e7ea6c131061607c1d1029fc 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -18,13 +18,13 @@ const renderImage = file => {
const ReadOnlyButton = styled.button`
position: absolute;
- left: 550px;
+ left: 600px;
top: 16px;
`;
const SubmitButton = styled.button`
position: absolute;
- left: 650px;
+ left: 700px;
top: 16px;
`;
diff --git a/editors/demo/src/OEN/OEN.js b/editors/demo/src/OEN/OEN.js
index ad9098d6dceccc1f502d185736064141a84838d1..d311b98dd5d2efa25159d4a95f20ab934e489c79 100644
--- a/editors/demo/src/OEN/OEN.js
+++ b/editors/demo/src/OEN/OEN.js
@@ -26,6 +26,9 @@ 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 Oen = () => {
const editorRef = useRef();
@@ -36,7 +39,7 @@ const Oen = () => {
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
- value=""
+ value={val}
// readonly
layout={OenLayout}
// onChange={debounce(source => {
diff --git a/editors/demo/src/OEN/config/config.js b/editors/demo/src/OEN/config/config.js
index d1b3bd87ccf373e643c66b70692d64da77cfdbd0..ea98ba3479001fff60b074d261b5ceb9d46355cc 100644
--- a/editors/demo/src/OEN/config/config.js
+++ b/editors/demo/src/OEN/config/config.js
@@ -43,6 +43,7 @@ import {
CustomTagInlineToolGroupService,
CustomTagBlockToolGroupService,
CustomTagService,
+ OenContainersService,
} from 'wax-prosemirror-services';
import { EditoriaSchema } from 'wax-prosemirror-utilities';
@@ -152,6 +153,7 @@ export default {
},
services: [
+ new OenContainersService(),
new CustomTagService(),
new DisplayBlockLevelService(),
new DisplayToolGroupService(),
diff --git a/editors/demo/src/OEN/config/configMobile.js b/editors/demo/src/OEN/config/configMobile.js
deleted file mode 100644
index 64ff3e489af4c88cddfcf62c5811ce434b150b20..0000000000000000000000000000000000000000
--- a/editors/demo/src/OEN/config/configMobile.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { emDash, ellipsis } from 'prosemirror-inputrules';
-import { columnResizing, tableEditing } from 'prosemirror-tables';
-import {
- AnnotationToolGroupService,
- ImageService,
- InlineAnnotationsService,
- LinkService,
- ListsService,
- ListToolGroupService,
- TablesService,
- TableToolGroupService,
- BaseService,
- BaseToolGroupService,
- DisplayBlockLevelService,
- DisplayToolGroupService,
- ImageToolGroupService,
- TextBlockLevelService,
- TextToolGroupService,
- NoteService,
- NoteToolGroupService,
- EditingSuggestingService,
- TrackChangeService,
- CommentsService,
- CodeBlockService,
- CodeBlockToolGroupService,
- DisplayTextToolGroupService,
- BlockDropDownToolGroupService,
- HighlightService,
- TextHighlightToolGroupServices,
- EditorInfoToolGroupServices,
- BottomInfoService,
- TransformService,
- TransformToolGroupService,
- CustomTagInlineToolGroupService,
- CustomTagBlockToolGroupService,
- CustomTagService,
-} from 'wax-prosemirror-services';
-
-import { DefaultSchema } from 'wax-prosemirror-utilities';
-
-import invisibles, {
- space,
- hardBreak,
- paragraph,
-} from '@guardian/prosemirror-invisibles';
-
-const updateTitle = title => {};
-
-export default {
- MenuService: [
- {
- templateArea: 'topBar',
- toolGroups: [
- 'Base',
- {
- name: 'Annotations',
- more: ['Superscript', 'Subscript', 'SmallCaps'],
- },
- 'HighlightToolGroup',
- 'TransformToolGroup',
- 'CustomTagInline',
- 'BlockDropDown',
- 'Notes',
- 'Lists',
- 'Images',
- 'CodeBlock',
- 'Tables',
- // 'TrackChange',
- ],
- },
- {
- templateArea: 'BottomRightInfo',
- toolGroups: ['InfoToolGroup'],
- },
- ],
-
- SchemaService: DefaultSchema,
- RulesService: [emDash, ellipsis],
- ShortCutsService: {},
- TitleService: { updateTitle },
- EnableTrackChangeService: { enabled: false },
-
- PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
- CustomTagService: {
- tags: [
- { label: 'custom-tag-label-1', tagType: 'inline' },
- { label: 'custom-tag-label-2', tagType: 'inline' },
- { label: 'custom-tag-label-3', tagType: 'block' },
- ],
- },
-
- // Always load first CommentsService and LinkService,
- //as it matters on how PM treats nodes and marks
- services: [
- new DisplayBlockLevelService(),
- new DisplayToolGroupService(),
- new TextBlockLevelService(),
- new TextToolGroupService(),
- new ListsService(),
- new LinkService(),
- new InlineAnnotationsService(),
- new TrackChangeService(),
- new CommentsService(),
- new ImageService(),
- new TablesService(),
- new BaseService(),
- new BaseToolGroupService(),
- new NoteService(),
- new TableToolGroupService(),
- new ImageToolGroupService(),
- new AnnotationToolGroupService(),
- new NoteToolGroupService(),
- new ListToolGroupService(),
- new CodeBlockService(),
- new CodeBlockToolGroupService(),
- new EditingSuggestingService(),
- new DisplayTextToolGroupService(),
- new BlockDropDownToolGroupService(),
- new HighlightService(),
- new TextHighlightToolGroupServices(),
- new EditorInfoToolGroupServices(),
- new BottomInfoService(),
- new TransformService(),
- new TransformToolGroupService(),
- new CustomTagService(),
- new CustomTagInlineToolGroupService(),
- new CustomTagBlockToolGroupService(),
- ],
-};
diff --git a/editors/demo/src/OEN/config/index.js b/editors/demo/src/OEN/config/index.js
index 3744d8f4169b8815aa0862565077396223dc711b..28307f54868afa5e0822f8156b8b1439bfd3cdd4 100644
--- a/editors/demo/src/OEN/config/index.js
+++ b/editors/demo/src/OEN/config/index.js
@@ -1,2 +1 @@
export { default as config } from './config';
-export { default as configMobile } from './configMobile';
diff --git a/wax-prosemirror-schema/index.js b/wax-prosemirror-schema/index.js
index a03d420b0c816266be37d180d7731075eb67e162..46b0496e81eb4e7d583aaf20f48ec56af1bbe5ff 100644
--- a/wax-prosemirror-schema/index.js
+++ b/wax-prosemirror-schema/index.js
@@ -45,6 +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';
/*
LIST OF TRACK CHANGES NODES
*/
diff --git a/wax-prosemirror-schema/src/nodes/OenContainerNode.js b/wax-prosemirror-schema/src/nodes/OenContainerNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..9dad997452f76212402c95cfa588c91753f337f0
--- /dev/null
+++ b/wax-prosemirror-schema/src/nodes/OenContainerNode.js
@@ -0,0 +1,32 @@
+const OenContainerNode = {
+ content: 'block+',
+ group: 'block',
+ attrs: {
+ class: { default: '' },
+ type: { default: 'content_structure_element' },
+ },
+ defining: true,
+ parseDOM: [
+ {
+ tag: 'div[data-type="content_structure_element"]',
+ getAttrs(dom) {
+ return {
+ class: dom.getAttribute('class'),
+ type: dom.dataset.group,
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ 'div',
+ {
+ class: node.attrs.class,
+ 'data-type': node.attrs.type,
+ },
+ 0,
+ ];
+ },
+};
+
+export default OenContainerNode;
diff --git a/wax-prosemirror-schema/src/nodes/authorNode.js b/wax-prosemirror-schema/src/nodes/authorNode.js
index 5b954aac40e5d511785831a1b592fd3cf4a7d982..ceff388df662a3bc73a5e7fa23f362cd533cce0c 100644
--- a/wax-prosemirror-schema/src/nodes/authorNode.js
+++ b/wax-prosemirror-schema/src/nodes/authorNode.js
@@ -1,27 +1,27 @@
const author = {
- content: "inline*",
- group: "block",
+ content: 'inline*',
+ group: 'block',
priority: 0,
defining: true,
attrs: {
- class: { default: "author" }
+ class: { default: 'author' },
},
parseDOM: [
{
- tag: "p.author",
+ tag: 'p.author',
getAttrs(hook, next) {
Object.assign(hook, {
- class: hook.dom.getAttribute("class")
+ class: hook.dom.getAttribute('class'),
});
next();
- }
- }
+ },
+ },
],
toDOM(hook, next) {
const attrs = { class: hook.node.attrs.class };
- hook.value = ["p", attrs, 0];
+ hook.value = ['p', attrs, 0];
next();
- }
+ },
};
export default author;
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index 7e3c3d1755b9827074ad011e41e913d8be070e4d..51d1b2d171b2f8e8c5c0a69a0f35ca0811335d7d 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -52,6 +52,8 @@ export { default as EssayService } from './src/EssayService/EssayService';
export { default as MatchingService } from './src/MatchingService/MatchingService';
export { default as EnterService } from './src/EnterService/EnterService';
export { default as MultipleDropDownService } from './src/MultipleDropDownService/MultipleDropDownService';
+
+export { default as OenContainersService } from './src/OenContainersService/OenContainersService';
/*
ToolGroups
*/
diff --git a/wax-prosemirror-services/src/OenContainersService/OenContainersService.js b/wax-prosemirror-services/src/OenContainersService/OenContainersService.js
new file mode 100644
index 0000000000000000000000000000000000000000..df00c33bd078579c4b1d6f6c376ef335b8914318
--- /dev/null
+++ b/wax-prosemirror-services/src/OenContainersService/OenContainersService.js
@@ -0,0 +1,19 @@
+import { OenContainerNode } from 'wax-prosemirror-schema';
+import Service from '../Service';
+import './oenContainers.css';
+
+class OenContainersService extends Service {
+ name = 'OenContainersService';
+
+ boot() {}
+
+ register() {
+ const createNode = this.container.get('CreateNode');
+
+ createNode({
+ oen_container: OenContainerNode,
+ });
+ }
+}
+
+export default OenContainersService;
diff --git a/wax-prosemirror-services/src/OenContainersService/oenContainers.css b/wax-prosemirror-services/src/OenContainersService/oenContainers.css
new file mode 100644
index 0000000000000000000000000000000000000000..b073c4d39d087217de99625915d7dce63719ccd1
--- /dev/null
+++ b/wax-prosemirror-services/src/OenContainersService/oenContainers.css
@@ -0,0 +1,21 @@
+.introduction, .outline {
+ border-left: 3px solid #f5f5f7;
+ padding: 10px 10px 0 10px;
+
+}
+
+.introduction::before,
+.outline::before {
+ border: 3px solid #f5f5f7;
+ background-color: #f5f5f7;
+ width: 100%;
+ display: block;
+}
+
+.introduction::before {
+ content: 'Introduction Section';
+}
+
+.outline::before {
+ content: 'Outline Section';
+}
\ No newline at end of file
diff --git a/wax-prosemirror-services/src/ShortCutsService/ShortCuts.js b/wax-prosemirror-services/src/ShortCutsService/ShortCuts.js
index 0823fe837e4077e9db9b8f9d29b7b68ab49c00f8..187fd9fd8df4f1fe5153d1648a27b787f321744a 100644
--- a/wax-prosemirror-services/src/ShortCutsService/ShortCuts.js
+++ b/wax-prosemirror-services/src/ShortCutsService/ShortCuts.js
@@ -25,11 +25,8 @@ const backSpace = chainCommands(
const backSpaceShortCut = (state, dispatch, view) => {
const { $from, $to } = state.selection;
const { nodeBefore } = $from;
- if (!nodeBefore) {
- return false;
- }
- if (nodeBefore.type.name === 'math_inline') {
+ if (nodeBefore && nodeBefore.type.name === 'math_inline') {
const index = $from.index($from.depth);
const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));