From d2d2624577ff9426b1417cc57530aa21e4f6690e Mon Sep 17 00:00:00 2001
From: Mateusz Kleszcz <mateusz.kacper.kleszcz@gmail.com>
Date: Tue, 5 Mar 2024 09:37:24 +0100
Subject: [PATCH] Release/0.2.4 (#88)

* Feature/scihub 963 add GitHub workflows (#80)

---------

Co-authored-by: Krzysztof Nofz <knofz@virtuslab.com>

* Feature/scihub 1058 increase modal index (#84)

---------

Co-authored-by: Krzysztof Nofz <knofz@virtuslab.com>

* Feature: scihub-1209 google slide modal (#87)

* feature/SCIHUB-1209: fixed typo in hook name

* feature/SCIHUB-1209 add component prop

* feature/SCIHUB-1209: fixed naming

* feature/SCIHUB-1209: increment version

* feature/SCIHUB-1209: whole modal as prop

---------

Co-authored-by: Krzysztof Nofz <knofz@virtuslab.com>

---------

Co-authored-by: Krzysztof Nofz <krzysztofnofz@gmail.com>
Co-authored-by: Krzysztof Nofz <knofz@virtuslab.com>
---
 CHANGELOG.md                                  |  5 ++
 package.json                                  |  4 +-
 .../AddDocumentModalContent.tsx               |  3 +-
 .../hooks/useFileConvertion.tsx               |  2 +-
 .../AddGoogleSlidesModal.tsx                  | 61 ++++++++++++--
 .../DefaultAddGoogleSlidesModal.tsx           | 69 ++++++++++++++++
 .../GoogleSlidesContent.tsx                   | 80 -------------------
 .../CodeBlockNode/CodeBlockNode.tsx           |  2 +-
 .../DocumentNode/FileNode/FileNode.tsx        |  2 +-
 .../DocumentNode/ImageNode/ImageNode.tsx      |  2 +-
 .../components/LinkTooltip/LinkTooltip.tsx    |  2 +-
 src/lib/components/MathNode/MathNode.tsx      |  2 +-
 src/lib/components/MenuBar/MenuBar.tsx        |  2 +-
 .../components/MermaidNode/MermaidNode.tsx    |  2 +-
 src/lib/components/TableSelectorWidget.tsx    |  2 +-
 .../TextEditorContextProvider.tsx             | 10 +++
 ...toContext.tsx => useTextEditorContext.tsx} |  0
 .../useGoogleSlidesPlugin.tsx                 |  2 +-
 .../hooks/useEditorViewPlugin.tsx             |  2 +-
 .../hooks/usePlaceholderPlugin.tsx            |  2 +-
 .../hooks/useUploadPlugin/useUploader.tsx     |  2 +-
 src/lib/packages/TextEditor.tsx               |  2 +
 22 files changed, 156 insertions(+), 104 deletions(-)
 create mode 100644 src/lib/components/AddGoogleSlidesModal/DefaultAddGoogleSlidesModal.tsx
 delete mode 100644 src/lib/components/AddGoogleSlidesModal/GoogleSlidesContent.tsx
 rename src/lib/components/TextEditorContext/{useTextEditoContext.tsx => useTextEditorContext.tsx} (100%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 498d7910..5da4e7fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v.2.4]
+
+## Changed
+- added `components` prop, which enables modifying Google Slides modal content
+
 ## [v.2.3]
 
 ## Changed
diff --git a/package.json b/package.json
index 80a33154..e2699e0d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "altos-text-editor",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "files": [
     "dist"
@@ -110,4 +110,4 @@
       "yarn run lint:style:fix"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/components/AddDocumentModal/AddDocumentModalContent.tsx b/src/lib/components/AddDocumentModal/AddDocumentModalContent.tsx
index 15c6d4f7..056f0924 100644
--- a/src/lib/components/AddDocumentModal/AddDocumentModalContent.tsx
+++ b/src/lib/components/AddDocumentModal/AddDocumentModalContent.tsx
@@ -1,5 +1,4 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import styled from 'styled-components';
 
@@ -16,7 +15,7 @@ import {
   toggleOutInVariant,
 } from '../../styles/common/animations';
 import { pxToRem } from '../../styles/utils';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 export type AddDocumentModalContentProps = {
   onInsert: (source: string) => void;
diff --git a/src/lib/components/AddDocumentModal/hooks/useFileConvertion.tsx b/src/lib/components/AddDocumentModal/hooks/useFileConvertion.tsx
index c6612c35..12406a4a 100644
--- a/src/lib/components/AddDocumentModal/hooks/useFileConvertion.tsx
+++ b/src/lib/components/AddDocumentModal/hooks/useFileConvertion.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { useNotification } from '../../../hooks/useNotification';
-import { useTextEditorContext } from '../../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../TextEditorContext/useTextEditorContext';
 
 export const useFileConvertion = () => {
   const { onFileUpload, onFileValidation } = useTextEditorContext();
diff --git a/src/lib/components/AddGoogleSlidesModal/AddGoogleSlidesModal.tsx b/src/lib/components/AddGoogleSlidesModal/AddGoogleSlidesModal.tsx
index 3e9995e9..49c3314f 100644
--- a/src/lib/components/AddGoogleSlidesModal/AddGoogleSlidesModal.tsx
+++ b/src/lib/components/AddGoogleSlidesModal/AddGoogleSlidesModal.tsx
@@ -1,5 +1,15 @@
-import { GoogleSlidesContent } from './GoogleSlidesContent';
-import { Modal, ModalProps } from '../../common/Modal/Modal';
+import { EditorStatus, editorViewCtx } from '@milkdown/core';
+
+import { DefaultAddGoogleSlidesModal } from './DefaultAddGoogleSlidesModal';
+import {
+  GoogleDocFormValues,
+  useGoogleDocForm,
+} from './hooks/useGoogleDocForm';
+import { useModalContext } from '../../common/Modal/context/useModalContext';
+import { ModalProps } from '../../common/Modal/Modal';
+import { useEditorLinkActions } from '../../hooks/useEditorLinkActions';
+import { useMilkdownInstance } from '../../hooks/useMilkdownInstance';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 type AddGoogleSlidesModalProps = ModalProps;
 
@@ -7,8 +17,45 @@ export const AddGoogleSlidesModal: React.FC<AddGoogleSlidesModalProps> = ({
   handler,
   onModalOpen,
   onModalClose,
-}) => (
-  <Modal {...{ handler, onModalOpen, onModalClose }}>
-    <GoogleSlidesContent />
-  </Modal>
-);
+}) => {
+  const { editor, loading } = useMilkdownInstance();
+  const { onClose } = useModalContext();
+  const { handleSubmit, formState, register } = useGoogleDocForm();
+
+  const { components } = useTextEditorContext();
+  const AddGoogleSlides =
+    components?.AddGoogleSlidesModal || DefaultAddGoogleSlidesModal;
+
+  const { getLinkCreationTransaction } = useEditorLinkActions();
+
+  const onSubmit = ({ url }: GoogleDocFormValues) => {
+    if (loading || !editor || editor.status !== EditorStatus.Created) {
+      return;
+    }
+
+    editor.action(ctx => {
+      const view = ctx.get(editorViewCtx);
+      const transaction = getLinkCreationTransaction(view, {
+        text: url,
+        href: url,
+      });
+      if (transaction) {
+        view.dispatch(transaction);
+      }
+      onClose();
+    });
+  };
+
+  return (
+    <AddGoogleSlides
+      {...{
+        handler,
+        onModalOpen,
+        onModalClose,
+        onSubmit: handleSubmit(onSubmit),
+        register,
+        formState,
+      }}
+    />
+  );
+};
diff --git a/src/lib/components/AddGoogleSlidesModal/DefaultAddGoogleSlidesModal.tsx b/src/lib/components/AddGoogleSlidesModal/DefaultAddGoogleSlidesModal.tsx
new file mode 100644
index 00000000..43853f61
--- /dev/null
+++ b/src/lib/components/AddGoogleSlidesModal/DefaultAddGoogleSlidesModal.tsx
@@ -0,0 +1,69 @@
+import { FormState, UseFormRegister } from 'react-hook-form';
+import styled from 'styled-components';
+
+import { Anchor } from '../../common/Anchor';
+import { Input } from '../../common/Input';
+import { Modal, ModalProps } from '../../common/Modal/Modal';
+import { ModalActions } from '../../common/Modal/ModalActions';
+import { ModalBody } from '../../common/Modal/ModalBody';
+import { ModalFooter } from '../../common/Modal/ModalFooter';
+import { ModalHeader } from '../../common/Modal/ModalHeader';
+import { pxToRem } from '../../styles/utils';
+
+export type AddGoogleSlidesModalProps = {
+  formState: FormState<{
+    url: string;
+  }>;
+  register: UseFormRegister<{
+    url: string;
+  }>;
+  onSubmit: (
+    e?: React.BaseSyntheticEvent<object, any, any> | undefined
+  ) => Promise<void>;
+} & ModalProps;
+
+export const DefaultAddGoogleSlidesModal: React.FC<
+  AddGoogleSlidesModalProps
+> = ({ handler, onModalOpen, onModalClose, onSubmit, register, formState }) => {
+  return (
+    <Modal {...{ handler, onModalOpen, onModalClose }}>
+      <form onSubmit={onSubmit}>
+        <ModalHeader>Add Google Slides presentation</ModalHeader>
+        <ModalBodyStyled>
+          <NoteStyled>
+            Learn how to
+            <AnchorStyled href="https://support.google.com/docs/answer/183965?hl=en&co=GENIE.Platform%3DDesktop">
+              publish files from Google Drive
+            </AnchorStyled>
+          </NoteStyled>
+          <Input
+            {...register('url')}
+            error={formState.errors.url?.message}
+            placeholder="Paste the “Publish to the web” link"
+            data-testid="add-slide-show-url-input"
+          />
+        </ModalBodyStyled>
+        <ModalFooter>
+          <ModalActions
+            saveButtonType="submit"
+            isDisabled={!formState.isValid}
+          />
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
+
+const NoteStyled = styled.p`
+  font-size: ${pxToRem(14)};
+  color: ${props => props.theme.colors.grey};
+  margin-bottom: ${pxToRem(16)};
+`;
+
+const AnchorStyled = styled(Anchor)`
+  margin: 0 ${pxToRem(2)};
+`;
+
+const ModalBodyStyled = styled(ModalBody)`
+  padding-top: 0;
+`;
diff --git a/src/lib/components/AddGoogleSlidesModal/GoogleSlidesContent.tsx b/src/lib/components/AddGoogleSlidesModal/GoogleSlidesContent.tsx
deleted file mode 100644
index 4cba09de..00000000
--- a/src/lib/components/AddGoogleSlidesModal/GoogleSlidesContent.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { EditorStatus, editorViewCtx } from '@milkdown/core';
-import styled from 'styled-components';
-
-import {
-  GoogleDocFormValues,
-  useGoogleDocForm,
-} from './hooks/useGoogleDocForm';
-import { Anchor } from '../../common/Anchor';
-import { Input } from '../../common/Input';
-import { useModalContext } from '../../common/Modal/context/useModalContext';
-import { ModalActions } from '../../common/Modal/ModalActions';
-import { ModalBody } from '../../common/Modal/ModalBody';
-import { ModalFooter } from '../../common/Modal/ModalFooter';
-import { ModalHeader } from '../../common/Modal/ModalHeader';
-import { useEditorLinkActions } from '../../hooks/useEditorLinkActions';
-import { useMilkdownInstance } from '../../hooks/useMilkdownInstance';
-import { pxToRem } from '../../styles/utils';
-
-export const GoogleSlidesContent: React.FC = () => {
-  const { editor, loading } = useMilkdownInstance();
-  const { onClose } = useModalContext();
-  const { handleSubmit, formState, register } = useGoogleDocForm();
-
-  const { getLinkCreationTransaction } = useEditorLinkActions();
-
-  const onSubmit = ({ url }: GoogleDocFormValues) => {
-    if (loading || !editor || editor.status !== EditorStatus.Created) {
-      return;
-    }
-
-    editor.action(ctx => {
-      const view = ctx.get(editorViewCtx);
-      const transaction = getLinkCreationTransaction(view, {
-        text: url,
-        href: url,
-      });
-      if (transaction) {
-        view.dispatch(transaction);
-      }
-      onClose();
-    });
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <ModalHeader>Add Google Slides presentation</ModalHeader>
-      <ModalBodyStyled>
-        <NoteStyled>
-          Learn how to
-          <AnchorStyled href="https://support.google.com/docs/answer/183965?hl=en&co=GENIE.Platform%3DDesktop">
-            publish files from Google Drive
-          </AnchorStyled>
-        </NoteStyled>
-        <Input
-          {...register('url')}
-          error={formState.errors.url?.message}
-          placeholder="Paste the “Publish to the web” link"
-          data-testid="add-slide-show-url-input"
-        />
-      </ModalBodyStyled>
-      <ModalFooter>
-        <ModalActions saveButtonType="submit" isDisabled={!formState.isValid} />
-      </ModalFooter>
-    </form>
-  );
-};
-
-const NoteStyled = styled.p`
-  font-size: ${pxToRem(14)};
-  color: ${props => props.theme.colors.grey};
-  margin-bottom: ${pxToRem(16)};
-`;
-
-const AnchorStyled = styled(Anchor)`
-  margin: 0 ${pxToRem(2)};
-`;
-
-const ModalBodyStyled = styled(ModalBody)`
-  padding-top: 0;
-`;
diff --git a/src/lib/components/CodeBlockNode/CodeBlockNode.tsx b/src/lib/components/CodeBlockNode/CodeBlockNode.tsx
index 8a9d9935..8ab8069e 100644
--- a/src/lib/components/CodeBlockNode/CodeBlockNode.tsx
+++ b/src/lib/components/CodeBlockNode/CodeBlockNode.tsx
@@ -10,7 +10,7 @@ import { Select } from '../../common/Select';
 import { useNotification } from '../../hooks/useNotification';
 import { pxToRem } from '../../styles/utils';
 import { Matcher } from '../../utils/Matcher';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 const options: Option[] = [
   {
diff --git a/src/lib/components/DocumentNode/FileNode/FileNode.tsx b/src/lib/components/DocumentNode/FileNode/FileNode.tsx
index 2f4e3a44..5092cc37 100644
--- a/src/lib/components/DocumentNode/FileNode/FileNode.tsx
+++ b/src/lib/components/DocumentNode/FileNode/FileNode.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../../../common/Icon/Icon';
 import { useMilkdownInstance } from '../../../hooks/useMilkdownInstance';
 import { pxToRem } from '../../../styles/utils';
 import { Matcher } from '../../../utils/Matcher';
-import { useTextEditorContext } from '../../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../TextEditorContext/useTextEditorContext';
 
 export const FileNode: React.FC = () => {
   const { colors } = useTheme();
diff --git a/src/lib/components/DocumentNode/ImageNode/ImageNode.tsx b/src/lib/components/DocumentNode/ImageNode/ImageNode.tsx
index 5c32908e..2cad0488 100644
--- a/src/lib/components/DocumentNode/ImageNode/ImageNode.tsx
+++ b/src/lib/components/DocumentNode/ImageNode/ImageNode.tsx
@@ -12,7 +12,7 @@ import { useIsNodeSelected } from '../../../hooks/useIsNodeSelected';
 import { useMilkdownInstance } from '../../../hooks/useMilkdownInstance';
 import { useToggler } from '../../../hooks/useToggler';
 import { pxToRem } from '../../../styles/utils';
-import { useTextEditorContext } from '../../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../TextEditorContext/useTextEditorContext';
 
 export const ImageNode: React.FC = () => {
   const [imageProperties, setImageProperties] = useState<{
diff --git a/src/lib/components/LinkTooltip/LinkTooltip.tsx b/src/lib/components/LinkTooltip/LinkTooltip.tsx
index bdc0d5fa..9a4ff1c0 100644
--- a/src/lib/components/LinkTooltip/LinkTooltip.tsx
+++ b/src/lib/components/LinkTooltip/LinkTooltip.tsx
@@ -14,7 +14,7 @@ import { useMilkdownInstance } from '../../hooks/useMilkdownInstance';
 import { useSelectedMarkPosition } from '../../hooks/useSelectedMarkPosition';
 import { pxToRem } from '../../styles/utils';
 import { LinkModal } from '../LinkModal/LinkModal';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 export const LinkTooltip: React.FC = () => {
   const { colors } = useTheme();
diff --git a/src/lib/components/MathNode/MathNode.tsx b/src/lib/components/MathNode/MathNode.tsx
index 3b85eaa9..20e6ced0 100644
--- a/src/lib/components/MathNode/MathNode.tsx
+++ b/src/lib/components/MathNode/MathNode.tsx
@@ -8,7 +8,7 @@ import { TabList } from '../../common/Tabs/TabList';
 import { TabPanel } from '../../common/Tabs/TabPanel';
 import { Tabs } from '../../common/Tabs/Tabs';
 import { pxToRem } from '../../styles/utils';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 export enum MathNodeTabs {
   Preview = 'preview',
diff --git a/src/lib/components/MenuBar/MenuBar.tsx b/src/lib/components/MenuBar/MenuBar.tsx
index 339ee2c5..61f8355b 100644
--- a/src/lib/components/MenuBar/MenuBar.tsx
+++ b/src/lib/components/MenuBar/MenuBar.tsx
@@ -10,7 +10,7 @@ import { TextsFormatActionsDropdown } from './TextsFormatActionsDropdown/TextsFo
 import { useMatchMedia } from '../../hooks/useMatchMedia';
 import { theme } from '../../styles/theme';
 import { pxToRem } from '../../styles/utils';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 export const MenuBar = () => {
   const { queries } = useTheme();
diff --git a/src/lib/components/MermaidNode/MermaidNode.tsx b/src/lib/components/MermaidNode/MermaidNode.tsx
index c8bffbbe..7ec6ceaf 100644
--- a/src/lib/components/MermaidNode/MermaidNode.tsx
+++ b/src/lib/components/MermaidNode/MermaidNode.tsx
@@ -8,7 +8,7 @@ import { TabList } from '../../common/Tabs/TabList';
 import { TabPanel } from '../../common/Tabs/TabPanel';
 import { Tabs } from '../../common/Tabs/Tabs';
 import { pxToRem } from '../../styles/utils';
-import { useTextEditorContext } from '../TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../TextEditorContext/useTextEditorContext';
 
 export enum MermaidNodeTabs {
   Preview = 'preview',
diff --git a/src/lib/components/TableSelectorWidget.tsx b/src/lib/components/TableSelectorWidget.tsx
index 7dbf80d3..eb196e38 100644
--- a/src/lib/components/TableSelectorWidget.tsx
+++ b/src/lib/components/TableSelectorWidget.tsx
@@ -10,7 +10,7 @@ import { useWidgetViewContext } from '@prosemirror-adapter/react';
 import { useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useTextEditorContext } from './TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from './TextEditorContext/useTextEditorContext';
 import { Button, ButtonProps } from '../common/Button';
 import { useMilkdownInstance } from '../hooks/useMilkdownInstance';
 import { tableTooltipCtx } from '../packages/EditorContext/hooks/useGfmPlugin/useGfmPlugin';
diff --git a/src/lib/components/TextEditorContext/TextEditorContextProvider.tsx b/src/lib/components/TextEditorContext/TextEditorContextProvider.tsx
index b73e735f..9c11184a 100644
--- a/src/lib/components/TextEditorContext/TextEditorContextProvider.tsx
+++ b/src/lib/components/TextEditorContext/TextEditorContextProvider.tsx
@@ -2,6 +2,7 @@ import { createContext, useMemo } from 'react';
 
 import { useBase64File } from '../../hooks/useBase64File';
 import { TextEditorMode } from '../../packages/TextEditor';
+import { AddGoogleSlidesModalProps } from '../AddGoogleSlidesModal/DefaultAddGoogleSlidesModal';
 
 type TextEditorContextData = {
   mode: TextEditorMode;
@@ -11,6 +12,9 @@ type TextEditorContextData = {
   onFileUpload: (file: File) => Promise<string>;
   onFileValidation?: (file: File | null) => boolean;
   inputAcceptedFormats: string;
+  components?: {
+    AddGoogleSlidesModal?: React.FC<AddGoogleSlidesModalProps>;
+  };
 };
 
 export const TextEditorContext = createContext<TextEditorContextData>({
@@ -32,6 +36,9 @@ export type TextEditorContextProviderProps = {
   onFileUpload?: (file: File) => Promise<string>;
   onFileValidation?: (file: File | null) => boolean;
   inputAcceptedFormats?: string;
+  components?: {
+    AddGoogleSlidesModal?: React.FC<AddGoogleSlidesModalProps>;
+  };
 };
 
 export const TextEditorContextProvider = ({
@@ -43,6 +50,7 @@ export const TextEditorContextProvider = ({
   onFileUpload,
   onFileValidation,
   inputAcceptedFormats = '*',
+  components,
 }: TextEditorContextProviderProps) => {
   const { getBase64 } = useBase64File();
 
@@ -55,6 +63,7 @@ export const TextEditorContextProvider = ({
       placeholder,
       onFileValidation,
       inputAcceptedFormats,
+      components,
     }),
     [
       mode,
@@ -65,6 +74,7 @@ export const TextEditorContextProvider = ({
       stickyOnMenu,
       onFileValidation,
       inputAcceptedFormats,
+      components,
     ]
   );
 
diff --git a/src/lib/components/TextEditorContext/useTextEditoContext.tsx b/src/lib/components/TextEditorContext/useTextEditorContext.tsx
similarity index 100%
rename from src/lib/components/TextEditorContext/useTextEditoContext.tsx
rename to src/lib/components/TextEditorContext/useTextEditorContext.tsx
diff --git a/src/lib/packages/EditorContext/hooks/useCommonmarkPlugin/useGoogleSlidesPlugin.tsx b/src/lib/packages/EditorContext/hooks/useCommonmarkPlugin/useGoogleSlidesPlugin.tsx
index 78fd9879..f6726924 100644
--- a/src/lib/packages/EditorContext/hooks/useCommonmarkPlugin/useGoogleSlidesPlugin.tsx
+++ b/src/lib/packages/EditorContext/hooks/useCommonmarkPlugin/useGoogleSlidesPlugin.tsx
@@ -7,7 +7,7 @@ import { useWidgetViewFactory } from '@prosemirror-adapter/react';
 import { useCallback, useMemo } from 'react';
 
 import { GoogleSlidesWidget } from '../../../../components/GoogleSlidesWidget/GoogleSlidesWidget';
-import { useTextEditorContext } from '../../../../components/TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../../../components/TextEditorContext/useTextEditorContext';
 import { useLinkDocAttributes } from '../../../../hooks/useLinkDocAttributes';
 
 export const useGoogleSlidesPlugin = () => {
diff --git a/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx b/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx
index 51f26bc5..24cae073 100644
--- a/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx
+++ b/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx
@@ -2,7 +2,7 @@ import { EditorStatus, editorViewOptionsCtx } from '@milkdown/core';
 import { Ctx } from '@milkdown/ctx';
 import { useEffect } from 'react';
 
-import { useTextEditorContext } from '../../../components/TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../../components/TextEditorContext/useTextEditorContext';
 import { useMilkdownInstance } from '../../../hooks/useMilkdownInstance';
 
 export const useEditorViewPlugin = () => {
diff --git a/src/lib/packages/EditorContext/hooks/usePlaceholderPlugin.tsx b/src/lib/packages/EditorContext/hooks/usePlaceholderPlugin.tsx
index f1493bef..41b91e64 100644
--- a/src/lib/packages/EditorContext/hooks/usePlaceholderPlugin.tsx
+++ b/src/lib/packages/EditorContext/hooks/usePlaceholderPlugin.tsx
@@ -3,7 +3,7 @@ import type { EditorView } from '@milkdown/prose/view';
 import { $prose } from '@milkdown/utils';
 import { useMemo } from 'react';
 
-import { useTextEditorContext } from '../../../components/TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../../components/TextEditorContext/useTextEditorContext';
 
 const shouldRenderPlaceholder = (view: EditorView) => {
   const {
diff --git a/src/lib/packages/EditorContext/hooks/useUploadPlugin/useUploader.tsx b/src/lib/packages/EditorContext/hooks/useUploadPlugin/useUploader.tsx
index 79b6916a..0c9e6b05 100644
--- a/src/lib/packages/EditorContext/hooks/useUploadPlugin/useUploader.tsx
+++ b/src/lib/packages/EditorContext/hooks/useUploadPlugin/useUploader.tsx
@@ -1,7 +1,7 @@
 import { Schema, Node } from '@milkdown/prose/model';
 import { useCallback } from 'react';
 
-import { useTextEditorContext } from '../../../../components/TextEditorContext/useTextEditoContext';
+import { useTextEditorContext } from '../../../../components/TextEditorContext/useTextEditorContext';
 import { useNotification } from '../../../../hooks/useNotification';
 
 export const useUploader = () => {
diff --git a/src/lib/packages/TextEditor.tsx b/src/lib/packages/TextEditor.tsx
index 6dccd52e..8a318a4f 100644
--- a/src/lib/packages/TextEditor.tsx
+++ b/src/lib/packages/TextEditor.tsx
@@ -42,6 +42,7 @@ export const TextEditor: React.FC<TextEditorProps> = ({
   onEditorFocus,
   onFileValidation,
   inputAcceptedFormats,
+  components,
   ...rest
 }) => (
   <ThemeProvider {...{ theme }}>
@@ -54,6 +55,7 @@ export const TextEditor: React.FC<TextEditorProps> = ({
         stickyOnMenu,
         onFileValidation,
         inputAcceptedFormats,
+        components,
       }}
     >
       <MilkdownProvider>