|
@@ -3,9 +3,12 @@ import PropTypes from 'prop-types';
|
|
|
import { withTranslation } from 'react-i18next';
|
|
import { withTranslation } from 'react-i18next';
|
|
|
import { UncontrolledTooltip } from 'reactstrap';
|
|
import { UncontrolledTooltip } from 'reactstrap';
|
|
|
|
|
|
|
|
|
|
+import { withUnstatedContainers } from '../UnstatedUtils';
|
|
|
|
|
+import AppContainer from '../../services/AppContainer';
|
|
|
|
|
+
|
|
|
/* eslint-disable react/prop-types */
|
|
/* eslint-disable react/prop-types */
|
|
|
const PageEditorModeButtonWrapper = React.memo(({
|
|
const PageEditorModeButtonWrapper = React.memo(({
|
|
|
- editorMode, isBtnDisabled, onClick, targetMode, icon, label,
|
|
|
|
|
|
|
+ editorMode, isBtnDisabled, onClick, targetMode, icon, label, id,
|
|
|
}) => {
|
|
}) => {
|
|
|
const classNames = [`btn btn-outline-primary ${targetMode}-button px-1`];
|
|
const classNames = [`btn btn-outline-primary ${targetMode}-button px-1`];
|
|
|
if (editorMode === targetMode) {
|
|
if (editorMode === targetMode) {
|
|
@@ -20,6 +23,7 @@ const PageEditorModeButtonWrapper = React.memo(({
|
|
|
type="button"
|
|
type="button"
|
|
|
className={classNames.join(' ')}
|
|
className={classNames.join(' ')}
|
|
|
onClick={() => { onClick(targetMode) }}
|
|
onClick={() => { onClick(targetMode) }}
|
|
|
|
|
+ id={id}
|
|
|
>
|
|
>
|
|
|
<span className="d-flex flex-column flex-md-row justify-content-center">
|
|
<span className="d-flex flex-column flex-md-row justify-content-center">
|
|
|
<span className="grw-page-editor-mode-manager-icon mr-md-1">{icon}</span>
|
|
<span className="grw-page-editor-mode-manager-icon mr-md-1">{icon}</span>
|
|
@@ -32,9 +36,14 @@ const PageEditorModeButtonWrapper = React.memo(({
|
|
|
|
|
|
|
|
function PageEditorModeManager(props) {
|
|
function PageEditorModeManager(props) {
|
|
|
const {
|
|
const {
|
|
|
- t, editorMode, onPageEditorModeButtonClicked, isBtnDisabled, isDeviceSmallerThanMd,
|
|
|
|
|
|
|
+ t, appContainer,
|
|
|
|
|
+ editorMode, onPageEditorModeButtonClicked, isBtnDisabled, isDeviceSmallerThanMd,
|
|
|
} = props;
|
|
} = props;
|
|
|
|
|
|
|
|
|
|
+ const isAdmin = appContainer.isAdmin;
|
|
|
|
|
+ const isHackmdEnabled = appContainer.config.env.HACKMD_URI != null;
|
|
|
|
|
+ const showHackmdBtn = isHackmdEnabled || isAdmin;
|
|
|
|
|
+ const showHackmdDisabledTooltip = isAdmin && !isHackmdEnabled;
|
|
|
|
|
|
|
|
const pageEditorModeButtonClickedHandler = useCallback((viewType) => {
|
|
const pageEditorModeButtonClickedHandler = useCallback((viewType) => {
|
|
|
if (isBtnDisabled) {
|
|
if (isBtnDisabled) {
|
|
@@ -73,7 +82,7 @@ function PageEditorModeManager(props) {
|
|
|
label={t('Edit')}
|
|
label={t('Edit')}
|
|
|
/>
|
|
/>
|
|
|
)}
|
|
)}
|
|
|
- {(!isDeviceSmallerThanMd || editorMode === 'view') && (
|
|
|
|
|
|
|
+ {(!isDeviceSmallerThanMd || editorMode === 'view') && showHackmdBtn && (
|
|
|
<PageEditorModeButtonWrapper
|
|
<PageEditorModeButtonWrapper
|
|
|
editorMode={editorMode}
|
|
editorMode={editorMode}
|
|
|
isBtnDisabled={isBtnDisabled}
|
|
isBtnDisabled={isBtnDisabled}
|
|
@@ -81,6 +90,7 @@ function PageEditorModeManager(props) {
|
|
|
targetMode="hackmd"
|
|
targetMode="hackmd"
|
|
|
icon={<i className="fa fa-file-text-o" />}
|
|
icon={<i className="fa fa-file-text-o" />}
|
|
|
label={t('hackmd.hack_md')}
|
|
label={t('hackmd.hack_md')}
|
|
|
|
|
+ id="grw-page-editor-mode-manager-hackmd-button"
|
|
|
/>
|
|
/>
|
|
|
)}
|
|
)}
|
|
|
</div>
|
|
</div>
|
|
@@ -89,6 +99,11 @@ function PageEditorModeManager(props) {
|
|
|
{t('Not available for guest')}
|
|
{t('Not available for guest')}
|
|
|
</UncontrolledTooltip>
|
|
</UncontrolledTooltip>
|
|
|
)}
|
|
)}
|
|
|
|
|
+ {!isBtnDisabled && showHackmdDisabledTooltip && (
|
|
|
|
|
+ <UncontrolledTooltip placement="top" target="grw-page-editor-mode-manager-hackmd-button" fade={false}>
|
|
|
|
|
+ {t('HackMD editor is not available')}
|
|
|
|
|
+ </UncontrolledTooltip>
|
|
|
|
|
+ )}
|
|
|
</>
|
|
</>
|
|
|
);
|
|
);
|
|
|
|
|
|
|
@@ -96,6 +111,8 @@ function PageEditorModeManager(props) {
|
|
|
|
|
|
|
|
PageEditorModeManager.propTypes = {
|
|
PageEditorModeManager.propTypes = {
|
|
|
t: PropTypes.func.isRequired, // i18next
|
|
t: PropTypes.func.isRequired, // i18next
|
|
|
|
|
+ appContainer: PropTypes.instanceOf(AppContainer).isRequired,
|
|
|
|
|
+
|
|
|
onPageEditorModeButtonClicked: PropTypes.func,
|
|
onPageEditorModeButtonClicked: PropTypes.func,
|
|
|
isBtnDisabled: PropTypes.bool,
|
|
isBtnDisabled: PropTypes.bool,
|
|
|
editorMode: PropTypes.string,
|
|
editorMode: PropTypes.string,
|
|
@@ -107,4 +124,9 @@ PageEditorModeManager.defaultProps = {
|
|
|
isDeviceSmallerThanMd: false,
|
|
isDeviceSmallerThanMd: false,
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-export default withTranslation()(PageEditorModeManager);
|
|
|
|
|
|
|
+/**
|
|
|
|
|
+ * Wrapper component for using unstated
|
|
|
|
|
+ */
|
|
|
|
|
+const PageEditorModeManagerWrapper = withUnstatedContainers(PageEditorModeManager, [AppContainer]);
|
|
|
|
|
+
|
|
|
|
|
+export default withTranslation()(PageEditorModeManagerWrapper);
|