Merge pull request #4323 from serlo/fix-remove-editor-toolbar-in-edit…

…or-preview fix(page-editor-preview): hide editor toolbar artifacts
serlo · Nov 29, 2024 · 5688acf · 5688acf
2 parents 35d91de + 3006f43
commit 5688acf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/apps/web/src/pages/___editor_preview.tsx b/apps/web/src/pages/___editor_preview.tsx
@@ -105,7 +105,7 @@ function Content() {
         value={{ editorVariant: 'serlo-org', userId: 'serlo-preview-user' }}
       >
         <main id="content" className="flex">
-          <section className="min-h-screen w-[50vw] border-4 border-r-0 border-editor-primary">
+          <section className="min-h-screen w-1/2 border-4 border-r-0 border-editor-primary">
             <header className="mx-side flex justify-between align-middle font-bold">
               <h2 className="mb-12 text-editor-primary">Edit</h2>
               <div>
@@ -153,7 +153,7 @@ function Content() {
             </header>
             <div className="px-2">{editor}</div>
           </section>
-          <section className="min-h-screen w-[50vw] border-4 border-editor-primary">
+          <section className="min-h-screen w-1/2 border-4 border-editor-primary">
             <h2 className="mx-side mb-12 font-bold text-editor-primary">
               Preview
             </h2>

diff --git a/packages/editor/src/core/editor.tsx b/packages/editor/src/core/editor.tsx
@@ -31,25 +31,27 @@ export function Editor(props: EditorProps) {
   // New store for every editor instance
   const store = useMemo(() => createStore(), [])
 
+  const isSerloEditorPreviewPage =
+    window?.location?.href &&
+    window?.location?.href.includes('___editor_preview')
+
   return (
     <Provider store={store}>
       <DndWrapper>
         <HotkeysProvider initiallyActiveScopes={['global']}>
           {/* only on serlo for now */}
-          {isSerlo ? (
+          {isSerlo && !isSerloEditorPreviewPage ? (
             <>
               <EditorToolbar />
               <LocalStorageNotice
                 useStored={useStored}
                 setUseStored={setUseStored}
               />
             </>
-          ) : (
-            // For non serlo environments, we need to render the toaster
-            // https://react-hot-toast.com/docs/toaster (already gets rendered
-            // in the web project)
-            <Toaster />
-          )}
+          ) : null}
+          {/* For non serlo environments, we need to render the toaster
+          (already gets rendered in the web project) */}
+          {!isSerlo ? <Toaster /> : null}
           <div
             className={cn(
               'editor-core mb-24 text-lg leading-cozy',