@blueking/ai-ui-sdk 0.2.0-beta.20 → 0.2.0-beta.22

package/dist/components/render-markdown/edit.ts.js

@@ -0,0 +1,228 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import Editor from '@toast-ui/editor';
+import { commonConfig } from './common.ts.js';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import './edit.postcss.css';
+var EditorMode;
+(function(EditorMode) {
+    EditorMode["Markdown"] = "markdown";
+    EditorMode["Wysiwyg"] = "wysiwyg";
+})(EditorMode || (EditorMode = {}));
+export default defineComponent({
+    props: {
+        modelValue: {
+            type: String
+        },
+        placeholder: {
+            type: String
+        },
+        height: {
+            type: String,
+            default: '500px'
+        },
+        disabled: {
+            type: Boolean
+        },
+        fontSize: {
+            type: String,
+            default: '14px'
+        },
+        backgroundColor: {
+            type: String,
+            default: '#fff'
+        },
+        mode: {
+            type: String,
+            default: "wysiwyg"
+        },
+        isSimpleToolbar: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        'update:modelValue': (value)=>value
+    },
+    setup (props, { emit }) {
+        const editorRef = ref();
+        let editor;
+        const handleChange = ()=>{
+            const value = (editor === null || editor === void 0 ? void 0 : editor.getMarkdown()) || '';
+            emit('update:modelValue', value);
+        };
+        const handleInit = ()=>{
+            const defaultMode = props.mode || "wysiwyg";
+            // 切换模式按钮
+            const modeSwitchEl = document.createElement('section');
+            modeSwitchEl.className = 'toastui-editor-toolbar-custom-button g-cursor-pointer g-ml-4';
+            modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+            modeSwitchEl.dataset.mode = defaultMode;
+            modeSwitchEl.addEventListener('click', ()=>{
+                const mode = modeSwitchEl.dataset.mode;
+                if (mode === "markdown") {
+                    editor.changeMode("wysiwyg");
+                    modeSwitchEl.dataset.mode = "wysiwyg";
+                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+                } else {
+                    editor.changeMode("markdown");
+                    modeSwitchEl.dataset.mode = "markdown";
+                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
+                }
+            });
+            // 全屏按钮复用 use-click-proxy 的全局 full-screen 代理。
+            const fullScreenEl = document.createElement('section');
+            fullScreenEl.className = 'toastui-editor-toolbar-custom-button g-cursor-pointer g-ml-12';
+            fullScreenEl.innerHTML = [
+                '<span class="click-full-screen">',
+                '<i class="ai-ui-sdk-icon ai-ui-sdk-full-screen g-mr-4 g-text-14"></i>全屏',
+                '</span>',
+                '<span class="click-un-full-screen">',
+                '<i class="ai-ui-sdk-icon ai-ui-sdk-un-full-screen g-mr-4 g-text-14"></i>取消全屏',
+                '</span>'
+            ].join('');
+            // 初始化编辑器
+            editor = new Editor(_object_spread({
+                el: editorRef.value,
+                initialEditType: defaultMode,
+                previewStyle: 'vertical',
+                hideModeSwitch: true,
+                autofocus: false,
+                toolbarItems: [
+                    [
+                        'heading',
+                        'bold',
+                        'italic',
+                        'strike'
+                    ],
+                    ...props.isSimpleToolbar ? [] : [
+                        [
+                            'hr',
+                            'quote'
+                        ],
+                        [
+                            'ul',
+                            'ol',
+                            'task',
+                            'indent',
+                            'outdent'
+                        ],
+                        [
+                            'table',
+                            'image',
+                            'link'
+                        ],
+                        [
+                            'code',
+                            'codeblock'
+                        ]
+                    ],
+                    [
+                        ...props.isSimpleToolbar ? [] : [
+                            {
+                                name: 'modeSwitch',
+                                el: modeSwitchEl
+                            }
+                        ],
+                        {
+                            name: 'fullScreen',
+                            el: fullScreenEl
+                        }
+                    ]
+                ],
+                placeholder: props.placeholder,
+                initialValue: props.modelValue || '',
+                height: props.height,
+                events: {
+                    change: handleChange
+                }
+            }, commonConfig));
+        };
+        const handleDestroy = ()=>{
+            editor.destroy();
+            editor = null;
+        };
+        const handleDisabled = ()=>{
+            const root = editorRef.value;
+            const editContent = root.querySelector('.ww-mode [contenteditable]');
+            const toolbar = root.querySelector('.toastui-editor-toolbar');
+            // 禁用事件
+            if (root) {
+                const stopEvent = (event)=>{
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                };
+                if (props.disabled) {
+                    root.addEventListener('beforeinput', stopEvent, true);
+                    root.addEventListener('input', stopEvent, true);
+                    root.addEventListener('paste', stopEvent, true);
+                    root.addEventListener('cut', stopEvent, true);
+                    root.addEventListener('drop', stopEvent, true);
+                    root.addEventListener('compositionstart', stopEvent, true);
+                } else {
+                    root.removeEventListener('beforeinput', stopEvent, true);
+                    root.removeEventListener('input', stopEvent, true);
+                    root.removeEventListener('paste', stopEvent, true);
+                    root.removeEventListener('cut', stopEvent, true);
+                    root.removeEventListener('drop', stopEvent, true);
+                    root.removeEventListener('compositionstart', stopEvent, true);
+                }
+            }
+            if (editContent) {
+                // 设置样式
+                editContent.setAttribute('contenteditable', String(!props.disabled));
+                editContent.style.cursor = props.disabled ? 'not-allowed' : 'auto';
+            }
+            if (toolbar) {
+                toolbar.style.pointerEvents = props.disabled ? 'none' : 'auto';
+            }
+        };
+        watch(()=>props.modelValue, (value)=>{
+            if (!editor) return;
+            if (value !== editor.getMarkdown()) {
+                editor.setMarkdown(value || '');
+            }
+        });
+        onMounted(()=>{
+            handleInit();
+            handleDisabled();
+        });
+        onBeforeUnmount(handleDestroy);
+        watch(()=>props.disabled, handleDisabled);
+        return ()=>h('section', {
+                ref: editorRef,
+                class: `full-screen-wrap ${props.disabled ? 'is-disabled' : ''}`,
+                style: {
+                    backgroundColor: props.backgroundColor
+                }
+            });
+    }
+});

package/dist/components/render-markdown/mark-down-code-copy.d.ts

@@ -0,0 +1,7 @@
+import type Prism from 'prismjs';
+import type { PluginContext, PluginInfo } from '@toast-ui/editor';
+export type PrismHighlighter = typeof Prism;
+export interface MarkDownCodeCopyPluginOptions {
+    highlighter?: PrismHighlighter;
+}
+export declare const MarkDownCodeCopyPlugin: (_context: PluginContext, options?: MarkDownCodeCopyPluginOptions) => PluginInfo;

package/dist/components/render-markdown/mark-down-code-copy.ts.js

@@ -0,0 +1,73 @@
+const BACKTICK_COUNT = 3;
+// 给块级代码增加右上角复制按钮，同时保留 Prism 语法高亮。
+export const MarkDownCodeCopyPlugin = (_context, options = {})=>({
+        toHTMLRenderers: {
+            codeBlock (markdownNode) {
+                const node = markdownNode;
+                const infoWords = node.info ? node.info.split(/\s+/) : [];
+                const language = infoWords[0];
+                const preClasses = [];
+                const codeAttrs = {};
+                const tokens = [];
+                if (node.fenceLength > BACKTICK_COUNT) {
+                    codeAttrs['data-backticks'] = node.fenceLength;
+                }
+                if (language) {
+                    preClasses.push(`lang-${language}`);
+                    codeAttrs['data-language'] = language;
+                }
+                var _node_literal;
+                tokens.push({
+                    type: 'openTag',
+                    tagName: 'pre',
+                    classNames: [
+                        ...preClasses,
+                        'markdown-code-copy-wrap'
+                    ]
+                }, {
+                    type: 'openTag',
+                    tagName: 'i',
+                    classNames: [
+                        'ai-ui-sdk-icon',
+                        'ai-ui-sdk-copy',
+                        'markdown-code-copy-button',
+                        'click-copy'
+                    ],
+                    attributes: {
+                        'data-clipboard-text': encodeURIComponent((_node_literal = node.literal) !== null && _node_literal !== void 0 ? _node_literal : ''),
+                        title: '复制代码'
+                    }
+                }, {
+                    type: 'closeTag',
+                    tagName: 'i'
+                }, {
+                    type: 'openTag',
+                    tagName: 'code',
+                    attributes: codeAttrs
+                });
+                const highlighter = options.highlighter;
+                const registeredLang = language && (highlighter === null || highlighter === void 0 ? void 0 : highlighter.languages[language]);
+                if (language && registeredLang) {
+                    var _node_literal1;
+                    tokens.push({
+                        type: 'html',
+                        content: highlighter.highlight((_node_literal1 = node.literal) !== null && _node_literal1 !== void 0 ? _node_literal1 : '', registeredLang, language)
+                    });
+                } else {
+                    var _node_literal2;
+                    tokens.push({
+                        type: 'text',
+                        content: (_node_literal2 = node.literal) !== null && _node_literal2 !== void 0 ? _node_literal2 : ''
+                    });
+                }
+                tokens.push({
+                    type: 'closeTag',
+                    tagName: 'code'
+                }, {
+                    type: 'closeTag',
+                    tagName: 'pre'
+                });
+                return tokens;
+            }
+        }
+    });

package/dist/components/render-markdown/prism-atom-one-dark.postcss.css

@@ -0,0 +1,192 @@
+/**
+ * Prism.js theme like highlight.js atom-one-dark
+ * Background: #282c34
+ * Foreground: #abb2bf
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #abb2bf;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  tab-size: 2;
+  hyphens: none;
+  text-shadow: none;
+}
+
+pre[class*='language-'] {
+  margin: 12px 0;
+  padding: 16px;
+  overflow: auto;
+  border-radius: 8px;
+  background: #282c34;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #282c34;
+}
+
+:not(pre) > code[class*='language-'] {
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #e06c75;
+}
+
+/* Toast UI Editor preview / viewer 兜底 */
+.toastui-editor-contents pre,
+.tui-editor-contents pre {
+  background: #282c34 !important;
+  color: #abb2bf !important;
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+.toastui-editor-contents pre code,
+.tui-editor-contents pre code {
+  background: transparent !important;
+  color: #abb2bf !important;
+  text-shadow: none !important;
+  font-family: Consolas,
+    Monaco,
+    'Andale Mono',
+    'Ubuntu Mono',
+    monospace;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.toastui-editor-contents pre code span,
+.tui-editor-contents pre code span,
+.toastui-editor-contents .token,
+.tui-editor-contents .token {
+  text-shadow: none !important;
+}
+
+/* 注释 */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #5c6370;
+  font-style: italic;
+}
+
+/* 标点 */
+.token.punctuation {
+  color: #abb2bf;
+}
+
+/* 命名空间 */
+.token.namespace {
+  opacity: .7;
+}
+
+/* 标签、属性、选择器 */
+.token.tag,
+.token.selector {
+  color: #e06c75;
+}
+
+.token.attr-name {
+  color: #d19a66;
+}
+
+.token.attr-value,
+.token.string,
+.token.char,
+.token.inserted {
+  color: #98c379;
+}
+
+/* 关键字 */
+.token.keyword,
+.token.atrule {
+  color: #c678dd;
+}
+
+/* 布尔、数字、常量 */
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+  color: #d19a66;
+}
+
+/* 函数 */
+.token.function {
+  color: #61afef;
+}
+
+/* 类名、类型 */
+.token.class-name,
+.token.builtin {
+  color: #e5c07b;
+}
+
+/* 属性、变量 */
+.token.property,
+.token.variable {
+  color: #e06c75;
+}
+
+/* 操作符 */
+.token.operator {
+  color: #56b6c2;
+}
+
+/* 正则、重要内容 */
+.token.regex,
+.token.important {
+  color: #c678dd;
+}
+
+/* URL / 实体 */
+.token.url,
+.token.entity {
+  color: #56b6c2;
+}
+
+/* 删除 */
+.token.deleted {
+  color: #e06c75;
+}
+
+/* bold / italic */
+.token.bold {
+  font-weight: 700;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+/* Prism line numbers 插件兼容 */
+pre[class*='language-'].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+.line-numbers .line-numbers-rows {
+  border-right: 1px solid #3e4451;
+}
+
+.line-numbers-rows > span::before {
+  color: #636d83;
+}
+
+/* 选中文本 */
+pre[class*='language-'] ::selection,
+code[class*='language-'] ::selection {
+  background: #3e4451;
+  color: inherit;
+}

package/dist/components/render-markdown/{mark-down.d.ts → view.d.ts}

@@ -1,30 +1,5 @@
-import type MarkdownIt from 'markdown-it';
-import 'x-mavon-editor/dist/css/index.css';
-import 'x-mavon-editor/dist/highlightjs/styles/atom-one-dark.min.css';
-import './mark-down.postcss';
-export type MdProp = {
-    modelValue?: string;
-    codeStyle?: string;
-    previewBackground?: string;
-    defaultOpen: string;
-    editable: boolean;
-    subfield: boolean;
-    toolbarsFlag: boolean;
-    boxShadow: boolean;
-    ref?: (elm: MdRef) => void;
-    xssOptions: {
-        whiteList: {
-            [key: string]: string[];
-        };
-    };
-    externalLink: {
-        [key: string]: (param?: string) => string;
-    };
-};
-type MdRef = {
-    $paste: () => void;
-    markdownIt: MarkdownIt;
-};
+import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import './view.postcss';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;

package/dist/components/render-markdown/view.postcss.css

@@ -0,0 +1,99 @@
+.aidev-markdown-preview .toastui-editor-contents,
+.toastui-editor .toastui-editor-contents,
+.toastui-editor-md-preview .toastui-editor-contents {
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+}
+
+  .aidev-markdown-preview .toastui-editor-contents pre, .toastui-editor .toastui-editor-contents pre, .toastui-editor-md-preview .toastui-editor-contents pre {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents pre::-webkit-scrollbar, .toastui-editor .toastui-editor-contents pre::-webkit-scrollbar, .toastui-editor-md-preview .toastui-editor-contents pre::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+  .aidev-markdown-preview .toastui-editor-contents pre::-webkit-scrollbar-thumb, .toastui-editor .toastui-editor-contents pre::-webkit-scrollbar-thumb, .toastui-editor-md-preview .toastui-editor-contents pre::-webkit-scrollbar-thumb {
+      width: 6px;
+      height: 6px;
+      border-radius: 3px;
+      background-color: #dcdee5;
+    }
+
+  .aidev-markdown-preview .toastui-editor-contents pre::-webkit-scrollbar-thumb:hover, .toastui-editor .toastui-editor-contents pre::-webkit-scrollbar-thumb:hover, .toastui-editor-md-preview .toastui-editor-contents pre::-webkit-scrollbar-thumb:hover {
+        background-color: #979ba5;
+      }
+
+  .aidev-markdown-preview .toastui-editor-contents p,
+  .aidev-markdown-preview .toastui-editor-contents td,
+  .toastui-editor .toastui-editor-contents p,
+  .toastui-editor .toastui-editor-contents td,
+  .toastui-editor-md-preview .toastui-editor-contents p,
+  .toastui-editor-md-preview .toastui-editor-contents td {
+    color: #4d4f56;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents h1, .toastui-editor .toastui-editor-contents h1, .toastui-editor-md-preview .toastui-editor-contents h1 {
+    margin: 32px 0 20px;
+    border-bottom: 2px solid #eaecef;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents h2, .toastui-editor .toastui-editor-contents h2, .toastui-editor-md-preview .toastui-editor-contents h2 {
+    margin: 24px 0 16px;
+    border-bottom: 1px solid #eaecef;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents h3, .toastui-editor .toastui-editor-contents h3, .toastui-editor-md-preview .toastui-editor-contents h3 {
+    margin: 18px 0 12px;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents h4, .toastui-editor .toastui-editor-contents h4, .toastui-editor-md-preview .toastui-editor-contents h4 {
+    margin: 14px 0 8px;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents h5,
+  .aidev-markdown-preview .toastui-editor-contents h6,
+  .toastui-editor .toastui-editor-contents h5,
+  .toastui-editor .toastui-editor-contents h6,
+  .toastui-editor-md-preview .toastui-editor-contents h5,
+  .toastui-editor-md-preview .toastui-editor-contents h6 {
+    margin: 10px 0 4px;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents i, .toastui-editor .toastui-editor-contents i, .toastui-editor-md-preview .toastui-editor-contents i {
+    font-style: normal;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents table th, .toastui-editor .toastui-editor-contents table th, .toastui-editor-md-preview .toastui-editor-contents table th {
+      background-color: #fff;
+      color: #4d4f56;
+      font-weight: bold;
+    }
+
+  .aidev-markdown-preview .toastui-editor-contents table tr:nth-of-type(odd), .toastui-editor .toastui-editor-contents table tr:nth-of-type(odd), .toastui-editor-md-preview .toastui-editor-contents table tr:nth-of-type(odd) {
+        background-color: #f6f8fa;
+      }
+
+  .aidev-markdown-preview .toastui-editor-contents table tr:nth-of-type(even), .toastui-editor .toastui-editor-contents table tr:nth-of-type(even), .toastui-editor-md-preview .toastui-editor-contents table tr:nth-of-type(even) {
+        background-color: #fff;
+      }
+
+  .aidev-markdown-preview .toastui-editor-contents .markdown-code-copy-wrap, .toastui-editor .toastui-editor-contents .markdown-code-copy-wrap, .toastui-editor-md-preview .toastui-editor-contents .markdown-code-copy-wrap {
+    position: relative;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents .markdown-code-copy-button, .toastui-editor .toastui-editor-contents .markdown-code-copy-button, .toastui-editor-md-preview .toastui-editor-contents .markdown-code-copy-button {
+    position: sticky;
+    top: -16px;
+    float: right;
+    margin: -25px -12px 0 0;
+    font-size: 14px;
+    color: #979ba5;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .aidev-markdown-preview .toastui-editor-contents .markdown-code-copy-button:hover, .toastui-editor .toastui-editor-contents .markdown-code-copy-button:hover, .toastui-editor-md-preview .toastui-editor-contents .markdown-code-copy-button:hover {
+      color: #3a84ff;
+    }