fix(markdowneditor): make preview optional

openpatch · Apr 1, 2021 · e715c3c · e715c3c
1 parent b9be70a
commit e715c3c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 159 deletions.
diff --git a/src/MarkdownEditor.tsx b/src/MarkdownEditor.tsx
@@ -1,13 +1,14 @@
 import { css, Global } from "@emotion/react";
 import { EditorChange } from "codemirror";
 import { useEffect, useState } from "react";
+import { Box } from "./Box";
 import { ButtonSecondary } from "./ButtonSecondary";
-import { CodeEditorProps, CodeEditor } from "./CodeEditor";
+import { CodeEditor, CodeEditorProps } from "./CodeEditor";
 import { Markdown } from "./Markdown";
-import { Box } from "./Box";
 
 export type MarkdownEditorProps = {
   onBlur?: (value: string) => void;
+  allowPreview?: boolean;
   locale?: {
     preview: string;
     edit: string;
@@ -25,6 +26,7 @@ export const MarkdownEditor = ({
   onChange = () => {},
   onBlur = () => {},
   height = "auto",
+  allowPreview = false,
   locale = defaultLocale,
   ...props
 }: MarkdownEditorProps) => {
@@ -42,20 +44,22 @@ export const MarkdownEditor = ({
 
   return (
     <Box position="relative">
-      <ButtonSecondary
-        tone="accent"
-        onClick={() => setIsPreview((p) => !p)}
-        css={(theme) => css`
-          position: absolute;
-          top: 5px;
-          right: 5px;
-          font-size: ${theme.fontSizes.xsmall};
-          z-index: 99;
-          opacity: 0.8;
-        `}
-      >
-        {isPreview ? locale.edit : locale.preview}
-      </ButtonSecondary>
+      {allowPreview && (
+        <ButtonSecondary
+          tone="accent"
+          onClick={() => setIsPreview((p) => !p)}
+          css={(theme) => css`
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            font-size: ${theme.fontSizes.xsmall};
+            z-index: 99;
+            opacity: 0.8;
+          `}
+        >
+          {isPreview ? locale.edit : locale.preview}
+        </ButtonSecondary>
+      )}
       <Global
         styles={css`
           .cm-header-1 {

diff --git a/src/__snapshots__/MarkdownEditor.test.tsx.snap b/src/__snapshots__/MarkdownEditor.test.tsx.snap
@@ -9,145 +9,14 @@ exports[`should match snapshot 1`] = `
   position: relative;
 }
 
-.emotion-3 {
-  position: relative;
-  border: none;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 8px;
-  font-weight: 600;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
-  font-size: 14px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: #34126F;
-  background-color: #EAE2F8;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  font-size: 12px;
-  z-index: 99;
-  opacity: 0.8;
-}
-
-.emotion-3:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.emotion-3:hover:enabled {
-  opacity: 0.8;
-}
-
-.emotion-3:active:enabled {
-  -webkit-filter: brightness(80%);
-  filter: brightness(80%);
-}
-
-.emotion-3:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-
-.emotion-3 span.icon-left,
-.emotion-3 span.icon-right {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  text-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-3 span.icon-left,
-.emotion-3 span.icon-right {
-  width: 14px;
-}
-
-.emotion-3 span.icon-left {
-  margin-right: 8px;
-}
-
-.emotion-3 span.icon-right {
-  margin-left: 8px;
-}
-
-.emotion-5 {
-  box-sizing: border-box;
-  min-width: 0;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  border: none;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 8px;
-  font-weight: 600;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
-}
-
-.emotion-5:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-
-.emotion-5 span.icon-left,
-.emotion-5 span.icon-right {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  text-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-7 {
+.emotion-2 {
   box-sizing: border-box;
   min-width: 0;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
 
-.emotion-7 .CodeMirror {
+.emotion-2 .CodeMirror {
   height: auto;
   min-height: 60px;
 }
@@ -156,17 +25,8 @@ exports[`should match snapshot 1`] = `
   <div
     class="emotion-0 emotion-1"
   >
-    <button
-      class="emotion-2 emotion-3 emotion-4"
-    >
-      <div
-        class="emotion-5 emotion-1"
-      >
-        Preview
-      </div>
-    </button>
     <div
-      class="emotion-7 emotion-1"
+      class="emotion-2 emotion-1"
     >
       <div
         class="react-codemirror2"