Fixed support of inline anchor insert position (#907)

Signed-off-by: L <[email protected]> Co-authored-by: L <[email protected]>
PlasmoHQ · Mar 7, 2024 · 9b51f43 · 9b51f43
1 parent 7a21c41
commit 9b51f43
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/cli/plasmo/src/type.ts b/cli/plasmo/src/type.ts
@@ -13,7 +13,17 @@ type Async<T> = Promise<T> | T
 
 type Getter<T, P = any> = (props?: P) => Async<T>
 
+type InsertPosition = "beforebegin" | "afterbegin" | "beforeend" | "afterend"
+
+type ElementInsertOptions = {
+  element: Element
+  insertPosition?: InsertPosition
+}
+
+type ElementInsertOptionsList = ElementInsertOptions[]
+
 type GetElement = Getter<Element>
+type GetElementInsertOptions = Getter<ElementInsertOptions>
 
 type PlasmoCSUIOverlayAnchor = {
   element: Element
@@ -24,8 +34,8 @@ type PlasmoCSUIOverlayAnchor = {
 type PlasmoCSUIInlineAnchor = {
   element: Element
   type: "inline"
+  insertPosition?: InsertPosition,
   root?: Root
-  insertPosition?: "beforebegin" | "afterbegin" | "beforeend" | "afterend"
 }
 
 export type PlasmoCSUIAnchor = PlasmoCSUIOverlayAnchor | PlasmoCSUIInlineAnchor
@@ -67,8 +77,8 @@ export type PlasmoGetRootContainer = (
 export type PlasmoGetOverlayAnchor = GetElement
 export type PlasmoGetOverlayAnchorList = Getter<NodeList>
 
-export type PlasmoGetInlineAnchor = GetElement
-export type PlasmoGetInlineAnchorList = Getter<NodeList>
+export type PlasmoGetInlineAnchor = GetElement | GetElementInsertOptions
+export type PlasmoGetInlineAnchorList = Getter<NodeList | ElementInsertOptionsList>
 
 export type PlasmoMountShadowHost = (
   props: {

diff --git a/cli/plasmo/templates/static/common/csui.ts b/cli/plasmo/templates/static/common/csui.ts
@@ -184,23 +184,45 @@ export function createAnchorObserver<T>(Mount: PlasmoCSUI<T>) {
 
     const renderList: PlasmoCSUIAnchor[] = []
 
-    if (!!inlineAnchor && !mountedInlineAnchorSet.has(inlineAnchor)) {
-      renderList.push({
-        element: inlineAnchor,
-        type: "inline"
-      })
+    if (!!inlineAnchor) {
+      if (inlineAnchor instanceof Element) {
+        if (!mountedInlineAnchorSet.has(inlineAnchor)) {
+          renderList.push({
+            element: inlineAnchor,
+            type: "inline"
+          })
+        }
+      } else if (
+          inlineAnchor.element instanceof Element
+          && !mountedInlineAnchorSet.has(inlineAnchor.element)
+      ) {
+        renderList.push({
+          element: inlineAnchor.element,
+          type: "inline",
+          insertPosition: inlineAnchor.insertPosition
+        })
+      }
     }
 
     if ((inlineAnchorList?.length || 0) > 0) {
       inlineAnchorList.forEach((inlineAnchor) => {
         if (
-          inlineAnchor instanceof Element &&
-          !mountedInlineAnchorSet.has(inlineAnchor)
+            inlineAnchor instanceof Element &&
+            !mountedInlineAnchorSet.has(inlineAnchor)
         ) {
           renderList.push({
             element: inlineAnchor,
             type: "inline"
           })
+        } else if (
+            inlineAnchor.element instanceof Element &&
+            !mountedInlineAnchorSet.has(inlineAnchor.element)
+        ) {
+          renderList.push({
+            element: inlineAnchor.element,
+            type: "inline",
+            insertPosition: inlineAnchor.insertPosition
+          })
         }
       })
     }