How to use the @canopycanopycanopy/b-ber-shapes-directives.BLOCK_DIRECTIVES.join function in @canopycanopycanopy/b-ber-shapes-directives

import find from 'lodash.find'
import state from '@canopycanopycanopy/b-ber-lib/State'
import { Html } from '@canopycanopycanopy/b-ber-lib'
import { BLOCK_DIRECTIVES } from '@canopycanopycanopy/b-ber-shapes-directives'
import log from '@canopycanopycanopy/b-ber-logger'
import plugin from '@canopycanopycanopy/b-ber-parser-section'
import createRenderer from '@canopycanopycanopy/b-ber-grammar-renderer'
import {
  attributes,
  htmlId,
} from '@canopycanopycanopy/b-ber-grammar-attributes'

// this matches *all* container-type directives, and outputs the appropriate
// HTML based on user-defined attributes
const containers = BLOCK_DIRECTIVES.join('|')
const MARKER_OPEN_RE = new RegExp(
  `^(${containers}|exit)(?::([^\\s]+)(\\s.*)?)?$`
) // treat `exit` like an opening marker since we're using it as such
const MARKER_CLOSE_RE = /(exit)(?::([^\s]+))?/

// since `context` needs to be available in this `render` method, we curry it
// in and pass the resulting function to the `createRenderer` below. we also
// set a default for `context` since we'll need some of its properties during
// testing

function isGallery(directive) {
  return (
    directive &&
    directive.type === 'gallery' &&
    (state.build === 'web' || state.build === 'reader')
  )