14111391563

Committed 27 Mar 2025 04:09PM UTC coverage: 31.772% (-0.04%) from 31.811%

Build # 14111391563

Build Type

push

github

Committed by

web-flow

Commit Message

chore: déplace les actions exporter et annoter dans le menu (#1375)

* chore: déplace les actions exporter et annoter dans le menu

* chore: affiche le formulaire d'export dans le menu

Coverage Stats

470 of 703 branches covered (66.86%)

Branch coverage included in aggregate %.

0 of 84 new or added lines in 4 files covered. (0.0%)

4 existing lines in 3 files now uncovered.

4483 of 14886 relevant lines covered (30.12%)

2.26 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/front/src/components/Write/ArticleMetadata.jsx

import { Toggle } from '@geist-ui/core'
import YAML from 'js-yaml'
import React, { useCallback, useMemo, useState } from 'react'
import { ArrowLeft } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'

import { toYaml } from './metadata/yaml.js'
import MonacoYamlEditor from './providers/monaco/YamlEditor'
import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'

import styles from './articleEditorMetadata.module.scss'

/**
 * @param {object} props
 * @param {(object) => void} props.onChange
 * @param {(object) => void} props.onBack
 * @param {boolean} props.readOnly
 * @param {object} props.metadata
 * @returns {Element}
 */
export default function ArticleMetadata({
  onChange,
  readOnly,
  onBack,
  metadata,
}) {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const selector = useSelector(
    (state) => state.articlePreferences.metadataFormMode
  )
  const yaml = useMemo(() => toYaml(metadata), [metadata])
  const [rawYaml, setRawYaml] = useState(yaml)
  const [error, setError] = useState('')

  const setSelector = useCallback(
    (value) =>
      dispatch({
        type: 'ARTICLE_PREFERENCES_TOGGLE',
        key: 'metadataFormMode',
        value,
      }),
    []
  )

  const handleFormUpdate = useCallback(
    (metadata) => {
      if (readOnly) {
        return
      }
      setRawYaml(toYaml(metadata))
      onChange(metadata)
    },
    [readOnly, setRawYaml, onChange]
  )

  const handleRawYamlChange = useCallback(
    (yaml) => {
      try {
        const [metadata = {}] = YAML.loadAll(yaml)
        setError('')
        onChange(metadata)
      } catch (err) {
        setError(err.message)
      } finally {
        setRawYaml(yaml)
      }
    },
    [setRawYaml]
  )

  const title = onBack ? (
    <h2
      className={styles.title}
      onClick={onBack}
      style={{ cursor: 'pointer', userSelect: 'none' }}
    >
      <span onClick={onBack} style={{ display: 'flex' }}>
        <ArrowLeft style={{ strokeWidth: 3 }} />
      </span>
      <span>{t('metadata.title')}</span>
    </h2>
  ) : (
    <h2 className={styles.title}>{t('metadata.title')}</h2>
  )

  return (
    <div className={styles.yamlEditor}>
      <header className={styles.header}>
        {title}
        <div
          className={styles.toggle}
          onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}
        >
          <Toggle
            id="raw-mode"
            checked={selector === 'raw'}
            title={t('metadata.showYaml')}
            onChange={(e) => {
              console.log(e)
              setSelector(e.target.checked ? 'raw' : 'basic')
            }}
          />
          <label htmlFor="raw-mode">YAML</label>
        </div>
      </header>
      {selector === 'raw' && (
        <>
          {error !== '' && <p className={styles.error}>{error}</p>}
          <MonacoYamlEditor
            readOnly={readOnly}
            height="calc(100vh - 280px)"
            fontSize="14"
            text={rawYaml}
            onTextUpdate={handleRawYamlChange}
          />
        </>
      )}
      {selector !== 'raw' && (
        <ArticleEditorMetadataForm
          readOnly={readOnly}
          metadata={metadata}
          error={(reason) => {
            setError(reason)
            if (reason !== '') {
              setSelector('raw')
            }
          }}
          onChange={handleFormUpdate}
        />
      )}
    </div>
  )
}

1	import { Toggle } from '@geist-ui/core'	×
2	import YAML from 'js-yaml'	×
3	import React, { useCallback, useMemo, useState } from 'react'	×
4	import { ArrowLeft } from 'lucide-react'	×
5	import { useTranslation } from 'react-i18next'	×
6	import { useDispatch, useSelector } from 'react-redux'	×
7
8	import { toYaml } from './metadata/yaml.js'	×
UNCOV 9	import MonacoYamlEditor from './providers/monaco/YamlEditor'	×
10	import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'	×
11
NEW 12	import styles from './articleEditorMetadata.module.scss'	×
13
14	/**
15	* @param {object} props
16	* @param {(object) => void} props.onChange
17	* @param {(object) => void} props.onBack
18	* @param {boolean} props.readOnly
19	* @param {object} props.metadata
20	* @returns {Element}
21	*/
22	export default function ArticleMetadata({	×
23	onChange,	×
24	readOnly,	×
25	onBack,	×
26	metadata,	×
27	}) {	×
28	const { t } = useTranslation()	×
29	const dispatch = useDispatch()	×
30	const selector = useSelector(	×
31	(state) => state.articlePreferences.metadataFormMode	×
32	)	×
33	const yaml = useMemo(() => toYaml(metadata), [metadata])	×
34	const [rawYaml, setRawYaml] = useState(yaml)	×
35	const [error, setError] = useState('')	×
36
37	const setSelector = useCallback(	×
38	(value) =>	×
39	dispatch({	×
40	type: 'ARTICLE_PREFERENCES_TOGGLE',	×
41	key: 'metadataFormMode',	×
42	value,	×
43	}),	×
44	[]	×
45	)	×
46
47	const handleFormUpdate = useCallback(	×
48	(metadata) => {	×
49	if (readOnly) {	×
50	return	×
51	}	×
52	setRawYaml(toYaml(metadata))	×
53	onChange(metadata)	×
54	},	×
55	[readOnly, setRawYaml, onChange]	×
56	)	×
57
58	const handleRawYamlChange = useCallback(	×
59	(yaml) => {	×
60	try {	×
61	const [metadata = {}] = YAML.loadAll(yaml)	×
62	setError('')	×
63	onChange(metadata)	×
64	} catch (err) {	×
65	setError(err.message)	×
66	} finally {	×
67	setRawYaml(yaml)	×
68	}	×
69	},	×
70	[setRawYaml]	×
71	)	×
72
73	const title = onBack ? (	×
74	<h2	×
75	className={styles.title}	×
76	onClick={onBack}	×
77	style={{ cursor: 'pointer', userSelect: 'none' }}	×
78	>
79	<span onClick={onBack} style={{ display: 'flex' }}>	×
80	<ArrowLeft style={{ strokeWidth: 3 }} />	×
81	</span>	×
82	<span>{t('metadata.title')}</span>	×
83	</h2>	×
84	) : (
85	<h2 className={styles.title}>{t('metadata.title')}</h2>	×
86	)
87
88	return (	×
89	<div className={styles.yamlEditor}>	×
90	<header className={styles.header}>	×
91	{title}	×
92	<div	×
93	className={styles.toggle}	×
94	onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}	×
95	>
96	<Toggle	×
97	id="raw-mode"	×
98	checked={selector === 'raw'}	×
99	title={t('metadata.showYaml')}	×
100	onChange={(e) => {	×
101	console.log(e)	×
102	setSelector(e.target.checked ? 'raw' : 'basic')	×
103	}}	×
104	/>	×
105	<label htmlFor="raw-mode">YAML</label>	×
106	</div>	×
107	</header>	×
108	{selector === 'raw' && (	×
109	<>	×
110	{error !== '' && <p className={styles.error}>{error}</p>}	×
111	<MonacoYamlEditor	×
112	readOnly={readOnly}	×
113	height="calc(100vh - 280px)"	×
114	fontSize="14"	×
115	text={rawYaml}	×
116	onTextUpdate={handleRawYamlChange}	×
117	/>	×
118	</>	×
119	)}
120	{selector !== 'raw' && (	×
121	<ArticleEditorMetadataForm	×
122	readOnly={readOnly}	×
123	metadata={metadata}	×
124	error={(reason) => {	×
125	setError(reason)	×
126	if (reason !== '') {	×
127	setSelector('raw')	×
128	}	×
129	}}	×
130	onChange={handleFormUpdate}	×
131	/>	×
132	)}
133	</div>	×
134	)
135	}	×

EcrituresNumeriques / stylo / 14111391563

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous