feat: add rich text section in playground

Author: TeerapatChan

examples/ui-playground/src/app/playground/shadcn/page-sidebar.tsx

@@ -38,6 +38,7 @@ const navigationItems = [
   { href: '#toggle-group', label: 'Toggle Group' },
   { href: '#textarea', label: 'Textarea' },
   { href: '#toast', label: 'Toast' },
+  { href: '#rich-text-editor', label: 'Rich Text Editor' },
   { href: '/playground/shadcn/sidebar', label: 'Sidebar' },
 ]
 

examples/ui-playground/src/app/playground/shadcn/page.tsx

@@ -18,6 +18,7 @@ import { LinkSection } from './link-section'
 import PageSidebar from './page-sidebar'
 import { PaginationSection } from './pagination-section'
 import { ProgressSection } from './progress-section'
+import { RichTextSection } from './rich-text-section'
 import { SelectSection } from './select-section'
 import { SliderSection } from './slider-section'
 import { SwitchSection } from './switch-section'
@@ -128,6 +129,10 @@ export default function ComboboxPage() {
           Toast
         </Typography>
         <ToastSection />
+        <Typography type="h2" weight="bold" id="rich-text-editor">
+          Rich Text Editor
+        </Typography>
+        <RichTextSection />
       </div>
       <React.Suspense fallback={null}>
         <PageSidebar />

examples/ui-playground/src/app/playground/shadcn/rich-text-section.tsx

@@ -0,0 +1,12 @@
+import { RichTextEditor } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '../../../components/card'
+import { editorProviderProps } from '../../../components/slot-before'
+
+export const RichTextSection = () => {
+  return (
+    <PlaygroundCard title="Basic RichtextEditor" categoryTitle="Component">
+      <RichTextEditor editorProviderProps={editorProviderProps} />
+    </PlaygroundCard>
+  )
+}