Merge branch 'refactor-051-named-export'

Closes #51

src/App.tsx

@@ -1,24 +1,24 @@
 import { Box, CssBaseline } from '@mui/material'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { onAuthStateChanged } from 'firebase/auth'
-import { ReactElement, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
-import Body from './components/Body/Body'
-import Footer from './components/Footer/Footer'
-import Version from './components/Footer/Version'
+import { Body } from './components/Body/Body'
+import { Footer } from './components/Footer/Footer'
+import { Version } from './components/Footer/Version'
 import { Header } from './components/Header/Header'
 import { EditorDB } from './components/IndexedDB/initDB'
 import {
     removeCodeBlockWrapper,
     removeImageWrapper,
 } from './converterFunctions/helpers/preProcessHtml'
 import { removeTipTapArtifacts } from './converterFunctions/helpers/removeTipTapArtifacts'
-import toMarkdown from './converterFunctions/toMarkdown'
+import { toMarkdown } from './converterFunctions/toMarkdown'
 import { setUser } from './store/authSlice'
 import { useAppDispatch, useAppSelector } from './store/hooks'
 import { setMdText } from './store/mdTextSlice'
 
-export default function App(): ReactElement {
+export const App = () => {
     const db = new EditorDB()
     const dispatch = useAppDispatch()
     const editor = useAppSelector((state) => state.editor.editor)

src/authentication/config/firebaseConfig.ts

@@ -3,7 +3,7 @@
 
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-const firebaseConfig = {
+export const firebaseConfig = {
     apiKey: 'AIzaSyAwi_mPjPXntytmeCHjfzJPadS27WI-GHM',
     authDomain: 'markgh-73e89.firebaseapp.com',
     projectId: 'markgh-73e89',
@@ -12,7 +12,3 @@ const firebaseConfig = {
     appId: '1:34638459587:web:7d534cb140d88d5f222876',
     measurementId: 'G-WS86ER8VN8',
 }
-
-// Initialize Firebase
-
-export default firebaseConfig

src/components/Body/Body.tsx

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material'
 import { useAppSelector } from '../../store/hooks'
-import EditorToolbar from '../Editor/EditorToolbar'
-import TextEditor from '../Editor/TextEditor'
-import MarkdownTextContainer from './MarkdownTextContainer'
+import { EditorToolbar } from '../Editor/EditorToolbar'
+import { TextEditor } from '../Editor/TextEditor'
+import { MarkdownTextContainer } from './MarkdownTextContainer'
 
 interface Props {
     showMarkdown: boolean
     onTextChange: (editorContainer: Element) => void | null
 }
 
-const Body = ({ showMarkdown, onTextChange }: Props) => {
+export const Body = ({ showMarkdown, onTextChange }: Props) => {
     const editorWidth = showMarkdown ? '50%' : '100%'
     const editor = useAppSelector((state) => state.editor.editor)
 
@@ -37,5 +37,3 @@ const Body = ({ showMarkdown, onTextChange }: Props) => {
         </>
     )
 }
-
-export default Body

src/components/Body/CopyClipboardButton.tsx

@@ -5,7 +5,7 @@ interface Props {
     onClick: React.MouseEventHandler<HTMLButtonElement>
 }
 
-const CopyClipboardButton = ({ onClick }: Props) => {
+export const CopyClipboardButton = ({ onClick }: Props) => {
     return (
         <div
             style={{
@@ -27,5 +27,3 @@ const CopyClipboardButton = ({ onClick }: Props) => {
         </div>
     )
 }
-
-export default CopyClipboardButton

src/components/Body/MarkdownTextContainer.tsx

@@ -1,9 +1,9 @@
 import { Box, Button } from '@mui/material'
 import { useState } from 'react'
 import { useAppSelector } from '../../store/hooks'
-import CopyClipboardButton from './CopyClipboardButton'
+import { CopyClipboardButton } from './CopyClipboardButton'
 
-const MarkdownTextContainer = () => {
+export const MarkdownTextContainer = () => {
     const theme = useAppSelector((state) => state.theme)
     const markdownText = useAppSelector((state) => state.mdText)
     const [isHovering, setIsHovering] = useState(false)
@@ -68,5 +68,3 @@ const MarkdownTextContainer = () => {
         </Box>
     )
 }
-
-export default MarkdownTextContainer

src/components/Editor/AlignDropDown.tsx

@@ -13,7 +13,7 @@ interface Props {
     editor: Editor | null
 }
 
-export default ({ editor }: Props) => {
+export const AlignDropDown = ({ editor }: Props) => {
     const onChange = (alignment: Alignment) => {
         textAlign(editor)(alignment)
         closeMenu()

src/components/Editor/EditorToolbar.tsx

@@ -17,8 +17,8 @@ import { Box, IconButton, styled, SvgIconTypeMap } from '@mui/material'
 import { OverridableComponent } from '@mui/material/OverridableComponent'
 import { Editor } from '@tiptap/react'
 import React from 'react'
-import AlignDropDown from './AlignDropDown'
-import HeadingDropDown from './HeadingDropDown'
+import { AlignDropDown } from './AlignDropDown'
+import { HeadingDropDown } from './HeadingDropDown'
 import {
     addUrlImage,
     blockQuote,
@@ -95,4 +95,6 @@ const EditorToolbar = ({ editor }: Props) => {
     )
 }
 
-export default React.memo(EditorToolbar)
+const MemorisedEditorToolbar = React.memo(EditorToolbar)
+
+export { MemorisedEditorToolbar as EditorToolbar }

src/components/Editor/HeadingDropDown.tsx

@@ -11,7 +11,7 @@ interface Props {
     editor: Editor | null
 }
 
-const HeadingDropDown = ({ editor }: Props) => {
+export const HeadingDropDown = ({ editor }: Props) => {
     const [anchor, setAnchor] = useState<Element | null>(null)
     const [headingLevel, setHeadingLevel] = useState<HeadingLevels | null>(null)
     const theme = useAppSelector((state) => state.theme)
@@ -96,5 +96,3 @@ const HeadingDropDown = ({ editor }: Props) => {
         </Box>
     )
 }
-
-export default HeadingDropDown

src/components/Editor/TextEditor.tsx

@@ -13,7 +13,7 @@ interface Props {
     onTextChange: (editorContainer: Element) => void | null
 }
 
-export default ({ onTextChange }: Props) => {
+export const TextEditor = ({ onTextChange }: Props) => {
     const [editorContainer, setEditorContainer] = useState<Element | null>(null)
     const editor = useAppSelector((state) => state.editor.editor)
     const theme = useAppSelector((state) => state.theme)

src/components/Editor/extensions/CodeNoExcludes.ts

@@ -1,4 +1,4 @@
 import Code from '@tiptap/extension-code'
 
 // Based on https://github.com/ueberdosis/tiptap/issues/2563#issuecomment-1078852349
-export default Code.extend({ excludes: '' })
+export const CodeNoExcludes = Code.extend({ excludes: '' })

src/components/Editor/extensions/ListItemNoTabNav.ts

@@ -1,7 +1,7 @@
 import ListItem from '@tiptap/extension-list-item'
 
 // Prevent navigation to other elements when pressing Tab.
-export default ListItem.extend({
+export const ListItemNoTabNav = ListItem.extend({
     addKeyboardShortcuts() {
         return {
             ...this.parent?.(),

src/components/Editor/extensions/SizedImage.ts

@@ -1,9 +1,9 @@
 import Image from '@tiptap/extension-image'
 import { ReactNodeViewRenderer } from '@tiptap/react'
-import ImageResizeComponent from './components/ImageResizeComponent'
+import { ImageResizeComponent } from './components/ImageResizeComponent'
 
 // Based on https://github.com/ueberdosis/tiptap/issues/1365#issuecomment-853799239
-export default Image.extend({
+export const SizedImage = Image.extend({
     addAttributes() {
         return {
             ...this.parent?.(),

src/components/Editor/extensions/SyntaxHighlightCodeBlock.ts

@@ -1,9 +1,9 @@
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { ReactNodeViewRenderer } from '@tiptap/react'
 import { lowlight } from 'lowlight/lib/all'
-import CodeBlockComponent from './components/CodeBlockComponent'
+import { CodeBlockComponent } from './components/CodeBlockComponent'
 
-export default CodeBlockLowlight.extend({
+export const SyntaxHighlightCodeBlock = CodeBlockLowlight.extend({
     addNodeView() {
         return ReactNodeViewRenderer(CodeBlockComponent)
     },

src/components/Editor/extensions/TextAlignAttr.ts

@@ -1,7 +1,7 @@
 import TextAlign from '@tiptap/extension-text-align'
 
 // Replaces inline 'text-align' styles with 'align' attribute
-export default TextAlign.extend({
+export const TextAlignAttr = TextAlign.extend({
     addGlobalAttributes() {
         return [
             {

src/components/Editor/extensions/components/CodeBlockComponent.tsx

@@ -43,7 +43,7 @@ const SyntaxLanguageTextField = styled(TextField)({
     width: '100px',
 })
 
-export default ({ node, updateAttributes, extension }: Props) => {
+export const CodeBlockComponent = ({ node, updateAttributes, extension }: Props) => {
     const language = node.attrs.language
     const lowlight = extension.options.lowlight
     const theme = useAppSelector((state) => state.theme)

src/components/Editor/extensions/components/DetectOutsideClick.tsx

@@ -25,7 +25,7 @@ interface Props {
 
 // Detects clicks outside of child node
 // Based on https://stackoverflow.com/a/42234988
-export default ({ onOutsideClick, children }: Props) => {
+export const DetectOutsideClick = ({ onOutsideClick, children }: Props) => {
     const wrapperRef = useRef(null)
     useOutsideDetector(wrapperRef, onOutsideClick)
 

src/components/Editor/extensions/components/ImageResizeComponent.tsx

@@ -5,7 +5,7 @@ import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '@tiptap/react'
 import { useState } from 'react'
 import { ResizableBox } from 'react-resizable'
 import 'react-resizable/css/styles.css'
-import DetectOutsideClick from './DetectOutsideClick'
+import { DetectOutsideClick } from './DetectOutsideClick'
 
 interface Props extends NodeViewProps {
     node: NodeViewProps['node'] & {
@@ -79,7 +79,7 @@ const StyledResizableBox = styled(ResizableBox)({
     },
 })
 
-export default ({ node, updateAttributes, extension }: Props) => {
+export const ImageResizeComponent = ({ node, updateAttributes, extension }: Props) => {
     const [startingWidth, setStartingWidth] = useState(-1)
     const [startingHeight, setStartingHeight] = useState(-1)
     const [isResizing, setIsResizing] = useState(false)

src/components/Editor/extensions/extensions.ts

@@ -5,14 +5,14 @@ import Subscript from '@tiptap/extension-subscript'
 import Superscript from '@tiptap/extension-superscript'
 import Underline from '@tiptap/extension-underline'
 import StarterKit from '@tiptap/starter-kit'
-import CodeNoExcludes from './CodeNoExcludes'
-import ListItemNoTabNav from './ListItemNoTabNav'
-import SizedImage from './SizedImage'
-import SyntaxHighlightCodeBlock from './SyntaxHighlightCodeBlock'
+import { CodeNoExcludes } from './CodeNoExcludes'
+import { ListItemNoTabNav } from './ListItemNoTabNav'
+import { SizedImage } from './SizedImage'
+import { SyntaxHighlightCodeBlock } from './SyntaxHighlightCodeBlock'
 import { TabKey } from './TabKey'
-import TextAlignAttr from './TextAlignAttr'
+import { TextAlignAttr } from './TextAlignAttr'
 
-export default [
+export const extensions = [
     StarterKit.configure({
         code: false,
         bulletList: false,

src/components/Editor/toolbarFunctions/addUrlImage.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const addUrlImage = (editor: Editor | null) => () => {
     if (!editor) return
 
     const url = window.prompt('URL')

src/components/Editor/toolbarFunctions/blockQuote.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const blockQuote = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleBlockquote().run()

src/components/Editor/toolbarFunctions/bold.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const bold = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleBold().run()

src/components/Editor/toolbarFunctions/code.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const code = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleCode().run()

src/components/Editor/toolbarFunctions/codeBlock.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const codeBlock = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleCodeBlock().run()

src/components/Editor/toolbarFunctions/heading.ts

@@ -2,7 +2,7 @@ import { Editor } from '@tiptap/react'
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
 
-export default (editor: Editor | null) => (level: 0 | HeadingLevel) => {
+export const heading = (editor: Editor | null) => (level: 0 | HeadingLevel) => {
     if (!editor) return
 
     if (level === 0) {

src/components/Editor/toolbarFunctions/index.ts

@@ -1,18 +1,18 @@
-import addUrlImage from './addUrlImage'
-import blockQuote from './blockQuote'
-import bold from './bold'
-import code from './code'
-import codeBlock from './codeBlock'
-import heading from './heading'
-import italic from './italic'
-import link from './link'
-import orderedList from './orderedList'
-import strikethrough from './strikethrough'
-import subscript from './subscript'
-import superscript from './superscript'
-import textAlign from './textAlign'
-import underline from './underline'
-import unorderedList from './unorderedList'
+import { addUrlImage } from './addUrlImage'
+import { blockQuote } from './blockQuote'
+import { bold } from './bold'
+import { code } from './code'
+import { codeBlock } from './codeBlock'
+import { heading } from './heading'
+import { italic } from './italic'
+import { link } from './link'
+import { orderedList } from './orderedList'
+import { strikethrough } from './strikethrough'
+import { subscript } from './subscript'
+import { superscript } from './superscript'
+import { textAlign } from './textAlign'
+import { underline } from './underline'
+import { unorderedList } from './unorderedList'
 
 export {
     addUrlImage,

src/components/Editor/toolbarFunctions/italic.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const italic = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleItalic().run()

src/components/Editor/toolbarFunctions/link.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const link = (editor: Editor | null) => () => {
     if (!editor) return
 
     const hasLink = editor.getAttributes('link').href !== undefined

src/components/Editor/toolbarFunctions/orderedList.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const orderedList = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleOrderedList().run()

src/components/Editor/toolbarFunctions/strikethrough.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const strikethrough = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleStrike().run()

src/components/Editor/toolbarFunctions/subscript.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const subscript = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleSubscript().run()

src/components/Editor/toolbarFunctions/superscript.ts

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/react'
 
-export default (editor: Editor | null) => () => {
+export const superscript = (editor: Editor | null) => () => {
     if (!editor) return
 
     editor.chain().focus().toggleSuperscript().run()