From 935661ec170f7ebf8a3572e5511e5ed17daa20ce Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 28 Jul 2020 05:30:58 +0300
Subject: [PATCH] code block working

---
 editors/editoria/src/config/config.js             |  2 +-
 wax-prosemirror-components/src/icons/icons.js     | 12 ++++++------
 wax-prosemirror-schema/src/nodes/codeBlockNode.js |  2 +-
 .../src/CodeBlockService/CodeBlockService.js      | 10 ++++++++--
 .../src/CodeBlockService/CodeBlockTool.js         | 15 +++++++++++----
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 5efeb8d0f..397d80278 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -46,8 +46,8 @@ export default {
         'Notes',
         'Lists',
         'Images',
-        'Tables',
         'CodeBlock',
+        'Tables',
       ],
     },
     {
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 616a52ce5..d7d01c546 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import {
   faBold,
   faItalic,
@@ -22,9 +22,9 @@ import {
   faAngleUp,
   faStickyNote,
   faVial,
-  // faWheelchair,
+  faFileCode,
   faEllipsisH,
-} from '@fortawesome/free-solid-svg-icons'
+} from '@fortawesome/free-solid-svg-icons';
 
 export default {
   em: <FontAwesomeIcon icon={faItalic} />,
@@ -40,7 +40,7 @@ export default {
   paragraph: <FontAwesomeIcon icon={faParagraph} />,
   heading: <FontAwesomeIcon icon={faHeading} />,
   blockquote: <FontAwesomeIcon icon={faQuoteLeft} />,
-  code_block: <FontAwesomeIcon icon={faCode} />,
+  code_block: <FontAwesomeIcon icon={faFileCode} />,
   ordered_list: <FontAwesomeIcon icon={faListOl} />,
   bullet_list: <FontAwesomeIcon icon={faListUl} />,
   image: <FontAwesomeIcon icon={faImage} />,
@@ -71,4 +71,4 @@ export default {
       </svg>
     </span>
   ),
-}
+};
diff --git a/wax-prosemirror-schema/src/nodes/codeBlockNode.js b/wax-prosemirror-schema/src/nodes/codeBlockNode.js
index 21fbdd2c6..18ae5b294 100644
--- a/wax-prosemirror-schema/src/nodes/codeBlockNode.js
+++ b/wax-prosemirror-schema/src/nodes/codeBlockNode.js
@@ -1,5 +1,5 @@
 const codeBlock = {
-  content: 'block+',
+  content: 'text*',
   group: 'block',
   code: true,
   defining: true,
diff --git a/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js b/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
index 1fa6cab70..b1fef7016 100644
--- a/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
+++ b/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
@@ -1,16 +1,22 @@
+import hljs from 'highlight.js/lib/core';
+import { highlightPlugin } from 'prosemirror-highlightjs';
+import 'highlight.js/styles/github.css';
+
 import { codeBlockNode } from 'wax-prosemirror-schema';
 import Service from '../Service';
 import CodeBlockTool from './CodeBlockTool';
 
 export default class CodeBlockService extends Service {
-  boot() {}
+  boot() {
+    this.app.PmPlugins.add('highlightPlugin', highlightPlugin(hljs));
+  }
 
   register() {
     this.container.bind('CodeBlockTool').to(CodeBlockTool);
     const createNode = this.container.get('CreateNode');
 
     createNode({
-      codeblock: codeBlockNode,
+      code_block: codeBlockNode,
     });
   }
 }
diff --git a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
index bce0d126d..1cec46ca2 100644
--- a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
+++ b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
@@ -1,20 +1,27 @@
 import Tools from '../lib/Tools';
 import { injectable } from 'inversify';
 import { icons } from 'wax-prosemirror-components';
-import { wrapIn } from 'prosemirror-commands';
+import { Commands } from 'wax-prosemirror-utilities';
 
 @injectable()
 class CodeBlockTool extends Tools {
   title = 'Insert Code Block';
-  content = icons.footnote;
+  content = icons.code_block;
 
   get run() {
     return (state, dispatch) => {
-      wrapIn(state.config.schema.nodes.codeblock)(state, dispatch);
+      Commands.setBlockType(state.config.schema.nodes.code_block)(
+        state,
+        dispatch,
+      );
     };
   }
 
-  get enable() {}
+  get enable() {
+    return state => {
+      return Commands.setBlockType(state.config.schema.nodes.code_block)(state);
+    };
+  }
 }
 
 export default CodeBlockTool;
-- 
GitLab