URL highlighting with inline CM

src-web/components/Editor/url/extension.ts

@@ -0,0 +1,46 @@
+import { parser } from './url';
+// import { foldNodeProp, foldInside, indentNodeProp } from '@codemirror/language';
+import { styleTags, tags as t } from '@lezer/highlight';
+import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import { completeFromList } from '@codemirror/autocomplete';
+
+const parserWithMetadata = parser.configure({
+  props: [
+    styleTags({
+      ProtocolName: t.comment,
+      Slashy: t.comment,
+      Host: t.variableName,
+      Slash: t.comment,
+      PathSegment: t.bool,
+      QueryName: t.variableName,
+      QueryValue: t.string,
+      Question: t.comment,
+      Equal: t.comment,
+      Amp: t.comment,
+    }),
+    // indentNodeProp.add({
+    //   Application: (context) => context.column(context.node.from) + context.unit,
+    // }),
+    // foldNodeProp.add({
+    //   Application: foldInside,
+    // }),
+  ],
+});
+
+const urlLanguage = LRLanguage.define({
+  parser: parserWithMetadata,
+  languageData: {
+    // commentTokens: {line: ";"}
+  },
+});
+
+const exampleCompletion = urlLanguage.data.of({
+  autocomplete: completeFromList([
+    { label: 'http://', type: 'keyword' },
+    { label: 'https://', type: 'keyword' },
+  ]),
+});
+
+export function url() {
+  return new LanguageSupport(urlLanguage, [exampleCompletion]);
+}

src-web/components/Editor/url/url.grammar

@@ -0,0 +1,30 @@
+@top url { Protocol Host Path Query }
+
+Protocol {
+    ProtocolName Slashy
+}
+
+Path {
+  (Slash PathSegment)*
+}
+
+Query {
+  Question (QueryPair)*
+}
+
+QueryPair {
+  Amp? QueryName Equal QueryValue
+}
+
+@tokens {
+  ProtocolName { "http" | "https" }
+  Host { $[a-zA-Z0-9-_.]+ }
+  QueryName { $[a-zA-Z0-9-_.]+ }
+  QueryValue { $[a-zA-Z0-9-_.]+ }
+  PathSegment { $[a-zA-Z0-9-_.]+ }
+  Slashy { "://" }
+  Slash { "/" }
+  Question { "?" }
+  Equal { "=" }
+  Amp { "&" }
+}

src-web/components/Editor/url/url.terms.ts

@@ -0,0 +1,17 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  url = 1,
+  Protocol = 2,
+  ProtocolName = 3,
+  Slashy = 4,
+  Host = 5,
+  Path = 6,
+  Slash = 7,
+  PathSegment = 8,
+  Query = 9,
+  Question = 10,
+  QueryPair = 11,
+  Amp = 12,
+  QueryName = 13,
+  Equal = 14,
+  QueryValue = 15

src-web/components/Editor/url/url.ts

@@ -0,0 +1,16 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "#xOQOPOOOVOPO'#C^O[OQOOOOOO,58x,58xOaOPOOOiOSO'#ClOnOPO'#CbOvOPOOOOOO,59W,59WOOOO-E6j-E6jO{OWO'#CeQOOOOOO!WOPO'#CgO!]OWO'#CgOOOO'#Cm'#CmO!bOWO,59PO!mO`O,59RO!rOPO,59ROOOO-E6k-E6kOOOO1G.m1G.mO!wO`O1G.mOOOO7+$X7+$X",
+  stateData: "!|~ORPO~OSRO~OTSO~OVTOYUP~OWWO~OVTOYUX~OYYO~O[]O][ObXX~O^`O~O]aO~O[]O][ObXa~O_cO~O^dO~O_eO~O",
+  goto: "|bPPcPPPfPPiPlPPPPpvRQORVSRZVT^Y_QUSRXUQ_YRb_",
+  nodeNames: "⚠ url Protocol ProtocolName Slashy Host Path Slash PathSegment Query Question QueryPair Amp QueryName Equal QueryValue",
+  maxTerm: 18,
+  skippedNodes: [0],
+  repeatNodeCount: 2,
+  tokenData: "'T~R]vwz}!O!P!O!P!P!P!Q!n!Q![!P![!]!s!_!`#U!a!b#Z!c!}!P#R#S!P#T#[!P#[#]#`#]#o!P~!PO[~n![UTQWS]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#o!P~!sOV~~!vP!P!Q!y~!|P!P!Q#P~#UOS~~#ZO^~~#`OY~o#kWTQWS]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#h!P#h#i$T#i#o!Po$`WTQWS]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#h!P#h#i$x#i#o!Po%TWTQWS]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#d!P#d#e%m#e#o!Po%zWTQWSRP]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#g!P#g#h&d#h#o!Po&qUTQWSRP]W_`}!O!P!O!P!P!Q![!P!c!}!P#R#S!P#T#o!P",
+  tokenizers: [0, 1, 2, 3, 4],
+  topRules: {"url":[0,1]},
+  tokenPrec: 0
+})