Add copy and paste control strip buttons (#241)

Technically browser copy and paste controls work, but this is hard to discover and sometimes inaccessible. Attempts to address issues like #239.

Future work would be to allow copying the graphics screen. Not sure how hard that would be.

apple2js.html

@@ -95,6 +95,13 @@
       <button id="toggle-printer" onclick="Apple2.openPrinterModal()" title="Toggle Printer">
         <i class="fas fa-print"></i>
       </button>
+      <div class="spacer short"></div>
+      <button onclick="Apple2.copy()" title="Copy">
+        <i class="fas fa-copy"></i>
+      </button>
+      <button onclick="Apple2.paste()" title="Paste">
+        <i class="fas fa-paste"></i>
+      </button>
       <div class="spacer"></div>
       <button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
         <i class="fas fa-info"></i>

apple2jse.html

@@ -96,7 +96,14 @@
         <button id="toggle-printer" onclick="Apple2.openPrinterModal()" title="Toggle Printer">
           <i class="fas fa-print"></i>
         </button>
-        <div class="spacer"></div>
+        <div class="spacer short"></div>
+        <button onclick="Apple2.copy()" title="Copy">
+          <i class="fas fa-copy"></i>
+        </button>
+        <button onclick="Apple2.paste()" title="Paste">
+          <i class="fas fa-paste"></i>
+        </button>
+          <div class="spacer"></div>
         <button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
           <i class="fas fa-info"></i>
         </button>

css/apple2.css

@@ -701,6 +701,11 @@ a.button:hover {
     flex-grow: 1;
 }
 
+.spacer.short {
+    flex-grow: 0;
+    width: 16px;
+}
+
 #reset-row {
     align-items: center;
     display: flex;

js/components/ClipboardCopy.tsx

@@ -0,0 +1,25 @@
+import { h } from 'preact';
+import cs from 'classnames';
+import { VideoModes } from 'js/videomodes';
+
+import styles from './css/ControlButton.module.scss';
+
+export interface ClipboardCopyProps {
+    vm: VideoModes | undefined;
+}
+
+export function ClipboardCopy({ vm }: ClipboardCopyProps) {
+    const doCopy = function () {
+        const asyncCopy = async function () {
+            if (vm) {
+                await navigator.clipboard.writeText(vm.getText());
+            }
+        };
+        void asyncCopy();
+    };
+    return (
+        <button className={styles.iconButton} onClick={doCopy} title="Copy">
+            <i className={cs('fa', 'fa-copy')} />
+        </button>
+    );
+}

js/components/ClipboardPaste.tsx

@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import cs from 'classnames';
+import Apple2IO from 'js/apple2io';
+
+import styles from './css/ControlButton.module.scss';
+
+export interface ClipboardPasteProps {
+    io: Apple2IO | undefined;
+}
+
+export function ClipboardPaste({ io }: ClipboardPasteProps) {
+    function doPaste() {
+        const asyncPaste = async function () {
+            if (io) {
+                const text = await navigator.clipboard.readText();
+                io.setKeyBuffer(text);
+            }
+        };
+        void asyncPaste();
+    }
+    return (
+        <button className={styles.iconButton} onClick={doPaste} title="Paste">
+            <i className={cs('fa', 'fa-paste')} />
+        </button>
+    );
+}

js/components/ControlStrip.tsx

@@ -4,6 +4,8 @@ import { CPUMeter } from './CPUMeter';
 import { Inset } from './Inset';
 import { useHotKey } from './hooks/useHotKey';
 import { AudioControl } from './AudioControl';
+import { ClipboardCopy } from './ClipboardCopy';
+import { ClipboardPaste } from './ClipboardPaste';
 import { OptionsModal } from './OptionsModal';
 import { OptionsContext } from './OptionsContext';
 import { Printer } from './Printer';
@@ -14,8 +16,10 @@ import { JoyStick } from '../ui/joystick';
 import { Screen, SCREEN_FULL_PAGE } from '../ui/screen';
 import { System } from '../ui/system';
 
-import styles from './css/ControlStrip.module.scss';
 import Apple2IO from 'js/apple2io';
+import { VideoModes } from 'js/videomodes';
+
+import styles from './css/ControlStrip.module.scss';
 
 const README = 'https://github.com/whscullin/apple2js#readme';
 
@@ -41,13 +45,15 @@ export const ControlStrip = ({
 }: ControlStripProps) => {
     const [showOptions, setShowOptions] = useState(false);
     const [io, setIO] = useState<Apple2IO>();
+    const [vm, setVM] = useState<VideoModes>();
     const options = useContext(OptionsContext);
 
     useEffect(() => {
         if (apple2) {
             const io = apple2.getIO();
             const vm = apple2.getVideoModes();
             setIO(io);
+            setVM(vm);
 
             const system = new System(io, e);
             options.addOptions(system);
@@ -94,6 +100,9 @@ export const ControlStrip = ({
                 <AudioControl apple2={apple2} />
                 <Printer io={io} slot={1} />
                 <Cassette io={io} />
+                <div style={{ flexGrow: 0, width: 16 }} />
+                <ClipboardCopy vm={vm} />
+                <ClipboardPaste io={io} />
                 <div style={{ flexGrow: 1 }} />
                 <ControlButton onClick={doReadme} title="About" icon="info" />
                 <ControlButton

js/ui/apple2.ts

@@ -847,6 +847,21 @@ export function openOptions() {
     optionsModal.openModal();
 }
 
+export function copy() {
+    const asyncCopy = async function () {
+        await navigator.clipboard.writeText(vm.getText());
+    };
+    void asyncCopy();
+}
+
+export function paste() {
+    const asyncPaste = async function () {
+        const text = await navigator.clipboard.readText();
+        io.setKeyBuffer(text);
+    };
+    void asyncPaste();
+}
+
 export function openPrinterModal() {
     const mimeType = 'application/octet-stream';
     const data = _printer.getRawOutput();