hedgedoc/src/components/markdown-renderer/replace-components/quote-options/quote-options-replacer.tsx

/*
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)

SPDX-License-Identifier: AGPL-3.0-only
*/

import { DomElement } from 'domhandler'
import { ReactElement } from 'react'
import { ComponentReplacer } from '../ComponentReplacer'

const isColorExtraElement = (node: DomElement | undefined): boolean => {
  if (!node || !node.attribs || !node.attribs.class || !node.attribs['data-color']) {
    return false
  }
  return (node.name === 'span' && node.attribs.class === 'quote-extra')
}

const findQuoteOptionsParent = (nodes: DomElement[]): DomElement | undefined => {
  return nodes.find((child) => {
    if (child.name !== 'p' || !child.children || child.children.length < 1) {
      return false
    }
    return child.children.find(isColorExtraElement) !== undefined
  })
}

export class QuoteOptionsReplacer extends ComponentReplacer {
  public getReplacement (node: DomElement):ReactElement|undefined {
    if (node.name !== 'blockquote' || !node.children || node.children.length < 1) {
      return
    }
    const paragraph = findQuoteOptionsParent(node.children)
    if (!paragraph) {
      return
    }
    const childElements = paragraph.children || []
    const optionsTag = childElements.find(isColorExtraElement)
    if (!optionsTag) {
      return
    }
    paragraph.children = childElements.filter(elem => !isColorExtraElement(elem))
    const attributes = optionsTag.attribs
    if (!attributes || !attributes['data-color']) {
      return
    }
    node.attribs = Object.assign(node.attribs || {}, { style: `border-left-color: ${attributes['data-color']};` })
  }
}