Add toolbar actions logic

AutarkLabs · Jun 6, 2019 · 758ad80 · 758ad80
1 parent a681a52
commit 758ad80
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 7 deletions.
diff --git a/app/src/components/panel/PanelContent.js b/app/src/components/panel/PanelContent.js
@@ -107,12 +107,48 @@ const PanelContent = ({
     setCodemirrorInstance(_codemirrorInstance)
   }
 
+  const setSelectionSize = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '# ' + codemirrorInstance.doc.getSelection()
+    )
+  }
+
+  const setSelectionUnorderedList = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '\n* ' + codemirrorInstance.doc.getSelection() + '\n'
+    )
+  }
+
   const setSelectionBold = () => {
     codemirrorInstance.doc.replaceSelection(
       '**' + codemirrorInstance.doc.getSelection() + '**'
     )
   }
 
+  const setSelectionItalic = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '*' + codemirrorInstance.doc.getSelection() + '*'
+    )
+  }
+
+  const setSelectionLink = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '[' + codemirrorInstance.doc.getSelection() + ']()'
+    )
+  }
+
+  const setSelectionCode = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '`' + codemirrorInstance.doc.getSelection() + '`'
+    )
+  }
+
+  const setSelectionQuote = () => {
+    codemirrorInstance.doc.replaceSelection(
+      '> ' + codemirrorInstance.doc.getSelection()
+    )
+  }
+
   const saveBlock = async () => {
     switch (editorType) {
       case 0:
@@ -145,6 +181,12 @@ const PanelContent = ({
               handleChange={handleChange}
               screenIndex={screenIndex}
               setSelectionBold={setSelectionBold}
+              setSelectionCode={setSelectionCode}
+              setSelectionItalic={setSelectionItalic}
+              setSelectionLink={setSelectionLink}
+              setSelectionQuote={setSelectionQuote}
+              setSelectionSize={setSelectionSize}
+              setSelectionUnorderedList={setSelectionUnorderedList}
             />
             <SidePanelSeparator
               style={{

diff --git a/app/src/components/panel/PanelTabBar.js b/app/src/components/panel/PanelTabBar.js
@@ -12,7 +12,17 @@ import Octicon, {
 
 import { Button, TabBar } from '@aragon/ui'
 
-const PanelTabBar = ({ screenIndex, handleChange, setSelectionBold }) => (
+const PanelTabBar = ({
+  screenIndex,
+  handleChange,
+  setSelectionBold,
+  setSelectionCode,
+  setSelectionItalic,
+  setSelectionLink,
+  setSelectionQuote,
+  setSelectionSize,
+  setSelectionUnorderedList,
+}) => (
   <TabBarWrapper>
     <div
       style={{
@@ -30,26 +40,26 @@ const PanelTabBar = ({ screenIndex, handleChange, setSelectionBold }) => (
 
       {screenIndex === 0 && (
         <EditToolBar>
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionSize} compact>
             <Octicon icon={TextSize} />
           </EditToolBarButton>
           <EditToolBarButton onClick={setSelectionBold} compact>
             <Octicon icon={Bold} />
           </EditToolBarButton>
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionItalic} compact>
             <Octicon icon={Italic} />
           </EditToolBarButton>
           <EditToolBarSeparator />
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionQuote} compact>
             <Octicon icon={Quote} />
           </EditToolBarButton>
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionCode} compact>
             <Octicon icon={Code} />
           </EditToolBarButton>
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionLink} compact>
             <Octicon icon={Link} />
           </EditToolBarButton>
-          <EditToolBarButton onClick={setSelectionBold} compact>
+          <EditToolBarButton onClick={setSelectionUnorderedList} compact>
             <Octicon icon={ListUnordered} />
           </EditToolBarButton>
           <EditToolBarSeparator />