ui: added copy paste TB links

Author: SamuelPull

frontend/src/languages/english.js

@@ -708,6 +708,12 @@ const en = {
     select: "Select a picture from the gallery or upload a custom picture"
   },
 
+  clipboard: {
+    copy: "Copy link",
+    copied: "Link copied",
+    paste: "Paste link"
+  },
+
   language: {
     english: "English",
     french: "French",

frontend/src/languages/french.js

@@ -718,6 +718,12 @@ const fr = {
     select: "Sélectionner ou télécharger une image personnalisée"
   },
 
+  clipboard: {
+    copy: "Copy link",
+    copied: "Link copied",
+    paste: "Paste link"
+  },
+
   language: {
     english: "Anglais",
     french: "Français",

frontend/src/languages/georgian.js

@@ -710,6 +710,12 @@ const ka = {
     select: "აირჩიეთ სურათი გალერეიდან ან ატვირთეთ მორგებული სურათი."
   },
 
+  clipboard: {
+    copy: "Copy link",
+    copied: "Link copied",
+    paste: "Paste link"
+  },
+
   language: {
     english: "ინგლისური",
     french: "ფრანგული",

frontend/src/languages/german.js

@@ -710,6 +710,12 @@ const de = {
     select: "Wählen Sie ein Bild aus oder laden Sie ein eigenes hoch"
   },
 
+  clipboard: {
+    copy: "Copy link",
+    copied: "Link copied",
+    paste: "Paste link"
+  },
+
   language: {
     english: "Englisch",
     french: "Französisch",

frontend/src/languages/portuguese.js

@@ -712,6 +712,12 @@ const pt = {
     select: "Selecione ou faça o upload de uma imagem personalizada"
   },
 
+  clipboard: {
+    copy: "Copy link",
+    copied: "Link copied",
+    paste: "Paste link"
+  },
+
   language: {
     english: "English",
     french: "Français",

frontend/src/pages/Common/Markdown.js

@@ -2,39 +2,60 @@ import React from "react";
 import {
   BoldItalicUnderlineToggles,
   CreateLink,
+  headingsPlugin,
   linkDialogPlugin,
   linkPlugin,
   listsPlugin,
   ListsToggle,
   MDXEditor,
+  quotePlugin,
   toolbarPlugin,
   UndoRedo
 } from "@mdxeditor/editor";
 
+import strings from "../../localizeStrings";
+
 import "@mdxeditor/editor/style.css";
 
-const Markdown = ({ text, onChangeFunc }) => {
+const Markdown = ({ text, onChangeFunc, readOnly, paste, clipboard }) => {
+  const ref = React.useRef(null);
   return (
-    <MDXEditor
-      markdown={text || ""}
-      onChange={onChangeFunc}
-      plugins={[
-        toolbarPlugin({
-          toolbarContents: () => (
-            <>
-              {" "}
-              <UndoRedo />
-              <BoldItalicUnderlineToggles />
-              <ListsToggle />
-              <CreateLink />
-            </>
-          )
-        }),
-        linkDialogPlugin(),
-        listsPlugin(),
-        linkPlugin()
-      ]}
-    />
+    <>
+      {clipboard ? (
+        <button
+          onClick={() => {
+            ref.current?.focus(() => ref.current?.insertMarkdown(clipboard));
+            paste();
+          }}
+        >
+          {strings.clipboard.paste}
+        </button>
+      ) : null}
+      <MDXEditor
+        ref={ref}
+        markdown={text || ""}
+        onChange={onChangeFunc}
+        readOnly={readOnly}
+        plugins={[
+          headingsPlugin(),
+          listsPlugin(),
+          linkDialogPlugin(),
+          linkPlugin(),
+          quotePlugin(),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <>
+                {" "}
+                <UndoRedo />
+                <BoldItalicUnderlineToggles />
+                <ListsToggle />
+                <CreateLink />
+              </>
+            )
+          })
+        ]}
+      />
+    </>
   );
 };
 

frontend/src/pages/Navbar/actions.js

@@ -36,6 +36,9 @@ export const SAVE_EMAIL_ADDRESS_SUCCESS = "SAVE_EMAIL_ADDRESS_SUCCESS";
 export const SAVE_EMAIL_ADDRESS_FAILED = "SAVE_EMAIL_ADDRESS_FAILED";
 export const SET_VALID_EMAIL_ADDRESS_INPUT = "SET_VALID_EMAIL_ADDRESS_INPUT";
 
+export const CLIPBOARD_COPY = "CLIPBOARD_COPY";
+export const CLIPBOARD_PASTE = "CLIPBOARD_PASTE";
+
 export function toggleSidebar() {
   return {
     type: TOGGLE_SIDEBAR
@@ -144,3 +147,16 @@ export function setValidEmailAddressInput(valid) {
     valid
   };
 }
+
+export function clipboardCopy(text) {
+  return {
+    type: CLIPBOARD_COPY,
+    text
+  };
+}
+
+export function clipboardPaste() {
+  return {
+    type: CLIPBOARD_PASTE
+  };
+}

frontend/src/pages/Navbar/reducer.js

@@ -10,6 +10,8 @@ import {
 import { FETCH_ALL_SUBPROJECT_DETAILS_SUCCESS } from "../Workflows/actions";
 
 import {
+  CLIPBOARD_COPY,
+  CLIPBOARD_PASTE,
   DISABLE_USER_PROFILE_EDIT,
   ENABLE_USER_PROFILE_EDIT,
   FETCH_ACTIVE_PEERS_SUCCESS,
@@ -40,7 +42,8 @@ const defaultState = fromJS({
   userProfileOpen: false,
   userProfileEdit: false,
   tempEmailAddress: "",
-  isEmailAddressInputValid: true
+  isEmailAddressInputValid: true,
+  clipboard: null
 });
 
 export default function navbarReducer(state = defaultState, action) {
@@ -100,6 +103,12 @@ export default function navbarReducer(state = defaultState, action) {
         searchTerm: defaultState.get("searchTerm"),
         searchBarDisplayed: defaultState.get("searchBarDisplayed")
       });
+    case CLIPBOARD_COPY: {
+      return state.set("clipboard", action.text || "");
+    }
+    case CLIPBOARD_PASTE: {
+      return state.set("clipboard", null);
+    }
     default:
       return state;
   }

frontend/src/pages/Overview/ProjectDialogContainer.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import { toJS } from "../../helper";
 import withInitialLoading from "../Loading/withInitialLoading";
+import { clipboardPaste } from "../Navbar/actions";
 import { storeSnackbarMessage } from "../Notifications/actions";
 
 import {
@@ -38,7 +39,8 @@ const mapStateToProps = (state) => {
     currentStep: state.getIn(["overview", "currentStep"]),
     projectToAdd: state.getIn(["overview", "projectToAdd"]),
     dialogTitle: state.getIn(["overview", "dialogTitle"]),
-    allowedIntents: state.getIn(["login", "allowedIntents"])
+    allowedIntents: state.getIn(["login", "allowedIntents"]),
+    clipboard: state.getIn(["navbar", "clipboard"])
   };
 };
 
@@ -61,7 +63,8 @@ const mapDispatchToProps = (dispatch) => {
     addProjectTag: (tag) => dispatch(addProjectTag(tag)),
     removeProjectTag: (tag) => dispatch(removeProjectTag(tag)),
     addCustomImage: (imageBase64) => dispatch(addCustomImage(imageBase64)),
-    removeCustomImage: (imageBase64) => dispatch(removeCustomImage(imageBase64))
+    removeCustomImage: (imageBase64) => dispatch(removeCustomImage(imageBase64)),
+    pasteClipboard: () => dispatch(clipboardPaste())
   };
 };
 

frontend/src/pages/Overview/ProjectDialogContent.js

@@ -55,7 +55,13 @@ const ProjectDialogContent = (props) => {
       <Divider />
       <div>
         <Typography variant="subtitle2">{strings.project.markdown}</Typography>
-        <Markdown onChangeFunc={props.storeProjectMarkdown} text={props.projectToAdd.markdown} />
+        <Markdown
+          onChangeFunc={props.storeProjectMarkdown}
+          text={props.projectToAdd.markdown}
+          clipboard={props.clipboard}
+          paste={props.pasteClipboard}
+          readOnly={false}
+        />
       </div>
     </div>
   );