UPDATE: Add "Export Area to markdown"

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -40,6 +40,7 @@ import {
   ArrowMiddleFromLine,
   DecimalPlacesDecreaseIcon,
   DecimalPlacesIncreaseIcon,
+  Markdown,
 } from "../../icons";
 import { theme } from "../../theme";
 import BorderPicker from "../BorderPicker/BorderPicker";
@@ -74,6 +75,7 @@ type ToolbarProperties = {
   onClearFormatting: () => void;
   onIncreaseFontSize: (delta: number) => void;
   onDownloadPNG: () => void;
+  onCopyMarkdown: () => void;
   fillColor: string;
   fontColor: string;
   fontSize: number;
@@ -429,6 +431,17 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <ImageDown />
       </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => {
+          properties.onCopyMarkdown();
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.selected_markdown")}
+      >
+        <Markdown />
+      </StyledButton>
 
       <ColorPicker
         color={properties.fontColor}

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -558,6 +558,26 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         onIncreaseFontSize={(delta: number) => {
           onIncreaseFontSize(delta);
         }}
+        onCopyMarkdown={async () => {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          const row = Math.min(rowStart, rowEnd);
+          const column = Math.min(columnStart, columnEnd);
+          const width = Math.abs(columnEnd - columnStart) + 1;
+          const height = Math.abs(rowEnd - rowStart) + 1;
+          const markdown = model.getSheetMarkup(
+            sheet,
+            row,
+            column,
+            width,
+            height,
+          );
+          // Copy to clipboard
+          // NB: This will not work in non secure contexts or in iframes (i.e storybook)
+          await navigator.clipboard.writeText(markdown);
+        }}
         onDownloadPNG={() => {
           // creates a new canvas element in the visible part of the the selected area
           const worksheetCanvas = worksheetRef.current?.getCanvas();

webapp/IronCalc/src/icons/index.ts

@@ -19,6 +19,7 @@ import InsertColumnLeftIcon from "./insert-column-left.svg?react";
 import InsertColumnRightIcon from "./insert-column-right.svg?react";
 import InsertRowAboveIcon from "./insert-row-above.svg?react";
 import InsertRowBelow from "./insert-row-below.svg?react";
+import Markdown from "./markdown.svg?react";
 
 import IronCalcIcon from "./ironcalc_icon.svg?react";
 import IronCalcLogo from "./orange+black.svg?react";
@@ -48,4 +49,5 @@ export {
   IronCalcIcon,
   IronCalcLogo,
   Fx,
+  Markdown,
 };

webapp/IronCalc/src/icons/markdown.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path fill="none" d="M0 0h24v24H0z"/>
+        <path fill-rule="nonzero" d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm3 10.5H5v-7h2l2 2 2-2h2v7h-2v-4l-2 2-2-2v4zm11-3h2l-3 3-3-3h2v-4h2v4z"/>
+    </g>

webapp/IronCalc/src/locale/en_us.json

@@ -26,6 +26,7 @@
     "vertical_align_middle": " Align middle",
     "vertical_align_top": "Align top",
     "selected_png": "Export Selected area as PNG",
+    "selected_markdown": "Export Selected area as Markdown",
     "wrap_text": "Wrap text",
     "format_menu": {
       "auto": "Auto",