Skip to content

Commit 62f969c

Browse files
authored
fix: show href on link in content mode (#5396)
Got broken when we switched links to element component. <img width="844" height="466" alt="Screenshot 2025-09-09 at 13 50 45" src="https://github.com/user-attachments/assets/a4f0c969-9003-4ea7-aef0-22014f307884" />
1 parent 4e5d829 commit 62f969c

File tree

3 files changed

+55
-25
lines changed

3 files changed

+55
-25
lines changed

apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@ import {
1616
$registeredComponentMetas,
1717
} from "~/shared/nano-states";
1818
import { isRichText } from "~/shared/content-model";
19-
import { $selectedInstancePath } from "~/shared/awareness";
19+
import { $selectedInstance, $selectedInstancePath } from "~/shared/awareness";
2020
import {
2121
$selectedInstanceInitialPropNames,
2222
$selectedInstancePropsMetas,
2323
showAttributeMeta,
2424
type PropValue,
2525
} from "../shared";
26+
import { $instanceTags } from "../../style-panel/shared/model";
2627

2728
type PropOrName = { prop?: Prop; propName: string };
2829

@@ -157,32 +158,41 @@ const $canHaveTextContent = computed(
157158
}
158159
);
159160

161+
const contentModePropertiesByTag: Partial<Record<string, string[]>> = {
162+
img: ["src", "width", "height", "alt"],
163+
a: ["href"],
164+
};
165+
166+
const $selectedInstanceTag = computed(
167+
[$selectedInstance, $instanceTags],
168+
(selectedInstance, instanceTags) => {
169+
if (selectedInstance === undefined) {
170+
return;
171+
}
172+
return instanceTags.get(selectedInstance.id);
173+
}
174+
);
175+
160176
/** usePropsLogic expects that key={instanceId} is used on the ancestor component */
161177
export const usePropsLogic = ({
162178
instance,
163179
props,
164180
updateProp,
165181
}: UsePropsLogicInput) => {
166182
const isContentMode = useStore($isContentMode);
183+
const selectedInstanceTag = useStore($selectedInstanceTag);
167184

168185
/**
169186
* In content edit mode we show only Image and Link props
170187
* In the future I hope the only thing we will show will be Components
171188
*/
172189
const isPropVisible = (propName: string) => {
173-
const contentModeWhiteList: Partial<Record<string, string[]>> = {
174-
Image: ["src", "width", "height", "alt"],
175-
Link: ["href"],
176-
RichTextLink: ["href"],
177-
};
178-
179190
if (!isContentMode) {
180191
return true;
181192
}
182-
183-
const propsWhiteList = contentModeWhiteList[instance.component] ?? [];
184-
185-
return propsWhiteList.includes(propName);
193+
const allowedProperties =
194+
contentModePropertiesByTag[selectedInstanceTag ?? ""] ?? [];
195+
return allowedProperties.includes(propName);
186196
};
187197

188198
const savedProps = props;
@@ -231,11 +241,7 @@ export const usePropsLogic = ({
231241
const initialProps: PropAndMeta[] = [];
232242
for (const name of initialPropNames) {
233243
const propMeta = propsMetas.get(name);
234-
235244
if (propMeta === undefined) {
236-
console.error(
237-
`The prop "${name}" is defined in meta.initialProps but not in meta.props`
238-
);
239245
continue;
240246
}
241247

packages/html-data/bin/attributes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ const overrides: Record<string, Record<string, false | Partial<Attribute>>> = {
7777
closedby: false,
7878
},
7979
img: {
80+
src: { required: true },
81+
alt: { required: true },
82+
width: { required: true },
83+
height: { required: true },
8084
ismap: false,
8185
},
8286
input: {

packages/html-data/src/__generated__/attributes.ts

Lines changed: 30 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)