= React.useCallback(() => {
- if (!editorView || activeFile.type !== "text") {
+ const saveFile = React.useCallback(() => {
+ if (!editorView || activeFile.type !== "text" || activeFile.readOnly) {
return;
}
syncActiveFileState();
- const code = editorView.state.doc.toString();
- const data = new TextEncoder().encode(code);
+ const content = editorView.state.doc.toString();
+ const data = new TextEncoder().encode(content);
webR.FS.writeFile(activeFile.path, data).then(() => {
void filesInterface.refreshFilesystem();
+ setFileDirty(false);
}, (reason) => {
+ setFileDirty(true);
console.error(reason);
throw new Error(`Can't save editor contents. See the JavaScript console for details.`);
});
}, [syncActiveFileState, editorView]);
+ React.useEffect(() => {
+ saveCurrentFile.current = (): void => {
+ void saveFile();
+ };
+ }, [saveFile, editorView, activeFile]);
+
+ const share = React.useCallback(() => {
+ if (files.length === 0) return;
+ saveFile();
+ setShareUrl(window.location.href.toString());
+ setShareModalOpen(true);
+ }, [files, webR]);
+
+ const focusEditor = React.useCallback(() => {
+ if (editorView) {
+ editorView.focus();
+ }
+ }, [editorView]);
+
React.useEffect(() => {
if (!editorRef.current) {
return;
}
- const state = EditorState.create({ extensions: editorExtensions });
+ const state = EditorState.create({ extensions: scriptExtensions });
const view = new EditorView({
state,
parent: editorRef.current,
@@ -298,6 +379,7 @@ export function Editor({
path: '/home/web_user/Untitled1.R',
type: 'text',
readOnly: false,
+ dirty: true,
editorState: state,
}]);
@@ -306,6 +388,31 @@ export function Editor({
};
}, []);
+
+ /*
+ * Update the share URL as active files are saved
+ */
+ React.useEffect(() => {
+ const shouldUpdate = files.filter((file): file is EditorFile => file.type === 'text').every((file) => !file.dirty);
+ if (files.length > 0 && shouldUpdate) {
+ Promise.all(
+ files.filter((file): file is EditorFile => file.type === "text" && !file.readOnly)
+ .map(async (file) => ({
+ name: file.name,
+ path: file.path,
+ data: await webR.FS.readFile(file.path)
+ }))
+ ).then(shareItems => {
+ const shareData = encodeShareData(shareItems);
+ const url = new URL(window.location.href);
+ url.hash = `code=${shareData}`;
+ window.history.pushState({}, '', url.toString());
+ }, (reason: Error) => {
+ throw new Error(`Can't update share URL: ${reason.message}`);
+ });
+ }
+ }, [files]);
+
/*
* Register this component with the files interface so that when it comes to
* opening files they are displayed in this codemirror instance.
@@ -322,7 +429,7 @@ export function Editor({
syncActiveFileState();
const columns = Object.keys(data).map((key) => {
- return {key, name: key === "row.names" ? "" : key};
+ return { key, name: key === "row.names" ? "" : key };
});
const rows = Object.entries(data).reduce((a, entry) => {
@@ -361,40 +468,89 @@ export function Editor({
setActiveFileIdx(index - 1);
};
- filesInterface.openFileInEditor = (name: string, path: string, readOnly: boolean) => {
- // Don't reopen the file if it's already open, switch to that tab instead
- const existsIndex = files.findIndex((f) => "path" in f && f.path === path);
- if (existsIndex >= 0) {
- setActiveFileIdx(existsIndex);
- return Promise.resolve();
+ filesInterface.openContentInEditor = (openFiles: {
+ name: string,
+ content: Uint8Array,
+ }[], replace = false) => {
+ if (openFiles.length === 0) return;
+
+ const updatedFiles: EditorItem[] = replace ? [] : [...files];
+ openFiles.forEach((file) => {
+ updatedFiles.push({
+ name: file.name,
+ path: `/tmp/.webR${file.name}`,
+ type: "text",
+ readOnly: false,
+ dirty: true,
+ editorState: EditorState.create({
+ doc: utils.decodeTextOrBinaryContent(file.content),
+ extensions: file.name.toLowerCase().endsWith('.r') ? scriptExtensions : editorExtensions
+ }),
+ });
}
+ );
+ setFiles(updatedFiles);
+ setActiveFileIdx(0);
+ };
- return webR.FS.readFile(path).then((data) => {
- syncActiveFileState();
- const updatedFiles = [...files];
- const extensions = name.toLowerCase().endsWith('.r') ? editorExtensions : [];
- if (readOnly) extensions.push(EditorState.readOnly.of(true));
-
- // Get file content, dealing with backspace characters until none remain
- let content = new TextDecoder().decode(data);
- while (content.match(/.[\b]/)) {
- content = content.replace(/.[\b]/g, '');
+ filesInterface.openFilesInEditor = async (openFiles: {
+ name: string,
+ path: string,
+ readOnly?: boolean;
+ forceRead?: boolean
+ }[], replace = false) => {
+ // Dismiss sharing modal
+ setShareModalOpen(false);
+
+ const updatedFiles: EditorItem[] = replace ? [] : [...files];
+ let index = null;
+
+ for (const file of openFiles) {
+ const _options = {
+ readOnly: false,
+ forceRead: false,
+ ...file,
+ };
+
+ // If file is already open, switch to that tab
+ const existsIndex = updatedFiles.findIndex((f) => "path" in f && f.path === file.path);
+ if (existsIndex >= 0 && !_options.forceRead) {
+ index ??= existsIndex;
+ continue;
}
- // Add this new file content to the list of open files
- const index = updatedFiles.push({
- name,
- path,
- type: "text",
- readOnly,
- editorState: EditorState.create({
- doc: content,
- extensions,
- }),
+ // Otherwise, read the file contents from the VFS
+ await webR.FS.readFile(file.path).then((data) => {
+ syncActiveFileState();
+ let extensions = file.name.toLowerCase().endsWith('.r') ? scriptExtensions : editorExtensions;
+ if (_options.readOnly) extensions = [EditorState.readOnly.of(true)];
+
+ const newFile: EditorItem = {
+ name: file.name,
+ path: file.path,
+ type: "text",
+ readOnly: _options.readOnly,
+ dirty: false,
+ editorState: EditorState.create({
+ doc: utils.decodeTextOrBinaryContent(data),
+ extensions,
+ }),
+ };
+
+ if (existsIndex >= 0) {
+ // Switch to and update existing tab content
+ updatedFiles[existsIndex] = newFile;
+ index ??= existsIndex;
+ } else {
+ // Add this new file content to the list of open files
+ const newIndex = updatedFiles.push(newFile);
+ index ??= newIndex - 1;
+ }
});
- setFiles(updatedFiles);
- setActiveFileIdx(index - 1);
- });
+ }
+
+ setFiles(updatedFiles);
+ setActiveFileIdx(index ?? 0);
};
}, [files, filesInterface]);
@@ -438,64 +594,75 @@ export function Editor({
}, [files, syncActiveFileState, activeFile, editorView]);
return (
-
-
-
-
-
-
- This component is an instance of the CodeMirror interactive text editor.
- The editor has been configured so that the Tab key controls the indentation of code.
- To move focus away from the editor, press the Escape key, and then press the Tab key directly after it.
- Escape and then Shift-Tab can also be used to move focus backwards.
-
- {(isData && activeFile.data) &&
-
-
+
- {isScript &&
- }
- {!isReadOnly &&
- }
-
+
+
+
+
+
+ This component is an instance of the CodeMirror interactive text editor.
+ The editor has been configured so that the Tab key controls the indentation of code.
+ To move focus away from the editor, press the Escape key, and then press the Tab key directly after it.
+ Escape and then Shift-Tab can also be used to move focus backwards.
+
+ {(isData && activeFile.data) &&
+
+
+ {isScript &&
+ }
+ {!isReadOnly &&
+ }
+
+
+
+
+ setShareModalOpen(false)}
+ shareUrl={shareUrl}
+ />
+
);
}
diff --git a/src/repl/components/Files.tsx b/src/repl/components/Files.tsx
index df924ec2..c232461e 100644
--- a/src/repl/components/Files.tsx
+++ b/src/repl/components/Files.tsx
@@ -154,7 +154,7 @@ export function Files({
void (async () => {
const zip = new JSZip();
await zipFromFSNode(zip, selectedNode);
- const data = await zip.generateAsync({type : "uint8array"});
+ const data = await zip.generateAsync({ type: "uint8array" });
doDownload(`${selectedNode.name}.zip`, data);
})();
}
@@ -165,7 +165,7 @@ export function Files({
return;
}
const path = getNodePath(selectedNode);
- await filesInterface.openFileInEditor(selectedNode.name, path, false);
+ await filesInterface.openFilesInEditor([{ name: selectedNode.name, path, readOnly: false }]);
};
const onNewDirectory = async () => {
diff --git a/src/repl/components/Share.css b/src/repl/components/Share.css
new file mode 100644
index 00000000..6f23d01d
--- /dev/null
+++ b/src/repl/components/Share.css
@@ -0,0 +1,61 @@
+.share-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.share-modal {
+ background-color: white;
+ border-radius: 4px;
+ padding: 20px;
+ width: 500px;
+ max-width: 90%;
+ position: relative;
+}
+
+.share-modal-heading {
+ margin-bottom: 15px;
+}
+
+.share-modal-close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.share-modal-content {
+ display: flex;
+}
+
+.share-modal-content input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-family: monospace;
+ margin-right: 8px;
+}
+
+.copy-button {
+ padding: 8px 12px;
+ background-color: #0366d6;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.copy-button:hover {
+ background-color: #0255bd;
+}
diff --git a/src/repl/components/Share.tsx b/src/repl/components/Share.tsx
new file mode 100644
index 00000000..1c486d56
--- /dev/null
+++ b/src/repl/components/Share.tsx
@@ -0,0 +1,169 @@
+
+import React, { useState, useEffect } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import { inflate, deflate } from "pako";
+import { decode, encode } from '@msgpack/msgpack';
+import { base64ToBuffer, bufferToBase64 } from '../../webR/utils';
+import './Share.css';
+
+export type ShareItem = {
+ name: string;
+ path: string;
+ data?: Uint8Array;
+ text?: string;
+};
+
+export enum ShareDataFlags {
+ UNCOMPRESSED = 'u',
+ ZLIB = 'z',
+ MSGPACK = 'm',
+ JSON = 'j',
+}
+
+export function isShareItems(files: any): files is ShareItem[] {
+ return Array.isArray(files) && files.every((file) =>
+ 'name' in file && typeof file.name === 'string' &&
+ 'path' in file && typeof file.path === 'string' &&
+ (
+ ('text' in file && typeof file.text === "string") ||
+ ('data' in file && file.data instanceof Uint8Array)
+ )
+ );
+}
+
+/**
+ * Encode files for sharing.
+ *
+ * Encode shared files for use as the hash string in a sharing URL.
+ * This function outputs strings with msgpack format and zlib compression.
+ *
+ * Shared item typing
+ * ------------------
+ * A shared item is an object with the following format,
+ *
+ * { name: string; path: string; text?: string; data?: Uint8Array }
+ *
+ * where `name` is a display name (usually the filename), `path` is the path
+ * where the file will be written to the Emscripten VFS, and either a `text`
+ * string or the file's binary `data` is present, defining the content for the
+ * shared file.
+ *
+ * Sharing via Data URI
+ * --------------------
+ * An array of shared items should be encoded either in msgpack or JSON format,
+ * and then optionally compressed using the zlib deflate algorithm.
+ *
+ * The resulting binary data should be base64 encoded, with special characters
+ * encoded for use as a URL hash.
+ *
+ * The hash may optionally end in `&[...]`, where [...] may be one or more of
+ * the following flags:
+ * - 'u': uncompressed
+ * - 'z': zlib compressed
+ * - 'm': msgpack format
+ * - 'j': json format
+ * The default flags string is `&mz`.
+ *
+ * Sharing via `postMessage()`
+ * ---------------------------
+ * The webR app listens for messages with `data` containing an array of shared
+ * items: { items: ShareItem[] }.
+ *
+ * When such a message has been received, the shared file content is applied
+ * to the current editor.
+ * @param {ShareItem[]} items An array of shared file content.
+ * @returns {string} Encoded URI string.
+ */
+export function encodeShareData(items: ShareItem[]): string {
+ const encoded = encode(items); // msgpack format
+ const compressed = deflate(encoded); // zlib deflate compressed
+ const base64 = bufferToBase64(compressed); // base64 encoded
+ const uri = encodeURIComponent(base64); // Encode special characters for URI
+ return uri;
+}
+
+/**
+ * Decode shared files data.
+ *
+ * Decodes the hash string provided in a sharing URL. Data may be JSON or
+ * msgpack encoded, with optional compression. See `encodeShareData()` for
+ * futher details.
+ * @param {string} data Encoded URI string.
+ * @param {string} [flags] Decoding flags. Defaults to `mz`, meaning msgpack
+ * format and zlib compressed.
+ * @returns {ShareItem[]} An array of shared file content.
+ */
+export function decodeShareData(data: string, flags = 'mz'): ShareItem[] {
+ const base64 = decodeURIComponent(data); // Decode URI encoded characters
+ const buffer = base64ToBuffer(base64); // Decode base64
+
+ const encoded = flags.includes(ShareDataFlags.UNCOMPRESSED)
+ ? buffer // No compression
+ : inflate(buffer); // zlib deflate compressed
+
+ const items = flags.includes(ShareDataFlags.JSON)
+ ? JSON.parse(new TextDecoder().decode(encoded)) as unknown // JSON format
+ : decode(encoded); // msgpack format
+
+ if (!isShareItems(items)) {
+ throw new Error("Provided URL data is not a valid set of share files.");
+ }
+ return items;
+}
+
+interface ShareModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ shareUrl: string;
+}
+
+export function ShareModal({ isOpen, onClose, shareUrl }: ShareModalProps) {
+ const [copied, setCopied] = useState(false);
+ const urlBytes = new TextEncoder().encode(shareUrl).length;
+
+ useEffect(() => {
+ if (copied) {
+ const timer = setTimeout(() => setCopied(false), 2000);
+ return () => clearTimeout(timer);
+ }
+ }, [copied]);
+
+ const handleCopyClick = () => {
+ navigator.clipboard.writeText(shareUrl).then(() => {
+ setCopied(true);
+ }).catch(err => {
+ console.error('Failed to copy: ', err);
+ });
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+
Share URL ({urlBytes} bytes)
+
+
+ {copied ? "Copied!" : "Copy URL"}
+
+
+
+