Remove inner <code> from CodeBlocks, refs #110

rundsk · Aug 23, 2019 · 5c86a4e · 5c86a4e
1 parent 0ac1c59
commit 5c86a4e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/docs/02_The Frontend/03_Documentation Components/Code Block/01-Readme.md b/docs/02_The Frontend/03_Documentation Components/Code Block/01-Readme.md
@@ -13,7 +13,7 @@
 </CodeBlock>
 
 <CodeBlock title="Example">
-  <div>test</div>
+  <div>CodeBlock directly used component</div>
 </CodeBlock>
 
 <Playground>

diff --git a/frontend/src/CodeBlock/index.js b/frontend/src/CodeBlock/index.js
@@ -15,8 +15,6 @@ import { copyTextToClipboard } from '../utils';
 // We see the first case when the component is used explictly and the second,
 // when it is instantiated by the DocTransformer, turning a <pre> into a
 // CodeBlock.
-//
-// TODO: If child is <code> unwrap and turn into string.
 function CodeBlock(props) {
   let isEscaped = props.escaped;
 

diff --git a/frontend/src/Doc/index.js b/frontend/src/Doc/index.js
@@ -65,7 +65,14 @@ function Doc(props) {
     h3: props => <Heading {...props} level="gamma" docTitle={docTitle} isJumptarget={true} />,
     h4: props => <Heading {...props} level="delta" docTitle={docTitle} isJumptarget={true} />,
     img: props => <Image {...props} />,
-    pre: props => <CodeBlock escaped {...props} />,
+    pre: (props) => {
+      // When Markdown fenced code blocks get converted to <pre> they
+      // additionally include inner <code>. We cannot use orphans as this create
+      // empty "ghost" elements.
+      let children = props.children.replace(/^<code>/, '').replace(/<\/code>$/, '');
+
+      return <CodeBlock escaped {...props} children={children} />,
+    }
   };
 
   const orphans = ["p > img", "p > video"];