WIP

Author: christianhg

apps/playground/src/emoji-picker.tsx

@@ -3,15 +3,21 @@ import {
   useEmojiPicker,
   type EmojiMatch,
 } from '@portabletext/plugin-emoji-picker'
+import {usePopover} from '@portabletext/toolbar'
 import {useEffect, useRef} from 'react'
 import {Button} from './primitives/button'
+import {Popover} from './primitives/popover'
 
 export function EmojiPickerPlugin() {
   const {keyword, matches, selectedIndex, onDismiss, onNavigateTo, onSelect} =
     useEmojiPicker({matchEmojis})
 
+  if (keyword.length < 2) {
+    return null
+  }
+
   return (
-    <EmojiListBox
+    <EmojiPickerPopover
       keyword={keyword}
       matches={matches}
       selectedIndex={selectedIndex}
@@ -22,20 +28,55 @@ export function EmojiPickerPlugin() {
   )
 }
 
-export function EmojiListBox(props: {
+function EmojiPickerPopover(props: {
   keyword: string
   matches: Array<EmojiMatch>
   selectedIndex: number
   onDismiss: () => void
   onNavigateTo: (index: number) => void
   onSelect: () => void
 }) {
-  if (props.keyword.length < 2) {
+  const popover = usePopover({
+    guard: () => true,
+    placement: 'top',
+  })
+
+  if (!popover.snapshot.matches('active')) {
     return null
   }
 
   return (
-    <div className="border border-gray-300 rounded bg-white shadow">
+    <Popover
+      className="p-0"
+      isNonModal
+      triggerRef={popover.snapshot.context.anchorRef}
+      crossOffset={popover.snapshot.context.crossOffset}
+      offset={popover.snapshot.context.offset}
+      placement={popover.snapshot.context.placement}
+      isOpen={props.keyword.length >= 2}
+    >
+      <EmojiListBox
+        keyword={props.keyword}
+        matches={props.matches}
+        selectedIndex={props.selectedIndex}
+        onDismiss={props.onDismiss}
+        onNavigateTo={props.onNavigateTo}
+        onSelect={props.onSelect}
+      />
+    </Popover>
+  )
+}
+
+function EmojiListBox(props: {
+  keyword: string
+  matches: Array<EmojiMatch>
+  selectedIndex: number
+  onDismiss: () => void
+  onNavigateTo: (index: number) => void
+  onSelect: () => void
+}) {
+  return (
+    <div className="rounded">
       {props.matches.length === 0 ? (
         <div className="p-2 flex align-middle gap-2">
           No results found{' '}

apps/playground/src/feature-flags.ts

@@ -29,7 +29,7 @@ export const defaultEditorFeatureFlags: EditorFeatureFlags = {
   imageDeserializerPlugin: false,
   htmlDeserializerPlugin: false,
   textFileDeserializerPlugin: false,
-  emojiPickerPlugin: false,
+  emojiPickerPlugin: true,
   codeEditorPlugin: false,
   linkPlugin: false,
   oneLinePlugin: false,

apps/playground/src/playground-machine.ts

@@ -377,7 +377,19 @@ export const playgroundMachine = setup({
   context: ({input}) => ({
     editorIdGenerator: input.editorIdGenerator,
     featureFlags: defaultPlaygroundFeatureFlags,
-    value: [],
+    value: [
+      {
+        _type: 'block',
+        _key: keyGenerator(),
+        children: [
+          {
+            _type: 'span',
+            _key: keyGenerator(),
+            text: 'foo\nbar',
+          },
+        ],
+      },
+    ],
     rangeDecorations: [],
     editors: [],
   }),

apps/playground/src/primitives/popover.tsx

@@ -28,7 +28,7 @@ const styles = tv({
 export function Popover({children, className, ...props}: PopoverProps) {
   return (
     <AriaPopover
-      offset={8}
+      offset={props.offset ?? 8}
       {...props}
       className={composeRenderProps(className, (className, renderProps) =>
         styles({...renderProps, className}),

apps/playground/src/toolbar/toolbar.floating.tsx

@@ -9,7 +9,7 @@ export function FloatingToolbar() {
   const toolbarSchema = usePlaygroundToolbarSchema()
   const popover = usePopover({
     guard: isSelectionExpanded,
-    placement: 'top',
+    placement: 'bottom',
   })
 
   if (popover.snapshot.matches('inactive')) {
@@ -21,6 +21,7 @@ export function FloatingToolbar() {
       isNonModal
       triggerRef={popover.snapshot.context.anchorRef}
       crossOffset={popover.snapshot.context.crossOffset}
+      offset={popover.snapshot.context.offset + 8}
       placement={popover.snapshot.context.placement}
       isOpen={true}
     >