diff --git a/cli/plasmo/src/type.ts b/cli/plasmo/src/type.ts index 466c5f70f..16430e1b2 100644 --- a/cli/plasmo/src/type.ts +++ b/cli/plasmo/src/type.ts @@ -13,7 +13,17 @@ type Async = Promise | T type Getter = (props?: P) => Async +type InsertPosition = "beforebegin" | "afterbegin" | "beforeend" | "afterend" + +type ElementInsertOptions = { + element: Element + insertPosition?: InsertPosition +} + +type ElementInsertOptionsList = ElementInsertOptions[] + type GetElement = Getter +type GetElementInsertOptions = Getter 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 -export type PlasmoGetInlineAnchor = GetElement -export type PlasmoGetInlineAnchorList = Getter +export type PlasmoGetInlineAnchor = GetElement | GetElementInsertOptions +export type PlasmoGetInlineAnchorList = Getter export type PlasmoMountShadowHost = ( props: { diff --git a/cli/plasmo/templates/static/common/csui.ts b/cli/plasmo/templates/static/common/csui.ts index 8a35c2dfc..4b3d108df 100644 --- a/cli/plasmo/templates/static/common/csui.ts +++ b/cli/plasmo/templates/static/common/csui.ts @@ -184,23 +184,45 @@ export function createAnchorObserver(Mount: PlasmoCSUI) { 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 + }) } }) }