@ibiz-template/vue3-components 0.7.27 → 0.7.28-alpha.0

package/es/editor/html/html-editor.controller.d.ts

@@ -1,5 +1,6 @@
 import { EditorController, IAppDEService } from '@ibiz-template/runtime';
 import { IAppDEACMode, IHtml } from '@ibiz/model-core';
+import { IDomEditor } from '@wangeditor/editor';
 /**
  * html框编辑器控制器
  *
@@ -39,5 +40,92 @@ export declare class HtmlEditorController extends EditorController<IHtml> {
      * @type {boolean}
      */
     chatCompletion: boolean;
+    /**
+     * wangEditor 实例
+     *
+     * @private
+     * @type {IDomEditor}
+     * @memberof HtmlEditorController
+     */
+    private wangEditor;
+    /**
+     * 气泡容器
+     *
+     * @type {(IOverlayPopoverContainer | null)}
+     * @memberof HtmlEditorController
+     */
+    private overlay;
+    /**
+     * 清除回调
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    private cleanup;
+    /**
+     * 预定义阻止捕获事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    private presetPreventEvents;
+    /**
+     * 预定义阻止冒泡事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    private presetPreventPropEvents;
+    /**
+     * 初始化
+     *
+     * @protected
+     * @return {*}  {Promise<void>}
+     * @memberof HtmlEditorController
+     */
     protected onInit(): Promise<void>;
+    /**
+     * 自定义注册
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    private customRegister;
+    /**
+     * wangEditor 创建完成
+     *
+     * @private
+     * @param {IDomEditor} editor
+     * @memberof HtmlEditorController
+     */
+    onCreated(editor: IDomEditor): void;
+    /**
+     * 监听事件
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    private listenEvent;
+    /**
+     * 打开表情选择
+     *
+     * @memberof HtmlEditorController
+     */
+    private openEmojiSelect;
+    /**
+     * 添加表情
+     *
+     * @param {string} data
+     * @memberof HtmlEditorController
+     */
+    private addEmojiNode;
+    /**
+     * 销毁
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    onDestroyed(): void;
 }

package/es/editor/html/html-editor.controller.mjs

@@ -1,6 +1,13 @@
+import { h } from 'vue';
 import { EditorController, getDeACMode } from '@ibiz-template/runtime';
+import { NOOP, listenJSEvent } from '@ibiz-template/core';
 import { Boot } from '@wangeditor/editor';
-import { AIMenu } from './wang-editor/ai/ai-modules.mjs';
+import './wang-editor/index.mjs';
+import { AIMenu } from './wang-editor/module/ai-module.mjs';
+import { EmojiElem } from './wang-editor/element/emoji.mjs';
+import { EmojiModule } from './wang-editor/module/emoji-module.mjs';
+import { Plugin } from './wang-editor/plugin/plugin.mjs';
+import { Emoji } from './wang-editor/component/emoji/emoji.mjs';
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -43,9 +50,55 @@ class HtmlEditorController extends EditorController {
      * @type {boolean}
      */
     __publicField(this, "chatCompletion", false);
+    /**
+     * wangEditor 实例
+     *
+     * @private
+     * @type {IDomEditor}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "wangEditor");
+    /**
+     * 气泡容器
+     *
+     * @type {(IOverlayPopoverContainer | null)}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "overlay", null);
+    /**
+     * 清除回调
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "cleanup", NOOP);
+    /**
+     * 预定义阻止捕获事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "presetPreventEvents", [13, 38, 40]);
+    /**
+     * 预定义阻止冒泡事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "presetPreventPropEvents", [27]);
   }
+  /**
+   * 初始化
+   *
+   * @protected
+   * @return {*}  {Promise<void>}
+   * @memberof HtmlEditorController
+   */
   async onInit() {
     await super.onInit();
+    this.customRegister();
     if (this.editorParams) {
       const { uploadParams, exportParams } = this.editorParams;
       if (uploadParams) {
@@ -85,14 +138,124 @@ class HtmlEditorController extends EditorController {
         }
       }
     }
+  }
+  /**
+   * 自定义注册
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  customRegister() {
     if (!window.aichartRegister) {
-      Boot.registerMenu({
-        key: "aichart",
-        factory() {
-          return new AIMenu();
+      Boot.registerMenu(AIMenu);
+      window.aichartRegister = true;
+    }
+    if (!window.customElements.get("emoji-elem")) {
+      window.customElements.define("emoji-elem", EmojiElem);
+    }
+    if (!window.emojiIsRegiter) {
+      Boot.registerModule(EmojiModule);
+      window.emojiIsRegiter = true;
+    }
+    if (!window.wangEditorPlugin) {
+      Boot.registerPlugin(Plugin);
+      window.wangEditorPlugin = true;
+    }
+  }
+  /**
+   * wangEditor 创建完成
+   *
+   * @private
+   * @param {IDomEditor} editor
+   * @memberof HtmlEditorController
+   */
+  onCreated(editor) {
+    this.wangEditor = editor;
+    this.listenEvent();
+  }
+  /**
+   * 监听事件
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  listenEvent() {
+    const container = this.wangEditor.getEditableContainer();
+    this.wangEditor.on("openEmojiSelect", () => this.openEmojiSelect());
+    this.cleanup = listenJSEvent(container, "keydown", (event) => {
+      var _a;
+      if (this.overlay && this.presetPreventEvents.includes(event.keyCode)) {
+        event.preventDefault();
+      }
+      if (this.overlay && this.presetPreventPropEvents.includes(event.keyCode)) {
+        event.stopPropagation();
+        (_a = this.overlay) == null ? void 0 : _a.dismiss();
+      }
+    });
+  }
+  /**
+   * 打开表情选择
+   *
+   * @memberof HtmlEditorController
+   */
+  async openEmojiSelect() {
+    const domSelection = document.getSelection();
+    const { focusNode } = domSelection;
+    if (focusNode) {
+      this.overlay = ibiz.overlay.createPopover(
+        (modal) => {
+          return h(Emoji, {
+            modal
+          });
+        },
+        void 0,
+        {
+          width: "auto",
+          noArrow: true,
+          autoClose: true,
+          placement: "bottom-start"
         }
+      );
+      await this.overlay.present(focusNode.parentNode);
+      this.overlay.onWillDismiss().then((result) => {
+        var _a;
+        const _result = result;
+        const item = (_a = _result.data) == null ? void 0 : _a[0];
+        if (_result.ok && item) {
+          this.addEmojiNode(item);
+        }
+        this.overlay = null;
       });
-      window.aichartRegister = true;
+    }
+  }
+  /**
+   * 添加表情
+   *
+   * @param {string} data
+   * @memberof HtmlEditorController
+   */
+  addEmojiNode(data) {
+    const emojiNode = {
+      data,
+      type: "emoji",
+      children: [{ text: "" }]
+    };
+    this.wangEditor.restoreSelection();
+    this.wangEditor.insertNode(emojiNode);
+    this.wangEditor.move(1);
+  }
+  /**
+   * 销毁
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  onDestroyed() {
+    if (this.cleanup !== NOOP) {
+      this.cleanup();
+    }
+    if (this.overlay) {
+      this.overlay.dismiss();
     }
   }
 }

package/es/editor/html/wang-editor/component/emoji/emoji.css

@@ -0,0 +1 @@
+.ibiz-html-emoji{width:auto;height:auto}

package/es/editor/html/wang-editor/component/emoji/emoji.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { IModal } from '@ibiz-template/runtime';
+import './emoji.scss';
+export declare const Emoji: import("vue").DefineComponent<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onSelect: (val: IData) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/editor/html/wang-editor/component/emoji/emoji.mjs

@@ -0,0 +1,42 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { strToBase64 } from '@ibiz-template/core';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './emoji.css';
+
+"use strict";
+const Emoji = /* @__PURE__ */ defineComponent({
+  name: "IBizHtmlEmoji",
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("html-emoji");
+    const onSelect = (val) => {
+      const modalData = {
+        ok: true,
+        data: [{
+          emoji: strToBase64(val.data)
+        }]
+      };
+      props.modal.dismiss(modalData);
+    };
+    return {
+      ns,
+      onSelect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("iBizEmojiSelect"), {
+      "dark": true,
+      "continuousList": true,
+      "onSelect": this.onSelect
+    }, null)]);
+  }
+});
+
+export { Emoji };

package/es/editor/html/wang-editor/component/index.d.ts

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

package/es/editor/html/wang-editor/component/index.mjs

@@ -0,0 +1,3 @@
+export { Emoji } from './emoji/emoji.mjs';
+
+"use strict";

package/es/editor/html/wang-editor/element/emoji.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 表情元素定义
+ */
+export declare class EmojiElem extends HTMLElement {
+    static get observedAttributes(): string[];
+    attributeChangedCallback(tag: string, oldValue: string, newValue: string): void;
+}

package/es/editor/html/wang-editor/element/emoji.mjs

@@ -0,0 +1,22 @@
+"use strict";
+class EmojiElem extends HTMLElement {
+  // 监听的 attr
+  static get observedAttributes() {
+    return ["data-value"];
+  }
+  attributeChangedCallback(tag, oldValue, newValue) {
+    if (tag === "data-value") {
+      if (newValue && oldValue === newValue)
+        return;
+      const shadow = this.attachShadow({ mode: "open" });
+      const document = shadow.ownerDocument;
+      const box = document.createElement("span");
+      box.innerHTML = newValue;
+      box.part.add("box");
+      box.classList.add("emoji-elem_box");
+      shadow.appendChild(box);
+    }
+  }
+}
+
+export { EmojiElem };

package/es/editor/html/wang-editor/element/index.d.ts

@@ -0,0 +1 @@
+export { EmojiElem } from './emoji';

package/es/editor/html/wang-editor/element/index.mjs

@@ -0,0 +1,3 @@
+export { EmojiElem } from './emoji.mjs';
+
+"use strict";

package/es/editor/html/wang-editor/index.d.ts

@@ -0,0 +1,4 @@
+export * from './module';
+export * from './element';
+export * from './plugin';
+export * from './component';

package/es/editor/html/wang-editor/index.mjs

@@ -0,0 +1,11 @@
+import './module/index.mjs';
+import './element/index.mjs';
+import './plugin/index.mjs';
+import './component/index.mjs';
+export { AIMenu } from './module/ai-module.mjs';
+export { EmojiModule } from './module/emoji-module.mjs';
+export { EmojiElem } from './element/emoji.mjs';
+export { Plugin } from './plugin/plugin.mjs';
+export { Emoji } from './component/emoji/emoji.mjs';
+
+"use strict";

package/es/editor/html/wang-editor/module/ai-module.d.ts

@@ -0,0 +1,67 @@
+import { IButtonMenu, IDomEditor } from '@wangeditor/editor';
+/**
+ * AI菜单项
+ *
+ * @export
+ * @class AIButtonMenu
+ * @implements {IButtonMenu}
+ */
+declare class AIButtonMenu implements IButtonMenu {
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    title: string;
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    iconSvg: string;
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    tag: string;
+    /**
+     * 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+     *
+     * @return {*}  {boolean}
+     * @memberof AIButtonMenu
+     */
+    isActive(): boolean;
+    /**
+     * 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+     *
+     * @return {*}  {(string | boolean)}
+     * @memberof AIButtonMenu
+     */
+    getValue(): string | boolean;
+    /**
+     * 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+     *
+     * @return {*}  {boolean}
+     * @memberof AIButtonMenu
+     */
+    isDisabled(): boolean;
+    /**
+     * 点击菜单时触发的函数
+     *
+     * @param {IDomEditor} editor
+     * @memberof AIButtonMenu
+     */
+    exec(editor: IDomEditor): void;
+}
+/**
+ * Ai菜单
+ */
+export declare const AIMenu: {
+    key: string;
+    factory(): AIButtonMenu;
+};
+export {};

package/es/editor/html/wang-editor/module/ai-module.mjs

@@ -0,0 +1,76 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AIButtonMenu {
+  constructor() {
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "title", "AI");
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "iconSvg", '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="13" font-size="16" fill="black">AI</text></svg>');
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "tag", "button");
+  }
+  /**
+   * 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof AIButtonMenu
+   */
+  isActive() {
+    return false;
+  }
+  /**
+   * 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+   *
+   * @return {*}  {(string | boolean)}
+   * @memberof AIButtonMenu
+   */
+  getValue() {
+    return "aichart";
+  }
+  /**
+   * 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof AIButtonMenu
+   */
+  isDisabled() {
+    return false;
+  }
+  /**
+   * 点击菜单时触发的函数
+   *
+   * @param {IDomEditor} editor
+   * @memberof AIButtonMenu
+   */
+  exec(editor) {
+    editor.emit("aiClick");
+  }
+}
+const AIMenu = {
+  key: "aichart",
+  factory() {
+    return new AIButtonMenu();
+  }
+};
+
+export { AIMenu };

package/es/editor/html/wang-editor/module/emoji-module.d.ts

@@ -0,0 +1,7 @@
+import { IModuleConf } from '@wangeditor/editor';
+/**
+ * 表情模块
+ * - 表情节点定义
+ * - 表情菜单
+ */
+export declare const EmojiModule: Partial<IModuleConf>;