add rich textarea formatting menu

xvvvyz · Aug 18, 2024 · d3a3f4b · d3a3f4b
1 parent fbd9b03
commit d3a3f4b
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 17 deletions.
diff --git a/app/_components/avatar-dropzone.tsx b/app/_components/avatar-dropzone.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import Avatar from '@/_components/avatar';
 import { useDropzone } from 'react-dropzone';
-import Avatar from './avatar';
 
 interface AvatarDropzoneProps {
   file?: File | string | null;

diff --git a/app/_components/event-card.tsx b/app/_components/event-card.tsx
@@ -1,11 +1,14 @@
 import DirtyHtml from '@/_components/dirty-html';
+import EventCommentForm from '@/_components/event-comment-form';
+import EventForm from '@/_components/event-form';
 import { GetEventData } from '@/_queries/get-event';
 import { GetEventTypeWithInputsAndOptionsData } from '@/_queries/get-event-type-with-inputs-and-options';
 import forceArray from '@/_utilities/force-array';
 import { User } from '@supabase/supabase-js';
-import EventCommentForm from './event-comment-form';
-import EventComments, { EventCommentsProps } from './event-comments';
-import EventForm from './event-form';
+
+import EventComments, {
+  EventCommentsProps,
+} from '@/_components/event-comments';
 
 interface EventCardProps {
   event?: NonNullable<GetEventData>;

diff --git a/app/_components/event-comments.tsx b/app/_components/event-comments.tsx
@@ -1,8 +1,8 @@
 'use client';
 
+import EventComment from '@/_components/event-comment';
 import { Database } from '@/_types/database';
 import { twMerge } from 'tailwind-merge';
-import EventComment from './event-comment';
 
 export interface EventCommentsProps {
   className?: string;

diff --git a/app/_components/event-form.tsx b/app/_components/event-form.tsx
@@ -2,6 +2,8 @@
 
 import Button from '@/_components/button';
 import Checkbox from '@/_components/checkbox';
+import EventSelect from '@/_components/event-select';
+import EventStopwatch from '@/_components/event-stopwatch';
 import Input from '@/_components/input';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import RichTextarea from '@/_components/rich-textarea';
@@ -23,8 +25,6 @@ import { useEffect, useRef, useTransition } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { PropsValue } from 'react-select';
 import { twMerge } from 'tailwind-merge';
-import EventSelect from './event-select';
-import EventStopwatch from './event-stopwatch';
 
 interface EventFormProps {
   className?: string;

diff --git a/app/_components/filterable-input-link-list.tsx b/app/_components/filterable-input-link-list.tsx
@@ -3,11 +3,11 @@
 import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
 import Input from '@/_components/input';
+import InputMenu from '@/_components/input-menu';
 import INPUT_LABELS from '@/_constants/constant-input-labels';
 import { ListInputsData } from '@/_queries/list-inputs';
 import { usePrevious } from '@uidotdev/usehooks';
 import Fuse from 'fuse.js';
-import InputMenu from './input-menu';
 
 import {
   ChangeEvent,

diff --git a/app/_components/module-card.tsx b/app/_components/module-card.tsx
@@ -1,13 +1,16 @@
 import Avatar from '@/_components/avatar';
 import CollapsibleSection from '@/_components/collapsible-section';
 import DirtyHtml from '@/_components/dirty-html';
+import EventCommentForm from '@/_components/event-comment-form';
+import EventForm from '@/_components/event-form';
 import { GetSessionWithDetailsData } from '@/_queries/get-session-with-details';
 import { GetTrainingPlanWithSessionsData } from '@/_queries/get-training-plan-with-sessions';
 import forceArray from '@/_utilities/force-array';
 import { User } from '@supabase/supabase-js';
-import EventCommentForm from './event-comment-form';
-import EventComments, { EventCommentsProps } from './event-comments';
-import EventForm from './event-form';
+
+import EventComments, {
+  EventCommentsProps,
+} from '@/_components/event-comments';
 
 interface ModuleCardProps {
   disabled?: boolean;

diff --git a/app/_components/rich-textarea.tsx b/app/_components/rich-textarea.tsx
@@ -1,6 +1,13 @@
 'use client';
 
+import DirtyHtml from '@/_components/dirty-html';
+import IconButton from '@/_components/icon-button';
 import Tip from '@/_components/tip';
+import BoldIcon from '@heroicons/react/24/outline/BoldIcon';
+import ItalicIcon from '@heroicons/react/24/outline/ItalicIcon';
+import ListBulletIcon from '@heroicons/react/24/outline/ListBulletIcon';
+import NumberedListIcon from '@heroicons/react/24/outline/NumberedListIcon';
+import UnderlineIcon from '@heroicons/react/24/outline/UnderlineIcon';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
 import Document from '@tiptap/extension-document';
@@ -18,7 +25,6 @@ import Youtube from '@tiptap/extension-youtube';
 import * as TipTap from '@tiptap/react';
 import * as React from 'react';
 import { twMerge } from 'tailwind-merge';
-import DirtyHtml from './dirty-html';
 
 const RichTextarea = (
   {
@@ -148,7 +154,60 @@ const RichTextarea = (
         )}
       </div>
       {editor ? (
-        <TipTap.EditorContent editor={editor} name={name} />
+        <>
+          <TipTap.BubbleMenu
+            className="overflow-hidden rounded border border-alpha-2 bg-bg-3 drop-shadow"
+            editor={editor}
+            tippyOptions={{ placement: 'bottom-start' }}
+          >
+            <IconButton
+              className={twMerge(
+                'm-0 hover:bg-alpha-1',
+                editor.isActive('bold') && 'bg-alpha-1 text-fg-2',
+              )}
+              icon={<BoldIcon className="w-5" />}
+              label="Bold"
+              onClick={() => editor.chain().focus().toggleBold().run()}
+            />
+            <IconButton
+              className={twMerge(
+                'm-0 hover:bg-alpha-1',
+                editor.isActive('italic') && 'bg-alpha-1 text-fg-2',
+              )}
+              icon={<ItalicIcon className="w-5" />}
+              label="Italic"
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+            />
+            <IconButton
+              className={twMerge(
+                'm-0 hover:bg-alpha-1',
+                editor.isActive('underline') && 'bg-alpha-1 text-fg-2',
+              )}
+              icon={<UnderlineIcon className="w-5" />}
+              label="Underline"
+              onClick={() => editor.chain().focus().toggleUnderline().run()}
+            />
+            <IconButton
+              className={twMerge(
+                'm-0 hover:bg-alpha-1',
+                editor.isActive('bulletList') && 'bg-alpha-1 text-fg-2',
+              )}
+              icon={<ListBulletIcon className="w-5" />}
+              label="Bullet list"
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
+            />
+            <IconButton
+              className={twMerge(
+                'm-0 hover:bg-alpha-1',
+                editor.isActive('orderedList') && 'bg-alpha-1 text-fg-2',
+              )}
+              icon={<NumberedListIcon className="w-5" />}
+              label="Ordered list"
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            />
+          </TipTap.BubbleMenu>
+          <TipTap.EditorContent editor={editor} name={name} />
+        </>
       ) : (
         <DirtyHtml
           className={twMerge(

diff --git a/app/_components/select.tsx b/app/_components/select.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Avatar from '@/_components/avatar';
 import Spinner from '@/_components/spinner';
 import Tip from '@/_components/tip';
 import forceArray from '@/_utilities/force-array';
@@ -9,7 +10,6 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { forwardRef, ReactNode, Ref } from 'react';
 import Creatable, { CreatableProps } from 'react-select/creatable';
 import { twMerge } from 'tailwind-merge';
-import Avatar from './avatar';
 
 import ReactSelect, {
   ClearIndicatorProps,

diff --git a/app/_components/timeline-events.tsx b/app/_components/timeline-events.tsx
@@ -2,14 +2,14 @@
 
 import Button from '@/_components/button';
 import DateTime from '@/_components/date-time';
+import TimelineEventCard from '@/_components/timeline-event-card';
 import TimelineSessionCard from '@/_components/timeline-session-card';
 import listEvents, { ListEventsData } from '@/_queries/list-events';
 import listPublicEvents from '@/_queries/list-public-events';
 import EventFilters from '@/_types/event-filters';
 import formatTimelineEvents from '@/_utilities/format-timeline-events';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
-import TimelineEventCard from './timeline-event-card';
 
 interface TimelineEventsProps {
   events: NonNullable<ListEventsData>;

diff --git a/app/_constants/constant-input-labels.ts b/app/_constants/constant-input-labels.ts
@@ -1,4 +1,4 @@
-import InputType from './enum-input-type';
+import InputType from '@/_constants/enum-input-type';
 
 const INPUT_LABELS = {
   [InputType.Checkbox]: 'Yes / no',

diff --git a/app/_utilities/format-title.ts b/app/_utilities/format-title.ts
@@ -1,4 +1,4 @@
-import forceArray from './force-array';
+import forceArray from '@/_utilities/force-array';
 
 const formatTitle = (parts: string | (string | null | undefined)[]) =>
   forceArray(parts)