feat: Add position option for inline insertion (#790)

* Add position option for inline insertion * Changed PlasmoCSUIAnchor to use a Discriminating Union
PlasmoHQ · Nov 9, 2023 · 6017ec5 · 6017ec5 · ViktorTassen · Nov 20, 2023
1 parent 53aac96
commit 6017ec5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/cli/plasmo/src/type.ts b/cli/plasmo/src/type.ts
@@ -14,11 +14,19 @@ type Getter<T, P = any> = (props?: P) => Async<T>
 
 type GetElement = Getter<Element>
 
-export type PlasmoCSUIAnchor = {
+type PlasmoCSUIOverlayAnchor = {
   element: Element
-  type: "overlay" | "inline"
+  type: "overlay"
 }
 
+type PlasmoCSUIInlineAnchor = {
+  element: Element
+  type: "inline"
+  insertPosition?: "beforebegin" | "afterbegin" | "beforeend" | "afterend"
+}
+
+export type PlasmoCSUIAnchor = PlasmoCSUIOverlayAnchor | PlasmoCSUIInlineAnchor
+
 export type PlasmoCSUIProps = {
   anchor?: PlasmoCSUIAnchor
 }

diff --git a/cli/plasmo/templates/static/common/csui.ts b/cli/plasmo/templates/static/common/csui.ts
@@ -50,7 +50,7 @@ async function injectAnchor<T>(
       mountState
     })
   } else if (anchor.type === "inline") {
-    anchor.element.insertAdjacentElement("afterend", shadowHost)
+    anchor.element.insertAdjacentElement(anchor.insertPosition || "afterend", shadowHost)
   } else {
     document.documentElement.prepend(shadowHost)
   }