From f2e0dbbb94dd72a6843c6e7a36df2ea5477e2c36 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 13 Jan 2022 14:36:51 +0000 Subject: [PATCH 01/14] feat(codeeditor): read-only mode --- sandpack-client/src/types.ts | 1 + .../src/components/CodeEditor/index.tsx | 9 +++++++-- .../src/components/FileTabs/index.tsx | 18 ++++++++++++++---- sandpack-react/src/hooks/useActiveCode.ts | 2 ++ .../src/presets/Playground.stories.tsx | 4 ++-- sandpack-react/src/presets/Sandpack.tsx | 3 +++ sandpack-react/src/styles/index.css | 14 +++++++++++++- sandpack-react/src/types.ts | 1 + 8 files changed, 43 insertions(+), 9 deletions(-) diff --git a/sandpack-client/src/types.ts b/sandpack-client/src/types.ts index 85e513688..36b9c78d6 100644 --- a/sandpack-client/src/types.ts +++ b/sandpack-client/src/types.ts @@ -2,6 +2,7 @@ import type { ITemplate } from "codesandbox-import-util-types"; export interface SandpackBundlerFile { code: string; + readOnly?: boolean; } export type SandpackBundlerFiles = Record; diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx index 57e9b9067..766919b70 100644 --- a/sandpack-react/src/components/CodeEditor/index.tsx +++ b/sandpack-react/src/components/CodeEditor/index.tsx @@ -39,6 +39,7 @@ export interface CodeEditorProps { */ extensionsKeymap?: Array; id?: string; + readOnly?: boolean; } export { CodeMirror as CodeEditor }; @@ -63,11 +64,12 @@ export const SandpackCodeEditor = React.forwardRef< extensions, extensionsKeymap, id, + readOnly, }, ref ) => { const { sandpack } = useSandpack(); - const { code, updateCode } = useActiveCode(); + const { code, updateCode, readOnly: readOnlyFile } = useActiveCode(); const { activePath, status, editorState } = sandpack; const shouldShowTabs = showTabs ?? sandpack.openPaths.length > 1; @@ -79,7 +81,9 @@ export const SandpackCodeEditor = React.forwardRef< return ( - {shouldShowTabs ? : null} + {shouldShowTabs && ( + + )}
{showRunButton && status === "idle" ? : null} diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 3e0139940..7beca0684 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -10,16 +10,20 @@ import { export interface FileTabsProps { closableTabs?: boolean; + readOnly?: boolean; } /** * @category Components */ -export const FileTabs = ({ closableTabs }: FileTabsProps): JSX.Element => { +export const FileTabs = ({ + closableTabs, + readOnly, +}: FileTabsProps): JSX.Element => { const { sandpack } = useSandpack(); const c = useClasser("sp"); - const { activePath, openPaths, setActiveFile } = sandpack; + const { activePath, openPaths, setActiveFile, files } = sandpack; const handleCloseFile = (ev: React.MouseEvent): void => { ev.stopPropagation(); @@ -80,13 +84,19 @@ export const FileTabs = ({ closableTabs }: FileTabsProps): JSX.Element => { type="button" > {getTriggerText(filePath)} - {closableTabs && openPaths.length > 1 ? ( + {closableTabs && openPaths.length > 1 && ( - ) : null} + )} + + {files[filePath].readOnly && ( + Read-only + )} ))} + + {readOnly && Read-only}
); diff --git a/sandpack-react/src/hooks/useActiveCode.ts b/sandpack-react/src/hooks/useActiveCode.ts index 6f7959d51..030dfd562 100644 --- a/sandpack-react/src/hooks/useActiveCode.ts +++ b/sandpack-react/src/hooks/useActiveCode.ts @@ -5,12 +5,14 @@ import { useSandpack } from "./useSandpack"; */ export const useActiveCode = (): { code: string; + readOnly: boolean; updateCode: (newCode: string) => void; } => { const { sandpack } = useSandpack(); return { code: sandpack.files[sandpack.activePath].code, + readOnly: sandpack.files[sandpack.activePath].readOnly, updateCode: sandpack.updateCurrentFile, }; }; diff --git a/sandpack-react/src/presets/Playground.stories.tsx b/sandpack-react/src/presets/Playground.stories.tsx index 393a121fe..aaa7f1eb3 100644 --- a/sandpack-react/src/presets/Playground.stories.tsx +++ b/sandpack-react/src/presets/Playground.stories.tsx @@ -14,8 +14,8 @@ export const Main = (): JSX.Element => { return ( ); diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index 2688dd271..b5956a25d 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -57,6 +57,8 @@ export interface SandpackProps { recompileMode?: "immediate" | "delayed"; recompileDelay?: number; codeEditor?: SandpackCodeOptions; + + readOnly?: boolean; }; } @@ -88,6 +90,7 @@ export const Sandpack: React.FC = (props) => { initMode: props.options?.initMode, extensions: props.options?.codeEditor?.extensions, extensionsKeymap: props.options?.codeEditor?.extensionsKeymap, + readOnly: props.options?.readOnly, }; const providerOptions: SandpackProviderProps = { diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css index f91ced865..958a23c23 100644 --- a/sandpack-react/src/styles/index.css +++ b/sandpack-react/src/styles/index.css @@ -255,7 +255,7 @@ /* Common Styling */ .sp-tab-button { - display: block; + display: flex; background: transparent; appearance: none; font-size: inherit; @@ -267,6 +267,7 @@ border-bottom: 1px solid transparent; transition: all 0.15s ease-out; white-space: nowrap; + align-items: center; } .sp-tab-button[data-active="true"] { @@ -299,6 +300,17 @@ visibility: unset; } +.sp-label { + padding: 1px var(--sp-space-1); + border-radius: var(--sp-border-radius); + margin-left: var(--sp-space-2); + font-size: 0.6em; + text-transform: uppercase; + background-color: var(--sp-colors-fg-inactive); + position: relative; + top: 1px; +} + .sp-button { appearance: none; border: 0; diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index d700a957e..d3bf5d1b8 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -86,6 +86,7 @@ export interface SandpackFile { code: string; hidden?: boolean; active?: boolean; + readOnly?: boolean; } export type SandpackFiles = Record; From 098d13126205213405727531843596e6958752d6 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 13 Jan 2022 14:44:53 +0000 Subject: [PATCH 02/14] Update custom-content.md --- .../docs/getting-started/custom-content.md | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index a5bc23283..1ee88f54d 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -134,12 +134,12 @@ default: ```jsx +``` + +**Globally:** + +```jsx + +``` + ### openPaths and activePath You can override the entire hidden/active system with two settings (`openPaths` and `activePath`) inside the From 260090098b291a5ce49a73b0be2108b897450f75 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 13 Jan 2022 15:11:14 +0000 Subject: [PATCH 03/14] fixes --- .../components/FileTabs/FileTabs.stories.tsx | 30 +++++++++++++++++++ .../src/components/FileTabs/index.tsx | 14 ++++++--- sandpack-react/src/styles/index.css | 13 +++++--- 3 files changed, 49 insertions(+), 8 deletions(-) diff --git a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx index 4a6a45248..72f1eb3e2 100644 --- a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx +++ b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { SandpackLayout } from "../../common/Layout"; import { SandpackProvider } from "../../contexts/sandpackContext"; import { SandpackCodeViewer } from "../CodeViewer"; +import { Sandpack } from "../../"; import { FileTabs } from "./index"; @@ -60,3 +61,32 @@ export const WithHiddenFiles: React.FC = () => ( ); + +export const ReadOnlyByFile: React.FC = () => ( + +); + +export const ReadOnlyGlobal: React.FC = () => ( + +); + +export const ReadOnlyGlobalAndPerFile: React.FC = () => ( + +); diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 7beca0684..8e3ee6f97 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -18,7 +18,7 @@ export interface FileTabsProps { */ export const FileTabs = ({ closableTabs, - readOnly, + readOnly: globalReadOnly, }: FileTabsProps): JSX.Element => { const { sandpack } = useSandpack(); const c = useClasser("sp"); @@ -90,13 +90,19 @@ export const FileTabs = ({ )} - {files[filePath].readOnly && ( - Read-only + {!globalReadOnly && files[filePath].readOnly && ( + + Read-only + )} ))} - {readOnly && Read-only} + {globalReadOnly && ( + + Read-only + + )} ); diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css index 958a23c23..b3bbc0635 100644 --- a/sandpack-react/src/styles/index.css +++ b/sandpack-react/src/styles/index.css @@ -256,6 +256,7 @@ .sp-tab-button { display: flex; + align-items: center; background: transparent; appearance: none; font-size: inherit; @@ -267,7 +268,6 @@ border-bottom: 1px solid transparent; transition: all 0.15s ease-out; white-space: nowrap; - align-items: center; } .sp-tab-button[data-active="true"] { @@ -300,15 +300,20 @@ visibility: unset; } +.sp-label-wrap { + display: inline-flex; + margin-left: var(--sp-space-2); + flex: 1; + justify-content: flex-end; + align-items: center; +} + .sp-label { padding: 1px var(--sp-space-1); border-radius: var(--sp-border-radius); - margin-left: var(--sp-space-2); font-size: 0.6em; text-transform: uppercase; background-color: var(--sp-colors-fg-inactive); - position: relative; - top: 1px; } .sp-button { From b545db765b60a9228426637b3c38f25a91aca8a9 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 13 Jan 2022 15:22:48 +0000 Subject: [PATCH 04/14] fixes --- sandpack-react/src/components/FileTabs/index.tsx | 12 ++++++------ sandpack-react/src/styles/index.css | 7 ++++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 8e3ee6f97..4e7ce2953 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -97,13 +97,13 @@ export const FileTabs = ({ )} ))} - - {globalReadOnly && ( - - Read-only - - )} + + {globalReadOnly && ( + + Read-only + + )} ); }; diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css index b3bbc0635..369576f5b 100644 --- a/sandpack-react/src/styles/index.css +++ b/sandpack-react/src/styles/index.css @@ -199,6 +199,7 @@ .sp-tabs { border-bottom: 1px solid var(--sp-colors-fg-inactive); background: var(--sp-colors-bg-default); + display: flex; } .sp-tabs-scrollable-container { @@ -209,6 +210,7 @@ align-items: stretch; min-height: 40px; margin-bottom: -1px; + flex: 1; } .sp-preview-container { @@ -302,9 +304,7 @@ .sp-label-wrap { display: inline-flex; - margin-left: var(--sp-space-2); - flex: 1; - justify-content: flex-end; + padding: 0 var(--sp-space-4); align-items: center; } @@ -314,6 +314,7 @@ font-size: 0.6em; text-transform: uppercase; background-color: var(--sp-colors-fg-inactive); + white-space: nowrap; } .sp-button { From 0b80fc6ea8291f229c10fbc83efccf1ab4715ec9 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 13 Jan 2022 16:22:42 +0000 Subject: [PATCH 05/14] docs --- sandpack-react/src/components/CodeEditor/index.tsx | 3 +++ .../src/components/FileTabs/FileTabs.stories.tsx | 4 ++-- sandpack-react/src/components/FileTabs/index.tsx | 8 ++++++++ sandpack-react/src/hooks/useActiveCode.ts | 5 ++++- sandpack-react/src/presets/Sandpack.tsx | 3 +++ 5 files changed, 20 insertions(+), 3 deletions(-) diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx index 766919b70..1238d554a 100644 --- a/sandpack-react/src/components/CodeEditor/index.tsx +++ b/sandpack-react/src/components/CodeEditor/index.tsx @@ -39,6 +39,9 @@ export interface CodeEditorProps { */ extensionsKeymap?: Array; id?: string; + /** + * This disables editing of the editor content by the user. + */ readOnly?: boolean; } diff --git a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx index 72f1eb3e2..e6d04a7b3 100644 --- a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx +++ b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx @@ -67,7 +67,7 @@ export const ReadOnlyByFile: React.FC = () => ( customSetup={{ entry: "/index.tsx", main: "/App.tsx" }} files={{ "/index.tsx": { code: "", hidden: true }, - "/src/app.tsx": { code: "Hello", readOnly: true }, + "/src/App.tsx": { code: "Hello", readOnly: true }, "/src/components/button.tsx": { code: "World", readOnly: false }, }} options={{ showTabs: true }} @@ -84,7 +84,7 @@ export const ReadOnlyGlobalAndPerFile: React.FC = () => ( options={{ showTabs: true, readOnly: true }} files={{ "/index.tsx": { code: "", hidden: true }, - "/src/app.tsx": { code: "Hello", readOnly: true }, + "/src/App.tsx": { code: "Hello", readOnly: true }, "/src/components/button.tsx": { code: "World", readOnly: false }, }} template="react-ts" diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 4e7ce2953..6cf43d1a7 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -9,11 +9,19 @@ import { } from "../../utils/stringUtils"; export interface FileTabsProps { + /** + * This adds a close button next to each file with a proper trigger to close it. + */ closableTabs?: boolean; + /** + * This adds a "Read-only" label beside the file list. + */ readOnly?: boolean; } /** + * FileTabs is a list of all open files, active file and its state. + * * @category Components */ export const FileTabs = ({ diff --git a/sandpack-react/src/hooks/useActiveCode.ts b/sandpack-react/src/hooks/useActiveCode.ts index 030dfd562..ad8c244cd 100644 --- a/sandpack-react/src/hooks/useActiveCode.ts +++ b/sandpack-react/src/hooks/useActiveCode.ts @@ -1,6 +1,9 @@ import { useSandpack } from "./useSandpack"; /** + * This returns the current state of the active file + * and a method to update its content. + * * @category Hooks */ export const useActiveCode = (): { @@ -12,7 +15,7 @@ export const useActiveCode = (): { return { code: sandpack.files[sandpack.activePath].code, - readOnly: sandpack.files[sandpack.activePath].readOnly, + readOnly: sandpack.files[sandpack.activePath].readOnly ?? false, updateCode: sandpack.updateCurrentFile, }; }; diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index b5956a25d..d789ecdbe 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -58,6 +58,9 @@ export interface SandpackProps { recompileDelay?: number; codeEditor?: SandpackCodeOptions; + /** + * This disables editing of the all files content by the user. + */ readOnly?: boolean; }; } From b1292e910003f3702d2ec256c374476ebe65f3cb Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:51:04 +0000 Subject: [PATCH 06/14] Update sandpack-react/src/components/FileTabs/index.tsx Co-authored-by: Roman Kuba --- sandpack-react/src/components/FileTabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 6cf43d1a7..607c8a53d 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -10,7 +10,7 @@ import { export interface FileTabsProps { /** - * This adds a close button next to each file with a proper trigger to close it. + * This adds a close button next to each file with a unique trigger to close it. */ closableTabs?: boolean; /** From a31068f541e07e602b1afda26e73b9c77e64910f Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:51:08 +0000 Subject: [PATCH 07/14] Update sandpack-react/src/components/FileTabs/index.tsx Co-authored-by: Roman Kuba --- sandpack-react/src/components/FileTabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 607c8a53d..5f9490fa5 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -14,7 +14,7 @@ export interface FileTabsProps { */ closableTabs?: boolean; /** - * This adds a "Read-only" label beside the file list. + * This adds a "Read-only" label next to the file list. */ readOnly?: boolean; } From 229b2dd6d03952b3459e89db0aa49737ce7da3bb Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:51:13 +0000 Subject: [PATCH 08/14] Update sandpack-react/src/components/FileTabs/index.tsx Co-authored-by: Roman Kuba --- sandpack-react/src/components/FileTabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index 5f9490fa5..e6eb81497 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -20,7 +20,7 @@ export interface FileTabsProps { } /** - * FileTabs is a list of all open files, active file and its state. + * FileTabs is a list of all open files, the active file, and its state. * * @category Components */ From 65ea8cca31d18822007fc8fa736072804b85d7d0 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:51:18 +0000 Subject: [PATCH 09/14] Update sandpack-react/src/presets/Sandpack.tsx Co-authored-by: Roman Kuba --- sandpack-react/src/presets/Sandpack.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index d789ecdbe..b585366d0 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -59,7 +59,7 @@ export interface SandpackProps { codeEditor?: SandpackCodeOptions; /** - * This disables editing of the all files content by the user. + * This disables editing of content by the user in all files. */ readOnly?: boolean; }; From 39404ce877134b07dbd8fbac799c4209f95ad12b Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:51:23 +0000 Subject: [PATCH 10/14] Update website/docs/docs/getting-started/custom-content.md Co-authored-by: Roman Kuba --- website/docs/docs/getting-started/custom-content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index 1ee88f54d..ed4ac4e9a 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -154,7 +154,7 @@ The `active` flag has precendence over the `hidden` flag. So a file with both `h ### Read-only mode -You can set just one or more files as read-only or the entire Sandpack, which will make all files non-editable. +You can set one, multiple files, or the entire Sandpack as read-only, which will make all files non-editable. **Per file:** From 1d2007321031156985b8b8cf9f07fd6228a05067 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 09:55:32 +0000 Subject: [PATCH 11/14] revert changes --- .../CodeEditor/CodeEditor.stories.tsx | 29 +++++++++++++++++++ .../src/components/CodeEditor/CodeMirror.tsx | 3 ++ .../components/FileTabs/FileTabs.stories.tsx | 29 ------------------- .../src/components/FileTabs/index.tsx | 25 ++-------------- sandpack-react/src/styles/index.css | 19 ------------ 5 files changed, 35 insertions(+), 70 deletions(-) diff --git a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx index c9cba4750..e3a1e3fa6 100644 --- a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx @@ -84,3 +84,32 @@ export const ExtensionAutocomplete: React.FC = () => ( ); + +export const ReadOnlyByFile: React.FC = () => ( + +); + +export const ReadOnlyGlobal: React.FC = () => ( + +); + +export const ReadOnlyGlobalAndPerFile: React.FC = () => ( + +); diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx index e97a9a15d..2e7bc83ac 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx @@ -66,6 +66,9 @@ interface CodeMirrorProps { showInlineErrors?: boolean; wrapContent?: boolean; editorState?: SandpackEditorState; + /** + * This disables editing of content by the user in all files. + */ readOnly?: boolean; decorators?: Decorators; initMode: SandpackInitMode; diff --git a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx index e6d04a7b3..200465248 100644 --- a/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx +++ b/sandpack-react/src/components/FileTabs/FileTabs.stories.tsx @@ -61,32 +61,3 @@ export const WithHiddenFiles: React.FC = () => ( ); - -export const ReadOnlyByFile: React.FC = () => ( - -); - -export const ReadOnlyGlobal: React.FC = () => ( - -); - -export const ReadOnlyGlobalAndPerFile: React.FC = () => ( - -); diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index e6eb81497..97fe1c7ae 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -13,25 +13,18 @@ export interface FileTabsProps { * This adds a close button next to each file with a unique trigger to close it. */ closableTabs?: boolean; - /** - * This adds a "Read-only" label next to the file list. - */ - readOnly?: boolean; } /** * FileTabs is a list of all open files, the active file, and its state. - * + * * @category Components */ -export const FileTabs = ({ - closableTabs, - readOnly: globalReadOnly, -}: FileTabsProps): JSX.Element => { +export const FileTabs = ({ closableTabs }: FileTabsProps): JSX.Element => { const { sandpack } = useSandpack(); const c = useClasser("sp"); - const { activePath, openPaths, setActiveFile, files } = sandpack; + const { activePath, openPaths, setActiveFile } = sandpack; const handleCloseFile = (ev: React.MouseEvent): void => { ev.stopPropagation(); @@ -97,21 +90,9 @@ export const FileTabs = ({ )} - - {!globalReadOnly && files[filePath].readOnly && ( - - Read-only - - )} ))} - - {globalReadOnly && ( - - Read-only - - )} ); }; diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css index 369576f5b..56dc1ecd9 100644 --- a/sandpack-react/src/styles/index.css +++ b/sandpack-react/src/styles/index.css @@ -199,7 +199,6 @@ .sp-tabs { border-bottom: 1px solid var(--sp-colors-fg-inactive); background: var(--sp-colors-bg-default); - display: flex; } .sp-tabs-scrollable-container { @@ -210,7 +209,6 @@ align-items: stretch; min-height: 40px; margin-bottom: -1px; - flex: 1; } .sp-preview-container { @@ -302,21 +300,6 @@ visibility: unset; } -.sp-label-wrap { - display: inline-flex; - padding: 0 var(--sp-space-4); - align-items: center; -} - -.sp-label { - padding: 1px var(--sp-space-1); - border-radius: var(--sp-border-radius); - font-size: 0.6em; - text-transform: uppercase; - background-color: var(--sp-colors-fg-inactive); - white-space: nowrap; -} - .sp-button { appearance: none; border: 0; @@ -324,8 +307,6 @@ padding: var(--sp-space-1) var(--sp-space-3) var(--sp-space-1) var(--sp-space-2); border-radius: var(--sp-border-radius); - display: flex; - align-items: center; color: var(--sp-colors-fg-default); background-color: var(--sp-colors-bg-default); font-size: inherit; From 5157a7aa537190b67e959917d4c9551b82dff61e Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 10:18:20 +0000 Subject: [PATCH 12/14] update layout --- .../components/CodeEditor/CodeEditor.stories.tsx | 2 +- .../src/components/CodeEditor/CodeMirror.tsx | 10 ++++++++++ sandpack-react/src/components/CodeEditor/index.tsx | 11 ++++++++--- sandpack-react/src/components/CodeViewer/index.tsx | 1 + sandpack-react/src/styles/index.css | 13 +++++++++++++ 5 files changed, 33 insertions(+), 4 deletions(-) diff --git a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx index e3a1e3fa6..fcc99c029 100644 --- a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx @@ -90,7 +90,7 @@ export const ReadOnlyByFile: React.FC = () => ( customSetup={{ entry: "/index.tsx", main: "/App.tsx" }} files={{ "/index.tsx": { code: "", hidden: true }, - "/src/App.tsx": { code: "Hello", readOnly: true }, + "/src/App.tsx": { code: "Hello", readOnly: true, active: true }, "/src/components/button.tsx": { code: "World", readOnly: false }, }} options={{ showTabs: true }} diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx index 2e7bc83ac..480ef4073 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx @@ -70,6 +70,11 @@ interface CodeMirrorProps { * This disables editing of content by the user in all files. */ readOnly?: boolean; + /** + * Controls the visibility of Read-only label, which will only + * appears when `readOnly` is `true` + */ + showReadOnly?: boolean; decorators?: Decorators; initMode: SandpackInitMode; id?: string; @@ -96,6 +101,7 @@ export const CodeMirror = React.forwardRef( wrapContent = false, editorState = "pristine", readOnly = false, + showReadOnly = true, decorators, initMode = "lazy", id, @@ -347,6 +353,10 @@ export const CodeMirror = React.forwardRef( {!shouldInitEditor && ( {code} )} + + {readOnly && showReadOnly && ( + Read-only + )} ); } diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx index 1238d554a..1772ac704 100644 --- a/sandpack-react/src/components/CodeEditor/index.tsx +++ b/sandpack-react/src/components/CodeEditor/index.tsx @@ -43,6 +43,11 @@ export interface CodeEditorProps { * This disables editing of the editor content by the user. */ readOnly?: boolean; + /** + * Controls the visibility of Read-only label, which will only + * appears when `readOnly` is `true` + */ + showReadOnly?: boolean; } export { CodeMirror as CodeEditor }; @@ -68,6 +73,7 @@ export const SandpackCodeEditor = React.forwardRef< extensionsKeymap, id, readOnly, + showReadOnly, }, ref ) => { @@ -84,9 +90,7 @@ export const SandpackCodeEditor = React.forwardRef< return ( - {shouldShowTabs && ( - - )} + {shouldShowTabs && }
{showRunButton && status === "idle" ? : null} diff --git a/sandpack-react/src/components/CodeViewer/index.tsx b/sandpack-react/src/components/CodeViewer/index.tsx index 84d53fa73..258b27c58 100644 --- a/sandpack-react/src/components/CodeViewer/index.tsx +++ b/sandpack-react/src/components/CodeViewer/index.tsx @@ -61,6 +61,7 @@ export const SandpackCodeViewer = React.forwardRef< showLineNumbers={showLineNumbers} wrapContent={wrapContent} readOnly + showReadOnly={false} /> {sandpack.status === "idle" ? : null} diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css index 56dc1ecd9..c930ebd0a 100644 --- a/sandpack-react/src/styles/index.css +++ b/sandpack-react/src/styles/index.css @@ -515,3 +515,16 @@ height: var(--sp-layout-height); width: 100%; } + +.sp-read-only { + font-family: var(--sp-font-mono); + font-size: 0.8em; + position: absolute; + right: var(--sp-space-2); + bottom: var(--sp-space-2); + z-index: 2; + color: var(--sp-colors-bg-active); + background-color: var(--sp-colors-fg-active); + border-radius: 99999px; + padding: calc(var(--sp-space-1) / 2) var(--sp-space-2); +} From 8491b143dedf5724a3c1e1c9c29a4f5940ddc81d Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 14:32:14 +0000 Subject: [PATCH 13/14] Update CodeEditor.stories.tsx and Sandpack.tsx --- .../CodeEditor/CodeEditor.stories.tsx | 80 +++++++++++++------ sandpack-react/src/presets/Sandpack.tsx | 6 ++ 2 files changed, 60 insertions(+), 26 deletions(-) diff --git a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx index fcc99c029..7a9c38641 100644 --- a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx @@ -85,31 +85,59 @@ export const ExtensionAutocomplete: React.FC = () => ( ); -export const ReadOnlyByFile: React.FC = () => ( - -); +export const ReadOnly: React.FC = () => { + return ( + <> +

Read-only by file

+ -export const ReadOnlyGlobal: React.FC = () => ( - -); +

Read-only global

+ -export const ReadOnlyGlobalAndPerFile: React.FC = () => ( - -); +

Read-only global and by file

+ + +

Read-only global, but no label

+ + +

Read-only by file, but no label

+ + + ); +}; diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index b585366d0..493300a46 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -62,6 +62,11 @@ export interface SandpackProps { * This disables editing of content by the user in all files. */ readOnly?: boolean; + /** + * Controls the visibility of Read-only label, which will only + * appears when `readOnly` is `true` + */ + showReadOnly?: boolean; }; } @@ -94,6 +99,7 @@ export const Sandpack: React.FC = (props) => { extensions: props.options?.codeEditor?.extensions, extensionsKeymap: props.options?.codeEditor?.extensionsKeymap, readOnly: props.options?.readOnly, + showReadOnly: props.options?.showReadOnly, }; const providerOptions: SandpackProviderProps = { From 5abeafd07176c4d1d32600062f1839cf54a82610 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 14 Jan 2022 14:37:24 +0000 Subject: [PATCH 14/14] Update custom-content.md --- website/docs/docs/getting-started/custom-content.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index ed4ac4e9a..16da7cb42 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -181,6 +181,17 @@ You can set one, multiple files, or the entire Sandpack as read-only, which will /> ``` +Plus, you can hide the Read-only label which appears on top of the code editor: + +```jsx + +``` + ### openPaths and activePath You can override the entire hidden/active system with two settings (`openPaths` and `activePath`) inside the