WIP: open doc examples in editor

src/app/App.tsx

@@ -6,9 +6,11 @@ import './app.scss';
 import { Classes, Spinner } from '@blueprintjs/core';
 import docsPackage from '@pybricks/ide-docs/package.json';
 import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import Activities from '../activities/Activities';
+import { editorActivateExample } from '../editor/actions';
 import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
@@ -47,6 +49,7 @@ const Terminal = React.lazy(async () => {
 
 const Docs: React.VFC = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
+    const dispatch = useDispatch();
 
     return (
         <iframe
@@ -140,6 +143,22 @@ const Docs: React.VFC = () => {
                 if (document.body.classList.contains(Classes.DARK)) {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
+
+                for (const preElement of contentWindow.document.getElementsByTagName(
+                    'pre',
+                )) {
+                    const tryMe = contentWindow.document.createElement('button');
+                    tryMe.innerText = 'try me!';
+                    tryMe.addEventListener('click', () => {
+                        dispatch(
+                            editorActivateExample('example.py', preElement.innerText),
+                        );
+                    });
+
+                    preElement.parentNode?.insertBefore(tryMe, preElement);
+                }
+
+                console.log('onload', contentWindow.location.href);
             }}
             src={`static/docs/v${docsPackage.version}/index.html?v${httpServerHeadersVersion}`}
             allowFullScreen={true}

src/editor/actions.ts

@@ -121,3 +121,11 @@ export const editorGoto = createAction((uuid: UUID, line: number) => ({
     uuid,
     line,
 }));
+
+export const editorActivateExample = createAction(
+    (fileName: string, content: string) => ({
+        type: 'editor.action.activateExample',
+        fileName,
+        content,
+    }),
+);

src/editor/sagas.ts

@@ -20,12 +20,15 @@ import { FileStorageDb, UUID } from '../fileStorage';
 import {
     fileStorageDidFailToLoadTextFile,
     fileStorageDidFailToStoreTextFileViewState,
+    fileStorageDidFailToWriteFile,
     fileStorageDidInitialize,
     fileStorageDidLoadTextFile,
     fileStorageDidStoreTextFileViewState,
+    fileStorageDidWriteFile,
     fileStorageLoadTextFile,
     fileStorageStoreTextFileValue,
     fileStorageStoreTextFileViewState,
+    fileStorageWriteFile,
 } from '../fileStorage/actions';
 import {
     pythonMessageComplete,
@@ -46,6 +49,7 @@ import { RootState } from '../reducers';
 import { acquireLock, defined, ensureError } from '../utils';
 import { createCountFunc } from '../utils/iter';
 import {
+    editorActivateExample,
     editorActivateFile,
     editorCloseFile,
     editorCompletionDidFailToInit,
@@ -339,6 +343,28 @@ function* monitorViewState(editor: monaco.editor.ICodeEditor): Generator {
     }
 }
 
+function* handleEditorActivateExample(
+    action: ReturnType<typeof editorActivateExample>,
+): Generator {
+    yield* put(fileStorageWriteFile(action.fileName, action.content));
+
+    const { didWrite, didFailToWrite } = yield* race({
+        didWrite: take(fileStorageDidWriteFile.when((a) => a.path === action.fileName)),
+        didFailToWrite: take(
+            fileStorageDidFailToWriteFile.when((a) => a.path === action.fileName),
+        ),
+    });
+
+    if (didFailToWrite) {
+        console.error(didFailToWrite.error);
+        return;
+    }
+
+    defined(didWrite);
+
+    yield* put(editorActivateFile(didWrite.uuid));
+}
+
 function* handleDidCreateEditor(editor: monaco.editor.ICodeEditor): Generator {
     // first, we need to be sure that file storage is ready
 
@@ -362,6 +388,7 @@ function* handleDidCreateEditor(editor: monaco.editor.ICodeEditor): Generator {
         openFiles,
         activeFileHistory,
     );
+    yield* takeEvery(editorActivateExample, handleEditorActivateExample);
     yield* takeEvery(editorGoto, handleEditorGoto, editor);
     yield* takeEvery(editorDidCloseFile, handleEditorDidCloseFile, activeFileHistory);
     yield* fork(monitorViewState, editor);