@threadlabs/looma 0.28.8 → 0.28.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.8",
+  "version": "0.28.9",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-editor-code-language.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */

package/vanilla/UiEditorCodeLanguage.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+export interface UiEditorCodeLanguageEventMap {
+  language: CustomEvent<{ readonly value: string }>;
+}
+export interface UiEditorCodeLanguageElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorCodeLanguageEventMap>(type: K, listener: (this: UiEditorCodeLanguageElement, event: UiEditorCodeLanguageEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorCodeLanguageEventMap>(type: K, listener: (this: UiEditorCodeLanguageElement, event: UiEditorCodeLanguageEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorCodeLanguageProps {
+  languages?: readonly ({ readonly value: string; readonly label: string })[] | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorCodeLanguage(props?: UiEditorCodeLanguageProps): UiEditorCodeLanguageElement;

package/vanilla/UiEditorCodeLanguage.js

@@ -0,0 +1,64 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, KeyedList, readMember, toAttribute, toText, trackContainer, writeAttribute, dispatchDeclared, detailCheck, acceptProps, manageProps, checkList, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-editor-code-language/ui-editor-code-language.js";
+import "../styles/ui-editor-code-language.css";
+
+const T0 = ["",[],["ui-combobox",["label","Code language","label-visibility","sr-only","size","sm","filter","label"],2]];
+const T1 = ["option",[],0];
+let P0, P1;
+const E = new Map();
+const S = { n: [], t: [], f: import.meta.url, g: "ui-editor-code-language", d: { "language": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "languages": { "required":false,"default":[], c: checkList(checkObject([["value", checkString, false], ["label", checkString, false]], false)), j: 1, m: ["l",["o",["value","s","label","s"]]] }, "value": { "required":false,"default":"auto", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
+
+export function createUiEditorCodeLanguage(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-code-language");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, w: 0, v0: null, v1: "" };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "value"));
+      const s0 = toAttribute(x0, "value");
+      if (s0 !== r.v0) writeAttribute(r.n, "value", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "label"));
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.a1.data = r.v1 = s1;
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c === -1) {
+      const x0 = true;
+      const s0 = toAttribute(x0, "disclosure");
+      if (s0 !== r.v0) writeAttribute(r.a0, "disclosure", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toAttribute(x1, "value");
+      if (s1 !== r.v1) writeAttribute(r.a0, "value", r.v1 = s1);
+    }
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const R = { a0: t0, v0: null, v1: null, L0: new KeyedList(t1, t1.nextSibling, m1, p1, (o) => readMember(o, "value"), "language") };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
+  return element;
+}

package/vanilla/index.js

@@ -20,6 +20,7 @@ export * from "./UiDialog.js";
 export * from "./UiDisclosure.js";
 export * from "./UiEditable.js";
 export * from "./UiEditorBlockActions.js";
+export * from "./UiEditorCodeLanguage.js";
 export * from "./UiEditorImageToolbar.js";
 export * from "./UiEditorInsertTableGrid.js";
 export * from "./UiEditorLinkCard.js";

package/vue/UiEditorCodeLanguage.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    languages: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    language: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    languages: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    onLanguage?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+}>, {
+    value: string | null;
+    languages: readonly {
+        readonly value: string;
+        readonly label: string;
+    }[] | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorCodeLanguage.js

@@ -0,0 +1,2 @@
+import { t as UiEditorCodeLanguage_default } from "./chunks/UiEditorCodeLanguage.js";
+export { UiEditorCodeLanguage_default as default };

package/vue/UiEditorCodeLanguage.vue

@@ -0,0 +1,156 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiCombobox from './UiCombobox.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    languages: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+            name: 'label',
+            type: { kind: 'terminal', name: 'string' },
+            optional: false,
+          }],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'languages' },
+      description:
+        'The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.',
+      default: [],
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The code block\'s language, or auto to detect it.',
+      default: 'auto',
+    },
+  },
+} as const
+const props = defineProps({
+  languages: {
+    type: null as unknown as PropType<
+      readonly ({ readonly value: string; readonly label: string })[] | null
+    >,
+    default: () => [],
+  },
+  value: { type: null as unknown as PropType<string | null>, default: 'auto' },
+})
+const acceptedProps: Record<string, unknown> = { languages: () => [], value: 'auto' }
+const checkedProps = computed(() => ({
+  languages: checkedProp<readonly ({ readonly value: string; readonly label: string })[]>(
+    props['languages'],
+    {
+      kind: 'list',
+      item: {
+        kind: 'object',
+        fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+          name: 'label',
+          type: { kind: 'terminal', name: 'string' },
+          optional: false,
+        }],
+        open: false,
+      },
+    },
+    false,
+    'languages',
+    acceptedProps,
+  ) as readonly ({ readonly value: string; readonly label: string })[],
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:value': [value: string]
+  language: [event: CustomEvent<{ readonly value: string }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+checkHydratedRoot('div', 'ui-editor-code-language')
+
+const isLanguageDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    language: isLanguageDetail,
+  },
+  modeled: ['value'],
+})
+
+useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-code-language.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-editor-code-language/ui-editor-code-language.js',
+    definition: './components/ui-editor-code-language/ui-editor-code-language.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['languages', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
+</script>
+
+<template>
+  <div
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-languages="reflectedProp('languages', 'languages', checkedProps.languages, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    ref="root"
+  >
+    <UiCombobox
+      label="Code language"
+      label-visibility="sr-only"
+      size="sm"
+      filter="label"
+      :disclosure="true"
+      :value="checkedProps.value"
+    ><KeyedBoundary><option
+          v-for="language in uniqueKeys(checkedProps.languages, (language, index, loop) => language.value)"
+          :key="language.value"
+          :value="language.value"
+        >
+          {{ language.label }}
+        </option></KeyedBoundary></UiCombobox>
+  </div>
+</template>

package/vue/chunks/UiEditorCodeLanguage.js

@@ -0,0 +1,163 @@
+import { _ as uniqueKeys, i as checkHydratedRoot, n as KeyedBoundary, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./props.js";
+import { t as UiCombobox_default } from "./UiCombobox.js";
+import { Fragment, computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorCodeLanguage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-languages", "data-value"];
+var _hoisted_2 = ["value"];
+//#endregion
+//#region .build/vue/UiEditorCodeLanguage.vue
+var UiEditorCodeLanguage_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorCodeLanguage",
+	props: {
+		languages: {
+			type: null,
+			default: () => []
+		},
+		value: {
+			type: null,
+			default: "auto"
+		}
+	},
+	emits: ["update:value", "language"],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			languages: {
+				type: {
+					kind: "list",
+					item: {
+						kind: "object",
+						fields: [{
+							name: "value",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}, {
+							name: "label",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}],
+						open: false
+					}
+				},
+				required: false,
+				target: { attribute: "languages" },
+				description: "The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.",
+				default: []
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The code block's language, or auto to detect it.",
+				default: "auto"
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			languages: () => [],
+			value: "auto"
+		};
+		const checkedProps = computed(() => ({
+			languages: checkedProp(props["languages"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [{
+						name: "value",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}, {
+						name: "label",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}],
+					open: false
+				}
+			}, false, "languages", acceptedProps),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		checkHydratedRoot("div", "ui-editor-code-language");
+		const isLanguageDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["value"].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { language: isLanguageDetail },
+			modeled: ["value"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-code-language/ui-editor-code-language.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-editor-code-language/ui-editor-code-language.js",
+				definition: "./components/ui-editor-code-language/ui-editor-code-language.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["languages", "value"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(nativeAttrs)(_ctx.$attrs), {
+				"data-languages": unref(reflectedProp)("languages", "languages", checkedProps.value.languages, void 0, false),
+				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiCombobox_default, {
+				label: "Code language",
+				"label-visibility": "sr-only",
+				size: "sm",
+				filter: "label",
+				disclosure: true,
+				value: checkedProps.value.value
+			}, {
+				default: withCtx(() => [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(uniqueKeys)(checkedProps.value.languages, (language, index, loop) => language.value), (language) => {
+						return openBlock(), createElementBlock("option", {
+							key: language.value,
+							value: language.value
+						}, toDisplayString(language.label), 9, _hoisted_2);
+					}), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorCodeLanguage_default as t };

package/vue/editor/index.js

@@ -1,6 +1,6 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, siteRelativeHref } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
@@ -25,7 +25,8 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorImageToolbar: "ui-editor-image-toolbar",
 	EditorLinkCard: "ui-editor-link-card",
 	EditorLinkForm: "ui-editor-link-form",
-	EditorBlockActions: "ui-editor-block-actions"
+	EditorBlockActions: "ui-editor-block-actions",
+	EditorCodeLanguage: "ui-editor-code-language"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -3194,10 +3195,10 @@ var LoomaEditor = defineComponent({
 				}))
 			];
 		});
-		const chooseCodeLanguage = (detail) => {
+		const chooseCodeLanguage = (value) => {
 			const instance = editor.value;
-			if (!instance || detail.kind !== "selection" || !detail.value) return;
-			const language = detail.value === "auto" ? null : detail.value;
+			if (!instance) return;
+			const language = value === "auto" ? null : value;
 			if (language !== null && !codeLanguageNames.includes(language)) return;
 			const node = instance.state.doc.nodeAt(codeUi.pos);
 			if (node?.type.name !== "codeBlock") return;
@@ -4049,15 +4050,11 @@ var LoomaEditor = defineComponent({
 					class: "looma-editor__code-language",
 					style: codeUi.style,
 					onFocusout: () => updateCodeUi()
-				}, [h(Combobox, {
-					label: "Code language",
-					labelVisibility: "sr-only",
-					size: "sm",
-					disclosure: true,
-					filter: "label",
+				}, [h(EditorCodeLanguage, {
 					value: codeUi.language,
-					onValueChange: (event) => chooseCodeLanguage(event.detail)
-				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
+					languages: codeLanguageOptions.value,
+					onLanguage: (event) => chooseCodeLanguage(event.detail.value)
+				})]) : null,
 				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
 					key: "looma-mobile-toolbar-shell",
 					ref: mobileToolbarRef,
@@ -4310,4 +4307,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };

package/vue/editor/primitives.d.ts

@@ -3,7 +3,7 @@
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
 import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
-export { EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
+export { EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
 /** The editor components' event details, by event name. */
 export interface VueEditorAdapterEventMap {
     highlight: MentionMenuHighlightEventDetail | SlashMenuHighlightEventDetail;
@@ -36,6 +36,9 @@ export interface VueEditorAdapterEventMap {
     clear: Record<string, never>;
     save: Record<string, never>;
     dismiss: Record<string, never>;
+    language: {
+        value: string;
+    };
     "add-row-before": {
         boundaryIndex: number;
     };
@@ -103,4 +106,5 @@ export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorLinkCard: "ui-editor-link-card";
     readonly EditorLinkForm: "ui-editor-link-form";
     readonly EditorBlockActions: "ui-editor-block-actions";
+    readonly EditorCodeLanguage: "ui-editor-code-language";
 };

package/vue/index.d.ts

@@ -20,6 +20,7 @@ export { default as Dialog } from "./UiDialog.js";
 export { default as Disclosure } from "./UiDisclosure.js";
 export { default as Editable } from "./UiEditable.js";
 export { default as EditorBlockActions } from "./UiEditorBlockActions.js";
+export { default as EditorCodeLanguage } from "./UiEditorCodeLanguage.js";
 export { default as EditorImageToolbar } from "./UiEditorImageToolbar.js";
 export { default as EditorInsertTableGrid } from "./UiEditorInsertTableGrid.js";
 export { default as EditorLinkCard } from "./UiEditorLinkCard.js";

package/vue/index.js

@@ -26,6 +26,7 @@ import { t as UiEditable_default } from "./chunks/UiEditable.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 import { t as UiEditorBlockActions_default } from "./chunks/UiEditorBlockActions.js";
+import { t as UiEditorCodeLanguage_default } from "./chunks/UiEditorCodeLanguage.js";
 import { t as UiEditorToolbar_default } from "./chunks/UiEditorToolbar.js";
 import { t as UiFormField_default } from "./chunks/UiFormField.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
@@ -78,4 +79,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };