@antelopejs/dms 0.10.0 → 0.11.0

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/numberSuffix.ts

@@ -1,8 +1,5 @@
 import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
-import {
-  getPluginI18n,
-  resolveI18nKey,
-} from "../../../../../dms-core/app/composables/translation/useTranslation";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
 
 /** A formatter writing a number for a locale, with Intl's options. */
 type NumberFormatter = (
@@ -41,7 +38,7 @@ export function withNumberSuffix(format: NumberFormatter): DataTypeFormatter {
     if (!suffix || typeof value !== "number" || typeof formatted !== "string") {
       return formatted;
     }
-    const unit = resolveI18nKey(getPluginI18n().translate, suffix);
+    const unit = getAppTranslation().processI18n(suffix);
     return `${formatted}${UNIT_SEPARATOR}${unit}`;
   };
 }

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -7,7 +7,7 @@ import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import ULink from "@nuxt/ui/components/Link.vue";
 import { buildRelationBadges } from "./relationBadges";
 import { mapRelationBeforeState, sameRelationValue } from "./relationValue";
-import { relationSelectSource } from "./relationRows";
+import { NotFoundRelation, relationSelectSource } from "./relationRows";
 import {
   isSet,
   readRowField,
@@ -338,12 +338,31 @@ function renderRelationBadge(label: string, title?: string) {
   });
 }
 
+// An id its `select` route did not answer: "Not found", the id on hover.
+function renderNotFoundRelation(relation: NotFoundRelation) {
+  const { t } = getAppTranslation();
+  return h(
+    "span",
+    { class: "text-muted", title: relation.id },
+    t("dms.form.relation.not_found"),
+  );
+}
+
 function renderRelationBadges(values: unknown[], labelKey: string) {
-  const { processI18n } = getAppTranslation();
-  const { visible, hidden } = buildRelationBadges(values, labelKey);
-  const badges = visible.map((label) =>
-    renderRelationBadge(processI18n(label)),
+  const { processI18n, t } = getAppTranslation();
+  const notFound = values.filter(
+    (item): item is NotFoundRelation => item instanceof NotFoundRelation,
+  );
+  const { visible, hidden } = buildRelationBadges(
+    values.filter((item) => !(item instanceof NotFoundRelation)),
+    labelKey,
   );
+  const badges = [
+    ...visible.map((label) => renderRelationBadge(processI18n(label))),
+    ...notFound.map((relation) =>
+      renderRelationBadge(t("dms.form.relation.not_found"), relation.id),
+    ),
+  ];
   if (hidden.length > 0) {
     const hiddenLabels = hidden.map((label) => processI18n(label)).join(", ");
     badges.push(renderRelationBadge(`+${hidden.length}`, hiddenLabels));
@@ -359,6 +378,7 @@ function renderRelation(value: unknown, options: unknown) {
     return renderRelationBadges(value, labelKey);
   }
 
+  if (value instanceof NotFoundRelation) return renderNotFoundRelation(value);
   if (!value || !isObject(value)) return value;
 
   const valueObject = value as Record<string, string>;
@@ -981,6 +1001,7 @@ const registerCascaderRelationType = (
     },
     beforeStateMapper: mapRelationBeforeState,
     isSameValue: sameRelationValue,
+    selectSource: relationSelectSource,
   });
 };
 

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/relationRows.ts

@@ -45,12 +45,33 @@ export function relationRowLabel(
   return row[source.keyMapping?.label || RELATION_LABEL_KEY];
 }
 
+/**
+ * An id a relation's `select` route did not answer: a deleted row, or one out
+ * of the reader's reach — it cannot tell which, so it is shown as "Not
+ * found", never as "Deleted", with the id itself in its tooltip.
+ */
+export class NotFoundRelation {
+  constructor(readonly id: string) {}
+}
+
+/** The ids of a read that its rows do not answer. */
+export function notFoundRelationIds(
+  source: DataTypeSelectSource,
+  ids: string[],
+  rows: RelationRow[],
+): string[] {
+  const answered = new Set(
+    rows.map((row) => String(relationRowValue(source, row))),
+  );
+  return ids.filter((id) => !answered.has(id));
+}
+
 /**
  * Reads the rows of a relation's ids from its `select` route, narrowed with
  * `?ids=` to those rows alone (matched on the mapped value key), whatever the
  * route's page size. The one way the picker, the filter chips and the
  * read-only lists name the ids they hold. A failed read answers no rows: the
- * ids then show as they are.
+ * ids then show as not found, as a row out of the reader's reach does.
  */
 export function useRelationRows() {
   const { $authFetch } = useAuthFetch();

package/frontend-vue/layers/dms-ui/app/build/composables/form/formRecordLoad.ts

@@ -1,15 +1,19 @@
 import { type Ref, ref, watch } from "vue";
 import { apiErrorStatus } from "#dms-core/app/composables/useFieldErrors";
-import { HTTP_FORBIDDEN } from "#dms-core/app/utils/http-status";
+import {
+  HTTP_FORBIDDEN,
+  HTTP_NOT_FOUND,
+} from "#dms-core/app/utils/http-status";
 
 /**
  * Why a form could not load the record it edits: `forbidden` when the server
  * refused the caller the read (a role that may edit rows but not view them),
  * `missing` when its address lacks the record's id (a page reached without
- * its `?id=`), `error` for anything else (a network failure, a server error,
- * a row gone).
+ * its `?id=`), `not_found` when the server answered 404 (the record was
+ * deleted, or never existed), `error` for anything else (a network failure,
+ * a server error).
  */
-export type FormLoadFailure = "forbidden" | "missing" | "error";
+export type FormLoadFailure = "forbidden" | "missing" | "not_found" | "error";
 
 /** What a form knows of the record it is about, as far as `missing` goes. */
 export interface FormRecordAddress {
@@ -51,7 +55,9 @@ export interface FormRecordLoad {
 /** The failure a load error stands for; `null` when there is none. */
 export function formLoadFailure(error: unknown): FormLoadFailure | null {
   if (!error) return null;
-  return apiErrorStatus(error) === HTTP_FORBIDDEN ? "forbidden" : "error";
+  const status = apiErrorStatus(error);
+  if (status === HTTP_FORBIDDEN) return "forbidden";
+  return status === HTTP_NOT_FOUND ? "not_found" : "error";
 }
 
 /** How a form takes the answers of its record's later reads. */

package/frontend-vue/layers/dms-ui/app/build/composables/form/formValidation.ts

@@ -22,6 +22,11 @@ export interface FormValidationField {
   type?: string;
   /** Holds one value per content language. */
   localized?: boolean;
+  /**
+   * The language a localized field falls back to: required as soon as the
+   * field holds any language, and where its required error goes.
+   */
+  fallbackLocale?: string;
   /** A box to tick: unticked, it is missing. */
   acceptance?: boolean;
   /**
@@ -63,6 +68,32 @@ function issueField(issue: { path: PropertyKey[] }): PropertyKey | undefined {
   return issue.path[0];
 }
 
+/** Whether a localized value fills some language but not its fallback one. */
+function lacksFallbackLocale(
+  field: FormValidationField,
+  value: unknown,
+): boolean {
+  if (!field.localized || !field.fallbackLocale) return false;
+  if (typeof value !== "object" || value === null) return false;
+  const languages = value as Record<string, unknown>;
+  const isAnyFilled = Object.values(languages).some(
+    (text) => !isBlankValue(text, field.type),
+  );
+  return (
+    isAnyFilled && isBlankValue(languages[field.fallbackLocale], field.type)
+  );
+}
+
+/** Where a localized field's required error goes: the language to fill. */
+function requiredPath(
+  field: FormValidationField,
+  locale: string | undefined,
+): PropertyKey[] {
+  if (!field.localized) return [field.id];
+  const language = field.fallbackLocale ?? locale;
+  return language ? [field.id, language] : [field.id];
+}
+
 /** An issue saying the value is not of a branch's type at all. */
 function isTypeMismatch(issue: z.ZodIssue, path: PropertyKey[]): boolean {
   return issue.code === "invalid_type" && issue.path.length === path.length;
@@ -117,6 +148,10 @@ export async function validateFormState(
   for (const field of context.fields) {
     const value = state[field.id];
     if (reported.has(field.id)) continue;
+    if (lacksFallbackLocale(field, value)) {
+      missing.add(field.id);
+      continue;
+    }
     const isBlank = field.acceptance
       ? value !== true
       : isBlankValue(value, field.type);
@@ -159,10 +194,7 @@ export async function validateFormState(
     if (!missing.has(field.id)) continue;
     issues.push({
       message: context.requiredMessage,
-      path:
-        field.localized && context.locale
-          ? [field.id, context.locale]
-          : [field.id],
+      path: requiredPath(field, context.locale),
     });
   }
 

package/frontend-vue/layers/dms-ui/app/build/composables/form/repeaterTable.ts

@@ -3,6 +3,7 @@ import type {
   DataTypeSelectSource,
 } from "#dms-core/app/composables/data-types/useDataType";
 import type { RenderableColumn } from "../data-types/useColumnValueRenderer";
+import { NotFoundRelation } from "../data-types/relationRows";
 
 /** A column of a read-only list: a field of its rows. */
 export interface RepeaterTableColumn {
@@ -49,17 +50,29 @@ export function relationLabelSource(
   return source ? { ...source, multiple: !!options?.multiple } : undefined;
 }
 
+/** The rows a relation column's read answered, by value, and the ids it asked. */
+export interface RelationColumnRows {
+  rowsByValue: ReadonlyMap<unknown, Record<string, unknown>>;
+  readIds: ReadonlySet<string>;
+}
+
 /**
  * A relation value as its formatter draws it: the related row in place of
- * each id it holds. An id no row matches (a deleted one) stays as it is; a
- * value the server already joined is kept.
+ * each id it holds. An id the read asked for and no row answers (deleted, out
+ * of reach) is not found; one not asked yet stays as it is, as does a value
+ * the server already joined.
  */
 export function joinRelationValue(
   value: unknown,
-  rowsByValue: ReadonlyMap<unknown, Record<string, unknown>>,
+  { rowsByValue, readIds }: RelationColumnRows,
   multiple: boolean,
 ): unknown {
-  const join = (item: unknown) => rowsByValue.get(item) ?? item;
+  const join = (item: unknown) => {
+    const row = rowsByValue.get(item);
+    if (row) return row;
+    const id = String(item);
+    return readIds.has(id) ? new NotFoundRelation(id) : item;
+  };
   if (multiple && Array.isArray(value)) return value.map(join);
   return join(value);
 }

package/frontend-vue/layers/dms-ui/app/build/composables/table/useRelationFilterLabels.ts

@@ -2,6 +2,7 @@ import { onMounted, shallowRef, watch } from "vue";
 import type { DataTypeSelectSource } from "#dms-core/app/composables/data-types/useDataType";
 import { unlabeledRelationIds } from "../data-types/relationValue";
 import {
+  notFoundRelationIds,
   relationRowLabel,
   relationRowValue,
   useRelationRows,
@@ -18,15 +19,24 @@ const labelKey = (searchUrl: string, id: string) => `${searchUrl}\n${id}`;
 const NO_LABELS: ReadonlySet<string> = new Set();
 const idsOf = (value: unknown) => unlabeledRelationIds(value, NO_LABELS);
 
+/** How a chip names one id of a relation filter. */
+export interface RelationFilterLabel {
+  label: string;
+  /** The id of a row the route did not answer, shown on hover. */
+  notFoundId?: string;
+}
+
 /**
  * The labels of the ids a table's relation filters hold: a chip names the
  * related row ("Acme"), not the raw id it filters on ("cust-060"). Each id is
  * read once from the relation's `select` route, as its picker does; an id the
- * route does not answer (deleted, out of reach) keeps showing as is.
+ * route does not answer (deleted, out of reach) is named "Not found".
  */
 export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
   const { readRelationRows } = useRelationRows();
+  const { t } = useI18n();
   const labels = shallowRef<Record<string, string>>({});
+  const notFound = shallowRef<ReadonlySet<string>>(new Set());
   const requested = new Set<string>();
 
   async function loadLabels(source: RelationFilterSource, ids: string[]) {
@@ -42,6 +52,13 @@ export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
     if (Object.keys(found).length) {
       labels.value = { ...labels.value, ...found };
     }
+    const missing = notFoundRelationIds(source, ids, rows);
+    if (missing.length) {
+      notFound.value = new Set([
+        ...notFound.value,
+        ...missing.map((id) => labelKey(source.searchUrl, id)),
+      ]);
+    }
   }
 
   const pending = () =>
@@ -63,11 +80,18 @@ export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
     );
   });
 
-  /** The labels of a relation filter's ids, in order; an unknown id as is. */
-  const labelsOf = (source: RelationFilterSource): string[] =>
-    idsOf(source.value).map(
-      (id) => labels.value[labelKey(source.searchUrl, id)] ?? id,
-    );
+  /**
+   * The labels of a relation filter's ids, in order: an id not read yet as
+   * is, one the route did not answer as "Not found".
+   */
+  const labelsOf = (source: RelationFilterSource): RelationFilterLabel[] =>
+    idsOf(source.value).map((id) => {
+      const key = labelKey(source.searchUrl, id);
+      if (notFound.value.has(key)) {
+        return { label: t("dms.form.relation.not_found"), notFoundId: id };
+      }
+      return { label: labels.value[key] ?? id };
+    });
 
   return { labelsOf };
 }

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewRowActions.ts

@@ -5,7 +5,10 @@ import {
   type FormPageUrls,
 } from "./useTableViewConfig";
 import type { FormProps } from "../../../composables/form/types";
-import type { QueryParamFilters } from "../../../composables/table-view/types";
+import type {
+  QueryParamFilters,
+  TableViewColumn,
+} from "../../../composables/table-view/types";
 import type { LocationQuery, LocationQueryValue } from "#dms/frontend-module";
 import {
   TableRowAction,
@@ -33,7 +36,7 @@ import {
   type BulkActionOutcome,
   type ConfirmedBulkAction,
 } from "./utils/bulkActions";
-import { resolveActionError } from "../confirm/actionError";
+import { describeTableWriteError } from "./utils/writeError";
 import {
   ConfirmActionError,
   type ConfirmOptions,
@@ -59,6 +62,8 @@ const getItemId = (
 interface TableRowActionsConfig {
   api: ReturnType<typeof $fetch.create>;
   location: string;
+  /** The columns, whose labels name the fields a refused write lacks. */
+  columns: ReadonlyArray<Pick<TableViewColumn, "accessorKey" | "header">>;
   caption?: string;
   labelKey?: string;
   rowIdKey?: string;
@@ -146,7 +151,12 @@ export const useTableRowActions = <T extends Data>(
       color: Color.error,
       icon: "i-ph-warning-circle",
       title: title || t("dms.form.error_title"),
-      description: resolveActionError(error, t),
+      description: describeTableWriteError(
+        error,
+        t,
+        config.columns,
+        processI18n,
+      ),
     });
   };
 

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/writeError.ts

@@ -0,0 +1,21 @@
+import type { I18nTranslate } from "#dms-core/app/composables/translation/useTranslation";
+import type { TableViewColumn } from "../../../../composables/table-view/types/column";
+import { resolveActionError } from "../../confirm/actionError";
+
+/**
+ * Why a table view's write failed (a card moved on the board, a row moved
+ * by hand, a row action), for its toast: the server's reason, a field the
+ * data API refused named by its column's label ("Loss reason is
+ * required."). Never the raw ofetch error line.
+ */
+export function describeTableWriteError(
+  error: unknown,
+  translate: I18nTranslate,
+  columns: ReadonlyArray<Pick<TableViewColumn, "accessorKey" | "header">>,
+  processI18n: (text: string) => string,
+): string {
+  return resolveActionError(error, translate, (field) => {
+    const column = columns.find((entry) => entry.accessorKey === field);
+    return column ? processI18n(column.header) : undefined;
+  });
+}

package/frontend-vue/layers/dms-ui/app/build/utils/codeHighlight.ts

@@ -1,19 +1,17 @@
-// Read-only highlighting: the code parsed by the editor's own CodeMirror
-// languages and cut into styled tokens, without mounting an editor. Loaded on
-// demand, like the editor: a page only pays for the parsers once it shows
-// code.
-import { htmlLanguage } from "@codemirror/lang-html";
-import {
-  javascriptLanguage,
-  typescriptLanguage,
-} from "@codemirror/lang-javascript";
-import { jsonLanguage } from "@codemirror/lang-json";
-import { StandardSQL } from "@codemirror/lang-sql";
-import { StreamLanguage } from "@codemirror/language";
+// Read-only highlighting: the code parsed by the grammars the editor's
+// CodeMirror languages are built on, and cut into styled tokens, without
+// mounting an editor. Each language's grammar loads on demand and alone: a
+// snippet needs neither the editor's view nor its state, which would triple
+// what a page showing a JSON payload downloads. SQL is the exception: its
+// grammar only ships inside `@codemirror/lang-sql`.
 import type { Parser } from "@lezer/common";
-import { highlightTree, tagHighlighter } from "@lezer/highlight";
+import {
+  type Highlighter,
+  highlightTree,
+  tagHighlighter,
+} from "@lezer/highlight";
 import { CODE_PALETTE, type CodeTokenStyle } from "./codePalette";
-import { shellParser } from "./shellParser";
+import type { HighlightedRange } from "./streamHighlight";
 
 /** A run of code drawn in one style; unstyled text has no `style`. */
 export interface CodeToken {
@@ -21,13 +19,42 @@ export interface CodeToken {
   style?: CodeTokenStyle;
 }
 
-const PARSERS: Record<string, Parser> = {
-  json: jsonLanguage.parser,
-  javascript: javascriptLanguage.parser,
-  typescript: typescriptLanguage.parser,
-  html: htmlLanguage.parser,
-  sql: StandardSQL.language.parser,
-  shell: StreamLanguage.define(shellParser).parser,
+/** Cuts code of the language it was loaded for into tokens. */
+export type CodeHighlighter = (code: string) => CodeToken[];
+
+/** Calls `put` for each styled range of `code`, in order. */
+type RangeReader = (
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+) => void;
+
+const readWith =
+  (parser: Parser): RangeReader =>
+  (code, highlighter, put) =>
+    highlightTree(parser.parse(code), highlighter, put);
+
+// One dynamic import per language, so a page loads the grammar it shows.
+const READERS: Record<string, () => Promise<RangeReader>> = {
+  json: async () => readWith((await import("@lezer/json")).parser),
+  javascript: async () => readWith((await import("@lezer/javascript")).parser),
+  typescript: async () =>
+    readWith(
+      (await import("@lezer/javascript")).parser.configure({ dialect: "ts" }),
+    ),
+  html: async () => readWith((await import("./htmlGrammar")).htmlParser),
+  sql: async () =>
+    readWith(
+      (await import("@codemirror/lang-sql")).StandardSQL.language.parser,
+    ),
+  shell: async () => {
+    const [{ highlightStream }, { shellParser }] = await Promise.all([
+      import("./streamHighlight"),
+      import("./shellParser"),
+    ]);
+    return (code, highlighter, put) =>
+      highlightStream(shellParser, code, highlighter, put);
+  },
 };
 
 // Each palette entry's position is its class, read back into its style.
@@ -40,16 +67,11 @@ function styleOf(classes: string): CodeTokenStyle {
   return { color, fontStyle };
 }
 
-/**
- * Cuts `code` into tokens styled for `language` (a resolved name, see
- * `resolveCodeLanguage`); a language without a parser is one plain token.
- */
-export function highlightCode(code: string, language: string): CodeToken[] {
-  const parser = PARSERS[language];
-  if (!parser || !code) return [{ text: code }];
+function tokensOf(code: string, read: RangeReader): CodeToken[] {
+  if (!code) return [{ text: code }];
   const tokens: CodeToken[] = [];
   let cursor = 0;
-  highlightTree(parser.parse(code), HIGHLIGHTER, (from, to, classes) => {
+  read(code, HIGHLIGHTER, (from, to, classes) => {
     if (from > cursor) tokens.push({ text: code.slice(cursor, from) });
     tokens.push({ text: code.slice(from, to), style: styleOf(classes) });
     cursor = to;
@@ -57,3 +79,19 @@ export function highlightCode(code: string, language: string): CodeToken[] {
   if (cursor < code.length) tokens.push({ text: code.slice(cursor) });
   return tokens;
 }
+
+const plain: CodeHighlighter = (code) => [{ text: code }];
+
+/**
+ * Loads the grammar of `language` (a resolved name, see
+ * `resolveCodeLanguage`) and resolves to what cuts its code into styled
+ * tokens; a language without a grammar shows each code as one plain token.
+ */
+export async function loadCodeHighlighter(
+  language: string,
+): Promise<CodeHighlighter> {
+  const load = READERS[language];
+  if (!load) return plain;
+  const read = await load();
+  return (code) => tokensOf(code, read);
+}

package/frontend-vue/layers/dms-ui/app/build/utils/htmlGrammar.ts

@@ -0,0 +1,79 @@
+// HTML as the editor's language reads it (`@codemirror/lang-html`): scripts,
+// styles, `style` attributes and event handlers parsed in their own
+// languages, from the lezer grammars alone. The nesting mirrors lang-html's
+// defaults, so a snippet colours HTML exactly like the editor. A module of its
+// own because HTML is the one grammar composed of others.
+import { parser as cssParser } from "@lezer/css";
+import { configureNesting, parser } from "@lezer/html";
+import { parser as javascriptParser } from "@lezer/javascript";
+
+// What lezer read of a tag's attributes; an absent one is undefined.
+type Attributes = Readonly<Record<string, string | undefined>>;
+
+const typescriptParser = javascriptParser.configure({ dialect: "ts" });
+// A JSON script holds one value, read as JavaScript reads it.
+const jsonScriptParser = javascriptParser.configure({
+  top: "SingleExpression",
+});
+
+const JSON_SCRIPT_TYPE =
+  /^(importmap|speculationrules|application\/(.+\+)?json)$/i;
+const JAVASCRIPT_TYPE =
+  /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i;
+const CSS_TYPE = /^(text\/)?(x-)?(stylesheet|css)$/i;
+
+const NESTED_TAGS = [
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/typescript" || attrs.lang === "ts",
+    parser: typescriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/babel" || attrs.type === "text/jsx",
+    parser: javascriptParser.configure({ dialect: "jsx" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => attrs.type === "text/typescript-jsx",
+    parser: javascriptParser.configure({ dialect: "jsx ts" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => JSON_SCRIPT_TYPE.test(attrs.type ?? ""),
+    parser: jsonScriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      !attrs.type || JAVASCRIPT_TYPE.test(attrs.type),
+    parser: javascriptParser,
+  },
+  {
+    tag: "style",
+    attrs: (attrs: Attributes) =>
+      (!attrs.lang || attrs.lang === "css") &&
+      (!attrs.type || CSS_TYPE.test(attrs.type)),
+    parser: cssParser,
+  },
+];
+
+const EVENT_ATTRIBUTES = (
+  "beforeunload copy cut dragstart dragover dragleave dragenter dragend " +
+  "drag paste focus blur change click load mousedown mouseenter mouseleave " +
+  "mouseup keydown keyup resize scroll unload"
+)
+  .split(" ")
+  .map((name) => `on${name}`);
+
+const NESTED_ATTRIBUTES = [
+  { name: "style", parser: cssParser.configure({ top: "Styles" }) },
+  ...EVENT_ATTRIBUTES.map((name) => ({ name, parser: javascriptParser })),
+];
+
+/** The HTML grammar, with its embedded languages. */
+export const htmlParser = parser.configure({
+  wrap: configureNesting(NESTED_TAGS, NESTED_ATTRIBUTES),
+});

package/frontend-vue/layers/dms-ui/app/build/utils/shellParser.ts

@@ -1,4 +1,4 @@
-import type { StreamParser, StringStream } from "@codemirror/language";
+import type { StreamParser, StringStream } from "@codemirror/streamparser";
 
 // A shell snippet as read for highlighting only: the command of each
 // pipeline step, its flags, quoted strings, variables and comments.