Deploy manubb/react-ace-builds to github.com/manubb/react-ace-builds.…

…git:gh-pages
manubb · Nov 6, 2023 · d3e3e4b · d3e3e4b
commit d3e3e4b
Show file tree

Hide file tree

Showing 477 changed files with 1,465 additions and 0 deletions.
diff --git a/diff.css b/diff.css
@@ -0,0 +1,5 @@
+.codeMarker {
+  background: #fff677;
+  position: absolute;
+  z-index: 20;
+}
diff --git a/diff.html b/diff.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Diff Editor</title>
+    <link rel="stylesheet" href="diff.css"></link>
+</head>
+<body>
+    <div class="container">
+        <div class="content">
+            <h1>React-Ace: Diff Example</h1>
+            <div id="example"></div>
+        </div>
+    </div>
+    <script src="./static/diff.js"></script>
+</body>
+</html>
diff --git a/diff.js b/diff.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { diff as DiffEditor } from '../src';
+import '../webpack-resolver-min';
+
+const defaultValue = [
+  `// Use this tool to display differences in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.`,
+  `// Use this too to show difference in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.
+// The diff highlighting style can be altered in CSS.
+`,
+];
+
+const languages = [
+  'javascript',
+  'java',
+  'python',
+  'xml',
+  'ruby',
+  'sass',
+  'markdown',
+  'mysql',
+  'json',
+  'html',
+  'handlebars',
+  'golang',
+  'csharp',
+  'elixir',
+  'typescript',
+  'css',
+];
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: defaultValue,
+      fontSize: 14,
+      mode: 'javascript',
+    };
+    this.onChange = this.onChange.bind(this);
+    this.setMode = this.setMode.bind(this);
+  }
+
+  onChange(newValue) {
+    this.setState({
+      value: newValue,
+    });
+  }
+
+  setMode(e) {
+    this.setState({
+      mode: e.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div className="columns">
+        <div className="column">
+          <div className="field">
+            <label>Mode:</label>
+            <p className="control">
+              <span className="select">
+                <select name="mode" onChange={this.setMode} value={this.state.mode}>
+                  {languages.map((lang) => (
+                    <option key={lang} value={lang}>
+                      {lang}
+                    </option>
+                  ))}
+                </select>
+              </span>
+            </p>
+          </div>
+          <div className="field" />
+        </div>
+        <div className="examples column">
+          <h2>Editor</h2>
+          <DiffEditor
+            value={this.state.value}
+            height="1000px"
+            width="1000px"
+            mode={this.state.mode}
+            onChange={this.onChange}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('example'));
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css"></link>
+</head>
+<body>
+  <div class="container">
+    <div class="content">
+      <h1>React-Ace-Builds</h1>
+      <div id="example"></div>
+    </div>
+  </div>
+  <script src="./static/index.js"></script>
+</body>
+</html>