fix: issue embeds (#88)

* fix: issue suggestions not properly rendering embeds

* feat: added useIssueEmbed hook in commented form, as it would be removed in develop

* feat: added selected states to issue embeds

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx

@@ -78,7 +78,6 @@ const IssueSuggestionList = ({
     const navigationKeys = ["ArrowUp", "ArrowDown", "Enter", "Tab"];
     const onKeyDown = (e: KeyboardEvent) => {
       if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
         // if (editor.isFocused) {
         //   editor.chain().blur();
         //   commandListContainer.current?.focus();
@@ -107,7 +106,6 @@ const IssueSuggestionList = ({
         }
         if (e.key === "Enter") {
           selectItem(currentSection, selectedIndex);
-          e.stopPropagation();
           return true;
         }
         if (e.key === "Tab") {
@@ -150,7 +148,7 @@ const IssueSuggestionList = ({
     <div
       id="issue-list-container"
       ref={commandListContainer}
-      className="fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
+      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
     >
       {sections.map((section) => {
         const sectionItems = displayedItems[section];
@@ -193,29 +191,35 @@ const IssueSuggestionList = ({
     </div>
   ) : null;
 };
-
 export const IssueListRenderer = () => {
   let component: ReactRenderer | null = null;
   let popup: any | null = null;
 
   return {
     onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+      const container = document.querySelector(".frame-renderer") as HTMLElement;
       component = new ReactRenderer(IssueSuggestionList, {
         props,
         // @ts-ignore
         editor: props.editor,
       });
-
       // @ts-ignore
-      popup = tippy("body", {
+      popup = tippy(".frame-renderer", {
+        flipbehavior: ["bottom", "top"],
+        appendTo: () => document.querySelector(".frame-renderer") as HTMLElement,
+        flip: true,
+        flipOnUpdate: true,
         getReferenceClientRect: props.clientRect,
-        appendTo: () => document.querySelector("#editor-container"),
         content: component.element,
         showOnCreate: true,
         interactive: true,
         trigger: "manual",
         placement: "bottom-start",
       });
+
+      container.addEventListener("scroll", () => {
+        popup?.[0].destroy();
+      });
     },
     onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
       component?.updateProps(props);
@@ -230,10 +234,20 @@ export const IssueListRenderer = () => {
         popup?.[0].hide();
         return true;
       }
-      // @ts-ignore
-      return component?.ref?.onKeyDown(props);
+
+      const navigationKeys = ["ArrowUp", "ArrowDown", "Enter", "Tab"];
+      if (navigationKeys.includes(props.event.key)) {
+        // @ts-ignore
+        component?.ref?.onKeyDown(props);
+        return true;
+      }
+      return false;
     },
-    onExit: (e) => {
+    onExit: () => {
+      const container = document.querySelector(".frame-renderer") as HTMLElement;
+      if (container) {
+        container.removeEventListener("scroll", () => {});
+      }
       popup?.[0].destroy();
       setTimeout(() => {
         component?.destroy();

packages/editor/document-editor/src/ui/index.tsx

@@ -158,11 +158,11 @@ const DocumentEditor = ({
         documentDetails={documentDetails}
         isSubmitting={isSubmitting}
       />
-      <div className="flex h-full w-full overflow-y-auto">
+      <div className="flex h-full w-full overflow-y-auto frame-renderer">
         <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72">
           <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
         </div>
-        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
+        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
           <PageRenderer
             onActionCompleteHandler={onActionCompleteHandler}
             hideDragHandle={hideDragHandleOnMouseLeave}

packages/editor/document-editor/src/ui/readonly/index.tsx

@@ -105,11 +105,11 @@ const DocumentReadOnlyEditor = ({
         documentDetails={documentDetails}
         archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
       />
-      <div className="flex h-full w-full overflow-y-auto">
+      <div className="flex h-full w-full overflow-y-auto frame-renderer">
         <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-80">
           <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
         </div>
-        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
+        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
           <PageRenderer
             onActionCompleteHandler={onActionCompleteHandler}
             updatePageTitle={() => Promise.resolve()}