@mjml-agent-editor/editor 0.1.17 → 0.3.0

package/dist/index.cjs

@@ -67,9 +67,204 @@ var DEFAULT_LABELS = {
   exportHtml: "Export HTML",
   exportMjml: "Export MJML",
   copied: (kind) => `${kind} copied.`,
+  tabBlocks: "Blocks",
+  tabSettings: "Settings",
+  tabLayers: "Layers",
   searchBlocks: "Search blocks\u2026",
+  noBlocksMatch: "No blocks match.",
+  blockAdded: (block) => `Added: ${block}`,
+  blockCategoryLayout: "Layout",
+  blockCategoryContent: "Content",
+  blockCategorySections: "Sections",
+  blockLabels: {
+    "mj-1-column": "1 column",
+    "mj-2-columns": "2 columns",
+    "mj-3-columns": "3 columns",
+    "mj-text": "Text",
+    "mj-image": "Image",
+    "mj-button": "Button",
+    "mj-divider": "Divider",
+    "mj-spacer": "Spacer",
+    "mj-social-group": "Social links",
+    "mj-navbar": "Navigation"
+  },
+  elementNames: {
+    "mj-wrapper": "Section group",
+    "mj-section": "Section",
+    "mj-column": "Column",
+    "mj-group": "Column group",
+    "mj-text": "Text",
+    "mj-button": "Button",
+    "mj-image": "Image",
+    "mj-divider": "Divider",
+    "mj-spacer": "Spacer",
+    "mj-hero": "Hero",
+    "mj-navbar": "Navigation",
+    "mj-navbar-link": "Navigation link",
+    "mj-social": "Social links",
+    "mj-social-element": "Social link",
+    "mj-raw": "Raw HTML",
+    "mj-table": "Table"
+  },
   expandAll: "Expand all",
   selectAnElement: "Select an element\u2026",
+  settingsEmpty: "Select something in the email to edit it.",
+  emailSettings: "Email settings",
+  loadingEditor: "Loading editor\u2026",
+  commentOnElement: "Comment on element / section",
+  groupContent: "Content",
+  groupLayout: "Layout",
+  groupSpacing: "Spacing",
+  groupStyle: "Style",
+  groupAdvanced: "Advanced",
+  otherAttributes: "Other attributes",
+  removeAttribute: "Remove",
+  resetToDefault: "Reset to default",
+  selectParent: "Select parent",
+  duplicate: "Duplicate",
+  deleteElement: "Delete",
+  multipleSelected: (count) => `${count} elements selected \u2014 select one to edit its settings.`,
+  editEachSide: "Edit each side",
+  increase: "Increase",
+  decrease: "Decrease",
+  changeUnit: (unit) => `Unit: ${unit}. Click to change`,
+  noUnit: "\xD7",
+  sidesVertical: "Top and bottom",
+  sidesHorizontal: "Left and right",
+  sideTop: "Top",
+  sideRight: "Right",
+  sideBottom: "Bottom",
+  sideLeft: "Left",
+  linkTypeProfile: "Your profile",
+  linkTypeShare: "Share this page",
+  allScreenSizes: "Changes apply to every screen size.",
+  columnWidths: "Column widths",
+  columnRatio: (ratio) => `Columns ${ratio}`,
+  socialNetworks: "Networks",
+  addNetwork: "Add network",
+  navbarLinks: "Links",
+  addLink: "Add link",
+  newLinkText: "Link",
+  inspectorLabels: {
+    // Fields
+    contentWidth: "Width",
+    pageBackground: "Page background",
+    "pageBackground.help": "Fills the area around and behind the email.",
+    fullWidth: "Full-width background",
+    "fullWidth.help": "The background reaches the window edges; the content keeps the email width.",
+    padding: "Padding",
+    backgroundColor: "Background",
+    backgroundImage: "Background image",
+    backgroundSize: "Image size",
+    backgroundRepeat: "Repeat image",
+    backgroundPosition: "Position",
+    cornerRadius: "Corners",
+    gap: "Space between sections",
+    border: "Border",
+    alignColumns: "Align columns",
+    "alignColumns.help": "Where the columns sit when they don't fill the row.",
+    reverseColumns: "Reverse column order",
+    "reverseColumns.help": "Swaps the columns on desktop; on phones they still stack in their original order.",
+    verticalAlign: "Vertical",
+    width: "Width",
+    innerBackground: "Inner background",
+    "innerBackground.help": "Fills only the area inside the padding, so it needs padding to show.",
+    innerCornerRadius: "Inner corners",
+    innerBorder: "Inner border",
+    align: "Alignment",
+    font: "Font",
+    fontSize: "Text size",
+    fontWeight: "Weight",
+    textColor: "Text color",
+    lineHeight: "Line height",
+    letterSpacing: "Letter spacing",
+    textTransform: "Capitalization",
+    blockBackground: "Block background",
+    "blockBackground.help": "Fills the whole block, including its padding.",
+    link: "Link",
+    buttonColor: "Button color",
+    buttonPadding: "Button padding",
+    "buttonPadding.help": "Space between the text and the button's edge; this sets the button's size.",
+    spaceAround: "Space around",
+    "spaceAround.help": "Empty space outside the button, between it and what is next to it.",
+    opensIn: "Opens in",
+    tooltip: "Tooltip",
+    rel: "Link relationship",
+    image: "Image",
+    altText: "Alt text",
+    "altText.help": "Read by screen readers and shown when images are blocked.",
+    fluidOnMobile: "Full width on mobile",
+    "fluidOnMobile.help": "On phones the image stretches across the screen, whatever its width here.",
+    lineColor: "Line color",
+    thickness: "Thickness",
+    lineStyle: "Line style",
+    height: "Height",
+    socialMode: "Direction",
+    iconSize: "Icon size",
+    iconSpacing: "Space around each icon",
+    network: "Network",
+    // Brand names are the same in every language and are not keys; these two are words.
+    networkWebsite: "Website",
+    networkCustom: "Custom",
+    customIcon: "Custom icon",
+    iconColor: "Icon color",
+    iconPosition: "Icon side",
+    heroMode: "Sizing",
+    "heroMode.help": "Fixed keeps the height you set; Fit image follows the background image's proportions.",
+    backgroundWidth: "Image width",
+    "backgroundWidth.help": "The background image's real size in pixels, so the hero keeps its proportions.",
+    backgroundHeight: "Image height",
+    fallbackColor: "Fallback color",
+    "fallbackColor.help": "Shown while the image loads, or when images are blocked.",
+    contentPadding: "Content padding",
+    contentBackground: "Content background",
+    hamburger: "Collapse into a menu on mobile",
+    "hamburger.help": "On phones the links fold into a menu button.",
+    menuIconColor: "Menu icon color",
+    menuIconSize: "Menu icon size",
+    menuIconAlign: "Menu icon align",
+    baseUrl: "Link prefix",
+    "baseUrl.help": "Added in front of every link in the bar, full addresses included, so links then give only the path.",
+    // Options
+    alignLeft: "Left",
+    alignCenter: "Center",
+    alignRight: "Right",
+    alignJustify: "Justify",
+    alignTop: "Top",
+    alignMiddle: "Middle",
+    alignBottom: "Bottom",
+    weightRegular: "Regular",
+    weightMedium: "Medium",
+    weightSemibold: "Semibold",
+    weightBold: "Bold",
+    caseNone: "As typed",
+    caseUpper: "UPPERCASE",
+    caseLower: "lowercase",
+    caseCapitalize: "Capitalize Each Word",
+    targetNewTab: "New tab",
+    targetSameTab: "Same tab",
+    sizeCover: "Fill",
+    sizeContain: "Fit",
+    sizeAuto: "Original",
+    repeatTile: "Tile",
+    repeatOnce: "Once",
+    positionTopLeft: "Top left",
+    positionTopCenter: "Top",
+    positionTopRight: "Top right",
+    positionCenterLeft: "Left",
+    positionCenter: "Center",
+    positionCenterRight: "Right",
+    positionBottomLeft: "Bottom left",
+    positionBottomCenter: "Bottom",
+    positionBottomRight: "Bottom right",
+    lineSolid: "Solid",
+    lineDashed: "Dashed",
+    lineDotted: "Dotted",
+    modeHorizontal: "In a row",
+    modeVertical: "Stacked",
+    heroFixed: "Fixed",
+    heroFluid: "Fit image"
+  },
   attributes: "Attributes",
   style: "Style",
   rteFont: "Font",
@@ -136,7 +331,10 @@ function mergeLabels(overrides) {
   return {
     ...DEFAULT_LABELS,
     ...overrides,
-    toolLabels: { ...DEFAULT_LABELS.toolLabels, ...overrides.toolLabels }
+    toolLabels: { ...DEFAULT_LABELS.toolLabels, ...overrides.toolLabels },
+    blockLabels: { ...DEFAULT_LABELS.blockLabels, ...overrides.blockLabels },
+    elementNames: { ...DEFAULT_LABELS.elementNames, ...overrides.elementNames },
+    inspectorLabels: { ...DEFAULT_LABELS.inspectorLabels, ...overrides.inspectorLabels }
   };
 }
 
@@ -934,6 +1132,7 @@ function EditorHeader({
                 {
                   title: labels.previewFrameTitle,
                   srcDoc: preview,
+                  sandbox: "allow-popups allow-popups-to-escape-sandbox",
                   className: cn(
                     "mx-auto block h-full min-h-[80vh] rounded-md border bg-white shadow-sm",
                     state.device === "Mobile" ? "w-[375px]" : "w-full max-w-[720px]"