@antv/infographic 0.2.16 → 0.2.18

package/esm/syntax/parser.js

@@ -23,6 +23,13 @@ function getIndentInfo(line) {
 function stripComments(content) {
     return content.trimEnd();
 }
+function isCommentLine(content) {
+    const trimmed = content.trimStart();
+    return trimmed.startsWith('#') || trimmed.startsWith('//');
+}
+function isCodeFenceLine(content) {
+    return /^```[\w-]*\s*$/.test(content.trim());
+}
 function looksLikeRelationExpression(text) {
     return /[<>=o.x-]{2,}/.test(text);
 }
@@ -133,6 +140,8 @@ export function parseSyntaxToAst(input) {
         if (!line.trim())
             return;
         const { indent, content } = getIndentInfo(line);
+        if (isCommentLine(content) || isCodeFenceLine(content))
+            return;
         const stripped = stripComments(content);
         if (!stripped.trim())
             return;

package/esm/syntax/types.d.ts

@@ -16,7 +16,7 @@ export interface ArrayNode {
     line: number;
     items: SyntaxNode[];
 }
-export type SyntaxErrorCode = 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
+export type SyntaxErrorCode = 'implicit_template' | 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
 export interface SyntaxError {
     path: string;
     line: number;

package/esm/templates/registry.d.ts

@@ -1,4 +1,5 @@
 import type { TemplateOptions } from './types';
 export declare function registerTemplate(type: string, template: TemplateOptions): void;
+export declare function resolveTemplateKey(type: string): string | undefined;
 export declare function getTemplate(type: string): TemplateOptions | undefined;
 export declare function getTemplates(): string[];

package/esm/templates/registry.js

@@ -1,7 +1,13 @@
+import { findClosestTemplateKey } from './utils.js';
 const TEMPLATE_REGISTRY = new Map();
 export function registerTemplate(type, template) {
     TEMPLATE_REGISTRY.set(type, template);
 }
+export function resolveTemplateKey(type) {
+    if (TEMPLATE_REGISTRY.has(type))
+        return type;
+    return findClosestTemplateKey(type, TEMPLATE_REGISTRY.keys());
+}
 export function getTemplate(type) {
     return TEMPLATE_REGISTRY.get(type);
 }

package/esm/templates/utils.d.ts

@@ -0,0 +1 @@
+export declare function findClosestTemplateKey(type: string, keys: Iterable<string>): string | undefined;

package/esm/templates/utils.js

@@ -0,0 +1,68 @@
+function normalizeTemplateKey(type) {
+    return type
+        .trim()
+        .toLowerCase()
+        .replace(/[_\s]+/g, '-')
+        .replace(/-+/g, '-');
+}
+function getLevenshteinDistance(source, target) {
+    if (source === target)
+        return 0;
+    if (!source.length)
+        return target.length;
+    if (!target.length)
+        return source.length;
+    const previous = Array.from({ length: target.length + 1 }, (_, index) => index);
+    const current = new Array(target.length + 1);
+    for (let sourceIndex = 1; sourceIndex <= source.length; sourceIndex += 1) {
+        current[0] = sourceIndex;
+        const sourceCode = source.charCodeAt(sourceIndex - 1);
+        for (let targetIndex = 1; targetIndex <= target.length; targetIndex += 1) {
+            const replaceCost = sourceCode === target.charCodeAt(targetIndex - 1) ? 0 : 1;
+            current[targetIndex] = Math.min(previous[targetIndex] + 1, current[targetIndex - 1] + 1, previous[targetIndex - 1] + replaceCost);
+        }
+        for (let index = 0; index < current.length; index += 1) {
+            previous[index] = current[index];
+        }
+    }
+    return previous[target.length];
+}
+function getCommonPrefixLength(source, target) {
+    const limit = Math.min(source.length, target.length);
+    let index = 0;
+    while (index < limit &&
+        source.charCodeAt(index) === target.charCodeAt(index)) {
+        index += 1;
+    }
+    return index;
+}
+function isBetterMatch(bestMatch, bestDistance, bestPrefixLength, candidateKey, candidateDistance, candidatePrefixLength) {
+    return (candidateDistance < bestDistance ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength > bestPrefixLength) ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength === bestPrefixLength &&
+            (!bestMatch || candidateKey < bestMatch)));
+}
+export function findClosestTemplateKey(type, keys) {
+    const normalizedType = normalizeTemplateKey(type);
+    if (!normalizedType)
+        return undefined;
+    let bestMatch;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    let bestPrefixLength = -1;
+    for (const key of keys) {
+        const normalizedKey = normalizeTemplateKey(key);
+        if (normalizedKey === normalizedType) {
+            return key;
+        }
+        const distance = getLevenshteinDistance(normalizedType, normalizedKey);
+        const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
+        if (isBetterMatch(bestMatch, bestDistance, bestPrefixLength, key, distance, prefixLength)) {
+            bestMatch = key;
+            bestDistance = distance;
+            bestPrefixLength = prefixLength;
+        }
+    }
+    return bestMatch;
+}

package/esm/themes/built-in.js

@@ -1,4 +1,7 @@
 import { registerTheme } from './registry.js';
+registerTheme('light', {
+    colorBg: '#ffffff',
+});
 registerTheme('dark', {
     colorBg: '#1F1F1F',
     base: {

package/esm/utils/padding.js

@@ -26,7 +26,7 @@ export function setSVGPadding(svg, padding) {
         setSVGPaddingInNode(svg, padding);
     }
     else {
-        if (document.contains(svg)) {
+        if (svg.isConnected) {
             setSVGPaddingInBrowser(svg, padding);
         }
         else {

package/esm/utils/style.d.ts

@@ -1 +1,3 @@
-export declare function injectStyleOnce(id: string, styles: string): void;
+type StyleTarget = Document | ShadowRoot | Node | null | undefined;
+export declare function injectStyleOnce(id: string, styles: string, target?: StyleTarget): void;
+export {};

package/esm/utils/style.js

@@ -1,8 +1,31 @@
-export function injectStyleOnce(id, styles) {
-    if (document.getElementById(id))
+function resolveStyleRoot(target) {
+    if (!target)
+        return document;
+    if (target instanceof Document || target instanceof ShadowRoot)
+        return target;
+    if (!target.isConnected)
+        return document;
+    const root = target.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function hasStyle(root, id) {
+    if (root instanceof Document)
+        return Boolean(root.getElementById(id));
+    return Boolean(root.querySelector(`#${id}`));
+}
+export function injectStyleOnce(id, styles, target) {
+    var _a;
+    const root = resolveStyleRoot(target);
+    if (hasStyle(root, id))
         return;
-    const style = document.createElement('style');
+    const doc = root instanceof Document ? root : ((_a = root.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const style = doc.createElement('style');
     style.id = id;
     style.textContent = styles;
-    document.head.appendChild(style);
+    if (root instanceof Document) {
+        root.head.appendChild(style);
+    }
+    else {
+        root.appendChild(style);
+    }
 }

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.16";
+export declare const VERSION = "0.2.18";

package/esm/version.js

@@ -1 +1 @@
-export const VERSION = '0.2.16';
+export const VERSION = '0.2.18';

package/lib/constants/service.d.ts

@@ -1 +1 @@
-export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/open/v1/icon";
+export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/v1/infographic/icon";

package/lib/constants/service.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SERVICE_URL = void 0;
-exports.ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';
+exports.ICON_SERVICE_URL = 'https://www.weavefox.cn/api/v1/infographic/icon';

package/lib/designs/structures/chart-line.js

@@ -9,6 +9,8 @@ const components_1 = require("../components");
 const layouts_1 = require("../layouts");
 const utils_2 = require("../utils");
 const registry_1 = require("./registry");
+const ITEM_POSITION_H = 'center';
+const ITEM_POSITION_V = 'normal';
 const ChartLine = (props) => {
     const { Title, Item, data, width, height = 260, gap = 10, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
     const { title, desc, items = [], xTitle, yTitle } = data;
@@ -21,8 +23,8 @@ const ChartLine = (props) => {
         indexes: [0],
         datum: items[0],
         data,
-        positionH: 'center',
-        positionV: 'normal',
+        positionH: ITEM_POSITION_H,
+        positionV: ITEM_POSITION_V,
     };
     const sampleBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, Object.assign({}, itemProps)));
     const labelWidth = sampleBounds.width;
@@ -70,10 +72,11 @@ const ChartLine = (props) => {
     const titleElements = [];
     const tickElements = [];
     const ticksY = scaleY.ticks(6);
+    const formatTickY = scaleY.tickFormat(6);
     ticksY.forEach((tick) => {
         const yPos = chartOriginY + scaleY(tick);
         gridElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${chartOriginX} ${yPos} L ${chartOriginX + derivedChartWidth} ${yPos}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape", opacity: 0.08 }));
-        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: Number.isInteger(tick) ? tick.toString() : tick.toFixed(1) }));
+        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: formatTickY(tick) }));
     });
     const xLabels = [];
     const pointPositions = [];
@@ -161,7 +164,7 @@ const ChartLine = (props) => {
     if (yTitle) {
         titleElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: paddingLeft + yTitleSpace / 2, y: chartOriginY + height / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
     }
-    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsxs)(jsx_1.Defs, { children: [(0, jsx_runtime_1.jsx)("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [areaStops, (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: colorPrimary, stopOpacity: "0.04" })] })] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: gridElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: [...axisElements, ...tickElements] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: lineElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: pointElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: valueElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: titleElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: xLabels })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsxs)(jsx_1.Defs, { children: [(0, jsx_runtime_1.jsx)("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), (0, jsx_runtime_1.jsx)("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: areaStops })] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: gridElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: [...axisElements, ...tickElements] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: lineElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: pointElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: valueElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: titleElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: xLabels })] })] }));
 };
 exports.ChartLine = ChartLine;
 (0, registry_1.registerStructure)('chart-line', {

package/lib/editor/interactions/dblclick-edit-text.js

@@ -76,7 +76,7 @@ function editText(text, options) {
     const entity = (0, utils_1.getTextEntity)(text);
     if (!entity)
         return;
-    ensureEditorStyles();
+    ensureEditorStyles(entity);
     new InlineTextEditor(entity, options).start();
 }
 class InlineTextEditor {
@@ -207,7 +207,7 @@ class InlineTextEditor {
         return this.entity.textContent || '';
     }
 }
-function ensureEditorStyles() {
+function ensureEditorStyles(target) {
     (0, utils_1.injectStyleOnce)(EDITOR_STYLE_ID, `
 .${EDITOR_BASE_CLASS} {
   margin: 0;
@@ -220,5 +220,5 @@ function ensureEditorStyles() {
 .${EDITOR_BASE_CLASS}::selection {
   background-color: #b3d4fc;
 }
-`);
+`, target);
 }

package/lib/editor/managers/interaction.js

@@ -12,9 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractionManager = void 0;
 const utils_1 = require("../../utils");
 const utils_2 = require("../utils");
+const utils_3 = require("../utils");
 class InteractionManager {
     constructor() {
-        this.extensions = new utils_2.Extension();
+        this.extensions = new utils_3.Extension();
         this.interactions = [];
         this.active = false;
         this.running = null;
@@ -22,14 +23,15 @@ class InteractionManager {
         this.selection = new Set();
         this.handleClick = (event) => {
             const doc = this.editor.getDocument();
-            const target = event.target;
-            if (!target) {
+            const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+            const insideInfographic = (0, utils_2.eventPathContains)(event, doc) ||
+                path.some((node) => node instanceof HTMLElement && (0, utils_1.isInfographicComponent)(node));
+            if (!event.target) {
                 this.deactivate();
                 return;
             }
             // 点击画布 SVG 或者标记为组件的元素
-            if (doc.contains(target) ||
-                (0, utils_1.isInfographicComponent)(target))
+            if (insideInfographic)
                 this.activate();
             else
                 this.deactivate();

package/lib/editor/plugins/components/button.d.ts

@@ -4,9 +4,10 @@ export interface IconButtonProps {
     icon: Icon;
     onClick?: () => void;
     activate?: boolean;
+    root?: Node;
 }
 export interface IconButtonHandle {
     activate: boolean;
     setActivate: (activate: boolean) => void;
 }
-export declare const IconButton: ({ icon, onClick, activate, }: IconButtonProps) => Button;
+export declare const IconButton: ({ icon, onClick, activate, root, }: IconButtonProps) => Button;

package/lib/editor/plugins/components/button.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
 const utils_1 = require("../../../utils");
-const IconButton = ({ icon, onClick, activate = false, }) => {
-    ensureIconButtonStyle();
+const IconButton = ({ icon, onClick, activate = false, root, }) => {
+    ensureIconButtonStyle(root);
     const button = document.createElement('button');
     button.type = 'button';
     button.classList.add(ICON_BUTTON_CLASS);
@@ -27,7 +27,7 @@ const IconButton = ({ icon, onClick, activate = false, }) => {
 exports.IconButton = IconButton;
 const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
 const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
-function ensureIconButtonStyle() {
+function ensureIconButtonStyle(target) {
     (0, utils_1.injectStyleOnce)(ICON_BUTTON_STYLE_ID, `
 .${ICON_BUTTON_CLASS} {
   padding: 0;
@@ -53,5 +53,5 @@ function ensureIconButtonStyle() {
 .${ICON_BUTTON_CLASS}[data-activate="true"] {
   background-color: #d9d9d9;
 }
-`);
+`, target);
 }

package/lib/editor/plugins/components/color-picker.d.ts

@@ -2,6 +2,7 @@ export type ColorPickerProps = {
     value?: string;
     swatches?: string[];
     onChange?: (value: string) => void;
+    root?: Node;
 };
 export type ColorPickerHandle = {
     setValue: (value?: string) => void;

package/lib/editor/plugins/components/color-picker.js

@@ -49,7 +49,7 @@ function ColorPicker(props) {
     if (typeof document === 'undefined') {
         throw new Error('ColorPicker can only be used in the browser.');
     }
-    ensureColorPickerStyles();
+    ensureColorPickerStyles(props.root);
     const container = document.createElement('div');
     container.classList.add(COLOR_PICKER_CLASS);
     const swatchContainer = document.createElement('div');
@@ -242,7 +242,7 @@ function createSwitchLabel(text) {
     span.classList.add(COLOR_PICKER_SWITCH_LABEL_CLASS);
     return span;
 }
-function ensureColorPickerStyles() {
+function ensureColorPickerStyles(target) {
     (0, utils_1.injectStyleOnce)(COLOR_PICKER_STYLE_ID, `
 .${COLOR_PICKER_CLASS} {
   width: 240px;
@@ -353,5 +353,5 @@ function ensureColorPickerStyles() {
 .${COLOR_PICKER_SWITCH_CLASS}[data-format="rgba"] .${COLOR_PICKER_SWITCH_LABEL_CLASS}:last-child {
   color: #ffffff;
 }
-`);
+`, target);
 }

package/lib/editor/plugins/components/popover.d.ts

@@ -3,7 +3,7 @@ export type PopoverPlacementPreference = PopoverPlacement | PopoverPlacement[];
 export interface PopoverProps {
     content: HTMLElement | string | (() => HTMLElement | string);
     target?: HTMLElement;
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: OverlayRoot | (() => OverlayRoot);
     placement?: PopoverPlacementPreference;
     padding?: number | string;
     open?: boolean;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     mouseLeaveDelay?: number;
     offset?: number;
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 export interface PopoverHandle {
     setOpen: (open: boolean) => void;
     toggle: () => void;
@@ -21,3 +22,4 @@ export interface PopoverHandle {
     destroy: () => void;
 }
 export declare function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle;
+export {};

package/lib/editor/plugins/components/popover.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = Popover;
+const utils_1 = require("../../utils");
 const constants_1 = require("../../../constants");
-const utils_1 = require("../../../utils");
+const utils_2 = require("../../../utils");
 const POPOVER_CLASS = 'infographic-edit-popover';
 const POPOVER_CONTENT_CLASS = `${POPOVER_CLASS}__content`;
 const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;
 const POPOVER_STYLE_ID = 'infographic-edit-popover-style';
 function Popover(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    ensurePopoverStyle();
     const placement = (_a = props.placement) !== null && _a !== void 0 ? _a : 'top';
     const closeOnOutsideClick = (_b = props.closeOnOutsideClick) !== null && _b !== void 0 ? _b : true;
     const triggerActions = Array.isArray(props.trigger)
@@ -31,11 +31,11 @@ function Popover(props) {
         const next = typeof props.getContainer === 'function'
             ? props.getContainer()
             : props.getContainer;
-        return next !== null && next !== void 0 ? next : document.body;
+        return next !== null && next !== void 0 ? next : (0, utils_1.getOverlayContainer)(trigger);
     };
     const content = document.createElement('div');
     content.classList.add(POPOVER_CONTENT_CLASS);
-    (0, utils_1.setElementRole)(content, constants_1.COMPONENT_ROLE);
+    (0, utils_2.setElementRole)(content, constants_1.COMPONENT_ROLE);
     content.dataset.placement = Array.isArray(placement)
         ? placement[0]
         : placement;
@@ -44,7 +44,18 @@ function Popover(props) {
     content.style.setProperty('--popover-arrow-size', `${arrowSize}px`);
     content.style.setProperty('--popover-arrow-inner-size', `${arrowInnerSize}px`);
     const contentContainer = getContentContainer();
+    ensurePopoverStyle(contentContainer);
     const isPortal = contentContainer !== container;
+    const getPortalOffsetParent = () => {
+        const offsetParent = content.offsetParent;
+        if (offsetParent)
+            return offsetParent;
+        if (contentContainer instanceof ShadowRoot)
+            return contentContainer.host;
+        if (contentContainer instanceof HTMLElement)
+            return contentContainer;
+        return document.documentElement;
+    };
     const arrow = document.createElement('div');
     arrow.classList.add(POPOVER_ARROW_CLASS);
     content.appendChild(arrow);
@@ -122,8 +133,17 @@ function Popover(props) {
         if (!isPortal)
             return;
         ({ left, top } = position);
-        content.style.left = `${left}px`;
-        content.style.top = `${top}px`;
+        const offsetParent = getPortalOffsetParent();
+        if (offsetParent === document.body ||
+            offsetParent === document.documentElement) {
+            content.style.left = `${left}px`;
+            content.style.top = `${top}px`;
+        }
+        else {
+            const parentRect = offsetParent.getBoundingClientRect();
+            content.style.left = `${left - parentRect.left + offsetParent.scrollLeft}px`;
+            content.style.top = `${top - parentRect.top + offsetParent.scrollTop}px`;
+        }
         content.style.right = 'auto';
         content.style.bottom = 'auto';
         content.style.transform = 'translate(0, 0)';
@@ -167,9 +187,9 @@ function Popover(props) {
     };
     const toggle = () => setOpen(!open);
     const handleOutsideClick = (event) => {
-        const targetNode = event.target;
-        if (!container.contains(targetNode) &&
-            (isPortal ? !content.contains(targetNode) : true)) {
+        const insideTrigger = (0, utils_1.eventPathContains)(event, container);
+        const insideContent = (0, utils_1.eventPathContains)(event, content);
+        if (!insideTrigger && !insideContent) {
             setOpen(false);
         }
     };
@@ -237,8 +257,8 @@ function Popover(props) {
     };
     return Object.assign(container, api);
 }
-function ensurePopoverStyle() {
-    (0, utils_1.injectStyleOnce)(POPOVER_STYLE_ID, `
+function ensurePopoverStyle(target) {
+    (0, utils_2.injectStyleOnce)(POPOVER_STYLE_ID, `
 .${POPOVER_CLASS} {
   position: relative;
   display: inline-flex;
@@ -380,5 +400,5 @@ function ensurePopoverStyle() {
 .${POPOVER_CONTENT_CLASS}[data-placement="right"][data-open="true"] {
   transform: translate(0, -50%);
 }
-`);
+`, target);
 }

package/lib/editor/plugins/edit-bar/edit-bar.d.ts

@@ -4,8 +4,9 @@ import { Plugin } from '../base';
 export interface EditBarOptions {
     style?: Partial<CSSStyleDeclaration>;
     className?: string;
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: OverlayRoot | (() => OverlayRoot);
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 type EditItem = HTMLElement;
 export declare class EditBar extends Plugin implements IPlugin {
     private options?;
@@ -27,6 +28,7 @@ export declare class EditBar extends Plugin implements IPlugin {
     protected getGeometryEditItems(_selection: Selection): EditItem[];
     protected getGeometryCollectionEditItems(selection: Selection): EditItem[];
     protected getElementCollectionEditItems(selection: Selection): EditItem[];
+    private resolveOverlayRoot;
     private placeEditBar;
 }
 export {};

package/lib/editor/plugins/edit-bar/edit-bar.js

@@ -4,6 +4,7 @@ exports.EditBar = void 0;
 const constants_1 = require("../../../constants");
 const jsx_1 = require("../../../jsx");
 const utils_1 = require("../../../utils");
+const utils_2 = require("../../utils");
 const base_1 = require("../base");
 const edit_items_1 = require("./edit-items");
 class EditBar extends base_1.Plugin {
@@ -112,29 +113,31 @@ class EditBar extends base_1.Plugin {
         }
         (0, utils_1.setElementRole)(container, constants_1.COMPONENT_ROLE);
         this.container = container;
-        const { getContainer } = this.options || {};
-        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
-        const containerParent = resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : document.body;
+        const containerParent = this.resolveOverlayRoot();
         containerParent === null || containerParent === void 0 ? void 0 : containerParent.appendChild(container);
         return container;
     }
     getTextEditItems(text) {
         const { attributes = {} } = (0, utils_1.getTextElementProps)(text);
-        return [edit_items_1.FontColor, edit_items_1.FontSize, edit_items_1.FontAlign, edit_items_1.FontFamily].map((item) => item([text], attributes, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [edit_items_1.FontColor, edit_items_1.FontSize, edit_items_1.FontAlign, edit_items_1.FontFamily].map((item) => item([text], attributes, this.commander, { root }));
     }
     getTextCollectionEditItems(selection) {
         const attrs = (0, utils_1.getCommonAttrs)(selection.map((text) => (0, utils_1.getTextElementProps)(text).attributes || {}));
-        const items = [edit_items_1.FontColor, edit_items_1.FontSize, edit_items_1.FontAlign, edit_items_1.FontFamily].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        const items = [edit_items_1.FontColor, edit_items_1.FontSize, edit_items_1.FontAlign, edit_items_1.FontFamily].map((item) => item(selection, attrs, this.commander, { root }));
         const commonItems = this.getElementCollectionEditItems(selection);
         return [...items, ...commonItems];
     }
     getIconEditItems(selection) {
         const attrs = (0, utils_1.getIconAttrs)(selection[0]);
-        return [edit_items_1.IconColor].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [edit_items_1.IconColor].map((item) => item(selection, attrs, this.commander, { root }));
     }
     getIconCollectionEditItems(selection) {
         const attrs = (0, utils_1.getCommonAttrs)(selection.map((icon) => (0, utils_1.getIconAttrs)(icon)));
-        return [edit_items_1.IconColor].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [edit_items_1.IconColor].map((item) => item(selection, attrs, this.commander, { root }));
     }
     getGeometryEditItems(_selection) {
         return [];
@@ -146,12 +149,19 @@ class EditBar extends base_1.Plugin {
     getElementCollectionEditItems(selection) {
         if (selection.length <= 1)
             return [];
+        const root = this.resolveOverlayRoot();
         return [
             (0, edit_items_1.ElementAlign)(selection, {}, this.commander, {
                 enableDistribution: selection.length > 2,
+                root,
             }),
         ];
     }
+    resolveOverlayRoot() {
+        const { getContainer } = this.options || {};
+        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
+        return resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : (0, utils_2.getOverlayContainer)(this.editor.getDocument());
+    }
     placeEditBar(container, selection) {
         var _a;
         if (selection.length === 0)

package/lib/editor/plugins/edit-bar/edit-items/align-elements.js

@@ -32,18 +32,19 @@ const ALIGN_OPTIONS = [
 ];
 const ElementAlign = (selection, _attrs, commander, options) => {
     var _a;
-    (0, utils_1.injectStyleOnce)(GRID_STYLE_ID, GRID_STYLES);
+    (0, utils_1.injectStyleOnce)(GRID_STYLE_ID, GRID_STYLES, options === null || options === void 0 ? void 0 : options.root);
     const enableDistribution = (_a = options === null || options === void 0 ? void 0 : options.enableDistribution) !== null && _a !== void 0 ? _a : true;
-    const content = createAlignContent((action) => alignSelection(selection, action, commander), enableDistribution);
+    const content = createAlignContent((action) => alignSelection(selection, action, commander), enableDistribution, options === null || options === void 0 ? void 0 : options.root);
     return (0, components_1.Popover)({
-        target: (0, components_1.IconButton)({ icon: components_1.ELEMENT_ICONS.align }),
+        target: (0, components_1.IconButton)({ icon: components_1.ELEMENT_ICONS.align, root: options === null || options === void 0 ? void 0 : options.root }),
         content,
+        getContainer: options === null || options === void 0 ? void 0 : options.root,
         placement: 'top',
         offset: 12,
     });
 };
 exports.ElementAlign = ElementAlign;
-function createAlignContent(onSelect, enableDistribution) {
+function createAlignContent(onSelect, enableDistribution, root) {
     const content = document.createElement('div');
     content.classList.add(GRID_CLASS);
     if (!enableDistribution)
@@ -53,6 +54,7 @@ function createAlignContent(onSelect, enableDistribution) {
         : ALIGN_OPTIONS.filter(({ action }) => action !== 'H_DISTRIBUTE' && action !== 'V_DISTRIBUTE');
     visibleOptions.forEach(({ icon, action }) => {
         const button = (0, components_1.IconButton)({
+            root,
             icon,
             onClick: () => onSelect(action),
         });