@react-email/editor 0.0.0-experimental.4 → 0.0.0-experimental.41

package/dist/styles-_TMw3YxC.mjs

@@ -0,0 +1,194 @@
+//#region src/utils/styles.ts
+const WHITE_SPACE_REGEX = /\s+/;
+const BORDER_WIDTH_TO_STYLE = {
+	borderWidth: "borderStyle",
+	borderTopWidth: "borderTopStyle",
+	borderRightWidth: "borderRightStyle",
+	borderBottomWidth: "borderBottomStyle",
+	borderLeftWidth: "borderLeftStyle"
+};
+const inlineCssToJs = (inlineStyle, options = {}) => {
+	const styleObject = {};
+	if (!inlineStyle || inlineStyle === "" || typeof inlineStyle === "object") return styleObject;
+	inlineStyle.split(";").forEach((style) => {
+		if (style.trim()) {
+			const [key, value] = style.split(":");
+			const valueTrimmed = value?.trim();
+			if (!valueTrimmed) return;
+			const formattedKey = key.trim().replace(/-\w/g, (match) => match[1].toUpperCase());
+			styleObject[formattedKey] = options?.removeUnit ? valueTrimmed.replace(/px|%/g, "") : valueTrimmed;
+		}
+	});
+	return styleObject;
+};
+/**
+* Expands CSS shorthand properties (margin, padding) into their longhand equivalents.
+* This prevents shorthand properties from overriding specific longhand properties in email clients.
+*
+* @param styles - Style object that may contain shorthand properties
+* @returns New style object with shorthand properties expanded to longhand
+*
+* @example
+* expandShorthandProperties({ margin: '0', paddingTop: '10px' })
+* // Returns: { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '0', paddingTop: '10px' }
+*/
+function expandShorthandProperties(styles) {
+	if (!styles || typeof styles !== "object") return {};
+	const expanded = {};
+	for (const key in styles) {
+		const value = styles[key];
+		if (value === void 0 || value === null || value === "") continue;
+		switch (key) {
+			case "margin": {
+				const values = parseShorthandValue(value);
+				expanded.marginTop = values.top;
+				expanded.marginRight = values.right;
+				expanded.marginBottom = values.bottom;
+				expanded.marginLeft = values.left;
+				break;
+			}
+			case "padding": {
+				const values = parseShorthandValue(value);
+				expanded.paddingTop = values.top;
+				expanded.paddingRight = values.right;
+				expanded.paddingBottom = values.bottom;
+				expanded.paddingLeft = values.left;
+				break;
+			}
+			case "border": {
+				const values = convertBorderValue(value);
+				expanded.borderStyle = values.style;
+				expanded.borderWidth = values.width;
+				expanded.borderColor = values.color;
+				break;
+			}
+			case "borderTopLeftRadius":
+			case "borderTopRightRadius":
+			case "borderBottomLeftRadius":
+			case "borderBottomRightRadius":
+				expanded[key] = value;
+				if (styles.borderTopLeftRadius && styles.borderTopRightRadius && styles.borderBottomLeftRadius && styles.borderBottomRightRadius) {
+					const values = [
+						styles.borderTopLeftRadius,
+						styles.borderTopRightRadius,
+						styles.borderBottomLeftRadius,
+						styles.borderBottomRightRadius
+					];
+					if (new Set(values).size === 1) expanded.borderRadius = values[0];
+				}
+				break;
+			default: expanded[key] = value;
+		}
+	}
+	return expanded;
+}
+/**
+* Parses CSS shorthand value (1-4 values) into individual side values.
+* Follows CSS specification for shorthand property value parsing.
+*
+* @param value - Shorthand value string (e.g., '0', '10px 20px', '5px 10px 15px 20px')
+* @returns Object with top, right, bottom, left values
+*/
+function parseShorthandValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	const len = parts.length;
+	if (len === 1) return {
+		top: parts[0],
+		right: parts[0],
+		bottom: parts[0],
+		left: parts[0]
+	};
+	if (len === 2) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[0],
+		left: parts[1]
+	};
+	if (len === 3) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[1]
+	};
+	if (len === 4) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[3]
+	};
+	return {
+		top: stringValue,
+		right: stringValue,
+		bottom: stringValue,
+		left: stringValue
+	};
+}
+function convertBorderValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	switch (parts.length) {
+		case 1: return {
+			style: "solid",
+			width: parts[0],
+			color: "black"
+		};
+		case 2: return {
+			style: parts[1],
+			width: parts[0],
+			color: "black"
+		};
+		case 3: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		case 4: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		default: return {
+			style: "solid",
+			width: stringValue,
+			color: "black"
+		};
+	}
+}
+/**
+* When a border-width is present but border-style is missing, browsers default
+* to `none` and the border is invisible. This adds `solid` as a sensible
+* fallback so borders show up immediately after setting a width.
+*/
+function ensureBorderStyleFallback(styles) {
+	for (const [widthKey, styleKey] of Object.entries(BORDER_WIDTH_TO_STYLE)) {
+		const widthValue = styles[widthKey];
+		if (!widthValue || widthValue === "0" || widthValue === "0px") continue;
+		if (!styles[styleKey]) {
+			if (styleKey !== "borderStyle" && styles.borderStyle) continue;
+			styles[styleKey] = "solid";
+		}
+	}
+	return styles;
+}
+/**
+* Resolves conflicts between reset styles and inline styles by expanding
+* shorthand properties (margin, padding) to longhand before merging.
+* This prevents shorthand properties from overriding specific longhand properties.
+*
+* @param resetStyles - Base reset styles that may contain shorthand properties
+* @param inlineStyles - Inline styles that should override reset styles
+* @returns Merged styles with inline styles taking precedence
+*/
+function resolveConflictingStyles(resetStyles, inlineStyles) {
+	const expandedResetStyles = expandShorthandProperties(resetStyles);
+	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
+	return {
+		...expandedResetStyles,
+		...expandedInlineStyles
+	};
+}
+
+//#endregion
+export { inlineCssToJs as n, resolveConflictingStyles as r, ensureBorderStyleFallback as t };
+//# sourceMappingURL=styles-_TMw3YxC.mjs.map

package/dist/styles-_TMw3YxC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-_TMw3YxC.mjs","names":[],"sources":["../src/utils/styles.ts"],"sourcesContent":["import type { CssJs } from './types';\n\nconst WHITE_SPACE_REGEX = /\\s+/;\n\nconst BORDER_WIDTH_TO_STYLE: Record<string, string> = {\n  borderWidth: 'borderStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderRightWidth: 'borderRightStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderLeftWidth: 'borderLeftStyle',\n};\n\nexport const jsToInlineCss = (styleObject: { [key: string]: any }) => {\n  const parts: string[] = [];\n\n  for (const key in styleObject) {\n    const value = styleObject[key];\n    if (value !== 0 && value !== undefined && value !== null && value !== '') {\n      const KEBAB_CASE_REGEX = /[A-Z]/g;\n      const formattedKey = key.replace(\n        KEBAB_CASE_REGEX,\n        (match) => `-${match.toLowerCase()}`,\n      );\n      parts.push(`${formattedKey}:${value}`);\n    }\n  }\n\n  return parts.join(';') + (parts.length ? ';' : '');\n};\n\nexport const inlineCssToJs = (\n  inlineStyle: string,\n  options: { removeUnit?: boolean } = {},\n) => {\n  const styleObject: { [key: string]: string } = {};\n\n  if (!inlineStyle || inlineStyle === '' || typeof inlineStyle === 'object') {\n    return styleObject;\n  }\n\n  inlineStyle.split(';').forEach((style: string) => {\n    if (style.trim()) {\n      const [key, value] = style.split(':');\n      const valueTrimmed = value?.trim();\n\n      if (!valueTrimmed) {\n        return;\n      }\n\n      const formattedKey = key\n        .trim()\n        .replace(/-\\w/g, (match) => match[1].toUpperCase());\n\n      const UNIT_REGEX = /px|%/g;\n      const sanitizedValue = options?.removeUnit\n        ? valueTrimmed.replace(UNIT_REGEX, '')\n        : valueTrimmed;\n\n      styleObject[formattedKey] = sanitizedValue;\n    }\n  });\n\n  return styleObject;\n};\n\n/**\n * Expands CSS shorthand properties (margin, padding) into their longhand equivalents.\n * This prevents shorthand properties from overriding specific longhand properties in email clients.\n *\n * @param styles - Style object that may contain shorthand properties\n * @returns New style object with shorthand properties expanded to longhand\n *\n * @example\n * expandShorthandProperties({ margin: '0', paddingTop: '10px' })\n * // Returns: { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '0', paddingTop: '10px' }\n */\nexport function expandShorthandProperties(\n  styles: Record<string, string>,\n): Record<string, string> {\n  if (!styles || typeof styles !== 'object') {\n    return {};\n  }\n\n  const expanded: Record<string, any> = {};\n\n  for (const key in styles) {\n    const value = styles[key];\n    if (value === undefined || value === null || value === '') {\n      continue;\n    }\n\n    switch (key) {\n      case 'margin': {\n        const values = parseShorthandValue(value);\n        expanded.marginTop = values.top;\n        expanded.marginRight = values.right;\n        expanded.marginBottom = values.bottom;\n        expanded.marginLeft = values.left;\n        break;\n      }\n      case 'padding': {\n        const values = parseShorthandValue(value);\n        expanded.paddingTop = values.top;\n        expanded.paddingRight = values.right;\n        expanded.paddingBottom = values.bottom;\n        expanded.paddingLeft = values.left;\n        break;\n      }\n      case 'border': {\n        const values = convertBorderValue(value);\n        expanded.borderStyle = values.style;\n        expanded.borderWidth = values.width;\n        expanded.borderColor = values.color;\n        break;\n      }\n      case 'borderTopLeftRadius':\n      case 'borderTopRightRadius':\n      case 'borderBottomLeftRadius':\n      case 'borderBottomRightRadius': {\n        // Always preserve the longhand property\n        expanded[key] = value;\n\n        // When all four corners are present and identical, also add the shorthand\n        if (\n          styles.borderTopLeftRadius &&\n          styles.borderTopRightRadius &&\n          styles.borderBottomLeftRadius &&\n          styles.borderBottomRightRadius\n        ) {\n          const values = [\n            styles.borderTopLeftRadius,\n            styles.borderTopRightRadius,\n            styles.borderBottomLeftRadius,\n            styles.borderBottomRightRadius,\n          ];\n\n          if (new Set(values).size === 1) {\n            expanded.borderRadius = values[0];\n          }\n        }\n\n        break;\n      }\n\n      default: {\n        // Keep all other properties as-is\n        expanded[key] = value;\n      }\n    }\n  }\n\n  return expanded;\n}\n\n/**\n * Parses CSS shorthand value (1-4 values) into individual side values.\n * Follows CSS specification for shorthand property value parsing.\n *\n * @param value - Shorthand value string (e.g., '0', '10px 20px', '5px 10px 15px 20px')\n * @returns Object with top, right, bottom, left values\n */\nfunction parseShorthandValue(value: string | number): {\n  top: string;\n  right: string;\n  bottom: string;\n  left: string;\n} {\n  const stringValue = String(value).trim();\n  const parts = stringValue.split(WHITE_SPACE_REGEX);\n  const len = parts.length;\n\n  if (len === 1) {\n    return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };\n  }\n  if (len === 2) {\n    return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };\n  }\n  if (len === 3) {\n    return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] };\n  }\n  if (len === 4) {\n    return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };\n  }\n\n  return {\n    top: stringValue,\n    right: stringValue,\n    bottom: stringValue,\n    left: stringValue,\n  };\n}\n\nfunction convertBorderValue(value: string | number): {\n  style: string;\n  width: string;\n  color: string;\n} {\n  const stringValue = String(value).trim();\n  const parts = stringValue.split(WHITE_SPACE_REGEX);\n\n  switch (parts.length) {\n    case 1:\n      // border: 1px → all sides\n      return {\n        style: 'solid',\n        width: parts[0],\n        color: 'black',\n      };\n    case 2:\n      // border: 1px solid → top/bottom, left/right\n      return {\n        style: parts[1],\n        width: parts[0],\n        color: 'black',\n      };\n    case 3:\n      // border: 1px solid #000 → top, left/right, bottom\n      return {\n        style: parts[1],\n        width: parts[0],\n        color: parts[2],\n      };\n    case 4:\n      // border: 1px solid #000 #fff → top, right, bottom, left\n      return {\n        style: parts[1],\n        width: parts[0],\n        color: parts[2],\n      };\n    default:\n      // Invalid format, return the original value for all sides\n      return {\n        style: 'solid',\n        width: stringValue,\n        color: 'black',\n      };\n  }\n}\n\n/**\n * When a border-width is present but border-style is missing, browsers default\n * to `none` and the border is invisible. This adds `solid` as a sensible\n * fallback so borders show up immediately after setting a width.\n */\nexport function ensureBorderStyleFallback(\n  styles: Record<string, string | number>,\n): Record<string, string | number> {\n  for (const [widthKey, styleKey] of Object.entries(BORDER_WIDTH_TO_STYLE)) {\n    const widthValue = styles[widthKey];\n    if (!widthValue || widthValue === '0' || widthValue === '0px') {\n      continue;\n    }\n    if (!styles[styleKey]) {\n      // Keep shorthand borderStyle authoritative for each side when present.\n      if (styleKey !== 'borderStyle' && styles.borderStyle) {\n        continue;\n      }\n      styles[styleKey] = 'solid';\n    }\n  }\n  return styles;\n}\n\n/**\n * Resolves conflicts between reset styles and inline styles by expanding\n * shorthand properties (margin, padding) to longhand before merging.\n * This prevents shorthand properties from overriding specific longhand properties.\n *\n * @param resetStyles - Base reset styles that may contain shorthand properties\n * @param inlineStyles - Inline styles that should override reset styles\n * @returns Merged styles with inline styles taking precedence\n */\nexport function resolveConflictingStyles(\n  resetStyles: CssJs['reset'],\n  inlineStyles: Record<string, string>,\n) {\n  const expandedResetStyles = expandShorthandProperties(\n    resetStyles as Record<string, string>,\n  );\n  const expandedInlineStyles = expandShorthandProperties(inlineStyles);\n\n  return {\n    ...expandedResetStyles,\n    ...expandedInlineStyles,\n  };\n}\n"],"mappings":"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"}

package/dist/ui/bubble-menu/bubble-menu.css

@@ -0,0 +1,285 @@
+/* Minimal functional styles for BubbleMenu compound components.
+ * This file handles layout and positioning only - no visual design.
+ * Import this optionally: import '@react-email/editor/styles/bubble-menu.css';
+ */
+
+[data-re-bubble-menu] {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+[data-re-bubble-menu-group] {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0 0.125rem;
+  border: none;
+  margin: 0;
+  min-width: 0;
+}
+
+[data-re-bubble-menu-separator] {
+  align-self: stretch;
+  width: 1px;
+  margin: 0.25rem 0;
+}
+
+[data-re-bubble-menu-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.375rem;
+}
+
+[data-re-bubble-menu-item] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-re-node-selector] {
+  position: relative;
+}
+
+[data-re-node-selector-trigger] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.5rem;
+}
+
+[data-re-node-selector-trigger] svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  opacity: 0.5;
+}
+
+[data-re-node-selector-content] {
+  display: flex;
+  flex-direction: column;
+  min-width: 10rem;
+}
+
+[data-re-node-selector-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  width: 100%;
+  text-align: left;
+}
+
+[data-re-node-selector-item] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-re-link-selector] {
+  display: flex;
+  position: relative;
+}
+
+[data-re-link-selector-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.375rem;
+}
+
+[data-re-link-selector-trigger] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-re-link-selector-form] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  width: max-content;
+  min-width: 16rem;
+  padding: 0.25rem;
+}
+
+[data-re-link-selector-input] {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.8125rem;
+  padding: 0.25rem;
+  background: transparent;
+}
+
+[data-re-link-selector-apply],
+[data-re-link-selector-unlink] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.25rem;
+}
+
+[data-re-link-selector-apply] svg,
+[data-re-link-selector-unlink] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Button bubble menu */
+
+[data-re-btn-bm-toolbar] {
+  display: flex;
+  align-items: center;
+}
+
+[data-re-btn-bm-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.375rem;
+}
+
+[data-re-btn-bm-item] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-re-btn-bm-form] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 16rem;
+  padding: 0.25rem;
+}
+
+[data-re-btn-bm-input] {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.8125rem;
+  padding: 0.25rem;
+  background: transparent;
+}
+
+[data-re-btn-bm-apply],
+[data-re-btn-bm-unlink] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.25rem;
+}
+
+[data-re-btn-bm-apply] svg,
+[data-re-btn-bm-unlink] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Link bubble menu */
+
+[data-re-link-bm-toolbar] {
+  display: flex;
+  align-items: center;
+}
+
+[data-re-link-bm-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.375rem;
+}
+
+[data-re-link-bm-item] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+a[data-re-link-bm-item] {
+  text-decoration: none;
+  color: inherit;
+}
+
+[data-re-link-bm-form] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 16rem;
+  padding: 0.25rem;
+}
+
+[data-re-link-bm-input] {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.8125rem;
+  padding: 0.25rem;
+  background: transparent;
+}
+
+[data-re-link-bm-apply],
+[data-re-link-bm-unlink] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.25rem;
+}
+
+[data-re-link-bm-apply] svg,
+[data-re-link-bm-unlink] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Image bubble menu */
+
+[data-re-img-bm-toolbar] {
+  display: flex;
+  align-items: center;
+}
+
+[data-re-img-bm-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0.5rem;
+}
+
+[data-re-img-bm-item] svg {
+  width: 1rem;
+  height: 1rem;
+}

package/dist/ui/index.cjs

@@ -0,0 +1,147 @@
+const require_event_bus = require('../event-bus-fb8U7hrl.cjs');
+const require_root = require('../root-Jq1R3tkX.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/ui/bubble-menu/separator.tsx
+function BubbleMenuSeparator({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+		className,
+		"data-re-bubble-menu-separator": ""
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/index.ts
+const BubbleMenu = {
+	Root: require_root.BubbleMenuRoot,
+	ItemGroup: require_root.BubbleMenuItemGroup,
+	Separator: BubbleMenuSeparator,
+	Item: require_root.BubbleMenuItem,
+	Bold: require_root.BubbleMenuBold,
+	Italic: require_root.BubbleMenuItalic,
+	Underline: require_root.BubbleMenuUnderline,
+	Strike: require_root.BubbleMenuStrike,
+	Code: require_root.BubbleMenuCode,
+	Uppercase: require_root.BubbleMenuUppercase,
+	AlignLeft: require_root.BubbleMenuAlignLeft,
+	AlignCenter: require_root.BubbleMenuAlignCenter,
+	AlignRight: require_root.BubbleMenuAlignRight,
+	NodeSelector: Object.assign(require_root.BubbleMenuNodeSelector, {
+		Root: require_root.NodeSelectorRoot,
+		Trigger: require_root.NodeSelectorTrigger,
+		Content: require_root.NodeSelectorContent
+	}),
+	LinkSelector: require_root.BubbleMenuLinkSelector,
+	Default: require_root.BubbleMenuDefault,
+	ButtonToolbar: require_root.BubbleMenuButtonToolbar,
+	ButtonEditLink: require_root.BubbleMenuButtonEditLink,
+	ButtonUnlink: require_root.BubbleMenuButtonUnlink,
+	ButtonForm: require_root.BubbleMenuButtonForm,
+	ButtonDefault: require_root.BubbleMenuButtonDefault,
+	LinkToolbar: require_root.BubbleMenuLinkToolbar,
+	LinkEditLink: require_root.BubbleMenuLinkEditLink,
+	LinkUnlink: require_root.BubbleMenuLinkUnlink,
+	LinkOpenLink: require_root.BubbleMenuLinkOpenLink,
+	LinkForm: require_root.BubbleMenuLinkForm,
+	LinkDefault: require_root.BubbleMenuLinkDefault,
+	ImageToolbar: require_root.BubbleMenuImageToolbar,
+	ImageEditLink: require_root.BubbleMenuImageEditLink,
+	ImageDefault: require_root.BubbleMenuImageDefault
+};
+
+//#endregion
+//#region src/ui/slash-command/index.ts
+const SlashCommand = {
+	Root: require_root.SlashCommandRoot,
+	CommandList: require_root.CommandList
+};
+
+//#endregion
+exports.AlignCenterIcon = require_root.AlignCenterIcon;
+exports.AlignLeftIcon = require_root.AlignLeftIcon;
+exports.AlignRightIcon = require_root.AlignRightIcon;
+exports.BULLET_LIST = require_root.BULLET_LIST;
+exports.BUTTON = require_root.BUTTON;
+exports.BoldIcon = require_root.BoldIcon;
+exports.BubbleMenu = BubbleMenu;
+exports.BubbleMenuAlignCenter = require_root.BubbleMenuAlignCenter;
+exports.BubbleMenuAlignLeft = require_root.BubbleMenuAlignLeft;
+exports.BubbleMenuAlignRight = require_root.BubbleMenuAlignRight;
+exports.BubbleMenuBold = require_root.BubbleMenuBold;
+exports.BubbleMenuButtonDefault = require_root.BubbleMenuButtonDefault;
+exports.BubbleMenuButtonEditLink = require_root.BubbleMenuButtonEditLink;
+exports.BubbleMenuButtonForm = require_root.BubbleMenuButtonForm;
+exports.BubbleMenuButtonToolbar = require_root.BubbleMenuButtonToolbar;
+exports.BubbleMenuButtonUnlink = require_root.BubbleMenuButtonUnlink;
+exports.BubbleMenuCode = require_root.BubbleMenuCode;
+exports.BubbleMenuDefault = require_root.BubbleMenuDefault;
+exports.BubbleMenuImageDefault = require_root.BubbleMenuImageDefault;
+exports.BubbleMenuImageEditLink = require_root.BubbleMenuImageEditLink;
+exports.BubbleMenuImageToolbar = require_root.BubbleMenuImageToolbar;
+exports.BubbleMenuItalic = require_root.BubbleMenuItalic;
+exports.BubbleMenuItem = require_root.BubbleMenuItem;
+exports.BubbleMenuItemGroup = require_root.BubbleMenuItemGroup;
+exports.BubbleMenuLinkDefault = require_root.BubbleMenuLinkDefault;
+exports.BubbleMenuLinkEditLink = require_root.BubbleMenuLinkEditLink;
+exports.BubbleMenuLinkForm = require_root.BubbleMenuLinkForm;
+exports.BubbleMenuLinkOpenLink = require_root.BubbleMenuLinkOpenLink;
+exports.BubbleMenuLinkSelector = require_root.BubbleMenuLinkSelector;
+exports.BubbleMenuLinkToolbar = require_root.BubbleMenuLinkToolbar;
+exports.BubbleMenuLinkUnlink = require_root.BubbleMenuLinkUnlink;
+exports.BubbleMenuNodeSelector = require_root.BubbleMenuNodeSelector;
+exports.BubbleMenuRoot = require_root.BubbleMenuRoot;
+exports.BubbleMenuSeparator = BubbleMenuSeparator;
+exports.BubbleMenuStrike = require_root.BubbleMenuStrike;
+exports.BubbleMenuUnderline = require_root.BubbleMenuUnderline;
+exports.BubbleMenuUppercase = require_root.BubbleMenuUppercase;
+exports.CODE = require_root.CODE;
+exports.CaseUpperIcon = require_root.CaseUpperIcon;
+exports.Check = require_root.Check;
+exports.ChevronDown = require_root.ChevronDown;
+exports.Code = require_root.Code;
+exports.CodeIcon = require_root.CodeIcon;
+exports.Columns2 = require_root.Columns2;
+exports.Columns3 = require_root.Columns3;
+exports.Columns4 = require_root.Columns4;
+exports.CommandList = require_root.CommandList;
+exports.DIVIDER = require_root.DIVIDER;
+exports.ExternalLinkIcon = require_root.ExternalLinkIcon;
+exports.FOUR_COLUMNS = require_root.FOUR_COLUMNS;
+exports.H1 = require_root.H1;
+exports.H2 = require_root.H2;
+exports.H3 = require_root.H3;
+exports.Heading1 = require_root.Heading1;
+exports.Heading2 = require_root.Heading2;
+exports.Heading3 = require_root.Heading3;
+exports.ItalicIcon = require_root.ItalicIcon;
+exports.LinkIcon = require_root.LinkIcon;
+exports.List = require_root.List;
+exports.ListOrdered = require_root.ListOrdered;
+exports.MousePointer = require_root.MousePointer;
+exports.NUMBERED_LIST = require_root.NUMBERED_LIST;
+exports.NodeSelectorContent = require_root.NodeSelectorContent;
+exports.NodeSelectorRoot = require_root.NodeSelectorRoot;
+exports.NodeSelectorTrigger = require_root.NodeSelectorTrigger;
+exports.PencilIcon = require_root.PencilIcon;
+exports.QUOTE = require_root.QUOTE;
+exports.Rows2 = require_root.Rows2;
+exports.SECTION = require_root.SECTION;
+exports.SlashCommand = SlashCommand;
+exports.SplitSquareVertical = require_root.SplitSquareVertical;
+exports.SquareCode = require_root.SquareCode;
+exports.StrikethroughIcon = require_root.StrikethroughIcon;
+exports.TEXT = require_root.TEXT;
+exports.THREE_COLUMNS = require_root.THREE_COLUMNS;
+exports.TWO_COLUMNS = require_root.TWO_COLUMNS;
+exports.Text = require_root.Text;
+exports.TextIcon = require_root.TextIcon;
+exports.TextQuote = require_root.TextQuote;
+exports.UnderlineIcon = require_root.UnderlineIcon;
+exports.UnlinkIcon = require_root.UnlinkIcon;
+exports.bubbleMenuTriggers = require_root.bubbleMenuTriggers;
+exports.defaultSlashCommands = require_root.defaultSlashCommands;
+exports.filterAndRankItems = require_root.filterAndRankItems;
+exports.isAtMaxColumnsDepth = require_root.isAtMaxColumnsDepth;
+exports.isInsideNode = require_root.isInsideNode;
+exports.scoreItem = require_root.scoreItem;
+exports.useBubbleMenuContext = require_root.useBubbleMenuContext;