Add Escape component, applies styles directly to elements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontarm/doc",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "A set of components for creating rich, responsive documents built around MDX.",
   "author": "James K Nelson <[email protected]>",
   "license": "MIT",

rollup.config.js

@@ -30,7 +30,9 @@ export default {
   },
   plugins: [
     postcss({
-      modules: true,
+      modules: {
+        generateScopedName: 'doc-[local]-[hash:base64:5]',
+      },
       extract: true
     }),
     url(),

src/Doc.tsx

@@ -19,6 +19,7 @@ import { YouTube } from './content/YouTube'
 
 import { Aside, AsideTop } from './layout/Aside'
 import { Block } from './layout/Block'
+import { Escape } from './layout/Escape'
 import { Float } from './layout/Float'
 import { Gutter } from './layout/Gutter'
 
@@ -92,6 +93,7 @@ export class Doc extends React.Component<DocProps> {
   static Aside = Aside
   static AsideTop = AsideTop
   static Block = Block
+  static Escape = Escape
   static Float = Float
   static Gutter = Gutter
 
@@ -105,14 +107,6 @@ export class Doc extends React.Component<DocProps> {
     )
   }
 
-  private createBlockRenderer(type: string) {
-    return props =>
-      React.createElement(this.getComponentType(type), {
-        ...props,
-        className: styles.Block
-      })
-  }
-
   components = {
     code: ({ dangerouslySetInnerHTML: html, children, ...props }) => {
       let { __html: highlightedSource } = html || { __html: children }
@@ -162,21 +156,6 @@ export class Doc extends React.Component<DocProps> {
         style: this.props.style,
       })
     ),
-
-    // Inject 
-    p: this.createBlockRenderer('p'),
-    ul: this.createBlockRenderer('ul'),
-    ol: this.createBlockRenderer('ol'),
-    img: this.createBlockRenderer('img'),
-    hr: this.createBlockRenderer('hr'),
-    blockquote: this.createBlockRenderer('blockquote'),
-
-    h1: this.createBlockRenderer('h1'),
-    h2: this.createBlockRenderer('h2'),
-    h3: this.createBlockRenderer('h3'),
-    h4: this.createBlockRenderer('h4'),
-    h5: this.createBlockRenderer('h5'),
-    h6: this.createBlockRenderer('h6'),
   }
 
   // Docs can be pretty heavy, and should be pure,

src/DocContext.tsx

@@ -170,9 +170,9 @@ Object.assign(defaultDocComponents, {
       {children}
     </Block>
   ,
-  Image: ({ children, className='', title, ...props }) =>
+  Image: ({ children, className='', title, width, height, style, ...props }) =>
     <Block>
-      <img {...props} className={'Doc-Image' +className} />
+      <img {...props} style={{ width, height, ...style }} className={'Doc-Image' +className} />
     </Block>
   ,
   Spoiler: ({ children, className='', title, ...props }) =>

src/DocLayout.module.scss

@@ -68,7 +68,7 @@
   }
 }
 
-.Block {
+.Block, p, ul, ol, img, hr, blockquote, h1, h2, h3, h4, h5, h6 {
   box-sizing: border-box;
 
   @include when-small-single-column {
@@ -182,11 +182,13 @@
   }
 
   // Nested blocks lose all their layout styles.
-  & .Block {
-    margin-left: 0;
-    margin-right: 0;
-    max-width: none;
-    width: auto;
+  .Escape, & {
+    .Block, p, ul, ol, img, hr, blockquote, h1, h2, h3, h4, h5, h6 {
+      margin-left: 0;
+      margin-right: 0;
+      max-width: none;
+      width: auto;
+    }
   }
 }
 

src/index.tsx

@@ -1,7 +1,3 @@
-import styles from './DocLayout.module.scss'
-
-export { styles }
-
 export { Doc, DocProps } from './Doc'
 export { DocProvider, DocProviderProps, defaultDocComponents } from './DocContext'
 
@@ -16,5 +12,6 @@ export * from './content/YouTube'
 
 export * from './layout/Aside'
 export * from './layout/Block'
+export * from './layout/Escape'
 export * from './layout/Float'
 export * from './layout/Gutter'

src/layout/Aside.tsx

@@ -2,6 +2,13 @@ import * as React from 'react'
 import styles from '../DocLayout.module.scss'
 
 export interface AsideProps {
+  Component?: string | React.ComponentType<{
+    children?: React.ReactNode,
+    className: string,
+    id?: string,
+    style?: React.CSSProperties
+  }>,
+
   children: React.ReactNode
 
   className?: string
@@ -10,23 +17,31 @@ export interface AsideProps {
 }
 
 export function Aside({
+  Component='aside',
   children,
   className='',
   id,
   style,
 }: AsideProps) {
   return (
-    <div
+    <Component
       className={styles.Aside+' '+className}
       id={id}
       style={style}
     >
       {children}
-    </div>
+    </Component>
   )
 }
 
 export interface AsideTopProps {
+  Component?: string | React.ComponentType<{
+    children?: React.ReactNode,
+    className: string,
+    id?: string,
+    style?: React.CSSProperties
+  }>,
+
   children: React.ReactNode
 
   className?: string
@@ -35,15 +50,16 @@ export interface AsideTopProps {
 }
 
 export function AsideTop({
+  Component='div',
   children,
   className = '',
   id,
   style,
 }: AsideTopProps) {
   return (
-    <div className={styles.AsideTop+' '+className} id={id} style={style}>
+    <Component className={styles.AsideTop+' '+className} id={id} style={style}>
       {children}
-    </div>
+    </Component>
   )
 }
 

src/layout/Escape.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import styles from '../DocLayout.module.scss'
+
+export interface EscapeProps {
+  Component?: string | React.ComponentType<{
+    children?: React.ReactNode,
+    className: string,
+    id?: string,
+    style?: React.CSSProperties
+  }>,
+
+  children: React.ReactNode
+
+  className?: string
+  id?: string
+  style?: React.CSSProperties
+}
+
+export function Escape({
+  Component='div',
+  children,
+  className='',
+  id,
+  style,
+}: EscapeProps) {
+  return (
+    <Component
+      className={styles.Escape+' '+className}
+      id={id}
+      style={style}
+    >
+      {children}
+    </Component>
+  )
+}

src/layout/Float.tsx

@@ -2,6 +2,13 @@ import * as React from 'react'
 import styles from '../DocLayout.module.scss'
 
 export interface FloatProps {
+  Component?: string | React.ComponentType<{
+    children?: React.ReactNode,
+    className: string,
+    id?: string,
+    style?: React.CSSProperties
+  }>,
+
   children: React.ReactNode
 
   inset?: string
@@ -13,6 +20,7 @@ export interface FloatProps {
 }
 
 export function Float({
+  Component='div',
   children,
   className='',
   inset='0px',
@@ -21,7 +29,7 @@ export function Float({
   style,
 }: FloatProps) {
   return (
-    <div
+    <Component
       className={styles.Float+' '+className}
       id={id}
       style={{
@@ -31,6 +39,6 @@ export function Float({
       }}
     >
       {children}
-    </div>
+    </Component>
   )
 }

src/layout/Gutter.tsx

@@ -63,8 +63,6 @@ export function Gutter({
     horizontal = 'none'
   }
 
-  console.log()
-
   if (horizontal) {
     if (left === undefined) left = horizontal
     if (right === undefined) right = horizontal