@ctzhian/tiptap 0.4.0

package/dist/extension/component/CustomLink/Readonly.js

@@ -0,0 +1,106 @@
+// import { Avatar, Box, Link, Stack } from "@mui/material"
+// import { LinkIcon } from "@ctzhian/tiptap/component/Icons"
+// import React from "react"
+// import { LinkAttributes } from "."
+
+// interface ReadonlyLinkProps {
+//   attrs: LinkAttributes
+// }
+
+// export const ReadonlyLink: React.FC<ReadonlyLinkProps> = (props) => {
+//   const { attrs } = props
+
+//   const handleClick = (e: React.MouseEvent) => {
+//     e.preventDefault()
+//     if (attrs.href) {
+//       window.open(attrs.href, attrs.target || '_blank')
+//     }
+//   }
+
+//   // 获取网站图标
+//   const getFavicon = (url: string) => {
+//     try {
+//       const urlObj = new URL(url)
+//       return `${urlObj.protocol}//${urlObj.host}/favicon.ico`
+//     } catch {
+//       return null
+//     }
+//   }
+
+//   if (attrs.type === 'card') {
+//     return (
+//       <Box
+//         component="div"
+//         onClick={handleClick}
+//         sx={{
+//           display: 'block',
+//           border: '1px solid',
+//           borderColor: 'divider',
+//           borderRadius: 1,
+//           p: 2,
+//           cursor: 'pointer',
+//           textDecoration: 'none',
+//           color: 'inherit',
+//           maxWidth: 400,
+//           '&:hover': {
+//             bgcolor: 'action.hover'
+//           }
+//         }}
+//       >
+//         <Stack direction="row" gap={2} alignItems="center">
+//           <Avatar
+//             sx={{ width: 24, height: 24 }}
+//             src={getFavicon(attrs.href) || undefined}
+//           >
+//             <LinkIcon sx={{ fontSize: '1.125rem' }} />
+//           </Avatar>
+//           <Stack flex={1} sx={{ minWidth: 0 }}>
+//             <Box
+//               sx={{
+//                 fontWeight: 500,
+//                 fontSize: '0.875rem',
+//                 overflow: 'hidden',
+//                 textOverflow: 'ellipsis',
+//                 whiteSpace: 'nowrap'
+//               }}
+//             >
+//               {attrs.title || attrs.href}
+//             </Box>
+//             <Box
+//               sx={{
+//                 fontSize: '0.75rem',
+//                 color: 'text.secondary',
+//                 overflow: 'hidden',
+//                 textOverflow: 'ellipsis',
+//                 whiteSpace: 'nowrap'
+//               }}
+//             >
+//               {attrs.href}
+//             </Box>
+//           </Stack>
+//         </Stack>
+//       </Box>
+//     )
+//   }
+
+//   // 默认链接风格
+//   return (
+//     <Link
+//       component="a"
+//       href={attrs.href}
+//       target={attrs.target || '_blank'}
+//       rel={attrs.rel || 'noopener noreferrer'}
+//       onClick={handleClick}
+//       sx={{
+//         color: 'primary.main',
+//         textDecoration: 'underline',
+//         cursor: 'pointer',
+//         '&:hover': {
+//           textDecoration: 'none'
+//         }
+//       }}
+//     >
+//       {attrs.title || attrs.href}
+//     </Link>
+//   )
+// }

package/dist/extension/component/CustomLink/index.js

@@ -0,0 +1,440 @@
+// import { MarkViewRendererProps } from "@tiptap/react"
+// import React from "react"
+// import InsertLink from "./Insert"
+
+// export interface LinkAttributes {
+//   href: string
+//   target?: string | null
+//   rel?: string | null
+//   class?: string | null
+//   title?: string
+//   type?: 'link' | 'card'
+// }
+
+// export const LinkViewWrapper: React.FC<MarkViewRendererProps> = (props) => {
+//   const {
+//     editor,
+//     mark,
+//     updateAttributes,
+//   } = props
+
+//   const attrs = mark.attrs as LinkAttributes
+
+//   // const [showActions, setShowActions] = useState(false)
+//   // const [selected, setSelected] = useState(false)
+//   // const [linkElement, setLinkElement] = useState<HTMLAnchorElement | null>(null)
+//   // const [editMode, setEditMode] = useState(false)
+//   // const [editTitle, setEditTitle] = useState('')
+//   // const [editHref, setEditHref] = useState('')
+//   // const [editType, setEditType] = useState<'link' | 'card'>('link')
+
+//   // const getFavicon = (url: string) => {
+//   //   try {
+//   //     const urlObj = new URL(url)
+//   //     return `${urlObj.protocol}//${urlObj.host}/favicon.ico`
+//   //   } catch {
+//   //     return null
+//   //   }
+//   // }
+
+//   // const handleClick = (e: React.MouseEvent) => {
+//   //   e.preventDefault()
+//   //   if (editor.isEditable) {
+//   //     setSelected(!selected)
+//   //     if (!selected) {
+//   //       setShowActions(true)
+//   //     } else {
+//   //       // 第二次点击，打开链接
+//   //       window.open(attrs.href, attrs.target || '_blank')
+//   //       setShowActions(false)
+//   //       setSelected(false)
+//   //     }
+//   //   } else {
+//   //     // 只读模式直接打开链接
+//   //     window.open(attrs.href, attrs.target || '_blank')
+//   //   }
+//   // }
+
+//   // const handleOpen = () => {
+//   //   window.open(attrs.href, attrs.target || '_blank')
+//   //   setShowActions(false)
+//   //   setSelected(false)
+//   // }
+
+//   // const handleEdit = () => {
+//   //   setEditTitle(attrs.title || '')
+//   //   setEditHref(attrs.href)
+//   //   setEditType(attrs.type || 'link')
+//   //   setEditMode(true)
+//   //   setShowActions(false)
+//   // }
+
+//   // const handleSaveEdit = () => {
+//   //   if (editHref.trim()) {
+//   //     updateAttributes({
+//   //       href: editHref.trim(),
+//   //       title: editTitle.trim() || editHref.trim(),
+//   //       type: editType
+//   //     })
+//   //   }
+//   //   setEditMode(false)
+//   //   setSelected(false)
+//   // }
+
+//   // const handleCancelEdit = () => {
+//   //   setEditMode(false)
+//   //   setEditTitle('')
+//   //   setEditHref('')
+//   //   setEditType('link')
+//   // }
+
+//   // const handleCopy = async () => {
+//   //   try {
+//   //     await navigator.clipboard.writeText(attrs.href)
+//   //   } catch (err) {
+//   //     console.error('复制失败:', err)
+//   //   }
+//   //   setShowActions(false)
+//   //   setSelected(false)
+//   // }
+
+//   // const handleUnlink = () => {
+//   //   editor.chain().unsetLink().run()
+//   //   setShowActions(false)
+//   //   setSelected(false)
+//   // }
+
+//   // const handleToggleStyle = () => {
+//   //   updateAttributes({
+//   //     type: attrs.type === 'link' ? 'card' : 'link'
+//   //   })
+//   //   setShowActions(false)
+//   //   setSelected(false)
+//   // }
+
+//   // 点击外部关闭操作菜单
+//   // useEffect(() => {
+//   //   const handleClickOutside = (event: MouseEvent) => {
+//   //     if (linkElement && !linkElement.contains(event.target as Node)) {
+//   //       setShowActions(false)
+//   //       setSelected(false)
+//   //     }
+//   //   }
+
+//   //   if (showActions) {
+//   //     document.addEventListener('mousedown', handleClickOutside)
+//   //     return () => document.removeEventListener('mousedown', handleClickOutside)
+//   //   }
+//   // }, [showActions, linkElement])
+
+//   // 对于空 href，渲染插入组件
+//   if (!attrs.href) {
+//     return <InsertLink updateAttributes={updateAttributes} />
+//   }
+
+//   // 只读模式
+//   // if (!editor.isEditable) {
+//   //   return <ReadonlyLink attrs={attrs} />
+//   // }
+
+//   // 简单的测试实现，显示 attrs 数据确实可以获取到
+//   return (
+//     <a
+//       href={attrs.href}
+//       target={attrs.target || '_blank'}
+//       className={attrs.class || ''}
+//       title={attrs.title || ''}
+//       data-type={attrs.type || 'link'}
+//       style={{
+//         color: 'blue',
+//         textDecoration: 'underline',
+//         background: attrs.type === 'card' ? '#f0f0f0' : 'transparent',
+//         padding: attrs.type === 'card' ? '4px' : '0'
+//       }}
+//     >
+//       {/* 显示调试信息 */}
+//       {attrs.title || attrs.href}
+//       {attrs.type === 'card' && ' [Card Style]'}
+//     </a>
+//   )
+
+//   // 卡片风格
+//   // if (attrs.type === 'card') {
+//   //   return (
+//   //     <>
+//   //       <Box
+//   //         ref={setLinkElement}
+//   //         component="div"
+//   //         onClick={handleClick}
+//   //         sx={{
+//   //           display: 'block',
+//   //           border: '1px solid',
+//   //           borderColor: selected ? 'primary.main' : 'divider',
+//   //           borderRadius: 1,
+//   //           p: 2,
+//   //           cursor: 'pointer',
+//   //           textDecoration: 'none',
+//   //           color: 'inherit',
+//   //           maxWidth: 400,
+//   //           mb: 1,
+//   //           '&:hover': {
+//   //             bgcolor: 'action.hover'
+//   //           }
+//   //         }}
+//   //       >
+//   //         <Stack direction="row" gap={2} alignItems="center">
+//   //           <Avatar
+//   //             sx={{ width: 24, height: 24 }}
+//   //             src={getFavicon(attrs.href) || undefined}
+//   //           >
+//   //             <LinkIcon sx={{ fontSize: 16 }} />
+//   //           </Avatar>
+//   //           <Stack flex={1} sx={{ minWidth: 0 }}>
+//   //             <Box
+//   //               sx={{
+//   //                 fontWeight: 500,
+//   //                 fontSize: '0.875rem',
+//   //                 overflow: 'hidden',
+//   //                 textOverflow: 'ellipsis',
+//   //                 whiteSpace: 'nowrap'
+//   //               }}
+//   //             >
+//   //               {attrs.title || attrs.href}
+//   //             </Box>
+//   //             <Box
+//   //               sx={{
+//   //                 fontSize: '0.75rem',
+//   //                 color: 'text.secondary',
+//   //                 overflow: 'hidden',
+//   //                 textOverflow: 'ellipsis',
+//   //                 whiteSpace: 'nowrap'
+//   //               }}
+//   //             >
+//   //               {attrs.href}
+//   //             </Box>
+//   //           </Stack>
+//   //         </Stack>
+//   //       </Box>
+
+//   //       <FloatingPopover
+//   //         open={showActions}
+//   //         anchorEl={linkElement}
+//   //         onClose={() => {
+//   //           setShowActions(false)
+//   //           setSelected(false)
+//   //         }}
+//   //         placement="top"
+//   //       >
+//   //         <Stack direction="row" sx={{ p: 1 }}>
+//   //           <Tooltip title="打开">
+//   //             <IconButton size="small" onClick={handleOpen}>
+//   //               <ShareBoxLineIcon fontSize="small" />
+//   //             </IconButton>
+//   //           </Tooltip>
+//   //           <Tooltip title="编辑">
+//   //             <IconButton size="small" onClick={handleEdit}>
+//   //               <EditBoxLineIcon fontSize="small" />
+//   //             </IconButton>
+//   //           </Tooltip>
+//   //           <Tooltip title="复制链接">
+//   //             <IconButton size="small" onClick={handleCopy}>
+//   //               <CopyIcon fontSize="small" />
+//   //             </IconButton>
+//   //           </Tooltip>
+//   //           <Tooltip title="取消链接">
+//   //             <IconButton size="small" onClick={handleUnlink}>
+//   //               <DeleteLineIcon fontSize="small" />
+//   //             </IconButton>
+//   //           </Tooltip>
+//   //           <Tooltip title="切换到文字链接">
+//   //             <IconButton size="small" onClick={handleToggleStyle}>
+//   //               <TitleIcon fontSize="small" />
+//   //             </IconButton>
+//   //           </Tooltip>
+//   //         </Stack>
+//   //       </FloatingPopover>
+
+//   //       <FloatingPopover
+//   //         open={editMode}
+//   //         anchorEl={linkElement}
+//   //         onClose={handleCancelEdit}
+//   //         placement="bottom"
+//   //       >
+//   //         <Stack gap={2} sx={{ p: 2, width: 320 }}>
+//   //           <TextField
+//   //             fullWidth
+//   //             size="small"
+//   //             label="标题"
+//   //             value={editTitle}
+//   //             onChange={(e) => setEditTitle(e.target.value)}
+//   //             placeholder="链接标题（可选）"
+//   //           />
+//   //           <TextField
+//   //             fullWidth
+//   //             size="small"
+//   //             label="地址"
+//   //             value={editHref}
+//   //             onChange={(e) => setEditHref(e.target.value)}
+//   //             placeholder="https://example.com"
+//   //             required
+//   //           />
+//   //           <FormControl component="fieldset">
+//   //             <FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>风格</FormLabel>
+//   //             <RadioGroup
+//   //               row
+//   //               value={editType}
+//   //               onChange={(e) => setEditType(e.target.value as 'link' | 'card')}
+//   //             >
+//   //               <FormControlLabel value="link" control={<Radio size="small" />} label="链接" />
+//   //               <FormControlLabel value="card" control={<Radio size="small" />} label="卡片" />
+//   //             </RadioGroup>
+//   //           </FormControl>
+//   //           <Stack direction="row" gap={1}>
+//   //             <Button
+//   //               variant="outlined"
+//   //               size="small"
+//   //               fullWidth
+//   //               onClick={handleCancelEdit}
+//   //             >
+//   //               取消
+//   //             </Button>
+//   //             <Button
+//   //               variant="contained"
+//   //               size="small"
+//   //               fullWidth
+//   //               onClick={handleSaveEdit}
+//   //               disabled={!editHref.trim()}
+//   //             >
+//   //               保存
+//   //             </Button>
+//   //           </Stack>
+//   //         </Stack>
+//   //       </FloatingPopover>
+//   //     </>
+//   //   )
+//   // }
+
+//   // 链接风格
+//   // return (
+//   //   <>
+//   //     <MarkViewContent
+//   //       as="a"
+//   //       ref={setLinkElement}
+//   //       onClick={handleClick}
+//   //       style={{
+//   //         color: '#1976d2',
+//   //         textDecoration: 'underline',
+//   //         cursor: 'pointer',
+//   //         borderRadius: '4px',
+//   //         padding: selected ? '0 4px' : '0',
+//   //         backgroundColor: selected ? 'rgba(25, 118, 210, 0.08)' : 'transparent',
+//   //       }}
+//   //       onMouseEnter={(e) => {
+//   //         e.currentTarget.style.textDecoration = 'none'
+//   //         e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.04)'
+//   //       }}
+//   //       onMouseLeave={(e) => {
+//   //         e.currentTarget.style.textDecoration = 'underline'
+//   //         e.currentTarget.style.backgroundColor = selected ? 'rgba(25, 118, 210, 0.08)' : 'transparent'
+//   //       }}
+//   //     />
+
+//   //     <FloatingPopover
+//   //       open={showActions}
+//   //       anchorEl={linkElement}
+//   //       onClose={() => {
+//   //         setShowActions(false)
+//   //         setSelected(false)
+//   //       }}
+//   //       placement="top"
+//   //     >
+//   //       <Stack direction="row" sx={{ p: 1 }}>
+//   //         <Tooltip title="打开">
+//   //           <IconButton size="small" onClick={handleOpen}>
+//   //             <ShareBoxLineIcon fontSize="small" />
+//   //           </IconButton>
+//   //         </Tooltip>
+//   //         <Tooltip title="编辑">
+//   //           <IconButton size="small" onClick={handleEdit}>
+//   //             <EditBoxLineIcon fontSize="small" />
+//   //           </IconButton>
+//   //         </Tooltip>
+//   //         <Tooltip title="复制链接">
+//   //           <IconButton size="small" onClick={handleCopy}>
+//   //             <CopyIcon fontSize="small" />
+//   //           </IconButton>
+//   //         </Tooltip>
+//   //         <Tooltip title="取消链接">
+//   //           <IconButton size="small" onClick={handleUnlink}>
+//   //             <LinkUnlinkIcon fontSize="small" />
+//   //           </IconButton>
+//   //         </Tooltip>
+//   //         <Tooltip title="切换到卡片链接">
+//   //           <IconButton size="small" onClick={handleToggleStyle}>
+//   //             <LinkIcon fontSize="small" />
+//   //           </IconButton>
+//   //         </Tooltip>
+//   //       </Stack>
+//   //     </FloatingPopover>
+
+//   //     <FloatingPopover
+//   //       open={editMode}
+//   //       anchorEl={linkElement}
+//   //       onClose={handleCancelEdit}
+//   //       placement="bottom"
+//   //     >
+//   //       <Stack gap={2} sx={{ p: 2, width: 320 }}>
+//   //         <TextField
+//   //           fullWidth
+//   //           size="small"
+//   //           label="标题"
+//   //           value={editTitle}
+//   //           onChange={(e) => setEditTitle(e.target.value)}
+//   //           placeholder="链接标题（可选）"
+//   //         />
+//   //         <TextField
+//   //           fullWidth
+//   //           size="small"
+//   //           label="地址"
+//   //           value={editHref}
+//   //           onChange={(e) => setEditHref(e.target.value)}
+//   //           placeholder="https://example.com"
+//   //           required
+//   //         />
+//   //         <FormControl component="fieldset">
+//   //           <FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>风格</FormLabel>
+//   //           <RadioGroup
+//   //             row
+//   //             value={editType}
+//   //             onChange={(e) => setEditType(e.target.value as 'link' | 'card')}
+//   //           >
+//   //             <FormControlLabel value="link" control={<Radio size="small" />} label="链接" />
+//   //             <FormControlLabel value="card" control={<Radio size="small" />} label="卡片" />
+//   //           </RadioGroup>
+//   //         </FormControl>
+//   //         <Stack direction="row" gap={1}>
+//   //           <Button
+//   //             variant="outlined"
+//   //             size="small"
+//   //             fullWidth
+//   //             onClick={handleCancelEdit}
+//   //           >
+//   //             取消
+//   //           </Button>
+//   //           <Button
+//   //             variant="contained"
+//   //             size="small"
+//   //             fullWidth
+//   //             onClick={handleSaveEdit}
+//   //             disabled={!editHref.trim()}
+//   //           >
+//   //             保存
+//   //           </Button>
+//   //         </Stack>
+//   //       </Stack>
+//   //     </FloatingPopover>
+//   //   </>
+//   // )
+// }
+
+// export default LinkViewWrapper

package/dist/extension/component/EmojiList/index.d.ts

@@ -0,0 +1,14 @@
+import { EmojiItem } from '@tiptap/extension-emoji';
+import React from 'react';
+export type EmojiListProps = {
+    items: EmojiItem[];
+    command: (props: {
+        name: string;
+    }) => void;
+};
+export type EmojiListRef = {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+};
+export declare const EmojiList: React.ForwardRefExoticComponent<EmojiListProps & React.RefAttributes<EmojiListRef>>;

package/dist/extension/component/EmojiList/index.js

@@ -0,0 +1,104 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Paper } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedIndex = _useState2[0],
+    setSelectedIndex = _useState2[1];
+  var selectItem = function selectItem(index) {
+    var item = props.items[index];
+    if (item) {
+      props.command({
+        name: item.name
+      });
+    }
+  };
+  var upHandler = function upHandler() {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+  var downHandler = function downHandler() {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+  var enterHandler = function enterHandler() {
+    selectItem(selectedIndex);
+  };
+  useEffect(function () {
+    return setSelectedIndex(0);
+  }, [props.items]);
+  useImperativeHandle(ref, function () {
+    return {
+      onKeyDown: function onKeyDown(x) {
+        if (x.event.key === 'ArrowUp') {
+          upHandler();
+          return true;
+        }
+        if (x.event.key === 'ArrowDown') {
+          downHandler();
+          return true;
+        }
+        if (x.event.key === 'Enter') {
+          enterHandler();
+          return true;
+        }
+        return false;
+      }
+    };
+  }, [upHandler, downHandler, enterHandler]);
+  return /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      position: 'relative',
+      overflowY: 'auto',
+      p: 1,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      maxWidth: 300,
+      maxHeight: 300
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 1
+  }, props.items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      size: 1,
+      key: index,
+      onClick: function onClick() {
+        return selectItem(index);
+      },
+      sx: _objectSpread({
+        cursor: 'pointer',
+        lineHeight: 1,
+        fontSize: '1rem',
+        width: '2rem',
+        height: '2rem',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 'var(--mui-shape-borderRadius)',
+        img: {
+          width: '1.25rem',
+          height: '1.25rem'
+        },
+        transition: 'background-color 0.2s ease-in-out',
+        '&:hover': {
+          backgroundColor: 'action.hover'
+        }
+      }, index === selectedIndex && {
+        backgroundColor: 'action.selected'
+      })
+    }, item.fallbackImage ? /*#__PURE__*/React.createElement("img", {
+      src: item.fallbackImage
+    }) : item.emoji);
+  })));
+});