bsky-richtext-react 1.0.2 → 2.0.0

package/dist/index.js

@@ -9,7 +9,7 @@ import { HardBreak } from '@tiptap/extension-hard-break';
 import { Placeholder } from '@tiptap/extension-placeholder';
 import { RichText } from '@atproto/api';
 import { Mention } from '@tiptap/extension-mention';
-import tippy from 'tippy.js';
+import { computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { Extension } from '@tiptap/core';
 import { PluginKey, Plugin } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
@@ -29,29 +29,28 @@ function isTagFeature(feature) {
 
 // src/defaults/classNames.ts
 var defaultDisplayClassNames = {
-  root: "bsky-richtext",
-  mention: "bsky-mention",
-  link: "bsky-link",
-  tag: "bsky-tag"
+  root: "inline break-words",
+  mention: "inline text-blue-500 hover:underline cursor-pointer",
+  link: "inline text-blue-500 hover:underline",
+  tag: "inline text-blue-500 hover:underline cursor-pointer"
 };
 var defaultSuggestionClassNames = {
-  root: "bsky-suggestions",
-  item: "bsky-suggestion-item",
-  itemSelected: "bsky-suggestion-item-selected",
-  avatar: "bsky-suggestion-avatar",
-  avatarImg: "bsky-suggestion-avatar-img",
-  avatarPlaceholder: "bsky-suggestion-avatar-placeholder",
-  text: "bsky-suggestion-text",
-  name: "bsky-suggestion-name",
-  handle: "bsky-suggestion-handle",
-  empty: "bsky-suggestion-empty"
+  root: "flex flex-col max-h-80 overflow-y-auto bg-white rounded-lg shadow-lg border border-gray-200 min-w-60",
+  item: "flex items-center gap-3 w-full px-3 py-2 text-left cursor-pointer border-none bg-transparent hover:bg-gray-100 select-none",
+  itemSelected: "bg-gray-100",
+  avatar: "flex-shrink-0 w-10 h-10 rounded-full overflow-hidden bg-gray-200 flex items-center justify-center",
+  avatarImg: "block w-full h-full object-cover",
+  avatarPlaceholder: "flex items-center justify-center w-full h-full text-gray-500 font-medium text-sm",
+  text: "flex flex-col flex-1 min-w-0 overflow-hidden",
+  name: "block truncate font-medium text-gray-900 text-sm",
+  handle: "block truncate text-xs text-gray-500",
+  empty: "block px-3 py-2 text-sm text-gray-500"
 };
 var defaultEditorClassNames = {
-  root: "bsky-editor",
-  content: "bsky-editor-content",
-  placeholder: "bsky-editor-placeholder",
-  mention: "bsky-editor-mention",
-  link: "autolink",
+  root: "block w-full relative",
+  content: "block w-full",
+  mention: "inline text-blue-500",
+  link: "inline text-blue-500",
   suggestion: defaultSuggestionClassNames
 };
 
@@ -366,13 +365,7 @@ function createDebouncedSearch(delayMs = 300) {
     });
   };
 }
-var MentionSuggestionList = forwardRef(function MentionSuggestionListImpl({
-  items,
-  command,
-  showAvatars = true,
-  noResultsText = "No results",
-  classNames: classNamesProp
-}, ref) {
+var MentionSuggestionList = forwardRef(function MentionSuggestionListImpl({ items, command, showAvatars = true, noResultsText = "No results", classNames: classNamesProp }, ref) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const cn = useMemo(
     () => generateClassNames([defaultSuggestionClassNames, classNamesProp]),
@@ -456,12 +449,6 @@ function createDefaultSuggestionRenderer(options = {}) {
   return () => {
     let renderer;
     let popup;
-    const destroy = () => {
-      popup?.[0]?.destroy();
-      renderer?.destroy();
-      renderer = void 0;
-      popup = void 0;
-    };
     const buildProps = (props) => ({
       ...props,
       showAvatars: options.showAvatars ?? true,
@@ -476,33 +463,49 @@ function createDefaultSuggestionRenderer(options = {}) {
         });
         if (!props.clientRect) return;
         const clientRect = props.clientRect;
-        popup = tippy("body", {
-          getReferenceClientRect: () => clientRect?.() ?? new DOMRect(),
-          appendTo: () => document.body,
-          content: renderer.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: "manual",
-          placement: "bottom-start"
+        popup = document.createElement("div");
+        popup.style.position = "fixed";
+        popup.style.zIndex = "9999";
+        popup.appendChild(renderer.element);
+        document.body.appendChild(popup);
+        const virtualEl = { getBoundingClientRect: () => clientRect?.() ?? new DOMRect() };
+        void computePosition(virtualEl, popup, {
+          placement: "bottom-start",
+          middleware: [offset(8), flip(), shift({ padding: 8 })]
+        }).then(({ x, y }) => {
+          if (popup) {
+            popup.style.left = `${x}px`;
+            popup.style.top = `${y}px`;
+          }
         });
       },
       onUpdate(props) {
         renderer?.updateProps(buildProps(props));
-        if (!props.clientRect) return;
+        if (!props.clientRect || !popup) return;
         const clientRect = props.clientRect;
-        popup?.[0]?.setProps({
-          getReferenceClientRect: () => clientRect?.() ?? new DOMRect()
+        const virtualEl = { getBoundingClientRect: () => clientRect?.() ?? new DOMRect() };
+        void computePosition(virtualEl, popup, {
+          placement: "bottom-start",
+          middleware: [offset(8), flip(), shift({ padding: 8 })]
+        }).then(({ x, y }) => {
+          if (popup) {
+            popup.style.left = `${x}px`;
+            popup.style.top = `${y}px`;
+          }
         });
       },
       onKeyDown(props) {
         if (props.event.key === "Escape") {
-          popup?.[0]?.hide();
+          if (popup) popup.style.display = "none";
           return true;
         }
         return renderer?.ref?.onKeyDown(props) ?? false;
       },
       onExit() {
-        destroy();
+        popup?.remove();
+        renderer?.destroy();
+        popup = void 0;
+        renderer = void 0;
       }
     };
   };