temp

Author: Mykhailo Malykov

package.json

@@ -5,12 +5,13 @@
   "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react-scripts": "1.1.1",
+    "rxjs": "^6.5.5"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,28 +1,25 @@
-import React, {Component} from 'react';
+import React, {useEffect, useState} from 'react';
 import './App.css';
-import ControlPanel from "./control-panel/ControlPanel";
-import FileZone from "./file-zone/FileZone";
-import getMockText from './text.service';
+import getMockText from "./text.service";
+import TextEditor from "./text-editor/TextEditor";
 
-class App extends Component {
-    getText() {
-        getMockText().then(function (result) {
-            console.log(result);
-        });
-    }
-    render() {
-        return (
-            <div className="App">
-                <header>
-                    <span>Simple Text Editor</span>
-                </header>
-                <main>
-                    <ControlPanel/>
-                    <FileZone/>
-                </main>
-            </div>
-        );
-    }
+function App() {
+    const [text, setText] = useState('');
+
+    useEffect(() => {
+        getMockText().then(mockText => setText(mockText))
+    });
+
+    return (
+        <div className="App">
+            <header>
+                <span>Simple Text Editor</span>
+            </header>
+            <main>
+                <TextEditor text={text}/>
+            </main>
+        </div>
+    );
 }
 
 export default App;

src/control-panel/ControlPanel.js

@@ -10,3 +10,7 @@
     width: 200px;
     margin-right: 400px;
 }
+
+.active {
+    background-color: red;
+}

src/file-zone/FileZone.js

@@ -0,0 +1,99 @@
+import React, {useState, useEffect} from 'react';
+import './ControlPanel.css';
+import {formatSelection} from "../format/format.utils";
+import {fromEvent} from "rxjs";
+import {map, tap} from "rxjs/operators";
+
+const store = new WeakMap();
+
+function storeFormat(node, format) {
+    if (store.has(node)) {
+        const formats = store.get(node);
+        formats.has(format) ? formats.delete(format) : formats.add(format);
+        if (formats.size) {
+            store.set(node, formats)
+        } else {
+            store.delete(node);
+        }
+    } else {
+        store.set(node, new Set([format]));
+    }
+
+    console.info(store);
+}
+
+function ControlPanel() {
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setItalic] = useState(false);
+    const [isUnderline, setUnderline] = useState(false);
+
+    useEffect(() => {
+        const sink = fromEvent(document, 'selectionchange')
+            .pipe(
+                map(() => getSelection()),
+                tap(Selection => console.info(Selection, Selection.focusOffset)),
+                map(selection => selection.focusNode)
+            )
+            .subscribe(
+                (focusNode) => {
+                    if (store.has(focusNode)) {
+                        const formats = Array.from(store.get(focusNode));
+                        setIsBold(formats.includes('bold'));
+                        setItalic(formats.includes('italic'));
+                        setUnderline(formats.includes('underline'));
+
+                        console.info(focusNode, formats);
+                    } else {
+                        setIsBold(false);
+                        setItalic(false);
+                        setUnderline(false);
+                    }
+                }
+            );
+
+        return () => sink.unsubscribe();
+    });
+
+
+    function makeSelectionBold() {
+        formatSelection('bold');
+        storeFormat(getSelection().focusNode, 'bold');
+    }
+
+    function makeSelectionItalic() {
+        formatSelection('italic');
+        storeFormat(getSelection().focusNode, 'italic');
+    }
+
+    function makeSelectionUnderline() {
+        formatSelection('underline');
+        storeFormat(getSelection().focusNode, 'underline');
+    }
+
+    return (
+        <div id="control-panel">
+            <div id="format-actions">
+                <button
+                    className={`format-action${ isBold ? ' active' : '' }`}
+                    type="button"
+                    onClick={makeSelectionBold}>
+                    <b>B</b>
+                </button>
+                <button
+                    className={`format-action${ isItalic ? ' active' : '' }`}
+                    type="button"
+                    onClick={makeSelectionItalic}>
+                    <i>I</i>
+                </button>
+                <button
+                    className={`format-action${ isUnderline ? ' active' : '' }`}
+                    type="button"
+                    onClick={makeSelectionUnderline}>
+                    <u>U</u>
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default ControlPanel;

src/control-panel/ControlPanel.css …xt-editor/control-panel/ControlPanel.csssrc/control-panel/ControlPanel.css renamed to src/text-editor/control-panel/ControlPanel.css src/control-panel/ControlPanel.css renamed to src/text-editor/control-panel/ControlPanel.css

@@ -0,0 +1,19 @@
+import React, {useState, useEffect} from 'react';
+import './FileZone.css';
+
+function FileZone({text}) {
+    console.log('render FileZone');
+
+    return (
+        <div id="file-zone">
+            <div
+                id="file"
+                contentEditable="true"
+                suppressContentEditableWarning={true}>
+                {text}
+            </div>
+        </div>
+    );
+}
+
+export default FileZone;