import {useState} from 'react'; export const OpalCodeBlock = ({children, code, theme = 'light'}) => { // Ensure code is a string const codeString = typeof code === 'string' ? code : ''; const [isCopied, setIsCopied] = useState(false); const copyToClipboard = (text, index) => { navigator.clipboard .writeText(text.trim()) .then(() => { setIsCopied(true); setTimeout(() => setIsCopied(false), 500); // Reset after 1 second }) .catch((err) => { console.error('Failed to copy:', err); }); }; // OPAL verbs const verbs = new Set([ 'add_key', 'aggregate', 'align', 'always', 'bottomk', 'bucketize', 'dedup', 'leftjoin', 'drop_col', 'drop_interface', 'ever', 'exists', 'extract_regex', 'fill', 'filter', 'filter_last', 'flatten', 'flatten_all', 'flatten_leaves', 'flatten_single', 'follow', 'follow_not', 'fulljoin', 'histogram', 'interface', 'join', 'leftjoin', 'limit', 'lookup', 'lookup_ip_info', 'make_col', 'make_event', 'make_interval', 'make_metric', 'make_reference', 'make_resource', 'make_session', 'make_table', 'merge_events', 'never', 'not_exists', 'pick_col', 'pivot', 'rename_col', 'rollup', 'set_col_enum', 'set_col_immutable', 'set_col_searchable', 'set_col_visible', 'set_label', 'set_link', 'set_metric', 'set_metric_metadata', 'set_pk', 'set_primary_key', 'set_timestamp', 'set_valid_from', 'set_valid_to', 'sort', 'statsby', 'surrounding', 'timechart', 'timeshift', 'timestats', 'topk', 'union', 'unpivot', 'unset_all_links', 'unset_keys', 'unset_link', 'unsort', 'update_resource', ]); // OPAL functions const functions = new Set([ 'abs', 'any', 'any_not_null', 'append_item', 'arccos_deg', 'arccos_rad', 'arcsin_deg', 'arcsin_rad', 'arctan_deg', 'arctan_rad', 'array', 'array_agg', 'array_agg_distinct', 'array_contains', 'array_distinct', 'array_length', 'array_max', 'array_min', 'array_null', 'array_to_string', 'array_union_agg', 'arrays_overlap', 'asc', 'avg', 'bin_end_time', 'bin_size', 'bin_start_time', 'bool', 'bool_null', 'case', 'ceil', 'check_json', 'coalesce', 'concat_arrays', 'concat_strings', 'contains', 'cos_deg', 'cos_rad', 'count', 'count_distinct', 'count_distinct_exact', 'count_regex_matches', 'decode_base64', 'decode_uri', 'decode_uri_component', 'delta', 'delta_monotonic', 'dense_rank', 'deriv', 'desc', 'detect_browser', 'drop_fields', 'duration', 'duration_hr', 'duration_min', 'duration_ms', 'duration_null', 'duration_sec', 'editdistance', 'embed_sql_params', 'encode_base64', 'encode_uri', 'encode_uri_component', 'ends_with', 'eq', 'ewma', 'exp', 'exponential_histogram_null', 'first', 'first_not_null', 'float64', 'float64_null', 'floor', 'format_time', 'frame', 'frame_exact', 'frame_following', 'frame_preceding', 'from_milliseconds', 'from_nanoseconds', 'from_seconds', 'get_field', 'get_item', 'get_jmespath', 'get_regex', 'get_regex_all', 'group_by', 'gt', 'gte', 'hash', 'hash_agg', 'hash_agg_distinct', 'haversine_distance_km', 'histogram_combine', 'histogram_fraction', 'histogram_null', 'histogram_quantile', 'if', 'if_null', 'in', 'index_of_item', 'insert_item', 'int64', 'int64_null', 'int64_to_ipv4', 'int_div', 'intersect_arrays', 'ipv4', 'ipv4_address_in_network', 'ipv4_network_int64', 'ipv4_to_int64', 'is_null', 'label', 'lag', 'lag_not_null', 'last', 'last_not_null', 'lead', 'lead_not_null', 'left', 'like', 'ln', 'log', 'lower', 'lpad', 'lt', 'lte', 'ltrim', 'm', 'm_exponential_histogram', 'm_histogram', 'm_object', 'm_tdigest', 'make_array', 'make_array_range', 'make_fields', 'make_object', 'match_regex', 'max', 'median', 'median_exact', 'merge_objects', 'metric', 'min', 'mod', 'ne', 'now', 'nullsfirst', 'nullslast', 'numeric_null', 'object', 'object_agg', 'object_keys', 'object_null', 'on', 'options', 'order_by', 'otel_exponential_histogram_quantile', 'otel_exponential_histogram_sum', 'otel_histogram_quantile', 'otel_histogram_sum', 'parse_csv', 'parse_duration', 'parse_hex', 'parse_ip', 'parse_isotime', 'parse_json', 'parse_kvs', 'parse_timestamp', 'parse_url', 'path_exists', 'percentile', 'percentile_cont', 'percentile_disc', 'pi', 'pick_fields', 'pivot_array', 'pk', 'position', 'pow', 'prepend_item', 'primary_key', 'prom_quantile', 'query_end_time', 'query_start_time', 'radians', 'rank', 'rate', 'regex', 'replace', 'replace_regex', 'right', 'round', 'row_end_time', 'row_number', 'row_start_time', 'row_timestamp', 'rpad', 'rtrim', 'same', 'search', 'sha2', 'sin_deg', 'sin_rad', 'slice_array', 'sort_array', 'split', 'split_part', 'sqrt', 'starts_with', 'stddev', 'string', 'string_agg', 'string_agg_distinct', 'string_null', 'strlen', 'substring', 'sum', 'tags', 'tan_deg', 'tan_rad', 'tdigest', 'tdigest_agg', 'tdigest_combine', 'tdigest_null', 'tdigest_quantile', 'timestamp_ms', 'timestamp_ns', 'timestamp_null', 'timestamp_s', 'to_days', 'to_hours', 'to_milliseconds', 'to_minutes', 'to_nanoseconds', 'to_seconds', 'to_weeks', 'tokenize', 'tokenize_part', 'topk_agg', 'trim', 'uniform', 'unpivot_array', 'upper', 'valid_for', 'variant_null', 'variant_type_name', 'width_bucket', 'window', 'zipf', ]); const tokenize = (code) => { const tokens = []; let position = 0; // Token patterns (order matters!) // IMPORTANT: Use non-capturing groups (?:...) to avoid messing up pattern index counting const patterns = [ // Regex literals (must come FIRST to avoid conflicts with // comments) { regex: /\/(?:[^\/\\]|\\.)+\//g, type: 'string', name: 'regex' }, // Block comments { regex: /\/\*[\s\S]*?\*\//g, type: 'comment', name: 'block-comment' }, // Line comments { regex: /\/\/.*/g, type: 'comment', name: 'line-comment' }, // Strings (single and double quoted) { regex: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, type: 'string', name: 'string' }, // Duration literals (e.g., 1m, 5h, 30s, 1d) { regex: /\b\d+(?:\.\d+)?[smhd]\b/g, type: 'number', name: 'duration' }, // Float literals { regex: /\b\d+\.\d+\b/g, type: 'number', name: 'float' }, // Integer literals { regex: /\b\d+\b/g, type: 'number', name: 'integer' }, // Boolean literals { regex: /\b(?:true|false)\b/g, type: 'atom', name: 'boolean' }, // Logical operators { regex: /\b(?:and|or|not)\b/g, type: 'operator', name: 'logical-op' }, // Comparison and search operators { regex: /(?:==|!=|<=|>=|~=|!~|[<>~])/g, type: 'operator', name: 'comparison-op' }, // Arithmetic operators { regex: /[+\-*/%]/g, type: 'operator', name: 'arithmetic-op' }, // Special identifiers { regex: /[@^$#]\w+/g, type: 'identifier', name: 'special-identifier' }, // Function calls (identifier followed by '(') { regex: /\b\w+\s*(?=\()/g, type: 'function', name: 'function-call' }, // Verbs and identifiers { regex: /\b\w+\b/g, type: 'identifier', name: 'identifier' }, // Pipe operator { regex: /\|/g, type: 'operator', name: 'pipe' }, // Other punctuation { regex: /[(),\[\]{}.:;]/g, type: 'punctuation', name: 'punctuation' }, ]; // Create a single combined regex with capturing groups const allPatterns = patterns.map((p, i) => `(${p.regex.source})`).join('|'); const combinedRegex = new RegExp(allPatterns, 'g'); let lastIndex = 0; let match; let matchCount = 0; while ((match = combinedRegex.exec(code)) !== null) { matchCount++; // Add any text before this match as plain text if (match.index > lastIndex) { const skippedText = code.substring(lastIndex, match.index); tokens.push({ type: 'text', value: skippedText }); } // Determine which pattern matched const matchGroups = match.slice(1); const patternIndex = matchGroups.findIndex(g => g !== undefined); const matchedText = match[0]; if (patternIndex === -1 || !patterns[patternIndex]) { return tokens; } const matchedPattern = patterns[patternIndex]; let tokenType = matchedPattern.type; // Semantic analysis for identifiers if (tokenType === 'identifier') { if (verbs.has(matchedText)) { tokenType = 'verb'; } } else if (tokenType === 'function') { if (functions.has(matchedText)) { tokenType = 'keyword'; } else { tokenType = 'identifier'; } } tokens.push({ type: tokenType, value: matchedText }); lastIndex = match.index + matchedText.length; } // Add any remaining text if (lastIndex < code.length) { const remainingText = code.substring(lastIndex); tokens.push({ type: 'text', value: remainingText }); } return tokens; }; const tokens = tokenize(codeString); return ( <>

        
          {tokens.map((token, i) => {
            const tokenClass = token.type ? `opal-token-${token.type}` : 'opal-token-default';
            return (
              
                {token.value}
              
            );
          })}
        
         copyToClipboard(code)}
          onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && copyToClipboard(code)}
          role="button"
          tabIndex={0}
          >
          
        

        {children}

); }; Example usage: export default OpalCodeBlock;

Domain

Categories

Examples