streetwriters · thecodrr · Mar 18, 2023
diff --git a/packages/editor/package-lock.json b/packages/editor/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -31,8 +31,10 @@
     "@tiptap/pm": "^2.0.0-beta.218",
     "@tiptap/starter-kit": "^2.0.0-beta.218",
     "detect-indent": "^7.0.0",
+    "file-saver": "^2.0.5",
     "katex": "^0.16.2",
     "nanoid": "^4.0.1",
+    "papaparse": "^5.4.0",
     "prism-themes": "^1.9.0",
     "prosemirror-codemark": "^0.4.1",
     "re-resizable": "^6.9.9",
@@ -48,7 +50,9 @@
   "devDependencies": {
     "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
+    "@types/file-saver": "^2.0.5",
     "@types/katex": "^0.14.0",
+    "@types/papaparse": "^5.3.7",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.2",
     "@types/react-color": "^3.0.6",

diff --git a/packages/editor/src/extensions/table/actions.ts b/packages/editor/src/extensions/table/actions.ts
@@ -21,13 +21,17 @@ import { Editor } from "@tiptap/core";
 import { selectedRect, TableRect } from "@tiptap/pm/tables";
 import { Transaction } from "prosemirror-state";
 import { Node } from "prosemirror-model";
+import { unparse } from "papaparse";
+import { saveAs } from "file-saver";
 
 type TableCell = {
   cell: Node;
   pos: number;
 };
 
-function moveColumnRight(editor: Editor) {
+function moveColumnRight(editor?: Editor) {
+  if (!editor) return;
+
   const { tr } = editor.state;
   const rect = selectedRect(editor.state);
   if (rect.right === rect.map.width) return;
@@ -38,7 +42,9 @@ function moveColumnRight(editor: Editor) {
   editor.view.dispatch(transaction);
 }
 
-function moveColumnLeft(editor: Editor) {
+function moveColumnLeft(editor?: Editor) {
+  if (!editor) return;
+
   const { tr } = editor.state;
   const rect = selectedRect(editor.state);
   if (rect.left === 0) return;
@@ -49,7 +55,9 @@ function moveColumnLeft(editor: Editor) {
   editor.view.dispatch(transaction);
 }
 
-function moveRowDown(editor: Editor) {
+function moveRowDown(editor?: Editor) {
+  if (!editor) return;
+
   const { tr } = editor.state;
   const rect = selectedRect(editor.state);
   if (rect.top + 1 === rect.map.height) return;
@@ -60,7 +68,9 @@ function moveRowDown(editor: Editor) {
   editor.view.dispatch(transaction);
 }
 
-function moveRowUp(editor: Editor) {
+function moveRowUp(editor?: Editor) {
+  if (!editor) return;
+
   const { tr } = editor.state;
   const rect = selectedRect(editor.state);
   if (rect.top === 0) return;
@@ -159,4 +169,19 @@ function moveCells(
   return tr;
 }
 
-export { moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp };
+function exportToCSV(editor?: Editor) {
+  if (!editor) return;
+
+  const rect = selectedRect(editor.state);
+
+  const rows: string[][] = [];
+  rect.table.forEach((node) => {
+    const row: string[] = [];
+    node.forEach((cell) => row.push(cell.textContent));
+    rows.push(row);
+  });
+
+  saveAs(new Blob([new TextEncoder().encode(unparse(rows))]), "table.csv");
+}
+
+export { moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, exportToCSV };
diff --git a/packages/editor/src/hooks/use-permission-handler.ts b/packages/editor/src/hooks/use-permission-handler.ts
@@ -17,18 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { UnionCommands } from "@tiptap/core";
 import { useEffect } from "react";
-import { PermissionRequestEvent } from "../types";
+import { PermissionRequestEvent, Commands } from "../types";
 
 export type Claims = "premium";
 export type PermissionHandlerOptions = {
   claims: Record<Claims, boolean>;
-  onPermissionDenied: (claim: Claims, id: keyof UnionCommands) => void;
+  onPermissionDenied: (claim: Claims, id: Commands) => void;
 };
 
-const ClaimsMap: Record<Claims, (keyof UnionCommands)[]> = {
-  premium: ["insertImage"]
+const ClaimsMap: Record<Claims, Commands[]> = {
+  premium: ["insertImage", "exportToCSV"]
 };
 
 export function usePermissionHandler(options: PermissionHandlerOptions) {

diff --git a/packages/editor/src/toolbar/icons.ts b/packages/editor/src/toolbar/icons.ts
@@ -224,6 +224,7 @@ export const Icons = {
   heading: mdiFormatHeaderPound,
   indent: mdiFormatIndentIncrease,
   outdent: mdiFormatIndentDecrease,
+  csv: "m22.28572 6-1.714289 11.142849L18.857151 6h-1.714302l2.156582 12h2.544L24 6Zm-8.57144 12H8.571428v-1.71428h5.142852v-3.428577h-3.42856a1.716 1.716 0 0 1-1.714292-1.714286V7.7142849A1.716 1.716 0 0 1 10.28572 6h5.142849v1.7142849H10.28572v3.4285721h3.42856a1.716 1.716 0 0 1 1.714289 1.714286v3.428577A1.716 1.716 0 0 1 13.71428 18Zm-6.8571369 0H1.7142849A1.716 1.716 0 0 1 0 16.28572V7.7142849A1.716 1.716 0 0 1 1.7142849 6h5.1428582v1.7142849H1.7142849V16.28572h5.1428582z",
 
   plus: mdiPlus,
   minus: mdiMinus,

diff --git a/packages/editor/src/toolbar/tool-definitions.ts b/packages/editor/src/toolbar/tool-definitions.ts
@@ -217,6 +217,11 @@ const tools: Record<ToolId, ToolDefinition> = {
     title: "Delete table",
     conditional: true
   },
+  exportToCSV: {
+    icon: "csv",
+    title: "Export to CSV",
+    conditional: true
+  },
   cellBackgroundColor: {
     icon: "backgroundColor",
     title: "Cell background color",

diff --git a/packages/editor/src/toolbar/tools/index.ts b/packages/editor/src/toolbar/tools/index.ts
@@ -59,7 +59,8 @@ import {
   CellBackgroundColor,
   CellBorderColor,
   CellTextColor,
-  CellBorderWidth
+  CellBorderWidth,
+  ExportToCSV
 } from "./table";
 import {
   ImageSettings,
@@ -160,6 +161,7 @@ const tools = {
   moveRowDown: MoveRowDown,
   deleteRow: DeleteRow,
   deleteTable: DeleteTable,
+  exportToCSV: ExportToCSV,
 
   outdent: Outdent,
   indent: Indent,

diff --git a/packages/editor/src/toolbar/tools/table.tsx b/packages/editor/src/toolbar/tools/table.tsx
@@ -27,7 +27,8 @@ import {
   moveColumnLeft as moveColumnLeftAction,
   moveColumnRight as moveColumnRightAction,
   moveRowDown as moveRowDownAction,
-  moveRowUp as moveRowUpAction
+  moveRowUp as moveRowUpAction,
+  exportToCSV as exportToCSVAction
 } from "../../extensions/table/actions";
 import { MoreTools } from "../components/more-tools";
 import { menuButtonToTool } from "./utils";
@@ -166,6 +167,7 @@ export function TableProperties(props: ToolProps) {
       splitCells(editor),
       cellProperties(editor),
       { type: "separator", key: "tableSeperator" },
+      exportToCSV(editor),
       deleteTable(editor)
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -334,14 +336,14 @@ const moveColumnLeft = (editor: Editor): MenuButton => ({
   ...getToolDefinition("moveColumnLeft"),
   key: "moveColumnLeft",
   type: "button",
-  onClick: () => moveColumnLeftAction(editor)
+  onClick: () => moveColumnLeftAction(editor.current)
 });
 
 const moveColumnRight = (editor: Editor): MenuButton => ({
   ...getToolDefinition("moveColumnRight"),
   key: "moveColumnRight",
   type: "button",
-  onClick: () => moveColumnRightAction(editor)
+  onClick: () => moveColumnRightAction(editor.current)
 });
 
 const deleteColumn = (editor: Editor): MenuButton => ({
@@ -383,13 +385,13 @@ const moveRowUp = (editor: Editor): MenuButton => ({
   ...getToolDefinition("moveRowUp"),
   key: "moveRowUp",
   type: "button",
-  onClick: () => moveRowUpAction(editor)
+  onClick: () => moveRowUpAction(editor.current)
 });
 const moveRowDown = (editor: Editor): MenuButton => ({
   ...getToolDefinition("moveRowDown"),
   key: "moveRowDown",
   type: "button",
-  onClick: () => moveRowDownAction(editor)
+  onClick: () => moveRowDownAction(editor.current)
 });
 
 const deleteRow = (editor: Editor): MenuButton => ({
@@ -406,6 +408,13 @@ const deleteTable = (editor: Editor): MenuButton => ({
   onClick: () => editor.current?.chain().focus().deleteTable().run()
 });
 
+const exportToCSV = (editor: Editor): MenuButton => ({
+  ...getToolDefinition("exportToCSV"),
+  key: "exportToCSV",
+  type: "button",
+  onClick: () => exportToCSVAction(editor.requestPermission("exportToCSV"))
+});
+
 const cellProperties = (editor: Editor): MenuButton => ({
   ...getToolDefinition("cellProperties"),
   key: "cellProperties",
@@ -430,3 +439,4 @@ export const MoveRowUp = menuButtonToTool(moveRowUp);
 export const MoveRowDown = menuButtonToTool(moveRowDown);
 export const DeleteRow = menuButtonToTool(deleteRow);
 export const DeleteTable = menuButtonToTool(deleteTable);
+export const ExportToCSV = menuButtonToTool(exportToCSV);
diff --git a/packages/editor/src/types.ts b/packages/editor/src/types.ts
@@ -19,7 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { UnionCommands, Editor as TiptapEditor } from "@tiptap/core";
 
-export type PermissionRequestEvent = CustomEvent<{ id: keyof UnionCommands }>;
+export type Commands = keyof UnionCommands | "exportToCSV";
+export type PermissionRequestEvent = CustomEvent<{ id: Commands }>;
 
 export class Editor extends TiptapEditor {
   /**
@@ -35,7 +36,7 @@ export class Editor extends TiptapEditor {
    * @param id the command id to get permission for
    * @returns latest editor instance
    */
-  requestPermission(id: keyof UnionCommands): TiptapEditor | undefined {
+  requestPermission(id: Commands): TiptapEditor | undefined {
     const event = new CustomEvent("permissionrequest", {
       detail: { id },
       cancelable: true