use WaxView

editors/demo/src/Editors.js

@@ -91,7 +91,7 @@ const Editors = () => {
       case 'oen':
         return <OEN />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

wax-prosemirror-core/src/WaxView.js

-/* eslint-disable consistent-return */
-/* eslint-disable react/prop-types */
-import React, { useContext, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { WaxContext } from './WaxContext';
 import ComponentPlugin from './ComponentPlugin';
 import './styles/styles.css';
 import useWaxView from './useWaxView';
@@ -20,37 +17,19 @@ const WaxPortals = ComponentPlugin('waxPortals');
 const WaxOverlays = ComponentPlugin('waxOverlays');
 
 const WaxView = props => {
-  const { autoFocus } = props;
-
   const main = useWaxView(props);
 
-  // const {
-  //   pmViews: { main },
-  // } = useContext(WaxContext);
-
-  useEffect(() => {
-    if (autoFocus && main) {
-      main.focus();
-    }
-  }, [autoFocus]);
-
   const divRef = useRef(null);
 
-  const initialize = useCallback(() => {
-    console.log('Initializing only once');
-
-    // You can perform any initialization logic here
-    // This code will only run once when the component mounts
+  const initializeWaxView = useCallback(() => {
     if (divRef.current) {
-      console.log('dkddkkdk', main?.dom);
       divRef.current.replaceChildren(main?.dom);
-      // Perform some operation with divRef.current
     }
   }, [main]);
 
   useEffect(() => {
-    initialize();
-  }, [initialize]);
+    initializeWaxView();
+  }, [initializeWaxView]);
 
   return (
     <EditorContainer>

wax-prosemirror-core/src/useWaxView.js

-/* eslint-disable consistent-return */
-/* eslint-disable react/prop-types */
 import { useContext, useEffect, useImperativeHandle, useState } from 'react';
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
@@ -26,6 +24,7 @@ const useWaxView = props => {
     scrollThreshold,
     onChange,
   } = props;
+
   const context = useContext(WaxContext);
   const [WaxView, setWaxView] = useState(null);
   const { createPortal } = useContext(PortalContext);
@@ -33,12 +32,12 @@ const useWaxView = props => {
   context.app.setContext({ ...context, createPortal });
   const schema = context.app.getSchema();
   let view;
+
   useEffect(() => {
     context.app.bootServices();
     context.app.getShortCuts();
     context.app.getRules();
 
-    console.log('all props', props);
     const options = WaxOptions({
       ...props,
       schema,
@@ -98,11 +97,6 @@ const useWaxView = props => {
     const state = view.state.apply(tr);
     view.updateState(state);
 
-    const docContent =
-      targetFormat === 'JSON' ? state.doc.toJSON() : state.doc.content;
-    if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
-      if (onChange) onChange(docContent);
-
     /* when a transaction comes from a view other than
       main don't keep updating the view ,as this is
       the central point of each transaction
@@ -117,6 +111,11 @@ const useWaxView = props => {
         'main',
       );
     }
+
+    const docContent =
+      targetFormat === 'JSON' ? state.doc.toJSON() : state.doc.content;
+    if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
+      onChange(docContent);
   };
 
   return WaxView;