feat: adds prism editor and implements for sdkdocs

packages/api-explorer/package.json

@@ -52,6 +52,7 @@
     "@looker/sdk-codegen": "^21.0.11",
     "@looker/sdk-rtl": "^21.0.11",
     "ace": "^1.3.0",
+    "prism-react-renderer": "^1.2.0",
     "ace-builds": "^1.4.11",
     "history": "^4.10.1",
     "lodash": "^4.17.19",

packages/api-explorer/src/components/DocCode/DocCode.tsx

@@ -26,10 +26,10 @@
 
 import React, { FC, useContext } from 'react'
 import AceEditor from 'react-ace'
-
 import { findGenerator } from '@looker/sdk-codegen'
 import { SearchContext } from '../../context/search'
 import { highlightSourceCode } from './utils'
+import { PrismEditor } from './PrismEditor'
 
 // TODO Use webpack resolver instead.
 /* eslint-disable  @typescript-eslint/ban-ts-comment,@typescript-eslint/no-unused-vars,@typescript-eslint/no-var-requires,import/no-extraneous-dependencies */
@@ -56,13 +56,15 @@ interface DocCodeProps {
   language?: string
   fontSize?: number
   width?: string
+  editor?: string
 }
 
 export const DocCode: FC<DocCodeProps> = ({
   code,
   language = 'json',
   fontSize = 16,
   width = 'auto',
+  editor = 'ace',
 }) => {
   const gen = findGenerator(language)
   if (gen) language = gen.language.toLocaleLowerCase()
@@ -71,7 +73,7 @@ export const DocCode: FC<DocCodeProps> = ({
   } = useContext(SearchContext)
   const markers = highlightSourceCode(pattern, code)
 
-  return (
+  return editor === 'ace' ? (
     <AceEditor
       mode={language}
       name={language}
@@ -89,5 +91,7 @@ export const DocCode: FC<DocCodeProps> = ({
         useWorker: false,
       }}
     />
+  ) : (
+    <PrismEditor language={language} code={code} pattern={pattern} />
   )
 }

packages/api-explorer/src/components/DocCode/PrismEditor.tsx

@@ -0,0 +1,109 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React, { FC } from 'react'
+import styled from 'styled-components'
+import Highlight, { defaultProps, Language } from 'prism-react-renderer'
+// import { Prism } from "prism-react-renderer"
+import dracula from 'prism-react-renderer/themes/dracula'
+
+// (typeof global !== "undefined" ? global : window).Prism = Prism
+// require("prismjs/components/prism-kotlin")
+// require("prismjs/components/prism-csharp")
+// require("prismjs/components/prism-swift")
+
+interface PrismEditorProps {
+  language: string
+  code: string
+  pattern: string
+}
+
+const Pre = styled.pre`
+  padding: 1rem;
+  overflow: auto;
+`
+
+const Line = styled.div`
+  display: table-row;
+`
+
+const LineNo = styled.span`
+  display: table-cell;
+  text-align: right;
+  padding-right: 1em;
+  user-select: none;
+  opacity: 0.5;
+`
+
+const LineContent = styled.span`
+  display: table-cell;
+`
+
+export const PrismEditor: FC<PrismEditorProps> = ({
+  language,
+  code,
+  pattern,
+}) => {
+  const getPrismLanguage = (language: string) => {
+    if (language === 'golang') {
+      return 'go'
+    }
+    return language as Language
+  }
+
+  return (
+    <Highlight
+      {...defaultProps}
+      code={code}
+      language={getPrismLanguage(language)}
+      theme={dracula}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <Pre className={className} style={style}>
+          {tokens.map((line, i) => (
+            <Line key={i} {...getLineProps({ line, key: i })}>
+              <LineNo>{i + 1}</LineNo>
+              <LineContent>
+                {line.map((token, key) => {
+                  const tokenProps = getTokenProps({ token, key })
+                  const text = tokenProps.children
+                  if (pattern !== '' && text.includes(pattern)) {
+                    tokenProps.style = {
+                      ...tokenProps.style,
+                      border: '1px yellow solid',
+                      borderRadius: '4px',
+                    }
+                  }
+                  return <span key={key} {...tokenProps} />
+                })}
+              </LineContent>
+            </Line>
+          ))}
+        </Pre>
+      )}
+    </Highlight>
+  )
+}

packages/api-explorer/src/components/DocSDKs/DocSDKs.tsx

@@ -77,7 +77,7 @@ export const DocSDKs: FC<LanguageSDKProps> = ({ api, method, type }) => {
                 : gen.declareType('', item as IType)
               return (
                 <TabPanel key={language}>
-                  <DocCode language={language} code={code} />
+                  <DocCode language={language} code={code} editor="prism" />
                 </TabPanel>
               )
             })}