diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx
new file mode 100644
index 000000000..1ba256168
--- /dev/null
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx
@@ -0,0 +1,113 @@
+import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
+import { useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+
+type MediaOptionKey = 'videoAudio' | 'image' | 'sourceLink'
+
+type MediaOptionsProps = {
+ setMediaOptions: (options: { videoAudio: boolean; image: boolean; sourceLink: boolean }) => void
+}
+
+const MediaOptions = ({ setMediaOptions }: MediaOptionsProps) => {
+ const [mediaOptions, setLocalMediaOptions] = useState({
+ videoAudio: false,
+ image: false,
+ sourceLink: false,
+ })
+
+ const handleToggle = (option: MediaOptionKey) => {
+ setLocalMediaOptions((prevOptions) => {
+ const newOptions = {
+ ...prevOptions,
+ [option]: !prevOptions[option],
+ }
+
+ setMediaOptions(newOptions)
+
+ return newOptions
+ })
+ }
+
+ return (
+
+
+
+ handleToggle('videoAudio')} />}
+ label={Video / Audio}
+ labelPlacement="start"
+ />
+
+
+
+ handleToggle('image')} />}
+ label={Image}
+ labelPlacement="start"
+ />
+
+
+
+ handleToggle('sourceLink')} />}
+ label={Source Link}
+ labelPlacement="start"
+ />
+
+ )
+}
+
+const StyledFlex = styled(Flex)`
+ direction: column;
+`
+
+const StyledFormControlLabel = styled(FormControlLabel)`
+ justify-content: space-between;
+ margin: 8px 0;
+`
+
+const StyledLabel = styled.span<{ active: boolean }>`
+ color: ${({ active }) => (active ? colors.white : colors.GRAY7)};
+ font-family: Barlow;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 18px;
+ letter-spacing: 0.01em;
+ text-align: left;
+`
+
+const CustomSwitch = styled((props: SwitchProps) => )`
+ &.MuiSwitch-root {
+ width: 53px;
+ height: 38px;
+ }
+ & .MuiSwitch-switchBase {
+ margin-top: 3px;
+ &.Mui-checked {
+ color: ${colors.white};
+ & + .MuiSwitch-track {
+ background-color: ${colors.primaryBlueBorder};
+ opacity: 1;
+ }
+ }
+ }
+ & .MuiSwitch-thumb {
+ width: 13px;
+ height: 13px;
+ }
+ & .MuiSwitch-track {
+ border-radius: 10px;
+ background-color: ${colors.BG2};
+ opacity: 1;
+ }
+`
+
+const LineBar = styled.div`
+ border: 1px solid ${colors.BG2};
+ width: 100%;
+ opacity: 0.5;
+`
+
+export default MediaOptions
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
index 2ba6c08a7..17c0a38ff 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -17,6 +17,7 @@ import { getNodeSchemaTypes, getNodeType, Schema } from '~/network/fetchSourcesD
import { useModal } from '~/stores/useModalStore'
import { colors } from '~/utils'
import { CreateCustomNodeAttribute } from './CustomAttributesStep'
+import MediaOptions from './MediaOptions'
import { convertAttributes, parsedObjProps, parseJson } from './utils'
const defaultValues = {
@@ -66,6 +67,7 @@ const handleSubmitForm = async (
data: FieldValues,
isUpdate = false,
deletedAttributes: string[],
+ mediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean },
): Promise => {
try {
const { attributes, ...withoutAttributes } = data
@@ -75,11 +77,28 @@ const handleSubmitForm = async (
...deletedAttributes.reduce<{ [key: string]: string }>((acc, key) => ({ ...acc, [key]: 'delete' }), {}),
}
- const requestData = {
+ const requestData: {
+ attributes: { [key: string]: string }
+ media_url?: string
+ image_url?: string
+ source_link?: string
+ } = {
...withoutAttributes,
attributes: updatedAttributes,
}
+ if (mediaOptions.videoAudio) {
+ requestData.media_url = ''
+ }
+
+ if (mediaOptions.image) {
+ requestData.image_url = ''
+ }
+
+ if (mediaOptions.sourceLink) {
+ requestData.source_link = ''
+ }
+
let res: { status: string; ref_id: string }
if (isUpdate) {
@@ -173,6 +192,12 @@ export const Editor = ({
const [parsedData, setParsedData] = useState([])
const [submitDisabled, setSubmitDisabled] = useState(true)
+ const [mediaOptions, setMediaOptions] = useState({
+ videoAudio: false,
+ image: false,
+ sourceLink: false,
+ })
+
useEffect(
() => () => {
reset()
@@ -297,6 +322,7 @@ export const Editor = ({
{ ...data, ...(selectedSchema ? { ref_id: selectedSchema?.ref_id } : {}) },
!!selectedSchema,
deletedAttributes,
+ mediaOptions,
)
onSchemaCreate({ type: data.type, parent: parent || '', ref_id: selectedSchema?.ref_id || res || 'new' })
@@ -449,7 +475,7 @@ export const Editor = ({
onDelete={handleDeleteAttribute}
parent={selectedSchema ? selectedSchema.type : parent}
/>
-
+
{selectedSchema && (