+
{tagName && (
,
+ elementWidth: number,
+ zoom: number
+) {
+ const [leftOffset, setLeftOffset] = React.useState(0);
+
+ React.useLayoutEffect(() => {
+ if (tagRef.current) {
+ const tagWidth = tagRef.current.offsetWidth;
+ const scaledElementWidth = elementWidth * zoom;
+ setLeftOffset(
+ scaledElementWidth < tagWidth ? scaledElementWidth - tagWidth : 0
+ );
+ }
+ }, [elementWidth, zoom, tagRef]);
+
+ return leftOffset;
+}
diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx
index 92b25d18693..73b97f2d287 100644
--- a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx
+++ b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx
@@ -31,7 +31,7 @@ import * as React from "react";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
import defer = setTimeout;
-const elementInteractionsLabel = "Element Interactions";
+const elementInteractionsLabel = "Element Variants";
const styleVariantsLabel = "Component Interactions";
const codeComponentVariantsLabel = "Registered Variants";
const baseLabel = "Base";
diff --git a/platform/wab/src/wab/client/components/canvas/canvas-cache.ts b/platform/wab/src/wab/client/components/canvas/canvas-cache.ts
index bc51ec312a8..5cd2ebad1b7 100644
--- a/platform/wab/src/wab/client/components/canvas/canvas-cache.ts
+++ b/platform/wab/src/wab/client/components/canvas/canvas-cache.ts
@@ -62,6 +62,8 @@ function computeHashFromStableFields(node: TplNode, ctx: RenderingCtx) {
ctx.updateVariant,
JSON.stringify(ctx.visibilityOptions),
ctx.isDraggingObject,
+ ctx.viewCtx.studioCtx.isAutoOpenMode,
+ ctx.viewCtx.disabledAutoOpenUuid,
];
}
diff --git a/platform/wab/src/wab/client/components/canvas/canvas-ctx.ts b/platform/wab/src/wab/client/components/canvas/canvas-ctx.ts
index c057cf8718b..04089082314 100644
--- a/platform/wab/src/wab/client/components/canvas/canvas-ctx.ts
+++ b/platform/wab/src/wab/client/components/canvas/canvas-ctx.ts
@@ -11,10 +11,12 @@ import {
getCanvasPkgs,
getReactWebBundle,
getSortedHostLessPkgs,
+ getVersionForCanvasPackages,
} from "@/wab/client/components/studio/studio-bundles";
import * as domMod from "@/wab/client/dom";
import { NodeAndOffset } from "@/wab/client/dom";
import { scriptExec, upsertJQSelector } from "@/wab/client/dom-utils";
+import { PlasmicWindowInternals } from "@/wab/client/frame-ctx/windows";
import { reduceImageSize } from "@/wab/client/image/transform";
import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx";
@@ -145,7 +147,10 @@ export class CanvasCtx {
this._hostLessPkgsLock = new Promise(
spawnWrapper(async (resolve: () => void) => {
await previousFetch;
- const pkgsData = await getSortedHostLessPkgs(pkgs);
+ const pkgsData = await getSortedHostLessPkgs(
+ pkgs,
+ getVersionForCanvasPackages(this._win)
+ );
runInAction(() => {
// We run in action because `installedHostLessPkgs` is observable
// so we want computed values to re-compute only after all packages
@@ -323,9 +328,11 @@ export class CanvasCtx {
)
);
+ (this._win as any).__PLASMIC__ = {
+ EXECUTE_SERVER_QUERY: sc.executeServerQuery,
+ } as PlasmicWindowInternals;
// Overwrite the default executePlasmicDataOp with a custom one for in-studio use
(this._win as any).__PLASMIC_EXECUTE_DATA_OP = sc.executePlasmicDataOp;
-
// Cache interaction information in studio
(this._win as any).__PLASMIC_CACHE_$STEP_VALUE = sc.save$stepValue;
(this._win as any).__PLASMIC_CACHE_EVENT_ARGS = sc.saveInteractionArgs;
diff --git a/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts b/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
index 90bb15c3039..345f1e54aa9 100755
--- a/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
+++ b/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
@@ -89,6 +89,7 @@ import {
isBuiltinCodeComponent,
} from "@/wab/shared/code-components/builtin-code-components";
import {
+ customFunctionId,
isCodeComponentWithHelpers,
isPlainObjectPropType,
tryGetStateHelpers,
@@ -114,6 +115,7 @@ import {
makeWabSlotClassName,
makeWabTextClassName,
} from "@/wab/shared/codegen/react-p/serialize-utils";
+import { isServerQueryWithOperation } from "@/wab/shared/codegen/react-p/server-queries/utils";
import { deriveReactHookSpecs } from "@/wab/shared/codegen/react-p/utils";
import {
paramToVarName,
@@ -133,6 +135,7 @@ import {
switchType,
tuple,
unexpected,
+ unreachable,
withDefaultFunc,
withoutNils,
} from "@/wab/shared/common";
@@ -144,6 +147,7 @@ import {
isCodeComponent,
isHostLessCodeComponent,
} from "@/wab/shared/core/components";
+import { getCustomFunctionParams } from "@/wab/shared/core/custom-functions";
import {
ExprCtx,
InteractionArgLoc,
@@ -189,6 +193,7 @@ import {
RawTextLike,
TplTextTag,
ancestorsUp,
+ computeAncestorsValKey,
getNumberOfRepeatingAncestors,
getOwnerSite,
isExprText,
@@ -280,6 +285,11 @@ import {
makeVariantComboSorter,
sortedVariantSettings,
} from "@/wab/shared/variant-sort";
+import {
+ TplVisibility,
+ getEffectiveVsVisibility,
+ normalizeDisplayValue,
+} from "@/wab/shared/visibility-utils";
import type { usePlasmicInvalidate } from "@plasmicapp/data-sources";
import { DataDict, mkMetaName } from "@plasmicapp/host";
import { $StateSpec } from "@plasmicapp/react-web";
@@ -1259,6 +1269,67 @@ export function renderTplNode(node: TplNode, ctx: RenderingCtx) {
);
}
+function getAutoOpenSelectionInfo(ctx: RenderingCtx, node: TplNode) {
+ return computedFn(
+ () => {
+ // Ensuring that the depencies are tracked
+ const isInteractive = ctx.viewCtx.studioCtx.isInteractiveMode;
+ const isAutoOpenMode = ctx.viewCtx.studioCtx.isAutoOpenMode;
+ const disabledAutoOpenUuid = ctx.viewCtx.disabledAutoOpenUuid;
+ // The reason why we are using the focusedTplDeepAncestorPath is because
+ // we can't rely on ValNodes or the dom to determine if a node is selected
+ // or not. Since code components are able to conditonally render content
+ // without our knowledge, even us being the ones that provide the content
+ // for the slot, we can't be sure wether the content is attached to the
+ // React tree. Our option is to rely on the model and based on the tpl nodes
+ // stretch the focused elements to include all the tpls that we are able to find.
+ //
+ // The reason for streching the selection is because code components can
+ // have the slot being proxied by a plasmic component, so we need to make sure
+ // that the selection is also handled through it.
+ const path = ctx.viewCtx.focusedTplAncestorsThroughComponents();
+ const nodeIdx = path?.findIndex((s) => s.node === node) ?? -1;
+
+ if (
+ isInteractive ||
+ !isAutoOpenMode ||
+ disabledAutoOpenUuid ||
+ !path ||
+ nodeIdx === -1
+ ) {
+ return {
+ id: node.uuid,
+ isSelected: false,
+ selectedSlotName: null,
+ };
+ }
+
+ const nodeAncestors = path.slice(nodeIdx);
+ const ancestorsKeyPath = computeAncestorsValKey(nodeAncestors);
+
+ // If it's truly selected, we should have the ancestors key as a suffix, since there is
+ // a prefix containing the current component instance and global contexts and that is not
+ // explicitly part of the model, but only how the rendering is done.
+ const isSelected = ctx.valKey.endsWith(ancestorsKeyPath);
+
+ const descendant = nodeIdx > 0 ? path[nodeIdx - 1].node : null;
+
+ return {
+ id: node.uuid,
+ isSelected,
+ selectedSlotName:
+ isSelected && isSlotSelection(descendant)
+ ? descendant?.slotParam?.variable.name
+ : null,
+ };
+ },
+ {
+ name: "getAutoOpenSelectionInfo",
+ equals: comparer.structural,
+ }
+ )();
+}
+
function renderReppable(tplNode: TplNode, ctx: RenderingCtx) {
const node = ensureInstance(tplNode, TplTag, TplComponent, TplSlot);
const activeVSettings = getSortedActiveVariantSettings(node, ctx);
@@ -1389,22 +1460,15 @@ function renderTplComponent(
ctx: RenderingCtx,
activeVSettings: VariantSetting[]
): React.ReactElement | null {
- const dataCondExpr = getCondExpr(activeVSettings, ctx);
- const exprCtx: ExprCtx = {
- component: ctx.ownerComponent ?? null,
- projectFlags: ctx.projectFlags,
- inStudio: true,
- };
- const dataCond =
- dataCondExpr == null
- ? true
- : evalCodeWithEnv(
- getCodeExpressionWithFallback(dataCondExpr, exprCtx),
- ctx.env,
- ctx.viewCtx.canvasCtx.win()
- );
+ const effectiveVs = new EffectiveVariantSetting(
+ node,
+ activeVSettings,
+ ctx.site
+ );
- if (!dataCond) {
+ const { rendered } = determineAutoOpenState(ctx, node, effectiveVs);
+
+ if (!rendered) {
return null;
}
@@ -1423,11 +1487,12 @@ function renderTplComponent(
return null;
}
- const effectiveVs = new EffectiveVariantSetting(
- node,
- activeVSettings,
- ctx.site
- );
+ const exprCtx: ExprCtx = {
+ component: ctx.ownerComponent ?? null,
+ projectFlags: ctx.projectFlags,
+ inStudio: true,
+ };
+
const props = computeTplComponentArgs(node, effectiveVs, ctx);
const isComponentRoot = ctx.ownerComponent?.tplTree === node;
const positionClassName = uniqifyClassName(
@@ -1697,64 +1762,15 @@ function renderTplComponent(
});
}
- if (isCodeComponent(node.component) && ctx.projectFlags.autoOpen) {
- const codeComponentSelectionInfo = computedFn(
- () => {
- // Ensuring that the depencies are tracked
- const isInteractive = ctx.viewCtx.studioCtx.isInteractiveMode;
- const isAutoOpenMode = ctx.viewCtx.studioCtx.isAutoOpenMode;
-
- // The reason why we are using the focusedTplDeepAncestorPath is because
- // we can't rely on ValNodes or the dom to determine if a node is selected
- // or not. Since code components are able to conditonally render content
- // without our knowledge, even us being the ones that provide the content
- // for the slot, we can't be sure wether the content is attached to the
- // React tree. Our option is to rely on the model and based on the tpl nodes
- // stretch the focused elements to include all the tpls that we are able to find.
- //
- // The reason for streching the selection is because code components can
- // have the slot being proxied by a plasmic component, so we need to make sure
- // that the selection is also handled through it.
- const path = ctx.viewCtx.focusedTplAncestorsThroughComponents();
- const nodeIdx = path?.findIndex((s) => s === node) ?? -1;
-
- if (isInteractive || !isAutoOpenMode || !path || nodeIdx === -1) {
- return {
- id: node.uuid,
- isSelected: false,
- selectedSlotName: null,
- };
- }
-
- // We now need to know whether this node is really selected or not since
- // when dealing with proxied components the same node will be reused for
- // rendering, we will then look into all tpl node ancestors and if they
- // are present in the valKey
- const nodeAncestors = path.slice(nodeIdx);
- const isSelected = nodeAncestors.every((ancestor) => {
- return (
- isSlotSelection(ancestor) || ctx.valKey.includes(ancestor.uuid)
- );
- });
-
- const descendant = nodeIdx > 0 ? path[nodeIdx - 1] : null;
-
- return {
- id: node.uuid,
- isSelected,
- selectedSlotName:
- isSelected && isSlotSelection(descendant)
- ? descendant?.slotParam?.variable.name
- : null,
- };
- },
- {
- name: "canvasCodeComponentCtxValue",
- equals: comparer.structural,
- }
- )();
-
+ if (isCodeComponent(node.component)) {
+ const codeComponentSelectionInfo = getAutoOpenSelectionInfo(ctx, node);
props[INTERNAL_CC_CANVAS_SELECTION_PROP] = codeComponentSelectionInfo;
+ props["plasmicNotifyAutoOpenedContent"] = () => {
+ ctx.viewCtx.autoOpenedUuid =
+ node.component.params.find(
+ (p) => p.variable.name === codeComponentSelectionInfo.selectedSlotName
+ )?.uuid ?? node.uuid;
+ };
}
let elt = createPlasmicElementProxy(node, ctx, ComponentImpl, props);
@@ -2237,7 +2253,7 @@ function getComponentRootTagResetClassNames(
targetEnv: "canvas",
prefix: "__wab_",
}
- )}`,
+ )}` || undefined,
]);
}
@@ -2305,20 +2321,9 @@ function renderTplTag(
effectiveVsWithoutDisabled
);
- const dataCondExpr = getCondExpr(activeVSettings, ctx);
- const dataCond =
- dataCondExpr == null
- ? true
- : evalCodeWithEnv(
- getCodeExpressionWithFallback(dataCondExpr, {
- component: ctx.ownerComponent ?? null,
- projectFlags: ctx.projectFlags,
- inStudio: true,
- }),
- ctx.env,
- ctx.viewCtx.canvasCtx.win()
- );
- if (!dataCond) {
+ const { rendered, style } = determineAutoOpenState(ctx, node, effectiveVs);
+
+ if (!rendered) {
return null;
}
@@ -2458,6 +2463,13 @@ function renderTplTag(
(ctx.env.$refs[ensure(node.name, `Only named tpls can have ref`)] = ref);
}
+ if (style) {
+ attrs["style"] = {
+ ...(attrs["style"] ?? {}),
+ ...style,
+ };
+ }
+
if (isTplTextBlock(node)) {
return ctx.sub.React.createElement(mkRichText(ctx.sub.React), {
ctx,
@@ -2725,6 +2737,105 @@ function getCondExpr(
return null;
}
+function evalDataCondExpr(
+ ctx: RenderingCtx,
+ effectiveVs: EffectiveVariantSetting
+) {
+ const dataCondExpr = effectiveVs.dataCond;
+ const exprCtx: ExprCtx = {
+ component: ctx.ownerComponent ?? null,
+ projectFlags: ctx.projectFlags,
+ inStudio: true,
+ };
+ const dataCondResult =
+ dataCondExpr == null
+ ? true
+ : evalCodeWithEnv(
+ getCodeExpressionWithFallback(dataCondExpr, exprCtx),
+ ctx.env,
+ ctx.viewCtx.canvasCtx.win()
+ );
+ return !!dataCondResult;
+}
+
+function determineAutoOpenState(
+ ctx: RenderingCtx,
+ node: TplNode,
+ effectiveVs: EffectiveVariantSetting
+) {
+ function getVisibilityWithAutoOpen() {
+ const visibility = getEffectiveVsVisibility(effectiveVs);
+
+ switch (visibility) {
+ case TplVisibility.Visible: {
+ return {
+ rendered: true,
+ autoOpened: false,
+ };
+ }
+
+ case TplVisibility.NotRendered:
+ case TplVisibility.CustomExpr: {
+ const autoOpenInfo = getAutoOpenSelectionInfo(ctx, node);
+ const dataCondResult = evalDataCondExpr(ctx, effectiveVs);
+ if (dataCondResult) {
+ return {
+ rendered: true,
+ autoOpened: false,
+ };
+ }
+
+ if (!ctx.projectFlags.autoOpen2) {
+ return {
+ rendered: false,
+ autoOpened: false,
+ };
+ }
+
+ return {
+ rendered: autoOpenInfo.isSelected,
+ autoOpened: autoOpenInfo.isSelected,
+ };
+ }
+
+ case TplVisibility.DisplayNone: {
+ const autoOpenInfo = getAutoOpenSelectionInfo(ctx, node);
+ // Auto Open is not yet supported for TplComponents / images with Visibility.DisplayNone
+ if (!ctx.projectFlags.autoOpen2 || isTplComponent(node)) {
+ return {
+ rendered: true,
+ autoOpened: false,
+ };
+ }
+
+ return {
+ rendered: true,
+ style: autoOpenInfo.isSelected
+ ? {
+ display: normalizeDisplayValue(
+ effectiveVs.rsh().get("display")
+ ),
+ }
+ : undefined,
+ autoOpened: autoOpenInfo.isSelected,
+ };
+ }
+
+ default: {
+ unreachable(visibility);
+ }
+ }
+ }
+
+ const state = getVisibilityWithAutoOpen();
+
+ if (state.autoOpened) {
+ ctx.viewCtx.autoOpenedUuid = node.uuid;
+ }
+
+ return state;
+}
+
function deriveTplTagChildren(
node: TplTag,
ctx: RenderingCtx,
@@ -3119,21 +3230,13 @@ function renderTplSlot(
ctx: RenderingCtx,
activeVSettings: VariantSetting[]
): React.ReactElement | null {
- const dataCondExpr = getCondExpr(activeVSettings, ctx);
- const dataCond =
- dataCondExpr == null
- ? true
- : evalCodeWithEnv(
- getCodeExpressionWithFallback(dataCondExpr, {
- component: ctx.ownerComponent ?? null,
- projectFlags: ctx.projectFlags,
- inStudio: true,
- }),
- ctx.env,
- ctx.viewCtx.canvasCtx.win()
- );
+ const { rendered } = determineAutoOpenState(
+ ctx,
+ node,
+ new EffectiveVariantSetting(node, activeVSettings, ctx.site)
+ );
- if (!dataCond) {
+ if (!rendered) {
return null;
}
@@ -3576,8 +3679,8 @@ const mkComponentLevelQueryFetcher = computedFn(
);
}
: undefined;
- const new$Queries = Object.fromEntries(
- component.dataQueries
+ const new$Queries = Object.fromEntries([
+ ...component.dataQueries
.filter((query) => !!query.op)
.map(
(query) =>
@@ -3585,8 +3688,37 @@ const mkComponentLevelQueryFetcher = computedFn(
toVarName(query.name),
sub.dataSources?.usePlasmicDataOp(getDataOp(query)),
] as const
- )
- );
+ ),
+ ...component.serverQueries
+ .filter(isServerQueryWithOperation)
+ .map((query) => {
+ const funcId = customFunctionId(query.op.func);
+ const funcReg = ctx.viewCtx.canvasCtx
+ .getRegisteredFunctionsMap()
+ .get(funcId);
+ if (!funcReg) {
+ return [toVarName(query.name), undefined] as const;
+ }
+ return [
+ toVarName(query.name),
+ sub.dataSources?.usePlasmicServerQuery({
+ id: funcId,
+ fn: funcReg.function,
+ execParams: () =>
+ getCustomFunctionParams(
+ query.op,
+ ctx.env,
+ {
+ component,
+ projectFlags: ctx.projectFlags,
+ inStudio: true,
+ },
+ ctx.viewCtx.canvasCtx.win()
+ ),
+ }),
+ ] as const;
+ }),
+ ]);
defer(() => {
Object.keys(new$Queries).forEach((k) => {
try {
@@ -3644,7 +3776,8 @@ function wrapInComponentDataQueries(ctx: RenderingCtx, component: Component) {
mkComponentLevelQueryFetcher(
ctx.sub,
ctx.viewCtx,
- component.dataQueries.filter((query) => !!query.op).length
+ component.dataQueries.filter((query) => !!query.op).length +
+ component.serverQueries.filter(isServerQueryWithOperation).length
),
{
ctx,
diff --git a/platform/wab/src/wab/client/components/canvas/subdeps.ts b/platform/wab/src/wab/client/components/canvas/subdeps.ts
index 218467543c1..1eff22336f9 100644
--- a/platform/wab/src/wab/client/components/canvas/subdeps.ts
+++ b/platform/wab/src/wab/client/components/canvas/subdeps.ts
@@ -11,10 +11,13 @@ import type {
} from "@plasmicapp/host";
import type * as ReactWeb from "@plasmicapp/react-web";
import type * as PlasmicDataSources from "@plasmicapp/react-web/lib/data-sources";
+import type * as PlasmicQuery from "@plasmicapp/react-web/lib/query";
import type domAlign from "dom-align";
import type $ from "jquery";
import type React from "react";
import type ReactDOM from "react-dom";
+import type * as jsxDevRuntime from "react/jsx-dev-runtime";
+import type * as jsxRuntime from "react/jsx-runtime";
import type ResizeObserver from "resize-observer-polyfill";
import type * as slate from "slate";
import type * as slateReact from "slate-react";
@@ -205,6 +208,8 @@ export interface SubDeps {
hostVersion: string | undefined;
React: typeof React;
ReactDOM: typeof ReactDOM;
+ jsxRuntime?: typeof jsxRuntime;
+ jsxDevRuntime?: typeof jsxDevRuntime;
ResizeObserver: typeof ResizeObserver;
slate: typeof slate;
slateReact: typeof slateReact;
@@ -224,6 +229,7 @@ export interface SubDeps {
setRepeatedElementFn?: (fn: RepeatedElementFnType) => void;
GenericErrorBoundary: React.ComponentType<{ className?: string }>;
PlasmicCanvasContext?: typeof PlasmicCanvasContext;
+ PlasmicQuery?: typeof PlasmicQuery;
PageParamsProvider: typeof PageParamsProvider;
DataProvider: typeof DataProvider;
DataContext: typeof DataContext;
diff --git a/platform/wab/src/wab/client/components/canvas/view-ops.tsx b/platform/wab/src/wab/client/components/canvas/view-ops.tsx
index 5b3d4deeaaa..06f67648690 100644
--- a/platform/wab/src/wab/client/components/canvas/view-ops.tsx
+++ b/platform/wab/src/wab/client/components/canvas/view-ops.tsx
@@ -7,7 +7,6 @@ import {
FrameViewMode,
isDuplicatableFrame,
isMixedArena,
- isPositionManagedFrame,
} from "@/wab/shared/Arenas";
import { toVarName } from "@/wab/shared/codegen/util";
import {
@@ -130,10 +129,6 @@ import L, { clamp, isArray, merge } from "lodash";
import pluralize from "pluralize";
import React from "react";
-import {
- getEventDataForTplComponent,
- trackInsertItem,
-} from "@/wab/client/analytics/events/insert-item";
import {
FrameClip,
isStyleClip,
@@ -167,6 +162,10 @@ import { getBackgroundImageProps } from "@/wab/client/dom-utils";
import { showError } from "@/wab/client/ErrorNotifications";
import { FocusHeuristics } from "@/wab/client/focus-heuristics";
import { renderCantAddMsg } from "@/wab/client/messages/parenting-msgs";
+import {
+ getEventDataForTplComponent,
+ trackInsertItem,
+} from "@/wab/client/observability/events/insert-item";
import { promptComponentName, promptPageName } from "@/wab/client/prompts";
import { getComboForAction } from "@/wab/client/shortcuts/studio/studio-shortcuts";
import { ComponentCtx } from "@/wab/client/studio-ctx/component-ctx";
@@ -261,6 +260,7 @@ import {
isBaseVariant,
isGlobalVariant,
isPrivateStyleVariant,
+ toVariantKey,
tryGetBaseVariantSetting,
tryGetPrivateStyleVariant,
VariantCombo,
@@ -583,7 +583,7 @@ export class ViewOps {
// changes made to frame's top and left props,
// to make sure we have a smooth resizing,
// we directly update them here
- if (isPositionManagedFrame(this.studioCtx(), frame)) {
+ if (this.studioCtx().isPositionManagedFrame(frame)) {
const domElt = this.viewCtx().canvasCtx.viewportContainer();
domElt.style.setProperty("width", `${rect.width}px`);
domElt.style.setProperty("height", `${rect.height}px`);
@@ -594,7 +594,7 @@ export class ViewOps {
window.requestAnimationFrame(() => {
this.change(() => {
- if (isPositionManagedFrame(this.studioCtx(), frame)) {
+ if (this.studioCtx().isPositionManagedFrame(frame)) {
frame.top = rect.top;
frame.left = rect.left;
}
@@ -2625,6 +2625,7 @@ export class ViewOps {
common.assert(!!base && base.variants[0] === component.variants[0]);
// fix private style variant by cloning.
+ const clonedPrivateStyleVariants = new Map();
newNode.vsettings.forEach((vs) => {
const privateSV = tryGetPrivateStyleVariant(vs.variants);
if (privateSV) {
@@ -2633,10 +2634,21 @@ export class ViewOps {
index !== -1,
"Unexpected not found privateSV in variant list"
);
+ const privateSVKey = toVariantKey(privateSV);
+ // Reuse the cloned version if it already exists.
+ const variant = clonedPrivateStyleVariants.get(privateSVKey)!;
+ if (variant) {
+ vs.variants[index] = variant;
+ return;
+ }
const clonedPrivateSV = cloneVariant(privateSV);
clonedPrivateSV.forTpl = newNode;
- vs.variants[index] = clonedPrivateSV;
component.variants.push(clonedPrivateSV);
+ clonedPrivateStyleVariants.set(
+ toVariantKey(privateSV),
+ clonedPrivateSV
+ );
+ vs.variants[index] = clonedPrivateSV;
}
});
}
@@ -3340,11 +3352,6 @@ export class ViewOps {
}
for (const item of uniqAdoptees) {
- const itemRect = item.domBox.rect();
- const parentOffset = new Pt(
- itemRect.left - parentRect.left,
- itemRect.top - parentRect.top
- );
const opts = isStack ? { keepFree: false } : undefined;
this.insertAsChild(item.val.tpl, cmptTpl, opts);
}
@@ -4622,7 +4629,7 @@ export class ViewOps {
imageUri = mkImageAssetRef(asset);
}
} else {
- imageUri = exprs.tryExtractLit(srcAttr);
+ imageUri = exprs.tryExtractString(srcAttr);
}
if (!imageUri) {
@@ -4710,6 +4717,11 @@ export class ViewOps {
.variantTplMgr()
.getTargetVariantComboForNode(tpl, { forVisibility: true });
setTplVisibility(tpl, combo, visibility);
+ if (visibility === TplVisibility.Visible) {
+ this.viewCtx().resetAutoOpenState();
+ } else {
+ this.viewCtx().disabledAutoOpenUuid = tpl.uuid;
+ }
};
setDataCond = (tpl: TplNode, cond: CustomCode | ObjectPath) => {
@@ -5051,7 +5063,7 @@ export function getMergedTextArg(tpl: TplComponent) {
return slotParams[0][1];
} else {
const childrenSlot = slotParams.find(
- ([p, t]) => p.variable.name === "children"
+ ([p, _t]) => p.variable.name === "children"
);
if (childrenSlot) {
return childrenSlot[1];
diff --git a/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx b/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx
index 4516e84427a..e12c09d2bb4 100644
--- a/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx
+++ b/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx
@@ -90,7 +90,7 @@ function CmsEntriesList_(
const row = await api.createCmsRow(tableId, {
identifier: undefined,
data: null,
- draftData: {},
+ draftData: { "": {} },
});
await mutateTableRows(tableId);
history.push(
diff --git a/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx b/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx
index 9c3e03774b5..c22a2821973 100644
--- a/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx
+++ b/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx
@@ -21,6 +21,7 @@ import {
DefaultCmsEntryDetailsProps,
PlasmicCmsEntryDetails,
} from "@/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails";
+import { isUniqueViolationError } from "@/wab/shared/ApiErrors/cms-errors";
import {
ApiCmsDatabase,
ApiCmseRow,
@@ -28,9 +29,12 @@ import {
CmsDatabaseId,
CmsFieldMeta,
CmsMetaType,
+ CmsRowData,
CmsRowId,
CmsTableId,
+ UniqueFieldCheck,
} from "@/wab/shared/ApiSchema";
+import { getNullUniqueFieldsData, getUniqueFieldsData } from "@/wab/shared/cms";
import { Dict } from "@/wab/shared/collections";
import { spawn } from "@/wab/shared/common";
import { DEVFLAGS } from "@/wab/shared/devflags";
@@ -44,6 +48,30 @@ import { Prompt, Route, useHistory, useRouteMatch } from "react-router";
import { useBeforeUnload, useInterval } from "react-use";
export type CmsEntryDetailsProps = DefaultCmsEntryDetailsProps;
+export type UniqueFieldStatus =
+ | {
+ value: unknown;
+ status: "not started" | "pending" | "ok";
+ }
+ | {
+ value: unknown;
+ status: "violation";
+ conflictRowId: CmsRowId;
+ };
+
+function dataToUniqueStatus(
+ uniqueData: Dict,
+ status: "not started" | "pending" | "ok"
+): Dict {
+ const uniqueStatus: Dict = {};
+ Object.entries(uniqueData).forEach(([fieldIdentifier, fieldValue]) => {
+ uniqueStatus[fieldIdentifier] = {
+ value: fieldValue,
+ status: status,
+ };
+ });
+ return uniqueStatus as Dict;
+}
function getRowIdentifierText(
table: ApiCmsTable,
@@ -119,13 +147,14 @@ export function renderContentEntryFormFields(
table: ApiCmsTable,
database: ApiCmsDatabase,
locales: string[],
- disabled: boolean
+ disabled: boolean,
+ uniqueFieldStatus?: Dict
) {
return (
<>
{table.schema.fields
.filter((field: CmsFieldMeta) => !field.hidden)
- .map((field: CmsFieldMeta, index) => (
+ .map((field: CmsFieldMeta) => (
+ >(() => {
+ if (row.draftData) {
+ const uniqueDraftFields = getUniqueFieldsData(
+ table,
+ row.draftData as CmsRowData
+ );
+ return dataToUniqueStatus(uniqueDraftFields, "not started");
+ } else {
+ const uniquePublishedFields = getUniqueFieldsData(
+ table,
+ row.data as CmsRowData
+ );
+ return dataToUniqueStatus(uniquePublishedFields, "ok");
+ }
+ });
+ const handleUniqueFieldChecks = React.useCallback(
+ (checks: UniqueFieldCheck[]) => {
+ setUniqueFieldsStatus((prev) => {
+ const copy = { ...prev };
+ checks.forEach((check) => {
+ if (check.conflictRowId) {
+ copy[check.fieldIdentifier] = {
+ value: check.value,
+ status: "violation",
+ conflictRowId: check.conflictRowId,
+ };
+ } else {
+ copy[check.fieldIdentifier] = {
+ value: check.value,
+ status: "ok",
+ };
+ }
+ });
+ return copy;
+ });
+ },
+ [setUniqueFieldsStatus]
+ );
+
+ const isSomeUniqueStatus = (status: string) => {
+ return Object.values(uniqueFieldsStatus).some(
+ (fieldStatus) => fieldStatus.status === status
+ );
+ };
+ const isUniqueFieldUpdated = React.useMemo(
+ () => isSomeUniqueStatus("not started"),
+ [uniqueFieldsStatus]
+ );
+ const isCheckingUniqueness = React.useMemo(
+ () => isSomeUniqueStatus("pending"),
+ [uniqueFieldsStatus]
+ );
+ const hasUniqueViolation = React.useMemo(
+ () => isSomeUniqueStatus("violation"),
+ [uniqueFieldsStatus]
+ );
+
const mutateRow = async () => {
const newRow = await mutateRow_(table.id, row.id);
if (newRow) {
@@ -203,19 +294,19 @@ function CmsEntryDetailsForm_(
}, [form]);
const dataEquals = (
- data1: Dict> | null | undefined,
- data2: Dict> | null | undefined
+ data1: CmsRowData | null | undefined,
+ data2: CmsRowData | null | undefined
) => {
const fields = table.schema.fields
.filter((f) => !f.hidden)
.map((f) => f.identifier);
return isEqual(
mapValues(
- pickBy(data1, (v, k) => !isNil(v)),
+ pickBy(data1, (v, _k) => !isNil(v)),
(v) => pickBy(v, (v2, k) => !isNil(v2) && fields?.includes(k))
),
mapValues(
- pickBy(data2, (v, k) => !isNil(v)),
+ pickBy(data2, (v, _k) => !isNil(v)),
(v) => pickBy(v, (v2, k) => !isNil(v2) && fields?.includes(k))
)
);
@@ -228,7 +319,7 @@ function CmsEntryDetailsForm_(
return Object.fromEntries(
Object.entries(obj)
.map(([key, value]) => [key, removeUndefined(value)])
- .filter(([key, value]) => value !== undefined)
+ .filter(([_key, value]) => value !== undefined)
);
} else {
return obj;
@@ -293,6 +384,50 @@ function CmsEntryDetailsForm_(
setInConflict(true);
};
+ async function checkUniqueness() {
+ const updatedUniqueFields = Object.entries(uniqueFieldsStatus).reduce(
+ (acc, [fieldIdentifier, fieldStatus]) => {
+ if (fieldStatus.status === "not started") {
+ acc[fieldIdentifier] = fieldStatus.value;
+ }
+ return acc;
+ },
+ {}
+ );
+
+ if (Object.keys(updatedUniqueFields).length === 0) {
+ return;
+ }
+
+ setUniqueFieldsStatus((prev) => {
+ const copy = { ...prev };
+ Object.keys(updatedUniqueFields).forEach((fieldIdentifier) => {
+ copy[fieldIdentifier] = { ...copy[fieldIdentifier], status: "pending" };
+ });
+ return copy;
+ });
+
+ const hideLoadingMessage = message.loading({
+ key: "uniqueness-message",
+ content: `Checking uniqueness violation...`,
+ });
+
+ const checks = await api.checkUniqueFields(table.id, {
+ rowId: row.id,
+ uniqueFieldsData: updatedUniqueFields,
+ });
+ hideLoadingMessage();
+
+ handleUniqueFieldChecks(checks);
+ try {
+ await form.validateFields();
+ } catch (err) {
+ /* The validateFields function throws an error with details if any field has an error.
+ We are ignoring this error because we just want to trigger the field validation and
+ antd will automatically show warnings/errors to the user. */
+ }
+ }
+
async function performSave() {
const { identifier, ...draftData } = form.getFieldsValue();
try {
@@ -307,7 +442,7 @@ function CmsEntryDetailsForm_(
setHasUnsavedChanges(false);
} catch (err) {
setSaving(false);
- if (err.statusCode === 400) {
+ if (err.statusCode === 409) {
warnConflict();
}
}
@@ -341,9 +476,14 @@ function CmsEntryDetailsForm_(
setRevision(row.revision);
await resetFormByRow();
}
- } else if (hasChanges() && !hasFormError()) {
- if (!isSaving) {
- spawn(performSave());
+ } else {
+ if (!hasFormError()) {
+ if (hasChanges() && !isSaving) {
+ spawn(performSave());
+ }
+ }
+ if (isUniqueFieldUpdated && !isCheckingUniqueness) {
+ spawn(checkUniqueness());
}
}
}, 2000);
@@ -405,11 +545,26 @@ function CmsEntryDetailsForm_(
}}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
- onValuesChange={(changedValues, allValues) => {
+ onValuesChange={(changedValues: CmsRowData, allValues) => {
if (Object.keys(changedValues).length > 0) {
setHasUnsavedChanges(hasChanges());
setHasUnpublishedChanges(hasPublishableChanges());
console.log({ changedFields: changedValues, allFields: allValues });
+ setUniqueFieldsStatus((prev) => {
+ const changedUniqueData = getUniqueFieldsData(
+ table,
+ changedValues
+ );
+ const nullUniqueData = getNullUniqueFieldsData(
+ table,
+ changedValues
+ );
+ return {
+ ...prev,
+ ...dataToUniqueStatus(changedUniqueData, "not started"),
+ ...dataToUniqueStatus(nullUniqueData, "ok"),
+ };
+ });
}
}}
className={"max-scrollable fill-width"}
@@ -476,36 +631,46 @@ function CmsEntryDetailsForm_(
setPublishing(true);
const { identifier, ...draftData } =
form.getFieldsValue();
- await api.updateCmsRow(row.id, {
- identifier,
- data: draftData,
- draftData: null,
- revision,
- });
- await mutateRow();
- setPublishing(false);
- setHasUnpublishedChanges(false);
- await message.success({
- content: "Your changes have been published.",
- duration: 5,
- });
- const hooks = table.settings?.webhooks?.filter(
- (hook) => hook.event === "publish"
- );
- if (hooks && hooks.length > 0) {
- const hooksResp = await api.triggerCmsTableWebhooks(
- table.id,
- "publish"
- );
- const failed = hooksResp.responses.filter(
- (r) => r.status !== 200
+ try {
+ await api.updateCmsRow(row.id, {
+ identifier,
+ data: draftData,
+ draftData: null,
+ revision,
+ });
+ await mutateRow();
+ setHasUnpublishedChanges(false);
+ await message.success({
+ content: "Your changes have been published.",
+ duration: 5,
+ });
+ const hooks = table.settings?.webhooks?.filter(
+ (hook) => hook.event === "publish"
);
- if (failed.length > 0) {
- await message.warning({
- content: "Some publish hooks failed.",
- duration: 5,
- });
+ if (hooks && hooks.length > 0) {
+ const hooksResp = await api.triggerCmsTableWebhooks(
+ table.id,
+ "publish"
+ );
+ const failed = hooksResp.responses.filter(
+ (r) => r.status !== 200
+ );
+ if (failed.length > 0) {
+ await message.warning({
+ content: "Some publish hooks failed.",
+ duration: 5,
+ });
+ }
+ }
+ } catch (err) {
+ if (isUniqueViolationError(err)) {
+ handleUniqueFieldChecks(err.violations);
+ await form.validateFields();
+ } else {
+ throw err;
}
+ } finally {
+ setPublishing(false);
}
}
}}
@@ -514,7 +679,9 @@ function CmsEntryDetailsForm_(
isPublishing ||
isSaving ||
hasUnsavedChanges ||
- hasFormError()
+ hasFormError() ||
+ isCheckingUniqueness ||
+ hasUniqueViolation
}
tooltip={
hasFormError()
@@ -640,7 +807,8 @@ function CmsEntryDetailsForm_(
table!,
database,
database.extraData.locales,
- inConflict
+ inConflict,
+ uniqueFieldsStatus
)}
}
diff --git a/platform/wab/src/wab/client/components/cms/CmsInputs.tsx b/platform/wab/src/wab/client/components/cms/CmsInputs.tsx
index b03c81e8184..658c5f22b11 100644
--- a/platform/wab/src/wab/client/components/cms/CmsInputs.tsx
+++ b/platform/wab/src/wab/client/components/cms/CmsInputs.tsx
@@ -1,9 +1,12 @@
-import { UU } from "@/wab/client/cli-routes";
+import { useRRouteMatch, UU } from "@/wab/client/cli-routes";
import {
useCmsRows,
useCmsTableMaybe,
} from "@/wab/client/components/cms/cms-contexts";
-import { getRowIdentifierNode } from "@/wab/client/components/cms/CmsEntryDetails";
+import {
+ getRowIdentifierNode,
+ UniqueFieldStatus,
+} from "@/wab/client/components/cms/CmsEntryDetails";
import { isCmsTextLike } from "@/wab/client/components/cms/utils";
import { PublicLink } from "@/wab/client/components/PublicLink";
import { FileUploader, Spinner } from "@/wab/client/components/widgets";
@@ -11,7 +14,7 @@ import Button from "@/wab/client/components/widgets/Button";
import "@/wab/client/components/widgets/ColorPicker/Pickr.overrides.scss";
import { Icon } from "@/wab/client/components/widgets/Icon";
import Select from "@/wab/client/components/widgets/Select";
-import Switch from "@/wab/client/components/widgets/Switch";
+import { Switch, SwitchProps } from "@/wab/client/components/widgets/Switch";
import { useAppCtx } from "@/wab/client/contexts/AppContexts";
import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus";
import {
@@ -45,6 +48,7 @@ import moment from "moment";
import * as React from "react";
import { createContext, ReactElement, ReactNode, useContext } from "react";
import { GrNewWindow } from "react-icons/all";
+import { useHistory } from "react-router";
const LazyRichTextEditor = React.lazy(
() => import("@/wab/client/components/RichTextEditor")
);
@@ -70,8 +74,12 @@ export function useContentEntryFormContext(): ContentEntryFormContextValue {
);
}
-export function ValueSwitch(props: any) {
- return
;
+export function ValueSwitch(
+ props: SwitchProps & { disabled?: boolean; value?: boolean }
+) {
+ return (
+
+ );
}
// TODO make sure this is in the local timezone
@@ -239,20 +247,55 @@ function MaybeFormItem({
typeName,
name,
label,
+ maxChars,
+ minChars,
+ uniqueStatus,
...props
}: Omit
& {
typeName: CmsTypeName;
name: NamePathz;
maxChars?: number;
minChars?: number;
+ uniqueStatus?: UniqueFieldStatus;
}) {
+ const history = useHistory();
+ const match = useRRouteMatch(UU.cmsEntry);
const commonRules = [
{ required: props.required, message: "Field is required" },
+ {
+ warningOnly: true,
+ validator: () => {
+ if (
+ uniqueStatus &&
+ uniqueStatus.status === "violation" &&
+ uniqueStatus.conflictRowId
+ ) {
+ const conflictingRowRoute = UU.cmsEntry.fill({
+ ...match!.params,
+ rowId: uniqueStatus.conflictRowId,
+ });
+ return Promise.reject(
+ <>
+ This unique field value conflicts with the published version of{" "}
+ {
+ history.push(conflictingRowRoute);
+ }}
+ >
+ this entry
+
+ .
+
+ );
+ }
+ return Promise.resolve();
+ },
+ },
];
const typeSpecificRules =
[CmsMetaType.TEXT, CmsMetaType.RICH_TEXT].includes(typeName) &&
- (props.minChars !== undefined || props.maxChars !== undefined)
- ? [{ max: props.maxChars }, { min: props.minChars }]
+ (minChars !== undefined || maxChars !== undefined)
+ ? [{ max: maxChars }, { min: minChars }]
: [];
const rules = [...commonRules, ...typeSpecificRules];
@@ -572,6 +615,7 @@ interface MaybeLocalizedInputProps {
fieldPathSuffix: string[];
formItemProps: FormItemProps;
typeName: CmsTypeName;
+ uniqueStatus?: UniqueFieldStatus;
}
export function renderMaybeLocalizedInput({
@@ -584,6 +628,7 @@ export function renderMaybeLocalizedInput({
formItemProps,
typeName,
required,
+ uniqueStatus,
}: MaybeLocalizedInputProps) {
return (
@@ -609,6 +654,7 @@ export function renderMaybeLocalizedInput({
required={required}
typeName={typeName}
{...formItemProps}
+ uniqueStatus={uniqueStatus}
name={[...fieldPath, "", ...fieldPathSuffix]}
>
{children}
@@ -643,6 +689,7 @@ export function renderMaybeLocalizedInput({
maxChars={maxChars}
minChars={minChars}
required={required}
+ uniqueStatus={uniqueStatus}
typeName={typeName}
name={[...fieldPath, locale, ...fieldPathSuffix]}
noStyle
diff --git a/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx b/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx
index 14e815ae7e3..394c80bd456 100644
--- a/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx
+++ b/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx
@@ -39,6 +39,7 @@ import {
CmsTypeMeta,
CmsTypeName,
} from "@/wab/shared/ApiSchema";
+import { ALLOWED_UNIQUE_TYPES } from "@/wab/shared/cms";
import {
ensureType,
jsonClone,
@@ -48,6 +49,7 @@ import {
uniqueName,
} from "@/wab/shared/common";
import { extractParamsFromPagePath } from "@/wab/shared/core/components";
+import { DEVFLAGS } from "@/wab/shared/devflags";
import { httpMethods } from "@/wab/shared/HttpClientUtil";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
import {
@@ -66,7 +68,12 @@ import * as React from "react";
import { Prompt, useHistory } from "react-router";
import { useBeforeUnload } from "react-use";
-export type CmsModelDetailsProps = DefaultCmsModelDetailsProps;
+const NESTED_TYPES = [CmsMetaType.LIST, CmsMetaType.OBJECT];
+
+const COLUMN_ITEM_PROPS = {
+ style: { width: "150px" },
+ labelCol: { span: 24 },
+};
function renderTypeSpecificSubform(
database: ApiCmsDatabase,
@@ -95,14 +102,22 @@ function renderTypeSpecificSubform(
})}
{[CmsMetaType.TEXT, CmsMetaType.LONG_TEXT].includes(typeName) && (
- <>
-
+
+
-
+
-
+
)}
);
@@ -119,7 +134,7 @@ function renderModelFieldForm(
fullFieldsPath: any[],
handles: any,
locales: string[],
- hasLocalization: boolean
+ isNested: boolean
) {
function moveBy(delta: number) {
const fields = form.getFieldValue(fullFieldsPath);
@@ -149,7 +164,7 @@ function renderModelFieldForm(
{
- const meta = cmsFieldMetaDefaults as any;
+ const meta: any = { ...cmsFieldMetaDefaults };
for (const key in meta) {
meta[key] = form.getFieldValue(fullFieldPath)[key];
}
@@ -160,15 +175,18 @@ function renderModelFieldForm(
// defaultValues are the most important fields to reset.
meta.defaultValueByLocale = {
"": undefined,
- ...(hasLocalization
+ ...(!isNested
? Object.fromEntries(
locales.map((locale) => tuple(locale, undefined))
)
: {}),
};
- if ([CmsMetaType.LIST, CmsMetaType.OBJECT].includes(meta.type)) {
+ if (NESTED_TYPES.includes(meta.type)) {
meta.fields = [];
}
+ if (!ALLOWED_UNIQUE_TYPES.includes(meta.type)) {
+ meta.unique = false;
+ }
const blob = jsonClone(form.getFieldValue([]));
L.set(blob, fullFieldPath, meta);
form.setFieldsValue(blob);
@@ -206,7 +224,7 @@ function renderModelFieldForm(
)}
- {[CmsMetaType.LIST, CmsMetaType.OBJECT].includes(
+ {NESTED_TYPES.includes(
getFieldValue([...fullFieldPath, "type"])
) && (
-
- )}
- {hasLocalization && (
+
+ {!NESTED_TYPES.includes(selectedType) && (
+
+
+ )}
+
+ {!isNested && (
+
+
+
+ {DEVFLAGS.cmsUniqueFields &&
+ ALLOWED_UNIQUE_TYPES.includes(selectedType) && (
+
+
+ )}
+
)}
)}
-
-
) {
@@ -528,7 +580,7 @@ function CmsModelDetails_(
tableId={tableId}
fieldsPath={["schema", "fields"]}
fullFieldsPath={["schema", "fields"]}
- hasLocalization={true}
+ isNested={false}
/>
}
@@ -550,13 +602,13 @@ function ModelFields({
tableId,
fieldsPath,
fullFieldsPath,
- hasLocalization,
+ isNested,
}: {
database: ApiCmsDatabase;
tableId: CmsTableId;
fieldsPath: any[];
fullFieldsPath: any[];
- hasLocalization: boolean;
+ isNested: boolean;
}) {
const form = Form.useFormInstance();
@@ -621,7 +673,7 @@ function ModelFields({
fullFieldsPath,
handles,
database.extraData.locales,
- hasLocalization
+ isNested
)
}
@@ -647,6 +699,7 @@ function ModelFields({
helperText: "",
required: false,
hidden: false,
+ unique: false,
type: CmsMetaType.TEXT,
defaultValueByLocale: {},
})
diff --git a/platform/wab/src/wab/client/components/coding/CodePreview.tsx b/platform/wab/src/wab/client/components/coding/CodePreview.tsx
index 1af5e9d9e9f..b01c831a5b7 100644
--- a/platform/wab/src/wab/client/components/coding/CodePreview.tsx
+++ b/platform/wab/src/wab/client/components/coding/CodePreview.tsx
@@ -1,6 +1,7 @@
import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx";
import { tryEvalExpr } from "@/wab/shared/eval";
-import React from "react";
+import { debounce } from "lodash";
+import React, { useCallback, useEffect, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import {
chromeLight,
@@ -11,6 +12,21 @@ import {
const BASE_FONT_FAMILY = '"Roboto Mono", Consolas, Menlo, monospace';
const BASE_FONT_SIZE = 12;
+export type ErrorInfo = {
+ name: string;
+ message: string;
+};
+
+function formatError(error: any): ErrorInfo | undefined {
+ if (!error) {
+ return undefined;
+ }
+ const errorName = (typeof error === "object" && error.name) || "Error";
+ const errorMessage =
+ (typeof error === "object" && error.message) || "Invalid code identified";
+ return { name: errorName, message: errorMessage };
+}
+
export const CodePreview = function _CodePreview(props: {
viewCtx?: ViewCtx;
value: string;
@@ -21,20 +37,32 @@ export const CodePreview = function _CodePreview(props: {
};
}) {
const { viewCtx, value, data, className, opts } = props;
- let previewValue: any | undefined = undefined;
- try {
- previewValue = tryEvalExpr(value, data, viewCtx?.canvasCtx.win()).val;
- if (previewValue instanceof Window) {
- previewValue = undefined;
- }
- } catch {
- previewValue = undefined;
- }
+
+ const evaluated = tryEvalExpr(value, data, viewCtx?.canvasCtx.win());
+
+ const previewValue =
+ evaluated.val instanceof Window ? undefined : evaluated.val;
+
+ const [error, setError] = useState(undefined);
+
+ const debouncedSetError = useCallback(
+ debounce((err?: ErrorInfo) => {
+ setError(err);
+ }, 500),
+ []
+ );
+
+ useEffect(() => {
+ const err = formatError(evaluated.err);
+ // Clear the error immediately if it's no longer the same as the one currently displayed (which means the displayed error is possibly resolved)
+ setError((prev) => (prev?.message !== err?.message ? undefined : prev));
+ debouncedSetError(err);
+ }, [evaluated.err]);
return (
- {renderInspector(previewValue, opts)}
+ {renderInspector(previewValue, error, opts)}
);
@@ -42,11 +70,24 @@ export const CodePreview = function _CodePreview(props: {
export function renderInspector(
val: any,
+ error?: ErrorInfo,
opts?: {
expandLevel?: number;
nodeRenderer?: InspectorNodeRenderer;
}
) {
+ if (error) {
+ const errorName = (typeof error === "object" && error.name) || "Error";
+ const errorMessage =
+ (typeof error === "object" && error.message) || "Invalid code identified";
+ return (
+
+
+ {errorName}: {errorMessage}
+
+
{
+// // etc.
+// }
+//
+// You can also stop extending from DefaultAddCommentMarkerProps altogether and have
+// total control over the props for your component.
+export interface AddCommentMarkerProps extends DefaultAddCommentMarkerProps {
+ icon?: PlasmicAddCommentMarker__OverridesType["icon"];
+}
+
+export function AddCommentMarker(props: AddCommentMarkerProps) {
+ // Use PlasmicAddCommentMarker to render this component as it was
+ // designed in Plasmic, by activating the appropriate variants,
+ // attaching the appropriate event handlers, etc. You
+ // can also install whatever React hooks you need here to manage state or
+ // fetch data.
+ //
+ // Props you can pass into PlasmicAddCommentMarker are:
+ // 1. Variants you want to activate,
+ // 2. Contents for slots you want to fill,
+ // 3. Overrides for any named node in the component to attach behavior and data,
+ // 4. Props to set on the root node.
+ //
+ // By default, we are just piping all AddCommentMarkerProps here, but feel free
+ // to do whatever works for you.
+
+ return
-
-
- {
if (!isSelected) {
- setShownThreadId(commentThread.id);
- setShownArenaFrame(arenaFrame);
+ e.stopPropagation();
+ commentsCtx.openCommentThreadDialog(commentThread.id, viewCtx);
}
}}
- isSelected={isSelected}
+ zIndex={zIndex}
>
-
-
-
- {isSelected && (
-
-
-
-
- )}
+ onHoverChange(true)}
+ onMouseLeave={() => onHoverChange(false)}
+ >
+
+
+
);
-}
+});
-function CanvasCommentPost(props: { viewCtx: ViewCtx; tpl: TplNode }) {
+export function CanvasAddCommentMarker(props: {
+ viewCtx: ViewCtx;
+ tpl: TplNode;
+}) {
const { viewCtx, tpl } = props;
+ const commentsCtx = viewCtx.studioCtx.commentsCtx;
+ const commentStats = commentsCtx.computedData().commentStatsByVariant;
+ const spotlightComponent = viewCtx?.currentComponentCtx()?.component();
+ const ownerComponent = tryGetTplOwnerComponent(tpl);
+
+ // Don't show the add comment marker if the component is in spotlight mode
+ // and is a child of the spotlighted component.
+ const isSpotlightChild = ownerComponent === spotlightComponent;
+
+ if (!ownerComponent || !isTplNamable(tpl) || isSpotlightChild) {
+ return null;
+ }
+
+ const variants = getSetOfVariantsForViewCtx(viewCtx, viewCtx.bundler());
+ const offsetRight =
+ (commentStats.get(getSubjectVariantsKey(tpl, variants))?.commentCount ||
+ 0) * HORIZONTAL_MARKER_OFFSET;
return (
-
- viewCtx.setSelectedNewThreadTpl(null)}>
-
-
+
+ {
+ e.stopPropagation();
+ commentsCtx.openNewCommentDialog(viewCtx, tpl);
+ },
+ }}
+ />
+
);
}
+const CanvasSubjectCommentMarkers = observer(
+ function CanvasSubjectCommentMarkers({
+ subjectCommentThreads,
+ viewCtx,
+ }: {
+ subjectCommentThreads: TplCommentThread[];
+ viewCtx: ViewCtx;
+ }) {
+ const [hoveredThreadId, setHoveredThreadId] = React.useState(
+ null
+ );
+ const commentsCtx = viewCtx.studioCtx.commentsCtx;
+ const openedThreadId = commentsCtx.openedThread()?.threadId;
+
+ const focusedIndex = subjectCommentThreads.findIndex(
+ (t) => t.id === (hoveredThreadId ?? openedThreadId)
+ );
+
+ return (
+ <>
+ {subjectCommentThreads.map((commentThread, index, arr) => {
+ let zIndex;
+ if (focusedIndex === -1) {
+ // No hover or selection — use base decreasing z-index
+ zIndex = COMMENT_MARKER_INITIAL_Z_INDEX + arr.length - index;
+ } else {
+ // Calculate relative to the focused (hovered/selected) index
+ const distance = Math.abs(index - focusedIndex);
+ zIndex = arr.length + COMMENT_MARKER_INITIAL_Z_INDEX - distance;
+ }
+
+ return (
+
+ setHoveredThreadId(hovering ? commentThread.id : null)
+ }
+ />
+ );
+ })}
+
+ );
+ }
+);
+
export const CanvasCommentMarkers = observer(function CanvasCommentMarkers({
arenaFrame,
}: {
@@ -162,49 +231,35 @@ export const CanvasCommentMarkers = observer(function CanvasCommentMarkers({
arenaFrame: ArenaFrame;
}) {
const studioCtx = useStudioCtx();
-
- const { allThreads } = useCommentsCtx();
-
const viewCtx = studioCtx.tryGetViewCtxForFrame(arenaFrame);
+ const commentsCtx = studioCtx.commentsCtx;
+ const focusedTpls = withoutNils(viewCtx?.focusedTpls() ?? []);
useRerenderOnUserBodyChange(studioCtx, viewCtx);
- const threadsGroupedBySubject = React.useMemo(
- () =>
- !viewCtx
- ? new Map()
- : xGroupBy(
- allThreads.filter(
- (commentThread) =>
- isCommentForFrame(studioCtx, viewCtx, commentThread) &&
- !commentThread.resolved // Only unresolved comments
- ),
- (commentThread) => commentThread.subject.uuid
- ),
- [allThreads, studioCtx, viewCtx]
- );
+ const shouldHideCommentMarker =
+ studioCtx.shouldHideUIOverlay() || !viewCtx || !viewCtx.isVisible();
- if (!viewCtx) {
+ if (shouldHideCommentMarker) {
return null;
}
- const selectedNewThreadTpl = viewCtx.getSelectedNewThreadTpl();
+ const threadsGroupedBySubject =
+ commentsCtx.getThreadsGroupedBySubjectForViewCtx(viewCtx);
return (
<>
- {selectedNewThreadTpl && (
- (
+
-
{children}
diff --git a/platform/wab/src/wab/client/components/comments/CommentIndicatorIcon.tsx b/platform/wab/src/wab/client/components/comments/CommentIndicatorIcon.tsx
new file mode 100644
index 00000000000..be6bf8194ad
--- /dev/null
+++ b/platform/wab/src/wab/client/components/comments/CommentIndicatorIcon.tsx
@@ -0,0 +1,31 @@
+import { Icon } from "@/wab/client/components/widgets/Icon";
+import SpeechBubblesvgIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__SpeechBubbleSvg";
+import { Tooltip } from "antd";
+import * as React from "react";
+
+export default function CommentIndicatorIcon({
+ commentCount,
+ replyCount,
+ otherVariantsCount,
+}: {
+ commentCount: number;
+ replyCount: number;
+ otherVariantsCount?: number;
+}) {
+ let title = `${commentCount} ${commentCount > 1 ? "comments" : "comment"}`;
+ if (replyCount > 0) {
+ title += ` and ${replyCount} ${replyCount > 1 ? "replies" : "reply"}`;
+ }
+
+ if (otherVariantsCount) {
+ title += `, (${otherVariantsCount}) ${
+ otherVariantsCount > 1 ? "comments" : "comment"
+ } in other variants`;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/platform/wab/src/wab/client/components/comments/CommentMarker.tsx b/platform/wab/src/wab/client/components/comments/CommentMarker.tsx
new file mode 100644
index 00000000000..a5d946b4bb2
--- /dev/null
+++ b/platform/wab/src/wab/client/components/comments/CommentMarker.tsx
@@ -0,0 +1,47 @@
+// This is a skeleton starter React component generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import {
+ DefaultCommentMarkerProps,
+ PlasmicCommentMarker,
+} from "@/wab/client/plasmic/plasmic_kit_comments/PlasmicCommentMarker";
+import { HTMLElementRefOf } from "@plasmicapp/react-web";
+import * as React from "react";
+
+// Your component props start with props for variants and slots you defined
+// in Plasmic, but you can add more here, like event handlers that you can
+// attach to named nodes in your component.
+//
+// If you don't want to expose certain variants or slots as a prop, you can use
+// Omit to hide them:
+//
+// interface CommentMarkerProps extends Omit
{
+// // etc.
+// }
+//
+// You can also stop extending from DefaultCommentMarkerProps altogether and have
+// total control over the props for your component.
+export type CommentMarkerProps = DefaultCommentMarkerProps;
+
+function CommentMarker_(
+ props: CommentMarkerProps,
+ ref: HTMLElementRefOf<"div">
+) {
+ // Use PlasmicCommentMarker to render this component as it was
+ // designed in Plasmic, by activating the appropriate variants,
+ // attaching the appropriate event handlers, etc. You
+ // can also install whatever React hooks you need here to manage state or
+ // fetch data.
+ //
+ // Props you can pass into PlasmicCommentMarker are:
+ // 1. Variants you want to activate,
+ // 2. Contents for slots you want to fill,
+ // 3. Overrides for any named node in the component to attach behavior and data,
+ // 4. Props to set on the root node.
+ //
+ // By default, we are just piping all CommentMarkerProps here, but feel free
+ // to do whatever works for you.
+
+ return ;
-}) {
- const { commentId, reactionsByEmoji } = props;
-
- const appCtx = useAppCtx();
- const api = appCtx.api;
-
- const { projectId, branchId, usersMap } = useCommentsCtx();
-
- return (
- <>
- {Object.entries(reactionsByEmoji).map(([emojiName, reactions]) => {
- const currentUsersReaction = reactions.find(
- (r) => r.createdById === appCtx.selfInfo?.id
- );
- return (
-
- fullName(ensure(usersMap.get(ensure(r.createdById, "")), ""))
- )
- .join(", ")}
- >
-
- );
- })}
-
- );
-}
-
-function CommentMenuOptions(props: {
- comment: ApiComment;
- isThread?: boolean;
- isRootComment?: boolean;
- commentThread: TplCommentThread;
-}) {
- const { comment, isThread, commentThread, isRootComment } = props;
-
- const studioCtx = useStudioCtx();
- const appCtx = useAppCtx();
- const api = appCtx.api;
-
- const isContentEditor = isUserProjectContentEditor(
- appCtx.selfInfo,
- studioCtx.siteInfo,
- studioCtx.siteInfo.perms
- );
-
- const isOwner = isUserProjectOwner(
- appCtx.selfInfo,
- studioCtx.siteInfo,
- studioCtx.siteInfo.perms
- );
-
- const { projectId, branchId } = useCommentsCtx();
-
- return (
-
- {isRootComment && (
- {
- await api.editThread(projectId, branchId, comment.commentThreadId, {
- resolved: !commentThread.resolved,
- });
- }}
- >
- Mark as {commentThread.resolved ? "unresolved" : "resolved"}
-
- )}
- {
- const deleteComment = async () => {
- if (isThread) {
- await api.deleteThread(
- projectId,
- branchId,
- comment.commentThreadId
- );
- } else {
- await api.deleteComment(projectId, branchId, comment.id);
- }
- };
-
- await deleteComment();
- }}
- >
- Delete {isThread ? "thread" : "comment"}
-
-
- );
}
function CommentPost_(props: CommentPostProps, ref: HTMLElementRefOf<"div">) {
@@ -182,52 +37,63 @@ function CommentPost_(props: CommentPostProps, ref: HTMLElementRefOf<"div">) {
subjectLabel,
repliesLinkLabel,
isThread,
- isRootComment = false,
commentThread,
...rest
} = props;
- const appCtx = useAppCtx();
- const api = appCtx.api;
- const { projectId, branchId, usersMap, reactionsByCommentId } =
- useCommentsCtx();
+ const [isEditing, setIsEditing] = React.useState(false);
+
+ const studioCtx = useStudioCtx();
+ const commentsCtx = studioCtx.commentsCtx;
+ const appCtx = studioCtx.appCtx;
const author = ensure(
- usersMap.get(ensureString(comment.createdById)),
+ commentsCtx.computedData().usersMap.get(ensureString(comment.createdById)),
`Author of comment ${comment.createdById} should be present in usersMap`
);
const reactionsByEmoji =
- maybe(reactionsByCommentId.get(comment.id), (xs) =>
- groupBy(xs, (x) => x.data.emojiName)
+ maybe(
+ commentsCtx.computedData().reactionsByCommentId.get(comment.id),
+ (xs) => groupBy(xs, (x) => x.data.emojiName)
) ?? {};
- const [showPicker, setShowPicker] = React.useState(false);
+ const popoverTargetRef = React.useRef(null);
+
+ const canUpdateThreadHistory =
+ isThread && canUpdateHistory(studioCtx, commentThread);
return (
{
- spawn(
- api.editComment(projectId, branchId, comment.id, {
- body: newBody,
- })
- );
- }}
- >
+ comment.deletedAt ? null : (
{comment.body}
-
+ )
}
+ isEditing={isEditing}
+ isDeleted={Boolean(comment.deletedAt)}
+ commentPostForm={{
+ render: () => (
+ 
-