shortcode support for [quote]

app/Support/Shortcode/Shortcode.php

@@ -32,6 +32,7 @@ public function __construct()
             ->add('code', fn (ShortcodeInterface $s) => $this->renderCode($s))
             ->add('url', fn (ShortcodeInterface $s) => $this->renderUrlLink($s))
             ->add('link', fn (ShortcodeInterface $s) => $this->renderLink($s))
+            ->add('quote', fn (ShortcodeInterface $s) => $this->renderQuote($s))
             ->add('spoiler', fn (ShortcodeInterface $s) => $this->renderSpoiler($s))
             ->add('ach', fn (ShortcodeInterface $s) => $this->embedAchievement((int) ($s->getBbCode() ?: $s->getContent())))
             ->add('game', fn (ShortcodeInterface $s) => $this->embedGame((int) ($s->getBbCode() ?: $s->getContent())))
@@ -148,11 +149,11 @@ public static function stripAndClamp(
             '~\[ticket(=)?(\d+)]~i' => 'Ticket $2',
 
             // Fragments: opening tags without closing tags.
-            '~\[(b|i|u|s|img|code|url|link|spoiler|ach|game|ticket|user)\b[^\]]*?\]~i' => '',
-            '~\[(b|i|u|s|img|code|url|link|spoiler|ach|game|ticket|user)\b[^\]]*?$~i' => '...',
+            '~\[(b|i|u|s|img|code|url|link|quote|spoiler|ach|game|ticket|user)\b[^\]]*?\]~i' => '',
+            '~\[(b|i|u|s|img|code|url|link|quote|spoiler|ach|game|ticket|user)\b[^\]]*?$~i' => '...',
 
             // Fragments: closing tags without opening tags.
-            '~\[/?(b|i|u|s|img|code|url|link|spoiler|ach|game|ticket|user)\]~i' => '',
+            '~\[/?(b|i|u|s|img|code|url|link|quote|spoiler|ach|game|ticket|user)\]~i' => '',
         ];
 
         foreach ($stripPatterns as $stripPattern => $replacement) {
@@ -315,6 +316,11 @@ private function renderCode(ShortcodeInterface $shortcode): string
         return '<pre class="codetags">' . str_replace('<br>', '', $shortcode->getContent() ?? '') . '</pre>';
     }
 
+    private function renderQuote(ShortcodeInterface $shortcode): string
+    {
+        return '<p class="quotedtext">' . $shortcode->getContent() . '</p>';
+    }
+
     private function renderSpoiler(ShortcodeInterface $shortcode): string
     {
         $content = $shortcode->getContent() ?? '';

lang/en_US.json

@@ -599,6 +599,7 @@
     "Underline": "Underline",
     "Strikethrough": "Strikethrough",
     "Code": "Code",
+    "Quote": "Quote",
     "Spoiler": "Spoiler",
     "Image": "Image",
     "Link": "Link",

resources/css/devbox.css

@@ -24,6 +24,15 @@
   box-sizing: border-box;
 }
 
+.quotedtext {
+  border-left: 3px solid var(--text-color-muted);
+  padding: 4px 6px 5px 8px;
+  margin: 3px 0px;
+  background: var(--box-bg-color);
+  width: 100%;
+  display: inline-block;
+}
+
 .devbox > .spoiler {
   display: none;
   border-style: dashed;

resources/js/features/forums/components/ShortcodeRenderer/ShortcodeQuote/ShortcodeQuote.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@/test';
+
+import { ShortcodeQuote } from './ShortcodeQuote';
+
+describe('Component: ShortcodeQuote', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render(<ShortcodeQuote>Test content</ShortcodeQuote>);
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('given a simple string child, renders it inside a span with the quotedtext class', () => {
+    // ARRANGE
+    render(<ShortcodeQuote>test content</ShortcodeQuote>);
+
+    // ASSERT
+    const spanEl = screen.getByText(/test content/i);
+
+    expect(spanEl).toBeVisible();
+    expect(spanEl).toHaveClass('quotedtext');
+  });
+});

resources/js/features/forums/components/ShortcodeRenderer/ShortcodeQuote/ShortcodeQuote.tsx

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from 'react';
+
+interface ShortcodeQuoteProps {
+  children: ReactNode;
+}
+
+export const ShortcodeQuote: FC<ShortcodeQuoteProps> = ({ children }) => {
+  return <span className="quotedtext">{children}</span>;
+};

resources/js/features/forums/components/ShortcodeRenderer/ShortcodeQuote/index.ts

@@ -0,0 +1 @@
+export * from './ShortcodeQuote';

resources/js/features/forums/components/ShortcodeRenderer/ShortcodeRenderer.test.tsx

@@ -58,6 +58,20 @@ describe('Component: ShortcodeRenderer', () => {
     expect(textEl).toHaveClass('codetags');
   });
 
+  it('given a body with a quote tag, renders the quote shortcode component', () => {
+    // ARRANGE
+    const body = '[quote]this is some stuff inside quote tags[/quote]';
+
+    render(<ShortcodeRenderer body={body} />);
+
+    // ASSERT
+    const textEl = screen.getByText(/this is some stuff/i);
+
+    expect(textEl).toBeVisible();
+    expect(textEl.nodeName).toEqual('SPAN');
+    expect(textEl).toHaveClass('quotedtext');
+  });
+
   it('given a body with a spoiler tag, renders the spoiler shortcode component', () => {
     // ARRANGE
     const body = '[spoiler]this is a spoiler![/spoiler]';

resources/js/features/forums/components/ShortcodeRenderer/ShortcodeRenderer.tsx

@@ -9,6 +9,7 @@ import { ShortcodeAch } from './ShortcodeAch';
 import { ShortcodeCode } from './ShortcodeCode';
 import { ShortcodeGame } from './ShortcodeGame';
 import { ShortcodeImg } from './ShortcodeImg';
+import { ShortcodeQuote } from './ShortcodeQuote';
 import { ShortcodeSpoiler } from './ShortcodeSpoiler';
 import { ShortcodeTicket } from './ShortcodeTicket';
 import { ShortcodeUrl } from './ShortcodeUrl';
@@ -41,6 +42,11 @@ const retroachievementsPreset = presetReact.extend((tags) => ({
     tag: ShortcodeCode,
   }),
 
+  quote: (node) => ({
+    ...node,
+    tag: ShortcodeQuote,
+  }),
+
   spoiler: (node) => ({
     ...node,
     tag: ShortcodeSpoiler,
@@ -111,6 +117,7 @@ export const ShortcodeRenderer: FC<ShortcodeRendererProps> = ({ body }) => {
           'u',
           's',
           'code',
+          'quote',
           'spoiler',
           'img',
           'url',

resources/js/features/forums/hooks/useShortcodesList.ts

@@ -8,6 +8,7 @@ import {
   LuEyeOff,
   LuItalic,
   LuLink,
+  LuQuote,
   LuStrikethrough,
   LuUnderline,
 } from 'react-icons/lu';
@@ -23,6 +24,7 @@ export function useShortcodesList() {
     { icon: LuUnderline, t_label: t('Underline'), start: '[u]', end: '[/u]' },
     { icon: LuStrikethrough, t_label: t('Strikethrough'), start: '[s]', end: '[/s]' },
     { icon: LuCode2, t_label: t('Code'), start: '[code]', end: '[/code]' },
+    { icon: LuQuote, t_label: t('Quote'), start: '[quote]', end: '[/quote]' },
     { icon: LuEyeOff, t_label: t('Spoiler'), start: '[spoiler]', end: '[/spoiler]' },
     { icon: BsImageFill, t_label: t('Image'), start: '[img=', end: ']' },
     { icon: LuLink, t_label: t('Link'), start: '[url=', end: ']' },

resources/views/components/base/form/textarea-rich-text-controls.blade.php

@@ -30,9 +30,13 @@
             {{-- x-tooltip="tooltip" --}} title="{{ __('Code') }}">
         <x-fas-code />
     </button>
-     <button type="button" class="btn" onclick="injectShortcode('{{ $id }}', '[spoiler]', '[/spoiler]')"
+    <button type="button" class="btn" onclick="injectShortcode('{{ $id }}', '[quote]', '[/quote]')"
+            {{-- x-tooltip="tooltip" --}} title="{{ __('Quote') }}">
+        <x-fas-quote-right />
+    </button>
+    <button type="button" class="btn" onclick="injectShortcode('{{ $id }}', '[spoiler]', '[/spoiler]')"
             {{-- x-tooltip="tooltip" --}} title="{{ __('Spoiler') }}">
-        Spoiler
+        <x-fas-eye-slash />
     </button>
     <button type="button" class="btn" onclick="injectShortcode('{{ $id }}', '[img=', ']')"
             {{-- x-tooltip="tooltip" --}} title="{{ __('Image') }}">

tests/Feature/Community/ShortcodeTest.php

@@ -104,6 +104,11 @@ public function testStripAndClampFormatters(): void
             Shortcode::stripAndClamp('[code]Hello[/code]')
         );
 
+        $this->assertSame(
+            'Hello',
+            Shortcode::stripAndClamp('[quote]Hello[/quote]')
+        );
+
         $this->assertSame(
             'Hello',
             Shortcode::stripAndClamp('[url=abc.xyz]Hello[/url]')