From d7588f08bf65624d344ead8693cd30f6064659d1 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 17 May 2022 10:53:14 +0300
Subject: [PATCH] new Oen files
---
editors/demo/src/Editors.js | 9 +
editors/demo/src/OEN/OEN.js | 50 +
editors/demo/src/OEN/config/CharactersList.js | 1058 +++++++++++++++++
editors/demo/src/OEN/config/config.js | 197 +++
editors/demo/src/OEN/config/configMobile.js | 129 ++
editors/demo/src/OEN/config/defaultSchema.js | 28 +
editors/demo/src/OEN/config/index.js | 2 +
editors/demo/src/OEN/demo.js | 1 +
editors/demo/src/OEN/layout/EditorElements.js | 16 +
editors/demo/src/OEN/layout/OenLayout.js | 311 +++++
editors/demo/src/OEN/layout/index.js | 1 +
.../src/OEN/theme/elements/ButtonStyles.js | 17 +
editors/demo/src/OEN/theme/elements/index.js | 1 +
editors/demo/src/OEN/theme/index.js | 2 +
editors/demo/src/OEN/theme/theme.js | 87 ++
15 files changed, 1909 insertions(+)
create mode 100644 editors/demo/src/OEN/OEN.js
create mode 100644 editors/demo/src/OEN/config/CharactersList.js
create mode 100644 editors/demo/src/OEN/config/config.js
create mode 100644 editors/demo/src/OEN/config/configMobile.js
create mode 100644 editors/demo/src/OEN/config/defaultSchema.js
create mode 100644 editors/demo/src/OEN/config/index.js
create mode 100644 editors/demo/src/OEN/demo.js
create mode 100644 editors/demo/src/OEN/layout/EditorElements.js
create mode 100644 editors/demo/src/OEN/layout/OenLayout.js
create mode 100644 editors/demo/src/OEN/layout/index.js
create mode 100644 editors/demo/src/OEN/theme/elements/ButtonStyles.js
create mode 100644 editors/demo/src/OEN/theme/elements/index.js
create mode 100644 editors/demo/src/OEN/theme/index.js
create mode 100644 editors/demo/src/OEN/theme/theme.js
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 166168897..b568d2dad 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -5,6 +5,7 @@ import { createGlobalStyle } from 'styled-components';
import Editoria from './Editoria/Editoria';
import HHMI from './HHMI/HHMI';
import NCBI from './NCBI/NCBI';
+import OEN from './OEN/OEN';
const GlobalStyle = createGlobalStyle`
body {
@@ -69,6 +70,8 @@ const Editors = () => {
return <HHMI />;
case 'ncbi':
return <NCBI />;
+ case 'oen':
+ return <OEN />;
default:
return <Editoria />;
}
@@ -92,6 +95,12 @@ const Editors = () => {
>
Widget Example
</ProjectButton>
+ <ProjectButton
+ isActive={project === 'oen'}
+ onClick={() => setProject('oen')}
+ >
+ OEN
+ </ProjectButton>
<ProjectButton
isActive={project === 'ncbi'}
onClick={() => setProject('ncbi')}
diff --git a/editors/demo/src/OEN/OEN.js b/editors/demo/src/OEN/OEN.js
new file mode 100644
index 000000000..ad9098d6d
--- /dev/null
+++ b/editors/demo/src/OEN/OEN.js
@@ -0,0 +1,50 @@
+import React, { useRef } from 'react';
+
+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 => {
+ const reader = new FileReader();
+ return new Promise((accept, fail) => {
+ reader.onload = () => accept(reader.result);
+ reader.onerror = () => fail(reader.error);
+ // Some extra delay to make the asynchronicity visible
+ setTimeout(() => reader.readAsDataURL(file), 150);
+ });
+};
+
+const user = {
+ userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
+ userColor: {
+ addition: 'royalblue',
+ deletion: 'indianred',
+ },
+ username: 'admin',
+};
+
+const Oen = () => {
+ const editorRef = useRef();
+
+ return (
+ <Wax
+ ref={editorRef}
+ config={config}
+ autoFocus
+ placeholder="Type Something..."
+ fileUpload={file => renderImage(file)}
+ value=""
+ // readonly
+ layout={OenLayout}
+ // onChange={debounce(source => {
+ // console.log(JSON.stringify(source));
+ // }, 200)}
+ user={user}
+ />
+ );
+};
+
+export default Oen;
diff --git a/editors/demo/src/OEN/config/CharactersList.js b/editors/demo/src/OEN/config/CharactersList.js
new file mode 100644
index 000000000..4bd2201ea
--- /dev/null
+++ b/editors/demo/src/OEN/config/CharactersList.js
@@ -0,0 +1,1058 @@
+export default [
+ {
+ unicode: '\u00C0',
+ name: 'Latin Capital Letter A with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E0',
+ name: 'Latin Small Letter A with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C1',
+ name: 'Latin Capital letter A with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E1',
+ name: 'Latin Small Letter A with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C2',
+ name: 'Latin Capital letter A with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E2',
+ name: 'Latin Small Letter A with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C4',
+ name: 'Latin Capital letter A with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E4',
+ name: 'Latin Small Letter A with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C3',
+ name: 'Latin Capital letter A with tilde',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E3',
+ name: 'Latin Small Letter A with tilde',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C5',
+ name: 'Latin Capital letter A with ring above',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E5',
+ name: 'Latin Small Letter A with ring above',
+ group: 'Vowels',
+ },
+ { unicode: '\u00C6', name: 'Latin Capital letter AE', group: 'Vowels' },
+ { unicode: '\u00E6', name: 'Latin Small Letter AE', group: 'Vowels' },
+ {
+ unicode: '\u0100',
+ name: 'Latin Capital Letter A with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0101',
+ name: 'Latin Small Letter A with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01CD',
+ name: 'Latin Capital Letter A with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01CE',
+ name: 'Latin Small Letter A with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0104',
+ name: 'Latin Capital Letter A with ogonek',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0105',
+ name: 'Latin Small Letter A with ogonek',
+ group: 'Vowels',
+ },
+ // { unicode: '\u0102', name: 'Latin Capital Letter A with breve', group: 'Vowels' },
+ // { unicode: '\u0103', name: 'Latin Small Letter A with breve', group: 'Vowels' },
+
+ {
+ unicode: '\u00C8',
+ name: 'Latin Capital letter E with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E8',
+ name: 'Latin Small Letter E with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00C9',
+ name: 'Latin Capital Letter E with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00E9',
+ name: 'Latin Small Letter E with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00CA',
+ name: 'Latin Capital letter E with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00EA',
+ name: 'Latin Small Letter E with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00CB',
+ name: 'Latin Capital Letter E with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00EB',
+ name: 'Latin Small Letter E with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0112',
+ name: 'Latin Capital Letter E with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0113',
+ name: 'Latin Small Letter E with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u011A',
+ name: 'Latin Capital Letter E with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u011B',
+ name: 'Latin Small Letter E with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0118',
+ name: 'Latin Capital Letter E with ogonek',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0119',
+ name: 'Latin Small Letter E with ogonek',
+ group: 'Vowels',
+ },
+ // { unicode: '\u0114', name: 'Latin Capital Letter E with breve', group: 'Vowels' },
+ // { unicode: '\u0115', name: 'Latin Small Letter E with breve', group: 'Vowels' },
+ // { unicode: '\u0116', name: 'Latin Capital Letter E with dot above', group: 'Vowels' },
+ // { unicode: '\u0117', name: 'Latin Small Letter E with dot above', group: 'Vowels' },
+
+ {
+ unicode: '\u00CC',
+ name: 'Latin Capital letter I with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00EC',
+ name: 'Latin Small letter I with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00CD',
+ name: 'Latin Capital letter I with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00ED',
+ name: 'Latin Small letter I with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00CE',
+ name: 'Latin Capital Letter I with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00EE',
+ name: 'Latin Small Letter I with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00CF',
+ name: 'Latin Capital letter I with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00EF',
+ name: 'Latin Small Letter I with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u012A',
+ name: 'Latin Capital Letter I with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u012B',
+ name: 'Latin Small Letter I with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01CF',
+ name: 'Latin Capital Letter I with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01D0',
+ name: 'Latin Small Letter I with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0130',
+ name: 'Latin Capital Letter I with dot above',
+ group: 'Vowels',
+ },
+ { unicode: '\u0131', name: 'Latin Small Letter dotless I', group: 'Vowels' },
+
+ {
+ unicode: '\u00D2',
+ name: 'Latin Capital letter O with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F2',
+ name: 'Latin Small Letter O with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00D3',
+ name: 'Latin Capital letter O with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F3',
+ name: 'Latin Small Letter O with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0150',
+ name: 'Latin Capital Letter O with double acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0151',
+ name: 'Latin Small Letter O with double acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00D8',
+ name: 'Latin Capital letter O with stroke',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F8',
+ name: 'Latin Small Letter O with stroke',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00D4',
+ name: 'Latin Capital letter O with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F4',
+ name: 'Latin Small Letter O with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00D6',
+ name: 'Latin Capital letter O with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F6',
+ name: 'Latin Small Letter O with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00D5',
+ name: 'Latin Capital letter O with tilde',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F5',
+ name: 'Latin Small Letter O with tilde',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u014C',
+ name: 'Latin Capital Letter O with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u014D',
+ name: 'Latin Small Letter O with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01D1',
+ name: 'Latin Capital Letter O with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01D2',
+ name: 'Latin Small Letter O with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01EA',
+ name: 'Latin Capital Letter O with ogonek',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01EB',
+ name: 'Latin Small Letter O with ogonek',
+ group: 'Vowels',
+ },
+
+ { unicode: '\u0152', name: 'Latin Capital Ligature OE', group: 'Vowels' },
+ { unicode: '\u0153', name: 'Latin Small Ligature OE', group: 'Vowels' },
+ {
+ unicode: '\u00D9',
+ name: 'Latin Capital Letter U with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00F9',
+ name: 'Latin Small Letter U with grave',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00DA',
+ name: 'Latin Capital Letter U with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00FA',
+ name: 'Latin Small Letter U with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0170',
+ name: 'Latin Capital Letter U with double acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0171',
+ name: 'Latin Small Letter U with double acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00DB',
+ name: 'Latin Capital Letter U with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00FB',
+ name: 'Latin Small Letter U with circumflex',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00DC',
+ name: 'Latin Capital Letter U with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00FC',
+ name: 'Latin Small Letter U with diaeresis',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u016E',
+ name: 'Latin Capital Letter U with ring above',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u016F',
+ name: 'Latin Small Letter U with ring above',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u016A',
+ name: 'Latin Capital Letter U with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u016B',
+ name: 'Latin Small Letter U with macron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01D3',
+ name: 'Latin Capital Letter U with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u01D4',
+ name: 'Latin Small Letter U with caron',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0172',
+ name: 'Latin Capital Letter U with ogonek',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u0173',
+ name: 'Latin Small Letter U with ogonek',
+ group: 'Vowels',
+ },
+
+ {
+ unicode: '\u00DD',
+ name: 'Latin Capital Letter Y with acute',
+ group: 'Vowels',
+ },
+ {
+ unicode: '\u00FD',
+ name: 'Latin Small Letter Y with acute',
+ group: 'Vowels',
+ },
+
+ {
+ unicode: '\u0042\u0324',
+ name: 'Latin Capital Letter B with diaeresis below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0062\u0324',
+ name: 'Latin Small Letter B with diaeresis below',
+ group: 'Consonants',
+ },
+ // { unicode: '\u0180', name: 'Latin Small Letter B with stroke', group: 'Consonants' },
+ // { unicode: '\u0181', name: 'Latin Capital Letter B with hook', group: 'Consonants' },
+ // { unicode: '\u0182', name: 'Latin Capital Letter B with top bar', group: 'Consonants' },
+ // { unicode: '\u0183', name: 'Latin Small Letter B with top bar', group: 'Consonants' },
+
+ {
+ unicode: '\u00C7',
+ name: 'Latin Capital Letter C with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u00E7',
+ name: 'Latin Small Letter C with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0106',
+ name: 'Latin Capital Letter C with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0107',
+ name: 'Latin Small Letter C with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0108',
+ name: 'Latin Capital Letter C with circumflex',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0109',
+ name: 'Latin Small Letter C with circumflex',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u010C',
+ name: 'Latin Capital Letter C with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u010D',
+ name: 'Latin Small Letter C with caron',
+ group: 'Consonants',
+ },
+ // { unicode: '\u010A', name: 'Latin Capital Letter C with dot above', group: 'Consonants' },
+ // { unicode: '\u010B', name: 'Latin Small Letter C with dot above', group: 'Consonants' },
+ // { unicode: '\u0188', name: 'Latin Small Letter C with hook', group: 'Consonants' },
+ // { unicode: '\u0187', name: 'Latin Capital Letter C with hook', group: 'Consonants' },
+
+ {
+ unicode: '\u010E',
+ name: 'Latin Capital Letter D with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u010F',
+ name: 'Latin Small Letter D with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0110',
+ name: 'Latin Capital Letter D with stroke',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0111',
+ name: 'Latin Small Letter D with stroke',
+ group: 'Consonants',
+ },
+ // { unicode: '\u0189', name: 'Latin Capital Letter African D', group: 'Consonants' },
+ {
+ unicode: '\u1E0C',
+ name: 'Latin Capital Letter D with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E0D',
+ name: 'Latin Small Letter D with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0044\u0331',
+ name: 'Latin Capital Letter D with macron below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0064\u0331',
+ name: 'Latin Small Letter D with macron below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0044\u0324',
+ name: 'Latin Capital Letter D with diaeresis below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0064\u0324',
+ name: 'Latin Small Letter D with diaeresis below',
+ group: 'Consonants',
+ },
+ // { unicode: '\u018A', name: 'Latin Capital Letter D with hook', group: 'Consonants' },
+ // { unicode: '\u018B', name: 'Latin Capital Letter D with top bar', group: 'Consonants' },
+ // { unicode: '\u018C', name: 'Latin Small Letter D with top bar', group: 'Consonants' },
+
+ {
+ unicode: '\u01E6',
+ name: 'Latin Capital Letter G with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u01E7',
+ name: 'Latin Small Letter G with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0120',
+ name: 'Latin Capital Letter G with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0121',
+ name: 'Latin Small Letter G with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E20',
+ name: 'Latin Capital Letter G with macron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E21',
+ name: 'Latin Small Letter G with macron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u011E',
+ name: 'Latin Capital Letter G with breve',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u011F',
+ name: 'Latin Small Letter G with breve',
+ group: 'Consonants',
+ },
+ // { unicode: '\u011C', name: 'Latin Capital Letter G with circumflex', group: 'Consonants' },
+ // { unicode: '\u011D', name: 'Latin Small Letter G with circumflex', group: 'Consonants' },
+
+ {
+ unicode: '\u1E24',
+ name: 'Latin Capital Letter H with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E25',
+ name: 'Latin Small Letter H with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0048\u032C',
+ name: 'Latin Capital Letter H with caron below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0068\u032C',
+ name: 'Latin Small Letter H with caron below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u004A\u0301',
+ name: 'Latin Capital Letter J with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u006A\u0301',
+ name: 'Latin Small Letter J with acute',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u1E32',
+ name: 'Latin Capital Letter K with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E33',
+ name: 'Latin Small Letter K with dot below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u0141',
+ name: 'Latin Capital Letter L with stroke',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0142',
+ name: 'Latin Small Letter L with stroke',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E36',
+ name: 'Latin Capital Letter L with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E37',
+ name: 'Latin Small Letter L with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E3A',
+ name: 'Latin Capital Letter L with line below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E3B',
+ name: 'Latin Small Letter L with line below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u004C\u0324',
+ name: 'Latin Capital Letter L with two dots below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u006C\u0324',
+ name: 'Latin Small Letter L with two dots below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u1E40',
+ name: 'Latin Capital Letter M with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E41',
+ name: 'Latin Small Letter M with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E42',
+ name: 'Latin Capital Letter M with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E43',
+ name: 'Latin Small Letter M with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u004D\u0310',
+ name: 'Latin Capital Letter M with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u006D\u0310',
+ name: 'Latin Small Letter M with dot below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u00D1',
+ name: 'Latin Capital Letter N with tilde',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u00F1',
+ name: 'Latin Small Letter N with tilde',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0143',
+ name: 'Latin Capital Letter N with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0144',
+ name: 'Latin Small Letter N with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0147',
+ name: 'Latin Capital Letter N with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0148',
+ name: 'Latin Small Letter N with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E44',
+ name: 'Latin Capital Letter N with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E45',
+ name: 'Latin Small Letter N with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E46',
+ name: 'Latin Capital Letter N with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E47',
+ name: 'Latin Small Letter N with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E48',
+ name: 'Latin Capital Letter N with line below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E49',
+ name: 'Latin Small Letter N with line below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u0158',
+ name: 'Latin Capital Letter R with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0159',
+ name: 'Latin Small Letter R with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E5E',
+ name: 'Latin Capital Letter R with macron below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E5F',
+ name: 'Latin Small Letter R with macron below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0156',
+ name: 'Latin Capital Letter R with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0157',
+ name: 'Latin Small Letter R with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E58',
+ name: 'Latin Capital Letter R with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E59',
+ name: 'Latin Small Letter R with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E5C',
+ name: 'Latin Capital Letter R with dot below and macron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E5D',
+ name: 'Latin Small Letter R with dot below and macron',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u015A',
+ name: 'Latin Capital Letter S with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u015B',
+ name: 'Latin Small Letter S with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u015E',
+ name: 'Latin Capital Letter S with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u015F',
+ name: 'Latin Small Letter S with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0160',
+ name: 'Latin Capital Letter S with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0161',
+ name: 'Latin Small Letter S with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0218',
+ name: 'Latin Capital Letter S with comma below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0219',
+ name: 'Latin Small Letter S with comma below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u00DF',
+ name: 'Latin Small Letter sharp S',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u0162',
+ name: 'Latin Capital Letter T with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0163',
+ name: 'Latin Small Letter T with cedilla',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0164',
+ name: 'Latin Capital Letter T with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0165',
+ name: 'Latin Small Letter T with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u021A',
+ name: 'Latin Capital Letter T with comma below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u021B',
+ name: 'Latin Small Letter T with comma below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E6E',
+ name: 'Latin Capital Letter T with bar below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E6F',
+ name: 'Latin Small Letter T with bar below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0054\u0324',
+ name: 'Latin Capital Letter T with two dots below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u0074\u0324',
+ name: 'Latin Small Letter T with two dots below',
+ group: 'Consonants',
+ },
+
+ {
+ unicode: '\u0179',
+ name: 'Latin Capital Letter Z with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u017A',
+ name: 'Latin Small Letter Z with acute',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u017B',
+ name: 'Latin Capital Letter Z with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u017C',
+ name: 'Latin Small Letter Z with dot above',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u017D',
+ name: 'Latin Capital Letter Z with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u017E',
+ name: 'Latin Small Letter Z with caron',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E92',
+ name: 'Latin Capital Letter Z with dot below',
+ group: 'Consonants',
+ },
+ {
+ unicode: '\u1E93',
+ name: 'Latin Small Letter Z with dot below',
+ group: 'Consonants',
+ },
+
+ { unicode: '\u00D0', name: 'Latin Capital letter Eth', group: 'Latin' },
+ { unicode: '\u00F0', name: 'Latin Small letter Eth', group: 'Latin' },
+ { unicode: '\u00DE', name: 'Latin Capital Letter Thorn', group: 'Latin' },
+ { unicode: '\u00FE', name: 'Latin Small Letter Thorn', group: 'Latin' },
+
+ { unicode: '\u002B', name: 'Plus sign', group: 'Math' },
+ { unicode: '\u2212', name: 'Minus sign', group: 'Math' },
+ { unicode: '\u00D7', name: 'Multiplication sign', group: 'Math' },
+ { unicode: '\u00F7', name: 'Division sign', group: 'Math' },
+ { unicode: '\u002F', name: 'Solidus', group: 'Math' },
+ { unicode: '\u003D', name: 'Equals sign', group: 'Math' },
+ { unicode: '\u00B1', name: 'Plus-minus sign', group: 'Math' },
+ { unicode: '\u003C', name: 'Less than sign', group: 'Math' },
+ { unicode: '\u003E', name: 'Greater than sign', group: 'Math' },
+ { unicode: '\u2264', name: 'Less than or equal to sign', group: 'Math' },
+ { unicode: '\u2265', name: 'Greater than or equal to sign', group: 'Math' },
+ { unicode: '\u00B0', name: 'Degree symbol', group: 'Math' },
+ { unicode: '\u00B4', name: 'Acute accent', group: 'Math' },
+ { unicode: '\u02DD', name: 'Double acute accent', group: 'Math' },
+ { unicode: '\u007C', name: 'Vertical line', group: 'Math' },
+ { unicode: '\u03C0', name: 'Greek Small Letter Pi ', group: 'Math' },
+ { unicode: '\u2211', name: 'N-ary summation', group: 'Math' },
+
+ { unicode: '\u2018', name: 'Left Single Quotation Mark', group: 'Misc' },
+ { unicode: '\u2019', name: 'Right Single Quotation Mark', group: 'Misc' },
+ { unicode: '\u2026', name: 'Horizontal ellipsis', group: 'Misc' },
+ { unicode: '\u2013', name: 'En dash', group: 'Misc' },
+ { unicode: '\u2014', name: 'Em dash', group: 'Misc' },
+ { unicode: '\u2E3B', name: 'Three-em dash', group: 'Misc' },
+ { unicode: '\u2009', name: 'Thin space', group: 'Misc' },
+ { unicode: '\u200A', name: 'Hair space', group: 'Misc' },
+ { unicode: '\u2002', name: 'En space', group: 'Misc' },
+ { unicode: '\u2003', name: 'Em Space', group: 'Misc' },
+ { unicode: '\u00A9', name: 'Copyright', group: 'Misc' },
+ { unicode: '\u2117', name: 'Sound recording copyright', group: 'Misc' },
+ { unicode: '\u2122', name: 'Registered Trademark', group: 'Misc' },
+ { unicode: '\u00AE', name: 'Registered sign', group: 'Misc' },
+ { unicode: '\u00A1', name: 'Inverted Exclamation Mark', group: 'Misc' },
+ { unicode: '\u00BF', name: 'Inverted Question Mark', group: 'Misc' },
+ {
+ unicode: '\u00AB',
+ name: 'Left-pointing double-angle quotation mark',
+ group: 'Misc',
+ },
+ {
+ unicode: '\u00BB',
+ name: 'Right-pointing double-angle quotation mark',
+ group: 'Misc',
+ },
+ { unicode: '\u00B7', name: 'Middle dot', group: 'Misc' },
+ { unicode: '\u00A7', name: 'Section symbol', group: 'Misc' },
+ { unicode: '\u00B6', name: 'Pilcrow sign', group: 'Misc' },
+ { unicode: '\u2020', name: 'Dagger', group: 'Misc' },
+ { unicode: '\u2640', name: 'Female sign', group: 'Misc' },
+ { unicode: '\u2642', name: 'Male sign', group: 'Misc' },
+ { unicode: '\u00A3', name: 'Pound sign', group: 'Misc' },
+ { unicode: '\u00A5', name: 'Yen sign', group: 'Misc' },
+ { unicode: '\u20AC', name: 'Euro sign', group: 'Misc' },
+ { unicode: '\u00A2', name: 'Cent sign', group: 'Misc' },
+ { unicode: '\u2669', name: 'Quarter note', group: 'Misc' },
+ { unicode: '\u266A', name: 'Eigth note', group: 'Misc' },
+ { unicode: '\u266D', name: 'Flat sign', group: 'Misc' },
+ { unicode: '\u266E', name: 'Natural sign', group: 'Misc' },
+ { unicode: '\u266F', name: 'Sharp sign', group: 'Misc' },
+
+ // { unicode: '\u00A4', name: 'Currency sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00A6', name: 'Broken bar', group: 'Latin-Supplement' },
+ // { unicode: '\u00A7', name: 'Section sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00A8', name: 'Diaeresis', group: 'Latin-Supplement' },
+ // { unicode: '\u00AA', name: 'Feminine Ordinal Indicator', group: 'Latin-Supplement' },
+ // { unicode: '\u00AB', name: 'Left-pointing double angle quotation mark', group: 'Latin-Supplement' },
+ // { unicode: '\u00AC', name: 'Not sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00AD', name: 'Soft hyphen', group: 'Latin-Supplement' },
+ // { unicode: '\u00AF', name: 'macron', group: 'Latin-Supplement' },
+ // { unicode: '\u00B2', name: 'Superscript two', group: 'Latin-Supplement' },
+ // { unicode: '\u00B3', name: 'Superscript three', group: 'Latin-Supplement' },
+ // { unicode: '\u00B4', name: 'Acute accent', group: 'Latin-Supplement' },
+ // { unicode: '\u00B5', name: 'Micro sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00B8', name: 'Cedilla', group: 'Latin-Supplement' },
+ // { unicode: '\u00B9', name: 'Superscript one', group: 'Latin-Supplement' },
+ // { unicode: '\u00BA', name: 'Masculine ordinal indicator', group: 'Latin-Supplement' },
+ // { unicode: '\u00BC', name: 'Vulgar fraction one quarter', group: 'Latin-Supplement' },
+ // { unicode: '\u00BD', name: 'Vulgar fraction one half', group: 'Latin-Supplement' },
+ // { unicode: '\u00BE', name: 'Vulgar fraction three quarters', group: 'Latin-Supplement' },
+
+ // { unicode: '\u0184', name: 'Latin Capital Letter Tone Six', group: 'Latin-Extended-B' },
+ // { unicode: '\u0185', name: 'Latin Small Letter Tone Six', group: 'Latin-Extended-B' },
+ // { unicode: '\u0186', name: 'Latin Capital Letter Open O', group: 'Latin-Extended-B' },
+ // { unicode: '\u018D', name: 'Latin Small Letter Turned Delta', group: 'Latin-Extended-B' },
+ // { unicode: '\u018E', name: 'Latin Capital Letter Reversed E', group: 'Latin-Extended-B' },
+ // { unicode: '\u018F', name: 'Latin Capital Letter Schwa', group: 'Latin-Extended-B' }
+];
diff --git a/editors/demo/src/OEN/config/config.js b/editors/demo/src/OEN/config/config.js
new file mode 100644
index 000000000..d1b3bd87c
--- /dev/null
+++ b/editors/demo/src/OEN/config/config.js
@@ -0,0 +1,197 @@
+import { emDash, ellipsis } from 'prosemirror-inputrules';
+import { debounce } from 'lodash';
+import { columnResizing, tableEditing } from 'prosemirror-tables';
+import {
+ InlineAnnotationsService,
+ AnnotationToolGroupService,
+ ImageService,
+ ImageToolGroupService,
+ LinkService,
+ ListsService,
+ ListToolGroupService,
+ TablesService,
+ TableToolGroupService,
+ BaseService,
+ BaseToolGroupService,
+ DisplayBlockLevelService,
+ DisplayToolGroupService,
+ TextBlockLevelService,
+ TextToolGroupService,
+ NoteService,
+ NoteToolGroupService,
+ TrackChangeService,
+ CommentsService,
+ CodeBlockService,
+ CodeBlockToolGroupService,
+ DisplayTextToolGroupService,
+ MathService,
+ FindAndReplaceService,
+ EditingSuggestingService,
+ TrackingAndEditingToolGroupService,
+ FullScreenService,
+ FullScreenToolGroupService,
+ SpecialCharactersService,
+ SpecialCharactersToolGroupService,
+ HighlightService,
+ TextHighlightToolGroupServices,
+ EditorInfoToolGroupServices,
+ BottomInfoService,
+ TransformService,
+ TransformToolGroupService,
+ TrackOptionsToolGroupService,
+ TrackCommentOptionsToolGroupService,
+ CustomTagInlineToolGroupService,
+ CustomTagBlockToolGroupService,
+ CustomTagService,
+} from 'wax-prosemirror-services';
+
+import { EditoriaSchema } from 'wax-prosemirror-utilities';
+
+import invisibles, {
+ space,
+ hardBreak,
+ paragraph,
+} from '@guardian/prosemirror-invisibles';
+
+import CharactersList from './CharactersList';
+
+// const updateTitle = title => {
+// console.log(title);
+// };
+
+const updateTitle = debounce(title => {
+ // console.log(title);
+}, 3000);
+
+const saveTags = tags => {
+ // console.log(tags);
+};
+
+const updateTrackStatus = status => {
+ // console.log('status', status);
+};
+
+export default {
+ MenuService: [
+ {
+ templateArea: 'mainMenuToolBar',
+ toolGroups: [
+ 'Base',
+ {
+ name: 'Annotations',
+ more: [
+ 'Superscript',
+ 'Subscript',
+ 'SmallCaps',
+ 'Underline',
+ 'StrikeThrough',
+ ],
+ },
+ 'HighlightToolGroup',
+ 'TransformToolGroup',
+ 'CustomTagInline',
+ 'Notes',
+ 'Lists',
+ 'Images',
+ 'SpecialCharacters',
+ 'CodeBlock',
+ 'Tables',
+ 'TrackingAndEditing',
+ 'FullScreen',
+ ],
+ },
+ {
+ templateArea: 'leftSideBar',
+ toolGroups: ['DisplayText'],
+ },
+ {
+ templateArea: 'commentTrackToolBar',
+ toolGroups: ['TrackCommentOptions'],
+ },
+ {
+ templateArea: 'BottomRightInfo',
+ toolGroups: ['InfoToolGroup'],
+ },
+ ],
+
+ // CommentsService: { readOnly: true },
+ // OrderedListService: { subList: false },
+ // BulletListService: { subList: false },
+ // JoinUpService: { subList: false },
+ SpecialCharactersService: CharactersList,
+ SchemaService: EditoriaSchema,
+ TitleService: { updateTitle },
+ RulesService: [emDash, ellipsis],
+ ShortCutsService: {},
+ EnableTrackChangeService: { enabled: false, toggle: true, updateTrackStatus },
+ AcceptTrackChangeService: {
+ own: {
+ accept: true,
+ },
+ others: {
+ accept: true,
+ },
+ },
+ RejectTrackChangeService: {
+ own: {
+ reject: true,
+ },
+ others: {
+ reject: true,
+ },
+ },
+ 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' },
+ { label: 'label 2', tagType: 'block' },
+ ],
+ // updateTags: saveTags,
+ },
+
+ services: [
+ new CustomTagService(),
+ 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 MathService(),
+ new FindAndReplaceService(),
+ new TrackingAndEditingToolGroupService(),
+ new FullScreenService(),
+ new FullScreenToolGroupService(),
+ new SpecialCharactersService(),
+ new SpecialCharactersToolGroupService(),
+ new HighlightService(),
+ new TextHighlightToolGroupServices(),
+ new EditorInfoToolGroupServices(),
+ new BottomInfoService(),
+ new TransformService(),
+ new TransformToolGroupService(),
+ new TrackOptionsToolGroupService(),
+ new TrackCommentOptionsToolGroupService(),
+ new CustomTagInlineToolGroupService(),
+ new CustomTagBlockToolGroupService(),
+ ],
+};
diff --git a/editors/demo/src/OEN/config/configMobile.js b/editors/demo/src/OEN/config/configMobile.js
new file mode 100644
index 000000000..64ff3e489
--- /dev/null
+++ b/editors/demo/src/OEN/config/configMobile.js
@@ -0,0 +1,129 @@
+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/defaultSchema.js b/editors/demo/src/OEN/config/defaultSchema.js
new file mode 100644
index 000000000..8cbf09314
--- /dev/null
+++ b/editors/demo/src/OEN/config/defaultSchema.js
@@ -0,0 +1,28 @@
+const defaultSchema = {
+ nodes: {
+ doc: {
+ content: 'inline*',
+ },
+ text: {
+ group: 'inline',
+ },
+ paragraph: null,
+ hard_break: null,
+ title: {
+ group: 'inline',
+ content: 'inline*',
+ inline: true,
+ parseDOM: [
+ {
+ tag: 'title',
+ },
+ ],
+ toDOM(node) {
+ return ['title', node.attrs, 0];
+ },
+ },
+ },
+ marks: {},
+};
+
+export default defaultSchema;
diff --git a/editors/demo/src/OEN/config/index.js b/editors/demo/src/OEN/config/index.js
new file mode 100644
index 000000000..3744d8f41
--- /dev/null
+++ b/editors/demo/src/OEN/config/index.js
@@ -0,0 +1,2 @@
+export { default as config } from './config';
+export { default as configMobile } from './configMobile';
diff --git a/editors/demo/src/OEN/demo.js b/editors/demo/src/OEN/demo.js
new file mode 100644
index 000000000..7b145a358
--- /dev/null
+++ b/editors/demo/src/OEN/demo.js
@@ -0,0 +1 @@
+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/editors/demo/src/OEN/layout/EditorElements.js b/editors/demo/src/OEN/layout/EditorElements.js
new file mode 100644
index 000000000..25b06611e
--- /dev/null
+++ b/editors/demo/src/OEN/layout/EditorElements.js
@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+import { th } from '@pubsweet/ui-toolkit';
+
+/* All styles regarding ProseMirror surface and elements */
+
+const fontWriting = css`
+ color: ${th('colorText')};
+ font-family: ${th('fontWriting')};
+ font-size: ${th('fontSizeBase')};
+`;
+
+export default css`
+ .ProseMirror {
+ ${fontWriting}
+ }
+`;
diff --git a/editors/demo/src/OEN/layout/OenLayout.js b/editors/demo/src/OEN/layout/OenLayout.js
new file mode 100644
index 000000000..6eea3a0c1
--- /dev/null
+++ b/editors/demo/src/OEN/layout/OenLayout.js
@@ -0,0 +1,311 @@
+import React, { useContext, useState, useCallback, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import PanelGroup from 'react-panelgroup';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import { cokoTheme } from '../theme';
+import EditorElements from './EditorElements';
+
+const divider = css`
+ .panelGroup {
+ background: #fff;
+ }
+ .divider {
+ > div {
+ background: ${th('colorBorder')};
+ height: ${grid(1)};
+ max-height: ${grid(1)};
+
+ &:hover {
+ height: ${grid(2)};
+ max-height: ${grid(2)};
+ }
+ }
+ }
+`;
+
+const Wrapper = styled.div`
+ background: ${th('colorBackground')};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBase')};
+ line-height: ${grid(4)};
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+
+ ${divider}
+
+ * {
+ box-sizing: border-box;
+ }
+`;
+
+const Main = styled.div`
+ display: flex;
+ flex-grow: 1;
+ height: 100%;
+`;
+
+const TopMenu = styled.div`
+ display: flex;
+ min-height: 40px;
+ user-select: none;
+ background: ${th('colorBackgroundToolBar')};
+ border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+
+ > div:not(:last-child) {
+ border-right: ${th('borderWidth')} ${th('borderStyle')}
+ ${th('colorFurniture')};
+ }
+
+ > div:nth-last-of-type(-n + 2) {
+ margin-left: auto;
+ }
+
+ > div:last-child {
+ margin-left: 0;
+ margin-right: ${grid(5)};
+ }
+
+ > div[data-name='Tables'] {
+ border-right: none;
+ }
+`;
+
+const SideMenu = styled.div`
+ background: ${th('colorBackgroundToolBar')}
+ border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ min-width: 250px;
+ height: calc(100% - 16px);
+`;
+
+const EditorArea = styled.div`
+ flex-grow: 1;
+`;
+
+const WaxSurfaceScroll = styled.div`
+ overflow-y: auto;
+ display: flex;
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ /* PM styles for main content*/
+ ${EditorElements};
+`;
+
+const EditorContainer = styled.div`
+ width: 65%;
+ height: 100%;
+
+ .ProseMirror {
+ box-shadow: 0 0 8px #ecedf1;
+ min-height: 98%;
+ padding: ${grid(10)};
+ }
+`;
+
+const CommentsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
+`;
+
+const CommentsContainerNotes = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
+`;
+
+const CommentTrackToolsContainer = styled.div`
+ display: flex;
+ position: fixed;
+ padding-top: 5px;
+ right: 30px;
+ z-index: 1;
+ background: white;
+ width: 25%;
+`;
+
+const CommentTrackTools = styled.div`
+ margin-left: auto;
+ display: flex;
+ position: relative;
+ z-index: 1;
+`;
+
+const CommentTrackOptions = styled.div`
+ display: flex;
+ margin-left: 10px;
+ bottom: 5px;
+ position: relative;
+`;
+
+const NotesAreaContainer = styled.div`
+ background: #fff;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+ overflow-y: scroll;
+ position: absolute;
+ /* PM styles for note content*/
+ .ProseMirror {
+ display: inline;
+ }
+`;
+
+const NotesContainer = styled.div`
+ counter-reset: footnote-view;
+ display: flex;
+ flex-direction: column;
+ padding-top: 10px;
+ padding-bottom: ${grid(4)};
+ padding-left: ${grid(10)};
+ height: 100%;
+ width: 65%;
+ ${EditorElements};
+`;
+const WaxBottomRightInfo = styled.div``;
+const InfoContainer = styled.div`
+ display: flex;
+ position: fixed;
+ bottom: 1px;
+ right: 21px;
+ z-index: 999;
+`;
+
+let surfaceHeight = (window.innerHeight / 5) * 3;
+let notesHeight = (window.innerHeight / 5) * 2;
+
+const onResizeEnd = arr => {
+ surfaceHeight = arr[0].size;
+ notesHeight = arr[1].size;
+};
+
+const getNotes = main => {
+ const notes = DocumentHelpers.findChildrenByType(
+ main.state.doc,
+ main.state.schema.nodes.footnote,
+ true,
+ );
+ return notes;
+};
+
+const LeftSideBar = ComponentPlugin('leftSideBar');
+const MainMenuToolBar = ComponentPlugin('mainMenuToolBar');
+const NotesArea = ComponentPlugin('notesArea');
+const RightArea = ComponentPlugin('rightArea');
+const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
+const BottomRightInfo = ComponentPlugin('BottomRightInfo');
+
+const EditoriaLayout = ({ editor }) => {
+ const {
+ pmViews: { main },
+ options,
+ } = useContext(WaxContext);
+
+ let fullScreenStyles = {};
+
+ if (options.fullScreen) {
+ fullScreenStyles = {
+ backgroundColor: '#fff',
+ height: '100%',
+ left: '0',
+ margin: '0',
+ padding: '0',
+ position: 'fixed',
+ top: '0',
+ width: '100%',
+ zIndex: '99999',
+ };
+ }
+ const notes = main && getNotes(main);
+ const commentsTracksCount =
+ main && DocumentHelpers.getCommentsTracksCount(main);
+ const trackBlockNodesCount =
+ main && DocumentHelpers.getTrackBlockNodesCount(main);
+
+ const areNotes = notes && !!notes.length && notes.length > 0;
+
+ const [hasNotes, setHasNotes] = useState(areNotes);
+
+ const showNotes = () => {
+ setHasNotes(areNotes);
+ };
+
+ const delayedShowedNotes = useCallback(
+ setTimeout(() => showNotes(), 100),
+ [],
+ );
+
+ useEffect(() => {}, [delayedShowedNotes]);
+
+ return (
+ <ThemeProvider theme={cokoTheme}>
+ <Wrapper style={fullScreenStyles} id="wax-container">
+ <TopMenu>
+ <MainMenuToolBar />
+ </TopMenu>
+
+ <Main>
+ <SideMenu>
+ <LeftSideBar />
+ </SideMenu>
+
+ <EditorArea>
+ <PanelGroup
+ direction="column"
+ panelWidths={[
+ { size: surfaceHeight, resize: 'stretch' },
+ { size: notesHeight, resize: 'resize' },
+ ]}
+ onResizeEnd={onResizeEnd}
+ >
+ <WaxSurfaceScroll>
+ <EditorContainer>{editor}</EditorContainer>
+ <CommentsContainer>
+ <CommentTrackToolsContainer>
+ <CommentTrackTools>
+ {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
+ SUGGESTIONS
+ <CommentTrackOptions>
+ <CommentTrackToolBar />
+ </CommentTrackOptions>
+ </CommentTrackTools>
+ </CommentTrackToolsContainer>
+ <RightArea area="main" />
+ </CommentsContainer>
+ </WaxSurfaceScroll>
+
+ {hasNotes && (
+ <NotesAreaContainer>
+ <NotesContainer id="notes-container">
+ <NotesArea view={main} />
+ </NotesContainer>
+ <CommentsContainerNotes>
+ <RightArea area="notes" />
+ </CommentsContainerNotes>
+ </NotesAreaContainer>
+ )}
+ </PanelGroup>
+ </EditorArea>
+ </Main>
+ <WaxBottomRightInfo>
+ <InfoContainer id="info-container">
+ <BottomRightInfo />
+ </InfoContainer>
+ </WaxBottomRightInfo>
+ </Wrapper>
+ </ThemeProvider>
+ );
+};
+
+export default EditoriaLayout;
diff --git a/editors/demo/src/OEN/layout/index.js b/editors/demo/src/OEN/layout/index.js
new file mode 100644
index 000000000..f3883564b
--- /dev/null
+++ b/editors/demo/src/OEN/layout/index.js
@@ -0,0 +1 @@
+export { default as OenLayout } from './OenLayout';
diff --git a/editors/demo/src/OEN/theme/elements/ButtonStyles.js b/editors/demo/src/OEN/theme/elements/ButtonStyles.js
new file mode 100644
index 000000000..5a54e9877
--- /dev/null
+++ b/editors/demo/src/OEN/theme/elements/ButtonStyles.js
@@ -0,0 +1,17 @@
+import styled, { css } from "styled-components";
+
+export default css`
+ background: #fff;
+ border: none;
+ font-size: inherit;
+ cursor: pointer;
+ border-radius: 0;
+ padding: 5px 10px;
+ &:disabled {
+ color: #ccc;
+ pointer-events: none;
+ }
+ &:hover {
+ background: #f6f6f6;
+ }
+`;
diff --git a/editors/demo/src/OEN/theme/elements/index.js b/editors/demo/src/OEN/theme/elements/index.js
new file mode 100644
index 000000000..06cac1a0c
--- /dev/null
+++ b/editors/demo/src/OEN/theme/elements/index.js
@@ -0,0 +1 @@
+export { default as ButtonStyles } from "./ButtonStyles";
diff --git a/editors/demo/src/OEN/theme/index.js b/editors/demo/src/OEN/theme/index.js
new file mode 100644
index 000000000..1f02e5079
--- /dev/null
+++ b/editors/demo/src/OEN/theme/index.js
@@ -0,0 +1,2 @@
+export { default as cokoTheme } from "./theme";
+
diff --git a/editors/demo/src/OEN/theme/theme.js b/editors/demo/src/OEN/theme/theme.js
new file mode 100644
index 000000000..011ea8916
--- /dev/null
+++ b/editors/demo/src/OEN/theme/theme.js
@@ -0,0 +1,87 @@
+/* eslint-disable import/extensions */
+import 'typeface-fira-sans-condensed';
+import 'fontsource-merriweather';
+import 'typeface-vollkorn';
+import 'typeface-inter';
+
+import { css } from 'styled-components';
+
+const cokoTheme = {
+ /* Colors */
+ colorBackground: 'white',
+ colorPrimary: '#525E76',
+ colorSecondary: '#E7E7E7',
+ colorFurniture: '#CCC',
+ colorBorder: '#EBEBF0',
+ colorBackgroundHue: '#F1F5FF',
+ colorBackgroundTabs: '#e1ebff',
+ colorSuccess: '#008800',
+ colorError: 'indianred',
+ colorText: '#111',
+ colorTextReverse: '#FFF',
+ colorTextPlaceholder: '#595959',
+ colorWarning: '#ffc107',
+ colorBackgroundToolBar: '#fff',
+ colorSelection: '#C5D7FE',
+ colorBackgroundButton: '#0042C7',
+ /* Text variables */
+
+ // fonts
+ fontInterface: 'Fira Sans Condensed',
+ fontHeading: 'Fira Sans Condensed',
+ fontReading: 'Vollkorn',
+ fontWriting: 'Merriweather',
+ fontTools: 'Inter',
+
+ // font sizes
+ fontSizeBase: '14px',
+ fontSizeBaseSmall: '12px',
+ fontSizeHeading1: '40px',
+ fontSizeHeading2: '36px',
+ fontSizeHeading3: '28px',
+ fontSizeHeading4: '24px',
+ fontSizeHeading5: '20px',
+ fontSizeHeading6: '16px',
+
+ // line heights
+ lineHeightBase: '24px',
+ lineHeightBaseSmall: '16px',
+ lineHeightHeading1: '48px',
+ lineHeightHeading2: '40px',
+ lineHeightHeading3: '32px',
+ lineHeightHeading4: '32px',
+ lineHeightHeading5: '24px',
+ lineHeightHeading6: '24px',
+
+ /* Spacing */
+ gridUnit: '4px',
+
+ /* Border */
+ borderRadius: '0',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+
+ /* Shadow (for tooltip) */
+ boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.3)',
+
+ /* Transition */
+ transitionDuration: '0.2s',
+ transitionTimingFunction: 'ease',
+ transitionDelay: '0',
+ /* Breakpoints */
+ breakpoints: [480, 768, 1000, 1272],
+
+ cssOverrides: {
+ Wax: {
+ MenuButton: css`
+ /* color: magenta;
+
+ > svg {
+ fill: indianred;
+ } */
+ `,
+ },
+ },
+};
+
+export default cokoTheme;
--
GitLab