From a2eed69ee74a4b6af5c76e4385cb1b84a9cf1aa3 Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Thu, 18 May 2017 17:03:58 -0700
Subject: [PATCH] Create providers directory; Markdown provider

---
 src/core/components/layout-utils.jsx      |  3 ---
 src/core/components/providers/Markdown.js | 10 ++++++++++
 src/core/components/providers/README.md   |  6 ++++++
 src/core/presets/base.js                  |  3 +++
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 src/core/components/providers/Markdown.js
 create mode 100644 src/core/components/providers/README.md

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index 3dbff4fa..1ccdeaf6 100644
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -1,13 +1,10 @@
 import React, { PropTypes } from "react"
 import OriCollapse from "react-collapse"
-import _Markdown from "react-remarkable"
 
 function xclass(...args) {
   return args.filter(a => !!a).join(" ").trim()
 }
 
-export const Markdown = _Markdown
-
 export class Container extends React.Component {
   render() {
     let { fullscreen, full, ...rest } = this.props
diff --git a/src/core/components/providers/Markdown.js b/src/core/components/providers/Markdown.js
new file mode 100644
index 00000000..aba5861c
--- /dev/null
+++ b/src/core/components/providers/Markdown.js
@@ -0,0 +1,10 @@
+import Remarkable from "react-remarkable"
+import React from "react"
+
+
+export default ({ source }) => {
+  return <Remarkable
+    options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
+    source={source}
+    ></Remarkable>
+}
diff --git a/src/core/components/providers/README.md b/src/core/components/providers/README.md
new file mode 100644
index 00000000..4914bcbf
--- /dev/null
+++ b/src/core/components/providers/README.md
@@ -0,0 +1,6 @@
+# Providers
+
+Providers are generic bridges to third-party components. They provide two benefits:
+
+1. ability for plugins to override third-party components, because providers are loaded through `getComponent`
+2. allows us to avoid painting ourselves into a corner with a third-party component
diff --git a/src/core/presets/base.js b/src/core/presets/base.js
index 9b69163d..20ff4659 100644
--- a/src/core/presets/base.js
+++ b/src/core/presets/base.js
@@ -46,6 +46,8 @@ import Model from "core/components/model"
 import Models from "core/components/models"
 import TryItOutButton from "core/components/try-it-out-button"
 
+import Markdown from "core/components/providers/markdown"
+
 import BaseLayout from "core/components/layouts/base"
 
 import * as LayoutUtils from "core/components/layout-utils"
@@ -89,6 +91,7 @@ export default function() {
       model: Model,
       models: Models,
       TryItOutButton,
+      Markdown,
       BaseLayout
     }
   }