test reconfigure

wax-prosemirror-core/src/Wax.js

 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState, forwardRef, useMemo } from 'react';
+import React, { useEffect, useState, forwardRef } from 'react';
 import { DOMSerializer } from 'prosemirror-model';
 import CryptoJS from 'crypto-js';
 import stringify from 'safe-stable-stringify';
 import DefaultSchema from './utilities/schema/DefaultSchema';
 import WaxProvider from './WaxContext';
 import PortalProvider from './PortalContext';
+import ApplicationProvider from './ApplicationContext';
 import Application from './Application';
 import helpers from './helpers/helpers';
 
@@ -56,14 +57,14 @@ const Wax = forwardRef((props, innerViewRef) => {
   const [application, setApplication] = useState();
   const [WaxLayout, setWaxLayout] = useState(null);
   const configHash = createConfigWithHash(config);
-  console.log(configHash);
+
   useEffect(() => {
     const newApplication = createApplication(props);
+    if (application) application.resetApp();
     setApplication(newApplication);
     const Layout = newApplication.container.get('Layout');
     if (layout) Layout.setLayout(layout);
     setWaxLayout(Layout.layoutComponent);
-    setTimeout(() => {}, 100);
   }, [configHash]);
 
   const finalOnChange = content => {
@@ -72,40 +73,38 @@ const Wax = forwardRef((props, innerViewRef) => {
     helpers.saveContent(content, onChange, schema, serializer, targetFormat);
   };
 
-  const WaxLayoutRender = useMemo(() => {
-    if (!application || !WaxLayout) return null;
-    return (
-      <WaxLayout
-        autoFocus={autoFocus}
-        browserSpellCheck={browserSpellCheck}
-        className={className}
-        configHash={configHash}
-        customValues={customValues}
-        fileUpload={fileUpload}
-        innerViewRef={innerViewRef}
-        onChange={finalOnChange || (() => true)}
-        placeholder={placeholder}
-        readonly={readonly}
-        scrollMargin={scrollMargin}
-        scrollThreshold={scrollThreshold}
-        serializer={serializer}
-        targetFormat={targetFormat}
-        TrackChange={
-          application.config.get('config.EnableTrackChangeService') || undefined
-        }
-        user={user}
-        value={value}
-        {...props}
-      />
-    );
-  }, [application?.id, { ...props }]);
-
   if (!application || !WaxLayout) return null;
 
   return (
-    <WaxProvider app={application}>
-      <PortalProvider>{WaxLayoutRender}</PortalProvider>
-    </WaxProvider>
+    <ApplicationProvider app={application}>
+      <WaxProvider>
+        <PortalProvider>
+          <WaxLayout
+            app={application}
+            autoFocus={autoFocus}
+            browserSpellCheck={browserSpellCheck}
+            className={className}
+            customValues={customValues}
+            fileUpload={fileUpload}
+            innerViewRef={innerViewRef}
+            onChange={finalOnChange || (() => true)}
+            placeholder={placeholder}
+            readonly={readonly}
+            scrollMargin={scrollMargin}
+            scrollThreshold={scrollThreshold}
+            serializer={serializer}
+            targetFormat={targetFormat}
+            TrackChange={
+              application.config.get('config.EnableTrackChangeService') ||
+              undefined
+            }
+            user={user}
+            value={value}
+            {...props}
+          />
+        </PortalProvider>
+      </WaxProvider>
+    </ApplicationProvider>
   );
 });
 

wax-prosemirror-core/src/useWaxView.js

+/* eslint-disable import/no-named-as-default */
 import { useContext, useEffect, useImperativeHandle, useState } from 'react';
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
@@ -9,17 +10,16 @@ import helpers from './helpers/helpers';
 import './styles/styles.css';
 
 let previousDoc;
-let currentCofingHash;
 
 const useWaxView = props => {
   const {
     browserSpellCheck,
     customValues,
     readonly,
-    autoFocus,
     user,
+    app,
+    autoFocus,
     innerViewRef,
-    configHash,
     targetFormat,
     serializer,
     scrollMargin,
@@ -27,32 +27,31 @@ const useWaxView = props => {
     onChange,
   } = props;
 
+  let view;
+
   const context = useContext(WaxContext);
   const [WaxView, setWaxView] = useState(null);
 
   const { createPortal } = useContext(PortalContext);
 
-  context.app.setContext({ ...context, createPortal });
-  const schema = context.app.getSchema();
-  let view;
+  app.setContext({ ...context, createPortal });
+  const schema = app.getSchema();
 
   useEffect(() => {
-    context.app.bootServices();
-    context.app.getShortCuts();
-    context.app.getRules();
+    app.bootServices();
+    app.getShortCuts();
+    app.getRules();
 
     const options = WaxOptions({
       ...props,
       schema,
-      plugins: context.app.getPlugins(),
+      plugins: app.getPlugins(),
     });
 
-    console.log('in view');
     view = new EditorView(null, {
       editable: () => !readonly,
       customValues,
       state: EditorState.create(options),
-      dispatchTransaction,
       disallowedTools: [],
       user,
       scrollMargin: scrollMargin || 200,
@@ -62,7 +61,32 @@ const useWaxView = props => {
       },
     });
 
-    setWaxView(view);
+    view.setProps({
+      dispatchTransaction: transaction => {
+        const { TrackChange } = props;
+        const tr =
+          TrackChange && TrackChange.enabled
+            ? trackedTransaction(transaction, view.state, user, app)
+            : transaction;
+
+        previousDoc = view.state.doc;
+        const state = view.state.apply(tr);
+        view.updateState(state);
+
+        context.setTransaction(transaction);
+        if (!transaction.getMeta('outsideView')) {
+          context.updateView({}, 'main');
+        }
+
+        const docContent =
+          targetFormat === 'JSON' ? state.doc.toJSON() : state.doc.content;
+        if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
+          onChange(docContent);
+      },
+    });
+
+    setWaxView({ ...view });
+
     context.updateView(
       {
         main: view,
@@ -75,7 +99,7 @@ const useWaxView = props => {
         view.focus();
       }
     }, 500);
-  }, [readonly, customValues, context.app.id]);
+  }, [readonly, customValues, app.id]);
 
   useEffect(() => {
     return () => (view = null);
@@ -87,39 +111,6 @@ const useWaxView = props => {
     },
   }));
 
-  const dispatchTransaction = transaction => {
-    if (currentCofingHash === configHash) {
-      const { TrackChange } = props;
-      const tr =
-        TrackChange && TrackChange.enabled
-          ? trackedTransaction(transaction, view.state, user, context)
-          : transaction;
-
-      if (!view) return;
-
-      previousDoc = view.state.doc;
-      const state = view.state.apply(tr);
-      view.updateState(state);
-
-      context.setTransaction(transaction);
-
-      context.updateView(
-        {
-          main: view,
-        },
-        'main',
-      );
-
-      const docContent =
-        targetFormat === 'JSON' ? state.doc.toJSON() : state.doc.content;
-      if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
-        onChange(docContent);
-    }
-    setTimeout(() => {
-      currentCofingHash = configHash;
-    }, 100);
-  };
-
   return WaxView;
 };