@kong-ui-public/monaco-editor 0.4.11 → 0.5.0

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

@@ -1,8 +1,10 @@
-import { toValue as C, reactive as U, onMounted as D, onActivated as P, onBeforeUnmount as V, watch as K, defineComponent as N, resolveComponent as A, createBlock as S, openBlock as y, createSlots as $, withCtx as E, resolveDynamicComponent as z, mergeModels as H, useModel as G, useTemplateRef as j, computed as M, createElementBlock as q, normalizeClass as J, unref as c, createElementVNode as Q, renderSlot as I, createVNode as T, Transition as k, createCommentVNode as w } from "vue";
+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 _ from "monaco-editor";
-import { createI18n as X, i18nTComponent as ee } from "@kong-ui-public/i18n";
-const te = "'JetBrains Mono', Consolas, monospace", oe = "12px", ne = "500", ae = "20px", re = Object.freeze({
+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
@@ -11,10 +13,10 @@ const te = "'JetBrains Mono', Consolas, monospace", oe = "12px", ne = "500", ae
   },
   hideCursorInOverviewRuler: !0,
   // hide the cursor position in the minimap TODO: maybe hide it on first line or change it colour
-  fontFamily: te,
-  fontSize: Number(oe.replace("px", "")),
-  fontWeight: ne,
-  lineHeight: Number(ae.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.
@@ -59,149 +61,171 @@ const te = "'JetBrains Mono', Consolas, monospace", oe = "12px", ne = "500", ae
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 const x = () => {
 };
-function ie(o, t) {
+function de(o, t) {
   function e(...n) {
-    return new Promise((r, i) => {
+    return new Promise((a, i) => {
       Promise.resolve(o(() => t.apply(this, n), {
         fn: t,
         thisArg: this,
         args: n
-      })).then(r).catch(i);
+      })).then(a).catch(i);
     });
   }
   return e;
 }
-function se(o, t = {}) {
-  let e, n, r = x;
+function ue(o, t = {}) {
+  let e, n, a = x;
   const i = (l) => {
-    clearTimeout(l), r(), r = x;
+    clearTimeout(l), a(), a = x;
   };
   let s;
   return (l) => {
-    const p = C(o), d = C(t.maxWait);
-    return e && i(e), p <= 0 || d !== void 0 && d <= 0 ? (n && (i(n), n = void 0), Promise.resolve(l())) : new Promise((v, a) => {
-      r = t.rejectOnCancel ? a : v, s = l, d && !n && (n = setTimeout(() => {
-        e && i(e), n = void 0, v(s());
-      }, d)), e = setTimeout(() => {
-        n && i(n), n = void 0, v(l());
-      }, p);
+    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);
     });
   };
 }
 // @__NO_SIDE_EFFECTS__
-function le(o, t = 200, e = {}) {
-  return ie(se(t, e), o);
+function me(o, t = 200, e = {}) {
+  return de(ue(t, e), o);
 }
-function de(o) {
+function ge(o) {
   var t;
-  const e = C(o);
+  const e = S(o);
   return (t = e == null ? void 0 : e.$el) !== null && t !== void 0 ? t : e;
 }
-let g;
-const F = /* @__PURE__ */ new Map();
-function ce(o) {
-  return g || (g = _), o && !F.get(o) && (F.set(o, !0), _.languages.getLanguages().some((t) => t.id === o) || _.languages.register({ id: o })), g;
+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 ue(o, t) {
+function he(o, t) {
   let e, n = !1;
-  const r = U({
+  const a = D({
     editorStatus: "loading",
     searchBoxIsRevealed: !1,
     hasContent: !1,
     theme: t.theme || "light"
-  }), i = (a) => {
-    !n || !e || e.setValue(a);
-  }, s = (a) => e == null ? void 0 : e.updateOptions({ readOnly: a }), u = () => e == null ? void 0 : e.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 || !a) return;
-      e.focus(), e.trigger("keyboard", a, null);
+      if (!e || !r) return;
+      e.focus(), e.trigger("keyboard", r, null);
     } catch (f) {
-      console.error(`useMonacoEditor: Failed to trigger command: ${a}`, f);
+      console.error(`useMonacoEditor: Failed to trigger command: ${r}`, f);
     }
-  }, p = () => {
-    var a;
+  }, v = () => {
+    var r;
     try {
       if (!e) return;
-      if (r.searchBoxIsRevealed)
-        return (a = e.getContribution("editor.contrib.findController")) == null ? void 0 : a.closeFindWidget();
+      if (a.searchBoxIsRevealed)
+        return (r = e.getContribution("editor.contrib.findController")) == null ? void 0 : r.closeFindWidget();
       l("actions.find");
     } catch (f) {
       console.error("useMonacoEditor: Failed to close findController.", f);
     }
-  }, d = /* @__PURE__ */ le(() => g == null ? void 0 : g.editor.remeasureFonts(), 200);
+  }, c = /* @__PURE__ */ me(() => m.editor.remeasureFonts(), 200);
   return (() => {
-    const a = ce(t.language), f = a.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`), B = a.editor.createModel(t.code.value, t.language, f);
-    K(() => C(o), (L) => {
+    fe();
+    let r;
+    j([L, () => S(o)], ([f, R]) => {
       var O;
-      const b = de(L);
-      if (!(b instanceof HTMLElement)) {
+      const E = ge(R);
+      if (!(E instanceof HTMLElement) || !f) {
         n = !1;
         return;
       }
       if (!n) {
-        e = a.editor.create(b, {
-          ...re,
+        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: r.theme,
-          model: B,
+          theme: a.theme === "light" ? "catppuccin-latte" : "catppuccin-mocha",
+          model: r,
           editContext: !1,
           ...t.monacoOptions
-        }), n = !0, r.editorStatus = "ready", r.hasContent = !!t.code.value, e.onDidChangeModelContent(() => {
+        }), n = !0, a.editorStatus = "ready", a.hasContent = !!t.code.value, e.onDidChangeModelContent(() => {
           var h;
-          const m = e.getValue();
-          r.hasContent = !!m.length, (h = t.onChanged) == null || h.call(t, m);
-        }), (O = t.onCreated) == null || O.call(t), d();
+          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 m = e.getContribution("editor.contrib.findController");
-          if (m) {
-            const h = m.getState();
+          const d = e.getContribution("editor.contrib.findController");
+          if (d) {
+            const h = d.getState();
             h.onFindReplaceStateChange(() => {
-              r.searchBoxIsRevealed = h.isRevealed;
+              a.searchBoxIsRevealed = h.isRevealed;
             });
           }
-        } catch (m) {
-          console.error("useMonacoEditor: Failed to get the state of findController", m);
+        } catch (d) {
+          console.error("useMonacoEditor: Failed to get the state of findController", d);
         }
       }
     }, {
       immediate: !0,
       flush: "post"
     });
-  })(), D(d), P(d), V(() => {
+  })(), P(c), U(c), V(() => {
     if (!e) return;
-    const a = e.getModel();
-    e.dispose(), a && a.dispose();
+    const r = e.getModel();
+    e.dispose(), r && r.dispose();
   }), {
     editor: e,
-    editorStates: r,
+    editorStates: a,
     setContent: i,
     setReadOnly: s,
-    focus: u,
-    remeasureFonts: d,
-    toggleSearchWidget: p,
+    focus: g,
+    remeasureFonts: c,
+    toggleSearchWidget: v,
     triggerKeyboardCommand: l
   };
 }
-const me = {
+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"
   }
-}, ge = {
-  editor: me
+}, ye = {
+  editor: pe
 };
-function fe() {
-  const o = X("en-us", ge);
+function ve() {
+  const o = ne("en-us", ye);
   return {
     i18n: o,
-    i18nT: ee(o)
+    i18nT: ae(o)
     // Translation component <i18n-t>
   };
 }
-const he = /* @__PURE__ */ N({
+const Ce = /* @__PURE__ */ W({
   __name: "MonacoEditorStatusOverlay",
   props: {
     title: {},
@@ -210,30 +234,30 @@ const he = /* @__PURE__ */ N({
   },
   setup(o) {
     return (t, e) => {
-      const n = A("KEmptyState");
-      return y(), S(n, {
+      const n = K("KEmptyState");
+      return y(), _(n, {
         class: "monaco-editor-status-overlay",
         message: o.message,
         title: o.title
-      }, $({ _: 2 }, [
+      }, A({ _: 2 }, [
         o.icon ? {
           name: "icon",
-          fn: E(() => [
-            (y(), S(z(o.icon), { decorative: "" }))
+          fn: b(() => [
+            (y(), _(H(o.icon), { decorative: "" }))
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["message", "title"]);
     };
   }
-}), R = (o, t) => {
+}), N = (o, t) => {
   const e = o.__vccOpts || o;
-  for (const [n, r] of t)
-    e[n] = r;
+  for (const [n, a] of t)
+    e[n] = a;
   return e;
-}, W = /* @__PURE__ */ R(he, [["__scopeId", "data-v-062eadb5"]]), ye = /* @__PURE__ */ N({
+}, F = /* @__PURE__ */ N(Ce, [["__scopeId", "data-v-062eadb5"]]), Se = /* @__PURE__ */ W({
   __name: "MonacoEditor",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ $({
     theme: { default: "light" },
     language: { default: "markdown" },
     options: { default: () => {
@@ -247,19 +271,19 @@ const he = /* @__PURE__ */ N({
   }),
   emits: ["update:modelValue"],
   setup(o) {
-    const t = G(o, "modelValue"), { i18n: e } = fe(), n = j("editorRef"), r = M(() => o.theme === "dark" ? "dark" : "light"), i = M(() => s.editorStates.editorStatus === "ready" && !s.editorStates.hasContent), s = ue(n, {
+    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: r.value,
+      theme: a.value,
       monacoOptions: o.options,
-      onChanged: (u) => {
-        t.value = u;
+      onChanged: (g) => {
+        t.value = g;
       }
     });
-    return (u, l) => (y(), q("div", {
+    return (g, l) => (y(), q("div", {
       class: J(["monaco-editor-container", [
-        r.value,
-        { loading: c(s).editorStates.editorStatus === "loading" }
+        a.value,
+        { loading: u(s).editorStates.editorStatus === "loading" }
       ]]),
       "data-testid": "monaco-editor-container"
     }, [
@@ -269,31 +293,31 @@ const he = /* @__PURE__ */ N({
         class: "monaco-editor-target",
         "data-testid": "monaco-editor-target"
       }, null, 512),
-      I(u.$slots, "state-loading", {
-        isLoading: c(s).editorStates.editorStatus === "loading"
+      T(g.$slots, "state-loading", {
+        isLoading: u(s).editorStates.editorStatus === "loading"
       }, () => [
-        T(k, { name: "fade" }, {
-          default: E(() => [
-            c(s).editorStates.editorStatus === "loading" ? (y(), S(W, {
+        I(k, { name: "fade" }, {
+          default: b(() => [
+            u(s).editorStates.editorStatus === "loading" ? (y(), _(F, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-loading",
-              icon: c(Y),
-              message: c(e).t("editor.messages.loading_message", { type: o.language }),
-              title: c(e).t("editor.messages.loading_title", { type: o.language })
+              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),
-      I(u.$slots, "state-empty", { isEmpty: i.value }, () => [
-        T(k, { name: "fade" }, {
-          default: E(() => [
-            i.value ? (y(), S(W, {
+      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: c(Z),
-              message: c(e).t("editor.messages.empty_message"),
-              title: c(e).t("editor.messages.empty_title")
+              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
@@ -301,8 +325,8 @@ const he = /* @__PURE__ */ N({
       ], !0)
     ], 2));
   }
-}), Se = /* @__PURE__ */ R(ye, [["__scopeId", "data-v-c8f35a88"]]);
+}), Te = /* @__PURE__ */ N(Se, [["__scopeId", "data-v-c8f35a88"]]);
 export {
-  Se as MonacoEditor,
-  ue as useMonacoEditor
+  Te as MonacoEditor,
+  he as useMonacoEditor
 };

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

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(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"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-monaco-editor"]={},s.Vue,s.KongIcons,s.monaco,s["kong-ui-public-i18n"]))})(this,function(s,e,S,F,O){"use strict";function N(o){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>o[t]})}}return n.default=o,Object.freeze(n)}const C=N(F),x=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 b=()=>{};function B(o,n){function t(...r){return new Promise((i,c)=>{Promise.resolve(o(()=>n.apply(this,r),{fn:n,thisArg:this,args:r})).then(i).catch(c)})}return t}function U(o,n={}){let t,r,i=b;const c=d=>{clearTimeout(d),i(),i=b};let l;return d=>{const y=e.toValue(o),u=e.toValue(n.maxWait);return t&&c(t),y<=0||u!==void 0&&u<=0?(r&&(c(r),r=void 0),Promise.resolve(d())):new Promise((_,a)=>{i=n.rejectOnCancel?a:_,l=d,u&&!r&&(r=setTimeout(()=>{t&&c(t),r=void 0,_(l())},u)),t=setTimeout(()=>{r&&c(r),r=void 0,_(d())},y)})}}function V(o,n=200,t={}){return B(U(n,t),o)}function W(o){var n;const t=e.toValue(o);return(n=t==null?void 0:t.$el)!==null&&n!==void 0?n:t}let g;const E=new Map;function D(o){return g||(g=C),o&&!E.get(o)&&(E.set(o,!0),C.languages.getLanguages().some(n=>n.id===o)||C.languages.register({id:o})),g}function I(o,n){let t,r=!1;const i=e.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:n.theme||"light"}),c=a=>{!r||!t||t.setValue(a)},l=a=>t==null?void 0:t.updateOptions({readOnly:a}),m=()=>t==null?void 0:t.focus(),d=a=>{try{if(!t||!a)return;t.focus(),t.trigger("keyboard",a,null)}catch(p){console.error(`useMonacoEditor: Failed to trigger command: ${a}`,p)}},y=()=>{var a;try{if(!t)return;if(i.searchBoxIsRevealed)return(a=t.getContribution("editor.contrib.findController"))==null?void 0:a.closeFindWidget();d("actions.find")}catch(p){console.error("useMonacoEditor: Failed to close findController.",p)}},u=V(()=>g==null?void 0:g.editor.remeasureFonts(),200);return(()=>{const a=D(n.language),p=a.Uri.parse(`inmemory://model/${n.language}-${crypto.randomUUID()}`),j=a.editor.createModel(n.code.value,n.language,p);e.watch(()=>e.toValue(o),H=>{var w;const M=W(H);if(!(M instanceof HTMLElement)){r=!1;return}if(!r){t=a.editor.create(M,{...x,readOnly:n.readOnly||!1,language:n.language,theme:i.theme,model:j,editContext:!1,...n.monacoOptions}),r=!0,i.editorStatus="ready",i.hasContent=!!n.code.value,t.onDidChangeModelContent(()=>{var h;const f=t.getValue();i.hasContent=!!f.length,(h=n.onChanged)==null||h.call(n,f)}),(w=n.onCreated)==null||w.call(n),u();try{const f=t.getContribution("editor.contrib.findController");if(f){const h=f.getState();h.onFindReplaceStateChange(()=>{i.searchBoxIsRevealed=h.isRevealed})}}catch(f){console.error("useMonacoEditor: Failed to get the state of findController",f)}}},{immediate:!0,flush:"post"})})(),e.onMounted(u),e.onActivated(u),e.onBeforeUnmount(()=>{if(!t)return;const a=t.getModel();t.dispose(),a&&a.dispose()}),{editor:t,editorStates:i,setContent:c,setReadOnly:l,focus:m,remeasureFonts:u,toggleSearchWidget:y,triggerKeyboardCommand:d}}const R={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 K(){const o=O.createI18n("en-us",R);return{i18n:o,i18nT:O.i18nTComponent(o)}}const L=e.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(o){return(n,t)=>{const r=e.resolveComponent("KEmptyState");return e.openBlock(),e.createBlock(r,{class:"monaco-editor-status-overlay",message:o.message,title:o.title},e.createSlots({_:2},[o.icon?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),T=(o,n)=>{const t=o.__vccOpts||o;for(const[r,i]of n)t[r]=i;return t},k=T(L,[["__scopeId","data-v-062eadb5"]]),P=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(o){const n=e.useModel(o,"modelValue"),{i18n:t}=K(),r=e.useTemplateRef("editorRef"),i=e.computed(()=>o.theme==="dark"?"dark":"light"),c=e.computed(()=>l.editorStates.editorStatus==="ready"&&!l.editorStates.hasContent),l=I(r,{language:o.language,code:n,theme:i.value,monacoOptions:o.options,onChanged:m=>{n.value=m}});return(m,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["monaco-editor-container",[i.value,{loading:e.unref(l).editorStates.editorStatus==="loading"}]]),"data-testid":"monaco-editor-container"},[e.createElementVNode("div",{ref_key:"editorRef",ref:r,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),e.renderSlot(m.$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(k,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:e.unref(S.ProgressIcon),message:e.unref(t).t("editor.messages.loading_message",{type:o.language}),title:e.unref(t).t("editor.messages.loading_title",{type:o.language})},null,8,["icon","message","title"])):e.createCommentVNode("",!0)]),_:1})],!0),e.renderSlot(m.$slots,"state-empty",{isEmpty:c.value},()=>[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createBlock(k,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:e.unref(S.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=P,s.useMonacoEditor=I,Object.defineProperty(s,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

@@ -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":"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;AA+B1E;;;;;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;EAoIlD"}
+{"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",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/runtime/monaco-editor.umd.js",
   "module": "./dist/runtime/monaco-editor.es.js",
@@ -46,7 +46,8 @@
   "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"
   },
@@ -55,11 +56,14 @@
     "@kong/icons": "^1.41.0",
     "@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",