@gct-paas/core-web 0.1.4-dev.9 → 0.1.5-dev.1

package/es/modules/code-editor/monaco-editor.vue2.mjs

@@ -1,440 +0,0 @@
-import { defineComponent, ref, watch, computed, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, unref, createBlock, normalizeClass, createCommentVNode } from 'vue';
-import { SearchOutlined, UpCircleOutlined, DownCircleOutlined, FormatPainterOutlined, CloudDownloadOutlined, ClearOutlined, RobotOutlined } from '@ant-design/icons-vue';
-import { Theme } from './useMonacoEditor.mjs';
-import { format } from 'sql-formatter';
-import 'ant-design-vue';
-import { monacoLoader } from '../../utils/monaco-loader/monaco-loader.mjs';
-import 'lodash-es';
-import '@gct-paas/core';
-import 'vue3-dnd';
-import 'react-dnd-html5-backend';
-import '../../components/app-modal/app-modal-component.css';/* empty css                                                   */
-
-const _hoisted_1 = { class: "hex-monaco-editor m-e w-full h-full overflow-hidden" };
-const _hoisted_2 = { class: "m-e-main" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "monaco-editor",
-  props: {
-    value: { default: "" },
-    title: { default: "" },
-    language: { default: "typescript" },
-    theme: { default: Theme.DARK },
-    readonly: { type: Boolean, default: false },
-    direction: { default: "bottom" },
-    gapVal: { default: 20 }
-  },
-  emits: [
-    "update:value",
-    "change",
-    "editor-mounted",
-    "blur",
-    "focus",
-    "chat-bot-click"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const isMonacoReady = ref(false);
-    let monaco = null;
-    watch(
-      () => props.language,
-      async (newVal) => {
-        if (monacoEditor && monacoEditor.getModel() && monaco) {
-          monaco.editor.setModelLanguage(monacoEditor.getModel(), newVal);
-        }
-      }
-    );
-    const emit = __emit;
-    const Editor = ref();
-    let monacoEditor;
-    const wordWrap = ref(true);
-    const fullScreen = ref(false);
-    const isThemeLightOrBlack = ref(false);
-    const isChatBotActive = ref(false);
-    const isRagEnabled = ref(false);
-    const getStyle = computed(() => {
-      return {
-        color: isThemeLightOrBlack.value ? "#000" : "#fff",
-        marginRight: props.gapVal + "px"
-      };
-    });
-    if (props.theme === Theme.VS) {
-      isThemeLightOrBlack.value = true;
-    }
-    let option = {
-      value: props.value ?? "",
-      // 编辑器内容
-      language: props.language,
-      automaticLayout: true,
-      // 是否自动布局
-      theme: props.theme,
-      readOnly: props.readonly,
-      wordWrap: wordWrap.value ? "on" : "off",
-      // 当单行文本太长时截断换行，true 为换行，false 为不换行
-      scrollBeyondLastLine: false,
-      // 滚动完最后一行后再滚动一屏幕
-      // 是否开启小地图
-      minimap: {
-        enabled: true
-      },
-      tabSize: 2,
-      // tab缩进长度
-      autoClosingBrackets: "always",
-      // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
-      autoClosingDelete: "always",
-      // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
-      autoClosingOvertype: "always",
-      // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
-      autoClosingQuotes: "always",
-      // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
-      comments: {
-        ignoreEmptyLines: true,
-        // 插入行注释时忽略空行。默认为真。
-        insertSpace: true
-        // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
-      },
-      // 注释配置
-      columnSelection: false,
-      // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
-      folding: true,
-      // 是否启用代码折叠
-      fixedOverflowWidgets: true,
-      // 超出编辑器大小的使用fixed属性显示
-      // 编辑器悬停配置
-      hover: {
-        sticky: true,
-        // 悬停是否粘滞，可以点击并选择其内容
-        above: false
-        // 悬停是否应该显示在直线上方
-      }
-    };
-    async function init() {
-      monaco = await monacoLoader.loadMonaco();
-      dispose();
-      initEditor();
-      if (props.value) {
-        handleFormatCodeClick();
-      }
-    }
-    async function onInit() {
-      const bol = await _api.apaas.basicConfig.getAiRagEnabled();
-      if (bol == true) {
-        isRagEnabled.value = true;
-      } else {
-        isRagEnabled.value = false;
-      }
-    }
-    function initEditor() {
-      if (!monaco) {
-        console.warn(
-          "[MonacoEditor] Monaco editor is not available for initEditor"
-        );
-        return;
-      }
-      monacoEditor = monaco.editor.create(Editor.value, option);
-      if (props.direction === "bottom") {
-        scrollToBottom();
-      } else if (props.direction === "top") {
-        scrollToTop();
-      }
-      monacoEditor.onDidChangeModelContent(() => {
-        emit("change", getEditorContent());
-        emit("update:value", getEditorContent());
-      });
-      monacoEditor.onDidBlurEditorText(() => {
-        emit("blur", getEditorContent());
-        emit("update:value", getEditorContent());
-      });
-      monacoEditor.onDidFocusEditorText(() => {
-        emit("focus");
-      });
-      isMonacoReady.value = true;
-      emit("editor-mounted", monacoEditor);
-    }
-    function setEditorContent(val) {
-      monacoEditor.setValue(val);
-      emit("change", getEditorContent());
-      emit("update:value", getEditorContent());
-    }
-    function getEditorContent() {
-      return monacoEditor.getValue();
-    }
-    function getEditorMarkers() {
-      if (!monaco) {
-        console.warn(
-          "[MonacoEditor] Monaco editor is not available for getEditorMarkers"
-        );
-        return [];
-      }
-      const model = monacoEditor.getModel();
-      if (!model) {
-        return [];
-      }
-      return monaco.editor.getModelMarkers({ resource: model.uri });
-    }
-    function findByKeyword() {
-      if (!monaco) {
-        console.warn(
-          "[MonacoEditor] Monaco editor is not available for findByKeyword"
-        );
-        return;
-      }
-      try {
-        monacoEditor.focus();
-        monacoEditor.setSelection(new monaco.Range(1, 9999, 1, 1e4));
-        monacoEditor.trigger("", "actions.find", null);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    function scrollToTop() {
-      monacoEditor.setScrollPosition({ scrollTop: 0 });
-    }
-    function scrollToBottom() {
-      monacoEditor.revealLine(monacoEditor.getModel().getLineCount());
-    }
-    function setEditorWordWrap() {
-      wordWrap.value = !wordWrap.value;
-      if (wordWrap.value) {
-        monacoEditor.updateOptions({ wordWrap: "on" });
-      } else {
-        monacoEditor.updateOptions({ wordWrap: "off" });
-      }
-    }
-    function setEditorTheme() {
-      isThemeLightOrBlack.value = !isThemeLightOrBlack.value;
-      if (isThemeLightOrBlack.value) {
-        monacoEditor.updateOptions({ theme: "vs" });
-      } else {
-        monacoEditor.updateOptions({ theme: "vs-dark" });
-      }
-    }
-    function handleFullScreenClick() {
-      if (!Editor.value.fullscreenElement) {
-        Editor.value.requestFullscreen();
-        fullScreen.value = true;
-      } else {
-        Editor.value.exitFullscreen();
-        fullScreen.value = false;
-      }
-    }
-    function handleDownloadLogClick() {
-      exportFile(props.title, monacoEditor.getValue());
-    }
-    function exportFile(name, data) {
-      const url = window.URL || window.webkitURL || window;
-      const blob = new Blob([data]);
-      const event = document.createEvent("MouseEvents");
-      event.initMouseEvent(
-        "click",
-        true,
-        false,
-        window,
-        0,
-        0,
-        0,
-        0,
-        0,
-        false,
-        false,
-        false,
-        false,
-        0,
-        null
-      );
-      const link = document.createElementNS(
-        "http://www.w3.org/1999/xhtml",
-        "a"
-      );
-      link.href = url.createObjectURL(blob);
-      link.download = name;
-      link.dispatchEvent(event);
-    }
-    function handleFormatCodeClick() {
-      if (props.language == "sql") {
-        const sqlContent = getEditorContent();
-        const formattedSql = format(sqlContent);
-        monacoEditor.setValue(formattedSql);
-      } else {
-        monacoEditor.getAction("editor.action.formatDocument").run();
-      }
-      const newVal = getEditorContent();
-      emit("change", newVal);
-      emit("update:value", newVal);
-    }
-    function handleClearClick() {
-      setEditorContent("");
-    }
-    function handleChatBotClick() {
-      isChatBotActive.value = !isChatBotActive.value;
-      emit("chat-bot-click");
-    }
-    function dispose() {
-      if (monacoEditor) {
-        monacoEditor.dispose();
-      }
-    }
-    function getMonacoEditor() {
-      return monacoEditor;
-    }
-    onMounted(() => {
-      init();
-    });
-    onUnmounted(() => {
-      dispose();
-    });
-    function setValue(code) {
-      const model = monacoEditor.getModel();
-      if (!model) return;
-      const fullRange = model.getFullModelRange();
-      monacoEditor.executeEdits("setValue", [
-        {
-          range: fullRange,
-          text: code,
-          forceMoveMarkers: false
-        }
-      ]);
-      emit("change", getEditorContent());
-      emit("update:value", getEditorContent());
-    }
-    function getValue() {
-      return monacoEditor.getValue();
-    }
-    function getSelectCode() {
-      const selection = monacoEditor.getSelection();
-      if (selection) {
-        const text = monacoEditor.getModel()?.getValueInRange(selection);
-        const startLineNumber = selection.startLineNumber;
-        const startColumn = selection.startColumn;
-        const endLineNumber = selection.endLineNumber;
-        const endColumn = selection.endColumn;
-        const textBeforeRange = {
-          startLineNumber: 1,
-          startColumn: 1,
-          endLineNumber: startLineNumber,
-          endColumn: startColumn
-        };
-        const textBefore = monacoEditor.getModel().getValueInRange(textBeforeRange);
-        const textAfterRange = {
-          startLineNumber: endLineNumber,
-          startColumn: endColumn,
-          endLineNumber: monacoEditor.getModel().getLineCount(),
-          endColumn: monacoEditor.getModel().getLineMaxColumn(monacoEditor.getModel().getLineCount())
-        };
-        const textAfter = monacoEditor.getModel().getValueInRange(textAfterRange);
-        return {
-          text,
-          textBefore,
-          textAfter
-        };
-      }
-      return {};
-    }
-    onInit();
-    __expose({
-      isMonacoReady,
-      reload(newVal) {
-        if (monacoEditor == null) {
-          console.warn("[MonacoEditor] Monaco editor is not available for reload");
-          return;
-        }
-        monacoEditor.setValue(newVal || "");
-      },
-      getMonacoEditor,
-      setEditorContent,
-      getEditorContent,
-      scrollToTop,
-      scrollToBottom,
-      setEditorWordWrap,
-      setEditorTheme,
-      handleFullScreenClick,
-      handleDownloadLogClick,
-      getEditorMarkers,
-      handleFormatCodeClick,
-      getValue,
-      setValue,
-      getSelectCode,
-      isChatBotActive,
-      handleChatBotClick
-    });
-    return (_ctx, _cache) => {
-      const _component_a_col = resolveComponent("a-col");
-      const _component_a_row = resolveComponent("a-row");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        renderSlot(_ctx.$slots, "header", {}, void 0, true),
-        createElementVNode("div", _hoisted_2, [
-          createVNode(_component_a_row, {
-            class: "m-e-main_toolbar w-full flex",
-            type: "flex",
-            justify: "space-between",
-            style: normalizeStyle(
-              isThemeLightOrBlack.value ? "background-color: #fff; box-shadow: 0px 2px 5px #ddd;" : "background-color: #1e1e1e; box-shadow: 0px 2px 5px #111;"
-            )
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_a_col, {
-                class: "m-e-main_toolbar_left flex-1",
-                style: normalizeStyle(isThemeLightOrBlack.value ? "color: #000" : "color: #fff")
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("span", null, [
-                    renderSlot(_ctx.$slots, "title", {}, () => [
-                      createTextVNode(toDisplayString(__props.title), 1)
-                    ], true)
-                  ])
-                ]),
-                _: 3
-              }, 8, ["style"]),
-              createVNode(_component_a_col, {
-                class: "m-e-main_toolbar_right",
-                style: normalizeStyle(getStyle.value)
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(SearchOutlined), {
-                    class: "icon",
-                    onClick: findByKeyword
-                  }),
-                  createVNode(unref(UpCircleOutlined), {
-                    class: "icon",
-                    onClick: scrollToTop
-                  }),
-                  createVNode(unref(DownCircleOutlined), {
-                    class: "icon",
-                    onClick: scrollToBottom
-                  }),
-                  createVNode(unref(FormatPainterOutlined), {
-                    class: "icon",
-                    onClick: handleFormatCodeClick
-                  }),
-                  createVNode(unref(CloudDownloadOutlined), {
-                    class: "icon",
-                    onClick: handleDownloadLogClick
-                  }),
-                  createVNode(unref(ClearOutlined), {
-                    class: "icon",
-                    onClick: handleClearClick
-                  }),
-                  isRagEnabled.value ? (openBlock(), createBlock(unref(RobotOutlined), {
-                    key: 0,
-                    title: "聊天机器人",
-                    class: normalizeClass(["icon", { "icon-active": isChatBotActive.value }]),
-                    onClick: handleChatBotClick
-                  }, null, 8, ["class"])) : createCommentVNode("", true)
-                ]),
-                _: 1
-              }, 8, ["style"])
-            ]),
-            _: 3
-          }, 8, ["style"]),
-          createElementVNode("div", {
-            ref_key: "Editor",
-            ref: Editor,
-            class: "m-e-main_container"
-          }, null, 512)
-        ]),
-        renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-      ]);
-    };
-  }
-});
-
-export { _sfc_main as default };