diff --git a/client/components/document/document.module.css b/client/components/document/document.module.css index 273c29c..4ab0dab 100644 --- a/client/components/document/document.module.css +++ b/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; diff --git a/client/components/formatting-icons/index.tsx b/client/components/formatting-icons/index.tsx index 67e2f9b..01a2f31 100644 --- a/client/components/formatting-icons/index.tsx +++ b/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 = `` + } else { + formattedText = `` + } + 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> diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index 617e4ce..29285a5 100644 --- a/client/components/header/index.tsx +++ b/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" diff --git a/client/components/preview/index.tsx b/client/components/preview/index.tsx index d6b5fac..f07887f 100644 --- a/client/components/preview/index.tsx +++ b/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>)