Терминал jQuery, отображаемый внутри Docusaurs, не виден после навигации туда и обратно. ⇐ CSS

[Гость]

У меня возникла странная проблема. У меня есть веб-сайт Docusaurus, и я инициализирую REPL (терминал jQuery), когда пользователь посещает домашнюю страницу. Проблема в том, что вы открываете домашнюю страницу, уходите с нее и возвращаетесь на домашнюю страницу. Я исправил все проблемы, связанные с JavaScript, поэтому REPL инициализируется правильно, но терминал не виден. Некоторые элементы имеют дробную высоту (например,

Код: Выделить всё

0.02px

).
I thought that it was something with:

Код: Выделить всё

.terminal {
...
contain: content;
}

but when I change it to

Код: Выделить всё

initial

in my project css file:

Код: Выделить всё

.intro .term {
...
contain: initial;
}

the issue stay the same.
I have never seen such an issue when something inside the DOM that is created properly and CSS is applied to be not visible.
Note: I just checked the full screen mode (while writing this question) of the REPL and it fix the issue. But the question remains why the content is not rendered and how to fix it? Note that in the browser when I inspect the

Код: Выделить всё

.intro .term

it shows

Код: Выделить всё

contain: none

so it must be changed by the compiler.
I've tried to use Overwrites and comment out contain:

Код: Выделить всё

/* contain: content; */

But the issue is the same. Терминал работает, но его не видно.

Этот адрес, по которому я тестирую сайт:
https://jcubic.github.io/lips-website/
Чтобы дать некоторый контекст того, что делает код:

Код: Выделить всё

const replReady = () => {
return (
globalThis.jQuery &&
globalThis.jQuery.terminal &&
globalThis.terminal &&
globalThis.lips
);
}

export default function Interpreter(): JSX.Element {
const [activeSnippet, setActiveSnippet] = useState(0);
const [size, setSize] = useState(1);

const isProd = process.env.NODE_ENV === 'production';
const isBrowser = useIsBrowser();
const isStatic = isProd && !isBrowser;

useScripts(isBrowser && !!globalThis.jQuery ? [] : [
'https://cdn.jsdelivr.net/npm/jquery',
'https://cdn.jsdelivr.net/combine/npm/jquery.terminal/js/jquery.terminal.min.js,npm/js-polyfills/keyboard.js,npm/prismjs/prism.js,npm/jquery.terminal/js/prism.js,npm/prismjs/components/prism-scheme.min.js',
'https://cdn.jsdelivr.net/gh/jcubic/lips@devel/lib/js/terminal.js',
'https://cdn.jsdelivr.net/gh/jcubic/lips@devel/lib/js/prism.js'
]);

useEffect(() => {
(function loop() {
if (replReady()) {
initTerminal();
} else {
setTimeout(loop, 100);
}
})();
return destroyTerminal;
}, []);

function onSnippetRun() {
const $ = globalThis.jQuery;
const code = $('.example:visible').text();
const term = $('.term').terminal();
term.echo(term.get_prompt(), { formatters: false });
term.exec(code, true);
if (typeof screen.orientation === 'undefined') {
setTimeout(() => term.focus(), 0);
}
}

const terminalStyle = {
'--size': size.toFixed(1)
} as TerminalProps;

return (





{isStatic && }
{isStatic && }
{isStatic && }
{isStatic && }


...

...

The REPL is initialized in

Код: Выделить всё

useEffect

and on unmount the REPL is destroyed, so it can be initialized again. the

Код: Выделить всё

useScripts

hook is a hack to make the script run in sequence. It load them with native DOM by creating script tag and injecting it into document head. This is because of Helmet limitation when script execute out of order.


Источник: https://stackoverflow.com/questions/781 ... ing-way-an