Add CodeEditor example

content/github/getting-started-with-github/access-permissions-on-github.md

@@ -44,6 +44,9 @@ Organization members can have *owner*{% if currentVersion == "free-pro-team@late
 
 ## Code Editor Component
 
+<!--react-->
+<CodeEditor language='javascript' code={`console.log('hello world')`} />
+<!--end-react-->
 
 
 {% if currentVersion == "free-pro-team@latest" %}

package-lock.json

@@ -19450,9 +19450,9 @@
       }
     },
     "object-hash": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.1.tgz",
-      "integrity": "sha512-HgcGMooY4JC2PBt9sdUdJ6PMzpin+YtY3r/7wg0uTifP+HJWW8rammseSEHuyt0UeShI183UGssCJqm1bJR7QA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
+      "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
       "dev": true
     },
     "object-inspect": {

package.json

@@ -105,6 +105,7 @@
     "csp-parse": "0.0.2",
     "csv-parse": "^4.8.8",
     "csv-parser": "^2.3.3",
+    "dedent": "^0.7.0",
     "del": "^4.1.1",
     "dependency-check": "^4.1.0",
     "domwaiter": "^1.1.0",
@@ -123,9 +124,10 @@
     "make-promises-safe": "^5.1.0",
     "mime": "^2.4.4",
     "mock-express-response": "^0.2.2",
+    "nock": "^13.0.4",
     "nodemon": "^2.0.4",
     "npm-merge-driver-install": "^1.1.1",
-    "object-hash": "^2.0.1",
+    "object-hash": "^2.0.3",
     "pa11y-ci": "^2.3.0",
     "puppeteer": "^2.1.1",
     "replace": "^1.2.0",
@@ -135,9 +137,7 @@
     "start-server-and-test": "^1.11.3",
     "supertest": "^4.0.2",
     "webpack-dev-middleware": "^3.7.2",
-    "website-scraper": "^4.2.0",
-    "dedent": "^0.7.0",
-    "nock": "^13.0.4"
+    "website-scraper": "^4.2.0"
   },
   "scripts": {
     "start": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon server.js",

react/CodeEditor.js

@@ -1,25 +1,26 @@
 const React = require('react')
 const ReactDOM = require('react-dom')
-const AceEditor = require('react-ace')
+const AceEditor = require('react-ace').default
 
-require('ace-builds/src-noconflict/mode-java')
+const hash = require('object-hash')
+
+require('ace-builds/src-noconflict/mode-javascript')
 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}>
+    <div language={props.language} code={props.code}>
       <AceEditor
         mode={props.language}
         theme='github'
         onChange={onChange}
-        name={`code-editor-${timestamp}`}
+        name={`code-editor-${hash({ language: props.language, code: props.code })}`}
         editorProps={{ $blockScrolling: true }}
+        defaultValue={props.code}
       />
     </div>
   )
@@ -32,7 +33,8 @@ if (typeof window === 'undefined') {
   for (const componentContainer of componentContainers) {
     const div = componentContainer.children[0]
     const language = div.getAttribute('language')
-    ReactDOM.hydrate(React.createElement(CodeEditor, { language: language }), componentContainer)
+    const code = div.getAttribute('code')
+    ReactDOM.hydrate(React.createElement(CodeEditor, { language: language, code: code }), componentContainer)
   }
 }