@kong-ui-public/monaco-editor 0.4.11-pr.2769.31aadbf56.0 → 0.5.0

package/dist/runtime/monaco-editor.es.js

@@ -1,49 +1,10 @@
-import { toValue as _, shallowRef as K, reactive as z, onMounted as $, onActivated as H, onBeforeUnmount as G, watch as j, defineComponent as U, resolveComponent as q, createBlock as E, openBlock as h, createSlots as J, withCtx as k, resolveDynamicComponent as Q, mergeModels as Y, useModel as Z, useTemplateRef as X, computed as T, createElementBlock as ee, normalizeClass as te, unref as d, createElementVNode as oe, renderSlot as F, createVNode as W, Transition as x, createCommentVNode as D } from "vue";
-import { ProgressIcon as re, CodeblockIcon as ae } from "@kong/icons";
-import * as M from "monaco-editor";
-import { createI18n as ne, i18nTComponent as ie } from "@kong-ui-public/i18n";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const R = () => {
-};
-function se(o, t) {
-  function e(...r) {
-    return new Promise((n, i) => {
-      Promise.resolve(o(() => t.apply(this, r), {
-        fn: t,
-        thisArg: this,
-        args: r
-      })).then(n).catch(i);
-    });
-  }
-  return e;
-}
-function le(o, t = {}) {
-  let e, r, n = R;
-  const i = (l) => {
-    clearTimeout(l), n(), n = R;
-  };
-  let s;
-  return (l) => {
-    const C = _(o), c = _(t.maxWait);
-    return e && i(e), C <= 0 || c !== void 0 && c <= 0 ? (r && (i(r), r = void 0), Promise.resolve(l())) : new Promise((S, a) => {
-      n = t.rejectOnCancel ? a : S, s = l, c && !r && (r = setTimeout(() => {
-        e && i(e), r = void 0, S(s());
-      }, c)), e = setTimeout(() => {
-        r && i(r), r = void 0, S(l());
-      }, C);
-    });
-  };
-}
-// @__NO_SIDE_EFFECTS__
-function ce(o, t = 200, e = {}) {
-  return se(le(t, e), o);
-}
-function de(o) {
-  var t;
-  const e = _(o);
-  return (t = e == null ? void 0 : e.$el) !== null && t !== void 0 ? t : e;
-}
-const ue = "'JetBrains Mono', Consolas, monospace", me = "12px", fe = "500", ge = "20px", ve = Object.freeze({
+import { toValue as S, ref as B, reactive as D, onMounted as P, onActivated as U, onBeforeUnmount as V, watch as j, defineComponent as W, resolveComponent as K, createBlock as _, openBlock as y, createSlots as A, withCtx as b, resolveDynamicComponent as H, mergeModels as $, useModel as z, useTemplateRef as G, computed as M, createElementBlock as q, normalizeClass as J, unref as u, createElementVNode as Q, renderSlot as T, createVNode as I, Transition as k, createCommentVNode as w } from "vue";
+import { ProgressIcon as Y, CodeblockIcon as Z } from "@kong/icons";
+import * as m from "monaco-editor";
+import { shikiToMonaco as X } from "@shikijs/monaco";
+import { getSingletonHighlighter as ee, bundledLanguages as te, bundledThemes as oe } from "shiki";
+import { createI18n as ne, i18nTComponent as ae } from "@kong-ui-public/i18n";
+const re = "'JetBrains Mono', Consolas, monospace", ie = "12px", se = "500", le = "20px", ce = Object.freeze({
   autoClosingQuotes: "always",
   automaticLayout: !0,
   // Auto resize layout
@@ -52,10 +13,10 @@ const ue = "'JetBrains Mono', Consolas, monospace", me = "12px", fe = "500", ge
   },
   hideCursorInOverviewRuler: !0,
   // hide the cursor position in the minimap TODO: maybe hide it on first line or change it colour
-  fontFamily: ue,
-  fontSize: Number(me.replace("px", "")),
-  fontWeight: fe,
-  lineHeight: Number(ge.replace("px", "")),
+  fontFamily: re,
+  fontSize: Number(ie.replace("px", "")),
+  fontWeight: se,
+  lineHeight: Number(le.replace("px", "")),
   formatOnPaste: !0,
   formatOnType: !0,
   // Add to enable automatic formatting as the user types.
@@ -97,176 +58,174 @@ const ue = "'JetBrains Mono', Consolas, monospace", me = "12px", fe = "500", ge
     // we need this set to false to get the correct absolute position, otherwise when the search box opens the content shifts
   }
 });
-let g = /* @__PURE__ */ new WeakMap();
-const y = /* @__PURE__ */ new Map();
-function O(o, t) {
-  let e = y.get(o);
-  if (e)
-    return console.warn("[monaco-editor] [lifecycle] Disposable is already tracked:", o), e;
-  const r = o.dispose;
-  if (e = {
-    ...o,
-    dispose: () => (y.delete(o), r.call(o))
-  }, t) {
-    const n = e.dispose;
-    e.dispose = () => {
-      const s = g.get(t.source);
-      return s && (s.delete(e), s.size === 0 && g.delete(t.source)), n();
-    };
-    const i = g.get(t.source);
-    if (i)
-      i.add(e);
-    else
-      switch (g.set(t.source, /* @__PURE__ */ new Set([e])), t.type) {
-        case "editor":
-          t.source.onDidDispose(() => b(t.source));
-          break;
-        case "model":
-          t.source.onWillDispose(() => b(t.source));
-          break;
-      }
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const x = () => {
+};
+function de(o, t) {
+  function e(...n) {
+    return new Promise((a, i) => {
+      Promise.resolve(o(() => t.apply(this, n), {
+        fn: t,
+        thisArg: this,
+        args: n
+      })).then(a).catch(i);
+    });
   }
-  return y.set(o, e), e;
-}
-function pe(o, t) {
-  return O(t, { type: "editor", source: o });
+  return e;
 }
-function he(o, t) {
-  return O(t, { type: "model", source: o });
+function ue(o, t = {}) {
+  let e, n, a = x;
+  const i = (l) => {
+    clearTimeout(l), a(), a = x;
+  };
+  let s;
+  return (l) => {
+    const v = S(o), c = S(t.maxWait);
+    return e && i(e), v <= 0 || c !== void 0 && c <= 0 ? (n && (i(n), n = void 0), Promise.resolve(l())) : new Promise((C, r) => {
+      a = t.rejectOnCancel ? r : C, s = l, c && !n && (n = setTimeout(() => {
+        e && i(e), n = void 0, C(s());
+      }, c)), e = setTimeout(() => {
+        n && i(n), n = void 0, C(l());
+      }, v);
+    });
+  };
 }
-function b(o) {
-  const t = g.get(o);
-  t && (t.forEach((e) => e.dispose()), g.delete(o));
+// @__NO_SIDE_EFFECTS__
+function me(o, t = 200, e = {}) {
+  return de(ue(t, e), o);
 }
-function ye() {
-  y.forEach((o) => o.dispose()), y.clear(), g = /* @__PURE__ */ new WeakMap();
+function ge(o) {
+  var t;
+  const e = S(o);
+  return (t = e == null ? void 0 : e.$el) !== null && t !== void 0 ? t : e;
 }
-const N = {
-  track: O,
-  trackForEditor: pe,
-  trackForModel: he,
-  disposeScoped: b,
-  disposeAll: ye
-};
-let v;
-const B = /* @__PURE__ */ new Map();
-function Ce(o) {
-  return v || (v = M), o && !B.get(o) && (B.set(o, !0), M.languages.getLanguages().some((t) => t.id === o) || M.languages.register({ id: o })), v;
+const L = B(!1);
+let p = null;
+async function fe() {
+  return p || (p = (async () => {
+    var o, t;
+    try {
+      const e = ((o = m.json) == null ? void 0 : o.jsonDefaults) || ((t = m.languages.json) == null ? void 0 : t.jsonDefaults);
+      e == null || e.setModeConfiguration({ tokens: !1 });
+      const n = await ee(
+        {
+          themes: Object.values(oe),
+          langs: Object.values(te)
+        }
+      );
+      n.getLoadedLanguages().forEach((a) => {
+        m.languages.register({ id: a });
+      }), X(n, m), L.value = !0;
+    } catch (e) {
+      throw p = null, e;
+    }
+  })(), p);
 }
-function Se(o, t) {
-  const e = K();
-  let r = !1;
-  const n = z({
+function he(o, t) {
+  let e, n = !1;
+  const a = D({
     editorStatus: "loading",
     searchBoxIsRevealed: !1,
     hasContent: !1,
     theme: t.theme || "light"
-  }), i = (a) => {
-    !r || !e.value || e.value.setValue(a);
-  }, s = (a) => {
-    var u;
-    return (u = e.value) == null ? void 0 : u.updateOptions({ readOnly: a });
-  }, m = () => {
-    var a;
-    return (a = e.value) == null ? void 0 : a.focus();
-  }, l = (a) => {
+  }), i = (r) => {
+    !n || !e || e.setValue(r);
+  }, s = (r) => e == null ? void 0 : e.updateOptions({ readOnly: r }), g = () => e == null ? void 0 : e.focus(), l = (r) => {
     try {
-      if (!e.value || !a) return;
-      e.value.focus(), e.value.trigger("keyboard", a, null);
-    } catch (u) {
-      console.error(`useMonacoEditor: Failed to trigger command: ${a}`, u);
+      if (!e || !r) return;
+      e.focus(), e.trigger("keyboard", r, null);
+    } catch (f) {
+      console.error(`useMonacoEditor: Failed to trigger command: ${r}`, f);
     }
-  }, C = () => {
-    var a;
+  }, v = () => {
+    var r;
     try {
-      if (!e.value) return;
-      if (n.searchBoxIsRevealed)
-        return (a = e.value.getContribution("editor.contrib.findController")) == null ? void 0 : a.closeFindWidget();
+      if (!e) return;
+      if (a.searchBoxIsRevealed)
+        return (r = e.getContribution("editor.contrib.findController")) == null ? void 0 : r.closeFindWidget();
       l("actions.find");
-    } catch (u) {
-      console.error("useMonacoEditor: Failed to close findController.", u);
+    } catch (f) {
+      console.error("useMonacoEditor: Failed to close findController.", f);
     }
-  }, c = /* @__PURE__ */ ce(() => v == null ? void 0 : v.editor.remeasureFonts(), 200);
+  }, c = /* @__PURE__ */ me(() => m.editor.remeasureFonts(), 200);
   return (() => {
-    const a = Ce(t.language), u = a.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`), V = a.editor.createModel(t.code.value, t.language, u);
-    j(() => _(o), (A) => {
-      var I;
-      const w = de(A);
-      if (!(w instanceof HTMLElement)) {
-        r = !1;
+    fe();
+    let r;
+    j([L, () => S(o)], ([f, R]) => {
+      var O;
+      const E = ge(R);
+      if (!(E instanceof HTMLElement) || !f) {
+        n = !1;
         return;
       }
-      if (!r) {
-        e.value = a.editor.create(w, {
-          ...ve,
+      if (!n) {
+        if (!r) {
+          const d = m.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);
+          r = m.editor.createModel(t.code.value, t.language, d);
+        }
+        e = m.editor.create(E, {
+          ...ce,
           readOnly: t.readOnly || !1,
           language: t.language,
-          theme: n.theme,
-          model: V,
+          theme: a.theme === "light" ? "catppuccin-latte" : "catppuccin-mocha",
+          model: r,
           editContext: !1,
           ...t.monacoOptions
-        }), r = !0, n.editorStatus = "ready", n.hasContent = !!t.code.value, N.trackForEditor(
-          e.value,
-          e.value.onDidChangeModelContent(() => {
-            var p;
-            const f = e.value.getValue();
-            n.hasContent = !!f.length, (p = t.onChanged) == null || p.call(t, f);
-          })
-        ), (I = t.onCreated) == null || I.call(t), c();
+        }), n = !0, a.editorStatus = "ready", a.hasContent = !!t.code.value, e.onDidChangeModelContent(() => {
+          var h;
+          const d = e.getValue();
+          a.hasContent = !!d.length, (h = t.onChanged) == null || h.call(t, d);
+        }), (O = t.onCreated) == null || O.call(t), c();
         try {
-          const f = e.value.getContribution("editor.contrib.findController");
-          if (f) {
-            const p = f.getState();
-            N.trackForEditor(
-              e.value,
-              p.onFindReplaceStateChange(() => {
-                n.searchBoxIsRevealed = p.isRevealed;
-              })
-              // This returns a disposable
-            );
+          const d = e.getContribution("editor.contrib.findController");
+          if (d) {
+            const h = d.getState();
+            h.onFindReplaceStateChange(() => {
+              a.searchBoxIsRevealed = h.isRevealed;
+            });
           }
-        } catch (f) {
-          console.error("useMonacoEditor: Failed to get the state of findController", f);
+        } catch (d) {
+          console.error("useMonacoEditor: Failed to get the state of findController", d);
         }
       }
     }, {
       immediate: !0,
       flush: "post"
     });
-  })(), $(c), H(c), G(() => {
-    if (!e.value) return;
-    const a = e.value.getModel();
-    e.value.dispose(), a && a.dispose();
+  })(), P(c), U(c), V(() => {
+    if (!e) return;
+    const r = e.getModel();
+    e.dispose(), r && r.dispose();
   }), {
     editor: e,
-    editorStates: n,
+    editorStates: a,
     setContent: i,
     setReadOnly: s,
-    focus: m,
+    focus: g,
     remeasureFonts: c,
-    toggleSearchWidget: C,
+    toggleSearchWidget: v,
     triggerKeyboardCommand: l
   };
 }
-const _e = {
+const pe = {
   messages: {
     empty_message: "The editor is currently empty. Start typing to add content.",
     empty_title: "No content available",
     loading_message: "Please wait while the {type} content is loaded.",
     loading_title: "{type} editor"
   }
-}, Ee = {
-  editor: _e
+}, ye = {
+  editor: pe
 };
-function Me() {
-  const o = ne("en-us", Ee);
+function ve() {
+  const o = ne("en-us", ye);
   return {
     i18n: o,
-    i18nT: ie(o)
+    i18nT: ae(o)
     // Translation component <i18n-t>
   };
 }
-const ke = /* @__PURE__ */ U({
+const Ce = /* @__PURE__ */ W({
   __name: "MonacoEditorStatusOverlay",
   props: {
     title: {},
@@ -275,30 +234,30 @@ const ke = /* @__PURE__ */ U({
   },
   setup(o) {
     return (t, e) => {
-      const r = q("KEmptyState");
-      return h(), E(r, {
+      const n = K("KEmptyState");
+      return y(), _(n, {
         class: "monaco-editor-status-overlay",
         message: o.message,
         title: o.title
-      }, J({ _: 2 }, [
+      }, A({ _: 2 }, [
         o.icon ? {
           name: "icon",
-          fn: k(() => [
-            (h(), E(Q(o.icon), { decorative: "" }))
+          fn: b(() => [
+            (y(), _(H(o.icon), { decorative: "" }))
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["message", "title"]);
     };
   }
-}), P = (o, t) => {
+}), N = (o, t) => {
   const e = o.__vccOpts || o;
-  for (const [r, n] of t)
-    e[r] = n;
+  for (const [n, a] of t)
+    e[n] = a;
   return e;
-}, L = /* @__PURE__ */ P(ke, [["__scopeId", "data-v-062eadb5"]]), be = /* @__PURE__ */ U({
+}, F = /* @__PURE__ */ N(Ce, [["__scopeId", "data-v-062eadb5"]]), Se = /* @__PURE__ */ W({
   __name: "MonacoEditor",
-  props: /* @__PURE__ */ Y({
+  props: /* @__PURE__ */ $({
     theme: { default: "light" },
     language: { default: "markdown" },
     options: { default: () => {
@@ -312,62 +271,62 @@ const ke = /* @__PURE__ */ U({
   }),
   emits: ["update:modelValue"],
   setup(o) {
-    const t = Z(o, "modelValue"), { i18n: e } = Me(), r = X("editorRef"), n = T(() => o.theme === "dark" ? "dark" : "light"), i = T(() => s.editorStates.editorStatus === "ready" && !s.editorStates.hasContent), s = Se(r, {
+    const t = z(o, "modelValue"), { i18n: e } = ve(), n = G("editorRef"), a = M(() => o.theme === "dark" ? "dark" : "light"), i = M(() => s.editorStates.editorStatus === "ready" && !s.editorStates.hasContent), s = he(n, {
       language: o.language,
       code: t,
-      theme: n.value,
+      theme: a.value,
       monacoOptions: o.options,
-      onChanged: (m) => {
-        t.value = m;
+      onChanged: (g) => {
+        t.value = g;
       }
     });
-    return (m, l) => (h(), ee("div", {
-      class: te(["monaco-editor-container", [
-        n.value,
-        { loading: d(s).editorStates.editorStatus === "loading" }
+    return (g, l) => (y(), q("div", {
+      class: J(["monaco-editor-container", [
+        a.value,
+        { loading: u(s).editorStates.editorStatus === "loading" }
       ]]),
       "data-testid": "monaco-editor-container"
     }, [
-      oe("div", {
+      Q("div", {
         ref_key: "editorRef",
-        ref: r,
+        ref: n,
         class: "monaco-editor-target",
         "data-testid": "monaco-editor-target"
       }, null, 512),
-      F(m.$slots, "state-loading", {
-        isLoading: d(s).editorStates.editorStatus === "loading"
+      T(g.$slots, "state-loading", {
+        isLoading: u(s).editorStates.editorStatus === "loading"
       }, () => [
-        W(x, { name: "fade" }, {
-          default: k(() => [
-            d(s).editorStates.editorStatus === "loading" ? (h(), E(L, {
+        I(k, { name: "fade" }, {
+          default: b(() => [
+            u(s).editorStates.editorStatus === "loading" ? (y(), _(F, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-loading",
-              icon: d(re),
-              message: d(e).t("editor.messages.loading_message", { type: o.language }),
-              title: d(e).t("editor.messages.loading_title", { type: o.language })
-            }, null, 8, ["icon", "message", "title"])) : D("", !0)
+              icon: u(Y),
+              message: u(e).t("editor.messages.loading_message", { type: o.language }),
+              title: u(e).t("editor.messages.loading_title", { type: o.language })
+            }, null, 8, ["icon", "message", "title"])) : w("", !0)
           ]),
           _: 1
         })
       ], !0),
-      F(m.$slots, "state-empty", { isEmpty: i.value }, () => [
-        W(x, { name: "fade" }, {
-          default: k(() => [
-            i.value ? (h(), E(L, {
+      T(g.$slots, "state-empty", { isEmpty: i.value }, () => [
+        I(k, { name: "fade" }, {
+          default: b(() => [
+            i.value ? (y(), _(F, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-empty",
-              icon: d(ae),
-              message: d(e).t("editor.messages.empty_message"),
-              title: d(e).t("editor.messages.empty_title")
-            }, null, 8, ["icon", "message", "title"])) : D("", !0)
+              icon: u(Z),
+              message: u(e).t("editor.messages.empty_message"),
+              title: u(e).t("editor.messages.empty_title")
+            }, null, 8, ["icon", "message", "title"])) : w("", !0)
           ]),
           _: 1
         })
       ], !0)
     ], 2));
   }
-}), Te = /* @__PURE__ */ P(be, [["__scopeId", "data-v-c8f35a88"]]);
+}), Te = /* @__PURE__ */ N(Se, [["__scopeId", "data-v-c8f35a88"]]);
 export {
   Te as MonacoEditor,
-  Se as useMonacoEditor
+  he as useMonacoEditor
 };

package/dist/runtime/monaco-editor.umd.js

@@ -1 +1 @@
-(function(c,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@kong/icons"),require("monaco-editor"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons","monaco-editor","@kong-ui-public/i18n"],o):(c=typeof globalThis<"u"?globalThis:c||self,o(c["kong-ui-public-monaco-editor"]={},c.Vue,c.KongIcons,c.monaco,c["kong-ui-public-i18n"]))})(this,function(c,o,O,B,b){"use strict";function U(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const k=U(B);typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const I=()=>{};function V(n,t){function e(...r){return new Promise((i,s)=>{Promise.resolve(n(()=>t.apply(this,r),{fn:t,thisArg:this,args:r})).then(i).catch(s)})}return e}function v(n,t={}){let e,r,i=I;const s=d=>{clearTimeout(d),i(),i=I};let l;return d=>{const S=o.toValue(n),u=o.toValue(t.maxWait);return e&&s(e),S<=0||u!==void 0&&u<=0?(r&&(s(r),r=void 0),Promise.resolve(d())):new Promise((C,a)=>{i=t.rejectOnCancel?a:C,l=d,u&&!r&&(r=setTimeout(()=>{e&&s(e),r=void 0,C(l())},u)),e=setTimeout(()=>{r&&s(r),r=void 0,C(d())},S)})}}function R(n,t=200,e={}){return V(v(t,e),n)}function K(n){var t;const e=o.toValue(n);return(t=e==null?void 0:e.$el)!==null&&t!==void 0?t:e}const L=Object.freeze({autoClosingQuotes:"always",automaticLayout:!0,bracketPairColorization:{enabled:!0},hideCursorInOverviewRuler:!0,fontFamily:"'JetBrains Mono', Consolas, monospace",fontSize:Number("12px".replace("px","")),fontWeight:"500",lineHeight:Number("20px".replace("px","")),formatOnPaste:!0,formatOnType:!0,lineNumbersMinChars:3,minimap:{enabled:!1},stickyScroll:{enabled:!0},suggest:{showWords:!1},quickSuggestions:!0,suggestOnTriggerCharacters:!0,wordBasedSuggestions:"off",overviewRulerLanes:0,renderWhitespace:"boundary",scrollBeyondLastLine:!1,roundedSelection:!1,wordWrapColumn:120,colorDecorators:!0,folding:!0,fixedOverflowWidgets:!0,tabSize:2,detectIndentation:!1,insertSpaces:!0,trimAutoWhitespace:!0,wordWrap:"bounded",find:{addExtraSpaceOnTop:!1}});let m=new WeakMap;const h=new Map;function E(n,t){let e=h.get(n);if(e)return console.warn("[monaco-editor] [lifecycle] Disposable is already tracked:",n),e;const r=n.dispose;if(e={...n,dispose:()=>(h.delete(n),r.call(n))},t){const i=e.dispose;e.dispose=()=>{const l=m.get(t.source);return l&&(l.delete(e),l.size===0&&m.delete(t.source)),i()};const s=m.get(t.source);if(s)s.add(e);else switch(m.set(t.source,new Set([e])),t.type){case"editor":t.source.onDidDispose(()=>M(t.source));break;case"model":t.source.onWillDispose(()=>M(t.source));break}}return h.set(n,e),e}function P(n,t){return E(t,{type:"editor",source:n})}function j(n,t){return E(t,{type:"model",source:n})}function M(n){const t=m.get(n);t&&(t.forEach(e=>e.dispose()),m.delete(n))}function A(){h.forEach(n=>n.dispose()),h.clear(),m=new WeakMap}const T={track:E,trackForEditor:P,trackForModel:j,disposeScoped:M,disposeAll:A};let y;const w=new Map;function H(n){return y||(y=k),n&&!w.get(n)&&(w.set(n,!0),k.languages.getLanguages().some(t=>t.id===n)||k.languages.register({id:n})),y}function F(n,t){const e=o.shallowRef();let r=!1;const i=o.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:t.theme||"light"}),s=a=>{!r||!e.value||e.value.setValue(a)},l=a=>{var f;return(f=e.value)==null?void 0:f.updateOptions({readOnly:a})},g=()=>{var a;return(a=e.value)==null?void 0:a.focus()},d=a=>{try{if(!e.value||!a)return;e.value.focus(),e.value.trigger("keyboard",a,null)}catch(f){console.error(`useMonacoEditor: Failed to trigger command: ${a}`,f)}},S=()=>{var a;try{if(!e.value)return;if(i.searchBoxIsRevealed)return(a=e.value.getContribution("editor.contrib.findController"))==null?void 0:a.closeFindWidget();d("actions.find")}catch(f){console.error("useMonacoEditor: Failed to close findController.",f)}},u=R(()=>y==null?void 0:y.editor.remeasureFonts(),200);return(()=>{const a=H(t.language),f=a.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`),Y=a.editor.createModel(t.code.value,t.language,f);o.watch(()=>o.toValue(n),Z=>{var W;const x=K(Z);if(!(x instanceof HTMLElement)){r=!1;return}if(!r){e.value=a.editor.create(x,{...L,readOnly:t.readOnly||!1,language:t.language,theme:i.theme,model:Y,editContext:!1,...t.monacoOptions}),r=!0,i.editorStatus="ready",i.hasContent=!!t.code.value,T.trackForEditor(e.value,e.value.onDidChangeModelContent(()=>{var _;const p=e.value.getValue();i.hasContent=!!p.length,(_=t.onChanged)==null||_.call(t,p)})),(W=t.onCreated)==null||W.call(t),u();try{const p=e.value.getContribution("editor.contrib.findController");if(p){const _=p.getState();T.trackForEditor(e.value,_.onFindReplaceStateChange(()=>{i.searchBoxIsRevealed=_.isRevealed}))}}catch(p){console.error("useMonacoEditor: Failed to get the state of findController",p)}}},{immediate:!0,flush:"post"})})(),o.onMounted(u),o.onActivated(u),o.onBeforeUnmount(()=>{if(!e.value)return;const a=e.value.getModel();e.value.dispose(),a&&a.dispose()}),{editor:e,editorStates:i,setContent:s,setReadOnly:l,focus:g,remeasureFonts:u,toggleSearchWidget:S,triggerKeyboardCommand:d}}const z={editor:{messages:{empty_message:"The editor is currently empty. Start typing to add content.",empty_title:"No content available",loading_message:"Please wait while the {type} content is loaded.",loading_title:"{type} editor"}}};function $(){const n=b.createI18n("en-us",z);return{i18n:n,i18nT:b.i18nTComponent(n)}}const q=o.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(n){return(t,e)=>{const r=o.resolveComponent("KEmptyState");return o.openBlock(),o.createBlock(r,{class:"monaco-editor-status-overlay",message:n.message,title:n.title},o.createSlots({_:2},[n.icon?{name:"icon",fn:o.withCtx(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),D=(n,t)=>{const e=n.__vccOpts||n;for(const[r,i]of t)e[r]=i;return e},N=D(q,[["__scopeId","data-v-062eadb5"]]),G=D(o.defineComponent({__name:"MonacoEditor",props:o.mergeModels({theme:{default:"light"},language:{default:"markdown"},options:{default:()=>{}}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(n){const t=o.useModel(n,"modelValue"),{i18n:e}=$(),r=o.useTemplateRef("editorRef"),i=o.computed(()=>n.theme==="dark"?"dark":"light"),s=o.computed(()=>l.editorStates.editorStatus==="ready"&&!l.editorStates.hasContent),l=F(r,{language:n.language,code:t,theme:i.value,monacoOptions:n.options,onChanged:g=>{t.value=g}});return(g,d)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["monaco-editor-container",[i.value,{loading:o.unref(l).editorStates.editorStatus==="loading"}]]),"data-testid":"monaco-editor-container"},[o.createElementVNode("div",{ref_key:"editorRef",ref:r,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),o.renderSlot(g.$slots,"state-loading",{isLoading:o.unref(l).editorStates.editorStatus==="loading"},()=>[o.createVNode(o.Transition,{name:"fade"},{default:o.withCtx(()=>[o.unref(l).editorStates.editorStatus==="loading"?(o.openBlock(),o.createBlock(N,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:o.unref(O.ProgressIcon),message:o.unref(e).t("editor.messages.loading_message",{type:n.language}),title:o.unref(e).t("editor.messages.loading_title",{type:n.language})},null,8,["icon","message","title"])):o.createCommentVNode("",!0)]),_:1})],!0),o.renderSlot(g.$slots,"state-empty",{isEmpty:s.value},()=>[o.createVNode(o.Transition,{name:"fade"},{default:o.withCtx(()=>[s.value?(o.openBlock(),o.createBlock(N,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:o.unref(O.CodeblockIcon),message:o.unref(e).t("editor.messages.empty_message"),title:o.unref(e).t("editor.messages.empty_title")},null,8,["icon","message","title"])):o.createCommentVNode("",!0)]),_:1})],!0)],2))}}),[["__scopeId","data-v-c8f35a88"]]);c.MonacoEditor=G,c.useMonacoEditor=F,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong/icons"),require("monaco-editor"),require("@shikijs/monaco"),require("shiki"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons","monaco-editor","@shikijs/monaco","shiki","@kong-ui-public/i18n"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-monaco-editor"]={},s.Vue,s.KongIcons,s.monaco,s.monaco$1,s.shiki,s["kong-ui-public-i18n"]))})(this,function(s,e,O,N,x,S,b){"use strict";function B(n){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>n[t]})}}return o.default=n,Object.freeze(o)}const f=B(N),j=Object.freeze({autoClosingQuotes:"always",automaticLayout:!0,bracketPairColorization:{enabled:!0},hideCursorInOverviewRuler:!0,fontFamily:"'JetBrains Mono', Consolas, monospace",fontSize:Number("12px".replace("px","")),fontWeight:"500",lineHeight:Number("20px".replace("px","")),formatOnPaste:!0,formatOnType:!0,lineNumbersMinChars:3,minimap:{enabled:!1},stickyScroll:{enabled:!0},suggest:{showWords:!1},quickSuggestions:!0,suggestOnTriggerCharacters:!0,wordBasedSuggestions:"off",overviewRulerLanes:0,renderWhitespace:"boundary",scrollBeyondLastLine:!1,roundedSelection:!1,wordWrapColumn:120,colorDecorators:!0,folding:!0,fixedOverflowWidgets:!0,tabSize:2,detectIndentation:!1,insertSpaces:!0,trimAutoWhitespace:!0,wordWrap:"bounded",find:{addExtraSpaceOnTop:!1}});typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const k=()=>{};function L(n,o){function t(...a){return new Promise((r,c)=>{Promise.resolve(n(()=>o.apply(this,a),{fn:o,thisArg:this,args:a})).then(r).catch(c)})}return t}function U(n,o={}){let t,a,r=k;const c=d=>{clearTimeout(d),r(),r=k};let l;return d=>{const _=e.toValue(n),u=e.toValue(o.maxWait);return t&&c(t),_<=0||u!==void 0&&u<=0?(a&&(c(a),a=void 0),Promise.resolve(d())):new Promise((C,i)=>{r=o.rejectOnCancel?i:C,l=d,u&&!a&&(a=setTimeout(()=>{t&&c(t),a=void 0,C(l())},u)),t=setTimeout(()=>{a&&c(a),a=void 0,C(d())},_)})}}function V(n,o=200,t={}){return L(U(o,t),n)}function W(n){var o;const t=e.toValue(n);return(o=t==null?void 0:t.$el)!==null&&o!==void 0?o:t}const E=e.ref(!1);let h=null;async function D(){return h||(h=(async()=>{var n,o;try{const t=((n=f.json)==null?void 0:n.jsonDefaults)||((o=f.languages.json)==null?void 0:o.jsonDefaults);t==null||t.setModeConfiguration({tokens:!1});const a=await S.getSingletonHighlighter({themes:Object.values(S.bundledThemes),langs:Object.values(S.bundledLanguages)});a.getLoadedLanguages().forEach(r=>{f.languages.register({id:r})}),x.shikiToMonaco(a,f),E.value=!0}catch(t){throw h=null,t}})(),h)}function I(n,o){let t,a=!1;const r=e.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:o.theme||"light"}),c=i=>{!a||!t||t.setValue(i)},l=i=>t==null?void 0:t.updateOptions({readOnly:i}),g=()=>t==null?void 0:t.focus(),d=i=>{try{if(!t||!i)return;t.focus(),t.trigger("keyboard",i,null)}catch(p){console.error(`useMonacoEditor: Failed to trigger command: ${i}`,p)}},_=()=>{var i;try{if(!t)return;if(r.searchBoxIsRevealed)return(i=t.getContribution("editor.contrib.findController"))==null?void 0:i.closeFindWidget();d("actions.find")}catch(p){console.error("useMonacoEditor: Failed to close findController.",p)}},u=V(()=>f.editor.remeasureFonts(),200);return(()=>{D();let i;e.watch([E,()=>e.toValue(n)],([p,q])=>{var F;const w=W(q);if(!(w instanceof HTMLElement)||!p){a=!1;return}if(!a){if(!i){const m=f.Uri.parse(`inmemory://model/${o.language}-${crypto.randomUUID()}`);i=f.editor.createModel(o.code.value,o.language,m)}t=f.editor.create(w,{...j,readOnly:o.readOnly||!1,language:o.language,theme:r.theme==="light"?"catppuccin-latte":"catppuccin-mocha",model:i,editContext:!1,...o.monacoOptions}),a=!0,r.editorStatus="ready",r.hasContent=!!o.code.value,t.onDidChangeModelContent(()=>{var y;const m=t.getValue();r.hasContent=!!m.length,(y=o.onChanged)==null||y.call(o,m)}),(F=o.onCreated)==null||F.call(o),u();try{const m=t.getContribution("editor.contrib.findController");if(m){const y=m.getState();y.onFindReplaceStateChange(()=>{r.searchBoxIsRevealed=y.isRevealed})}}catch(m){console.error("useMonacoEditor: Failed to get the state of findController",m)}}},{immediate:!0,flush:"post"})})(),e.onMounted(u),e.onActivated(u),e.onBeforeUnmount(()=>{if(!t)return;const i=t.getModel();t.dispose(),i&&i.dispose()}),{editor:t,editorStates:r,setContent:c,setReadOnly:l,focus:g,remeasureFonts:u,toggleSearchWidget:_,triggerKeyboardCommand:d}}const P={editor:{messages:{empty_message:"The editor is currently empty. Start typing to add content.",empty_title:"No content available",loading_message:"Please wait while the {type} content is loaded.",loading_title:"{type} editor"}}};function R(){const n=b.createI18n("en-us",P);return{i18n:n,i18nT:b.i18nTComponent(n)}}const K=e.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(n){return(o,t)=>{const a=e.resolveComponent("KEmptyState");return e.openBlock(),e.createBlock(a,{class:"monaco-editor-status-overlay",message:n.message,title:n.title},e.createSlots({_:2},[n.icon?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),T=(n,o)=>{const t=n.__vccOpts||n;for(const[a,r]of o)t[a]=r;return t},M=T(K,[["__scopeId","data-v-062eadb5"]]),H=T(e.defineComponent({__name:"MonacoEditor",props:e.mergeModels({theme:{default:"light"},language:{default:"markdown"},options:{default:()=>{}}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(n){const o=e.useModel(n,"modelValue"),{i18n:t}=R(),a=e.useTemplateRef("editorRef"),r=e.computed(()=>n.theme==="dark"?"dark":"light"),c=e.computed(()=>l.editorStates.editorStatus==="ready"&&!l.editorStates.hasContent),l=I(a,{language:n.language,code:o,theme:r.value,monacoOptions:n.options,onChanged:g=>{o.value=g}});return(g,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["monaco-editor-container",[r.value,{loading:e.unref(l).editorStates.editorStatus==="loading"}]]),"data-testid":"monaco-editor-container"},[e.createElementVNode("div",{ref_key:"editorRef",ref:a,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),e.renderSlot(g.$slots,"state-loading",{isLoading:e.unref(l).editorStates.editorStatus==="loading"},()=>[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.unref(l).editorStates.editorStatus==="loading"?(e.openBlock(),e.createBlock(M,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:e.unref(O.ProgressIcon),message:e.unref(t).t("editor.messages.loading_message",{type:n.language}),title:e.unref(t).t("editor.messages.loading_title",{type:n.language})},null,8,["icon","message","title"])):e.createCommentVNode("",!0)]),_:1})],!0),e.renderSlot(g.$slots,"state-empty",{isEmpty:c.value},()=>[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createBlock(M,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:e.unref(O.CodeblockIcon),message:e.unref(t).t("editor.messages.empty_message"),title:e.unref(t).t("editor.messages.empty_title")},null,8,["icon","message","title"])):e.createCommentVNode("",!0)]),_:1})],!0)],2))}}),[["__scopeId","data-v-c8f35a88"]]);s.MonacoEditor=H,s.useMonacoEditor=I,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/types/src/components/MonacoEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditor.vue"],"names":[],"mappings":"AAkTA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;MAGE;IACF,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oCAAoC,CAAC,GAAG,SAAS,CAAA;CAC3E,CAAC;AAQF;;GAEG;AACH,QAAA,MAAM,KAAK,wDAGT,CAAA;AAyBF,KAAK,gBAAgB,GAAG;IACxB;;OAEG;IACH,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA8IxD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOtD,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MonacoEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditor.vue"],"names":[],"mappings":"AAmTA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;MAGE;IACF,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oCAAoC,CAAC,GAAG,SAAS,CAAA;CAC3E,CAAC;AAQF;;GAEG;AACH,QAAA,MAAM,KAAK,wDAGT,CAAA;AAyBF,KAAK,gBAAgB,GAAG;IACxB;;OAEG;IACH,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA+IxD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOtD,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/types/src/components/MonacoEditorStatusOverlay.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditorStatusOverlay.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditorStatusOverlay.vue"],"names":[],"mappings":"AAkEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAC;AA6DF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MonacoEditorStatusOverlay.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditorStatusOverlay.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAC;AA8DF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/types/src/composables/useMonacoEditor.d.ts

@@ -8,7 +8,7 @@ import type { UseMonacoEditorOptions } from '../types';
  * @returns {object} An object containing the editor instance and utility methods.
 */
 export declare function useMonacoEditor<T extends MaybeElement>(target: MaybeComputedElementRef<T>, options: UseMonacoEditorOptions): {
-    editor: import("vue").ShallowRef<monaco.editor.IStandaloneCodeEditor | undefined, monaco.editor.IStandaloneCodeEditor | undefined>;
+    editor: monaco.editor.IStandaloneCodeEditor | undefined;
     editorStates: {
         editorStatus: import("..").EditorStatus;
         searchBoxIsRevealed: boolean;
@@ -18,7 +18,7 @@ export declare function useMonacoEditor<T extends MaybeElement>(target: MaybeCom
     setContent: (content: string) => void;
     setReadOnly: (readOnly: boolean) => void;
     focus: () => void;
-    remeasureFonts: import("@vueuse/core").UseDebounceFnReturn<() => void | undefined>;
+    remeasureFonts: import("@vueuse/core").UseDebounceFnReturn<() => void>;
     toggleSearchWidget: () => void;
     triggerKeyboardCommand: (id: string) => void;
 };

package/dist/types/src/composables/useMonacoEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMonacoEditor.d.ts","sourceRoot":"","sources":["../../../../src/composables/useMonacoEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAA;AASvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,KAAK,EAAsB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AA+B1E;;;;;EAKE;AACF,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,sBAAsB;;;;;;;;0BAoBF,MAAM,KAAG,IAAI;4BAOX,OAAO,KAAG,IAAI;iBAG3B,IAAI;;8BAkBS,IAAI;iCAXC,MAAM,KAAG,IAAI;EAwIlD"}
+{"version":3,"file":"useMonacoEditor.d.ts","sourceRoot":"","sources":["../../../../src/composables/useMonacoEditor.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAA;AAIvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,KAAK,EAAsB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAwC1E;;;;;EAKE;AACF,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,sBAAsB;;;;;;;;0BAqBF,MAAM,KAAG,IAAI;4BAOX,OAAO,KAAG,IAAI;iBAG3B,IAAI;;8BAkBS,IAAI;iCAXC,MAAM,KAAG,IAAI;EAwIlD"}

package/dist/types/vite-plugin/index.d.ts

@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite';
 import type { EditorFeature, EditorLanguage, NegatedEditorFeature, IFeatureDefinition } from 'monaco-editor/esm/metadata.js';
+import type { BundledLanguage, BundledTheme } from 'shiki';
 type Options = {
     /**
      * Include only a subset of the languages supported.
@@ -50,7 +51,37 @@ type Options = {
      * ```
      */
     features?: Array<EditorFeature | NegatedEditorFeature>;
+    /**
+   * Shiki configuration options.
+   * @type {{ themes?: BundledTheme[]; langs?: BundledLanguage[] }}
+   */
+    shiki?: {
+        /**
+        * Languages to include for Shiki syntax highlighting.
+        *
+        * @type {BundledLanguage[]}
+        * @defaultValue The same languages specified in the`languages` option above
+        * @example
+        * ```ts
+        * // Only include JavaScript and JSON support
+        * langs: ['javascript', 'json']
+        * ```
+        */
+        langs?: BundledLanguage[];
+        /**
+         * Themes to include for Shiki syntax highlighting.
+         *
+         * @type {BundledTheme[]}
+         * @defaultValue ['catppuccin-latte', 'catppuccin-mocha']
+         * @example
+         * ```ts
+         * // Include the 'nord' theme
+         * themes: ['nord']
+         * ```
+         */
+        themes?: BundledTheme[];
+    };
 };
-export default function (options?: Options): Plugin;
+export default function plugin(options?: Options): Plugin;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/types/vite-plugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../vite-plugin/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAA;AAGtC,KAAK,OAAO,GAAG;IACb;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAE5B;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAEtC;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,oBAAoB,CAAC,CAAA;CACvD,CAAA;AAsGD,MAAM,CAAC,OAAO,WAAU,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAqEjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../vite-plugin/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAA;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAM1D,KAAK,OAAO,GAAG;IACb;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAE5B;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAEtC;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,oBAAoB,CAAC,CAAA;IAEtD;;;KAGC;IACD,KAAK,CAAC,EAAE;QACN;;;;;;;;;;UAUE;QACF,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;QAEzB;;;;;;;;;;WAUG;QACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAA;KACxB,CAAA;CACF,CAAA;AA+GD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAkFxD"}

package/dist/vite-plugin/index.cjs

@@ -1,5 +1,7 @@
 "use strict";
 const metadata_js = require("monaco-editor/esm/metadata.js");
+const shikiCodegen = require("shiki-codegen");
+const shiki = require("shiki");
 const WORKER_ALIASES = {
   javascript: "typescript",
   less: "css",
@@ -7,10 +9,17 @@ const WORKER_ALIASES = {
   handlebars: "html",
   razor: "html"
 };
-const VIRTUAL_MODULE_ID = "\0virtual:monaco-editor";
+const VIRTUAL_MODULE_MONACO_ID = "\0virtual:monaco-editor";
+const VIRTUAL_MODULE_SHIKI_ID = "\0virtual:shiki";
 function generateImports(entries) {
   const entryArray = Array.isArray(entries) ? entries : [entries];
-  return entryArray.map((entry) => `import 'monaco-editor/esm/${entry}'`);
+  return entryArray.map((entry) => {
+    if (entry.endsWith("monaco.contribution")) {
+      const lang = entry.split("/").at(-2);
+      return `export * as ${lang} from 'monaco-editor/esm/${entry}'`;
+    }
+    return `import 'monaco-editor/esm/${entry}'`;
+  });
 }
 function resolveFeatures(requestedFeatures, allFeatureIds) {
   if (!requestedFeatures) {
@@ -66,62 +75,72 @@ function generateWorkerCode(languageIds, languagesDict, customLanguages) {
     "}"
   ];
 }
-function index(options) {
+function plugin(options) {
   return {
     name: "vite-plugin-monaco",
     enforce: "pre",
     resolveId(id) {
       if (id === "monaco-editor") {
-        return VIRTUAL_MODULE_ID;
+        return VIRTUAL_MODULE_MONACO_ID;
+      } else if (id === "shiki") {
+        return VIRTUAL_MODULE_SHIKI_ID;
       }
     },
     load(id) {
-      if (id !== VIRTUAL_MODULE_ID) {
-        return;
+      var _a, _b;
+      if (id === VIRTUAL_MODULE_MONACO_ID) {
+        const languagesDict = Object.fromEntries(
+          metadata_js.languages.map((lang) => [lang.label, lang])
+        );
+        const featuresDict = Object.fromEntries(
+          metadata_js.features.map((feat) => [feat.label, feat])
+        );
+        const featuresIds = resolveFeatures(
+          options == null ? void 0 : options.features,
+          Object.keys(featuresDict)
+        );
+        const featureImports = featuresIds.flatMap((featureId) => {
+          const feature = featuresDict[featureId];
+          if (!(feature == null ? void 0 : feature.entry)) {
+            return [];
+          }
+          return generateImports(feature.entry);
+        });
+        const languageIds = (options == null ? void 0 : options.languages) || Object.keys(languagesDict);
+        const languageImports = languageIds.flatMap((langId) => {
+          const lang = languagesDict[langId];
+          if (!(lang == null ? void 0 : lang.entry)) {
+            return [];
+          }
+          return generateImports(lang.entry);
+        });
+        const customLanguageImports = ((options == null ? void 0 : options.customLanguages) || []).map(
+          ({ entry }) => `import '${entry}'`
+        );
+        const workerCode = generateWorkerCode(
+          languageIds,
+          languagesDict,
+          options == null ? void 0 : options.customLanguages
+        );
+        return [
+          "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'",
+          ...featureImports,
+          ...languageImports,
+          ...customLanguageImports,
+          ...workerCode,
+          "export * from 'monaco-editor/esm/vs/editor/editor.api'",
+          "export default monaco"
+        ].join("\n");
+      } else if (id === VIRTUAL_MODULE_SHIKI_ID) {
+        const languageIds = ((_a = options == null ? void 0 : options.shiki) == null ? void 0 : _a.langs) || ((options == null ? void 0 : options.languages) || metadata_js.languages.map((lang) => lang.label)).filter((lang) => lang in shiki.bundledLanguages);
+        return shikiCodegen.codegen({
+          themes: ((_b = options == null ? void 0 : options.shiki) == null ? void 0 : _b.themes) || ["catppuccin-latte", "catppuccin-mocha"],
+          engine: "javascript",
+          langs: languageIds,
+          typescript: false
+        });
       }
-      const languagesDict = Object.fromEntries(
-        metadata_js.languages.map((lang) => [lang.label, lang])
-      );
-      const featuresDict = Object.fromEntries(
-        metadata_js.features.map((feat) => [feat.label, feat])
-      );
-      const featuresIds = resolveFeatures(
-        options == null ? void 0 : options.features,
-        Object.keys(featuresDict)
-      );
-      const featureImports = featuresIds.flatMap((featureId) => {
-        const feature = featuresDict[featureId];
-        if (!(feature == null ? void 0 : feature.entry)) {
-          return [];
-        }
-        return generateImports(feature.entry);
-      });
-      const languageIds = (options == null ? void 0 : options.languages) || Object.keys(languagesDict);
-      const languageImports = languageIds.flatMap((langId) => {
-        const lang = languagesDict[langId];
-        if (!(lang == null ? void 0 : lang.entry)) {
-          return [];
-        }
-        return generateImports(lang.entry);
-      });
-      const customLanguageImports = ((options == null ? void 0 : options.customLanguages) || []).map(
-        ({ entry }) => `import '${entry}'`
-      );
-      const workerCode = generateWorkerCode(
-        languageIds,
-        languagesDict,
-        options == null ? void 0 : options.customLanguages
-      );
-      return [
-        "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'",
-        ...featureImports,
-        ...languageImports,
-        ...customLanguageImports,
-        ...workerCode,
-        "export * from 'monaco-editor/esm/vs/editor/editor.api'",
-        "export default monaco"
-      ].join("\n");
     }
   };
 }
-module.exports = index;
+module.exports = plugin;

package/dist/vite-plugin/index.js

@@ -1,4 +1,6 @@
 import { languages, features } from "monaco-editor/esm/metadata.js";
+import { codegen } from "shiki-codegen";
+import { bundledLanguages } from "shiki";
 const WORKER_ALIASES = {
   javascript: "typescript",
   less: "css",
@@ -6,10 +8,17 @@ const WORKER_ALIASES = {
   handlebars: "html",
   razor: "html"
 };
-const VIRTUAL_MODULE_ID = "\0virtual:monaco-editor";
+const VIRTUAL_MODULE_MONACO_ID = "\0virtual:monaco-editor";
+const VIRTUAL_MODULE_SHIKI_ID = "\0virtual:shiki";
 function generateImports(entries) {
   const entryArray = Array.isArray(entries) ? entries : [entries];
-  return entryArray.map((entry) => `import 'monaco-editor/esm/${entry}'`);
+  return entryArray.map((entry) => {
+    if (entry.endsWith("monaco.contribution")) {
+      const lang = entry.split("/").at(-2);
+      return `export * as ${lang} from 'monaco-editor/esm/${entry}'`;
+    }
+    return `import 'monaco-editor/esm/${entry}'`;
+  });
 }
 function resolveFeatures(requestedFeatures, allFeatureIds) {
   if (!requestedFeatures) {
@@ -65,64 +74,74 @@ function generateWorkerCode(languageIds, languagesDict, customLanguages) {
     "}"
   ];
 }
-function index(options) {
+function plugin(options) {
   return {
     name: "vite-plugin-monaco",
     enforce: "pre",
     resolveId(id) {
       if (id === "monaco-editor") {
-        return VIRTUAL_MODULE_ID;
+        return VIRTUAL_MODULE_MONACO_ID;
+      } else if (id === "shiki") {
+        return VIRTUAL_MODULE_SHIKI_ID;
       }
     },
     load(id) {
-      if (id !== VIRTUAL_MODULE_ID) {
-        return;
+      var _a, _b;
+      if (id === VIRTUAL_MODULE_MONACO_ID) {
+        const languagesDict = Object.fromEntries(
+          languages.map((lang) => [lang.label, lang])
+        );
+        const featuresDict = Object.fromEntries(
+          features.map((feat) => [feat.label, feat])
+        );
+        const featuresIds = resolveFeatures(
+          options == null ? void 0 : options.features,
+          Object.keys(featuresDict)
+        );
+        const featureImports = featuresIds.flatMap((featureId) => {
+          const feature = featuresDict[featureId];
+          if (!(feature == null ? void 0 : feature.entry)) {
+            return [];
+          }
+          return generateImports(feature.entry);
+        });
+        const languageIds = (options == null ? void 0 : options.languages) || Object.keys(languagesDict);
+        const languageImports = languageIds.flatMap((langId) => {
+          const lang = languagesDict[langId];
+          if (!(lang == null ? void 0 : lang.entry)) {
+            return [];
+          }
+          return generateImports(lang.entry);
+        });
+        const customLanguageImports = ((options == null ? void 0 : options.customLanguages) || []).map(
+          ({ entry }) => `import '${entry}'`
+        );
+        const workerCode = generateWorkerCode(
+          languageIds,
+          languagesDict,
+          options == null ? void 0 : options.customLanguages
+        );
+        return [
+          "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'",
+          ...featureImports,
+          ...languageImports,
+          ...customLanguageImports,
+          ...workerCode,
+          "export * from 'monaco-editor/esm/vs/editor/editor.api'",
+          "export default monaco"
+        ].join("\n");
+      } else if (id === VIRTUAL_MODULE_SHIKI_ID) {
+        const languageIds = ((_a = options == null ? void 0 : options.shiki) == null ? void 0 : _a.langs) || ((options == null ? void 0 : options.languages) || languages.map((lang) => lang.label)).filter((lang) => lang in bundledLanguages);
+        return codegen({
+          themes: ((_b = options == null ? void 0 : options.shiki) == null ? void 0 : _b.themes) || ["catppuccin-latte", "catppuccin-mocha"],
+          engine: "javascript",
+          langs: languageIds,
+          typescript: false
+        });
       }
-      const languagesDict = Object.fromEntries(
-        languages.map((lang) => [lang.label, lang])
-      );
-      const featuresDict = Object.fromEntries(
-        features.map((feat) => [feat.label, feat])
-      );
-      const featuresIds = resolveFeatures(
-        options == null ? void 0 : options.features,
-        Object.keys(featuresDict)
-      );
-      const featureImports = featuresIds.flatMap((featureId) => {
-        const feature = featuresDict[featureId];
-        if (!(feature == null ? void 0 : feature.entry)) {
-          return [];
-        }
-        return generateImports(feature.entry);
-      });
-      const languageIds = (options == null ? void 0 : options.languages) || Object.keys(languagesDict);
-      const languageImports = languageIds.flatMap((langId) => {
-        const lang = languagesDict[langId];
-        if (!(lang == null ? void 0 : lang.entry)) {
-          return [];
-        }
-        return generateImports(lang.entry);
-      });
-      const customLanguageImports = ((options == null ? void 0 : options.customLanguages) || []).map(
-        ({ entry }) => `import '${entry}'`
-      );
-      const workerCode = generateWorkerCode(
-        languageIds,
-        languagesDict,
-        options == null ? void 0 : options.customLanguages
-      );
-      return [
-        "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'",
-        ...featureImports,
-        ...languageImports,
-        ...customLanguageImports,
-        ...workerCode,
-        "export * from 'monaco-editor/esm/vs/editor/editor.api'",
-        "export default monaco"
-      ].join("\n");
     }
   };
 }
 export {
-  index as default
+  plugin as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/monaco-editor",
-  "version": "0.4.11-pr.2769.31aadbf56.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/runtime/monaco-editor.umd.js",
   "module": "./dist/runtime/monaco-editor.es.js",
@@ -46,20 +46,24 @@
   "peerDependencies": {
     "@kong/icons": "^1.41.0",
     "@kong/kongponents": ">=9.42.0 <10.0.0",
-    "monaco-editor": ">=0.55.0 <1.0.0",
+    "monaco-editor": ">=0.52.0 <1.0.0",
+    "shiki": ">=3.0.0 <4.0.0",
     "vue": "^3.5.26",
     "@kong-ui-public/i18n": "^2.4.5"
   },
   "devDependencies": {
     "@kong/design-tokens": "1.18.2",
     "@kong/icons": "^1.41.0",
-    "@kong/kongponents": "9.48.7",
+    "@kong/kongponents": "9.48.8",
     "monaco-editor": "^0.55.1",
+    "shiki": "^3.20.0",
     "vue": "^3.5.26",
     "@kong-ui-public/i18n": "^2.4.5"
   },
   "dependencies": {
-    "@vueuse/core": "^14.1.0"
+    "@shikijs/monaco": "^3.20.0",
+    "@vueuse/core": "^14.1.0",
+    "shiki-codegen": "^3.20.0"
   },
   "scripts": {
     "dev": "cross-env USE_SANDBOX=true vite",

package/dist/types/src/singletons/index.d.ts

@@ -1,2 +0,0 @@
-export * from './lifecycle';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/singletons/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/singletons/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/types/src/singletons/lifecycle.d.ts

@@ -1,31 +0,0 @@
-import type { editor as Editor, IDisposable } from 'monaco-editor';
-type Scope = {
-    type: 'editor';
-    source: Editor.ICodeEditor;
-} | {
-    type: 'model';
-    source: Editor.ITextModel;
-};
-type ScopeSource = Editor.ICodeEditor | Editor.ITextModel;
-/**
- * Track a disposable in the global scope.
- *
- * @param disposable The disposable to track
- */
-declare function track(disposable: IDisposable, scope?: Scope): IDisposable;
-declare function trackForEditor(editor: Editor.ICodeEditor, disposable: IDisposable): IDisposable;
-declare function trackForModel(model: Editor.ITextModel, disposable: IDisposable): IDisposable;
-declare function disposeScoped(source: ScopeSource): void;
-/**
- * Dispose all tracked disposables.
- */
-declare function disposeAll(): void;
-export declare const lifecycle: {
-    readonly track: typeof track;
-    readonly trackForEditor: typeof trackForEditor;
-    readonly trackForModel: typeof trackForModel;
-    readonly disposeScoped: typeof disposeScoped;
-    readonly disposeAll: typeof disposeAll;
-};
-export {};
-//# sourceMappingURL=lifecycle.d.ts.map

package/dist/types/src/singletons/lifecycle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../../../src/singletons/lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAElE,KAAK,KAAK,GACN;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,WAAW,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,UAAU,CAAA;CAAE,CAAA;AAChD,KAAK,WAAW,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAA;AAKzD;;;;GAIG;AACH,iBAAS,KAAK,CAAC,UAAU,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,CA+ClE;AAED,iBAAS,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,GAAG,WAAW,CAExF;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAG,WAAW,CAErF;AAED,iBAAS,aAAa,CAAC,MAAM,EAAE,WAAW,QAMzC;AAED;;GAEG;AACH,iBAAS,UAAU,SAIlB;AAED,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAA"}