Adapting demo

Author: Soreine

.gitignore

@@ -1,4 +1 @@
-demo/
-
-!demo/main.js
-!demo/index.html
+_site/

demo/diff-area.js

@@ -9,9 +9,12 @@ body {
     vertical-align: text-top;
 }
 
-.removed {
+.diff-delete {
     background-color: #ffecec
 }
-.inserted {
+.diff-equal {
+    background-color: #ffffee
+}
+.diff-insert {
     background-color: #eaffea
 }

demo/diff.css

@@ -0,0 +1,39 @@
+var React = require('react');
+var Draft = require('draft-js');
+
+/**
+ * @param {Strategies} strategies
+ * @returns {Draft.Decorator}
+ */
+function diffDecorator(strategies) {
+    return new Draft.CompositeDecorator([
+        {
+            strategy: strategies.getEqualStrategy(),
+            component: EqualSpan
+        },
+        {
+            strategy: strategies.getDeleteStrategy(),
+            component: DeleteSpan
+        },
+        {
+            strategy: strategies.getInsertStrategy(),
+            component: InsertSpan
+        }
+    ]);
+}
+
+// Decorators
+
+var InsertSpan = function (props) {
+    return <span {...props} className="diff-insert">{props.children}</span>;
+};
+
+var EqualSpan = function (props) {
+    return <span {...props} className="diff-equal">{props.children}</span>;
+};
+
+var DeleteSpan = function (props) {
+    return <span {...props} className="diff-delete">{props.children}</span>;
+};
+
+module.exports = diffDecorator;