@wix/editor-react-components 1.2621.0 → 1.2622.0

package/dist/site/components/MarkdownBlock/constants.d.ts

@@ -0,0 +1,33 @@
+export declare const CONTENT_MAX_LENGTH = 100000;
+export declare const manifestClasses: {
+    readonly root: "markdown-block";
+};
+export declare const defaultValues: {
+    readonly theme: "light";
+    readonly content: "# Markdown Block\n\nWrite **Markdown** and it renders as styled HTML. Supports _emphasis_, [links](https://www.wix.com), `inline code` and everything else in CommonMark plus GitHub Flavored Markdown.\n\n## Lists\n\n- Bullet lists with **bold** and _italic_ text\n- Nested content and long lines wrap cleanly\n- Task lists, tables and strikethrough come from GFM\n\n1. Ordered items work too\n2. Numbering is handled for you\n\n## Quotes and code\n\n> A blockquote for pull quotes, callouts, and citations.\n\n```js\nconst greet = (name) => `Hello, ${name}!`;\nconsole.log(greet('Markdown'));\n```\n\n## Tables\n\n| Feature | Supported |\n| --- | --- |\n| Headings | Yes |\n| Tables | Yes |\n| Task lists | Yes |\n\n---\n\n### Smaller heading\n\nEverything above is styled by the selected theme. Switch themes to restyle the whole block.\n";
+};
+export declare const TRANSLATIONS_NAMESPACE = "ariaLabels";
+export declare const TranslationKeys: {
+    readonly scrollerAriaLabel: "markdownBlock_aria_label_content";
+};
+export declare const DefaultTranslations: {
+    readonly scrollerAriaLabel: "Markdown content";
+};
+export declare const DisplayNames: {
+    readonly root: {
+        readonly elementDisplayName: "Markdown Block";
+        readonly data: {
+            readonly content: "Content";
+            readonly theme: {
+                readonly displayName: "Theme";
+                readonly options: {
+                    readonly light: "Light";
+                    readonly dark: "Dark";
+                    readonly sepia: "Sepia";
+                    readonly prism: "Prism";
+                    readonly brand: "Site brand";
+                };
+            };
+        };
+    };
+};

package/dist/site/components/MarkdownBlock/css.css

@@ -0,0 +1,347 @@
+.markdownBlock__9upcg {
+  --display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  border: 1px solid var(--md-border-color, #e2e8f0);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
+  background: var(--md-bg, #ffffff);
+  color: var(--md-fg, #334155);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.7;
+  text-align: start;
+}
+
+.scroller__0Ueqz {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--md-scrollbar-thumb, #cbd5e1) var(--md-scrollbar-track, rgba(148, 163, 184, 0.16));
+}
+
+.themeLight__776bm {
+  --md-bg: #ffffff;
+  --md-fg: #334155;
+  --md-heading-color: #0f172a;
+  --md-link-color: #4f46e5;
+  --md-link-hover-color: #3730a3;
+  --md-border-color: #e2e8f0;
+  --md-divider-color: #e2e8f0;
+  --md-code-bg: #f1f5f9;
+  --md-code-fg: #be123c;
+  --md-code-block-bg: #f8fafc;
+  --md-code-block-fg: #1e293b;
+  --md-quote-border-color: #cbd5e1;
+  --md-quote-fg: #475569;
+  --md-table-header-bg: #f8fafc;
+  --md-scrollbar-thumb: #cbd5e1;
+  --md-scrollbar-track: rgba(148, 163, 184, 0.16);
+  box-sizing: border-box;
+}
+
+.themeDark__erkil {
+  --md-bg: #0f172a;
+  --md-fg: #cbd5e1;
+  --md-heading-color: #f8fafc;
+  --md-link-color: #818cf8;
+  --md-link-hover-color: #a5b4fc;
+  --md-border-color: #1e293b;
+  --md-divider-color: #1e293b;
+  --md-code-bg: #1e293b;
+  --md-code-fg: #f9a8d4;
+  --md-code-block-bg: #111c33;
+  --md-code-block-fg: #e2e8f0;
+  --md-quote-border-color: #334155;
+  --md-quote-fg: #94a3b8;
+  --md-table-header-bg: #1e293b;
+  --md-scrollbar-thumb: #334155;
+  --md-scrollbar-track: rgba(148, 163, 184, 0.12);
+  box-sizing: border-box;
+}
+
+.themeSepia__oR8hU {
+  --md-bg: #fbf3e4;
+  --md-fg: #4a3f35;
+  --md-heading-color: #2f2620;
+  --md-link-color: #a1552b;
+  --md-link-hover-color: #7c3d1c;
+  --md-border-color: #e3d5bd;
+  --md-divider-color: #e3d5bd;
+  --md-code-bg: #f0e4cd;
+  --md-code-fg: #8c4a2f;
+  --md-code-block-bg: #f5ead6;
+  --md-code-block-fg: #3f362c;
+  --md-quote-border-color: #d8c6a6;
+  --md-quote-fg: #6b5b4a;
+  --md-table-header-bg: #f3e8d3;
+  --md-scrollbar-thumb: #d8c6a6;
+  --md-scrollbar-track: rgba(120, 95, 60, 0.12);
+  box-sizing: border-box;
+}
+
+.themePrism__Mbbq4 {
+  --md-bg: #282a36;
+  --md-fg: #f8f8f2;
+  --md-heading-color: #ff79c6;
+  --md-link-color: #8be9fd;
+  --md-link-hover-color: #c7f9ff;
+  --md-border-color: #44475a;
+  --md-divider-color: #44475a;
+  --md-code-bg: #44475a;
+  --md-code-fg: #50fa7b;
+  --md-code-block-bg: #21222c;
+  --md-code-block-fg: #f8f8f2;
+  --md-quote-border-color: #bd93f9;
+  --md-quote-fg: #bfbfd4;
+  --md-table-header-bg: #44475a;
+  --md-scrollbar-thumb: #6272a4;
+  --md-scrollbar-track: rgba(98, 114, 164, 0.2);
+  box-sizing: border-box;
+}
+
+.themeBrand__3HDqp {
+  --md-bg: var(--wst-primary-background-color);
+  --md-fg: var(--wst-paragraph-1-color);
+  --md-heading-color: var(--wst-heading-3-color);
+  --md-link-color: var(--wst-links-and-actions-color);
+  --md-link-hover-color: var(--wst-accent-1-color);
+  --md-border-color: var(--wst-shade-1-color);
+  --md-divider-color: var(--wst-shade-1-color);
+  --md-code-bg: var(--wst-secondary-background-color);
+  --md-code-fg: var(--wst-accent-1-color);
+  --md-code-block-bg: var(--wst-secondary-background-color);
+  --md-code-block-fg: var(--wst-base-2-color);
+  --md-quote-border-color: var(--wst-shade-2-color);
+  --md-quote-fg: var(--wst-shade-2-color);
+  --md-table-header-bg: var(--wst-secondary-background-color);
+  --md-scrollbar-thumb: var(--wst-shade-2-color);
+  --md-scrollbar-track: var(--wst-secondary-background-color);
+  box-sizing: border-box;
+  font: var(--wst-paragraph-1-font);
+  font-size: 16px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  line-height: 1.7;
+}
+
+.heading1__fL-1g {
+  box-sizing: border-box;
+  margin-block: 24px 12px;
+  color: var(--md-heading-color, #0f172a);
+  font-family: inherit;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: start;
+}
+
+.heading2__11rn4 {
+  box-sizing: border-box;
+  margin-block: 20px 10px;
+  color: var(--md-heading-color, #0f172a);
+  font-family: inherit;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: start;
+}
+
+.heading3__fHdyb {
+  box-sizing: border-box;
+  margin-block: 18px 8px;
+  color: var(--md-heading-color, #0f172a);
+  font-family: inherit;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: start;
+}
+
+.heading4__zqQiY {
+  box-sizing: border-box;
+  margin-block: 16px 8px;
+  color: var(--md-heading-color, #0f172a);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.heading5__pw3px {
+  box-sizing: border-box;
+  margin-block: 14px 6px;
+  color: var(--md-heading-color, #0f172a);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.heading6__nC9R8 {
+  box-sizing: border-box;
+  margin-block: 12px 6px;
+  color: var(--md-heading-color, #0f172a);
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.paragraph__Zms2f {
+  box-sizing: border-box;
+  margin-block: 12px;
+  color: var(--md-fg, #334155);
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.7;
+  text-align: start;
+}
+
+.link__rbmYN {
+  box-sizing: border-box;
+  color: var(--md-link-color, #4f46e5);
+  font-family: inherit;
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  pointer-events: auto;
+}
+.link__rbmYN:hover {
+  color: var(--md-link-hover-color, #3730a3);
+}
+.link__rbmYN:focus-visible {
+  outline: 2px solid var(--md-link-color, #4f46e5);
+  outline-offset: 2px;
+}
+
+.list__QnQZX {
+  box-sizing: border-box;
+  margin-block: 12px;
+  padding-inline-start: 24px;
+  color: var(--md-fg, #334155);
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.7;
+  text-align: start;
+}
+
+.listItem__2rbC- {
+  box-sizing: border-box;
+  margin-block: 4px;
+}
+
+.blockquote__O3EwR {
+  box-sizing: border-box;
+  margin-block: 16px;
+  margin-inline: 0;
+  padding-inline-start: 16px;
+  border-inline-start: 4px solid var(--md-quote-border-color, #cbd5e1);
+  color: var(--md-quote-fg, #475569);
+  font-family: inherit;
+  font-size: 1rem;
+  font-style: italic;
+  line-height: 1.7;
+  text-align: start;
+}
+
+.code__wNTpb {
+  box-sizing: border-box;
+  padding: var(--md-code-padding, 2px 6px);
+  border-radius: 4px;
+  background: var(--md-code-bg, #f1f5f9);
+  color: var(--md-code-fg, #be123c);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+}
+
+.codeBlock__D-XEt {
+  --md-code-bg: transparent;
+  --md-code-fg: currentColor;
+  --md-code-padding: 0;
+  box-sizing: border-box;
+  margin-block: 16px;
+  padding: 16px;
+  overflow-x: auto;
+  border-radius: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--md-scrollbar-thumb, #cbd5e1) var(--md-scrollbar-track, rgba(148, 163, 184, 0.16));
+  background: var(--md-code-block-bg, #f8fafc);
+  color: var(--md-code-block-fg, #1e293b);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  text-align: start;
+}
+
+.table__ek3QZ {
+  box-sizing: border-box;
+  margin-block: 16px;
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--md-fg, #334155);
+  font-family: inherit;
+  font-size: 0.9375rem;
+}
+
+.tableHeaderCell__cRSby {
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px solid var(--md-border-color, #e2e8f0);
+  background: var(--md-table-header-bg, #f8fafc);
+  color: var(--md-heading-color, #0f172a);
+  font-weight: 600;
+  text-align: start;
+}
+
+.tableCell__Mfag6 {
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px solid var(--md-border-color, #e2e8f0);
+  text-align: start;
+}
+
+.image__eNrUq {
+  box-sizing: border-box;
+  display: block;
+  margin-block: 16px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.divider__U-xa5 {
+  box-sizing: border-box;
+  margin-block: 24px;
+  margin-inline: 0;
+  border: none;
+  border-block-start: 1px solid var(--md-divider-color, #e2e8f0);
+}
+
+.scroller__0Ueqz::-webkit-scrollbar,
+.codeBlock__D-XEt::-webkit-scrollbar {
+  box-sizing: border-box;
+  width: 10px;
+  height: 10px;
+}
+.scroller__0Ueqz::-webkit-scrollbar-track,
+.codeBlock__D-XEt::-webkit-scrollbar-track {
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--md-scrollbar-track, rgba(148, 163, 184, 0.16));
+}
+.scroller__0Ueqz::-webkit-scrollbar-thumb,
+.codeBlock__D-XEt::-webkit-scrollbar-thumb {
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--md-scrollbar-thumb, #cbd5e1);
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}

package/dist/site/components/MarkdownBlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as MarkdownBlock } from './component';

package/dist/site/components/MarkdownBlock/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import MarkdownBlock from './component.js';
+
+export { MarkdownBlock };
+export default MarkdownBlock;

package/dist/site/components/MarkdownBlock/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

package/dist/site/components/MarkdownBlock/manifest.js

@@ -0,0 +1,105 @@
+import { L as LAYOUT, D as DATA, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
+import { g as getSelector } from "../chunks/manifest.js";
+import { d as defaultValues, b as DisplayNames, C as CONTENT_MAX_LENGTH, m as manifestClasses } from "../chunks/constants28.js";
+const manifest = {
+  id: "09163c09-57cd-4241-bde6-b9e602fedbd8",
+  type: "wixEditorElements.MarkdownBlock",
+  description: "Renders Markdown (CommonMark + GFM) as styled HTML, with a closed set of visual themes",
+  editorElement: {
+    selector: getSelector(manifestClasses.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.Text,
+    data: {
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      content: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.content,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: CONTENT_MAX_LENGTH
+        },
+        defaultValue: defaultValues.content
+      },
+      theme: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.theme.displayName,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "light",
+              displayName: DisplayNames.root.data.theme.options.light
+            },
+            {
+              value: "dark",
+              displayName: DisplayNames.root.data.theme.options.dark
+            },
+            {
+              value: "sepia",
+              displayName: DisplayNames.root.data.theme.options.sepia
+            },
+            {
+              value: "prism",
+              displayName: DisplayNames.root.data.theme.options.prism
+            },
+            {
+              value: "brand",
+              displayName: DisplayNames.root.data.theme.options.brand
+            }
+          ]
+        },
+        defaultValue: defaultValues.theme
+      }
+    },
+    cssProperties: {
+      fontFamily: {},
+      borderTop: { defaultValue: "1px solid" },
+      borderBottom: { defaultValue: "1px solid" },
+      borderInlineStart: { defaultValue: "1px solid" },
+      borderInlineEnd: { defaultValue: "1px solid" },
+      paddingTop: { defaultValue: "24px" },
+      paddingBottom: { defaultValue: "24px" },
+      paddingInlineStart: { defaultValue: "24px" },
+      paddingInlineEnd: { defaultValue: "24px" },
+      borderStartStartRadius: { defaultValue: "12px" },
+      borderStartEndRadius: { defaultValue: "12px" },
+      borderEndStartRadius: { defaultValue: "12px" },
+      borderEndEndRadius: { defaultValue: "12px" },
+      boxShadow: {
+        defaultValue: "0 2px 8px rgba(0,0,0,0.06),0 0 1px rgba(0,0,0,0.08)"
+      }
+    },
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.none
+    }
+  },
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 600
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 480
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/MarkdownBlock/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/MarkdownBlock",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-translations"]
+      }
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/MarkdownBlock" }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/MarkdownBlock/markdownComponents.d.ts

@@ -0,0 +1,2 @@
+import { Components } from 'react-markdown';
+export declare const markdownComponents: Components;

package/dist/site/components/MarkdownBlock/types.d.ts

@@ -0,0 +1,9 @@
+import { Direction } from '@wix/editor-react-types';
+export type MarkdownTheme = 'light' | 'dark' | 'sepia' | 'prism' | 'brand';
+export type MarkdownBlockProps = {
+    id: string;
+    className?: string;
+    direction?: Direction;
+    content?: string;
+    theme?: MarkdownTheme;
+};

package/dist/site/components/Menu/component.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
-import { U as UrlDefinition } from "../chunks/index12.js";
+import { U as UrlDefinition } from "../chunks/index13.js";
 import { d as defineService } from "../chunks/index8.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, c as DesignStates, u as useAnimationState, e as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";

package/dist/site/components/RadioButtons/component.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio, c as InfoCircle_default } from "../chunks/index11.js";
+import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio, c as InfoCircle_default } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";

package/dist/site/components/ShareButtons/component.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useEffect, useRef, useMemo, createElement } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
-import { U as UrlDefinition } from "../chunks/index12.js";
+import { U as UrlDefinition } from "../chunks/index13.js";
 import { useService } from "@wix/services-manager-react";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";

package/dist/site/components/TextBox/component.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { F as Field, T as Tooltip, I as Input_Input_Input } from "../chunks/index11.js";
+import { F as Field, T as Tooltip, I as Input_Input_Input } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";