Add ability to use yaml-array for tags (#874)

src/components/editor/yaml-metadata/yaml-metadata.test.ts

@@ -69,7 +69,7 @@ describe('yaml tests', () => {
     })
   })
 
-  it('tags only', () => {
+  it('tags only (old syntax)', () => {
     testMetadata(`---
     tags: test123, abc
     ___
@@ -78,10 +78,41 @@ describe('yaml tests', () => {
       tags: 'test123, abc'
     },
     {
-      tags: ['test123', 'abc']
+      tags: ['test123', 'abc'],
+      deprecatedTagsSyntax: true
     })
   })
 
+  it('tags only', () => {
+    testMetadata(`---
+    tags:
+      - test123
+      - abc
+    ___
+    `,
+      {
+        tags: ['test123', 'abc']
+      },
+      {
+        tags: ['test123', 'abc'],
+        deprecatedTagsSyntax: false
+      })
+  })
+
+  it('tags only (alternative syntax)', () => {
+    testMetadata(`---
+    tags: ['test123', 'abc']
+    ___
+    `,
+      {
+        tags: ['test123', 'abc']
+      },
+      {
+        tags: ['test123', 'abc'],
+        deprecatedTagsSyntax: false
+      })
+  })
+
   it('breaks only', () => {
     testMetadata(`---
     breaks: false

src/components/editor/yaml-metadata/yaml-metadata.ts

@@ -11,7 +11,7 @@ type iso6391 = 'aa' | 'ab' | 'af' | 'am' | 'ar' | 'ar-ae' | 'ar-bh' | 'ar-dz' |
 export interface RawYAMLMetadata {
   title: string | undefined
   description: string | undefined
-  tags: string | undefined
+  tags: string | string[] | undefined
   robots: string | undefined
   lang: string | undefined
   dir: string | undefined
@@ -27,6 +27,7 @@ export class YAMLMetaData {
   title: string
   description: string
   tags: string[]
+  deprecatedTagsSyntax: boolean
   robots: string
   lang: iso6391
   dir: 'ltr' | 'rtl'
@@ -53,7 +54,16 @@ export class YAMLMetaData {
       transition: 'none',
       theme: 'white'
     } */
-    this.tags = rawData?.tags?.split(',').map(entry => entry.trim()) ?? []
+    if (typeof rawData?.tags === 'string') {
+      this.tags = rawData?.tags?.split(',').map(entry => entry.trim()) ?? []
+      this.deprecatedTagsSyntax = true
+    } else if (typeof rawData?.tags === 'object') {
+      this.tags = rawData?.tags?.filter(tag => tag !== null) ?? []
+      this.deprecatedTagsSyntax = false
+    } else {
+      this.tags = []
+      this.deprecatedTagsSyntax = false
+    }
     this.opengraph = rawData?.opengraph ? new Map<string, string>(Object.entries(rawData.opengraph)) : new Map<string, string>()
   }
 }

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -6,9 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { TocAst } from 'markdown-it-toc-done-right'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../redux'
 import { InternalLink } from '../common/links/internal-link'
+import links from '../../links.json'
+import { TranslatedExternalLink } from '../common/links/translated-external-link'
 import { ShowIf } from '../common/show-if/show-if'
 import { RawYAMLMetadata, YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata'
 import { BasicMarkdownRenderer } from './basic-markdown-renderer'
@@ -40,8 +44,10 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   wide
 }) => {
   const allReplacers = useReplacerInstanceListCreator(onTaskCheckedChange)
+  useTranslation()
 
   const [yamlError, setYamlError] = useState(false)
+  const yamlDeprecatedTags = useSelector((state: ApplicationState) => state.documentContent.metadata.deprecatedTagsSyntax)
 
   const rawMetaRef = useRef<RawYAMLMetadata>()
   const firstHeadingRef = useRef<string>()
@@ -79,10 +85,17 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
       <ShowIf condition={yamlError}>
         <Alert variant='warning' dir='auto'>
           <Trans i18nKey='editor.invalidYaml'>
-            <InternalLink text='yaml-metadata' href='/n/yaml-metadata' className='text-dark'/>
+            <InternalLink text='yaml-metadata' href='/n/yaml-metadata' className='text-primary'/>
           </Trans>
         </Alert>
       </ShowIf>
+      <ShowIf condition={yamlDeprecatedTags}>
+        <Alert variant='warning' dir='auto'>
+          <Trans i18nKey='editor.deprecatedTags' />
+          <br/>
+          <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
+        </Alert>
+      </ShowIf>
       <BasicMarkdownRenderer className={className} wide={wide} content={content} componentReplacers={allReplacers}
         markdownIt={markdownIt} documentReference={documentElement}
         onBeforeRendering={clearMetadata}/>

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -17,7 +17,7 @@ export const DeprecationWarning: React.FC = () => {
     <Alert className={'mt-2'} variant={'warning'}>
       <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
       &nbsp;
-      <TranslatedExternalLink i18nKey={'common.why'} className={'text-primary'} href={links.faq}/>
+      <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} className={'text-primary'} href={links.faq}/>
     </Alert>
   )
 }