Skip to main content

22 posts tagged with "TS"

View All Tags

· 3 min read
Roger Jiang
"any
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set 'throwIfNamespace:' false to bypass this warning."

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" viewBox="191.5 263.5 661.387 565">
  <defs>
    <marker id="a" stroke-linejoin="miter" stroke-miterlimit="10" color="#000" markerHeight="8" markerUnits="strokeWidth" markerWidth="10" orient="auto" overflow="visible" viewBox="-9 -4 10 8">
      <path fill="none" stroke="currentColor" d="m-8 0 8 3v-6z"/>
    </marker>
    <marker id="b" stroke-linejoin="miter" stroke-miterlimit="10" color="#000" markerHeight="8" markerUnits="strokeWidth" markerWidth="10" orient="auto" overflow="visible" viewBox="-1 -4 10 8">
      <path fill="none" stroke="currentColor" d="M8 0 0-3v6z"/>
    </marker>
  </defs>
  <g fill="none">
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">
      <path fill="#ededff" d="M192 516h114.968v48H192z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M192 516h114.968v48H192z"/>
      <text fill="#000" transform="translate(197 531.5)"><tspan x="6.276" y="12" font-family="Courier New" font-size="14" font-weight="400">EventTarget</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/Node">
      <path fill="#ededff" d="M327.871 516h62.71v48h-62.71z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M327.871 516h62.71v48h-62.71z"/>
      <text fill="#000" transform="translate(332.871 531.5)"><tspan x="9.552" y="12" font-family="Courier New" font-size="14" font-weight="400">Node</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/Element">
      <path fill="#ededff" d="M411.484 516h94.065v48h-94.065z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M411.484 516h94.065v48h-94.065z"/>
      <text fill="#000" transform="translate(416.484 531.5)"><tspan x="12.627" y="12" font-family="Courier New" font-size="14" font-weight="400">Element</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">
      <path fill="#ededff" d="M526.452 516H641.42v48H526.452z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M526.452 516H641.42v48H526.452z"/>
      <text fill="#000" transform="translate(531.452 531.5)"><tspan x="6.276" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement">
      <path fill="#ededff" d="M685.161 264h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 264h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 279.5)"><tspan x="7.201" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLAnchorElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement">
      <path fill="#ededff" d="M685.161 324h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 324h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 339.5)"><tspan x="15.603" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLAreaElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement">
      <path fill="#ededff" d="M685.161 384h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 384h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 399.5)"><tspan x="7.201" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLAnchorElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/">
      <path fill="#ededff" d="M685.161 444h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 444h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 459.5)"><tspan x="24.004" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLBRElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement">
      <path fill="#ededff" d="M685.161 600h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 600h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 615.5)"><tspan x="11.402" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLTrackElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement">
      <path fill="#ededff" d="M685.161 660h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 660h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 675.5)"><tspan x="11.402" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLUListElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement">
      <path fill="#ededff" d="M685.161 720h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 720h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 735.5)"><tspan x="3.001" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLUnknownElement</tspan></text>
    </a>
    <a xl:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement">
      <path fill="#ededff" d="M685.161 780h167.226v48H685.161z"/>
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M685.161 780h167.226v48H685.161z"/>
      <text fill="#000" transform="translate(690.161 795.5)"><tspan x="11.402" y="12" font-family="Courier New" font-size="14" font-weight="400">HTMLVideoElement</tspan></text>
    </a>
    <ellipse cx="763.548" cy="510" fill="#666" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="510" stroke="#999" stroke-linecap="round" stroke-linejoin="round" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="534" fill="#666" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="534" stroke="#999" stroke-linecap="round" stroke-linejoin="round" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="558" fill="#666" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="558" stroke="#999" stroke-linecap="round" stroke-linejoin="round" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="582" fill="#666" rx="5.226" ry="6"/>
    <ellipse cx="763.548" cy="582" stroke="#999" stroke-linecap="round" stroke-linejoin="round" rx="5.226" ry="6"/>
    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#a)" d="M316.868 540h11.003m72.61 0h11.003m103.964 0h11.004"/>
    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#b)" d="M685.161 288h-24v252h-9.842"/>
    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#a)" d="M651.32 540h9.841v264h24"/>
    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M661.161 348h24m-24 59.5h24m-24 59.5h24m-24 157h24m-24 60h24m-24 60h24"/>
  </g>
</svg>


· One min read
Roger Jiang

Test page for react-tooltip render in mdx + docusaurus​

embed children within <Tooltip>​

Hover to see embedded HTML

data-tooltip-content attribute to set inline html content​

use `data-tooltip-content` to set tooltip contentDelayed Tooltip close after 1000ms

test

Set Tooltip component to output

testest

gdfkjhgdfkjghfdskjghfdkjgdhdfkjghfd\n

Fragment>span>content​

No backticks here

Fragment>span>content>backticks​

This has backticks

span>content>backticks​

span>backticks

Anchor link within markdown link

[Using React.Fragment alone doesn't work - it's empty!]](https://www.bbc.com)

This is a span with tooltips in all directions

· One min read
Roger Jiang
The following code somehow matches mdx image tags
const k_code = k?.match(/^(\`\`\`)/gm)?.length

const k_newLine = k?.match(/[\\\n]+/g)?.length

const k_illegal = k?.match(/^([ ]*export |[ ]*import )/gm)?.length

if (!k_code && (k_newLine || k_illegal)) {
  k = `\n\n\`\`\`tsx\n${k}\n\`\`\``
}

  • ie ![image](@site/static/files/R_XQeprWba-sC33CoRvhRcKDZic5cV1cdLczriEacnBmMwr598pACzh2WFKWmW2bUTDegweD9Co0SKXVTMkVkXGtAOJh-g63CV_I69rFnxkm_QaUnVWKM_mnbgP0f4ba.png)- can you spot the error?

  • k_code should only match any already escaped ``` at start which is not there

  • k_newLine should match if there are any new line escapes inside - which there should be

  • k_illegal should only match if the image contains export or import at start line (with optional whitespace prefix)

... so it is none of them?!

WRONG!

turns out k_newLine was the culprit...

the mistake was using a character class set instead of a group

It should have been:

const k_newLine = k?.match(/(\\n)+/g)?.length