feat(shared): replace MarkdownInput with RichTextInput (#5457)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Chris Bongers <rebelchris@users.noreply.github.com>

Author: 3 people

packages/shared/package.json

@@ -119,6 +119,7 @@
     "@tippyjs/react": "^4.2.6",
     "@tiptap/core": "^3.15.0",
     "@tiptap/extension-character-count": "^3.14.0",
+    "@tiptap/extension-image": "^3.14.0",
     "@tiptap/extension-link": "^3.14.0",
     "@tiptap/extension-placeholder": "^3.14.0",
     "@tiptap/react": "^3.14.0",

packages/shared/src/components/cards/poll/PollOptions.tsx

@@ -38,7 +38,7 @@ const PollResults = ({
   );
 
   useEffect(() => {
-    let timer: NodeJS.Timeout;
+    let timer: ReturnType<typeof setTimeout>;
 
     if (shouldAnimate) {
       timer = setTimeout(() => {

packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx

@@ -8,7 +8,8 @@ import type {
 import React, { forwardRef, useRef } from 'react';
 import classNames from 'classnames';
 import { defaultMarkdownCommands } from '../../../hooks/input';
-import MarkdownInput from './index';
+import type { RichTextInputRef } from '../RichTextInput';
+import RichTextInput from '../RichTextInput';
 import type { Comment } from '../../../graphql/comments';
 import { formToJson } from '../../../lib/form';
 import type { Post } from '../../../graphql/posts';
@@ -64,7 +65,7 @@ export function CommentMarkdownInputComponent(
   const {
     mutateComment: { mutateComment, isLoading, isSuccess },
   } = useWriteCommentContext();
-  const markdownRef = useRef<{ clearDraft: () => void }>(null);
+  const richTextRef = useRef<RichTextInputRef>(null);
 
   const onSubmitForm: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -78,8 +79,8 @@ export function CommentMarkdownInputComponent(
     const result = await mutateComment(content);
 
     // Clear draft after successful submission
-    if (result && markdownRef.current) {
-      markdownRef.current.clearDraft();
+    if (result && richTextRef.current) {
+      richTextRef.current.clearDraft();
     }
 
     return result;
@@ -95,8 +96,8 @@ export function CommentMarkdownInputComponent(
     const result = await mutateComment(content);
 
     // Clear draft after successful submission
-    if (result && markdownRef.current) {
-      markdownRef.current.clearDraft();
+    if (result && richTextRef.current) {
+      richTextRef.current.clearDraft();
     }
 
     return result;
@@ -111,21 +112,20 @@ export function CommentMarkdownInputComponent(
       style={style}
       ref={ref}
     >
-      <MarkdownInput
-        ref={(markdownRefInstance) => {
-          if (markdownRefInstance) {
-            markdownRef.current = markdownRefInstance;
+      <RichTextInput
+        ref={(richTextRefInstance) => {
+          if (richTextRefInstance) {
+            richTextRef.current = richTextRefInstance;
             if (shouldFocus.current) {
-              markdownRefInstance.textareaRef.current.focus();
+              richTextRefInstance.focus();
               shouldFocus.current = false;
             }
           }
         }}
         className={{
-          tab: classNames('!min-h-16', className?.tab),
+          container: classNames('!min-h-16', className?.markdownContainer),
           input: classNames(className?.input, replyTo && 'mt-0'),
           profile: replyTo && '!mt-0',
-          container: className?.markdownContainer,
         }}
         postId={postId}
         sourceId={sourceId}

packages/shared/src/components/fields/RichTextEditor/LinkModal.tsx

@@ -33,11 +33,12 @@ export const LinkModal = ({
   const handleSubmit = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
+      e.stopPropagation();
+
       if (!url.trim()) {
         return;
       }
 
-      // Add https:// if no protocol specified
       let finalUrl = url.trim();
       if (!/^https?:\/\//i.test(finalUrl)) {
         finalUrl = `https://${finalUrl}`;

packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx

@@ -1,10 +1,11 @@
-import type { ReactElement, Ref } from 'react';
+import type { ReactElement, ReactNode, Ref } from 'react';
 import React, {
   useState,
   useCallback,
   forwardRef,
   useImperativeHandle,
 } from 'react';
+import { useEditorState } from '@tiptap/react';
 import type { Editor } from '@tiptap/react';
 import { getMarkRange } from '@tiptap/core';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
@@ -23,6 +24,8 @@ import { LinkModal } from './LinkModal';
 export interface RichTextToolbarProps {
   editor: Editor;
   onLinkAdd: (url: string, label?: string) => void;
+  inlineActions?: ReactNode;
+  rightActions?: ReactNode;
 }
 
 export interface RichTextToolbarRef {
@@ -63,7 +66,7 @@ const ToolbarButton = ({
 };
 
 function RichTextToolbarComponent(
-  { editor, onLinkAdd }: RichTextToolbarProps,
+  { editor, onLinkAdd, inlineActions, rightActions }: RichTextToolbarProps,
   ref: Ref<RichTextToolbarRef>,
 ): ReactElement {
   const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
@@ -117,58 +120,80 @@ function RichTextToolbarComponent(
     setIsLinkModalOpen(false);
   }, []);
 
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: currentEditor }) => ({
+      isBold: currentEditor.isActive('bold'),
+      isItalic: currentEditor.isActive('italic'),
+      isBulletList: currentEditor.isActive('bulletList'),
+      isOrderedList: currentEditor.isActive('orderedList'),
+      isLink: currentEditor.isActive('link'),
+      canUndo: currentEditor.can().undo(),
+      canRedo: currentEditor.can().redo(),
+    }),
+  });
+
   return (
     <>
       <div className="flex items-center gap-1 border-b border-border-subtlest-tertiary p-2">
         <ToolbarButton
           tooltip="Bold (⌘B)"
           icon={<BoldIcon />}
-          isActive={editor.isActive('bold')}
+          isActive={editorState.isBold}
           onClick={() => editor.chain().focus().toggleBold().run()}
         />
         <ToolbarButton
           tooltip="Italic (⌘I)"
           icon={<ItalicIcon />}
-          isActive={editor.isActive('italic')}
+          isActive={editorState.isItalic}
           onClick={() => editor.chain().focus().toggleItalic().run()}
         />
         <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
         <ToolbarButton
           tooltip="Bullet list (⌘⇧8)"
           icon={<BulletListIcon />}
-          isActive={editor.isActive('bulletList')}
+          isActive={editorState.isBulletList}
           onClick={() => editor.chain().focus().toggleBulletList().run()}
         />
         <ToolbarButton
           tooltip="Numbered list (⌘⇧7)"
           icon={<NumberedListIcon />}
-          isActive={editor.isActive('orderedList')}
+          isActive={editorState.isOrderedList}
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
         />
         <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
         <ToolbarButton
-          tooltip={editor.isActive('link') ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
+          tooltip={editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
           icon={<LinkIcon />}
-          isActive={editor.isActive('link')}
+          isActive={editorState.isLink}
           onClick={openLinkModal}
         />
-        {(editor.can().undo() || editor.can().redo()) && (
+        {inlineActions && (
+          <>
+            <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
+            <div className="flex items-center gap-1">{inlineActions}</div>
+          </>
+        )}
+        {(editorState.canUndo || editorState.canRedo) && (
           <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
         )}
         <ToolbarButton
           tooltip="Undo (⌘Z)"
           icon={<UndoIcon />}
           isActive={false}
           onClick={() => editor.chain().focus().undo().run()}
-          disabled={!editor.can().undo()}
+          disabled={!editorState.canUndo}
         />
         <ToolbarButton
           tooltip="Redo (⌘⇧Z)"
           icon={<RedoIcon />}
           isActive={false}
           onClick={() => editor.chain().focus().redo().run()}
-          disabled={!editor.can().redo()}
+          disabled={!editorState.canRedo}
         />
+        {rightActions && (
+          <div className="ml-auto flex items-center gap-1">{rightActions}</div>
+        )}
       </div>
       <LinkModal
         isOpen={isLinkModalOpen}

packages/shared/src/components/fields/RichTextEditor/index.tsx

@@ -16,6 +16,7 @@ import CharacterCount from '@tiptap/extension-character-count';
 import classNames from 'classnames';
 import type { RichTextToolbarRef } from './RichTextToolbar';
 import { RichTextToolbar } from './RichTextToolbar';
+import { MarkdownInputRules } from './markdownInputRules';
 import styles from './richtext.module.css';
 
 export interface RichTextRef {
@@ -69,11 +70,8 @@ function RichTextEditorComponent(
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
-        heading: false,
-        codeBlock: false,
         blockquote: false,
         horizontalRule: false,
-        code: false,
       }),
       Link.configure({
         openOnClick: false,
@@ -88,6 +86,7 @@ function RichTextEditorComponent(
       CharacterCount.configure({
         limit: maxLength,
       }),
+      MarkdownInputRules,
       LinkShortcut,
     ],
     content: initialContent,

packages/shared/src/components/fields/RichTextEditor/markdownInputRules.ts

@@ -0,0 +1,57 @@
+import { Extension, markInputRule, nodeInputRule } from '@tiptap/core';
+
+const linkRegex = /\[([^\]]+)\]\((?:[^)]+)\)$/;
+const imageRegex = /!\[[^\]]*\]\((?:[^)]+)\)$/;
+
+const extractUrl = (value: string): string | null => {
+  const match = value.match(/\(([^)]+)\)\s*$/);
+  return match?.[1]?.trim() ?? null;
+};
+
+const extractAlt = (value: string): string =>
+  value.match(/^!\[([^\]]*)\]/)?.[1] ?? '';
+
+export const MarkdownInputRules = Extension.create({
+  name: 'markdownInputRules',
+  addInputRules() {
+    const rules = [];
+    const linkType = this.editor.schema.marks.link;
+    const imageType = this.editor.schema.nodes.image;
+
+    if (linkType) {
+      rules.push(
+        markInputRule({
+          find: linkRegex,
+          type: linkType,
+          getAttributes: (match) => {
+            const url = extractUrl(match[0]);
+            if (!url) {
+              return false;
+            }
+            return { href: url };
+          },
+        }),
+      );
+    }
+
+    if (imageType) {
+      rules.push(
+        nodeInputRule({
+          find: imageRegex,
+          type: imageType,
+          getAttributes: (match) => {
+            const url = extractUrl(match[0]);
+            return {
+              src: url ?? '',
+              alt: extractAlt(match[0]),
+            };
+          },
+        }),
+      );
+    }
+
+    return rules;
+  },
+});
+
+export default MarkdownInputRules;

packages/shared/src/components/fields/RichTextEditor/richtext.module.css

@@ -29,10 +29,50 @@
     @apply font-bold;
   }
 
+  & :where(h1) {
+    @apply my-3 text-text-primary typo-title1 font-bold;
+  }
+
+  & :where(h2) {
+    @apply my-3 text-text-primary typo-title2 font-bold;
+  }
+
+  & :where(h3) {
+    @apply my-3 text-text-primary typo-title3 font-bold;
+  }
+
+  & :where(h4) {
+    @apply my-3 text-text-primary typo-body font-bold;
+  }
+
+  & :where(h5) {
+    @apply my-2 text-text-primary typo-body font-bold;
+  }
+
+  & :where(h6) {
+    @apply my-2 text-text-primary typo-callout font-bold;
+  }
+
   & :where(em) {
     @apply italic;
   }
 
+  & :where(code) {
+    @apply rounded-6 bg-surface-float px-1 py-0.5 font-mono text-text-primary;
+  }
+
+  & :where(pre) {
+    @apply my-3 overflow-x-auto rounded-12 bg-surface-float p-3;
+  }
+
+  & :where(pre code) {
+    @apply bg-transparent p-0;
+  }
+
+  & :where(img) {
+    @apply max-w-full rounded-8;
+  }
+
   /* Placeholder styling */
   & :global(.is-editor-empty:first-child::before) {
     @apply text-text-quaternary pointer-events-none float-left h-0;