@lexibase/rdx-ui 2.0.0 → 3.0.0

package/src/lib/highlighter.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import {
+  createHighlighterCore,
+  type GrammarState,
+  type HighlighterCore,
+} from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+  bash: () => import('shiki/langs/shellscript.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  diff: () => import('shiki/langs/diff.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+  python: () => import('shiki/langs/python.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+}
+
+const aliases: Record<string, keyof typeof languages> = {
+  js: 'javascript',
+  md: 'markdown',
+  py: 'python',
+  sh: 'bash',
+  shell: 'bash',
+  shellscript: 'bash',
+  ts: 'typescript',
+  yml: 'yaml',
+  zsh: 'bash',
+}
+
+let highlighter: Promise<HighlighterCore> | undefined
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [
+      import('shiki/themes/github-light.mjs'),
+      import('shiki/themes/github-dark.mjs'),
+    ],
+    langs: [],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  })
+
+  return highlighter
+}
+
+function getLanguage(language: string) {
+  const name = language.toLowerCase()
+
+  if (name === 'ansi') {
+    return name
+  }
+
+  if (name in languages) {
+    return name as keyof typeof languages
+  }
+
+  return aliases[name] ?? null
+}
+
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language: string) {
+  const lang = getLanguage(language)
+
+  if (!lang) {
+    return null
+  }
+
+  const shiki = await getHighlighter()
+
+  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languages[lang])
+  }
+
+  return {
+    // Returns one React node per line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code: string, state?: GrammarState) {
+      const tokenize = (text: string) =>
+        shiki.codeToTokens(text, {
+          lang,
+          themes: { light: 'github-light', dark: 'github-dark' },
+          defaultColor: false,
+          grammarState: state,
+        }).tokens
+
+      // ANSI has no grammar state, so each line is tokenized on its own and
+      // gets the same colors whether it arrives in one piece or streams.
+      const tokens =
+        lang === 'ansi'
+          ? code.split('\n').flatMap((line) => tokenize(line))
+          : tokenize(code)
+
+      return {
+        lines: tokens.map((line) =>
+          line.map((token, index) => (
+            <span
+              key={index}
+              style={token.htmlStyle as React.CSSProperties}
+              className="text-(--shiki-light) dark:text-(--shiki-dark)"
+            >
+              {token.content}
+            </span>
+          ))
+        ),
+        state: shiki.getLastGrammarState(tokens),
+      }
+    },
+  }
+}
+
+// Returns one React node per line, or null for a language that is not listed.
+export async function highlightCode(code: string, language: string) {
+  const highlighter = await loadHighlighter(language)
+
+  return highlighter ? highlighter.highlight(code).lines : null
+}

package/src/lib/i18n.ts

@@ -26,7 +26,12 @@ const en = {
   open: 'Open',
   close: 'Close',
   closeSearch: 'Close search',
+  enlargeImage: 'Enlarge image: {alt}',
+  closeImage: 'Close image',
+  imagePreviewDescription:
+    'Press Escape or use the close button to return to the document.',
   copyCode: 'Copy code',
+  wrapCode: 'Wrap lines',
   codeCopied: 'Code copied to clipboard.',
   copyCodeError: 'Could not copy. Select the code and copy it manually.',
   copyRetry: 'Could not copy. Try again or copy manually.',
@@ -35,6 +40,7 @@ const en = {
   tabCopied: 'Tab content copied to clipboard.',
   copyTabError: 'Could not copy. Select the tab content and copy it manually.',
   code: 'Code',
+  folderTree: 'Folder',
   table: 'Table',
   current: 'Current',
   version: 'Version {version}',
@@ -89,7 +95,12 @@ const ptBR = {
   open: 'Abrir',
   close: 'Fechar',
   closeSearch: 'Fechar busca',
+  enlargeImage: 'Ampliar imagem: {alt}',
+  closeImage: 'Fechar imagem',
+  imagePreviewDescription:
+    'Pressione Escape ou use o botão de fechar para voltar ao documento.',
   copyCode: 'Copiar código',
+  wrapCode: 'Quebrar linhas',
   codeCopied: 'Código copiado para a área de transferência.',
   copyCodeError:
     'Não foi possível copiar. Selecione o código e copie manualmente.',
@@ -100,6 +111,7 @@ const ptBR = {
   copyTabError:
     'Não foi possível copiar. Selecione o conteúdo da aba e copie manualmente.',
   code: 'Código',
+  folderTree: 'Pastas',
   table: 'Tabela',
   current: 'Atual',
   version: 'Versão {version}',

package/src/styles/globals.css

@@ -2,6 +2,7 @@
 @source "../**/*.{ts,tsx}";
 
 @import 'tw-animate-css';
+@import './shadcn.css';
 
 @custom-variant dark (&:is(.dark *));