@wix/ricos-editor-elements 11.20.6 → 11.21.1

package/dist/lib/Viewer.js

@@ -27,9 +27,9 @@ import "@wix/ricos/css/plugin-video-viewer.global.css";
 import "@wix/ricos/css/plugin-audio-viewer.global.css";
 import "@wix/ricos/css/plugin-toc-viewer.global.css";
 import React, { useState } from "react";
-import { CSS_PROPERTIES, DISPLAY_GROUPS, ELEMENTS, DATA } from "@wix/react-component-schema";
+import { CSS_PROPERTIES, DISPLAY_GROUPS, ELEMENTS, DATA, ACTIONS, LAYOUT } from "@wix/react-component-schema";
 import './Viewer.css';const customPropKey = (tag, cssVar) => `editor-ricos-${tag}-${cssVar}`;
-const CONTENT_VIEWER_SELECTOR = '[data-id="content-viewer"]';
+const elementClassName = (tag) => `editor-ricos-${tag}`;
 const TEXT_LEVELS = [
   { tag: "h1", displayName: "Heading 1", siteFont: "--wst-heading-1-font" },
   { tag: "h2", displayName: "Heading 2", siteFont: "--wst-heading-2-font" },
@@ -83,14 +83,14 @@ const fontTextGroup = (tag, displayName) => ({
 const fontElement = (tag, displayName) => ({
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   inlineElement: {
-    selector: CONTENT_VIEWER_SELECTOR,
+    selector: `.${elementClassName(tag)}`,
     displayName,
     behaviors: { selectable: false },
     cssCustomProperties: fontCssCustomProperties(tag),
     displayGroups: { [tag]: fontTextGroup(tag, displayName) }
   }
 });
-Object.fromEntries(
+const textElements = Object.fromEntries(
   TEXT_LEVELS.map(({ tag, displayName }) => [tag, fontElement(tag, displayName)])
 );
 ({
@@ -313,13 +313,16 @@ const buttonDisplayGroups = () => ({
     cssCustomProperties: buttonColorGroup("hover")
   }
 });
-({
+const buttonElement = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   inlineElement: {
+    selector: `.${elementClassName(BUTTON_TAG)}`,
+    displayName: "Button",
+    behaviors: { selectable: false },
     cssCustomProperties: buttonCssCustomProperties(),
     displayGroups: buttonDisplayGroups()
   }
-});
+};
 const viewerButtonStyle = Object.fromEntries(
   BUTTON_PROPS.map(({ varKey, themeField, defaultValue }) => [
     themeField,
@@ -356,12 +359,15 @@ const imageCssCustomProperties = () => Object.fromEntries(
     { cssPropertyType: type, displayName, ...defaultValue ? { defaultValue } : {} }
   ])
 );
-({
+const imageElement = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   inlineElement: {
+    selector: `.${elementClassName(IMAGE_TAG)}`,
+    displayName: "Image",
+    behaviors: { selectable: false },
     cssCustomProperties: imageCssCustomProperties()
   }
-});
+};
 const viewerImageStyle = Object.fromEntries(
   IMAGE_PROPS.map(({ varKey, themeField, defaultValue }) => [
     themeField,
@@ -444,7 +450,7 @@ Object.fromEntries(
     }
   ])
 );
-Object.fromEntries(
+const paletteDisplayGroups = Object.fromEntries(
   PALETTE_SECTIONS.map(({ key, displayName }) => [
     key,
     {
@@ -507,6 +513,56 @@ const root = "root__bW8lC";
 const s = {
   root
 };
+const editorElement = {
+  layout: {
+    resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+    contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical
+  },
+  // Per-level typography (one element per h1–h6 / paragraph) plus dedicated
+  // Button and Image elements, so each gets its own labeled panel section.
+  elements: { ...textElements, button: buttonElement, image: imageElement },
+  displayGroups: {
+    // Palette sub-sections (Base / Shades / Accent).
+    ...paletteDisplayGroups,
+    // Settings-panel sections: group the data items so Button and Content
+    // trimming controls sit under their own labeled sections instead of one list.
+    buttonSettings: {
+      groupType: DISPLAY_GROUPS.GROUP_TYPE.data
+    },
+    contentTrimming: {
+      groupType: DISPLAY_GROUPS.GROUP_TYPE.data
+    }
+  },
+  data: {
+    content: {
+      dataType: DATA.DATA_TYPE.ricosDocument
+    }
+  },
+  customActions: {
+    // Action-bar entry for `content`: a `data` action opens an auto panel with just this item,
+    // which in a CMS context renders the ricosDocument binding control (connect, or the bound
+    // field with disconnect). The label stays state-neutral, like native "Edit Text", because
+    // manifest runtime overrides can't change it once content is bound.
+    editContent: {
+      execution: {
+        actionType: ACTIONS.ACTION_TYPE.data
+      }
+    }
+  }
+};
+({
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  }
+});
+const elementClassNames = Object.keys(editorElement.elements ?? {}).map(elementClassName).join(" ");
 const ViewerContent = ({
   id,
   content,
@@ -527,7 +583,7 @@ const ViewerContent = ({
   const { language } = useService(LocaleDefinition);
   const { siteId: metaSiteId } = useService(SiteInfoDefinition);
   const { siteUrl } = useService(UrlDefinition);
-  return /* @__PURE__ */ React.createElement("div", { className: `${s.root} ${className}`, id }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: `${s.root} ${className}`, id }, /* @__PURE__ */ React.createElement("div", { className: elementClassNames }, /* @__PURE__ */ React.createElement(
     ContentTrimmer,
     {
       content,
@@ -590,7 +646,7 @@ const ViewerContent = ({
         ]
       }
     )
-  ));
+  )));
 };
 const Viewer = ({ content, ...props }) => isContentProvided(content) ? /* @__PURE__ */ React.createElement(ViewerContent, { ...props, content }) : (
   // Keep the root so the platform still finds the component node.

package/dist/lib/manifest/button.d.ts

@@ -11,8 +11,8 @@ export declare const buttonSizeData: NonNullable<EditorElement['data']>;
 /**
  * Dedicated (non-selectable) "Button" element so the global button controls get
  * their own labeled panel section instead of sitting on the root Viewer element.
- * Shares the content selector so its vars cascade to the rendered buttons, which
- * read them via `theme.customStyles.button`.
+ * Its selector names the content wrapper, so its vars cascade to the rendered
+ * buttons, which read them via `theme.customStyles.button`.
  */
 export declare const buttonElement: ElementItem;
 /**

package/dist/lib/manifest/shared.d.ts

@@ -5,7 +5,10 @@
  * the viewer reads `--<key>` back via `theme.customStyles` / `theme.colorPalette`. */
 export declare const customPropKey: (tag: string, cssVar: string) => string;
 /**
- * The ricos content wrapper. Inner elements scope their custom properties to it
- * so they cascade to the rendered content.
+ * `editor-ricos-<tag>` — the class an inner element's selector names. `viewer.tsx`
+ * puts every element's class on the wrapper around the ricos content, so each
+ * element's custom properties cascade to it. Each element needs its own class:
+ * Origami export maps a CSS rule back to an element by its selector, and only
+ * reads class selectors.
  */
-export declare const CONTENT_VIEWER_SELECTOR = "[data-id=\"content-viewer\"]";
+export declare const elementClassName: (tag: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ricos-editor-elements",
-  "version": "11.20.6",
+  "version": "11.21.1",
   "files": [
     "dist/lib/**"
   ],
@@ -43,7 +43,7 @@
     "@wix/essentials": "^1.0.15",
     "@wix/fed-cli-i18next": "^1.7.0",
     "@wix/react-component-schema": "^1.10.0",
-    "@wix/ricos": "11.20.6",
+    "@wix/ricos": "11.21.1",
     "@wix/services-manager": "^1.0.7",
     "@wix/services-manager-react": "^1.0.8",
     "@wix/site-service-device-info": "^1.0.8",
@@ -107,5 +107,5 @@
       ]
     }
   },
-  "falconPackageHash": "61c109bc8ddf1a68c4334296701abcd85af869168f0197287d44cb65"
+  "falconPackageHash": "312c3913493fb042381c94d17e6ba62564d9530b5c3535015b20458c"
 }