@kong-ui-public/monaco-editor 0.8.1-pr.2793.a36bf7dcd.0 → 0.8.1-pr.2802.7ee435206.0

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

@@ -1,10 +1,10 @@
-import { toValue as w, ref as X, shallowRef as Y, reactive as Z, watch as x, onMounted as ee, onActivated as te, onBeforeUnmount as oe, onWatcherCleanup as ae, defineComponent as H, resolveComponent as ne, createBlock as O, openBlock as C, createSlots as re, withCtx as D, resolveDynamicComponent as se, mergeModels as R, useModel as ie, useTemplateRef as le, computed as T, createElementBlock as ce, normalizeClass as de, createElementVNode as ue, renderSlot as W, createVNode as N, Transition as U, createCommentVNode as B, unref as v } from "vue";
-import { ProgressIcon as ge, CodeblockIcon as me } from "@kong/icons";
+import { toValue as C, ref as Q, shallowRef as X, reactive as Y, watch as x, onMounted as Z, onActivated as ee, onBeforeUnmount as te, onWatcherCleanup as oe, defineComponent as z, resolveComponent as ae, createBlock as O, openBlock as E, createSlots as ne, withCtx as D, resolveDynamicComponent as re, mergeModels as R, useModel as se, useTemplateRef as ie, computed as T, createElementBlock as le, normalizeClass as ce, createElementVNode as de, renderSlot as W, createVNode as N, Transition as U, createCommentVNode as B, unref as v } from "vue";
+import { ProgressIcon as ue, CodeblockIcon as ge } from "@kong/icons";
 import * as m from "monaco-editor";
-import { shikiToMonaco as fe } from "@shikijs/monaco";
-import { getSingletonHighlighter as pe, bundledLanguages as he, bundledThemes as ve } from "shiki";
-import { createI18n as ye, i18nTComponent as Se } from "@kong-ui-public/i18n";
-const be = "'JetBrains Mono', Consolas, monospace", Ce = "12px", Ee = "500", Me = "20px", _e = Object.freeze({
+import { shikiToMonaco as me } from "@shikijs/monaco";
+import { getSingletonHighlighter as fe, bundledLanguages as pe, bundledThemes as he } from "shiki";
+import { createI18n as ve, i18nTComponent as ye } from "@kong-ui-public/i18n";
+const Se = "'JetBrains Mono', Consolas, monospace", be = "12px", Ce = "500", Ee = "20px", Me = Object.freeze({
   autoClosingQuotes: "always",
   automaticLayout: !0,
   // Auto resize layout
@@ -13,10 +13,10 @@ const be = "'JetBrains Mono', Consolas, monospace", Ce = "12px", Ee = "500", Me
   },
   hideCursorInOverviewRuler: !0,
   // hide the cursor position in the minimap TODO: maybe hide it on first line or change it colour
-  fontFamily: be,
-  fontSize: Number(Ce.replace("px", "")),
-  fontWeight: Ee,
-  lineHeight: Number(Me.replace("px", "")),
+  fontFamily: Se,
+  fontSize: Number(be.replace("px", "")),
+  fontWeight: Ce,
+  lineHeight: Number(Ee.replace("px", "")),
   formatOnPaste: !0,
   formatOnType: !0,
   // Add to enable automatic formatting as the user types.
@@ -73,14 +73,14 @@ function we(o, t) {
   }
   return e;
 }
-function Oe(o, t = {}) {
+function _e(o, t = {}) {
   let e, a, i = P;
   const r = (s) => {
     clearTimeout(s), i(), i = P;
   };
   let l;
   return (s) => {
-    const p = w(o), g = w(t.maxWait);
+    const p = C(o), g = C(t.maxWait);
     return e && r(e), p <= 0 || g !== void 0 && g <= 0 ? (a && (r(a), a = void 0), Promise.resolve(s())) : new Promise((c, h) => {
       i = t.rejectOnCancel ? h : c, l = s, g && !a && (a = setTimeout(() => {
         e && r(e), a = void 0, c(l());
@@ -91,25 +91,20 @@ function Oe(o, t = {}) {
   };
 }
 // @__NO_SIDE_EFFECTS__
-function ke(o, t = 200, e = {}) {
-  return we(Oe(t, e), o);
-}
-function $(o) {
-  var t;
-  const e = w(o);
-  return (t = e == null ? void 0 : e.$el) !== null && t !== void 0 ? t : e;
+function Oe(o, t = 200, e = {}) {
+  return we(_e(t, e), o);
 }
 const F = "[monaco-editor] [lifecycle]", y = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new WeakMap();
-function Te(o) {
+function ke(o) {
   let t = y.get(o.source);
   if (!t) {
     let e;
     switch (o.type) {
       case "editor":
-        e = o.source.onDidDispose(() => K(o.source));
+        e = o.source.onDidDispose(() => $(o.source));
         break;
       case "model":
-        e = o.source.onWillDispose(() => K(o.source));
+        e = o.source.onWillDispose(() => $(o.source));
         break;
       default:
         throw new Error(`${F} Unknown scope: ${o}`);
@@ -121,18 +116,18 @@ function Te(o) {
   }
   return t;
 }
-function G(o) {
+function H(o) {
   const t = y.get(o);
   t && (t.scopeListener.dispose(), y.delete(o));
 }
 function A(o, t) {
-  Te(t).disposables.add(o);
+  ke(t).disposables.add(o);
 }
 function j(o, t) {
   const e = y.get(t.source);
-  e && (e.disposables.delete(o), e.disposables.size === 0 && G(t.source));
+  e && (e.disposables.delete(o), e.disposables.size === 0 && H(t.source));
 }
-function Ie(o) {
+function Te(o) {
   const t = [];
   if (o.forEach((e) => {
     try {
@@ -146,7 +141,7 @@ function Ie(o) {
       `${F} One or more disposables threw while being disposed.`
     );
 }
-function xe(o, t) {
+function Ie(o, t) {
   var l, f;
   let e = o, a = S.get(e);
   if (!a) {
@@ -165,45 +160,45 @@ function xe(o, t) {
   return S.set(e, { decorated: r, scope: t }), I.set(r, e), t && A(r, t), r;
 }
 function V(o, t) {
-  return xe(t, { type: "editor", source: o });
+  return Ie(t, { type: "editor", source: o });
 }
-function K(o) {
+function $(o) {
   const t = y.get(o);
   if (!t) return;
   const e = Array.from(t.disposables);
   try {
-    Ie(e);
+    Te(e);
   } catch (a) {
     console.warn(`${F} Encountered errors while disposing scoped disposables:`, a, ", Source:", o);
   }
-  G(o);
+  H(o);
 }
-const q = X(!1);
+const G = Q(!1);
 let b = null;
-async function De() {
+async function xe() {
   return b || (b = (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 a = await pe(
+      const a = await fe(
         {
-          themes: Object.values(ve),
-          langs: Object.values(he)
+          themes: Object.values(he),
+          langs: Object.values(pe)
         }
       );
       a.getLoadedLanguages().forEach((i) => {
         m.languages.register({ id: i });
-      }), fe(a, m), q.value = !0;
+      }), me(a, m), G.value = !0;
     } catch (e) {
       throw b = null, e;
     }
   })(), b);
 }
-function Fe(o, t) {
-  const e = Y();
+function De(o, t) {
+  const e = X();
   let a, i = !1, r = !1;
-  const l = Z({
+  const l = Y({
     editorStatus: "loading",
     searchBoxIsRevealed: !1,
     hasContent: !1,
@@ -217,8 +212,8 @@ function Fe(o, t) {
     var n;
     return (n = e.value) == null ? void 0 : n.focus();
   }, g = (n) => {
-    var M;
-    const d = (M = e.value) == null ? void 0 : M.getModel();
+    var w;
+    const d = (w = e.value) == null ? void 0 : w.getModel();
     d && m.editor.setModelLanguage(d, n);
   }, c = (n) => {
     try {
@@ -237,22 +232,22 @@ function Fe(o, t) {
     } catch (d) {
       console.error("useMonacoEditor: Failed to close findController.", d);
     }
-  }, E = /* @__PURE__ */ ke(() => m.editor.remeasureFonts(), 200);
+  }, M = /* @__PURE__ */ Oe(() => m.editor.remeasureFonts(), 200);
   return (() => {
-    De(), x([q, () => w(o)], ([n, d], [, M]) => {
+    xe(), x([G, () => C(o)], ([n, d], [, w]) => {
       var L;
-      const k = $(d), Q = $(M);
+      const k = C(d), J = C(w);
       if (!(k instanceof HTMLElement) || !n) {
         i = !1;
         return;
       }
-      if (!(i && Q === k)) {
+      if (!(i && J === k)) {
         if (!a) {
           const u = m.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);
           a = m.editor.createModel(t.code.value, t.language, u);
         }
         e.value = m.editor.create(k, {
-          ..._e,
+          ...Me,
           readOnly: t.readOnly || !1,
           language: t.language,
           theme: l.theme === "light" ? "catppuccin-latte" : "catppuccin-mocha",
@@ -266,7 +261,7 @@ function Fe(o, t) {
             const u = e.value.getValue();
             l.hasContent = !!u.length, t.code.value = u;
           })
-        ), (L = t.onReady) == null || L.call(t, e.value), E();
+        ), (L = t.onReady) == null || L.call(t, e.value), M();
         try {
           const u = e.value.getContribution("editor.contrib.findController"), _ = u == null ? void 0 : u.getState();
           V(
@@ -279,7 +274,7 @@ function Fe(o, t) {
         } catch (u) {
           console.error("useMonacoEditor: Failed to get the state of findController", u);
         }
-        ae(() => {
+        oe(() => {
           var u;
           (u = e.value) == null || u.dispose();
         });
@@ -297,7 +292,7 @@ function Fe(o, t) {
         text: n
       }
     ]), e.value.pushUndoStop(), l.hasContent = !!n.length, r = !1);
-  }), ee(E), te(E), oe(() => {
+  }), Z(M), ee(M), te(() => {
     if (!e.value) return;
     const n = e.value.getModel();
     e.value.dispose(), n && n.dispose();
@@ -308,30 +303,30 @@ function Fe(o, t) {
     setReadOnly: s,
     focus: p,
     setLanguage: g,
-    remeasureFonts: E,
+    remeasureFonts: M,
     toggleSearchWidget: h,
     triggerKeyboardCommand: c
   };
 }
-const Le = {
+const Fe = {
   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"
   }
-}, Re = {
-  editor: Le
+}, Le = {
+  editor: Fe
 };
-function We() {
-  const o = ye("en-us", Re);
+function Re() {
+  const o = ve("en-us", Le);
   return {
     i18n: o,
-    i18nT: Se(o)
+    i18nT: ye(o)
     // Translation component <i18n-t>
   };
 }
-const Ne = /* @__PURE__ */ H({
+const We = /* @__PURE__ */ z({
   __name: "MonacoEditorStatusOverlay",
   props: {
     title: {},
@@ -340,28 +335,28 @@ const Ne = /* @__PURE__ */ H({
   },
   setup(o) {
     return (t, e) => {
-      const a = ne("KEmptyState");
-      return C(), O(a, {
+      const a = ae("KEmptyState");
+      return E(), O(a, {
         class: "monaco-editor-status-overlay",
         message: o.message,
         title: o.title
-      }, re({ _: 2 }, [
+      }, ne({ _: 2 }, [
         o.icon ? {
           name: "icon",
           fn: D(() => [
-            (C(), O(se(o.icon), { decorative: "" }))
+            (E(), O(re(o.icon), { decorative: "" }))
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["message", "title"]);
     };
   }
-}), J = (o, t) => {
+}), q = (o, t) => {
   const e = o.__vccOpts || o;
   for (const [a, i] of t)
     e[a] = i;
   return e;
-}, z = /* @__PURE__ */ J(Ne, [["__scopeId", "data-v-062eadb5"]]), Ue = /* @__PURE__ */ H({
+}, K = /* @__PURE__ */ q(We, [["__scopeId", "data-v-062eadb5"]]), Ne = /* @__PURE__ */ z({
   __name: "MonacoEditor",
   props: /* @__PURE__ */ R({
     theme: { default: "light" },
@@ -378,7 +373,7 @@ const Ne = /* @__PURE__ */ H({
   }),
   emits: /* @__PURE__ */ R(["ready"], ["update:modelValue"]),
   setup(o, { expose: t, emit: e }) {
-    const a = e, i = ie(o, "modelValue"), { i18n: r } = We(), l = le("editorRef"), f = T(() => o.theme === "dark" ? "dark" : "light"), s = T(() => g.editorStates.editorStatus === "loading" || o.loading), p = T(() => g.editorStates.editorStatus === "ready" && !g.editorStates.hasContent), g = Fe(l, {
+    const a = e, i = se(o, "modelValue"), { i18n: r } = Re(), l = ie("editorRef"), f = T(() => o.theme === "dark" ? "dark" : "light"), s = T(() => g.editorStates.editorStatus === "loading" || o.loading), p = T(() => g.editorStates.editorStatus === "ready" && !g.editorStates.hasContent), g = De(l, {
       language: o.language,
       code: i,
       theme: f.value,
@@ -391,14 +386,14 @@ const Ne = /* @__PURE__ */ H({
       monacoEditor: g
     }), x(() => o.language, (c, h) => {
       c !== h && g.setLanguage(c);
-    }), (c, h) => (C(), ce("div", {
-      class: de(["monaco-editor-container", [
+    }), (c, h) => (E(), le("div", {
+      class: ce(["monaco-editor-container", [
         f.value,
         { loading: s.value }
       ]]),
       "data-testid": "monaco-editor-container"
     }, [
-      ue("div", {
+      de("div", {
         ref_key: "editorRef",
         ref: l,
         class: "monaco-editor-target",
@@ -407,10 +402,10 @@ const Ne = /* @__PURE__ */ H({
       W(c.$slots, "state-loading", { isLoading: s.value }, () => [
         N(U, { name: "fade" }, {
           default: D(() => [
-            s.value ? (C(), O(z, {
+            s.value ? (E(), O(K, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-loading",
-              icon: v(ge),
+              icon: v(ue),
               message: v(r).t("editor.messages.loading_message", { type: o.language }),
               title: v(r).t("editor.messages.loading_title", { type: o.language })
             }, null, 8, ["icon", "message", "title"])) : B("", !0)
@@ -421,10 +416,10 @@ const Ne = /* @__PURE__ */ H({
       W(c.$slots, "state-empty", { isEmpty: p.value }, () => [
         N(U, { name: "fade" }, {
           default: D(() => [
-            p.value && !s.value ? (C(), O(z, {
+            p.value && !s.value ? (E(), O(K, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-empty",
-              icon: v(me),
+              icon: v(ge),
               message: v(r).t("editor.messages.empty_message"),
               title: v(r).t("editor.messages.empty_title")
             }, null, 8, ["icon", "message", "title"])) : B("", !0)
@@ -434,8 +429,8 @@ const Ne = /* @__PURE__ */ H({
       ], !0)
     ], 2));
   }
-}), Ke = /* @__PURE__ */ J(Ue, [["__scopeId", "data-v-e2083635"]]);
+}), $e = /* @__PURE__ */ q(Ne, [["__scopeId", "data-v-e2083635"]]);
 export {
-  Ke as MonacoEditor,
-  Fe as useMonacoEditor
+  $e as MonacoEditor,
+  De as useMonacoEditor
 };

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

@@ -1 +1 @@
-(function(u,n){typeof exports=="object"&&typeof module<"u"?n(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"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u["kong-ui-public-monaco-editor"]={},u.Vue,u.KongIcons,u.monaco,u.monaco$1,u.shiki,u["kong-ui-public-i18n"]))})(this,function(u,n,D,$,A,O,v){"use strict";function H(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const p=H($),q=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 x=()=>{};function z(o,t){function e(...a){return new Promise((l,i)=>{Promise.resolve(o(()=>t.apply(this,a),{fn:t,thisArg:this,args:a})).then(l).catch(i)})}return e}function G(o,t={}){let e,a,l=x;const i=s=>{clearTimeout(s),l(),l=x};let c;return s=>{const y=n.toValue(o),m=n.toValue(t.maxWait);return e&&i(e),y<=0||m!==void 0&&m<=0?(a&&(i(a),a=void 0),Promise.resolve(s())):new Promise((d,S)=>{l=t.rejectOnCancel?S:d,c=s,m&&!a&&(a=setTimeout(()=>{e&&i(e),a=void 0,d(c())},m)),e=setTimeout(()=>{a&&i(a),a=void 0,d(s())},y)})}}function Y(o,t=200,e={}){return z(G(t,e),o)}function F(o){var t;const e=n.toValue(o);return(t=e==null?void 0:e.$el)!==null&&t!==void 0?t:e}const I="[monaco-editor] [lifecycle]",b=new WeakMap,_=new Map,T=new WeakMap;function Z(o){let t=b.get(o.source);if(!t){let e;switch(o.type){case"editor":e=o.source.onDidDispose(()=>R(o.source));break;case"model":e=o.source.onWillDispose(()=>R(o.source));break;default:throw new Error(`${I} Unknown scope: ${o}`)}t={disposables:new Set,scopeListener:e},b.set(o.source,t)}return t}function L(o){const t=b.get(o);t&&(t.scopeListener.dispose(),b.delete(o))}function N(o,t){Z(t).disposables.add(o)}function W(o,t){const e=b.get(t.source);e&&(e.disposables.delete(o),e.disposables.size===0&&L(t.source))}function J(o){const t=[];if(o.forEach(e=>{try{e.dispose()}catch(a){t.push(a)}}),t.length)throw new AggregateError(t,`${I} One or more disposables threw while being disposed.`)}function Q(o,t){var c,h;let e=o,a=_.get(e);if(!a){const s=T.get(o);s&&(e=s,a=_.get(s))}if(a)return((c=a.scope)==null?void 0:c.type)===(t==null?void 0:t.type)&&((h=a.scope)==null?void 0:h.source)===(t==null?void 0:t.source)||(a.scope&&W(a.decorated,a.scope),t?(N(a.decorated,t),a.scope=t):a.scope=void 0),a.decorated;const l=e.dispose,i={dispose:()=>{const s=_.get(e);if(s)return s.scope&&W(i,s.scope),_.delete(e),T.delete(i),l.call(e)}};return _.set(e,{decorated:i,scope:t}),T.set(i,e),t&&N(i,t),i}function B(o,t){return Q(t,{type:"editor",source:o})}function R(o){const t=b.get(o);if(!t)return;const e=Array.from(t.disposables);try{J(e)}catch(a){console.warn(`${I} Encountered errors while disposing scoped disposables:`,a,", Source:",o)}L(o)}const U=n.ref(!1);let k=null;async function X(){return k||(k=(async()=>{var o,t;try{const e=((o=p.json)==null?void 0:o.jsonDefaults)||((t=p.languages.json)==null?void 0:t.jsonDefaults);e==null||e.setModeConfiguration({tokens:!1});const a=await O.getSingletonHighlighter({themes:Object.values(O.bundledThemes),langs:Object.values(O.bundledLanguages)});a.getLoadedLanguages().forEach(l=>{p.languages.register({id:l})}),A.shikiToMonaco(a,p),U.value=!0}catch(e){throw k=null,e}})(),k)}function j(o,t){const e=n.shallowRef();let a,l=!1,i=!1;const c=n.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:t.theme||"light"}),h=r=>{!l||!e.value||e.value.setValue(r)},s=r=>{var f;return(f=e.value)==null?void 0:f.updateOptions({readOnly:r})},y=()=>{var r;return(r=e.value)==null?void 0:r.focus()},m=r=>{var M;const f=(M=e.value)==null?void 0:M.getModel();f&&p.editor.setModelLanguage(f,r)},d=r=>{try{if(!e.value||!r)return;e.value.focus(),e.value.trigger("keyboard",r,null)}catch(f){console.error(`useMonacoEditor: Failed to trigger command: ${r}`,f)}},S=()=>{var r;try{if(!e.value)return;if(c.searchBoxIsRevealed)return(r=e.value.getContribution("editor.contrib.findController"))==null?void 0:r.closeFindWidget();d("actions.find")}catch(f){console.error("useMonacoEditor: Failed to close findController.",f)}},E=Y(()=>p.editor.remeasureFonts(),200);return(()=>{X(),n.watch([U,()=>n.toValue(o)],([r,f],[,M])=>{var K;const w=F(f),ae=F(M);if(!(w instanceof HTMLElement)||!r){l=!1;return}if(!(l&&ae===w)){if(!a){const g=p.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);a=p.editor.createModel(t.code.value,t.language,g)}e.value=p.editor.create(w,{...q,readOnly:t.readOnly||!1,language:t.language,theme:c.theme==="light"?"catppuccin-latte":"catppuccin-mocha",model:a,editContext:!1,...t.monacoOptions}),l=!0,c.editorStatus="ready",c.hasContent=!!t.code.value,B(e.value,e.value.onDidChangeModelContent(()=>{if(i)return;const g=e.value.getValue();c.hasContent=!!g.length,t.code.value=g})),(K=t.onReady)==null||K.call(t,e.value),E();try{const g=e.value.getContribution("editor.contrib.findController"),C=g==null?void 0:g.getState();B(e.value,C==null?void 0:C.onFindReplaceStateChange(()=>{c.searchBoxIsRevealed=C.isRevealed}))}catch(g){console.error("useMonacoEditor: Failed to get the state of findController",g)}n.onWatcherCleanup(()=>{var g;(g=e.value)==null||g.dispose()})}},{immediate:!0,flush:"post"})})(),n.watch(t.code,r=>{if(!e.value||!a||!l)return;const f=a.getValue();r!==f&&(i=!0,e.value.executeEdits("external",[{range:a.getFullModelRange(),text:r}]),e.value.pushUndoStop(),c.hasContent=!!r.length,i=!1)}),n.onMounted(E),n.onActivated(E),n.onBeforeUnmount(()=>{if(!e.value)return;const r=e.value.getModel();e.value.dispose(),r&&r.dispose()}),{editor:e,editorStates:c,setContent:h,setReadOnly:s,focus:y,setLanguage:m,remeasureFonts:E,toggleSearchWidget:S,triggerKeyboardCommand:d}}const ee={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 te(){const o=v.createI18n("en-us",ee);return{i18n:o,i18nT:v.i18nTComponent(o)}}const oe=n.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(o){return(t,e)=>{const a=n.resolveComponent("KEmptyState");return n.openBlock(),n.createBlock(a,{class:"monaco-editor-status-overlay",message:o.message,title:o.title},n.createSlots({_:2},[o.icon?{name:"icon",fn:n.withCtx(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),P=(o,t)=>{const e=o.__vccOpts||o;for(const[a,l]of t)e[a]=l;return e},V=P(oe,[["__scopeId","data-v-062eadb5"]]),ne=P(n.defineComponent({__name:"MonacoEditor",props:n.mergeModels({theme:{default:"light"},language:{default:"markdown"},loading:{type:Boolean,default:!1},options:{default:()=>{}}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:n.mergeModels(["ready"],["update:modelValue"]),setup(o,{expose:t,emit:e}){const a=e,l=n.useModel(o,"modelValue"),{i18n:i}=te(),c=n.useTemplateRef("editorRef"),h=n.computed(()=>o.theme==="dark"?"dark":"light"),s=n.computed(()=>m.editorStates.editorStatus==="loading"||o.loading),y=n.computed(()=>m.editorStates.editorStatus==="ready"&&!m.editorStates.hasContent),m=j(c,{language:o.language,code:l,theme:h.value,monacoOptions:o.options,onReady:d=>{a("ready",d)}});return t({monacoEditor:m}),n.watch(()=>o.language,(d,S)=>{d!==S&&m.setLanguage(d)}),(d,S)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["monaco-editor-container",[h.value,{loading:s.value}]]),"data-testid":"monaco-editor-container"},[n.createElementVNode("div",{ref_key:"editorRef",ref:c,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),n.renderSlot(d.$slots,"state-loading",{isLoading:s.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:n.unref(D.ProgressIcon),message:n.unref(i).t("editor.messages.loading_message",{type:o.language}),title:n.unref(i).t("editor.messages.loading_title",{type:o.language})},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0),n.renderSlot(d.$slots,"state-empty",{isEmpty:y.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[y.value&&!s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:n.unref(D.CodeblockIcon),message:n.unref(i).t("editor.messages.empty_message"),title:n.unref(i).t("editor.messages.empty_title")},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0)],2))}}),[["__scopeId","data-v-e2083635"]]);u.MonacoEditor=ne,u.useMonacoEditor=j,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(u,n){typeof exports=="object"&&typeof module<"u"?n(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"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u["kong-ui-public-monaco-editor"]={},u.Vue,u.KongIcons,u.monaco,u.monaco$1,u.shiki,u["kong-ui-public-i18n"]))})(this,function(u,n,D,K,A,O,x){"use strict";function $(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const p=$(K),H=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 F=()=>{};function q(o,t){function e(...a){return new Promise((l,i)=>{Promise.resolve(o(()=>t.apply(this,a),{fn:t,thisArg:this,args:a})).then(l).catch(i)})}return e}function z(o,t={}){let e,a,l=F;const i=s=>{clearTimeout(s),l(),l=F};let c;return s=>{const y=n.toValue(o),m=n.toValue(t.maxWait);return e&&i(e),y<=0||m!==void 0&&m<=0?(a&&(i(a),a=void 0),Promise.resolve(s())):new Promise((d,S)=>{l=t.rejectOnCancel?S:d,c=s,m&&!a&&(a=setTimeout(()=>{e&&i(e),a=void 0,d(c())},m)),e=setTimeout(()=>{a&&i(a),a=void 0,d(s())},y)})}}function G(o,t=200,e={}){return q(z(t,e),o)}const I="[monaco-editor] [lifecycle]",b=new WeakMap,_=new Map,T=new WeakMap;function Y(o){let t=b.get(o.source);if(!t){let e;switch(o.type){case"editor":e=o.source.onDidDispose(()=>B(o.source));break;case"model":e=o.source.onWillDispose(()=>B(o.source));break;default:throw new Error(`${I} Unknown scope: ${o}`)}t={disposables:new Set,scopeListener:e},b.set(o.source,t)}return t}function v(o){const t=b.get(o);t&&(t.scopeListener.dispose(),b.delete(o))}function L(o,t){Y(t).disposables.add(o)}function N(o,t){const e=b.get(t.source);e&&(e.disposables.delete(o),e.disposables.size===0&&v(t.source))}function Z(o){const t=[];if(o.forEach(e=>{try{e.dispose()}catch(a){t.push(a)}}),t.length)throw new AggregateError(t,`${I} One or more disposables threw while being disposed.`)}function J(o,t){var c,h;let e=o,a=_.get(e);if(!a){const s=T.get(o);s&&(e=s,a=_.get(s))}if(a)return((c=a.scope)==null?void 0:c.type)===(t==null?void 0:t.type)&&((h=a.scope)==null?void 0:h.source)===(t==null?void 0:t.source)||(a.scope&&N(a.decorated,a.scope),t?(L(a.decorated,t),a.scope=t):a.scope=void 0),a.decorated;const l=e.dispose,i={dispose:()=>{const s=_.get(e);if(s)return s.scope&&N(i,s.scope),_.delete(e),T.delete(i),l.call(e)}};return _.set(e,{decorated:i,scope:t}),T.set(i,e),t&&L(i,t),i}function W(o,t){return J(t,{type:"editor",source:o})}function B(o){const t=b.get(o);if(!t)return;const e=Array.from(t.disposables);try{Z(e)}catch(a){console.warn(`${I} Encountered errors while disposing scoped disposables:`,a,", Source:",o)}v(o)}const R=n.ref(!1);let k=null;async function Q(){return k||(k=(async()=>{var o,t;try{const e=((o=p.json)==null?void 0:o.jsonDefaults)||((t=p.languages.json)==null?void 0:t.jsonDefaults);e==null||e.setModeConfiguration({tokens:!1});const a=await O.getSingletonHighlighter({themes:Object.values(O.bundledThemes),langs:Object.values(O.bundledLanguages)});a.getLoadedLanguages().forEach(l=>{p.languages.register({id:l})}),A.shikiToMonaco(a,p),R.value=!0}catch(e){throw k=null,e}})(),k)}function U(o,t){const e=n.shallowRef();let a,l=!1,i=!1;const c=n.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:t.theme||"light"}),h=r=>{!l||!e.value||e.value.setValue(r)},s=r=>{var g;return(g=e.value)==null?void 0:g.updateOptions({readOnly:r})},y=()=>{var r;return(r=e.value)==null?void 0:r.focus()},m=r=>{var M;const g=(M=e.value)==null?void 0:M.getModel();g&&p.editor.setModelLanguage(g,r)},d=r=>{try{if(!e.value||!r)return;e.value.focus(),e.value.trigger("keyboard",r,null)}catch(g){console.error(`useMonacoEditor: Failed to trigger command: ${r}`,g)}},S=()=>{var r;try{if(!e.value)return;if(c.searchBoxIsRevealed)return(r=e.value.getContribution("editor.contrib.findController"))==null?void 0:r.closeFindWidget();d("actions.find")}catch(g){console.error("useMonacoEditor: Failed to close findController.",g)}},E=G(()=>p.editor.remeasureFonts(),200);return(()=>{Q(),n.watch([R,()=>n.toValue(o)],([r,g],[,M])=>{var P;const w=n.toValue(g),ne=n.toValue(M);if(!(w instanceof HTMLElement)||!r){l=!1;return}if(!(l&&ne===w)){if(!a){const f=p.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);a=p.editor.createModel(t.code.value,t.language,f)}e.value=p.editor.create(w,{...H,readOnly:t.readOnly||!1,language:t.language,theme:c.theme==="light"?"catppuccin-latte":"catppuccin-mocha",model:a,editContext:!1,...t.monacoOptions}),l=!0,c.editorStatus="ready",c.hasContent=!!t.code.value,W(e.value,e.value.onDidChangeModelContent(()=>{if(i)return;const f=e.value.getValue();c.hasContent=!!f.length,t.code.value=f})),(P=t.onReady)==null||P.call(t,e.value),E();try{const f=e.value.getContribution("editor.contrib.findController"),C=f==null?void 0:f.getState();W(e.value,C==null?void 0:C.onFindReplaceStateChange(()=>{c.searchBoxIsRevealed=C.isRevealed}))}catch(f){console.error("useMonacoEditor: Failed to get the state of findController",f)}n.onWatcherCleanup(()=>{var f;(f=e.value)==null||f.dispose()})}},{immediate:!0,flush:"post"})})(),n.watch(t.code,r=>{if(!e.value||!a||!l)return;const g=a.getValue();r!==g&&(i=!0,e.value.executeEdits("external",[{range:a.getFullModelRange(),text:r}]),e.value.pushUndoStop(),c.hasContent=!!r.length,i=!1)}),n.onMounted(E),n.onActivated(E),n.onBeforeUnmount(()=>{if(!e.value)return;const r=e.value.getModel();e.value.dispose(),r&&r.dispose()}),{editor:e,editorStates:c,setContent:h,setReadOnly:s,focus:y,setLanguage:m,remeasureFonts:E,toggleSearchWidget:S,triggerKeyboardCommand:d}}const X={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 ee(){const o=x.createI18n("en-us",X);return{i18n:o,i18nT:x.i18nTComponent(o)}}const te=n.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(o){return(t,e)=>{const a=n.resolveComponent("KEmptyState");return n.openBlock(),n.createBlock(a,{class:"monaco-editor-status-overlay",message:o.message,title:o.title},n.createSlots({_:2},[o.icon?{name:"icon",fn:n.withCtx(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),j=(o,t)=>{const e=o.__vccOpts||o;for(const[a,l]of t)e[a]=l;return e},V=j(te,[["__scopeId","data-v-062eadb5"]]),oe=j(n.defineComponent({__name:"MonacoEditor",props:n.mergeModels({theme:{default:"light"},language:{default:"markdown"},loading:{type:Boolean,default:!1},options:{default:()=>{}}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:n.mergeModels(["ready"],["update:modelValue"]),setup(o,{expose:t,emit:e}){const a=e,l=n.useModel(o,"modelValue"),{i18n:i}=ee(),c=n.useTemplateRef("editorRef"),h=n.computed(()=>o.theme==="dark"?"dark":"light"),s=n.computed(()=>m.editorStates.editorStatus==="loading"||o.loading),y=n.computed(()=>m.editorStates.editorStatus==="ready"&&!m.editorStates.hasContent),m=U(c,{language:o.language,code:l,theme:h.value,monacoOptions:o.options,onReady:d=>{a("ready",d)}});return t({monacoEditor:m}),n.watch(()=>o.language,(d,S)=>{d!==S&&m.setLanguage(d)}),(d,S)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["monaco-editor-container",[h.value,{loading:s.value}]]),"data-testid":"monaco-editor-container"},[n.createElementVNode("div",{ref_key:"editorRef",ref:c,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),n.renderSlot(d.$slots,"state-loading",{isLoading:s.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:n.unref(D.ProgressIcon),message:n.unref(i).t("editor.messages.loading_message",{type:o.language}),title:n.unref(i).t("editor.messages.loading_title",{type:o.language})},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0),n.renderSlot(d.$slots,"state-empty",{isEmpty:y.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[y.value&&!s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:n.unref(D.CodeblockIcon),message:n.unref(i).t("editor.messages.empty_message"),title:n.unref(i).t("editor.messages.empty_title")},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0)],2))}}),[["__scopeId","data-v-e2083635"]]);u.MonacoEditor=oe,u.useMonacoEditor=U,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

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

@@ -1,13 +1,13 @@
 import * as monaco from 'monaco-editor';
-import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core';
+import type { MaybeRefOrGetter } from 'vue';
 import type { UseMonacoEditorOptions } from '../types';
 /**
  * Composable for integrating the Monaco Editor into Vue components.
- * @param {MaybeComputedElementRef} target - The target DOM element or Vue component ref where the editor will be mounted.
+ * @param {MaybeRefOrGetter<HTMLElement | null>} target - The target DOM element/ref/getter where the editor will be mounted.
  * @param {UseMonacoEditorOptions} options - Configuration options for the Monaco editor.
  * @returns {object} An object containing the editor instance and utility methods.
 */
-export declare function useMonacoEditor<T extends MaybeElement>(target: MaybeComputedElementRef<T>, options: UseMonacoEditorOptions): {
+export declare function useMonacoEditor<T extends HTMLElement>(target: MaybeRefOrGetter<T | null>, options: UseMonacoEditorOptions): {
     editor: import("vue").ShallowRef<monaco.editor.IStandaloneCodeEditor | undefined, monaco.editor.IStandaloneCodeEditor | undefined>;
     editorStates: {
         editorStatus: import("..").EditorStatus;

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;AAKvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,KAAK,EAAsB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAyC1E;;;;;EAKE;AACF,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,sBAAsB;;;;;;;;0BA2BF,MAAM,KAAG,IAAI;4BAOX,OAAO,KAAG,IAAI;iBAG3B,IAAI;4BAES,MAAM,KAAG,IAAI;;8BAuBb,IAAI;iCAXC,MAAM,KAAG,IAAI;EA6KlD"}
+{"version":3,"file":"useMonacoEditor.d.ts","sourceRoot":"","sources":["../../../../src/composables/useMonacoEditor.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAA;AAKvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAsB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAyC1E;;;;;EAKE;AACF,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EACnD,MAAM,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EAClC,OAAO,EAAE,sBAAsB;;;;;;;;0BA2BF,MAAM,KAAG,IAAI;4BAOX,OAAO,KAAG,IAAI;iBAG3B,IAAI;4BAES,MAAM,KAAG,IAAI;;8BAuBb,IAAI;iCAXC,MAAM,KAAG,IAAI;EA4KlD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/monaco-editor",
-  "version": "0.8.1-pr.2793.a36bf7dcd.0",
+  "version": "0.8.1-pr.2802.7ee435206.0",
   "type": "module",
   "description": "A kong UI Monaco Editor wrapper for Vue 3 with syntax highlighting powered by Shiki.",
   "main": "./dist/runtime/monaco-editor.umd.js",