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

CHANGELOG.md

@@ -16,6 +16,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
     - `{%slideshare user/my-awesome-presentation %}` -> Embedding removed
     - `{%speakerdeck foobar %}` -> Embedding removed
 - The use of `sequence` as code block language ([Why?](https://hedgedoc.org/faq/))
+- Comma-separated definition of tags in the yaml-metadata
 
 ### Removed
 
@@ -33,6 +34,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - Import content from a url
 - F9 shortcut to sort lines
 - Highlight.JS language support for `1c` was removed.
+- Support for tag definitions in headings
 
 ### Added
 
@@ -73,6 +75,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - The dark-mode is also applied to the read-only-view and can be toggled from there.
 - Access tokens for the CLI and 3rd-party-clients can be managed in the user profile.
 - Change editor font to "Fira Code"
+- Note tags can be set as yaml-array in frontmatter
 
 ---
 

cypress/integration/metadata.spec.ts

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('yaml-metadata: tags', () => {
+  beforeEach(() => {
+    cy.visit('/n/features')
+    cy.get('.CodeMirror textarea')
+    .type('{ctrl}a', { force: true })
+    .type('{backspace}')
+  })
+
+  it('show deprecation notice on old syntax', () => {
+    cy.get('.CodeMirror textarea')
+      .type('---\ntags: a, b, c\n---')
+    cy.get('.splitter.right .w-100.h-100 .alert.alert-warning')
+      .should('be.visible')
+  })
+
+  it('show no deprecation notice on yaml-array (1)', () => {
+    cy.get('.CodeMirror textarea')
+    .type('---\ntags: [\'a\', \'b\', \'c\']\n---')
+    cy.get('.splitter.right .w-100.h-100 .alert.alert-warning')
+    .should('not.exist')
+  })
+
+  it('show no deprecation notice on yaml-array (2)', () => {
+    cy.get('.CodeMirror textarea')
+    .type('---\ntags:\n  - a\nb\nc\n')
+    .type('{backspace}{backspace}{backspace}{backspace}')
+    .type('---')
+    cy.get('.splitter.right .w-100.h-100 .alert.alert-warning')
+    .should('not.exist')
+  })
+})

public/locales/en.json

@@ -185,6 +185,7 @@
         "untitledNote": "Untitled",
         "placeholder": "← Start by entering a title here\n===\nVisit the features page if you don't know what to do.\nHappy hacking :)",
         "invalidYaml": "The yaml-header is invalid. See <0></0> for more information.",
+        "deprecatedTags": "The comma-separated definition of tags in the yaml-metadata is deprecated. Use a yaml-array instead.",
         "infoToc": "Structure your note with headings to see a table-of-contents here.",
         "help": {
             "shortcuts": {
@@ -453,7 +454,8 @@
         "why": "Why?",
         "successfullyCopied": "Copied!",
         "copyError": "Error while copying!",
-        "errorOccurred": "An error occurred"
+        "errorOccurred": "An error occurred",
+        "readForMoreInfo": "Read here for more information"
     },
     "login": {
         "chooseMethod": "Choose method",

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>
   )
 }

src/redux/document-content/reducers.ts

@@ -9,7 +9,8 @@ import {
   DocumentContent,
   DocumentContentAction,
   DocumentContentActionType,
-  SetDocumentContentAction, SetDocumentMetadataAction,
+  SetDocumentContentAction,
+  SetDocumentMetadataAction,
   SetNoteIdAction
 } from './types'
 
@@ -20,6 +21,7 @@ export const initialState: DocumentContent = {
     title: '',
     description: '',
     tags: [],
+    deprecatedTagsSyntax: false,
     robots: '',
     lang: 'en',
     dir: 'ltr',