editoria file and config

editors/demo/src/Editoria/Editoria.js

-import React, {
-  useLayoutEffect,
-  useState,
-  useMemo,
-  useEffect,
-  useRef,
-} from 'react';
+import React, { useLayoutEffect, useState, useMemo, useRef } from 'react';
 
 import { Wax } from 'wax-prosemirror-core';
 
@@ -12,8 +6,6 @@ import { EditoriaLayout, EditoriaMobileLayout } from './layout';
 import { config, configMobile } from './config';
 import { demo } from './demo';
 import { debounce } from 'lodash';
-import { TablesService } from 'wax-table-service';
-import { YjsService } from 'wax-prosemirror-services';
 
 const renderImage = file => {
   const reader = new FileReader();
@@ -36,9 +28,6 @@ const user = {
 
 const Editoria = () => {
   const [width] = useWindowSize();
-  const [myConfig, setMyConfig] = useState(config);
-  const [myName, setMyName] = useState('COKO');
-  const [isFirst, setFirst] = useState(true);
 
   let layout = EditoriaLayout;
   let finalConfig = config;
@@ -51,106 +40,32 @@ const Editoria = () => {
   }
   const editorRef = useRef();
 
-  // useEffect(() => {
-  //   console.log('sss');
-  //   // const configObj = config(yjsProvider, ydoc, 'christos')
-  //   setTimeout(() => {
-  //     setFirst(false);
-  //   }, 5000);
-  //   // configObj.services = [...configObj.services, new TablesService()]
-  // }, [isFirst]);
-
-  if (!isFirst) {
-    // configObj.services = [...configObj.services, new TablesService()]
-    // configObj.name = 'ddd';
-    config.name = 'Ffdfd';
-    // setMyConfig({ ...myConfig });
-  }
-
-  return (
-    <>
-      <button
-        onClick={() => {
-          console.log(myConfig);
-          // myConfig.PmPlugins = [];
-          myConfig.services = [...myConfig.services, new TablesService()];
-          myConfig.name = 'Ffd1fd';
-          setMyConfig({ ...myConfig });
-        }}
-      >
-        {' '}
-        change config
-      </button>
-
-      <button
-        onClick={() => {
-          setMyName('GIANNIS');
-        }}
-      >
-        {' '}
-        change name
-      </button>
-
-      <Wax
-        ref={editorRef}
-        key={key}
-        config={config}
-        autoFocus
-        placeholder="Type Something..."
-        fileUpload={file => renderImage(file)}
-        // value={demo}
-        // readonly
-        layout={layout}
-        name={myName}
-        // onChange={debounce(source => {
-        //   console.log(JSON.stringify(source));
-        // }, 200)}
-        user={user}
-        scrollMargin={200}
-        scrollThreshold={200}
-        value={'<p>fdsfsdf<strong>test</strong>ss</p>'}
-      />
-    </>
+  const EditoriaComponent = useMemo(
+    () => (
+      <>
+        <Wax
+          ref={editorRef}
+          key={key}
+          config={finalConfig}
+          autoFocus
+          placeholder="Type Something..."
+          fileUpload={file => renderImage(file)}
+          value={demo}
+          // readonly
+          layout={layout}
+          // onChange={debounce(source => {
+          //   console.log(JSON.stringify(source));
+          // }, 200)}
+          user={user}
+          scrollMargin={200}
+          scrollThreshold={200}
+        />
+      </>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [layout, finalConfig],
   );
-
-  // const EditoriaComponent = useMemo(
-  //   () => (
-  //     <>
-  //       <button
-  //         onClick={() => {
-  //           console.log(myConfig);
-  //           myConfig.PmPlugins = [];
-  //           myConfig.services = [...myConfig.services, new TablesService()];
-  //           setMyConfig({ ...myConfig });
-  //         }}
-  //       >
-  //         {' '}
-  //         change config
-  //       </button>
-
-  //       <Wax
-  //         ref={editorRef}
-  //         key={key}
-  //         config={myConfig}
-  //         autoFocus
-  //         placeholder="Type Something..."
-  //         fileUpload={file => renderImage(file)}
-  //         // value={demo}
-  //         // readonly
-  //         layout={layout}
-  //         // onChange={debounce(source => {
-  //         //   console.log(JSON.stringify(source));
-  //         // }, 200)}
-  //         user={user}
-  //         scrollMargin={200}
-  //         scrollThreshold={200}
-  //       />
-  //     </>
-  //   ),
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  //   [layout, myConfig],
-  // );
-  // return <>{EditoriaComponent}</>;
+  return <>{EditoriaComponent}</>;
 };
 
 function useWindowSize() {

editors/demo/src/Editoria/config/config.js

@@ -26,8 +26,8 @@ import {
   disallowPasteImagesPlugin,
   BlockDropDownToolGroupService,
   AskAiContentService,
-  YjsService,
   BlockQuoteService,
+  YjsService,
 } from 'wax-prosemirror-services';
 
 import { TablesService, tableEditing, columnResizing } from 'wax-table-service';
@@ -53,7 +53,11 @@ async function DummyPromise(userInput, { askKb }) {
       } else {
         // JSON response test
         const json = JSON.stringify({
-          content: askKb ? 'KB will be queried' : 'Just a normal call',
+          content: askKb
+            ? 'KB will be queried'
+            : `<p>Hello my friend</p>
+<strong>this is a strong</strong>
+<h1>this a title</h1>`,
           citations: ['citation 1', 'citation 2', 'citation 3'],
           links: ['https://coko.foundation/', 'https://waxjs.net/about/'],
         });
@@ -213,7 +217,7 @@ export default {
       templateArea: 'mainMenuToolBar',
       toolGroups: [
         'Base',
-        // 'BlockDropDown',
+        'BlockDropDown',
         // 'TitleTool',
         {
           name: 'Annotations',
@@ -228,26 +232,26 @@ export default {
         'BlockQuoteTool',
         'HighlightToolGroup',
         'TransformToolGroup',
-        // 'CustomTagInline',
+        'CustomTagInline',
         'Notes',
         'Lists',
         'Images',
         'SpecialCharacters',
-        // 'CodeBlock',
+        'CodeBlock',
         'ToggleAi',
-        // 'Tables',
+        'Tables',
         'TrackingAndEditing',
         'FullScreen',
       ],
     },
-    // {
-    //   templateArea: 'leftSideBar',
-    //   toolGroups: ['DisplayText'],
-    // },
-    // {
-    //   templateArea: 'commentTrackToolBar',
-    //   toolGroups: ['TrackCommentOptions'],
-    // },
+    {
+      templateArea: 'leftSideBar',
+      toolGroups: ['DisplayText'],
+    },
+    {
+      templateArea: 'commentTrackToolBar',
+      toolGroups: ['TrackCommentOptions'],
+    },
     {
       templateArea: 'BottomRightInfo',
       toolGroups: ['InfoToolGroup'],
@@ -308,13 +312,13 @@ export default {
     updateTags: saveTags,
   },
 
-  YjsService: {
-    // eslint-disable-next-line no-restricted-globals
-    connectionUrl: 'ws://localhost:5010',
-    // connectionUrl: 'ws://0.tcp.ap.ngrok.io:17607',
-    docIdentifier: 'prosemirror-2',
-    YjsType: 'prosemirror',
-  },
+  // YjsService: {
+  //   // eslint-disable-next-line no-restricted-globals
+  //   connectionUrl: 'ws://localhost:5010',
+  //   // connectionUrl: 'ws://0.tcp.ap.ngrok.io:17607',
+  //   docIdentifier: 'prosemirror-r5dw4q2fe2eedreeeeeweewwewerc',
+  //   YjsType: 'prosemirror',
+  // },
 
   AskAiContentService: {
     AskAiContentTransformation: DummyPromise,
@@ -323,29 +327,29 @@ export default {
     // GenerateImages: false,
     CustomPromptsOn: true,
     FreeTextPromptsOn: true,
-    CustomPrompts: [],
+    CustomPrompts: ['custom promt here!!'],
   },
 
   services: [
-    new YjsService(),
+    // new YjsService(),
+    new BlockDropDownToolGroupService(),
     new BlockQuoteService(),
-    // new BlockDropDownToolGroupService(),
     new AskAiContentService(),
-    // new CustomTagService(),
-    // new DisplayBlockLevelService(),
-    // new TextBlockLevelService(),
+    new CustomTagService(),
+    new DisplayBlockLevelService(),
+    new TextBlockLevelService(),
     new ListsService(),
     new LinkService(),
     new InlineAnnotationsService(),
     new TrackChangeService(),
-    // new CommentsService(),
+    new CommentsService(),
     new ImageService(),
-    // new TablesService(),
+    new TablesService(),
     new BaseService(),
     new NoteService(),
-    // new CodeBlockService(),
+    new CodeBlockService(),
     new EditingSuggestingService(),
-    // new DisplayTextToolGroupService(),
+    new DisplayTextToolGroupService(),
     new MathService(),
     new FindAndReplaceService(),
     new FullScreenService(),