diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx index af3801ecde..4db8cf36be 100644 --- a/src/models/howto.models.tsx +++ b/src/models/howto.models.tsx @@ -17,6 +17,7 @@ export interface IHowtoStep extends IHowToStepFormInput { images: IUploadedFileMeta[] title: string text: string + caption?: string _animationKey?: string } @@ -39,4 +40,5 @@ export interface IHowtoFormInput { slug: string // note, tags will remain optional as if populated {} will be stripped by db (firestore) tags?: ISelectedTags + caption?: string } diff --git a/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx b/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx index 617852f76e..ba17177344 100644 --- a/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx +++ b/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx @@ -191,6 +191,11 @@ export class CreateHowto extends React.Component { validateFields={[]} component={ImageInputField} /> + diff --git a/src/pages/Howto/Content/CreateHowto/Step/Step.tsx b/src/pages/Howto/Content/CreateHowto/Step/Step.tsx index 8e6184ae30..8fa51bef9e 100644 --- a/src/pages/Howto/Content/CreateHowto/Step/Step.tsx +++ b/src/pages/Howto/Content/CreateHowto/Step/Step.tsx @@ -83,6 +83,11 @@ class Step extends Component { {/* right */} + diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx index 4a5a43ca0b..3d6dc59f2c 100644 --- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx +++ b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx @@ -80,7 +80,10 @@ export default class HowtoDescription extends React.PureComponent { ))} - + + + {howto.caption} + ) diff --git a/src/pages/Howto/Content/Howto/Step/Step.tsx b/src/pages/Howto/Content/Howto/Step/Step.tsx index c119cb8e54..af7eb0d664 100644 --- a/src/pages/Howto/Content/Howto/Step/Step.tsx +++ b/src/pages/Howto/Content/Howto/Step/Step.tsx @@ -26,6 +26,7 @@ export default class Step extends React.PureComponent { {this.props.step.text} + {this.props.step.caption} ) }