From d3a3f4b4df64ef71cc5288560bcddd8b4af217ab Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Sun, 18 Aug 2024 17:52:56 -0600
Subject: [PATCH] add rich textarea formatting menu

---
 app/_components/avatar-dropzone.tsx           |  2 +-
 app/_components/event-card.tsx                |  9 ++-
 app/_components/event-comments.tsx            |  2 +-
 app/_components/event-form.tsx                |  4 +-
 .../filterable-input-link-list.tsx            |  2 +-
 app/_components/module-card.tsx               |  9 ++-
 app/_components/rich-textarea.tsx             | 63 ++++++++++++++++++-
 app/_components/select.tsx                    |  2 +-
 app/_components/timeline-events.tsx           |  2 +-
 app/_constants/constant-input-labels.ts       |  2 +-
 app/_utilities/format-title.ts                |  2 +-
 11 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/app/_components/avatar-dropzone.tsx b/app/_components/avatar-dropzone.tsx
index 6af61b35..4c34363f 100644
--- 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
index 0c5acc10..cd907903 100644
--- 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
index c7a3f1e2..98182185 100644
--- 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
index 0d3fc9c9..b50f96f2 100644
--- 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
index c9a34685..443c78bc 100644
--- 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
index 266efb0d..bf19403e 100644
--- 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
index f485e84a..08f3750f 100644
--- 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
index b64ba347..311ac53e 100644
--- 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
index ec36039f..790c07c5 100644
--- a/app/_components/timeline-events.tsx
+++ b/app/_components/timeline-events.tsx
@@ -2,6 +2,7 @@
 
 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';
@@ -9,7 +10,6 @@ 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
index 625d5323..fe542920 100644
--- 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
index 04299a3c..8e1c539c 100644
--- 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)