All of the sub component dependencies are moved to a higher context t…

…o allow nesting sub modules inside the editor and toolbar

package.json

@@ -98,8 +98,13 @@
     "@lexical/utils": "0.3.1",
     "katex": "^0.15.2",
     "lexical": "^0.3.1",
+    "use-child": "^1.0.0",
     "utility-types": "^3.10.0",
     "y-websocket": ">=1.3.x",
     "yjs": ">=13.5.22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ozanyurtsever/verbum"
   }
 }

src/Editor.tsx

@@ -35,6 +35,8 @@ import ToolbarPlugin from './plugins/ToolbarPlugin/ToolbarPlugin';
 import ContentEditable from './ui/ContentEditable';
 import Placeholder from './ui/Placeholder';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import EditorContext from './context/EditorContext';
 
 interface IEditorProps {
   children?: ReactNode;
@@ -53,6 +55,9 @@ const Editor = ({
   listMaxIndent = 7,
   placeholder = '',
 }: IEditorProps) => {
+  const [editor] = useLexicalComposerContext();
+  const [activeEditor, setActiveEditor] = useState(editor);
+
   const editorStateRef = useRef(null);
   const { historyState } = useSharedHistoryContext();
   const {
@@ -62,8 +67,9 @@ const Editor = ({
   const scrollRef = useRef(null);
 
   return (
-    <>
-      {/* <ToolbarPlugin /> */}
+    <EditorContext.Provider
+      value={{ initialEditor: editor, activeEditor, setActiveEditor }}
+    >
       {children}
       <div className={`editor-container`} ref={scrollRef}>
         <AutoFocusPlugin />
@@ -100,7 +106,7 @@ const Editor = ({
         <HistoryPlugin externalHistoryState={historyState} />
         <ActionsPlugin isRichText={isRichText} />
       </div>
-    </>
+    </EditorContext.Provider>
   );
 };
 

src/EditorComposer.tsx

@@ -1,5 +1,5 @@
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import React from 'react';
+import React, { useState } from 'react';
 import PlaygroundNodes from './nodes/PlaygroundNodes';
 import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
 import './EditorComposer.css';

src/context/EditorContext.tsx

@@ -0,0 +1,12 @@
+import { LexicalEditor } from 'lexical';
+import React, { createContext } from 'react';
+
+interface IEditorContext {
+  initialEditor: LexicalEditor;
+  activeEditor: LexicalEditor;
+  setActiveEditor: React.Dispatch<React.SetStateAction<LexicalEditor>>;
+}
+
+const EditorContext = createContext<IEditorContext | null>(null);
+
+export default EditorContext;

src/context/ToolbarContext.tsx

@@ -0,0 +1,10 @@
+import { LexicalEditor } from 'lexical';
+import React, { createContext } from 'react';
+
+interface IToolbarContext {
+  isRTL: boolean;
+}
+
+const ToolbarContext = createContext<IToolbarContext | null>(null);
+
+export default ToolbarContext;

src/hooks/useChild.tsx

@@ -0,0 +1,23 @@
+import React, { Children, ReactElement } from 'react';
+import { useEffect, useState } from 'react';
+
+const useChild = <T,>(
+  children: ReactElement | ReactElement[],
+  childCandidate: any
+): [boolean, T] => {
+  const [matchedChild, setMatchedChild] = useState(null);
+  const [matched, setMatched] = useState(false);
+
+  useEffect(() => {
+    Children.forEach(children, (child) => {
+      if (child.type === childCandidate) {
+        setMatchedChild(child);
+        setMatched(true);
+      }
+    });
+  }, [children]);
+
+  return [matched, matchedChild];
+};
+
+export default useChild;