@floegence/floe-webapp-core 0.35.15 → 0.35.16

package/dist/components/editor/CodeEditor.d.ts

@@ -0,0 +1,23 @@
+import { type JSX } from 'solid-js';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import 'monaco-editor/min/vs/editor/editor.main.css';
+export interface CodeEditorProps {
+    path: string;
+    language?: string;
+    value: string;
+    options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    class?: string;
+    style?: JSX.CSSProperties;
+    onReady?: (api: CodeEditorApi) => void;
+    onContentChange?: (e: monaco.editor.IModelContentChangedEvent, api: CodeEditorApi) => void;
+    onSelectionChange?: (selectionText: string, api: CodeEditorApi) => void;
+    onChange?: (value: string) => void;
+}
+export interface CodeEditorApi {
+    editor: monaco.editor.IStandaloneCodeEditor;
+    model: monaco.editor.ITextModel;
+    getValue: () => string;
+    getSelectedText: () => string;
+    focus: () => void;
+}
+export declare function CodeEditor(props: CodeEditorProps): JSX.Element;

package/dist/components/editor/CodeEditor.js

@@ -0,0 +1,118 @@
+import { use as R, effect as L, className as D, style as O, template as V } from "solid-js/web";
+import { onMount as b, createEffect as g, onCleanup as q } from "solid-js";
+import { useTheme as A } from "../../context/ThemeContext.js";
+import { useResizeObserver as F } from "../../hooks/useResizeObserver.js";
+import * as f from "monaco-editor/esm/vs/editor/editor.api.js";
+import "monaco-editor/min/vs/editor/editor.main.css";
+import { resolveCodeEditorLanguageSpec as U } from "./languages.js";
+import { ensureMonacoEnvironment as p } from "./monacoEnvironment.js";
+var z = /* @__PURE__ */ V("<div>");
+const M = {
+  readOnly: !0,
+  automaticLayout: !1,
+  minimap: {
+    enabled: !1
+  },
+  scrollBeyondLastLine: !1,
+  fontSize: 12,
+  lineHeight: 18,
+  tabSize: 2,
+  fontFamily: "var(--font-mono)"
+};
+let w = 0;
+function N(e, c) {
+  return f.Uri.parse(`inmemory://model/${e}/${encodeURIComponent(c)}`);
+}
+function _(e, c) {
+  if (!e || !c) return "";
+  const r = e.getSelection();
+  return !r || r.isEmpty() ? "" : c.getValueInRange(r);
+}
+function J(e) {
+  const c = A();
+  let r;
+  const x = ++w;
+  let n, o, s, S = null, v = 0;
+  const E = F(() => r), y = () => {
+    f.editor.setTheme(c.resolvedTheme() === "dark" ? "vs-dark" : "vs");
+  }, m = () => !n || !o ? null : {
+    editor: n,
+    model: o,
+    getValue: () => n.getValue(),
+    getSelectedText: () => _(n, o),
+    focus: () => n.focus()
+  }, C = () => {
+    const t = m();
+    if (!t) return;
+    const a = t.model.uri.toString();
+    a !== S && (S = a, e.onReady?.(t));
+  }, I = () => {
+    const t = m();
+    t && e.onSelectionChange?.(t.getSelectedText(), t);
+  }, T = async () => {
+    if (!n) return;
+    const t = ++v, a = U(e.language);
+    let i = a.id;
+    try {
+      await a.load?.();
+    } catch {
+      if (t !== v) return;
+      i = "plaintext";
+    }
+    if (!n || t !== v) return;
+    const l = N(x, e.path);
+    if (o && o.uri.toString() === l.toString()) {
+      o.getLanguageId() !== i && f.editor.setModelLanguage(o, i), o.getValue() !== e.value && o.setValue(e.value), C(), I();
+      return;
+    }
+    const d = f.editor.createModel(e.value, i, l);
+    o?.dispose(), o = d, n.setModel(o), C(), I();
+  };
+  return b(() => {
+    if (!r) return;
+    p(), n = f.editor.create(r, {
+      model: null,
+      ...M,
+      ...e.options ?? {}
+    }), y(), T();
+    const t = e.onContentChange, a = e.onChange, i = e.onSelectionChange, l = n.onDidChangeModelContent((u) => {
+      const h = m();
+      h && (t?.(u, h), a && a(h.getValue()));
+    }), d = n.onDidChangeCursorSelection(() => {
+      const u = m();
+      u && i?.(u.getSelectedText(), u);
+    });
+    q(() => {
+      l.dispose(), d.dispose(), s && cancelAnimationFrame(s), n?.dispose(), o?.dispose(), n = void 0, o = void 0;
+    });
+  }), g(() => {
+    y();
+  }), g(() => {
+    n && n.updateOptions({
+      ...M,
+      ...e.options ?? {}
+    });
+  }), g(() => {
+    e.path, e.language, e.value, T();
+  }), g(() => {
+    const t = E();
+    !t || !n || (s && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
+      n?.layout({
+        width: t.width,
+        height: t.height
+      });
+    }));
+  }), (() => {
+    var t = z(), a = r;
+    return typeof a == "function" ? R(a, t) : r = t, L((i) => {
+      var l = e.class, d = e.style;
+      return l !== i.e && D(t, i.e = l), i.t = O(t, d, i.t), i;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+export {
+  J as CodeEditor
+};

package/dist/components/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeEditor, type CodeEditorProps, type CodeEditorApi } from './CodeEditor';
+export { resolveCodeEditorLanguageSpec, isCodeEditorLanguageSupported, type CodeEditorLanguageSpec } from './languages';

package/dist/components/editor/languages.d.ts

@@ -0,0 +1,6 @@
+export type CodeEditorLanguageSpec = {
+    id: string;
+    load?: () => Promise<void>;
+};
+export declare function resolveCodeEditorLanguageSpec(language?: string | null): CodeEditorLanguageSpec;
+export declare function isCodeEditorLanguageSupported(language?: string | null): boolean;

package/dist/components/editor/languages.js

@@ -0,0 +1,110 @@
+const s = {
+  "": "plaintext",
+  text: "plaintext",
+  plaintext: "plaintext",
+  txt: "plaintext",
+  js: "javascript",
+  jsx: "javascript",
+  javascriptreact: "javascript",
+  ts: "typescript",
+  tsx: "typescript",
+  typescriptreact: "typescript",
+  py: "python",
+  rb: "ruby",
+  rs: "rust",
+  sh: "shell",
+  bash: "shell",
+  zsh: "shell",
+  fish: "shell",
+  shell: "shell",
+  shellscript: "shell",
+  yml: "yaml",
+  md: "markdown",
+  cs: "csharp",
+  fs: "fsharp",
+  docker: "dockerfile",
+  c: "cpp",
+  cc: "cpp",
+  cxx: "cpp",
+  h: "cpp",
+  hpp: "cpp",
+  hxx: "cpp",
+  objectivec: "objective-c",
+  "objective-cpp": "objective-c",
+  conf: "ini",
+  config: "ini",
+  env: "ini",
+  make: "plaintext",
+  makefile: "plaintext",
+  cmake: "plaintext",
+  toml: "plaintext",
+  latex: "plaintext",
+  tex: "plaintext",
+  vue: "plaintext",
+  svelte: "plaintext",
+  groovy: "plaintext"
+}, n = {
+  javascript: () => import("monaco-editor/esm/vs/language/typescript/monaco.contribution.js"),
+  typescript: () => import("monaco-editor/esm/vs/language/typescript/monaco.contribution.js"),
+  json: () => import("monaco-editor/esm/vs/language/json/monaco.contribution.js"),
+  html: () => import("monaco-editor/esm/vs/language/html/monaco.contribution.js"),
+  css: () => import("monaco-editor/esm/vs/language/css/monaco.contribution.js"),
+  scss: () => import("monaco-editor/esm/vs/language/css/monaco.contribution.js"),
+  less: () => import("monaco-editor/esm/vs/language/css/monaco.contribution.js"),
+  markdown: () => import("monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js"),
+  yaml: () => import("monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js"),
+  ini: () => import("monaco-editor/esm/vs/basic-languages/ini/ini.contribution.js"),
+  xml: () => import("monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js"),
+  python: () => import("monaco-editor/esm/vs/basic-languages/python/python.contribution.js"),
+  java: () => import("monaco-editor/esm/vs/basic-languages/java/java.contribution.js"),
+  kotlin: () => import("monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution.js"),
+  scala: () => import("monaco-editor/esm/vs/basic-languages/scala/scala.contribution.js"),
+  go: () => import("monaco-editor/esm/vs/basic-languages/go/go.contribution.js"),
+  rust: () => import("monaco-editor/esm/vs/basic-languages/rust/rust.contribution.js"),
+  cpp: () => import("monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution.js"),
+  csharp: () => import("monaco-editor/esm/vs/basic-languages/csharp/csharp.contribution.js"),
+  fsharp: () => import("monaco-editor/esm/vs/basic-languages/fsharp/fsharp.contribution.js"),
+  php: () => import("monaco-editor/esm/vs/basic-languages/php/php.contribution.js"),
+  ruby: () => import("monaco-editor/esm/vs/basic-languages/ruby/ruby.contribution.js"),
+  perl: () => import("monaco-editor/esm/vs/basic-languages/perl/perl.contribution.js"),
+  shell: () => import("monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js"),
+  swift: () => import("monaco-editor/esm/vs/basic-languages/swift/swift.contribution.js"),
+  "objective-c": () => import("monaco-editor/esm/vs/basic-languages/objective-c/objective-c.contribution.js"),
+  r: () => import("monaco-editor/esm/vs/basic-languages/r/r.contribution.js"),
+  sql: () => import("monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js"),
+  lua: () => import("monaco-editor/esm/vs/basic-languages/lua/lua.contribution.js"),
+  dart: () => import("monaco-editor/esm/vs/basic-languages/dart/dart.contribution.js"),
+  dockerfile: () => import("monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js"),
+  bat: () => import("monaco-editor/esm/vs/basic-languages/bat/bat.contribution.js"),
+  powershell: () => import("monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution.js")
+}, e = /* @__PURE__ */ new Map();
+function o(p) {
+  const t = String(p ?? "").trim().toLowerCase();
+  return (s[t] ?? t) || "plaintext";
+}
+function a(p, t) {
+  if (t)
+    return () => {
+      const i = e.get(p);
+      if (i) return i;
+      const r = t().then(() => {
+      }).catch((c) => {
+        throw e.delete(p), c;
+      });
+      return e.set(p, r), r;
+    };
+}
+function l(p) {
+  const t = o(p), i = a(t, n[t]);
+  return {
+    id: t,
+    load: i
+  };
+}
+function m(p) {
+  return l(p).id !== "plaintext" || o(p) === "plaintext";
+}
+export {
+  m as isCodeEditorLanguageSupported,
+  l as resolveCodeEditorLanguageSpec
+};

package/dist/components/editor/monacoEnvironment.d.ts

@@ -0,0 +1 @@
+export declare function ensureMonacoEnvironment(): void;

package/dist/components/editor/monacoEnvironment.js

@@ -0,0 +1,14 @@
+import n from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
+import t from "monaco-editor/esm/vs/language/typescript/ts.worker.js?worker";
+import e from "monaco-editor/esm/vs/language/json/json.worker.js?worker";
+import i from "monaco-editor/esm/vs/language/html/html.worker.js?worker";
+import s from "monaco-editor/esm/vs/language/css/css.worker.js?worker";
+const o = globalThis;
+function W() {
+  o.MonacoEnvironment || (o.MonacoEnvironment = {
+    getWorker: (m, r) => r === "typescript" || r === "javascript" ? new t() : r === "json" ? new e() : r === "html" || r === "handlebars" || r === "razor" ? new i() : r === "css" || r === "scss" || r === "less" ? new s() : new n()
+  });
+}
+export {
+  W as ensureMonacoEnvironment
+};

package/dist/editor.d.ts

@@ -0,0 +1 @@
+export * from './components/editor';

package/dist/editor.js

@@ -0,0 +1,7 @@
+import { CodeEditor as r } from "./components/editor/CodeEditor.js";
+import { isCodeEditorLanguageSupported as t, resolveCodeEditorLanguageSpec as p } from "./components/editor/languages.js";
+export {
+  r as CodeEditor,
+  t as isCodeEditorLanguageSupported,
+  p as resolveCodeEditorLanguageSpec
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.35.15",
+  "version": "0.35.16",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -56,6 +56,10 @@
       "types": "./dist/chat.d.ts",
       "import": "./dist/chat.js"
     },
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "import": "./dist/editor.js"
+    },
     "./widgets": {
       "types": "./dist/widgets.d.ts",
       "import": "./dist/widgets.js"
@@ -86,6 +90,7 @@
     "diff": "^8.0.3",
     "marked": "^17.0.1",
     "mermaid": "^11.12.3",
+    "monaco-editor": "^0.55.1",
     "shiki": "^3.21.0",
     "solid-motionone": "^1.0.4",
     "tailwind-merge": "^3.4.0"