diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 0823a16ead9..9cf35518c10 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -3,6 +3,7 @@ import { themes as prismThemes } from 'prism-react-renderer'; import type { Config } from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; import type * as DocsPlugin from '@docusaurus/plugin-content-docs'; +import type { Configuration as WebpackConfiguration } from 'webpack'; import { version as webUiVersion } from './open-video-ui/external/web-ui/package.json'; import path from 'path'; import fs from 'fs'; @@ -108,6 +109,39 @@ const config: Config = { }, } satisfies DocsPlugin.Options, ], + () => ({ + name: 'webpack-plugin', + configureWebpack() { + return { + module: { + // https://github.com/WebCoder49/code-input only exports to the global scope. + // Insert some `import` and `export` statements where needed. + rules: [ + { + test: require.resolve('@webcoder49/code-input/code-input'), + loader: 'exports-loader', + options: { + type: 'commonjs', + exports: 'single codeInput', + }, + }, + { + test: require.resolve('@webcoder49/code-input/plugins/indent'), + loader: 'imports-loader', + options: { + type: 'commonjs', + imports: { + syntax: 'single', + name: 'codeInput', + moduleName: '@webcoder49/code-input/code-input', + }, + }, + }, + ], + }, + } satisfies WebpackConfiguration; + }, + }), ], markdown: { diff --git a/open-video-ui/external/web-ui b/open-video-ui/external/web-ui index 9a9c6fc4397..46fc9e4a9fb 160000 --- a/open-video-ui/external/web-ui +++ b/open-video-ui/external/web-ui @@ -1 +1 @@ -Subproject commit 9a9c6fc43977258026649714e9c074beff62b7cd +Subproject commit 46fc9e4a9fb2b176aa9b6edfe5150615182793cb diff --git a/package-lock.json b/package-lock.json index d5ec2d39e05..ace9d5a2d1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "@docusaurus/core": "3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", + "@webcoder49/code-input": "^2.2.1", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", + "prismjs": "^1.29.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -21,6 +23,8 @@ "@docusaurus/tsconfig": "3.1.1", "@docusaurus/types": "3.1.1", "dotenv": "^16.4.4", + "exports-loader": "^5.0.0", + "imports-loader": "^5.0.0", "prettier": "^3.2.4", "serve-handler": "^6.1.5", "typescript": "~5.3.3" @@ -3789,6 +3793,11 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webcoder49/code-input": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@webcoder49/code-input/-/code-input-2.2.1.tgz", + "integrity": "sha512-1B+wLZhBR1wyuD1bUICgNZNy5VA/z1YReMmsaGvdEHaV/Jfc7EB/4wnQ+78vEfxx0SZvHyosCivAmfmaq6tIHg==" + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -6022,6 +6031,34 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exports-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/exports-loader/-/exports-loader-5.0.0.tgz", + "integrity": "sha512-W15EyyytBwd30yCCieTCqZSCUvU/o3etj2IUItSMjVQEzAf5xOQx8JL9iMo7ERnuAzIA6eapGSFWl7E9F+Wy9g==", + "dev": true, + "dependencies": { + "source-map": "^0.6.1" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/exports-loader/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/express": { "version": "4.18.2", "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", @@ -7455,6 +7492,26 @@ "node": ">=8" } }, + "node_modules/imports-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/imports-loader/-/imports-loader-5.0.0.tgz", + "integrity": "sha512-tXgL8xxZFjOjQLLiE7my00UUQfktg4G8fdpXcZphL0bJWbk9eCxKKFaCwmFRcwyRJQl95GXBL1DoE1rCS/tcPw==", + "dev": true, + "dependencies": { + "source-map-js": "^1.0.2", + "strip-comments": "^2.0.1" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -13216,6 +13273,15 @@ "node": ">=0.10.0" } }, + "node_modules/strip-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz", + "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/strip-final-newline": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", diff --git a/package.json b/package.json index 95901885ca6..8833bdc034c 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,10 @@ "@docusaurus/core": "3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", + "@webcoder49/code-input": "^2.2.1", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", + "prismjs": "^1.29.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -28,6 +30,8 @@ "@docusaurus/tsconfig": "3.1.1", "@docusaurus/types": "3.1.1", "dotenv": "^16.4.4", + "exports-loader": "^5.0.0", + "imports-loader": "^5.0.0", "prettier": "^3.2.4", "serve-handler": "^6.1.5", "typescript": "~5.3.3" diff --git a/src/components/CodeInput/index.tsx b/src/components/CodeInput/index.tsx new file mode 100644 index 00000000000..4382e603bb6 --- /dev/null +++ b/src/components/CodeInput/index.tsx @@ -0,0 +1,49 @@ +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; +import React, { type DetailedHTMLProps, type HTMLAttributes, useEffect } from 'react'; +import type * as CodeInputNamespace from '@webcoder49/code-input/code-input'; +import type * as PrismNamespace from 'prismjs'; +import 'prismjs/themes/prism-okaidia.min.css'; +import '@webcoder49/code-input/code-input.min.css'; + +let codeInput: typeof CodeInputNamespace; +let Prism: typeof PrismNamespace; +if (ExecutionEnvironment.canUseDOM) { + // can only be loaded inside the browser + codeInput = require('@webcoder49/code-input/code-input'); + Prism = require('prismjs'); + require('@webcoder49/code-input/plugins/indent'); + // HACK: doesn't handle being loaded lazily (after window load) + (codeInput as any).windowLoaded = true; +} + +let codeInputInitialized = false; + +function initializeCodeInput() { + if (codeInputInitialized) return; + // Register our template + codeInput.registerTemplate('syntax-highlighted', codeInput.templates.prism(Prism, [new codeInput.plugins.Indent(true, 4)])); + codeInputInitialized = true; +} + +export interface CodeInputElement extends CodeInputNamespace.CodeInput { + value: string; +} + +export interface Props extends DetailedHTMLProps, CodeInputElement> { + template?: string; +} + +declare module 'react' { + namespace JSX { + interface IntrinsicElements { + 'code-input': Props; + } + } +} + +export function CodeInput(props: Props) { + useEffect(() => { + initializeCodeInput(); + }, []); + return ; +} diff --git a/theoplayer/static/theoplayer/v6/examples/basic/demo.html b/theoplayer/static/theoplayer/v6/examples/basic/demo.html index c84f9418647..9f632cf75fa 100644 --- a/theoplayer/static/theoplayer/v6/examples/basic/demo.html +++ b/theoplayer/static/theoplayer/v6/examples/basic/demo.html @@ -13,18 +13,18 @@ width: 100%; } - - + +