@wix/ricos-editor-elements 0.0.0-stage → 11.21.0

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# ricos-editor-elements
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This project was bootstrapped with [Create Wix App](https://www.npmjs.com/package/@wix/create-app).
+Read more about it in the [Wix CLI for Apps
+documentation](https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/about-the-wix-cli-for-apps).
+
+## Setup 🔧
+
+##### Install dependencies:
+
+```console
+yarn install
+```
+
+##### Pull environment variables:
+
+```console
+yarn wix env pull
+```
+
+This creates a `.env.local` file containing your app's credentials (client ID, secret, public key, etc.).
+This file is required for `dev` and `build` to work, but is excluded from version control via `.gitignore`
+because it contains secrets specific to your app. Each developer must run this command after cloning the repo.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+```console
+yarn dev
+```

package/dist/lib/Viewer.css

@@ -0,0 +1,4 @@
+.root__bW8lC {
+  box-sizing: border-box;
+  background-color: var(--editor-ricos-palette-00-bgColor, var(--wst-base-1-color));
+}

package/dist/lib/Viewer.js

@@ -0,0 +1,602 @@
+import { truncateContent, RicosViewer, pluginEmojiViewer, pluginHashtagViewer, pluginLinkViewer, pluginMentionsViewer, pluginTextColorViewer, pluginTextHighlightViewer, pluginSpoilerViewer } from "@wix/ricos";
+import { pluginCollapsibleListLazy, pluginDividerLazy, pluginGiphyLazy, pluginImageLazy, pluginGalleryLazy, pluginVideoLazy, pluginAudioLazy, pluginFileUploadLazy, pluginTableLazy, pluginHtmlLazy, pluginLinkPreviewLazy, pluginVerticalEmbedLazy, pluginPollLazy, pluginLinkButtonLazy, pluginTocLazy } from "@wix/ricos/lazy";
+import { useService } from "@wix/services-manager-react";
+import { DeviceInfoDefinition } from "@wix/site-service-device-info/definition";
+import { EditorContextDefinition } from "@wix/site-service-editor-context/definition";
+import { LocaleDefinition } from "@wix/site-service-locale/definition";
+import { SiteInfoDefinition } from "@wix/site-service-site-info/definition";
+import { UrlDefinition } from "@wix/site-service-url/definition";
+import "@wix/ricos/css/ricos-viewer.global.css";
+import "@wix/ricos/css/plugin-hashtag-viewer.global.css";
+import "@wix/ricos/css/plugin-mentions-viewer.global.css";
+import "@wix/ricos/css/plugin-spoiler-viewer.global.css";
+import "@wix/ricos/css/plugin-button-viewer.global.css";
+import "@wix/ricos/css/plugin-divider-viewer.global.css";
+import "@wix/ricos/css/plugin-vertical-embed-viewer.global.css";
+import "@wix/ricos/css/plugin-collapsible-list-viewer.global.css";
+import "@wix/ricos/css/plugin-file-upload-viewer.global.css";
+import "@wix/ricos/css/plugin-gallery-viewer.global.css";
+import "@wix/ricos/css/plugin-giphy-viewer.global.css";
+import "@wix/ricos/css/plugin-html-viewer.global.css";
+import "@wix/ricos/css/plugin-image-viewer.global.css";
+import "@wix/ricos/css/plugin-link-viewer.global.css";
+import "@wix/ricos/css/plugin-link-preview-viewer.global.css";
+import "@wix/ricos/css/plugin-social-polls-viewer.global.css";
+import "@wix/ricos/css/plugin-table-viewer.global.css";
+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 './Viewer.css';const customPropKey = (tag, cssVar) => `editor-ricos-${tag}-${cssVar}`;
+const CONTENT_VIEWER_SELECTOR = '[data-id="content-viewer"]';
+const TEXT_LEVELS = [
+  { tag: "h1", displayName: "Heading 1", siteFont: "--wst-heading-1-font" },
+  { tag: "h2", displayName: "Heading 2", siteFont: "--wst-heading-2-font" },
+  { tag: "h3", displayName: "Heading 3", siteFont: "--wst-heading-3-font" },
+  { tag: "h4", displayName: "Heading 4", siteFont: "--wst-heading-4-font" },
+  { tag: "h5", displayName: "Heading 5", siteFont: "--wst-heading-5-font" },
+  { tag: "h6", displayName: "Heading 6", siteFont: "--wst-heading-6-font" },
+  { tag: "p", displayName: "Paragraph", siteFont: "--wst-paragraph-2-font" }
+];
+const siteFontOf = (tag) => {
+  var _a;
+  return `var(${(_a = TEXT_LEVELS.find((level) => level.tag === tag)) == null ? void 0 : _a.siteFont})`;
+};
+const FONT_PROPS = [
+  {
+    cssVar: "font",
+    styleProp: "font",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+    displayName: "Font"
+  },
+  {
+    cssVar: "letter-spacing",
+    styleProp: "letterSpacing",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.letterSpacing,
+    displayName: "Letter spacing"
+  },
+  {
+    cssVar: "color",
+    styleProp: "color",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Color"
+  }
+];
+const fontCssCustomProperties = (tag) => Object.fromEntries(
+  FONT_PROPS.map(({ cssVar, type, displayName }) => [
+    customPropKey(tag, cssVar),
+    {
+      cssPropertyType: type,
+      displayName,
+      ...cssVar === "font" ? { defaultValue: siteFontOf(tag) } : {}
+    }
+  ])
+);
+const fontTextGroup = (tag, displayName) => ({
+  displayName,
+  groupType: DISPLAY_GROUPS.GROUP_TYPE.text,
+  text: Object.fromEntries(
+    FONT_PROPS.map(({ styleProp, cssVar }) => [styleProp, customPropKey(tag, cssVar)])
+  )
+});
+const fontElement = (tag, displayName) => ({
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    selector: CONTENT_VIEWER_SELECTOR,
+    displayName,
+    behaviors: { selectable: false },
+    cssCustomProperties: fontCssCustomProperties(tag),
+    displayGroups: { [tag]: fontTextGroup(tag, displayName) }
+  }
+});
+Object.fromEntries(
+  TEXT_LEVELS.map(({ tag, displayName }) => [tag, fontElement(tag, displayName)])
+);
+({
+  groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+  elements: { items: TEXT_LEVELS.map(({ tag }) => tag) }
+});
+const fontVarsForTag = (tag) => Object.fromEntries(
+  FONT_PROPS.map(({ styleProp, cssVar }) => [
+    styleProp,
+    cssVar === "font" ? `var(--${customPropKey(tag, cssVar)}, ${siteFontOf(tag)})` : `var(--${customPropKey(tag, cssVar)})`
+  ])
+);
+const viewerCustomStyles = {
+  h1: fontVarsForTag("h1"),
+  h2: fontVarsForTag("h2"),
+  h3: fontVarsForTag("h3"),
+  h4: fontVarsForTag("h4"),
+  h5: fontVarsForTag("h5"),
+  h6: fontVarsForTag("h6"),
+  p: fontVarsForTag("p")
+};
+const viewerEllipsisStyle = {
+  color: "var(--wst-links-and-actions-color)",
+  font: `var(--${customPropKey("p", "font")}, ${siteFontOf("p")})`,
+  lineHeight: "1.5em",
+  textDecoration: "underline",
+  cursor: "pointer",
+  marginTop: "1em"
+};
+const FORMATTING_NODE_TYPES = /* @__PURE__ */ new Set([
+  "PARAGRAPH",
+  "HEADING",
+  "BLOCKQUOTE",
+  "ORDERED_LIST",
+  "BULLETED_LIST",
+  "CODE_BLOCK"
+]);
+const excludePlugins = (content) => {
+  const nodes = content.nodes.filter((node) => FORMATTING_NODE_TYPES.has(node.type));
+  const isTruncated = nodes.length !== content.nodes.length;
+  return { content: isTruncated ? { ...content, nodes } : content, isTruncated };
+};
+const trimByWords = (content, wordsCount) => {
+  const withoutPlugins = excludePlugins(content);
+  const truncated = truncateContent(withoutPlugins.content, { wordsCount });
+  return {
+    content: truncated.content,
+    isTruncated: truncated.isTruncated || withoutPlugins.isTruncated
+  };
+};
+const trimByBlocks = (content, blocksCount, trimPlugins) => {
+  const base = trimPlugins ? excludePlugins(content) : { content, isTruncated: false };
+  const truncated = truncateContent(base.content, { blocksCount });
+  return {
+    content: truncated.content,
+    isTruncated: truncated.isTruncated || base.isTruncated
+  };
+};
+const trimTrailingEmptyParagraph = (content) => {
+  var _a;
+  const last = content.nodes[content.nodes.length - 1];
+  if ((last == null ? void 0 : last.type) === "PARAGRAPH" && !((_a = last.nodes) == null ? void 0 : _a.length)) {
+    return { ...content, nodes: content.nodes.slice(0, -1) };
+  }
+  return content;
+};
+const defaultEllipsisStyle = {
+  display: "inline-block",
+  padding: 0,
+  border: "none",
+  background: "none",
+  ...viewerEllipsisStyle
+};
+const ContentTrimmer = ({
+  content,
+  trimEnabled,
+  trimMode,
+  trimLengthParagraph,
+  trimLengthWord,
+  trimExclude,
+  trimEllipsisEnabled,
+  trimEllipsisExpandText,
+  trimEllipsisCollapseText,
+  ellipsisStyle,
+  children
+}) => {
+  const [collapsed, setCollapsed] = useState(true);
+  if (!trimEnabled) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(content));
+  }
+  const { content: truncated, isTruncated } = trimMode === "word" ? trimByWords(content, trimLengthWord) : trimByBlocks(content, trimLengthParagraph, trimExclude === "plugins");
+  const shownContent = isTruncated && collapsed ? trimTrailingEmptyParagraph(truncated) : content;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(shownContent), isTruncated && trimEllipsisEnabled ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      style: { ...defaultEllipsisStyle, ...ellipsisStyle },
+      onClick: () => setCollapsed((isCollapsed) => !isCollapsed),
+      "data-hook": "trim-ellipsis-button"
+    },
+    collapsed ? trimEllipsisExpandText : trimEllipsisCollapseText
+  ) : null);
+};
+const DEFAULT_CONTENT_TEXT = "No content provided";
+const DEFAULT_CONTENT_NODE_ID = "ricos-viewer-default-content";
+const isContentProvided = (content) => {
+  var _a, _b, _c;
+  if (!((_a = content == null ? void 0 : content.nodes) == null ? void 0 : _a.length)) {
+    return false;
+  }
+  const [firstNode, ...restNodes] = content.nodes;
+  const [textNode, ...restTextNodes] = firstNode.nodes ?? [];
+  const isPlaceholder = restNodes.length === 0 && restTextNodes.length === 0 && firstNode.type === "PARAGRAPH" && firstNode.id === DEFAULT_CONTENT_NODE_ID && (textNode == null ? void 0 : textNode.type) === "TEXT" && ((_b = textNode.textData) == null ? void 0 : _b.text) === DEFAULT_CONTENT_TEXT && !((_c = textNode.textData.decorations) == null ? void 0 : _c.length);
+  return !isPlaceholder;
+};
+const BUTTON_TAG = "button";
+const BUTTON_PROPS = [
+  {
+    varKey: "fill",
+    themeField: "backgroundColor",
+    group: "normal",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Normal fill color",
+    defaultValue: "var(--wst-accent-1-color)"
+  },
+  {
+    varKey: "text",
+    themeField: "color",
+    group: "normal",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Normal text color",
+    defaultValue: "var(--wst-base-1-color)"
+  },
+  // Our single radius/width props map to ricos's all-sides borderRadius/borderWidth,
+  // while the theme exposes per-side/per-corner vars — default to a representative
+  // corner/side of the primary button variant (values are uniform across sides).
+  {
+    varKey: "border-radius",
+    themeField: "borderRadius",
+    group: "normal",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius,
+    displayName: "Corners",
+    defaultValue: "var(--wst-button-primary-border-top-left-radius)"
+  },
+  {
+    varKey: "border-width",
+    themeField: "borderWidth",
+    group: "normal",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+    displayName: "Border width",
+    defaultValue: "var(--wst-button-primary-border-top-width)"
+  },
+  {
+    varKey: "border-color",
+    themeField: "borderColor",
+    group: "normal",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Normal border color",
+    defaultValue: "var(--wst-accent-1-color)"
+  },
+  {
+    varKey: "fill-hover",
+    themeField: "backgroundColorHover",
+    group: "hover",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Hover fill color",
+    defaultValue: "var(--wst-accent-2-color)"
+  },
+  {
+    varKey: "text-hover",
+    themeField: "colorHover",
+    group: "hover",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Hover text color",
+    defaultValue: "var(--wst-base-1-color)"
+  },
+  {
+    varKey: "border-color-hover",
+    themeField: "borderColorHover",
+    group: "hover",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Hover border color",
+    defaultValue: "var(--wst-accent-2-color)"
+  }
+];
+const BUTTON_SIZE_DATA_KEY = "buttonSize";
+const BUTTON_SIZES = [
+  { value: "small", displayName: "Small" },
+  { value: "medium", displayName: "Medium" },
+  { value: "large", displayName: "Large" }
+];
+({
+  [BUTTON_SIZE_DATA_KEY]: {
+    dataType: DATA.DATA_TYPE.textEnum,
+    textEnum: {
+      options: BUTTON_SIZES.map(({ value, displayName }) => ({ value, displayName }))
+    }
+  }
+});
+const buttonCssCustomProperties = () => Object.fromEntries(
+  BUTTON_PROPS.map(({ varKey, type, displayName, defaultValue }) => [
+    customPropKey(BUTTON_TAG, varKey),
+    { cssPropertyType: type, displayName, ...defaultValue ? { defaultValue } : {} }
+  ])
+);
+const buttonColorGroup = (group) => ({
+  items: BUTTON_PROPS.filter(
+    (prop) => prop.group === group && prop.type === CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+  ).map((prop) => customPropKey(BUTTON_TAG, prop.varKey))
+});
+const buttonDisplayGroups = () => ({
+  buttonNormal: {
+    displayName: "Buttons (Normal)",
+    groupType: DISPLAY_GROUPS.GROUP_TYPE.cssCustomProperties,
+    cssCustomProperties: buttonColorGroup("normal")
+  },
+  buttonHover: {
+    displayName: "Buttons (Hover)",
+    groupType: DISPLAY_GROUPS.GROUP_TYPE.cssCustomProperties,
+    cssCustomProperties: buttonColorGroup("hover")
+  }
+});
+({
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    cssCustomProperties: buttonCssCustomProperties(),
+    displayGroups: buttonDisplayGroups()
+  }
+});
+const viewerButtonStyle = Object.fromEntries(
+  BUTTON_PROPS.map(({ varKey, themeField, defaultValue }) => [
+    themeField,
+    defaultValue ? `var(--${customPropKey(BUTTON_TAG, varKey)}, ${defaultValue})` : `var(--${customPropKey(BUTTON_TAG, varKey)})`
+  ])
+);
+const IMAGE_TAG = "image";
+const IMAGE_PROPS = [
+  {
+    varKey: "border-radius",
+    themeField: "borderRadius",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius,
+    displayName: "Corners",
+    defaultValue: "0px"
+  },
+  {
+    varKey: "border-width",
+    themeField: "borderWidth",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+    displayName: "Border width",
+    defaultValue: "0px"
+  },
+  {
+    varKey: "border-color",
+    themeField: "borderColor",
+    type: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: "Border color",
+    defaultValue: "var(--wst-base-2-color)"
+  }
+];
+const imageCssCustomProperties = () => Object.fromEntries(
+  IMAGE_PROPS.map(({ varKey, type, displayName, defaultValue }) => [
+    customPropKey(IMAGE_TAG, varKey),
+    { cssPropertyType: type, displayName, ...defaultValue ? { defaultValue } : {} }
+  ])
+);
+({
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    cssCustomProperties: imageCssCustomProperties()
+  }
+});
+const viewerImageStyle = Object.fromEntries(
+  IMAGE_PROPS.map(({ varKey, themeField, defaultValue }) => [
+    themeField,
+    defaultValue ? `var(--${customPropKey(IMAGE_TAG, varKey)}, ${defaultValue})` : `var(--${customPropKey(IMAGE_TAG, varKey)})`
+  ])
+);
+const PALETTE_SECTIONS = [
+  { key: "base", displayName: "Base" },
+  { key: "shade", displayName: "Shades" },
+  { key: "accent", displayName: "Accent" }
+];
+const PALETTE_PROPS = [
+  {
+    paletteKey: "bgColor",
+    section: "base",
+    platformVar: "--wst-base-1-color",
+    displayName: "Background"
+  },
+  {
+    paletteKey: "textColor",
+    section: "base",
+    platformVar: "--wst-base-2-color",
+    displayName: "Text"
+  },
+  {
+    paletteKey: "shade1",
+    section: "shade",
+    platformVar: "--wst-shade-1-color",
+    displayName: "Shade 1"
+  },
+  {
+    paletteKey: "shade2",
+    section: "shade",
+    platformVar: "--wst-shade-2-color",
+    displayName: "Shade 2"
+  },
+  {
+    paletteKey: "shade3",
+    section: "shade",
+    platformVar: "--wst-shade-3-color",
+    displayName: "Shade 3"
+  },
+  {
+    paletteKey: "accent1",
+    section: "accent",
+    platformVar: "--wst-accent-1-color",
+    displayName: "Accent 1"
+  },
+  {
+    paletteKey: "accent2",
+    section: "accent",
+    platformVar: "--wst-accent-2-color",
+    displayName: "Accent 2"
+  },
+  {
+    paletteKey: "accent3",
+    section: "accent",
+    platformVar: "--wst-accent-3-color",
+    displayName: "Accent 3"
+  },
+  {
+    paletteKey: "accent4",
+    section: "accent",
+    platformVar: "--wst-accent-4-color",
+    displayName: "Accent 4"
+  }
+];
+const PALETTE_TAG = "palette";
+const paletteVarKey = (paletteKey) => {
+  const index = PALETTE_PROPS.findIndex((prop) => prop.paletteKey === paletteKey);
+  return customPropKey(PALETTE_TAG, `${String(index).padStart(2, "0")}-${paletteKey}`);
+};
+Object.fromEntries(
+  PALETTE_PROPS.map(({ paletteKey, platformVar, displayName }) => [
+    paletteVarKey(paletteKey),
+    {
+      cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+      displayName,
+      defaultValue: `var(${platformVar})`
+    }
+  ])
+);
+Object.fromEntries(
+  PALETTE_SECTIONS.map(({ key, displayName }) => [
+    key,
+    {
+      displayName,
+      groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+      cssDataType: {
+        items: PALETTE_PROPS.filter((prop) => prop.section === key).map(
+          (prop) => paletteVarKey(prop.paletteKey)
+        )
+      }
+    }
+  ])
+);
+const viewerColorPalette = {
+  format: "color",
+  ...Object.fromEntries(
+    PALETTE_PROPS.map(({ paletteKey, platformVar }) => [
+      paletteKey,
+      `var(--${paletteVarKey(paletteKey)}, var(${platformVar}))`
+    ])
+  )
+};
+const TRIM_DEFAULTS = {
+  trimEnabled: false,
+  trimMode: "paragraph",
+  trimLengthParagraph: 3,
+  trimLengthWord: 10,
+  trimExclude: "plugins",
+  trimEllipsisEnabled: true,
+  trimEllipsisExpandText: "Show More",
+  trimEllipsisCollapseText: "Show Less"
+};
+({
+  trimEnabled: {
+    dataType: DATA.DATA_TYPE.booleanValue
+  },
+  trimMode: {
+    dataType: DATA.DATA_TYPE.textEnum
+  },
+  trimLengthParagraph: {
+    dataType: DATA.DATA_TYPE.number
+  },
+  trimLengthWord: {
+    dataType: DATA.DATA_TYPE.number
+  },
+  trimExclude: {
+    dataType: DATA.DATA_TYPE.textEnum
+  },
+  trimEllipsisEnabled: {
+    dataType: DATA.DATA_TYPE.booleanValue
+  },
+  trimEllipsisExpandText: {
+    dataType: DATA.DATA_TYPE.text
+  },
+  trimEllipsisCollapseText: {
+    dataType: DATA.DATA_TYPE.text
+  }
+});
+const root = "root__bW8lC";
+const s = {
+  root
+};
+const ViewerContent = ({
+  id,
+  content,
+  className,
+  resolveFileUrl,
+  buttonSize = "medium",
+  trimEnabled = TRIM_DEFAULTS.trimEnabled,
+  trimMode = TRIM_DEFAULTS.trimMode,
+  trimLengthParagraph = TRIM_DEFAULTS.trimLengthParagraph,
+  trimLengthWord = TRIM_DEFAULTS.trimLengthWord,
+  trimExclude = TRIM_DEFAULTS.trimExclude,
+  trimEllipsisEnabled = TRIM_DEFAULTS.trimEllipsisEnabled,
+  trimEllipsisExpandText = TRIM_DEFAULTS.trimEllipsisExpandText,
+  trimEllipsisCollapseText = TRIM_DEFAULTS.trimEllipsisCollapseText
+}) => {
+  const { deviceType } = useService(DeviceInfoDefinition);
+  const { editorName } = useService(EditorContextDefinition);
+  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(
+    ContentTrimmer,
+    {
+      content,
+      trimEnabled,
+      trimMode,
+      trimLengthParagraph,
+      trimLengthWord,
+      trimExclude,
+      trimEllipsisEnabled,
+      trimEllipsisExpandText,
+      trimEllipsisCollapseText
+    },
+    (trimmedContent) => /* @__PURE__ */ React.createElement(
+      RicosViewer,
+      {
+        firstFoldNodeCount: 8,
+        responsiveBehavior: "viewport",
+        isMobile: deviceType === "Smartphone",
+        locale: language,
+        biSettings: {
+          consumer: editorName,
+          platform: "Livesite",
+          postId: "",
+          containerId: ""
+        },
+        msid: metaSiteId,
+        baseUrl: siteUrl,
+        content: trimmedContent,
+        theme: {
+          colorPalette: viewerColorPalette,
+          customStyles: {
+            ...viewerCustomStyles,
+            button: { ...viewerButtonStyle, buttonSize },
+            image: viewerImageStyle
+          }
+        },
+        plugins: [
+          pluginCollapsibleListLazy(),
+          pluginDividerLazy(),
+          pluginEmojiViewer(),
+          pluginGiphyLazy(),
+          pluginHashtagViewer(),
+          pluginImageLazy(),
+          pluginGalleryLazy(),
+          pluginVideoLazy(),
+          pluginAudioLazy(),
+          pluginFileUploadLazy({ resolveFileUrl }),
+          pluginLinkViewer(),
+          pluginMentionsViewer(),
+          pluginTableLazy(),
+          pluginTextColorViewer(),
+          pluginTextHighlightViewer(),
+          pluginHtmlLazy(),
+          pluginLinkPreviewLazy(),
+          pluginVerticalEmbedLazy(),
+          pluginSpoilerViewer(),
+          pluginPollLazy(),
+          pluginLinkButtonLazy(),
+          pluginTocLazy()
+        ]
+      }
+    )
+  ));
+};
+const Viewer = ({ content, ...props }) => isContentProvided(content) ? /* @__PURE__ */ React.createElement(ViewerContent, { ...props, content }) : (
+  // Keep the root so the platform still finds the component node.
+  /* @__PURE__ */ React.createElement("div", { className: `${s.root} ${props.className}`, id: props.id })
+);
+export {
+  ViewerContent,
+  Viewer as default
+};

package/dist/lib/content-trimmer.d.ts

@@ -0,0 +1,10 @@
+import { RicosDocument } from '@wix/ricos';
+import { CSSProperties, FC, ReactNode } from 'react';
+import { TrimSettings } from './manifest/trim.js';
+type ContentTrimmerProps = TrimSettings & {
+    content: RicosDocument;
+    ellipsisStyle?: CSSProperties;
+    children: (content: RicosDocument) => ReactNode;
+};
+export declare const ContentTrimmer: FC<ContentTrimmerProps>;
+export {};

package/dist/lib/default-content.d.ts

@@ -0,0 +1,9 @@
+import { RicosDocument } from '@wix/ricos';
+/** Default content shown in the editor before the consumer binds their own `content`. */
+export declare const defaultContent: RicosDocument;
+/**
+ * False when no content is bound. The manifest uses `defaultContent` as the data item's
+ * `defaultValue`, so the platform can pass it back as `content` — match its marker id and
+ * shape rather than its reference.
+ */
+export declare const isContentProvided: (content?: RicosDocument) => content is RicosDocument;

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

@@ -0,0 +1,24 @@
+import { EditorElement, ElementItem } from '@wix/react-component-schema';
+import { RicosCustomStyles } from '@wix/ricos';
+/** ricos's per-button style overrides — `theme.customStyles.button`. */
+type ButtonStyle = NonNullable<RicosCustomStyles['button']>;
+/** Allowed `buttonSize` values. Exposed as a `textEnum` data item (a prop), not
+ * a CSS var: `buttonSize` is a ricos enum resolved at render, so it must reach
+ * the component as a prop (SSR + client) rather than a paint-time CSS variable. */
+export declare const BUTTON_SIZE_DATA_KEY = "buttonSize";
+/** The `buttonSize` data item — becomes the component's `buttonSize` prop. */
+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`.
+ */
+export declare const buttonElement: ElementItem;
+/**
+ * `theme.customStyles.button` for `RicosViewer`. Each color/length field
+ * references its editor var with the platform default as fallback. `buttonSize`
+ * is omitted — it is a data prop passed to the component in viewer.tsx.
+ */
+export declare const viewerButtonStyle: ButtonStyle;
+export {};

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

@@ -0,0 +1,10 @@
+import { ElementItem } from '@wix/react-component-schema';
+import { RicosCustomStyles } from '@wix/ricos';
+/** ricos per-image style overrides — `theme.customStyles.image`. */
+type ImageStyle = NonNullable<RicosCustomStyles['image']>;
+/** Dedicated (non-selectable) "Image" element for the global image-frame controls. */
+export declare const imageElement: ElementItem;
+/** `theme.customStyles.image` for `RicosViewer` — each field references its editor
+ * var with the default as fallback. */
+export declare const viewerImageStyle: ImageStyle;
+export {};

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

@@ -0,0 +1,16 @@
+import { CssCustomPropertyItem, DisplayGroupItem } from '@wix/react-component-schema';
+import { RicosPalette } from '@wix/ricos';
+/** Component-wide color controls, one per palette slot. Each defaults to its
+ * platform palette color (`--wst-*-color`) so the editor control opens on the
+ * theme color rather than empty. */
+export declare const paletteCssCustomProperties: Record<string, CssCustomPropertyItem>;
+/** One display group per palette section (Base / Shades / Accent), so the panel
+ * shows the colors under labeled sub-sections. Within each, item order follows
+ * `PALETTE_PROPS`; section order follows `PALETTE_SECTIONS`. */
+export declare const paletteDisplayGroups: Record<string, DisplayGroupItem>;
+/**
+ * `theme.colorPalette` for `RicosViewer`. Each slot references the editor-set
+ * `--editor-ricos-palette-<key>` custom property, falling back to the platform
+ * `--wst-*-color` default so untouched colors match the platform theme.
+ */
+export declare const viewerColorPalette: RicosPalette;

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

@@ -0,0 +1,11 @@
+/**
+ * Shared primitives for the viewer manifest's style/settings modules.
+ */
+/** `editor-ricos-<tag>-<suffix>` — the custom-property key the editor writes to;
+ * 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.
+ */
+export declare const CONTENT_VIEWER_SELECTOR = "[data-id=\"content-viewer\"]";

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

@@ -0,0 +1,21 @@
+import { DisplayGroupItem, ElementItem } from '@wix/react-component-schema';
+import { RicosCustomStyles } from '@wix/ricos';
+import { CSSProperties } from 'react';
+/** One inner element per text level (`h1`…`h6`, `p`), keyed by tag. */
+export declare const textElements: Record<string, ElementItem>;
+/** `elements` display group pinning the text levels' panel order (h1→…→p). */
+export declare const textLevelsDisplayGroup: DisplayGroupItem;
+/**
+ * `theme.customStyles` for `RicosViewer` — the runtime counterpart of the manifest's
+ * `cssCustomProperties`. The editor writes `--editor-ricos-<tag>-<prop>` custom properties;
+ * these references pull them into ricos's per-tag styling so panel edits restyle the content.
+ */
+export declare const viewerCustomStyles: RicosCustomStyles;
+/**
+ * Style for the trim expand/collapse toggle, an exact port of the
+ * editor-elements RichContentViewer ellipsis style: paragraph typography
+ * (`getTextThemeForTag('p')`) + the site link/action color, underlined.
+ * `--wst-links-and-actions-color` is the canonical equivalent of the
+ * reference's `actionColor` (`--linkColor` / `--color_18`).
+ */
+export declare const viewerEllipsisStyle: CSSProperties;

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

@@ -0,0 +1,21 @@
+import { EditorElement } from '@wix/react-component-schema';
+/**
+ * Content-trimming settings (replicating the editor-elements RichContentViewer).
+ * All are data items → component props (render-time, SSR-safe), consumed by the
+ * `ContentTrimmer` in viewer.tsx. Shared with the component as prop defaults.
+ */
+export type TrimMode = 'paragraph' | 'word';
+export type TrimSettings = {
+    trimEnabled: boolean;
+    trimMode: TrimMode;
+    trimLengthParagraph: number;
+    trimLengthWord: number;
+    /** `'plugins'` drops plugin nodes (image/video/…) when trimming; `'none'` keeps them. */
+    trimExclude: 'none' | 'plugins';
+    trimEllipsisEnabled: boolean;
+    trimEllipsisExpandText: string;
+    trimEllipsisCollapseText: string;
+};
+export declare const TRIM_DEFAULTS: TrimSettings;
+/** The content-trimming data items — become the component's trim props. */
+export declare const trimData: NonNullable<EditorElement['data']>;

package/dist/lib/viewer.d.ts

@@ -0,0 +1,23 @@
+import { RicosDocument } from '@wix/ricos';
+import { FC } from 'react';
+import { TrimSettings } from './manifest/trim.js';
+type ButtonSize = 'small' | 'medium' | 'large';
+export type ViewerProps = {
+    id: string;
+    className: string;
+    content?: RicosDocument;
+    resolveFileUrl?: (file: FileUploadPluginFile) => Promise<string>;
+    buttonSize?: ButtonSize;
+} & Partial<TrimSettings>;
+type FileUploadPluginFile = {
+    id?: string;
+    path?: string;
+    mimeType?: string;
+};
+/** Renders the given document; `Viewer` and `ViewerPreview` decide what to pass. */
+export declare const ViewerContent: FC<ViewerProps & {
+    content: RicosDocument;
+}>;
+/** Site entry: renders nothing until content is bound. The editor placeholder lives in `viewer.preview.tsx`. */
+declare const Viewer: FC<ViewerProps>;
+export default Viewer;

package/dist/lib/viewer.preview.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ViewerProps } from './viewer.js';
+/** Editor entry: hints that `content` isn't bound yet; preview mode renders like the site. */
+declare const ViewerPreview: FC<ViewerProps>;
+export default ViewerPreview;

package/package.json

@@ -1,6 +1,111 @@
 {
   "name": "@wix/ricos-editor-elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "11.21.0",
+  "files": [
+    "dist/lib/**"
+  ],
+  "type": "module",
+  "exports": {
+    "./Viewer": {
+      "types": "./dist/lib/viewer.d.ts",
+      "default": "./dist/lib/Viewer.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest",
+    "build": "yarn generate-translation-keys && yarn typecheck && wix build && yarn build:lib",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "dev": "wix dev",
+    "preview": "wix preview",
+    "logs": "wix logs",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "typecheck": "tsc --noEmit",
+    "test:e2e": "yarn dlx @wix/sled-playwright test",
+    "env": "wix env pull",
+    "generate": "yarn create @wix/fed-app",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "generate-translation-keys": "babel-cli"
+  },
+  "dependencies": {
+    "@wix/astro": "^2.75.3",
+    "@wix/dashboard": "^1.3.48",
+    "@wix/design-system": "^1.338.0",
+    "@wix/editor": "^1.956.0",
+    "@wix/essentials": "^1.0.15",
+    "@wix/fed-cli-i18next": "^1.7.0",
+    "@wix/react-component-schema": "^1.10.0",
+    "@wix/ricos": "11.21.0",
+    "@wix/services-manager": "^1.0.7",
+    "@wix/services-manager-react": "^1.0.8",
+    "@wix/site-service-device-info": "^1.0.8",
+    "@wix/site-service-editor-context": "^1.0.7",
+    "@wix/site-service-locale": "^1.0.10",
+    "@wix/site-service-site-info": "^1.0.8",
+    "@wix/site-service-url": "^1.0.9",
+    "@wix/wix-ui-icons-common": "^3.190.8",
+    "astro": "^5.18.1",
+    "lodash": "^4.17.15"
+  },
+  "devDependencies": {
+    "@astrojs/cloudflare": "^12.6.13",
+    "@astrojs/react": "^4.4.2",
+    "@playwright/test": "~1.51.0",
+    "@storybook/react-vite": "^10.4.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.0.1",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@wix/babel-cli": "^1.20.0",
+    "@wix/cli": "^1.1.263",
+    "@wix/fed-cli-oxlint": "^1.0.6",
+    "@wix/fed-cli-sled": "^1.0.39",
+    "@wix/fed-cli-vitest": "^1.0.17",
+    "@wix/sdk-types": "^1.17.12",
+    "@wix/sled-playwright": "^1.398.0",
+    "oxfmt": "^0.19.0",
+    "oxlint": "^1.34.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.14.0",
+    "storybook": "^10.4.1",
+    "typescript": "5.8.3",
+    "vite": "^6.4.3",
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-lib-inject-css": "^2.2.0",
+    "vitest": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "wix": {
+    "framework": {
+      "type": "WIX_CLI"
+    },
+    "artifact": {
+      "groupId": "com.wixpress",
+      "artifactId": "ricos-editor-elements",
+      "targets": {
+        "devcenter": true,
+        "static": true
+      }
+    },
+    "validations": {
+      "sourceOnly": [
+        "lint",
+        "format:check"
+      ]
+    }
+  },
+  "falconPackageHash": "cf3505f5c008bd6bce0924f9643683c33221498f8463d1267bc558c2"
 }