@cccsaurora/howler-ui 2.12.0-dev.168

package/components/routes/overviews/OverviewEditor.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
+import { conf, language } from './markdownExtendedTokenProvider';
+const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const { config } = useContext(ApiConfigContext);
+    const beforeEditorMount = useCallback((_monaco) => {
+        _monaco.languages.register({ id: 'markdown-extended' });
+        _monaco.languages.setLanguageConfiguration('markdown-extended', conf);
+        _monaco.languages.setMonarchTokensProvider('markdown-extended', language);
+    }, []);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+        if (monaco.languages.getLanguages().some(lang => lang.id === 'markdown-extended')) {
+            // Set the parsers
+            const confDisposable = monaco.languages.setLanguageConfiguration('markdown-extended', conf);
+            const languageDisposable = monaco.languages.setMonarchTokensProvider('markdown-extended', language);
+            return () => {
+                confDisposable?.dispose();
+                languageDisposable?.dispose();
+            };
+        }
+    }, [config.lookups, monaco]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const disposable = monaco.editor.onDidCreateModel(model => {
+            monaco.editor.setModelLanguage(model, 'markdown-extended');
+        });
+        monaco.editor.getModels().forEach(model => {
+            monaco.editor.setModelLanguage(model, 'markdown-extended');
+        });
+        return disposable.dispose;
+    }, [monaco]);
+    const options = useMemo(() => ({
+        fontSize,
+        bracketPairColorization: {
+            enabled: false
+        },
+        scrollbar: {
+            horizontal: 'auto'
+        },
+        ...editorOptions
+    }), [fontSize, editorOptions]);
+    return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
+};
+export default memo(OverviewEditor);

package/components/routes/overviews/OverviewViewer.d.ts

@@ -0,0 +1,2 @@
+declare const OverviewViewer: () => import("react/jsx-runtime").JSX.Element;
+export default OverviewViewer;

package/components/routes/overviews/OverviewViewer.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, Tooltip, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Delete, SsidChart } from '@mui/icons-material';
+import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
+import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
+import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useSearchParams } from 'react-router-dom';
+import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import OverviewEditor from './OverviewEditor';
+import { useStartingTemplate } from './startingTemplate';
+const OverviewViewer = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const [params, setParams] = useSearchParams();
+    const { getOverviews } = useContext(OverviewContext);
+    const { dispatchApi } = useMyApi();
+    const [overviewList, setOverviewList] = useState([]);
+    const [selectedOverview, setSelectedOverview] = useState(null);
+    const [content, setContent] = useState('');
+    const [analytics, setAnalytics] = useState([]);
+    const [detections, setDetections] = useState([]);
+    const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
+    const [detection, setDetection] = useState(params.get('detection') ?? 'ANY');
+    const [loading, setLoading] = useState(false);
+    const [overviewLoading, setOverviewLoading] = useState(false);
+    const [exampleHit, setExampleHit] = useState(null);
+    const [x, setX] = useState(0);
+    const analyticContext = useContext(AnalyticContext);
+    const wrapper = useRef();
+    const startingTemplate = useStartingTemplate();
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+            try {
+                setOverviewList(await getOverviews(true));
+                const analyticsResult = await dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
+                    logError: false,
+                    showError: true,
+                    throwError: true
+                });
+                const _analytics = analyticsResult.items;
+                if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
+                    setAnalytic('');
+                }
+                setAnalytics(_analytics);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analytic, dispatchApi]);
+    useEffect(() => {
+        if (analytic) {
+            setLoading(true);
+            analyticContext
+                .getAnalyticFromName(analytic)
+                .then(foundAnalytic => {
+                setDetections(foundAnalytic.detections);
+            })
+                .catch(() => {
+                setDetection('ANY');
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [analytic, analyticContext, detection, dispatchApi, params, setParams]);
+    useEffect(() => {
+        (async () => {
+            const result = await dispatchApi(api.search.hit.post({
+                query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"` +
+                    (!!detection && detection !== 'ANY' ? ` AND howler.detection:"${sanitizeLuceneQuery(detection)}"` : ''),
+                rows: 1,
+                fl: '*'
+            }), { throwError: false, showError: false, logError: false });
+            if (result?.items[0]) {
+                setExampleHit(result.items[0]);
+                return;
+            }
+            const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+            if (analytic) {
+                _hit.howler.analytic = analytic;
+            }
+            if (detection) {
+                _hit.howler.detection = detection;
+            }
+            setExampleHit(_hit);
+        })();
+    }, [analytic, detection, dispatchApi]);
+    useEffect(() => {
+        if (analytic && detection) {
+            const overview = overviewList.find(_overview => _overview.analytic === analytic &&
+                ((detection === 'ANY' && !_overview.detection) || _overview.detection === detection));
+            if (overview) {
+                setSelectedOverview(overview);
+                setContent(overview.content);
+            }
+            else {
+                setSelectedOverview(null);
+                setContent('');
+            }
+        }
+    }, [analytic, detection, overviewList]);
+    useEffect(() => {
+        if (analytic) {
+            params.set('analytic', analytic);
+        }
+        else {
+            params.delete('analytic');
+        }
+        if (detection && detection !== 'ANY') {
+            params.set('detection', detection);
+        }
+        else {
+            params.delete('detection');
+        }
+        params.sort();
+        setParams(params, {
+            replace: true
+        });
+    }, [analytic, detection, params, setParams]);
+    const onDelete = useCallback(async () => {
+        await dispatchApi(api.overview.del(selectedOverview.overview_id), {
+            logError: false,
+            showError: true,
+            throwError: false
+        });
+        setSelectedOverview(null);
+        setContent('');
+    }, [dispatchApi, selectedOverview?.overview_id]);
+    const onSave = useCallback(async () => {
+        if (analytic && detection) {
+            try {
+                setOverviewLoading(true);
+                const result = await dispatchApi(selectedOverview
+                    ? api.overview.put(selectedOverview.overview_id, content)
+                    : api.overview.post({
+                        analytic,
+                        detection: detection !== 'ANY' ? detection : null,
+                        content
+                    }), {
+                    logError: false,
+                    showError: true,
+                    throwError: true
+                });
+                setSelectedOverview(result);
+                const newList = [result, ...overviewList];
+                setOverviewList(newList.filter((v1, i) => newList.findIndex(v2 => v1.overview_id === v2.overview_id) === i));
+            }
+            finally {
+                setOverviewLoading(false);
+            }
+        }
+    }, [analytic, detection, dispatchApi, selectedOverview, content, overviewList]);
+    const onMouseMove = useCallback((event) => {
+        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const offset = event.clientX - (wrapperRect.left + wrapperRect.width / 2);
+        setX(offset);
+    }, []);
+    const onMouseUp = useCallback(() => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
+    const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
+    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
+                            if (e.ctrlKey && e.key === 's') {
+                                if (!noChange) {
+                                    onSave();
+                                }
+                                e.preventDefault();
+                            }
+                        }, sx: { position: 'relative' }, children: [_jsx(Box, { flex: 1, position: "relative", height: "100%", children: _jsx(Box, { flex: 1, sx: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        bottom: 0,
+                                        right: `calc(50% + 7px - ${x}px)`,
+                                        mr: -2.4,
+                                        pr: 1.5
+                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    bottom: 0,
+                                    left: 'calc(50% - 5px)',
+                                    width: '10px',
+                                    backgroundColor: theme.palette.divider,
+                                    cursor: 'col-resize',
+                                    transform: `translateX(${x}px)`,
+                                    zIndex: 1000,
+                                    borderRadius: theme.shape.borderRadius
+                                }, onMouseDown: onMouseDown }), _jsx(Box, { flex: 1, px: 2, sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: `calc(50% + 7px + ${x}px)`,
+                                    bottom: 0,
+                                    right: 0,
+                                    display: 'flex',
+                                    alignItems: 'stretch',
+                                    justifyContent: 'stretch',
+                                    px: 1,
+                                    pt: 1,
+                                    mt: -1,
+                                    '& > *': { width: '100%' },
+                                    '& > div > :first-child': { mt: 0 }
+                                }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) })] }))] })] }));
+};
+export default OverviewViewer;

package/components/routes/overviews/Overviews.d.ts

@@ -0,0 +1,2 @@
+declare const Overviews: () => import("react/jsx-runtime").JSX.Element;
+export default Overviews;

package/components/routes/overviews/Overviews.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Article } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import OverviewCard from './OverviewCard';
+const OverviewsBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const { showSuccessMessage } = useMySnackbar();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const query = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the overview should be visible and/or matches the type we are filtering for
+            setResponse(await dispatchApi(api.search.overview.post({
+                query,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.overview_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback(async (e, id) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
+            await onSearch();
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
+        }
+        catch (_err) {
+            // eslint-disable-next-line no-console
+            console.warn(_err);
+        }
+    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    const renderer = useCallback((item, className) => _jsx(OverviewCard, { overview: item, className: className, onDelete: onDelete }), [onDelete]);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+};
+const Overviews = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(OverviewsBase, {}) }));
+};
+export default Overviews;

package/components/routes/overviews/markdownExtendedTokenProvider.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+import type { languages } from 'monaco-editor';
+export declare const conf: languages.LanguageConfiguration;
+export declare const language: languages.IMonarchLanguage;

package/components/routes/overviews/markdownExtendedTokenProvider.js

@@ -0,0 +1,254 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+export const conf = {
+    comments: {
+        blockComment: ['<!--', '-->']
+    },
+    colorizedBracketPairs: [],
+    brackets: [
+        ['{', '}'],
+        ['[', ']'],
+        ['(', ')']
+    ],
+    autoClosingPairs: [
+        { open: '{', close: '}' },
+        { open: '[', close: ']' },
+        { open: '(', close: ')' },
+        { open: '<', close: '>', notIn: ['string'] }
+    ],
+    surroundingPairs: [
+        { open: '(', close: ')' },
+        { open: '[', close: ']' },
+        { open: '`', close: '`' }
+    ],
+    folding: {
+        markers: {
+            start: new RegExp('^\\s*<!--\\s*#?region\\b.*-->'),
+            end: new RegExp('^\\s*<!--\\s*#?endregion\\b.*-->')
+        }
+    }
+};
+export const language = {
+    defaultToken: '',
+    tokenPostfix: '.md',
+    // escape codes
+    control: /[\\`*_\[\]{}()#+\-\.!]/,
+    noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/,
+    escapes: /\\(?:@control)/,
+    // escape codes for javascript/CSS strings
+    jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
+    // non matched elements
+    empty: ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param'],
+    // CCCS MODIFICATION START
+    handlebars_operators: [
+        '#if',
+        '/if',
+        '#unless',
+        '/unless',
+        '#each',
+        '/each',
+        '#with',
+        '/with',
+        'lookup',
+        'log',
+        'equals',
+        'and',
+        'or',
+        'not',
+        'join',
+        'fetch',
+        'upper',
+        'lower',
+        'borealis'
+    ],
+    // CCCS MODIFICATION END
+    tokenizer: {
+        root: [
+            // markdown tables
+            [/^\s*\|/, '@rematch', '@table_header'],
+            // headers (with #)
+            [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']],
+            // headers (with =)
+            [/^\s*(=+|\-+)\s*$/, 'keyword'],
+            // headers (with ***)
+            [/^\s*((\*[ ]?)+)\s*$/, 'meta.separator'],
+            // quote
+            [/^\s*>+/, 'comment'],
+            // list (starting with * or number)
+            [/^\s*([\*\-+:]|\d+\.)\s/, 'keyword'],
+            // code block (4 spaces indent)
+            [/^(\t|[ ]{4})[^ ].*$/, 'string'],
+            // code block (3 tilde)
+            [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
+            // github style code blocks (with backticks and language)
+            [/^\s*```\s*((?:\w|[\/\-#])+).*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
+            // github style code blocks (with backticks but no language)
+            [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }],
+            // CCCS MODIFICATION
+            [/{{/, { token: 'handlebars', next: '@handlebars' }],
+            // markup within lines
+            { include: '@linecontent' }
+        ],
+        // CCCS MODIFICATION START
+        handlebars: [
+            [/"[^"]+"/, 'string'],
+            [/[()]/, 'handlebars'],
+            [/[\w\d\.]+/, 'variable'],
+            [
+                /[#/\w]+/,
+                {
+                    cases: {
+                        '@handlebars_operators': { token: 'operator' },
+                        '@default': { token: 'variable' }
+                    }
+                }
+            ],
+            [/}}/, { token: 'handlebars', next: '@pop' }]
+        ],
+        // CCCS MODIFICATION END
+        table_header: [
+            { include: '@table_common' },
+            [/[^\|]+/, 'keyword.table.header'] // table header
+        ],
+        table_body: [{ include: '@table_common' }, { include: '@linecontent' }],
+        table_common: [
+            [/\s*[\-:]+\s*/, { token: 'keyword', switchTo: 'table_body' }], // header-divider
+            [/^\s*\|/, 'keyword.table.left'], // opening |
+            [/^\s*[^\|]/, '@rematch', '@pop'], // exiting
+            [/^\s*$/, '@rematch', '@pop'], // exiting
+            [
+                /\|/,
+                {
+                    cases: {
+                        '@eos': 'keyword.table.right', // closing |
+                        '@default': 'keyword.table.middle' // inner |
+                    }
+                }
+            ]
+        ],
+        codeblock: [
+            [/^\s*~~~\s*$/, { token: 'string', next: '@pop' }],
+            [/^\s*```\s*$/, { token: 'string', next: '@pop' }],
+            [/.*$/, 'variable.source']
+        ],
+        // github style code blocks
+        codeblockgh: [
+            [/```\s*$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }],
+            [/[^`]+/, 'variable.source']
+        ],
+        linecontent: [
+            // escapes
+            [/&\w+;/, 'string.escape'],
+            [/@escapes/, 'escape'],
+            // various markup
+            [/\b__([^\\_]|@escapes|_(?!_))+__\b/, 'strong'],
+            [/\*\*([^\\*]|@escapes|\*(?!\*))+\*\*/, 'strong'],
+            [/\b_[^_]+_\b/, 'emphasis'],
+            [/\*([^\\*]|@escapes)+\*/, 'emphasis'],
+            [/`/, { token: 'variable', next: '@codecontent' }],
+            // links
+            [/\{+[^}]+\}+/, 'string.target'],
+            [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']],
+            [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'],
+            // or html
+            { include: 'html' }
+        ],
+        codecontent: [
+            // CCCS MODIFICATION
+            [/{{/, { token: 'handlebars', next: '@handlebars' }],
+            [/([^\\`]|@escapes)+/, 'variable'],
+            [/`/, { token: 'variable', next: '@pop' }]
+        ],
+        // Note: it is tempting to rather switch to the real HTML mode instead of building our own here
+        // but currently there is a limitation in Monarch that prevents us from doing it: The opening
+        // '<' would start the HTML mode, however there is no way to jump 1 character back to let the
+        // HTML mode also tokenize the opening angle bracket. Thus, even though we could jump to HTML,
+        // we cannot correctly tokenize it in that mode yet.
+        html: [
+            // html tags
+            [/<(\w+)\/>/, 'tag'],
+            [
+                /<(\w+)(\-|\w)*/,
+                {
+                    cases: {
+                        '@empty': { token: 'tag', next: '@tag.$1' },
+                        '@default': { token: 'tag', next: '@tag.$1' }
+                    }
+                }
+            ],
+            [/<\/(\w+)(\-|\w)*\s*>/, { token: 'tag' }],
+            [/<!--/, 'comment', '@comment']
+        ],
+        comment: [
+            [/[^<\-]+/, 'comment.content'],
+            [/-->/, 'comment', '@pop'],
+            [/<!--/, 'comment.content.invalid'],
+            [/[<\-]/, 'comment.content']
+        ],
+        // Almost full HTML tag matching, complete with embedded scripts & styles
+        tag: [
+            [/[ \t\r\n]+/, 'white'],
+            [
+                /(type)(\s*=\s*)(")([^"]+)(")/,
+                [
+                    'attribute.name.html',
+                    'delimiter.html',
+                    'string.html',
+                    { token: 'string.html', switchTo: '@tag.$S2.$4' },
+                    'string.html'
+                ]
+            ],
+            [
+                /(type)(\s*=\s*)(')([^']+)(')/,
+                [
+                    'attribute.name.html',
+                    'delimiter.html',
+                    'string.html',
+                    { token: 'string.html', switchTo: '@tag.$S2.$4' },
+                    'string.html'
+                ]
+            ],
+            [/(\w+)(\s*=\s*)("[^"]*"|'[^']*')/, ['attribute.name.html', 'delimiter.html', 'string.html']],
+            [/\w+/, 'attribute.name.html'],
+            [/\/>/, 'tag', '@pop'],
+            [
+                />/,
+                {
+                    cases: {
+                        '$S2==style': {
+                            token: 'tag',
+                            switchTo: 'embeddedStyle',
+                            nextEmbedded: 'text/css'
+                        },
+                        '$S2==script': {
+                            cases: {
+                                $S3: {
+                                    token: 'tag',
+                                    switchTo: 'embeddedScript',
+                                    nextEmbedded: '$S3'
+                                },
+                                '@default': {
+                                    token: 'tag',
+                                    switchTo: 'embeddedScript',
+                                    nextEmbedded: 'text/javascript'
+                                }
+                            }
+                        },
+                        '@default': { token: 'tag', next: '@pop' }
+                    }
+                }
+            ]
+        ],
+        embeddedStyle: [
+            [/[^<]+/, ''],
+            [/<\/style\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/</, '']
+        ],
+        embeddedScript: [
+            [/[^<]+/, ''],
+            [/<\/script\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/</, '']
+        ]
+    }
+};

package/components/routes/overviews/startingTemplate.d.ts

@@ -0,0 +1 @@
+export declare const useStartingTemplate: () => string;