Add highlighting etc

lxl-web/src/lib/components/Search.svelte

@@ -7,10 +7,14 @@
 	import getSortedSearchParams from '$lib/utils/getSortedSearchParams';
 	import BiSearch from '~icons/bi/search';
 	import { lxlQueryLanguage } from 'codemirror-lang-lxlquery';
+	import { highlightExtension } from '$lib/utils/LxlQueryHighlight';
+	import '$lib/styles/lxlquery.css';
 
 	export let placeholder: string;
 	export let autofocus: boolean = false;
 
+	const supersearchExtensions = [highlightExtension];
+
 	$: showAdvanced = $page.url.searchParams.get('_x') === 'advanced';
 	let q = $page.params.fnurgel
 		? '' //don't reflect related search on resource pages
@@ -49,6 +53,7 @@
 			name="_q"
 			bind:value={q}
 			language={lxlQueryLanguage}
+			extensions={supersearchExtensions}
 			placeholder={$page.data.t('search.search')}
 		/>
 	{:else}

lxl-web/src/lib/styles/lxlquery.css

@@ -0,0 +1,28 @@
+.lxlq.qualifier {
+  color:lightgreen;
+}
+
+.lxlq.qualifierkey {
+  color:green;
+}
+
+.lxlq.qualifiervalue {
+  color:green;
+}
+
+.lxlq.equaloperator, 
+.lxlq.compareoperator {
+  color:darkolivegreen;
+}
+
+.lxlq.booleanoperator {
+  color: #935493;
+}
+
+.lxlq.booleanquery {
+  color: purple;
+}
+
+.lxlq.wildcard {
+  color: orange;
+}

lxl-web/src/lib/utils/LxlQueryHighlight.ts

@@ -0,0 +1,18 @@
+import { syntaxHighlighting } from '@codemirror/language';
+import { customTags as t } from 'codemirror-lang-lxlquery';
+import { tagHighlighter } from '@lezer/highlight';
+
+const highlighter = tagHighlighter([
+  { tag: t.Qualifier, class: 'qualifier' },
+  { tag: t.QualifierKey, class: 'qualifierkey' },
+  { tag: t.QualifierValue, class: 'qualifiervalue' },
+  { tag: t.EqualOperator, class: 'equaloperator' },
+  { tag: t.CompareOperator, class: 'compareoperator' },
+  { tag: t.BooleanOperator, class: 'booleanoperator' },
+  { tag: t.BooleanQuery, class: 'booleanquery' },
+  { tag: t.Wildcard, class: 'wildcard' }
+], {
+  all: 'lxlq',
+})
+
+export const highlightExtension = syntaxHighlighting(highlighter);

lxl-web/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import NProgress from 'nprogress';
-	import '../nprogress.css';
+	import '$lib/styles/nprogress.css';
 	import { navigating } from '$app/stores';
 	import Matomo from '$lib/components/Matomo.svelte';
 	import CookieConsent from '$lib/components/CookieConsent.svelte';

packages/codemirror-lang-lxlquery/src/index.ts

@@ -1,17 +1,24 @@
 import { parser } from './syntax.grammar';
 import { LRLanguage, LanguageSupport } from '@codemirror/language';
-import { styleTags, tags as t } from '@lezer/highlight';
+import { styleTags, Tag } from '@lezer/highlight';
+
+// Turn these grammar nodes into stylable tags
+export const customTags = {
+	Qualifier: Tag.define('Qualifier'),
+	QualifierKey: Tag.define('QualifierKey'),
+	QualifierValue: Tag.define('QualifierValue'),
+	EqualOperator: Tag.define('EqualOperator'),
+	CompareOperator: Tag.define('CompareOperator'),
+	BooleanQuery: Tag.define('BooleanQuery'),
+	BooleanOperator: Tag.define('BooleanOperator'),
+	Wildcard: Tag.define('Wildcard')
+}
 
 export const lxlQueryLanguage = LRLanguage.define({
 	name: 'Libris XL query',
 	parser: parser.configure({
 		props: [
-			styleTags({
-				Identifier: t.variableName,
-				String: t.string,
-				CompareOperator: t.compareOperator,
-				'( )': t.paren
-			})
+			styleTags(customTags)
 		]
 	}),
 	languageData: {}

packages/codemirror-lang-lxlquery/src/syntax.grammar

@@ -3,7 +3,7 @@
 @skip { space }
 
 term {
-  Freetext |
+  freetext |
   Qualifier |
   Group |
   BooleanQuery
@@ -12,32 +12,32 @@ term {
 Group { "(" term* ")" } 
 
 BooleanQuery { 
-  (Freetext | Qualifier) BooleanOperator (Freetext | Qualifier) 
-  (BooleanOperator (Freetext | Qualifier))+?
+  (freetext | Qualifier) BooleanOperator (freetext | Qualifier) 
+  (BooleanOperator (freetext | Qualifier))+?
 }
 
 Qualifier {
-  (QualifierKey (EqualOperator | CompareOperator) QualifierValue) | Reserved
+  (QualifierKey (EqualOperator | CompareOperator) QualifierValue) | reserved
 }
 
 QualifierKey {
   identifier | string
 }
 
 QualifierValue {
-  Freetext | Group
+  freetext | Group
 }
 
-Freetext {
-  (identifier | string | Number) Wildcard?
+freetext {
+  (identifier | string | number) Wildcard?
 }
 
 @tokens {
   identifier { $[a-zA-ZåäöÅÄÖ]+ }
 
   string { '"' (!["\\] | "\\" _)* '"' }
 
-  Number { @digit+ }
+  number { @digit+ }
 
   EqualOperator { ":" | "=" }
 
@@ -47,11 +47,11 @@ Freetext {
 
   Wildcard { "*"+ }
 
-  Reserved { "includeEplikt" | "includePreliminary" }
+  reserved { "includeEplikt" | "includePreliminary" }
 
   space { @whitespace+ }
 
-  @precedence {BooleanOperator, Reserved, identifier}
+  @precedence {BooleanOperator, reserved, identifier}
 }
 
 @detectDelim

packages/codemirror-lang-lxlquery/test/cases.txt

@@ -4,7 +4,7 @@ Astrid lindgren
 
 ==>
 
-Query(Freetext, Freetext)
+Query()
 
 
 # Freetext string
@@ -13,7 +13,7 @@ Query(Freetext, Freetext)
 
 ==>
 
-Query(Freetext)
+Query()
 
 
 # Freetext with Wildcard
@@ -22,7 +22,7 @@ Astrid lind*
 
 ==>
 
-Query(Freetext,Freetext(Wildcard))
+Query(Wildcard)
 
 
 # Qualifier with EqualOperator
@@ -31,7 +31,9 @@ Query(Freetext,Freetext(Wildcard))
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier with CompareOperator
@@ -42,8 +44,8 @@ Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
 ==>
 
 Query(
-  Qualifier(QualifierKey,CompareOperator,QualifierValue(...))
-  Qualifier(QualifierKey,CompareOperator,QualifierValue(...))
+  Qualifier(QualifierKey,CompareOperator,QualifierValue)
+  Qualifier(QualifierKey,CompareOperator,QualifierValue)
 )
 
 
@@ -53,7 +55,9 @@ Query(
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier with string value
@@ -62,7 +66,9 @@ contributor:"Astrid Lindgren"
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier linked
@@ -71,7 +77,9 @@ contributor:"libris:fcrtpljz1qp2bdv#it"
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # BooleanQuery
@@ -80,7 +88,9 @@ sommar OR vinter NOT vår
 
 ==>
 
-Query(BooleanQuery(...))
+Query(
+  BooleanQuery(BooleanOperator,BooleanOperator)
+)
 
 
 # BooleanQuery - erroneous
@@ -89,7 +99,9 @@ OR AND sommar
 
 ==>
 
-Query(⚠(BooleanOperator),⚠(BooleanOperator),Freetext)
+Query(
+  ⚠(BooleanOperator),⚠(BooleanOperator)
+)
 
 
 # Combined: Qualifier and Freetext
@@ -98,7 +110,9 @@ contributor:"Astrid Lindgren" Pippi Långstrump
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)),Freetext,Freetext)
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Combined: Freetext BooleanQuery (Qualifier NOT Qualifier)
@@ -107,7 +121,9 @@ träd* bibliografi:"sigel:DST" NOT typ:Text
 
 ==>
 
-Query(Freetext(Wildcard),BooleanQuery(Qualifier(...),BooleanOperator,Qualifier(...)))
+Query(
+  Wildcard,BooleanQuery(Qualifier(...),BooleanOperator,Qualifier(...))
+)
 
 
 # Combined: Freetext Qualifier (Group with BooleanQuery) Qualifier
@@ -116,7 +132,16 @@ pippi långstrump språk:(engelska OR franska) ÅR>2002
 
 ==>
 
-Query(Freetext,Freetext,Qualifier(QualifierKey,EqualOperator,QualifierValue(Group(BooleanQuery(...)))),Qualifier(...))
+Query(
+  Qualifier(
+    QualifierKey,EqualOperator,QualifierValue(
+      Group(
+        BooleanQuery(BooleanOperator)
+      )
+    )
+  ),
+  Qualifier(...)
+)
 
 
 # Other filters: cover image
@@ -134,7 +159,7 @@ Pippi includeEplikt
 
 ==>
 
-Query(Freetext,Qualifier(Reserved))
+Query(Qualifier)
 
 
 # Other filters: include preliminary
@@ -143,4 +168,4 @@ includePreliminary Pippi
 
 ==>
 
-Query(Qualifier(Reserved),Freetext)
+Query(Qualifier)

packages/supersearch/src/lib/components/SuperSearch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import CodeMirror, { type ChangeCodeMirrorEvent } from '$lib/components/CodeMirror.svelte';
 	import { EditorView, placeholder as placeholderExtension } from '@codemirror/view';
-	import { Compartment } from '@codemirror/state';
+	import { Compartment, type Extension } from '@codemirror/state';
 	import { type LRLanguage } from '@codemirror/language';
 	import submitFormOnEnterKey from '$lib/extensions/submitFormOnEnterKey.js';
 
@@ -11,19 +11,29 @@
 		form?: string;
 		language?: LRLanguage;
 		placeholder?: string;
+		extensions?: Extension[];
 	}
 
-	let { name, value = $bindable(''), form, language, placeholder = '' }: Props = $props();
+	let {
+		name,
+		value = $bindable(''),
+		form,
+		language,
+		extensions,
+		placeholder = ''
+	}: Props = $props();
 
 	let editorView: EditorView | undefined = $state();
 
 	let placeholderCompartment = new Compartment();
 	let prevPlaceholder = placeholder;
 
-	const extensions = [
+	const useExtensions = [
 		submitFormOnEnterKey(form),
 		...(language ? [language] : []),
-		placeholderCompartment.of(placeholderExtension(placeholder))
+		placeholderCompartment.of(placeholderExtension(placeholder)),
+		// compartmentalize rest of extensions?
+		...(extensions ? extensions : [])
 	];
 
 	function handleChangeCodeMirror(event: ChangeCodeMirrorEvent) {
@@ -40,5 +50,5 @@
 	});
 </script>
 
-<CodeMirror {value} {extensions} onchange={handleChangeCodeMirror} bind:editorView />
+<CodeMirror {value} extensions={useExtensions} onchange={handleChangeCodeMirror} bind:editorView />
 <textarea {value} {name} {form} hidden readonly></textarea>