diff --git a/src/model/pattern-library/builtins/placeholder.ts b/src/model/pattern-library/builtins/placeholder.ts
index 8a466babf..16bd5c3b1 100644
--- a/src/model/pattern-library/builtins/placeholder.ts
+++ b/src/model/pattern-library/builtins/placeholder.ts
@@ -5,6 +5,12 @@ import * as Types from '../../types';
const PATTERN_CONTEXT_ID = 'synthetic:placeholder';
const SRC_CONTEXT_ID = 'src';
+const WIDTH_CONTEXT_ID = 'width';
+const HEIGHT_CONTEXT_ID = 'height';
+const MIN_WIDTH_CONTEXT_ID = 'min-width';
+const MAX_WIDTH_CONTEXT_ID = 'max-width';
+const MIN_HEIGHT_CONTEXT_ID = 'min-height';
+const MAX_HEIGHT_CONTEXT_ID = 'max-height';
export const Placeholder = (context: BuiltInContext): BuiltInResult => {
const patternId = context.options.getGlobalPatternId(PATTERN_CONTEXT_ID);
@@ -16,6 +22,48 @@ export const Placeholder = (context: BuiltInContext): BuiltInResult => {
label: 'Source',
origin: Types.PatternPropertyOrigin.BuiltIn,
propertyName: 'src'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: WIDTH_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, WIDTH_CONTEXT_ID),
+ label: 'Width',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'width'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: HEIGHT_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, HEIGHT_CONTEXT_ID),
+ label: 'Height',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'height'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: MIN_WIDTH_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, MIN_WIDTH_CONTEXT_ID),
+ label: 'Min Width',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'minWidth'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: MIN_HEIGHT_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, MIN_HEIGHT_CONTEXT_ID),
+ label: 'Min Height',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'minHeight'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: MAX_WIDTH_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, MAX_WIDTH_CONTEXT_ID),
+ label: 'Max Width',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'maxWidth'
+ }),
+ new PatternProperty.PatternStringProperty({
+ contextId: MAX_HEIGHT_CONTEXT_ID,
+ id: context.options.getGlobalPropertyId(patternId, MAX_HEIGHT_CONTEXT_ID),
+ label: 'Max Height',
+ origin: Types.PatternPropertyOrigin.BuiltIn,
+ propertyName: 'maxHeight'
})
];
diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx
index c755da0a1..126c2e047 100644
--- a/src/preview/preview-renderer.tsx
+++ b/src/preview/preview-renderer.tsx
@@ -99,7 +99,19 @@ const SYNTHETICS = {
box: Box,
page: Page,
placeholder: props =>
- props.src ?
: null,
+ props.src ? (
+
+ ) : null,
text: props => {props.text}
};