From 03ea9f32c78f1fd9e052713ec680cc70d48eecaf Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 17 May 2022 13:23:20 +0300
Subject: [PATCH] oen container element
---
editors/demo/src/HHMI/HHMI.js | 4 +-
editors/demo/src/OEN/OEN.js | 5 +-
editors/demo/src/OEN/config/config.js | 2 +
editors/demo/src/OEN/config/configMobile.js | 129 ------------------
editors/demo/src/OEN/config/index.js | 1 -
wax-prosemirror-schema/index.js | 1 +
.../src/nodes/OenContainerNode.js | 32 +++++
.../src/nodes/authorNode.js | 18 +--
wax-prosemirror-services/index.js | 2 +
.../OenContainersService.js | 19 +++
.../OenContainersService/oenContainers.css | 21 +++
.../src/ShortCutsService/ShortCuts.js | 5 +-
12 files changed, 93 insertions(+), 146 deletions(-)
delete mode 100644 editors/demo/src/OEN/config/configMobile.js
create mode 100644 wax-prosemirror-schema/src/nodes/OenContainerNode.js
create mode 100644 wax-prosemirror-services/src/OenContainersService/OenContainersService.js
create mode 100644 wax-prosemirror-services/src/OenContainersService/oenContainers.css
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 1b8623619..290a7b726 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 ad9098d6d..d311b98dd 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 d1b3bd87c..ea98ba347 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 64ff3e489..000000000
--- 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 3744d8f41..28307f548 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 a03d420b0..46b0496e8 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 000000000..9dad99745
--- /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 5b954aac4..ceff388df 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 7e3c3d175..51d1b2d17 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 000000000..df00c33bd
--- /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 000000000..b073c4d39
--- /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 0823fe837..187fd9fd8 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));
--
GitLab