1import cx from '@src/cx.mjs';
2import { useSettings } from '../../../settings.mjs';
3import { useStore } from '@nanostores/react';
4import { $strudel_log_history } from '../useLogger';
5import { useEffect, useRef } from 'react';
6
7export function ConsoleTab() {
8  const log = useStore($strudel_log_history);
9  const { fontFamily } = useSettings();
10  const scrollRef = useRef();
11  // scroll to bottom when log changes
12  useEffect(() => {
13    if (scrollRef.current) {
14      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
15    }
16  }, [log]);
17  return (
18    <div id="console-tab" className="break-all w-full h-full" style={{ fontFamily }}>
19      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md" ref={scrollRef}>
20        {' '}
21        {/* bg-background */}
22        {log.map((l, i) => {
23          const message = linkify(l.message);
24          const color = l.data?.hap?.value?.color;
25          return (
26            <div
27              key={l.id}
28              className={cx(
29                'whitespace-nowrap',
30                l.type === 'error' ? 'text-background bg-foreground' : 'text-foreground',
31                l.type === 'highlight' && 'underline',
32              )}
33              style={color ? { color } : {}}
34            >
35              <span dangerouslySetInnerHTML={{ __html: message }} className="whitespace-nowrap" />
36              {l.count ? ` (${l.count})` : ''}
37            </div>
38          );
39        })}
40      </div>
41    </div>
42  );
43}
44
45function linkify(inputText) {
46  var replacedText, replacePattern1, replacePattern2, replacePattern3;
47
48  //URLs starting with http://, https://, or ftp://
49  replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
50  replacedText = inputText.replace(replacePattern1, '<a class="underline" href="$1" target="_blank">$1</a>');
51
52  //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
53  replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
54  replacedText = replacedText.replace(
55    replacePattern2,
56    '$1<a class="underline" href="http://$2" target="_blank">$2</a>',
57  );
58
59  //Change email addresses to mailto:: links.
60  replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
61  replacedText = replacedText.replace(replacePattern3, '<a class="underline" href="mailto:$1">$1</a>');
62
63  return replacedText;
64}