12925854411

Committed 23 Jan 2025 09:11AM UTC coverage: 25.831% (-4.7%) from 30.523%

Build # 12925854411

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1192 from EcrituresNumeriques/feat/vite6

Run Details

322 of 518 branches covered (62.16%)

Branch coverage included in aggregate %.

3448 of 14077 relevant lines covered (24.49%)

1.66 hits per line

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

0.0

/front/src/components/Write/ArticleEditorMetadata.jsx

import { Toggle } from '@geist-ui/core'
import React, { useCallback, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import YAML from 'js-yaml'
import { Sidebar } from 'react-feather'

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

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

export default function ArticleEditorMetadata({
  onChange,
  readOnly,
  metadata,
}) {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const expanded = useSelector(
    (state) => state.articlePreferences.expandSidebarRight
  )
  const selector = useSelector(
    (state) => state.articlePreferences.metadataFormMode
  )
  const yaml = useMemo(() => toYaml(metadata), [metadata])
  const [rawYaml, setRawYaml] = useState(yaml)
  const [error, setError] = useState('')

  const toggleExpand = useCallback(
    () =>
      dispatch({
        type: 'ARTICLE_PREFERENCES_TOGGLE',
        key: 'expandSidebarRight',
      }),
    []
  )
  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]
  )

  return (
    <nav className={`${expanded ? styles.expandRight : styles.retractRight}`}>
      <button
        onClick={toggleExpand}
        className={expanded ? styles.close : styles.open}
      >
        <Sidebar />{' '}
        {expanded
          ? t('write.sidebar.closeButton')
          : t('write.sidebar.metadataButton')}
      </button>
      {expanded && (
        <div className={styles.yamlEditor}>
          <header className={styles.header}>
            <h2>Metadonnées</h2>
            <div
              className={styles.toggle}
              onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}
            >
              <Toggle
                id="raw-mode"
                checked={selector === 'raw'}
                title={'Activer le mode YAML'}
                onChange={(e) => {
                  console.log(e)
                  setSelector(e.target.checked ? 'raw' : 'basic')
                }}
              />
              <label htmlFor="raw-mode">YAML</label>
            </div>
          </header>

          {/*<NavTag*/}
          {/*  defaultValue={selector}*/}
          {/*  onChange={setSelector}*/}
          {/*  items={[*/}
          {/*    {*/}
          {/*      value: 'basic',*/}
          {/*      name: t('write.basicMode.metadataButton'),*/}
          {/*    },*/}
          {/*    {*/}
          {/*      value: 'raw',*/}
          {/*      name: t('write.rawMode.metadataButton'),*/}
          {/*    },*/}
          {/*  ]}*/}
          {/*/>*/}
          {selector === 'raw' && (
            <>
              {error !== '' && <p className={styles.error}>{error}</p>}
              <MonacoYamlEditor
                height="calc(100vh - 280px)"
                fontSize="14"
                text={rawYaml}
                onTextUpdate={handleRawYamlChange}
              />
            </>
          )}
          {selector !== 'raw' && (
            <ArticleEditorMetadataForm
              metadata={metadata}
              error={(reason) => {
                setError(reason)
                if (reason !== '') {
                  setSelector('raw')
                }
              }}
              onChange={handleFormUpdate}
            />
          )}
        </div>
      )}
    </nav>
  )
}

ArticleEditorMetadata.propTypes = {
  onChange: PropTypes.func,
  readOnly: PropTypes.bool,
  metadata: PropTypes.object,
}

1	import { Toggle } from '@geist-ui/core'	×
2	import React, { useCallback, useMemo, useState } from 'react'	×
3	import { useDispatch, useSelector } from 'react-redux'	×
4	import PropTypes from 'prop-types'	×
5	import { useTranslation } from 'react-i18next'	×
6	import YAML from 'js-yaml'	×
7	import { Sidebar } from 'react-feather'	×
8
9	import { toYaml } from './metadata/yaml.js'	×
10	import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'	×
11	import MonacoYamlEditor from './providers/monaco/YamlEditor'	×
12
13	import styles from './articleEditorMetadata.module.scss'	×
14
15	export default function ArticleEditorMetadata({	×
16	onChange,	×
17	readOnly,	×
18	metadata,	×
19	}) {	×
20	const { t } = useTranslation()	×
21	const dispatch = useDispatch()	×
22	const expanded = useSelector(	×
23	(state) => state.articlePreferences.expandSidebarRight	×
24	)	×
25	const selector = useSelector(	×
26	(state) => state.articlePreferences.metadataFormMode	×
27	)	×
28	const yaml = useMemo(() => toYaml(metadata), [metadata])	×
29	const [rawYaml, setRawYaml] = useState(yaml)	×
30	const [error, setError] = useState('')	×
31
32	const toggleExpand = useCallback(	×
33	() =>	×
34	dispatch({	×
35	type: 'ARTICLE_PREFERENCES_TOGGLE',	×
36	key: 'expandSidebarRight',	×
37	}),	×
38	[]	×
39	)	×
40	const setSelector = useCallback(	×
41	(value) =>	×
42	dispatch({	×
43	type: 'ARTICLE_PREFERENCES_TOGGLE',	×
44	key: 'metadataFormMode',	×
45	value,	×
46	}),	×
47	[]	×
48	)	×
49
50	const handleFormUpdate = useCallback(	×
51	(metadata) => {	×
52	if (readOnly) {	×
53	return	×
54	}	×
55	setRawYaml(toYaml(metadata))	×
56	onChange(metadata)	×
57	},	×
58	[readOnly, setRawYaml, onChange]	×
59	)	×
60
61	const handleRawYamlChange = useCallback(	×
62	(yaml) => {	×
63	try {	×
64	const [metadata = {}] = YAML.loadAll(yaml)	×
65	setError('')	×
66	onChange(metadata)	×
67	} catch (err) {	×
68	setError(err.message)	×
69	} finally {	×
70	setRawYaml(yaml)	×
71	}	×
72	},	×
73	[setRawYaml]	×
74	)	×
75
76	return (	×
77	<nav className={`${expanded ? styles.expandRight : styles.retractRight}`}>	×
78	<button	×
79	onClick={toggleExpand}	×
80	className={expanded ? styles.close : styles.open}	×
81	>
82	<Sidebar />{' '}	×
83	{expanded	×
84	? t('write.sidebar.closeButton')	×
85	: t('write.sidebar.metadataButton')}	×
86	</button>	×
87	{expanded && (	×
88	<div className={styles.yamlEditor}>	×
89	<header className={styles.header}>	×
90	<h2>Metadonnées</h2>	×
91	<div	×
92	className={styles.toggle}	×
93	onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}	×
94	>
95	<Toggle	×
96	id="raw-mode"	×
97	checked={selector === 'raw'}	×
98	title={'Activer le mode YAML'}	×
99	onChange={(e) => {	×
100	console.log(e)	×
101	setSelector(e.target.checked ? 'raw' : 'basic')	×
102	}}	×
103	/>	×
104	<label htmlFor="raw-mode">YAML</label>	×
105	</div>	×
106	</header>	×
107
108	{/<NavTag/}
109	{/* defaultValue={selector}*/}
110	{/* onChange={setSelector}*/}
111	{/* items={[*/}
112	{/* {*/}
113	{/* value: 'basic',*/}
114	{/* name: t('write.basicMode.metadataButton'),*/}
115	{/* },*/}
116	{/* {*/}
117	{/* value: 'raw',*/}
118	{/* name: t('write.rawMode.metadataButton'),*/}
119	{/* },*/}
120	{/* ]}*/}
121	{//>/}
122	{selector === 'raw' && (	×
123	<>	×
124	{error !== '' && <p className={styles.error}>{error}</p>}	×
125	<MonacoYamlEditor	×
126	height="calc(100vh - 280px)"	×
127	fontSize="14"	×
128	text={rawYaml}	×
129	onTextUpdate={handleRawYamlChange}	×
130	/>	×
131	</>	×
132	)}
133	{selector !== 'raw' && (	×
134	<ArticleEditorMetadataForm	×
135	metadata={metadata}	×
136	error={(reason) => {	×
137	setError(reason)	×
138	if (reason !== '') {	×
139	setSelector('raw')	×
140	}	×
141	}}	×
142	onChange={handleFormUpdate}	×
143	/>	×
144	)}
145	</div>	×
146	)}
147	</nav>	×
148	)
149	}	×
150
151	ArticleEditorMetadata.propTypes = {	×
152	onChange: PropTypes.func,	×
153	readOnly: PropTypes.bool,	×
154	metadata: PropTypes.object,	×
155	}	×

EcrituresNumeriques / stylo / 12925854411

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