custom schema

editors/editoria/src/Editoria.js

@@ -58,8 +58,10 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={demo}
+          // value={demo}
+          value={'<title>hiii</title>'}
           layout={layout}
+          onChange={source => console.log(source)}
           user={user}
         />
       </>

editors/editoria/src/config/config.js

@@ -39,69 +39,103 @@ import invisibles, {
 } from '@guardian/prosemirror-invisibles';
 
 export default {
-  MenuService: [
-    {
-      templateArea: 'topBar',
-      toolGroups: [
-        'Base',
-        {
-          name: 'Annotations',
-          more: ['Superscript', 'Subscript', 'SmallCaps'],
+  // MenuService: [
+  //   {
+  //     templateArea: 'topBar',
+  //     toolGroups: [
+  //       'Base',
+  //       {
+  //         name: 'Annotations',
+  //         more: ['Superscript', 'Subscript', 'SmallCaps'],
+  //       },
+  //       'Notes',
+  //       'Lists',
+  //       'Images',
+  //       'CodeBlock',
+  //       'Tables',
+  //       'TrackingAndEditing',
+  //     ],
+  //   },
+  //   {
+  //     templateArea: 'leftSideBar',
+  //     toolGroups: ['DisplayText'],
+  //   },
+  // ],
+
+  SchemaService: {
+    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];
         },
-        'Notes',
-        'Lists',
-        'Images',
-        'CodeBlock',
-        'Tables',
-        'TrackingAndEditing',
-      ],
+      },
     },
-    {
-      templateArea: 'leftSideBar',
-      toolGroups: ['DisplayText'],
+    marks: {
+      em: {
+        parseDOM: [{ tag: 'i' }, { tag: 'em' }, { style: 'font-style=italic' }],
+        toDOM(mark) {
+          return [('em', 0)];
+        },
+      },
     },
-  ],
+  },
 
-  RulesService: [emDash, ellipsis],
-  ShortCutsService: {},
-  EnableTrackChangeService: { enabled: false },
+  // RulesService: [emDash, ellipsis],
+  // ShortCutsService: {},
+  // EnableTrackChangeService: { enabled: false },
 
-  PmPlugins: [
-    columnResizing(),
-    tableEditing(),
-    invisibles([hardBreak()]),
-    WaxSelectionPlugin,
-  ],
+  // PmPlugins: [
+  //   columnResizing(),
+  //   tableEditing(),
+  //   invisibles([hardBreak()]),
+  //   WaxSelectionPlugin,
+  // ],
 
   // 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 PlaceholderService(),
-    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 TrackChangeToolGroupService(),
-    new DisplayTextToolGroupService(),
-    new MathService(),
-    new FindAndReplaceService(),
-    new TrackingAndEditingToolGroupService(),
+    // new DisplayBlockLevelService(),
+    // new DisplayToolGroupService(),
+    // new TextBlockLevelService(),
+    // new TextToolGroupService(),
+    // new ListsService(),
+    // new LinkService(),
+    // new InlineAnnotationsService(),
+    // new TrackChangeService(),
+    // new CommentsService(),
+    // new PlaceholderService(),
+    // 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 TrackChangeToolGroupService(),
+    // new DisplayTextToolGroupService(),
+    // new MathService(),
+    // new FindAndReplaceService(),
+    // new TrackingAndEditingToolGroupService(),
   ],
 };

editors/editoria/src/index.js

-import React from "react";
-import ReactDOM from "react-dom";
-import Editoria from "./Editoria";
-import * as serviceWorker from "./serviceWorker";
-ReactDOM.render(<Editoria />, document.getElementById("root"));
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Editoria from './Editoria';
+import * as serviceWorker from './serviceWorker';
+ReactDOM.render(<Editoria />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

editors/editoria/src/layout/EditorElements.js

@@ -15,6 +15,7 @@ export default css`
     background: white;
     counter-reset: footnote;
     line-height: 1.6;
+    font-size: 14px;
     ${fontWriting}
 
     p::selection,
@@ -45,6 +46,11 @@ export default css`
     pointer-events: none;
   }
 
+  /* .ProseMirror title {
+    display: inline;
+    font-size: 14px;
+  } */
+
   .ProseMirror footnote {
     font-variant-numeric: lining-nums proportional-nums;
     display: inline-block;

wax-prosemirror-core/src/Application.js

@@ -54,6 +54,7 @@ export default class Application {
 
   getSchema() {
     this.schema = this.container.get('Schema');
+    console.log(this.schema.getSchema());
     return this.schema.getSchema();
   }
 

wax-prosemirror-core/src/Wax.js

@@ -15,8 +15,12 @@ const parser = schema => {
   const WaxParser = DOMParser.fromSchema(schema);
 
   return content => {
+    console.log(content);
     const container = document.createElement('article');
+
     container.innerHTML = content;
+    console.log(container.innerHTML);
+    console.log(WaxParser.parse(container));
     return WaxParser.parse(container);
   };
 };

wax-prosemirror-services/src/SchemaService/DefaultSchema.js

@@ -3,23 +3,16 @@ import { SchemaHelpers } from 'wax-prosemirror-utilities';
 export default {
   nodes: {
     doc: {
-      content: 'block+',
+      content: 'inline+',
     },
     text: {
       group: 'inline',
     },
-    hard_break: {
-      inline: true,
-      group: 'inline',
-      selectable: false,
-      parseDOM: [{ tag: 'br' }],
-      toDOM() {
-        return ['br'];
-      },
-    },
+
     paragraph: {
-      group: 'block',
+      group: 'inline',
       content: 'inline*',
+      inline: true,
       attrs: {
         id: { default: '' },
         class: { default: 'paragraph' },
@@ -44,6 +37,15 @@ export default {
         return ['p', attrs, 0];
       },
     },
+    hard_break: {
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseDOM: [{ tag: 'br' }],
+      toDOM() {
+        return ['br'];
+      },
+    },
   },
   marks: {},
 };

wax-prosemirror-services/src/SchemaService/Schema.js

 import { Schema as PmPschema } from 'prosemirror-model';
 import { injectable } from 'inversify';
+import { pickBy, identity } from 'lodash';
 import DefaultSchema from './DefaultSchema';
 
 import Node from './Node';
 import Mark from './Mark';
 
+export default
 @injectable()
-export default class Schema {
+class Schema {
   _nodes = {};
   _marks = {};
   prosemirrorSchema = { nodes: {}, marks: {} };
@@ -84,6 +86,7 @@ export default class Schema {
     const nodes = DefaultSchema.nodes;
     const marks = {};
 
+    // console.log(this._nodes);
     for (let index in this._nodes) {
       nodes[index] = this._nodes[index].toJSON();
     }
@@ -93,8 +96,14 @@ export default class Schema {
     }
 
     this.schema = new PmPschema({
-      nodes: Object.assign(nodes, this.prosemirrorSchema.nodes),
-      marks: Object.assign(marks, this.prosemirrorSchema.marks),
+      nodes: pickBy(
+        Object.assign(nodes, this.prosemirrorSchema.nodes),
+        identity,
+      ),
+      marks: pickBy(
+        Object.assign(marks, this.prosemirrorSchema.marks),
+        identity,
+      ),
     });
     return this.schema;
   }

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

-import Service from "../Service";
-import Schema from "./Schema";
-import Node from "./Node";
-import Mark from "./Mark";
+import { each } from 'lodash';
+import Service from '../Service';
+import Schema from './Schema';
+import Node from './Node';
+import Mark from './Mark';
 
 export default class SchemaService extends Service {
-  name = "SchemaService";
+  name = 'SchemaService';
 
   register() {
-    this.container
-      .bind("Schema")
-      .to(Schema)
-      .inSingletonScope();
+    this.container.bind('Schema').to(Schema).inSingletonScope();
 
-    this.container.bind("CreateNode").toFactory(context => {
+    this.container.bind('CreateNode').toFactory(context => {
       return (schema, options = { toWaxSchema: false }) => {
-        const schemaInstance = context.container.get("Schema");
+        const schemaInstance = context.container.get('Schema');
         if (options.toWaxSchema) {
           schemaInstance.addNode(schema);
         } else {
-          schemaInstance.addProsemirrorSchema(schema, "nodes");
+          schemaInstance.addProsemirrorSchema(schema, 'nodes');
         }
       };
     });
 
-    this.container.bind("CreateMark").toFactory(context => {
+    this.container.bind('CreateMark').toFactory(context => {
       return (schema, options = { toWaxSchema: false }) => {
-        const schemaInstance = context.container.get("Schema");
+        const schemaInstance = context.container.get('Schema');
         if (options.toWaxSchema) {
           schemaInstance.addMark(schema);
         } else {
-          schemaInstance.addProsemirrorSchema(schema, "marks");
+          schemaInstance.addProsemirrorSchema(schema, 'marks');
         }
       };
     });
+
+    const createNode = this.container.get('CreateNode');
+    const createMark = this.container.get('CreateMark');
+    each(this.config, (schemaElement, type) => {
+      if (type === 'nodes') {
+        createNode(schemaElement);
+      } else if (type === 'marks') {
+        createMark(schemaElement);
+      }
+    });
   }
 }