@redocly/theme 0.45.2-rc.1 → 0.45.2

package/src/core/types/hooks.ts

@@ -109,16 +109,6 @@ export type ThemeHooks = {
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
-  useCodeHighlight: () => {
-    highlight: (
-      code: string,
-      language: string | undefined,
-      {
-        withLineNumbers,
-        startLineNumber,
-      }: { withLineNumbers?: boolean; startLineNumber?: number; highlight?: string },
-    ) => string;
-  };
 };
 
 export type L10nConfig = {

package/src/core/utils/highlight.ts

@@ -0,0 +1,125 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-markup-templating.js'; // dep of php
+import 'prismjs/components/prism-markup.js'; // xml
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
+
+const DEFAULT_LANG = 'clike';
+const NEW_LINE_EXP = /\n(?!$)/g;
+
+Prism.languages.insertBefore(
+  'javascript',
+  'string',
+  {
+    'property string': {
+      pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+Prism.languages.insertBefore(
+  'javascript',
+  'punctuation',
+  {
+    property: {
+      pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+Prism.languages.markdoc = {
+  ...Prism.languages.markdown,
+  tag: {
+    pattern: /{%(.|\n)*?%}/i,
+    inside: {
+      keyword: {
+        pattern: /^({%\s*\/?)(\w*|-)*\b/i,
+        lookbehind: true,
+      },
+      id: /#(\w|-)*\b/,
+      string: /".*?"/,
+      equals: /=/,
+      number: /\b\d+\b/i,
+      variable: {
+        pattern: /\$[\w.]+/i,
+        inside: {
+          punctuation: /\./i,
+        },
+      },
+      function: /\b\w+(?=\()/,
+      punctuation: /({%|\/?%})/i,
+      boolean: /false|true/,
+    },
+  },
+  variable: {
+    pattern: /\$\w+/i,
+  },
+  function: {
+    pattern: /\b\w+(?=\()/i,
+  },
+};
+
+/**
+ * map language names to Prism.js names
+ */
+export function mapLang(lang: string): string {
+  return (
+    {
+      json: 'js',
+      'c++': 'cpp',
+      'c#': 'csharp',
+      'c#+newtonsoft': 'csharp',
+      'java8+apache': 'java',
+      'objective-c': 'objectivec',
+      shell: 'bash',
+      viml: 'vim',
+      curl: 'bash',
+      'node.js': 'js',
+    }[lang] || DEFAULT_LANG
+  );
+}
+
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
+  lang = lang.toLowerCase();
+  const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
+  return Prism.highlight(source.toString(), grammar, lang);
+}
+
+export function addLineNumbers(highlightedCode: string, start = 1): string {
+  const codeLines = highlightedCode.split(NEW_LINE_EXP);
+
+  return codeLines
+    .map((line, i) => {
+      return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
+    })
+    .join('\n');
+}

package/src/core/utils/index.ts

@@ -1,6 +1,6 @@
 export * from '@redocly/theme/core/utils/clipboard-service';
 export * from '@redocly/theme/core/utils/css-variables';
-export * from '@redocly/theme/core/utils/add-line-numbers';
+export * from '@redocly/theme/core/utils/highlight';
 export * from '@redocly/theme/core/utils/media-css';
 export * from '@redocly/theme/core/utils/theme-helpers';
 export * from '@redocly/theme/core/utils/class-names';

package/src/core/utils/type-guards.ts

@@ -1,3 +1,5 @@
+import { ResolvedNavItem, ResolvedNavLinkItem } from '@redocly/config';
+
 export function isUndefined<T>(value: T | undefined): value is undefined {
   return value === undefined;
 }
@@ -17,3 +19,13 @@ export function isNotNull<T>(value: T): value is NonNullable<T> {
 export const isObject = (item: unknown): item is object => {
   return isNotNull(item) && typeof item === 'object';
 };
+
+export const isNavLinkItem = (item: ResolvedNavItem): item is ResolvedNavLinkItem => {
+  return item.link !== undefined;
+};
+
+export const isFromToSelectedOptions = (
+  options: unknown,
+): options is { from: string; to: string } => {
+  return isObject(options) && 'from' in options && 'to' in options;
+};

package/lib/core/utils/add-line-numbers.d.ts

@@ -1,6 +0,0 @@
-/**
- * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
- * @param start - The number to start the line numbering from; default is 1
- * @returns A string with line numbers added before each line
- */
-export declare function addLineNumbers(highlightedCode: string, start?: number): string;

package/lib/core/utils/add-line-numbers.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addLineNumbers = addLineNumbers;
-const NEW_LINE_EXP = /\n(?!$)/g;
-/**
- * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
- * @param start - The number to start the line numbering from; default is 1
- * @returns A string with line numbers added before each line
- */
-function addLineNumbers(highlightedCode, start = 1) {
-    console.log('from addLineNumbers ---> ', highlightedCode);
-    const codeLines = highlightedCode.split(NEW_LINE_EXP);
-    return codeLines
-        .map((line, i) => {
-        return `<span class='line-number'>${start + i}</span>${line}`;
-    })
-        .join('\n');
-}
-//# sourceMappingURL=add-line-numbers.js.map

package/src/core/utils/add-line-numbers.ts

@@ -1,17 +0,0 @@
-const NEW_LINE_EXP = /\n(?!$)/g;
-
-/**
- * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
- * @param start - The number to start the line numbering from; default is 1
- * @returns A string with line numbers added before each line
- */
-export function addLineNumbers(highlightedCode: string, start = 1): string {
-  console.log('from addLineNumbers ---> ', highlightedCode);
-  const codeLines = highlightedCode.split(NEW_LINE_EXP);
-
-  return codeLines
-    .map((line, i) => {
-      return `<span class='line-number'>${start + i}</span>${line}`;
-    })
-    .join('\n');
-}