Everything working but CodeEditor

chiedo · chiedo · commit d51688b28198 · 2020-10-19T09:04:03.000-04:00
diff --git a/content/github/getting-started-with-github/access-permissions-on-github.md b/content/github/getting-started-with-github/access-permissions-on-github.md
@@ -42,6 +42,10 @@ Organization members can have *owner*{% if currentVersion == "free-pro-team@late
 - "[Repository permission levels for an organization](/articles/repository-permission-levels-for-an-organization)"
 - "[About teams](/articles/about-teams)"
 
+## Code Editor Component
+
+
+
 {% if currentVersion == "free-pro-team@latest" %}
 
 ### Enterprise accounts
diff --git a/javascripts/index.js b/javascripts/index.js
@@ -18,6 +18,7 @@ import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
 import CodeBlock from '../react/CodeBlock'
 import CoolTable from '../react/CoolTable'
+import CodeEditor from '../react/CodeEditor'
 
 import 'react-tabs/style/react-tabs.css'
 
@@ -42,5 +43,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 module.export = {
   CodeBlock,
-  CoolTable
+  CoolTable,
+  CodeEditor
 }
diff --git a/lib/react/babel.js b/lib/react/babel.js
@@ -0,0 +1,22 @@
+const babel = require('@babel/core')
+
+const reactBabelOptions = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/transform-runtime'
+  ]
+}
+
+const transform = code =>
+  babel.transform(code, reactBabelOptions).code
+
+module.exports = {
+  transform: transform,
+  reactBabelOptions: reactBabelOptions
+}
diff --git a/lib/react/engine.js b/lib/react/engine.js
@@ -1,11 +1,12 @@
 const { renderToString } = require('react-dom/server')
-const transform = require('./transform')
+const { transform } = require('./babel')
 
 // These all need to be here even though eslint doesn't think so
 /* eslint-disable */
 const React = require('react')
 const CodeBlock = require('../../dist/react/CodeBlock')
 const CoolTable = require('../../dist/react/CoolTable')
+const CodeEditor = require('../../dist/react/CodeEditor')
 /* eslint-enable */
 
 const renderReact = async componentStr => {
diff --git a/lib/react/transform.js b/lib/react/transform.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@octokit/rest": "^16.38.1",
     "@primer/css": "^15.1.0",
     "@primer/octicons": "^11.0.0",
+    "ace-builds": "^1.4.12",
     "airtable": "^0.9.0",
     "algoliasearch": "^3.35.1",
     "babel-loader": "^8.1.0",
@@ -73,6 +74,7 @@
     "port-used": "^2.0.8",
     "querystring": "^0.2.0",
     "react": "^16.14.0",
+    "react-ace": "^9.1.4",
     "react-data-grid": "^7.0.0-canary.24",
     "react-dom": "^16.14.0",
     "react-syntax-highlighter": "^15.2.1",
diff --git a/react/CodeEditor.js b/react/CodeEditor.js
@@ -0,0 +1,39 @@
+const React = require('react')
+const ReactDOM = require('react-dom')
+const AceEditor = require('react-ace')
+
+require('ace-builds/src-noconflict/mode-java')
+require('ace-builds/src-noconflict/theme-github')
+
+const timestamp = Date.now()
+
+function onChange (newValue) {
+  console.log('change', newValue)
+}
+
+const CodeEditor = (props) => {
+  return (
+    <div language={props.language}>
+      <AceEditor
+        mode={props.language}
+        theme='github'
+        onChange={onChange}
+        name={`code-editor-${timestamp}`}
+        editorProps={{ $blockScrolling: true }}
+      />
+    </div>
+  )
+}
+
+if (typeof window === 'undefined') {
+} else {
+  const componentContainers = document.querySelectorAll('.react-component-CodeEditor')
+
+  for (const componentContainer of componentContainers) {
+    const div = componentContainer.children[0]
+    const language = div.getAttribute('language')
+    ReactDOM.hydrate(React.createElement(CodeEditor, { language: language }), componentContainer)
+  }
+}
+
+module.exports = CodeEditor
diff --git a/server.js b/server.js
@@ -11,7 +11,7 @@ const dirTree = require('directory-tree')
 const port = Number(process.env.PORT) || 4000
 const app = express()
 
-const transform = require('./lib/react/transform')
+const { transform } = require('./lib/react/babel')
 
 const tree = dirTree('./react/')
 for (const index in tree.children) {
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,6 +2,7 @@ const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const { EnvironmentPlugin } = require('webpack')
+const { reactBabelOptions } = require('./lib/react/babel')
 
 module.exports = {
   entry: './javascripts/index.js',
@@ -19,18 +20,7 @@ module.exports = {
         ],
         use: {
           loader: 'babel-loader',
-          options: {
-            presets: [
-              '@babel/preset-env',
-              '@babel/preset-react'
-            ],
-            plugins: [
-              '@babel/plugin-transform-react-jsx',
-              '@babel/plugin-proposal-object-rest-spread',
-              '@babel/plugin-transform-modules-commonjs',
-              '@babel/plugin-proposal-class-properties'
-            ]
-          }
+          options: reactBabelOptions
         }
       },
       {
