add save code to file

package.json

@@ -48,6 +48,7 @@
     "@testing-library/react-hooks": "^2.0.1",
     "@types/codemirror": "0.0.98",
     "@types/dashify": "^1.0.0",
+    "@types/file-saver": "^2.0.1",
     "@types/filenamify": "^2.0.2",
     "@types/history": "^4.7.3",
     "@types/html-webpack-plugin": "^3.2.1",
@@ -121,6 +122,7 @@
     "electron-log": "^4.0.0",
     "electron-updater": "^4.2.0",
     "file-loader": "^5.0.2",
+    "file-saver": "^2.0.5",
     "file-type": "^14.6.2",
     "filenamify": "^4.1.0",
     "hast-util-sanitize": "^3.0.0",

src/components/atoms/markdown/CodeFence.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import styled from '../../../lib/styled'
 import copy from 'copy-to-clipboard'
+import { saveAs } from 'file-saver'; 
 import Icon from '../Icon'
 import { mdiContentCopy } from '@mdi/js'
+import {mdiContentSave} from '@mdi/js'
 import { flexCenter } from '../../../lib/styled/styleFunctions'
 
 const CodeFenceContainer = styled.div`
@@ -36,6 +38,33 @@ const CodeFenceCopyButton = styled.button`
     color: ${({ theme }) => theme.navButtonActiveColor};
   }
 `
+const CodeFenceSaveButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 30px;
+  height: 30px;
+  width: 30px;
+  box-sizing: border-box;
+  font-size: 18px;
+  outline: none;
+
+  background-color: rgba(0, 0, 0, 0.3);
+  ${flexCenter}
+
+  border: none;
+  cursor: pointer;
+
+  transition: color 200ms ease-in-out;
+  color: ${({ theme }) => theme.navButtonColor};
+  &:hover {
+    color: ${({ theme }) => theme.navButtonHoverColor};
+  }
+
+  &:active,
+  &.active {
+    color: ${({ theme }) => theme.navButtonActiveColor};
+  }
+`
 
 const CodeFence = (props: React.HTMLProps<HTMLPreElement> = {}) => {
   if (props.className != null && props.className!.includes('CodeMirror')) {
@@ -53,6 +82,15 @@ const CodeFence = (props: React.HTMLProps<HTMLPreElement> = {}) => {
         >
           <Icon path={mdiContentCopy} />
         </CodeFenceCopyButton>
+        <CodeFenceSaveButton
+          onClick={() => {
+            var blob = new Blob([rawContent], {type: "text/plain;charset=utf-8"});
+            saveAs(blob, "hello world.txt");
+          }}
+          title='Save to File'
+        >
+          <Icon path={mdiContentSave} />
+        </CodeFenceSaveButton>
       </CodeFenceContainer>
     )
   }