@threadlabs/looma 0.28.8 → 0.28.10

package/components/ui-editor-code-language/ui-editor-code-language.html

@@ -0,0 +1,17 @@
+<link rel="component" href="../ui-combobox/ui-combobox.html">
+<template component="ui-editor-code-language" controller="./ui-editor-code-language.js">
+  <defs>
+    <prop name="value" type="string" default="auto">The code block's language, or auto to detect it.</prop>
+    <prop name="languages" type="list(object({ value: string, label: string }))" default="[]"
+    >The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.</prop>
+    <event name="language" type="object">
+      <prop name="value" required type="string"></prop>
+      A language was chosen, or auto.
+    </event>
+  </defs>
+  <div>
+    <ui-combobox label="Code language" label-visibility="sr-only" size="sm" from:disclosure="true" filter="label" from:value="$value">
+      <option $each="language of $languages" $key="$language.value" from:value="$language.value">{$language.label}</option>
+    </ui-combobox>
+  </div>
+</template>

package/components/ui-editor-code-language/ui-editor-code-language.js

@@ -0,0 +1,14 @@
+// Reports a chosen language; typing a filter is not a choice.
+function connect(host) {
+  const element = host.element;
+  const onValueChange = (event) => {
+    if (event.target !== element && event.detail?.kind === "selection" && event.detail.value) host.dispatch("language", { value: event.detail.value });
+  };
+  element.addEventListener("value-change", onValueChange);
+  return () => element.removeEventListener("value-change", onValueChange);
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}