mirror of
https://github.com/explosion/spaCy.git
synced 2025-08-05 21:00:19 +03:00
Extract TypeAnnotation
component into own file
This commit is contained in:
parent
4c609757a4
commit
eece55b20a
|
@ -14,8 +14,7 @@ import 'prismjs/components/prism-markdown.min.js'
|
||||||
import 'prismjs/components/prism-python.min.js'
|
import 'prismjs/components/prism-python.min.js'
|
||||||
import 'prismjs/components/prism-yaml.min.js'
|
import 'prismjs/components/prism-yaml.min.js'
|
||||||
|
|
||||||
import CUSTOM_TYPES from '../../meta/type-annotations.json'
|
import { isString } from './util'
|
||||||
import { isString, htmlToReact } from './util'
|
|
||||||
import Link, { OptionalLink } from './link'
|
import Link, { OptionalLink } from './link'
|
||||||
import GitHubCode from './github'
|
import GitHubCode from './github'
|
||||||
import Juniper from './juniper'
|
import Juniper from './juniper'
|
||||||
|
@ -23,58 +22,8 @@ import classes from '../styles/code.module.sass'
|
||||||
import siteMetadata from '../../meta/site.json'
|
import siteMetadata from '../../meta/site.json'
|
||||||
import { binderBranch } from '../../meta/dynamicMeta.mjs'
|
import { binderBranch } from '../../meta/dynamicMeta.mjs'
|
||||||
|
|
||||||
const WRAP_THRESHOLD = 30
|
|
||||||
const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
|
const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
|
||||||
|
|
||||||
function linkType(el, showLink = true) {
|
|
||||||
if (!isString(el) || !el.length) return el
|
|
||||||
const elStr = el.trim()
|
|
||||||
if (!elStr) return el
|
|
||||||
const typeUrl = CUSTOM_TYPES[elStr]
|
|
||||||
const url = typeUrl == true ? DEFAULT_TYPE_URL : typeUrl
|
|
||||||
const ws = el[0] == ' '
|
|
||||||
return url && showLink ? (
|
|
||||||
<Fragment>
|
|
||||||
{ws && ' '}
|
|
||||||
<Link to={url} hideIcon>
|
|
||||||
{elStr}
|
|
||||||
</Link>
|
|
||||||
</Fragment>
|
|
||||||
) : (
|
|
||||||
el
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
|
|
||||||
// Hacky, but we're temporarily replacing a dot to prevent it from being split during highlighting
|
|
||||||
const TMP_DOT = '۔'
|
|
||||||
const code = Array.isArray(children) ? children.join('') : children || ''
|
|
||||||
const [rawText, meta] = code.split(/(?= \(.+\)$)/)
|
|
||||||
const rawStr = rawText.replace(/\./g, TMP_DOT)
|
|
||||||
const rawHtml =
|
|
||||||
lang === 'none' || !code ? code : Prism.highlight(rawStr, Prism.languages[lang], lang)
|
|
||||||
const html = rawHtml.replace(new RegExp(TMP_DOT, 'g'), '.').replace(/\n/g, ' ')
|
|
||||||
const result = htmlToReact(html)
|
|
||||||
const elements = Array.isArray(result) ? result : [result]
|
|
||||||
const annotClassNames = classNames(
|
|
||||||
'type-annotation',
|
|
||||||
`language-${lang}`,
|
|
||||||
classes['inline-code'],
|
|
||||||
classes['type-annotation'],
|
|
||||||
{
|
|
||||||
[classes['wrap']]: code.length >= WRAP_THRESHOLD,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
return (
|
|
||||||
<span className={annotClassNames} role="code" aria-label="Type annotation">
|
|
||||||
{elements.map((el, i) => (
|
|
||||||
<Fragment key={i}>{linkType(el, !!link)}</Fragment>
|
|
||||||
))}
|
|
||||||
{meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const splitLines = (children) => {
|
const splitLines = (children) => {
|
||||||
const listChildrenPerLine = []
|
const listChildrenPerLine = []
|
||||||
|
|
||||||
|
|
58
website/src/components/typeAnnotation.js
Normal file
58
website/src/components/typeAnnotation.js
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
import React, { Fragment } from 'react'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import Prism from 'prismjs'
|
||||||
|
import CUSTOM_TYPES from '../../meta/type-annotations.json'
|
||||||
|
import { isString, htmlToReact } from './util'
|
||||||
|
import Link from './link'
|
||||||
|
import classes from '../styles/code.module.sass'
|
||||||
|
|
||||||
|
export const WRAP_THRESHOLD = 30
|
||||||
|
|
||||||
|
function linkType(el, showLink = true) {
|
||||||
|
if (!isString(el) || !el.length) return el
|
||||||
|
const elStr = el.trim()
|
||||||
|
if (!elStr) return el
|
||||||
|
const typeUrl = CUSTOM_TYPES[elStr]
|
||||||
|
const url = typeUrl == true ? DEFAULT_TYPE_URL : typeUrl
|
||||||
|
const ws = el[0] == ' '
|
||||||
|
return url && showLink ? (
|
||||||
|
<Fragment>
|
||||||
|
{ws && ' '}
|
||||||
|
<Link to={url} hideIcon>
|
||||||
|
{elStr}
|
||||||
|
</Link>
|
||||||
|
</Fragment>
|
||||||
|
) : (
|
||||||
|
el
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
|
||||||
|
// Hacky, but we're temporarily replacing a dot to prevent it from being split during highlighting
|
||||||
|
const TMP_DOT = '۔'
|
||||||
|
const code = Array.isArray(children) ? children.join('') : children || ''
|
||||||
|
const [rawText, meta] = code.split(/(?= \(.+\)$)/)
|
||||||
|
const rawStr = rawText.replace(/\./g, TMP_DOT)
|
||||||
|
const rawHtml =
|
||||||
|
lang === 'none' || !code ? code : Prism.highlight(rawStr, Prism.languages[lang], lang)
|
||||||
|
const html = rawHtml.replace(new RegExp(TMP_DOT, 'g'), '.').replace(/\n/g, ' ')
|
||||||
|
const result = htmlToReact(html)
|
||||||
|
const elements = Array.isArray(result) ? result : [result]
|
||||||
|
const annotClassNames = classNames(
|
||||||
|
'type-annotation',
|
||||||
|
`language-${lang}`,
|
||||||
|
classes['inline-code'],
|
||||||
|
classes['type-annotation'],
|
||||||
|
{
|
||||||
|
[classes['wrap']]: code.length >= WRAP_THRESHOLD,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<span className={annotClassNames} role="code" aria-label="Type annotation">
|
||||||
|
{elements.map((el, i) => (
|
||||||
|
<Fragment key={i}>{linkType(el, !!link)}</Fragment>
|
||||||
|
))}
|
||||||
|
{meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,7 +1,8 @@
|
||||||
import Link from './components/link'
|
import Link from './components/link'
|
||||||
import Section, { Hr } from './components/section'
|
import Section, { Hr } from './components/section'
|
||||||
import { Table, Tr, Th, Tx, Td } from './components/table'
|
import { Table, Tr, Th, Tx, Td } from './components/table'
|
||||||
import { Code, TypeAnnotation } from './components/code'
|
import { Code } from './components/code'
|
||||||
|
import { TypeAnnotation } from './components/typeAnnotation'
|
||||||
import { InlineCode } from './components/inlineCode'
|
import { InlineCode } from './components/inlineCode'
|
||||||
import CodeBlock, { Pre } from './components/codeBlock'
|
import CodeBlock, { Pre } from './components/codeBlock'
|
||||||
import { Ol, Ul, Li } from './components/list'
|
import { Ol, Ul, Li } from './components/list'
|
||||||
|
|
Loading…
Reference in New Issue
Block a user