chore: fix code_mirror example

sibiraj-s · Jan 25, 2021 · 454d9be · 454d9be
1 parent 9dc6a98
commit 454d9be
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 25 deletions.
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit, OnDestroy {
   ];
 
   form = new FormGroup({
-    editorContent: new FormControl(jsonDoc, Validators.required())
+    editorContent: new FormControl(jsonDoc, Validators.required(schema))
   });
 
   get doc(): AbstractControl {

diff --git a/demo/src/app/components/custom-menu/custom-menu.component.ts b/demo/src/app/components/custom-menu/custom-menu.component.ts
@@ -31,13 +31,13 @@ export class CustomMenuComponent implements OnInit {
       return setBlockType(schema.nodes.paragraph)(state, dispatch);
     }
 
-    return setBlockType(schema.nodes.code_block)(state, dispatch);
+    return setBlockType(schema.nodes.code_mirror)(state, dispatch);
   }
 
   update = (view: EditorView) => {
     const { state } = view;
     const { schema } = state;
-    this.isActive = isNodeActive(state, schema.nodes.code_block);
+    this.isActive = isNodeActive(state, schema.nodes.code_mirror);
     this.isDisabled = !this.execute(state, null); // returns true if executable
   }
 

diff --git a/demo/src/app/doc.ts b/demo/src/app/doc.ts
@@ -176,7 +176,7 @@ export default {
       ]
     },
     {
-      type: 'code_block',
+      type: 'code_mirror',
       content: [
         {
           type: 'text',

diff --git a/demo/src/app/nodeviews/index.ts b/demo/src/app/nodeviews/index.ts
@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view';
 import CodeBlockView from './CodeMirror';
 
 const nodeViews = {
-  code_block: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => {
+  code_mirror: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => {
     return new CodeBlockView(node, view, getPos);
   }
 };

diff --git a/demo/src/app/schema.ts b/demo/src/app/schema.ts
@@ -1,25 +1,22 @@
 import { nodes as basicNodes, marks } from 'ngx-editor';
-import { Schema, Node as ProsemirrorNode, NodeSpec, DOMOutputSpec } from 'prosemirror-model';
+import { Schema, NodeSpec, DOMOutputSpec } from 'prosemirror-model';
 
 const codeMirror: NodeSpec = {
+  content: 'text*',
+  marks: '',
   group: 'block',
-  attrs: {
-    text: { default: '' },
-    language: { default: 'text/javascript' }
-  },
-  parseDOM: [{
-    tag: 'pre',
-    getAttrs: (dom: HTMLElement) => {
-      return {
-        text: dom.textContent,
-        language: dom.getAttribute('data-language') || 'text/plain'
-      };
+  code: true,
+  defining: true,
+  isolating: true,
+  parseDOM: [
+    {
+      tag: 'pre',
+      preserveWhitespace: 'full'
     }
-  }
   ],
-  toDOM(node: ProsemirrorNode): DOMOutputSpec {
-    return ['pre', { 'data-language': node.attrs.language }, node.attrs.text];
-  }
+  toDOM(): DOMOutputSpec {
+    return ['pre', ['code', 0]];
+  },
 };
 
 const nodes = {

diff --git a/docs/codemirror.md b/docs/codemirror.md
@@ -213,8 +213,8 @@ import schema from './schema.ts';
 new Editor({
   schema,
   nodeViews: {
-    code_block: (
-      // first define schema `code_block`. see schema section
+    code_mirror: (
+      // first define schema `code_mirror`. see schema section
       node: ProsemirrorNode,
       view: EditorView,
       getPos: () => number

diff --git a/docs/menu.md b/docs/menu.md
@@ -124,13 +124,13 @@ export class CustomMenuComponent implements OnInit {
       return setBlockType(schema.nodes.paragraph)(state, dispatch);
     }
 
-    return setBlockType(schema.nodes.code_block)(state, dispatch);
+    return setBlockType(schema.nodes.code_mirror)(state, dispatch);
   }
 
   update = (view: EditorView) => {
     const { state } = view;
     const { schema } = state;
-    this.isActive = isNodeActive(state, schema.nodes.code_block);
+    this.isActive = isNodeActive(state, schema.nodes.code_mirror);
     this.isDisabled = !this.execute(state, null); // returns true if executable
   };