@k2b/ui 0.1.0-rc.0

package/dist/browser/inputs/markdown/MarkdownEditor.js

@@ -0,0 +1,725 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-markdown-editor__tool tabindex=-1><i aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor__placeholder aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor__stats aria-hidden=true><span><!$><!/> <!$><!/></span><span><!$><!/> <!$><!/></span><span><!$><!/> <!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i>Loading suggestions`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div popover=manual class=k2b-autocomplete__options role=presentation><div class=k2b-autocomplete__listbox role=listbox><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor role=group><!$><!/><div class=k2b-markdown-editor__surface><!$><!/><div class=k2b-markdown-editor__preview aria-hidden=true></div><textarea class=k2b-markdown-editor__input></textarea></div><!$><!/><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status data-error=true role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><button type=button>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__option role=option><span></span><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<small>`);
+import { highlight } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../../internal/field";
+import { useUiMessages } from "../../intl/messages";
+import { abbreviations as abbreviationsCompletion, buildSuggestContext, collectKnownLabels, createCompletionBehaviorState, detectQuery, displayLabel, renderWithOverlay, resolveSuggestions } from "../completion";
+import { resolveMaybeAccessor } from "../field-contract";
+import { computeActiveFormats } from "./active-formats";
+import { handleListContinuation, handleShortcut, handleSmartPaste } from "./behaviors";
+import { isInCodeZone } from "./code-zone";
+import Toolbar from "./Toolbar";
+export function MarkdownEditor(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  let textarea;
+  let preview;
+  let dropdown;
+  let completionAbort = null;
+  let completionTimer = null;
+  let overlayFrame;
+  let overlayInitialized = false;
+  let renderPendingOverlay;
+  const completionBehavior = createCompletionBehaviorState();
+  const [textareaSignal, setTextareaSignal] = createSignal(null);
+  const [activeFormats, setActiveFormats] = createSignal(new Set());
+  const [composing, setComposing] = createSignal(false);
+  const [localValue, setLocalValue] = createSignal(resolveMaybeAccessor(props.value) ?? "");
+  const error = () => resolveMaybeAccessor(props.error);
+  const [state, setState] = createSignal(null);
+  const [loading, setLoading] = createSignal(false);
+  const [completionError, setCompletionError] = createSignal(null);
+  const [dropdownOpen, setDropdownOpen] = createSignal(false);
+  const completionId = createUniqueId();
+  const listboxId = `${meta.controlId}-${completionId}-suggestions`;
+  const optionId = index => `${listboxId}-${index}`;
+  const activeSuggestion = () => {
+    const current = state();
+    return current?.suggestions[current.selectedIndex] ?? null;
+  };
+  const mergedCompletions = createMemo(() => {
+    const merged = [];
+    if (props.abbreviations && Object.keys(props.abbreviations).length > 0) {
+      merged.push(abbreviationsCompletion(props.abbreviations));
+    }
+    if (props.completions) merged.push(...props.completions);
+    return merged.length > 0 ? merged : undefined;
+  });
+  const knownLabels = createMemo(() => collectKnownLabels(mergedCompletions()));
+  createEffect(() => {
+    const incoming = resolveMaybeAccessor(props.value);
+    if (incoming !== undefined && incoming !== null && incoming !== untrack(localValue)) {
+      setLocalValue(incoming);
+    }
+  });
+  createEffect(() => {
+    const target = localValue();
+    if (!composing() && textarea && textarea.value !== target) {
+      textarea.value = target;
+    }
+  });
+  createEffect(() => {
+    if (!preview) return;
+    const value = localValue();
+    const labels = knownLabels();
+    const current = state();
+    const active = activeSuggestion();
+    const ghost = current && active ? {
+      at: current.context.end,
+      text: active.text.slice(current.context.text.length)
+    } : undefined;
+    const anchor = current && !ghost ? {
+      at: current.context.end
+    } : undefined;
+    renderPendingOverlay = () => {
+      if (!preview) return;
+      preview.innerHTML = renderWithOverlay(value, text => highlight.markdown(text, {
+        knownLabels: labels
+      }), {
+        ghost,
+        anchor
+      });
+      if (textarea) {
+        preview.scrollTop = textarea.scrollTop;
+        preview.scrollLeft = textarea.scrollLeft;
+      }
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    if (!overlayInitialized) {
+      overlayInitialized = true;
+      renderPendingOverlay();
+      renderPendingOverlay = undefined;
+      return;
+    }
+    if (overlayFrame !== undefined) return;
+    overlayFrame = requestAnimationFrame(() => {
+      overlayFrame = undefined;
+      const render = renderPendingOverlay;
+      renderPendingOverlay = undefined;
+      render?.();
+    });
+  });
+  const updateActiveFormats = () => {
+    if (textarea) setActiveFormats(computeActiveFormats(textarea));
+  };
+  const closeDropdown = () => {
+    if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+    setDropdownOpen(false);
+  };
+  const clearCompletion = () => {
+    completionAbort?.abort();
+    completionAbort = null;
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    setState(null);
+    setLoading(false);
+    setCompletionError(null);
+    closeDropdown();
+  };
+  const positionDropdown = () => {
+    if (!dropdown?.isConnected || !preview?.isConnected || !textarea?.isConnected) {
+      return;
+    }
+    const anchor = preview.querySelector("[data-completion-anchor]");
+    const rect = anchor?.getBoundingClientRect() ?? textarea.getBoundingClientRect();
+    const maxHeight = 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < maxHeight && rect.top > spaceBelow;
+    const width = Math.min(280, window.innerWidth - 16);
+    const left = Math.min(rect.left, window.innerWidth - width - 8);
+    dropdown.style.setProperty("left", `${Math.max(8, left)}px`, "important");
+    dropdown.style.setProperty("width", `${width}px`, "important");
+    if (openAbove) {
+      dropdown.style.setProperty("top", "auto", "important");
+      dropdown.style.setProperty("bottom", `${window.innerHeight - rect.top + 4}px`, "important");
+    } else {
+      dropdown.style.setProperty("top", `${rect.bottom + 4}px`, "important");
+      dropdown.style.setProperty("bottom", "auto", "important");
+    }
+    if (!dropdown.matches(":popover-open")) dropdown.showPopover();
+  };
+  const isAbortError = error => error instanceof DOMException ? error.name === "AbortError" : Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
+  const applySuggestionList = (context, suggestions) => {
+    const value = localValue();
+    const normalized = context.text.toLowerCase();
+    const usable = suggestions.filter(suggestion => {
+      if (suggestion.textEdit) {
+        const {
+          start,
+          end,
+          text
+        } = suggestion.textEdit;
+        return Number.isInteger(start) && Number.isInteger(end) && start >= 0 && end >= start && end <= value.length && value.slice(start, end) !== text;
+      }
+      return suggestion.text.toLowerCase().startsWith(normalized) && suggestion.text.length > context.text.length;
+    });
+    if (usable.length === 0) {
+      setState(null);
+      closeDropdown();
+      return;
+    }
+    const previous = activeSuggestion()?.text;
+    const retained = previous ? usable.findIndex(suggestion => suggestion.text === previous) : -1;
+    setState({
+      context,
+      suggestions: usable,
+      selectedIndex: retained >= 0 ? retained : 0
+    });
+    if (context.completion.dropdown) {
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    } else {
+      closeDropdown();
+    }
+  };
+  const runAsyncCompletion = async (context, promise, signal) => {
+    try {
+      const suggestions = await promise;
+      if (signal.aborted) return;
+      setLoading(false);
+      applySuggestionList(context, suggestions);
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setState(null);
+      setCompletionError(error instanceof Error ? error.message : "Suggestions could not be loaded");
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const startCompletionResolution = (context, signal) => {
+    if (signal.aborted || !textarea) return;
+    setLoading(true);
+    setCompletionError(null);
+    setDropdownOpen(true);
+    queueMicrotask(positionDropdown);
+    try {
+      const result = resolveSuggestions(context.completion, context.query, buildSuggestContext(textarea, context), signal);
+      if (result.kind === "sync") {
+        setLoading(false);
+        applySuggestionList(context, result.data);
+      } else {
+        void runAsyncCompletion(context, result.promise, signal);
+      }
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setState(null);
+      setCompletionError(error instanceof Error ? error.message : "Suggestions could not be loaded");
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const recomputeCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    });
+    if (!context) {
+      clearCompletion();
+      return;
+    }
+    completionAbort?.abort();
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    completionAbort = new AbortController();
+    const current = state();
+    if (current && (current.context.start !== context.start || current.context.end !== context.end || current.context.text !== context.text || current.context.completion !== context.completion)) {
+      setState(null);
+      closeDropdown();
+    }
+    setCompletionError(null);
+    const delay = Math.max(0, context.completion.debounceMs ?? 0);
+    if (delay === 0) {
+      startCompletionResolution(context, completionAbort.signal);
+    } else {
+      setLoading(false);
+      if (!state()) closeDropdown();
+      const signal = completionAbort.signal;
+      completionTimer = setTimeout(() => {
+        completionTimer = null;
+        startCompletionResolution(context, signal);
+      }, delay);
+    }
+  };
+  const retryCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    });
+    if (!context) return clearCompletion();
+    completionAbort?.abort();
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    completionAbort = new AbortController();
+    startCompletionResolution(context, completionAbort.signal);
+  };
+  const activateSuggestion = (index = state()?.selectedIndex ?? -1) => {
+    const current = state();
+    const active = current?.suggestions[index];
+    if (!textarea || !current || !active) return false;
+    if (!active.textEdit && active.text === current.context.text) {
+      closeDropdown();
+      setState(null);
+      return false;
+    }
+    const applied = completionBehavior.applySuggestion(textarea, current.context, active);
+    closeDropdown();
+    setState(null);
+    return applied;
+  };
+  const moveSelection = direction => {
+    const current = state();
+    if (!current || current.suggestions.length === 0) return;
+    setState({
+      ...current,
+      selectedIndex: (current.selectedIndex + direction + current.suggestions.length) % current.suggestions.length
+    });
+  };
+  const stats = createMemo(() => {
+    const value = localValue();
+    return {
+      lines: value.length === 0 ? 0 : value.split("\n").length,
+      words: value.match(/\S+/g)?.length ?? 0,
+      chars: value.length
+    };
+  });
+  onMount(() => {
+    if (textarea) setTextareaSignal(textarea);
+    updateActiveFormats();
+    const selectionChange = () => {
+      if (document.activeElement === textarea) {
+        updateActiveFormats();
+        recomputeCompletion();
+      }
+    };
+    // Reposition an OPEN popover only. Calling `positionDropdown` blindly
+    // would `showPopover()` a dropdown that is deliberately closed (a
+    // ghost-only completion keeps state without a dropdown).
+    const reposition = () => {
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    document.addEventListener("selectionchange", selectionChange);
+    window.addEventListener("resize", reposition);
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", selectionChange);
+      window.removeEventListener("resize", reposition);
+      if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+      completionAbort?.abort();
+      if (completionTimer) clearTimeout(completionTimer);
+      if (overlayFrame !== undefined) cancelAnimationFrame(overlayFrame);
+      overlayFrame = undefined;
+      renderPendingOverlay = undefined;
+      completionBehavior.reset();
+    });
+  });
+  const onInput = event => {
+    if (completionBehavior.tryExpand(event.currentTarget, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    })) {
+      return;
+    }
+    setLocalValue(event.currentTarget.value);
+    props.onValueChange?.(event.currentTarget.value);
+    updateActiveFormats();
+    recomputeCompletion();
+  };
+  const onKeyDown = event => {
+    if (!textarea || event.isComposing) return;
+    if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && completionBehavior.tryRestore(textarea)) {
+      event.preventDefault();
+      return;
+    }
+    const current = state();
+    const dropdownCompletion = current?.context.completion.dropdown === true;
+    if (current && dropdownCompletion && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      moveSelection(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && current && dropdownCompletion && dropdownOpen()) {
+      event.preventDefault();
+      activateSuggestion();
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && current) {
+      event.preventDefault();
+      activateSuggestion();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (current) {
+        event.preventDefault();
+        closeDropdown();
+        setState(null);
+        return;
+      }
+      if ((mergedCompletions()?.length ?? 0) > 0) {
+        event.preventDefault();
+        textarea.blur();
+        return;
+      }
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && props.onSubmit) {
+      event.preventDefault();
+      props.onSubmit();
+      return;
+    }
+    if (handleShortcut(event, textarea)) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && handleListContinuation(textarea)) {
+      event.preventDefault();
+    }
+  };
+  const saveControls = () => [_$memo(() => props.toolbarTrailing), _$createComponent(Show, {
+    get when() {
+      return props.onSave;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$),
+        _el$2 = _el$.firstChild;
+      _el$.$$click = () => props.onSave?.();
+      _el$.$$mousedown = event => event.preventDefault();
+      _$effect(_p$ => {
+        var _v$ = messages().saveShortcut,
+          _v$2 = messages().save,
+          _v$3 = props.disabled || props.saveDisabled || props.saving,
+          _v$4 = props.saving ? "ti ti-loader-2 k2b-spin" : "ti ti-device-floppy";
+        _v$ !== _p$.e && _$setAttribute(_el$, "title", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setProperty(_el$, "disabled", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$className(_el$2, _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    }
+  })];
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get fill() {
+      return props.fill;
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      var _el$3 = _$getNextElement(_tmpl$6),
+        _el$36 = _el$3.firstChild,
+        [_el$37, _co$1] = _$getNextMarker(_el$36.nextSibling),
+        _el$4 = _el$37.nextSibling,
+        _el$8 = _el$4.firstChild,
+        [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+        _el$6 = _el$9.nextSibling,
+        _el$7 = _el$6.nextSibling,
+        _el$38 = _el$4.nextSibling,
+        [_el$39, _co$10] = _$getNextMarker(_el$38.nextSibling),
+        _el$40 = _el$39.nextSibling,
+        [_el$41, _co$11] = _$getNextMarker(_el$40.nextSibling);
+      _el$3.$$keydown = event => {
+        if (props.onSave && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+          event.preventDefault();
+          if (!props.saveDisabled && !props.saving) props.onSave();
+        }
+      };
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return !props.noToolbar;
+        },
+        get children() {
+          return _$createComponent(Toolbar, {
+            textarea: textareaSignal,
+            activeFormats: activeFormats,
+            get disabled() {
+              return props.disabled;
+            },
+            get trailing() {
+              return saveControls();
+            }
+          });
+        }
+      }), _el$37, _co$1);
+      _$insert(_el$4, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!localValue())() && props.placeholder;
+        },
+        get children() {
+          var _el$5 = _$getNextElement(_tmpl$2);
+          _$insert(_el$5, () => props.placeholder);
+          return _el$5;
+        }
+      }), _el$9, _co$);
+      var _ref$ = preview;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$6) : preview = _el$6;
+      _el$7.addEventListener("blur", event => {
+        const next = event.relatedTarget;
+        if (next && dropdown?.contains(next)) return;
+        completionBehavior.reset();
+        clearCompletion();
+      });
+      _el$7.addEventListener("compositionend", () => setComposing(false));
+      _el$7.addEventListener("compositionstart", () => setComposing(true));
+      _el$7.addEventListener("scroll", event => {
+        if (preview) {
+          preview.scrollTop = event.currentTarget.scrollTop;
+          preview.scrollLeft = event.currentTarget.scrollLeft;
+        }
+      });
+      _el$7.addEventListener("paste", event => {
+        if (textarea && handleSmartPaste(event, textarea)) {
+          event.preventDefault();
+        }
+      });
+      _el$7.$$keydown = onKeyDown;
+      _el$7.addEventListener("change", event => props.onValueCommit?.(event.currentTarget.value));
+      _el$7.$$input = onInput;
+      _$use(element => {
+        textarea = element;
+        props.textareaRef?.(element);
+      }, _el$7);
+      _$spread(_el$7, _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get name() {
+          return props.name;
+        },
+        get disabled() {
+          return props.disabled;
+        },
+        get required() {
+          return props.required;
+        },
+        get spellcheck() {
+          return props.spellcheck ?? true;
+        },
+        get maxLength() {
+          return props.maxLength;
+        }
+      }, () => fieldControlAria(meta, props), {
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        get ["aria-controls"]() {
+          return dropdownOpen() ? listboxId : undefined;
+        },
+        get ["aria-activedescendant"]() {
+          return _$memo(() => !!(dropdownOpen() && state()))() ? optionId(state().selectedIndex) : undefined;
+        }
+      }), false, false);
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!(props.showStats ?? true))() && !props.disabled;
+        },
+        get children() {
+          var _el$0 = _$getNextElement(_tmpl$3),
+            _el$1 = _el$0.firstChild,
+            _el$11 = _el$1.firstChild,
+            [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling),
+            _el$10 = _el$12.nextSibling,
+            _el$13 = _el$10.nextSibling,
+            [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling),
+            _el$15 = _el$1.nextSibling,
+            _el$17 = _el$15.firstChild,
+            [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
+            _el$16 = _el$18.nextSibling,
+            _el$19 = _el$16.nextSibling,
+            [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
+            _el$21 = _el$15.nextSibling,
+            _el$23 = _el$21.firstChild,
+            [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+            _el$22 = _el$24.nextSibling,
+            _el$25 = _el$22.nextSibling,
+            [_el$26, _co$7] = _$getNextMarker(_el$25.nextSibling);
+          _$insert(_el$1, () => stats().lines, _el$12, _co$2);
+          _$insert(_el$1, () => stats().lines === 1 ? "line" : "lines", _el$14, _co$3);
+          _$insert(_el$15, () => stats().words, _el$18, _co$4);
+          _$insert(_el$15, () => stats().words === 1 ? "word" : "words", _el$20, _co$5);
+          _$insert(_el$21, () => stats().chars, _el$24, _co$6);
+          _$insert(_el$21, () => stats().chars === 1 ? "char" : "chars", _el$26, _co$7);
+          _$effect(() => _$setAttribute(_el$0, "data-empty", stats().chars === 0 ? "true" : undefined));
+          return _el$0;
+        }
+      }), _el$39, _co$10);
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return state() || loading() || completionError();
+        },
+        get children() {
+          var _el$27 = _$getNextElement(_tmpl$5),
+            _el$28 = _el$27.firstChild,
+            _el$30 = _el$28.firstChild,
+            [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
+            _el$32 = _el$31.nextSibling,
+            [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling),
+            _el$34 = _el$33.nextSibling,
+            [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling);
+          var _ref$2 = dropdown;
+          typeof _ref$2 === "function" ? _$use(_ref$2, _el$27) : dropdown = _el$27;
+          _$setAttribute(_el$28, "id", listboxId);
+          _$insert(_el$28, _$createComponent(Show, {
+            get when() {
+              return loading();
+            },
+            get children() {
+              return _$getNextElement(_tmpl$4);
+            }
+          }), _el$31, _co$8);
+          _$insert(_el$28, _$createComponent(Show, {
+            get when() {
+              return completionError();
+            },
+            children: message => (() => {
+              var _el$42 = _$getNextElement(_tmpl$7),
+                _el$43 = _el$42.firstChild,
+                _el$44 = _el$43.nextSibling,
+                _el$45 = _el$44.nextSibling;
+              _$insert(_el$44, message);
+              _el$45.$$click = retryCompletion;
+              _el$45.$$mousedown = event => event.preventDefault();
+              _$insert(_el$45, () => messages().retry);
+              _$runHydrationEvents();
+              return _el$42;
+            })()
+          }), _el$33, _co$9);
+          _$insert(_el$28, _$createComponent(For, {
+            get each() {
+              return state()?.suggestions ?? [];
+            },
+            children: (suggestion, index) => // biome-ignore lint/a11y/useKeyWithClickEvents: the owning textarea handles keyboard activation through aria-activedescendant.
+            (() => {
+              var _el$46 = _$getNextElement(_tmpl$8),
+                _el$47 = _el$46.firstChild,
+                _el$48 = _el$47.nextSibling,
+                [_el$49, _co$12] = _$getNextMarker(_el$48.nextSibling);
+              _el$46.$$click = () => {
+                activateSuggestion(index());
+                textarea?.focus();
+              };
+              _el$46.$$mousedown = event => {
+                event.preventDefault();
+              };
+              _el$46.addEventListener("mouseenter", () => {
+                const current = state();
+                if (current) {
+                  setState({
+                    ...current,
+                    selectedIndex: index()
+                  });
+                }
+              });
+              _$insert(_el$47, () => displayLabel(suggestion, state().context.completion));
+              _$insert(_el$46, _$createComponent(Show, {
+                get when() {
+                  return suggestion.hint;
+                },
+                children: hint => (() => {
+                  var _el$50 = _$getNextElement(_tmpl$9);
+                  _$insert(_el$50, hint);
+                  return _el$50;
+                })()
+              }), _el$49, _co$12);
+              _$effect(_p$ => {
+                var _v$12 = optionId(index()),
+                  _v$13 = index() === state()?.selectedIndex;
+                _v$12 !== _p$.e && _$setAttribute(_el$46, "id", _p$.e = _v$12);
+                _v$13 !== _p$.t && _$setAttribute(_el$46, "aria-selected", _p$.t = _v$13);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              _$runHydrationEvents();
+              return _el$46;
+            })()
+          }), _el$35, _co$0);
+          _$effect(_p$ => {
+            var _v$5 = messages().completionSuggestions,
+              _v$6 = messages().suggestions;
+            _v$5 !== _p$.e && _$setAttribute(_el$27, "aria-label", _p$.e = _v$5);
+            _v$6 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$6);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$27;
+        }
+      }), _el$41, _co$11);
+      _$effect(_p$ => {
+        var _v$7 = props.label ? meta.labelId : undefined,
+          _v$8 = !props.label ? props["aria-label"] : undefined,
+          _v$9 = props.disabled ? "true" : undefined,
+          _v$0 = error() ? "true" : undefined,
+          _v$1 = props.variant === "paper" ? "paper" : undefined,
+          _v$10 = props.fill ? "true" : undefined,
+          _v$11 = String(props.lines ?? 6);
+        _v$7 !== _p$.e && _$setAttribute(_el$3, "aria-labelledby", _p$.e = _v$7);
+        _v$8 !== _p$.t && _$setAttribute(_el$3, "aria-label", _p$.t = _v$8);
+        _v$9 !== _p$.a && _$setAttribute(_el$3, "data-disabled", _p$.a = _v$9);
+        _v$0 !== _p$.o && _$setAttribute(_el$3, "data-invalid", _p$.o = _v$0);
+        _v$1 !== _p$.i && _$setAttribute(_el$3, "data-variant", _p$.i = _v$1);
+        _v$10 !== _p$.n && _$setAttribute(_el$3, "data-fill", _p$.n = _v$10);
+        _v$11 !== _p$.s && _$setStyleProperty(_el$3, "--k2b-editor-lines", _p$.s = _v$11);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      _$runHydrationEvents();
+      return _el$3;
+    }
+  });
+}
+export { abbreviations } from "../completion";
+_$delegateEvents(["mousedown", "click", "keydown", "input"]);
+//# sourceMappingURL=MarkdownEditor.js.map