✨ Add plaintext export

Closes #385

frontend/src/editor/export/index.tsx

@@ -6,6 +6,7 @@ import { Modal } from '../../components/modal';
 import { WebVttExportBody } from './webvtt';
 import { TranscribeeExportBody } from './transcribee';
 import { ApiDocument } from '../../api/document';
+import { PlaintextExportBody } from './plaintext';
 
 export type ExportProps = {
   outputNameBase: string;
@@ -29,6 +30,10 @@ const exportTypes: ExportType[] = [
     name: 'Subtitles',
     component: WebVttExportBody,
   },
+  {
+    name: 'Plaintext',
+    component: PlaintextExportBody,
+  },
   {
     name: 'Transcribee Archive',
     component: TranscribeeExportBody,

frontend/src/editor/export/plaintext.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import * as Automerge from '@automerge/automerge';
+
+import { Checkbox } from '../../components/form';
+import { downloadTextAsFile } from '../../utils/download_text_as_file';
+import { ExportProps } from '.';
+import { PrimaryButton, SecondaryButton } from '../../components/button';
+import { generatePlaintext } from '../../utils/export/plaintext';
+
+export function PlaintextExportBody({ onClose, outputNameBase, editor }: ExportProps) {
+  const [includeSpeakerNames, setIncludeSpeakerNames] = useState(true);
+
+  return (
+    <form className="flex flex-col gap-4 mt-4">
+      <Checkbox
+        label="Include Speaker Names"
+        value={includeSpeakerNames}
+        onChange={(x) => setIncludeSpeakerNames(x)}
+      />
+      <div className="flex justify-between pt-4">
+        <SecondaryButton type="button" onClick={onClose}>
+          Cancel
+        </SecondaryButton>
+        <PrimaryButton
+          type="submit"
+          onClick={async (e) => {
+            e.preventDefault();
+            const plaintext = generatePlaintext(Automerge.toJS(editor.doc), includeSpeakerNames);
+            downloadTextAsFile(`${outputNameBase}.txt`, `text/plain`, plaintext);
+            onClose();
+          }}
+        >
+          Export
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+}

frontend/src/utils/export/plaintext.ts

@@ -0,0 +1,18 @@
+import { Document } from '../../editor/types';
+import { getSpeakerName } from '../document';
+
+export function generatePlaintext(doc: Document, includeSpeakerNames: boolean): string {
+  let last_speaker: string | null = null;
+  return doc.children
+    .map((paragraph) => {
+      let paragraphText = '';
+      if (includeSpeakerNames && last_speaker !== paragraph.speaker) {
+        paragraphText += `${getSpeakerName(paragraph.speaker, doc.speaker_names)}:\n`;
+        last_speaker = paragraph.speaker;
+      }
+      paragraphText += paragraph.children.map((x) => x.text).join('');
+      return paragraphText.trim();
+    })
+    .filter((x) => x !== '')
+    .join('\n\n');
+}