feat(features/cards): show language name rotated on the left side

howtocards · Oct 25, 2019 · ccfe6e2 · ccfe6e2
1 parent ebe1491
commit ccfe6e2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/src/lib/rich-text/extensions/code-plugin/code-block.js b/src/lib/rich-text/extensions/code-plugin/code-block.js
@@ -108,34 +108,44 @@ export class CodeBlock extends React.Component {
     )
 
     const languageComponent = editor.readOnly ? (
-      <p style={{ textAlign: "right", paddingRight: "10px" }}>{language}</p>
+      <LanguageName>{language}</LanguageName>
     ) : (
-      <MultiSelect
-        value={selectedValueForSelect}
-        onChange={({ value }) => this.onChange(value)}
-        options={optionsForSelect}
-      />
+      <div
+        contentEditable={false}
+        style={{
+          position: "absolute",
+          top: "5px",
+          right: "5px",
+          width: "200px",
+        }}
+      >
+        <MultiSelect
+          value={selectedValueForSelect}
+          onChange={({ value }) => this.onChange(value)}
+          options={optionsForSelect}
+        />
+      </div>
     )
 
     return (
-      <div className={className} style={{ position: "relative" }}>
-        <pre className={`language-${language}`}>
-          <code {...attributes} className={`language-${language}`}>
-            {children}
-          </code>
-        </pre>
-        <div
-          contentEditable={false}
-          style={{
-            position: "absolute",
-            top: "5px",
-            right: "5px",
-            width: "200px",
-          }}
-        >
-          {languageComponent}
+      <div style={{ position: "relative" }}>
+        <div className={className} style={{ position: "relative" }}>
+          <pre className={`language-${language}`}>
+            <code {...attributes} className={`language-${language}`}>
+              {children}
+            </code>
+          </pre>
         </div>
+        {languageComponent}
       </div>
     )
   }
 }
+
+const LanguageName = styled.div`
+  position: absolute;
+  left: 0rem;
+  top: 0.5rem;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+`
diff --git a/src/lib/rich-text/rich-editor.js b/src/lib/rich-text/rich-editor.js
@@ -113,7 +113,7 @@ export class RichEditor extends React.Component {
           readOnly={readOnly}
           {...HotKeys(configCodePlugin)}
           style={{
-            minHeight: "300px",
+            minHeight: "50px",
           }}
           value={value}
           onChange={this.onChange}

diff --git a/src/ui/themes/prismcss.js b/src/ui/themes/prismcss.js
@@ -60,6 +60,7 @@ export const prismcssDark = css`
     margin: 0.5em 0;
     overflow: auto;
     padding: 2rem;
+    padding-left: 3rem;
     ${({ theme }) => theme.embed.canvas};
     background-color: #171717;
   }
@@ -226,6 +227,7 @@ export const prismcssLight = css`
     margin: 0.5em 0;
     overflow: auto;
     padding: 2rem;
+    padding-left: 3rem;
     ${({ theme }) => theme.embed.canvas}
   }