Better header loading

client/components/document/document.module.css

@@ -3,8 +3,6 @@
 }
 
 .descriptionContainer {
-  padding: var(--gap);
-  padding-top: 0;
   display: flex;
   flex-direction: column;
   min-height: 400px;

client/components/formatting-icons/index.tsx

@@ -1,5 +1,5 @@
 import { ButtonGroup, Button } from "@geist-ui/core"
-import { Bold, Italic, Underline, Link } from '@geist-ui/icons'
+import { Bold, Italic, Underline, Link, Image as ImageIcon } from '@geist-ui/icons'
 import { RefObject, useCallback, useMemo } from "react"
 
 // TODO: clean up
@@ -72,6 +72,27 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
+    const handleImageClick = useCallback((e) => {
+        if (textareaRef?.current && setText) {
+            const selectionStart = textareaRef.current.selectionStart
+            const selectionEnd = textareaRef.current.selectionEnd
+            const text = textareaRef.current.value
+            const before = text.substring(0, selectionStart)
+            const after = text.substring(selectionEnd)
+            const selectedText = text.substring(selectionStart, selectionEnd)
+            let formattedText = '';
+            if (selectedText.includes('http')) {
+                formattedText = `![](${selectedText})`
+            } else {
+                formattedText = `![${selectedText}](https://)`
+            }
+            const newText = `${before}${formattedText}${after}`
+            setText(newText)
+            textareaRef.current.focus()
+            textareaRef.current.setSelectionRange(before.length + 1, before.length + 1 + selectedText.length)
+        }
+    }, [setText, textareaRef])
+
     const formattingActions = useMemo(() => [
         {
             icon: <Bold />,
@@ -92,8 +113,13 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
             icon: <Link />,
             name: 'hyperlink',
             action: handleLinkClick
+        },
+        {
+            icon: <ImageIcon />,
+            name: 'image',
+            action: handleImageClick
         }
-    ], [handleBoldClick, handleItalicClick, handleLinkClick])
+    ], [handleBoldClick, handleImageClick, handleItalicClick, handleLinkClick])
 
     return (
         <div style={{ position: 'relative', zIndex: 1 }}>
@@ -102,7 +128,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
                 right: 0,
             }}>
                 {formattingActions.map(({ icon, name, action }) => (
-                    <Button aria-label={name} key={name} icon={icon} onMouseDown={(e) => e.preventDefault()} onClick={action} />
+                    <Button auto scale={2 / 3} px={0.6} aria-label={name} key={name} icon={icon} onMouseDown={(e) => e.preventDefault()} onClick={action} />
                 ))}
             </ButtonGroup>
         </div>

client/components/header/index.tsx

@@ -5,9 +5,6 @@ import { useEffect, useMemo, useState } from "react";
 import styles from './header.module.css';
 import { useRouter } from "next/router";
 import useSignedIn from "../../lib/hooks/use-signed-in";
-import Mobile from "./controls";
-import Controls from "./controls";
-import NextLink from 'next/link'
 
 const Header = ({ changeTheme, theme }: DriftProps) => {
     const router = useRouter();
@@ -90,12 +87,6 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
         })?.href)
     }, [pages, router, router.pathname])
 
-    if (isLoading) {
-        return <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"} >
-
-        </Page.Header>
-    }
-
     return (
         <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
             {!isMobile && <div className={styles.tabs}>
@@ -114,7 +105,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                             router.push(`${tab}`)
                         }
                     }}>
-                    {pages.map((tab, index) => {
+                    {!isLoading && pages.map((tab, index) => {
                         if (tab.condition)
                             return <Tabs.Item
                                 font="14px"

client/components/preview/index.tsx

@@ -1,11 +1,12 @@
 import { memo } from "react"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
+// @ts-ignore because of no types in remark-a11y-emoji
 import a11yEmoji from '@fec/remark-a11y-emoji';
 import styles from './preview.module.css'
 
 const MarkdownPreview = ({ content, height }: { content?: string, height?: number | string }) => {
-    {/* remarkGfm is github flavored markdown support */ }
+    {/* remarkGfm is github flavored markdown support, a11yEmoji wraps emojis in accessible spans for screen readers */ }
     return (<div style={{ height }}><ReactMarkdown className={styles.markdownPreview} remarkPlugins={[remarkGfm, a11yEmoji]} >
         {content || ""}
     </ReactMarkdown></div>)