@sanity/code-input 2.30.2-shopify.2 → 3.0.0-studio-v3.2

package/src/CodeInput.tsx

@@ -0,0 +1,336 @@
+/* eslint-disable react/jsx-handler-names */
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+import {FieldMember, MemberField, ObjectInputProps, set, setIfMissing, unset} from 'sanity/form'
+import {ObjectSchemaType} from 'sanity'
+import {Card, Select, Stack} from '@sanity/ui'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers'
+import {CodeInputLanguage, CodeInputValue} from './types'
+import './editorSupport'
+
+import {
+  ACE_EDITOR_PROPS,
+  ACE_SET_OPTIONS,
+  DEFAULT_DARK_THEME,
+  DEFAULT_THEME,
+  LANGUAGE_ALIASES,
+  PATH_CODE,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+} from './config'
+import {useColorScheme, InputProps, StringInputProps} from 'sanity'
+
+export type {CodeInputLanguage, CodeInputValue} from './types'
+
+const EditorContainer = styled(Card)`
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 0;
+
+  .ace_editor {
+    font-family: ${({theme}) => theme.sanity.fonts.code.family};
+    font-size: ${({theme}) => theme.sanity.fonts.code.sizes[1]};
+    line-height: inherit;
+  }
+
+  ${highlightMarkersCSS}
+
+  &:not([disabled]):not([readonly]) {
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 2px ${({theme}) => theme.sanity.color.base.focusRing};
+      background-color: ${({theme}) => theme.sanity.color.base.bg};
+      border-color: ${({theme}) => theme.sanity.color.base.focusRing};
+    }
+  }
+`
+
+export type CodeSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options: {
+    theme?: string
+    darkTheme?: string
+    languageAlternatives: CodeInputLanguage[]
+    language: string
+    withFilename?: boolean
+  }
+}
+
+export type CodeInputProps = ObjectInputProps<CodeInputValue, CodeSchemaType>
+
+// Returns a string with the mode name if supported (because aliases), otherwise false
+function isSupportedLanguage(mode: string) {
+  const alias = LANGUAGE_ALIASES[mode]
+
+  if (alias) {
+    return alias
+  }
+
+  const isSupported = SUPPORTED_LANGUAGES.find((lang) => lang.value === mode)
+  if (isSupported) {
+    return mode
+  }
+
+  return false
+}
+
+export function CodeInput(props: CodeInputProps) {
+  const {
+    focusRef,
+    members,
+    onBlur,
+    onChange,
+    onFocusPath,
+    readOnly,
+    renderField,
+    renderInput,
+    renderItem,
+    renderPreview,
+    schemaType: type,
+    value,
+  } = props
+
+  const aceEditorRef = useRef<any>()
+
+  const fieldMembers = useMemo(
+    () => members.filter((member) => member.kind === 'field') as FieldMember[],
+    [members]
+  )
+
+  const languageFieldMember = fieldMembers.find((member) => member.name === 'language')
+  const filenameMember = fieldMembers.find((member) => member.name === 'filename')
+  const codeFieldMember = fieldMembers.find((member) => member.name === 'code')
+
+  useImperativeHandle(focusRef, () => ({
+    focus: () => {
+      aceEditorRef?.current?.editor?.focus()
+    },
+  }))
+
+  const handleCodeFocus = useCallback(() => {
+    onFocusPath(PATH_CODE)
+  }, [onFocusPath])
+
+  const {scheme} = useColorScheme()
+
+  const theme = useMemo(() => {
+    const isLight = scheme === 'light'
+    const preferredTheme = isLight ? type.options?.theme : type.options?.darkTheme
+    const defaultTheme = isLight ? DEFAULT_THEME : DEFAULT_DARK_THEME
+    return preferredTheme && SUPPORTED_THEMES.find((t) => t === preferredTheme)
+      ? preferredTheme
+      : defaultTheme
+  }, [type, scheme])
+
+  const handleToggleSelectLine = useCallback(
+    (lineNumber: number) => {
+      const editorSession = aceEditorRef.current?.editor?.getSession()
+      const backgroundMarkers = editorSession?.getMarkers(true)
+      const currentHighlightedLines = Object.keys(backgroundMarkers)
+        .filter((key) => backgroundMarkers[key].type === 'screenLine')
+        .map((key) => backgroundMarkers[key].range.start.row)
+      const currentIndex = currentHighlightedLines.indexOf(lineNumber)
+      if (currentIndex > -1) {
+        // toggle remove
+        currentHighlightedLines.splice(currentIndex, 1)
+      } else {
+        // toggle add
+        currentHighlightedLines.push(lineNumber)
+        currentHighlightedLines.sort()
+      }
+      onChange(
+        set(
+          currentHighlightedLines.map(
+            (line) =>
+              // ace starts at line (row) 0, but we store it starting at line 1
+              line + 1
+          ),
+          ['highlightedLines']
+        )
+      )
+    },
+    [aceEditorRef, onChange]
+  )
+
+  const handleGutterMouseDown = useCallback(
+    (event: any) => {
+      const target = event.domEvent.target
+      if (target.classList.contains('ace_gutter-cell')) {
+        const row = event.getDocumentPosition().row
+        handleToggleSelectLine(row)
+      }
+    },
+    [handleToggleSelectLine]
+  )
+
+  useEffect(() => {
+    const editor = aceEditorRef?.current?.editor
+    return () => {
+      editor?.session?.removeListener('guttermousedown', handleGutterMouseDown)
+    }
+  }, [aceEditorRef, handleGutterMouseDown])
+
+  const handleEditorLoad = useCallback(
+    (editor: any) => {
+      editor?.on('guttermousedown', handleGutterMouseDown)
+    },
+    [handleGutterMouseDown]
+  )
+
+  const getLanguageAlternatives = useCallback((): {
+    title: string
+    value: string
+    mode?: string
+  }[] => {
+    const languageAlternatives = type.options?.languageAlternatives
+    if (!languageAlternatives) {
+      return SUPPORTED_LANGUAGES
+    }
+
+    if (!Array.isArray(languageAlternatives)) {
+      throw new Error(
+        `'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`
+      )
+    }
+
+    return languageAlternatives.reduce((acc: CodeInputLanguage[], {title, value: val, mode}) => {
+      const alias = LANGUAGE_ALIASES[val]
+      if (alias) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`,
+          val,
+          alias,
+          alias
+        )
+
+        return acc.concat({title, value: alias, mode: mode})
+      }
+
+      if (!mode && !SUPPORTED_LANGUAGES.find((lang) => lang.value === val)) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `'options.languageAlternatives' lists a language which is not supported: "%s", syntax highlighting will be disabled.`,
+          val
+        )
+      }
+
+      return acc.concat({title, value: val, mode})
+    }, [])
+  }, [type])
+
+  const handleCodeChange = useCallback(
+    (code: string) => {
+      const path = PATH_CODE
+      const fixedLanguage = type.options?.language
+
+      onChange([
+        setIfMissing({_type: type.name, language: fixedLanguage}),
+        code ? set(code, path) : unset(path),
+      ])
+    },
+    [onChange, type]
+  )
+
+  const languages = getLanguageAlternatives().slice()
+
+  const fixedLanguage = type.options?.language
+
+  const language = value?.language || fixedLanguage
+
+  // the language config from the schema
+  const configured = languages.find((entry) => entry.value === language)
+
+  // is the language officially supported (e.g. we import the mode by default)
+  const supported = language && isSupportedLanguage(language)
+
+  const mode = configured?.mode || (supported ? language : 'text')
+
+  const renderLanguageInput = useCallback(
+    (inputProps: InputProps) => {
+      return (
+        <Select
+          {...(inputProps as StringInputProps)}
+          onChange={(e) => {
+            const newValue = e.currentTarget.value
+            inputProps.onChange(newValue ? set(newValue) : unset())
+          }}
+        >
+          {languages.map((lang: {title: string; value: string}) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.title}
+            </option>
+          ))}
+        </Select>
+      )
+    },
+    [languages]
+  )
+
+  const renderCodeInput = useCallback(
+    (inputProps) => {
+      return (
+        <EditorContainer radius={1} shadow={1} readOnly={readOnly}>
+          <AceEditor
+            ref={aceEditorRef}
+            mode={mode}
+            theme={theme}
+            width="100%"
+            onChange={handleCodeChange}
+            name={inputProps.id}
+            value={inputProps.value}
+            markers={
+              value && value.highlightedLines
+                ? createHighlightMarkers(value.highlightedLines)
+                : undefined
+            }
+            onLoad={handleEditorLoad}
+            readOnly={readOnly}
+            tabSize={2}
+            wrapEnabled
+            setOptions={ACE_SET_OPTIONS}
+            editorProps={ACE_EDITOR_PROPS}
+            onFocus={handleCodeFocus}
+            onBlur={onBlur}
+          />
+        </EditorContainer>
+      )
+    },
+    [theme, handleCodeChange, handleCodeFocus, handleEditorLoad, mode, onBlur, readOnly, value]
+  )
+
+  return (
+    <Stack space={4}>
+      {languageFieldMember && (
+        <MemberField
+          member={languageFieldMember}
+          renderItem={renderItem}
+          renderField={renderField}
+          renderInput={renderLanguageInput}
+          renderPreview={renderPreview}
+        />
+      )}
+
+      {type.options?.withFilename && filenameMember && (
+        <MemberField
+          member={filenameMember}
+          renderItem={renderItem}
+          renderField={renderField}
+          renderInput={renderInput}
+          renderPreview={renderPreview}
+        />
+      )}
+
+      {codeFieldMember && (
+        <MemberField
+          member={codeFieldMember}
+          renderInput={renderCodeInput}
+          renderItem={renderItem}
+          renderField={renderField}
+          renderPreview={renderPreview}
+        />
+      )}
+    </Stack>
+  )
+}

package/src/PreviewCode.tsx

@@ -0,0 +1,88 @@
+import React, {useCallback, useEffect, useRef} from 'react'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import {Box} from '@sanity/ui'
+import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config'
+import createHighlightMarkers from './createHighlightMarkers'
+import {CodeInputType, CodeInputValue} from './types'
+import './editorSupport'
+
+const PreviewContainer = styled(Box)`
+  position: relative;
+`
+
+const PreviewInner = styled(Box)`
+  background-color: #272822;
+
+  .ace_editor {
+    box-sizing: border-box;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .ace_content {
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+`
+
+export interface PreviewCodeProps {
+  type?: CodeInputType
+  value?: CodeInputValue
+}
+
+export default function PreviewCode(props: PreviewCodeProps) {
+  const aceEditorRef = useRef<any>()
+
+  useEffect(() => {
+    if (!aceEditorRef?.current) return
+
+    const editor = aceEditorRef.current?.editor
+
+    if (editor) {
+      // Avoid cursor and focus tracking by Ace
+      editor.renderer.$cursorLayer.element.style.opacity = 0
+      editor.textInput.getElement().disabled = true
+    }
+  }, [])
+
+  const handleEditorChange = useCallback(() => {
+    // do nothing when the editor changes
+  }, [])
+
+  const {value, type} = props
+  const fixedLanguage = type?.options?.language
+
+  const mode = value?.language || fixedLanguage || 'text'
+
+  return (
+    <PreviewContainer>
+      <PreviewInner padding={4}>
+        <AceEditor
+          ref={aceEditorRef}
+          focus={false}
+          mode={mode}
+          theme="monokai"
+          width="100%"
+          onChange={handleEditorChange}
+          maxLines={200}
+          readOnly
+          wrapEnabled
+          showPrintMargin={false}
+          highlightActiveLine={false}
+          cursorStart={-1}
+          value={(value && value.code) || ''}
+          markers={
+            value && value.highlightedLines
+              ? createHighlightMarkers(value.highlightedLines)
+              : undefined
+          }
+          tabSize={2}
+          showGutter={false}
+          setOptions={ACE_SET_OPTIONS}
+          editorProps={ACE_EDITOR_PROPS}
+        />
+      </PreviewInner>
+    </PreviewContainer>
+  )
+}

package/src/config.ts

@@ -0,0 +1,46 @@
+import {CodeInputLanguage} from './types'
+
+// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./editorSupport
+export const SUPPORTED_LANGUAGES: CodeInputLanguage[] = [
+  {title: 'Batch file', value: 'batchfile'},
+  {title: 'C#', value: 'csharp'},
+  {title: 'CSS', value: 'css'},
+  {title: 'Go', value: 'golang'},
+  {title: 'GROQ', value: 'groq'},
+  {title: 'HTML', value: 'html'},
+  {title: 'Java', value: 'java'},
+  {title: 'JavaScript', value: 'javascript'},
+  {title: 'JSON', value: 'json'},
+  {title: 'JSX', value: 'jsx'},
+  {title: 'Markdown', value: 'markdown'},
+  {title: 'MySQL', value: 'mysql'},
+  {title: 'PHP', value: 'php'},
+  {title: 'Plain text', value: 'text'},
+  {title: 'Python', value: 'python'},
+  {title: 'Ruby', value: 'ruby'},
+  {title: 'SASS', value: 'sass'},
+  {title: 'SCSS', value: 'scss'},
+  {title: 'sh', value: 'sh'},
+  {title: 'TSX', value: 'tsx'},
+  {title: 'TypeScript', value: 'typescript'},
+  {title: 'XML', value: 'xml'},
+  {title: 'YAML', value: 'yaml'},
+]
+
+export const LANGUAGE_ALIASES: Record<string, string | undefined> = {js: 'javascript'}
+
+export const SUPPORTED_THEMES = ['github', 'monokai', 'terminal', 'tomorrow']
+
+export const DEFAULT_THEME = 'tomorrow'
+export const DEFAULT_DARK_THEME = 'monokai'
+
+export const ACE_SET_OPTIONS = {
+  useSoftTabs: true,
+  navigateWithinSoftTabs: true /* note only supported by ace v1.2.7 or higher */,
+}
+
+export const ACE_EDITOR_PROPS = {$blockScrolling: true}
+
+export const PATH_LANGUAGE = ['language']
+export const PATH_CODE = ['code']
+export const PATH_FILENAME = ['filename']

package/src/createHighlightMarkers.ts

@@ -0,0 +1,24 @@
+import {IMarker} from 'react-ace'
+import {css} from 'styled-components'
+
+export const highlightMarkersCSS = css`
+  .ace_editor_markers_highlight {
+    position: absolute;
+    background-color: ${({theme}) => theme.sanity.color.solid.primary.enabled.bg};
+    opacity: 0.2;
+    width: 100% !important;
+    border-radius: 0 !important;
+  }
+`
+
+export default function createHighlightMarkers(rows: number[]): IMarker[] {
+  return rows.map((row) => ({
+    startRow: Number(row) - 1,
+    startCol: 0,
+    endRow: Number(row) - 1,
+    endCol: +Infinity,
+    className: 'ace_editor_markers_highlight',
+    type: 'screenLine',
+    inFront: true,
+  }))
+}

package/src/editorSupport.ts

@@ -0,0 +1,31 @@
+// NOTE: MAKE SURE THESE ALIGN WITH SUPPORTED_LANGUAGES in ./config
+import './groq'
+
+import 'ace-builds/src-noconflict/mode-batchfile'
+import 'ace-builds/src-noconflict/mode-csharp'
+import 'ace-builds/src-noconflict/mode-css'
+import 'ace-builds/src-noconflict/mode-golang'
+import 'ace-builds/src-noconflict/mode-html'
+import 'ace-builds/src-noconflict/mode-java'
+import 'ace-builds/src-noconflict/mode-javascript'
+import 'ace-builds/src-noconflict/mode-json'
+import 'ace-builds/src-noconflict/mode-jsx'
+import 'ace-builds/src-noconflict/mode-markdown'
+import 'ace-builds/src-noconflict/mode-mysql'
+import 'ace-builds/src-noconflict/mode-php'
+import 'ace-builds/src-noconflict/mode-python'
+import 'ace-builds/src-noconflict/mode-ruby'
+import 'ace-builds/src-noconflict/mode-sass'
+import 'ace-builds/src-noconflict/mode-scss'
+import 'ace-builds/src-noconflict/mode-sh'
+import 'ace-builds/src-noconflict/mode-text'
+import 'ace-builds/src-noconflict/mode-tsx'
+import 'ace-builds/src-noconflict/mode-typescript'
+import 'ace-builds/src-noconflict/mode-xml'
+import 'ace-builds/src-noconflict/mode-yaml'
+
+// Themes
+import 'ace-builds/src-noconflict/theme-github'
+import 'ace-builds/src-noconflict/theme-monokai'
+import 'ace-builds/src-noconflict/theme-terminal'
+import 'ace-builds/src-noconflict/theme-tomorrow'

package/src/getMedia.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+export function getMedia(language?: string) {
+  if (language === 'jsx') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <g fill="#61DAFB">
+          <circle cx="64" cy="64" r="11.4" />
+          <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z" />
+        </g>
+      </svg>
+    )
+  }
+
+  if (language === 'javascript') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185H1.408z" />
+        <path
+          fill="#323330"
+          d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
+        />
+      </svg>
+    )
+  }
+
+  if (language === 'php') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+        <g transform="translate(-44.632 -141.55)">
+          <g transform="matrix(8.3528 0 0 8.3119 -727.13 -3759.5)">
+            <path d="m99.974 479.48h14.204c4.1693 0.0354 7.1903 1.2367 9.063 3.604 1.8726 2.3674 2.491 5.6004 1.855 9.699-0.24737 1.8727-0.79504 3.71-1.643 5.512-0.8127 1.802-1.9434 3.4273-3.392 4.876-1.7667 1.8373-3.657 3.0033-5.671 3.498-2.014 0.49467-4.0987 0.742-6.254 0.742h-6.36l-2.014 10.07h-7.367l7.579-38.001m6.201 6.042-3.18 15.9c0.21198 0.0353 0.42398 0.053 0.636 0.053h0.742c3.392 0.0353 6.2186-0.30033 8.48-1.007 2.2613-0.74199 3.7806-3.3213 4.558-7.738 0.63597-3.71-0.00003-5.8476-1.908-6.413-1.8727-0.56531-4.2224-0.83031-7.049-0.795-0.42402 0.0353-0.83035 0.053-1.219 0.053-0.35335 0.00002-0.72435 0.00002-1.113 0l0.053-0.053" />
+            <path d="m133.49 469.36h7.314l-2.067 10.123h6.572c3.604 0.0707 6.2893 0.81269 8.056 2.226 1.802 1.4134 2.332 4.0987 1.59 8.056l-3.551 17.649h-7.42l3.392-16.854c0.35328-1.7666 0.2473-3.021-0.318-3.763-0.56536-0.74198-1.7844-1.113-3.657-1.113l-5.883-0.053-4.346 21.783h-7.314l7.632-38.054" />
+            <path d="m162.81 479.48h14.204c4.1693 0.0354 7.1903 1.2367 9.063 3.604 1.8726 2.3674 2.491 5.6004 1.855 9.699-0.24737 1.8727-0.79503 3.71-1.643 5.512-0.8127 1.802-1.9434 3.4273-3.392 4.876-1.7667 1.8373-3.657 3.0033-5.671 3.498-2.014 0.49467-4.0987 0.742-6.254 0.742h-6.36l-2.014 10.07h-7.367l7.579-38.001m6.201 6.042-3.18 15.9c0.21199 0.0353 0.42399 0.053 0.636 0.053h0.742c3.392 0.0353 6.2186-0.30033 8.48-1.007 2.2613-0.74199 3.7806-3.3213 4.558-7.738 0.63597-3.71-0.00003-5.8476-1.908-6.413-1.8727-0.56531-4.2224-0.83031-7.049-0.795-0.42402 0.0353-0.83035 0.053-1.219 0.053-0.35335 0.00002-0.72435 0.00002-1.113 0l0.053-0.053" />
+          </g>
+        </g>
+      </svg>
+    )
+  }
+
+  if (language === 'json') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 160 160"
+      >
+        <defs>
+          <linearGradient id="a">
+            <stop offset="0" />
+            <stop offset="1" stopColor="#fff" />
+          </linearGradient>
+          <linearGradient
+            x1="-553.27"
+            y1="525.908"
+            x2="-666.116"
+            y2="413.045"
+            id="c"
+            xlinkHref="#a"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(.99884 0 0 .9987 689.008 -388.844)"
+          />
+          <linearGradient
+            x1="-666.117"
+            y1="413.045"
+            x2="-553.27"
+            y2="525.908"
+            id="b"
+            xlinkHref="#a"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(.99884 0 0 .9987 689.008 -388.844)"
+          />
+        </defs>
+        <path
+          d="M79.865 119.1c35.397 48.255 70.04-13.469 69.988-50.587-.06-43.886-44.54-68.414-70.017-68.414C38.943.1 0 33.895 0 80.135 0 131.531 44.64 160 79.836 160c-7.965-1.147-34.507-6.834-34.863-67.967-.24-41.346 13.487-57.865 34.805-50.599.477.177 23.514 9.265 23.514 38.95 0 29.56-23.427 38.716-23.427 38.716z"
+          style={{marker: 'none'}}
+          color="#000"
+          fill="url(#b)"
+          fillRule="evenodd"
+          overflow="visible"
+        />
+        <path
+          d="M79.823 41.4C56.433 33.34 27.78 52.618 27.78 91.23c0 63.048 46.72 68.77 52.384 68.77C121.057 160 160 126.204 160 79.964 160 28.568 115.36.1 80.164.1c9.749-1.35 52.541 10.55 52.541 69.037 0 38.141-31.953 58.905-52.735 50.033-.478-.177-23.514-9.264-23.514-38.95 0-29.56 23.367-38.818 23.367-38.818z"
+          style={{marker: 'none'}}
+          color="#000"
+          fill="url(#c)"
+          fillRule="evenodd"
+          overflow="visible"
+        />
+      </svg>
+    )
+  }
+
+  return undefined
+}