Release/0.2.4

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

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"
     ]
   }
-}
+}

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;

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();

src/lib/components/AddGoogleSlidesModal/AddGoogleSlidesModal.tsx

@@ -1,14 +1,61 @@
-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;
 
 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,
+      }}
+    />
+  );
+};

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;
+`;

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[] = [
   {

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();

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<{

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();

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',

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();

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',

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';

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,
     ]
   );