overleaf/services/web/frontend/js/shared/context/editor-context.js

131 lines
4 KiB
JavaScript
Raw Normal View History

import React, { createContext, useCallback, useContext } from 'react'
import PropTypes from 'prop-types'
import useScopeValue from './util/scope-value-hook'
import { useApplicationContext } from './application-context'
import useBrowserWindow from '../../infrastructure/browser-window-hook'
export const EditorContext = createContext()
EditorContext.Provider.propTypes = {
value: PropTypes.shape({
cobranding: PropTypes.shape({
logoImgUrl: PropTypes.string.isRequired,
brandVariationName: PropTypes.string.isRequired,
brandVariationId: PropTypes.number.isRequired,
brandId: PropTypes.number.isRequired,
brandVariationHomeUrl: PropTypes.string.isRequired,
publishGuideHtml: PropTypes.string,
partner: PropTypes.string,
brandedMenu: PropTypes.string,
submitBtnHtml: PropTypes.string,
}),
loading: PropTypes.bool,
projectRootDocId: PropTypes.string,
projectId: PropTypes.string.isRequired,
projectName: PropTypes.string.isRequired,
renameProject: PropTypes.func.isRequired,
isProjectOwner: PropTypes.bool,
isRestrictedTokenMember: PropTypes.bool,
rootFolder: PropTypes.object,
}),
}
export function EditorProvider({ children, ide, settings }) {
const {
exposedSettings: { appName },
} = useApplicationContext({
exposedSettings: PropTypes.shape({ appName: PropTypes.string.isRequired })
.isRequired,
})
const cobranding = window.brandVariation
? {
logoImgUrl: window.brandVariation.logo_url,
brandVariationName: window.brandVariation.name,
brandVariationId: window.brandVariation.id,
brandId: window.brandVariation.brand_id,
brandVariationHomeUrl: window.brandVariation.home_url,
publishGuideHtml: window.brandVariation.publish_guide_html,
partner: window.brandVariation.partner,
brandedMenu: window.brandVariation.branded_menu,
submitBtnHtml: window.brandVariation.submit_button_html,
}
: undefined
const ownerId =
ide.$scope.project && ide.$scope.project.owner
? ide.$scope.project.owner._id
: null
const [loading] = useScopeValue('state.loading', ide.$scope)
const [projectRootDocId] = useScopeValue('project.rootDoc_id', ide.$scope)
const [projectName, setProjectName] = useScopeValue(
'project.name',
ide.$scope
)
const [rootFolder] = useScopeValue('rootFolder', ide.$scope)
const renameProject = useCallback(
newName => {
setProjectName(oldName => {
if (oldName !== newName) {
settings.saveProjectSettings({ name: newName }).catch(response => {
setProjectName(oldName)
const { data, status } = response
if (status === 400) {
return ide.showGenericMessageModal('Error renaming project', data)
} else {
return ide.showGenericMessageModal(
'Error renaming project',
'Please try again in a moment'
)
}
})
}
return newName
})
},
[settings, ide, setProjectName]
)
const { setTitle } = useBrowserWindow()
setTitle(
`${projectName ? projectName + ' - ' : ''}Online LaTeX Editor ${appName}`
)
const editorContextValue = {
cobranding,
loading,
projectId: window.project_id,
projectRootDocId,
projectName: projectName || '', // initially might be empty in Angular
renameProject,
isProjectOwner: ownerId === window.user.id,
isRestrictedTokenMember: window.isRestrictedTokenMember,
rootFolder,
}
return (
<>
<EditorContext.Provider value={editorContextValue}>
{children}
</EditorContext.Provider>
</>
)
}
EditorProvider.propTypes = {
children: PropTypes.any,
ide: PropTypes.any.isRequired,
settings: PropTypes.any.isRequired,
}
export function useEditorContext(propTypes) {
const data = useContext(EditorContext)
PropTypes.checkPropTypes(propTypes, data, 'data', 'EditorContext.Provider')
return data
}