How to use html-tags - 10 common examples

as: function(props, propName) {
      const prop = props[propName];
      const err = `Warning: '${prop}' passed to '${ComposedComponent}' component is not a valid html tag.`;
      /* eslint-disable no-console */
      return checkTag.includes(prop) ? null : console.error(err);
    },
    forceInterpolate: PropTypes.objectOf((propValue, key) => {

as: function (props, propName) {
    const prop = props[propName];
    const err = `Warning: '${prop}' passed to 'Merge' component is not a valid html tag.`;
    /* eslint-disable no-console */
    return checkTag.includes(prop) ? null : console.error(err);
  },
  component: PropTypes.func,

as: function (props, propName) {
      const prop = props[propName];
      const err = `Warning: '${prop}' passed to '${ComposedComponent}' component is not a valid html tag.`;
      /* eslint-disable no-console */
      return checkTag.includes(prop) ? null : console.error(err);
    },
    forceInterpolate: PropTypes.objectOf((propValue, key) => {

as: function(props, propName) {
    const prop = props[propName];
    const err = `Warning: '${prop}' passed to 'Merge' component is not a valid html tag.`;
    /* eslint-disable no-console */
    return checkTag.includes(prop) ? null : console.error(err);
  },
  component: PropTypes.func

return;
      }

      // Else try to import it as a node module.
      try {
        // npm modules are required via relative paths to support working with a locally linked idyll.
        resolved = slash(resolve.sync(name, { basedir: this.paths.INPUT_DIR }));
      } catch (err) {
        // Import errors are silently discarded.
        return;
      }
    });

    if (!resolved) {
      if (
        htmlTags.indexOf(name) > -1 ||
        svgTags.indexOf(name) > -1 ||
        name === 'root'
      ) {
        // It is a valid HTML component, but should not be added to the map.
        return;
      } else {
        if (['fullwidth', 'textcontainer'].indexOf(name) > -1) {
          throw new errors.OutOfDateError(name);
        }
        throw new errors.InvalidComponentError(name);
      }
    }

    debug(`Resolved component ${name} to ${resolved}`);
    return resolved;
  }

componentClass = componentClass[split[i]];
      }
      if (componentClass.hasOwnProperty('default')) {
        componentClass = componentClass.default;
      }
      if (isClass(componentClass)) {
        const update = component.handleUpdateProps(id);
        try {
          return class extends componentClass {
            updateProps(newProps) {
              return update.call(this, newProps);
            }
          }
        } catch(e) { /* just in case something weird happens, return the unmodified class */ }
      }
    } else if (htmlTags.indexOf(name.toLowerCase()) > -1) {
      componentClass = name.toLowerCase();
    }

    return componentClass;
  });

import React from 'react'
// import Axs from 'axs'
import tag from 'clean-tag'
import styled from 'react-emotion'
import tags from 'html-tags'
import { scope } from '@compositor/x0/components'

const Ax = styled(tag)(props => props.css)
tags.forEach(t => {
  Ax[t] = props => 
})

const f = [
  10, 16, 18, 24, 36, 64
]

const BlockLink = props =>

// TYPE1 ~ TYPE7 according to https://github.github.com/gfm/#html-blocks
export const BLOCK_TYPE1 = [
  'script', 'pre', 'style'
]

export const BLOCK_TYPE2_REG = /^$/

export const BLOCK_TYPE6 = [
  'address', 'article', 'aside', 'base', 'basefont', 'blockquote', 'body', 'caption', 'center', 'col', 'colgroup', 'dd',
  'details', 'dialog', 'dir', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame', 'frameset',
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'iframe', 'legend', 'li', 'link', 'main', 'menu',
  'menuitem', 'meta', 'nav', 'noframes', 'ol', 'optgroup', 'option', 'p', 'param', 'section', 'source', 'summary', 'table',
  'tbody', 'td', 'tfoot', 'th', 'thead', 'title', 'tr', 'track', 'ul'
]

export const BLOCK_TYPE7 = htmlTags.filter(tag => {
  return !BLOCK_TYPE1.find(t => t === tag) && !BLOCK_TYPE6.find(t => t === tag)
})

export const IMAGE_EXT_REG = /\.(jpeg|jpg|png|gif|svg|webp)(?=\?|$)/i

export const PARAGRAPH_TYPES = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'li', 'figure']

export const blockContainerElementNames = [
  // elements our editor generates
  ...PARAGRAPH_TYPES,
  // all other known block elements
  'address', 'article', 'aside', 'audio', 'canvas', 'dd', 'dl', 'dt', 'fieldset',
  'figcaption', 'footer', 'form', 'header', 'hgroup', 'main', 'nav',
  'noscript', 'output', 'section', 'video',
  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td'
]

// TYPE1 ~ TYPE7 according to https://github.github.com/gfm/#html-blocks
export const BLOCK_TYPE1 = [
  'script', 'pre', 'style'
]

export const BLOCK_TYPE2_REG = /^$/

export const BLOCK_TYPE6 = [
  'address', 'article', 'aside', 'base', 'basefont', 'blockquote', 'body', 'caption', 'center', 'col', 'colgroup', 'dd',
  'details', 'dialog', 'dir', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame', 'frameset',
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'iframe', 'legend', 'li', 'link', 'main', 'menu',
  'menuitem', 'meta', 'nav', 'noframes', 'ol', 'optgroup', 'option', 'p', 'param', 'section', 'source', 'summary', 'table',
  'tbody', 'td', 'tfoot', 'th', 'thead', 'title', 'tr', 'track', 'ul'
]

export const BLOCK_TYPE7 = htmlTags.filter(tag => {
  return !BLOCK_TYPE1.find(t => t === tag) && !BLOCK_TYPE6.find(t => t === tag)
})

export const IMAGE_EXT_REG = /\.(?:jpeg|jpg|png|gif|svg|webp)(?=\?|$)/i

export const PARAGRAPH_TYPES = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'li', 'figure']

export const blockContainerElementNames = [
  // elements our editor generates
  ...PARAGRAPH_TYPES,
  // all other known block elements
  'address', 'article', 'aside', 'audio', 'canvas', 'dd', 'dl', 'dt', 'fieldset',
  'figcaption', 'footer', 'form', 'header', 'hgroup', 'main', 'nav',
  'noscript', 'output', 'section', 'video',
  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td'
]

attrsToPass = classesAndId
    }

    if (typeof classesAndId === 'string' && (classesAndId.indexOf('.') === 0 || classesAndId.indexOf('#') === 0)) {
      // case: div('.hello')
      objectAssign(attrsToPass, getClassesAndId(classesAndId))
    } else if (classesAndId !== undefined && typeof classesAndId !== 'object') {
      // case: div(2342374)
      childrenToPass = [classesAndId]
    }

    return createElement(tagOrComponent, attrsToPass, ...childrenToPass)
  }

  // attach each HTML creator function to a creator function for custom components
  return htmlTags.reduce((acc, tag) => {
    acc[tag] = creator(tag)

    return acc
  }, creator)
}