Discourage copying code with a message

Author: alexmojaki

frontend/src/App.js

@@ -5,7 +5,17 @@ import "./css/main.scss"
 import "./css/pygments.css"
 import "./css/github-markdown.css"
 import {connect} from "react-redux";
-import {bookSetState, bookState, closeMessage, movePage, moveStep, ranCode, setDeveloperMode, stepIndex} from "./book/store";
+import {
+  addMessage,
+  bookSetState,
+  bookState,
+  closeMessage,
+  movePage,
+  moveStep,
+  ranCode,
+  setDeveloperMode,
+  stepIndex
+} from "./book/store";
 import Popup from "reactjs-popup";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-python";
@@ -91,7 +101,8 @@ class AppComponent extends React.Component {
     const showBirdseye = page_index >= _.findIndex(pages, {slug: "IntroducingBirdseye"});
 
     return <div className="book-container">
-      <div className="book-text markdown-body">
+      <div className="book-text markdown-body"
+           onCopy={checkCopy}>
         <h1 dangerouslySetInnerHTML={{__html: page.title}}/>
         {page.steps.slice(0, step_index + 1).map((part, index) =>
           <div key={index} id={`step-text-${index}`}>
@@ -313,6 +324,37 @@ const SettingsModal = ({user}) => (
   </div>
 )
 
+const checkCopy = () => {
+  const selection = document.getSelection();
+  const codeElement = (node) => node.parentElement.closest("code");
+  if (
+    [...document.querySelectorAll(".book-text code")]
+      .filter(node => selection.containsNode(node))
+      .concat([
+        codeElement(selection.anchorNode),
+        codeElement(selection.focusNode),
+      ])
+      .some((node) => node && !node.classList.contains("copyable"))
+  ) {
+    addMessage(`
+      <div>
+        <p><strong>STOP!</strong></p>
+        <p>
+        Try to avoid copy pasting code. You will learn, absorb, and remember better if you
+        type in the code yourself.
+        </p>
+        <p>
+        When copying is appropriate, there will be a button to click to make it easy.
+        If there's no button, try typing.
+        </p>
+        <p>
+        Having said that, we're not going to force you. Copy if you really want to.
+        </p>
+      </div>
+   `);
+  }
+}
+
 
 export const App = connect(
   state => ({

frontend/src/book/store.js

@@ -119,15 +119,25 @@ export const ranCode = makeAction(
         processing: false,
       };
     }
-    if (value.message && state.pastMessages.indexOf(value.message) === -1) {
-      animateScroll.scrollToBottom({duration: 1000, delay: 500});
-      state = ipush(state, "messages", value.message);
-      state = ipush(state, "pastMessages", value.message);
-    }
+    state = addMessageToState(state, value.message);
     return state;
   },
 );
 
+const addMessageToState = (state, message) => {
+  if (message && state.pastMessages.indexOf(message) === -1) {
+      animateScroll.scrollToBottom({duration: 1000, delay: 500});
+      state = ipush(state, "messages", message);
+      state = ipush(state, "pastMessages", message);
+    }
+  return state;
+}
+
+export const addMessage = makeAction(
+  'ADD_MESSAGE',
+  (state, {value}) => addMessageToState(state, value)
+)
+
 export const closeMessage = makeAction(
   'CLOSE_MESSAGE',
   (state, {value}) => iremove(state, "messages", value)