|
@@ -1,29 +1,17 @@
|
|
|
-import { ChangeEvent, FC, memo, useCallback, useRef } from 'react'
|
|
|
|
|
|
|
+import { ChangeEvent, FC, memo, useCallback } from 'react'
|
|
|
import useScopeValue from '@/shared/hooks/use-scope-value'
|
|
import useScopeValue from '@/shared/hooks/use-scope-value'
|
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
|
-import useTutorial from '@/shared/hooks/promotions/use-tutorial'
|
|
|
|
|
import { sendMB } from '../../../infrastructure/event-tracking'
|
|
import { sendMB } from '../../../infrastructure/event-tracking'
|
|
|
import { isValidTeXFile } from '../../../main/is-valid-tex-file'
|
|
import { isValidTeXFile } from '../../../main/is-valid-tex-file'
|
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
-import {
|
|
|
|
|
- EditorSwitchBeginnerPopover,
|
|
|
|
|
- codeEditorModePrompt,
|
|
|
|
|
-} from './editor-switch-beginner-popover'
|
|
|
|
|
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
|
|
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
|
|
|
|
|
|
|
|
function EditorSwitch() {
|
|
function EditorSwitch() {
|
|
|
const { t } = useTranslation()
|
|
const { t } = useTranslation()
|
|
|
const [visual, setVisual] = useScopeValue('editor.showVisual')
|
|
const [visual, setVisual] = useScopeValue('editor.showVisual')
|
|
|
- const [codeEditorOpened] = useScopeValue('editor.codeEditorOpened')
|
|
|
|
|
const { openDocName } = useEditorManagerContext()
|
|
const { openDocName } = useEditorManagerContext()
|
|
|
|
|
|
|
|
- const codeEditorRef = useRef<HTMLLabelElement>(null)
|
|
|
|
|
-
|
|
|
|
|
const richTextAvailable = openDocName ? isValidTeXFile(openDocName) : false
|
|
const richTextAvailable = openDocName ? isValidTeXFile(openDocName) : false
|
|
|
- const { completeTutorial } = useTutorial(codeEditorModePrompt, {
|
|
|
|
|
- location: 'logs',
|
|
|
|
|
- name: codeEditorModePrompt,
|
|
|
|
|
- })
|
|
|
|
|
|
|
|
|
|
const handleChange = useCallback(
|
|
const handleChange = useCallback(
|
|
|
event => {
|
|
event => {
|
|
@@ -32,9 +20,6 @@ function EditorSwitch() {
|
|
|
switch (editorType) {
|
|
switch (editorType) {
|
|
|
case 'cm6':
|
|
case 'cm6':
|
|
|
setVisual(false)
|
|
setVisual(false)
|
|
|
- if (!codeEditorOpened) {
|
|
|
|
|
- completeTutorial({ event: 'promo-click', action: 'complete' })
|
|
|
|
|
- }
|
|
|
|
|
break
|
|
break
|
|
|
|
|
|
|
|
case 'rich-text':
|
|
case 'rich-text':
|
|
@@ -44,7 +29,7 @@ function EditorSwitch() {
|
|
|
|
|
|
|
|
sendMB('editor-switch-change', { editorType })
|
|
sendMB('editor-switch-change', { editorType })
|
|
|
},
|
|
},
|
|
|
- [codeEditorOpened, completeTutorial, setVisual]
|
|
|
|
|
|
|
+ [setVisual]
|
|
|
)
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -64,15 +49,9 @@ function EditorSwitch() {
|
|
|
checked={!richTextAvailable || !visual}
|
|
checked={!richTextAvailable || !visual}
|
|
|
onChange={handleChange}
|
|
onChange={handleChange}
|
|
|
/>
|
|
/>
|
|
|
- <EditorSwitchBeginnerPopover targetRef={codeEditorRef}>
|
|
|
|
|
- <label
|
|
|
|
|
- ref={codeEditorRef}
|
|
|
|
|
- htmlFor="editor-switch-cm6"
|
|
|
|
|
- className="toggle-switch-label"
|
|
|
|
|
- >
|
|
|
|
|
- <span>{t('code_editor')}</span>
|
|
|
|
|
- </label>
|
|
|
|
|
- </EditorSwitchBeginnerPopover>
|
|
|
|
|
|
|
+ <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
|
|
|
|
|
+ <span>{t('code_editor')}</span>
|
|
|
|
|
+ </label>
|
|
|
|
|
|
|
|
<RichTextToggle
|
|
<RichTextToggle
|
|
|
checked={richTextAvailable && visual}
|
|
checked={richTextAvailable && visual}
|