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

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>;

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

@@ -0,0 +1,125 @@
+import '../../../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/index.mjs';
+import { base64ToStr } from '@ibiz-template/core';
+import { h } from '../../../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/h.mjs';
+
+"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;
+};
+const renderElemConf = {
+  type: "emoji",
+  renderElem: (elem) => {
+    const { data = {} } = elem;
+    const vnode = h(
+      "emoji-elem",
+      {
+        dataset: { value: data.emoji ? base64ToStr(data.emoji) : "" },
+        props: {
+          contentEditable: false
+          // 不可编辑
+        }
+      },
+      []
+    );
+    return vnode;
+  }
+};
+const elemToHtmlConf = {
+  type: "emoji",
+  elemToHtml: (elem) => {
+    const { data } = elem;
+    return '<span data-w-e-type="emoji" class="emoji">'.concat(data.emoji, "</span>");
+  }
+};
+const parseHtmlConf = {
+  selector: 'span[data-w-e-type="emoji"]',
+  parseElemHtml: (elem) => {
+    const data = {
+      emoji: elem.innerHTML
+    };
+    return {
+      data,
+      type: "emoji",
+      children: [{ text: "" }]
+    };
+  }
+};
+class EmojiButtonMenu {
+  /**
+   * Creates an instance of EmojiButtonMenu.
+   * @memberof EmojiButtonMenu
+   */
+  constructor() {
+    /**
+     * 标题
+     *
+     * @memberof EmojiButtonMenu
+     */
+    __publicField(this, "title", "".concat(ibiz.i18n.t("editor.html.wangEditor.emoji")));
+    /**
+     * 菜单类型
+     *
+     * @memberof EmojiButtonMenu
+     */
+    __publicField(this, "tag", "button");
+    /**
+     * 菜单图标
+     *
+     * @memberof EmojiButtonMenu
+     */
+    __publicField(this, "iconSvg", "<svg viewBox='0 0 1040 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1490' width='1em' height='1em' stroke='var(--w-e-toolbar-color)' > <path stroke-width='38' d='M512.075261 1024A511.774217 511.774217 0 1 1 730.482434 48.769072a37.630457 37.630457 0 1 1-32.061149 68.035867 436.513303 436.513303 0 1 0 250.468323 395.270322 37.630457 37.630457 0 0 1 75.260914 0 512.526826 512.526826 0 0 1-512.075261 511.924739z' p-id='1491' ></path> <path stroke-width='38' d='M333.857416 344.0929a57.348817 57.348817 0 1 0 57.348817 57.348817 57.499339 57.499339 0 0 0-57.348817-57.348817zM686.53006 344.0929a57.348817 57.348817 0 1 0 57.348817 57.348817 57.348817 57.348817 0 0 0-57.348817-57.348817zM515.236219 783.165074c-162.864619 0-262.359547-141.942084-262.359547-219.159782a30.104366 30.104366 0 0 1 60.208731 0c0 48.618551 76.314567 158.951051 202.150816 158.951051s193.571072-134.114949 193.571072-158.951051a30.104366 30.104366 0 0 1 60.208731 0c0 54.488902-90.012054 219.159782-253.779803 219.159782zM1009.549904 207.720123h-67.132735V139.985301a30.104366 30.104366 0 1 0-60.208732 0v67.734822h-67.734822a30.104366 30.104366 0 0 0-30.104366 30.104366 30.104366 30.104366 0 0 0 30.104366 30.104366h67.734822v67.734823a30.104366 30.104366 0 0 0 60.208732 0v-67.734823h67.734823a30.104366 30.104366 0 0 0 30.104365-30.104366 30.104366 30.104366 0 0 0-30.706453-30.104366z' p-id='1492' ></path> </svg>");
+  }
+  /**
+   * 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof EmojiButtonMenu
+   */
+  isActive() {
+    return false;
+  }
+  /**
+   * 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+   *
+   * @return {*}  {(string | boolean)}
+   * @memberof EmojiButtonMenu
+   */
+  getValue() {
+    return false;
+  }
+  /**
+   * 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof EmojiButtonMenu
+   */
+  isDisabled() {
+    return false;
+  }
+  /**
+   * 点击菜单时触发的函数
+   *
+   * @param {IDomEditor} editor
+   * @memberof EmojiButtonMenu
+   */
+  exec(editor) {
+    editor.emit("openEmojiSelect");
+  }
+}
+const EmojiMenu = {
+  key: "emoji",
+  factory() {
+    return new EmojiButtonMenu();
+  }
+};
+const EmojiModule = {
+  renderElems: [renderElemConf],
+  elemsToHtml: [elemToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
+  menus: [EmojiMenu]
+};
+
+export { EmojiModule };

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

@@ -0,0 +1,2 @@
+export { AIMenu } from './ai-module';
+export { EmojiModule } from './emoji-module';

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

@@ -0,0 +1,4 @@
+export { AIMenu } from './ai-module.mjs';
+export { EmojiModule } from './emoji-module.mjs';
+
+"use strict";

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

@@ -0,0 +1 @@
+export { Plugin } from './plugin';

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

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

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

@@ -0,0 +1,7 @@
+import { IDomEditor } from '@wangeditor/editor';
+/**
+ * 插件
+ * @param editor
+ * @returns
+ */
+export declare const Plugin: <T extends IDomEditor>(editor: T) => T;

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

@@ -0,0 +1,23 @@
+import { DomEditor } from '@wangeditor/editor';
+
+"use strict";
+const Plugin = (editor) => {
+  const { isInline, isVoid } = editor;
+  editor.isInline = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === "emoji") {
+      return true;
+    }
+    return isInline(elem);
+  };
+  editor.isVoid = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === "emoji") {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  return editor;
+};
+
+export { Plugin };

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

@@ -1 +1 @@
-.ibiz-html{--ibiz-html-height:300px;display:inline-block;width:100%;height:100%;--w-e-textarea-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-color:var(--ibiz-color-text-2);--w-e-textarea-border-color:var(--ibiz-color-border);--w-e-textarea-slight-border-color:var(--ibiz-color-border);--w-e-textarea-slight-color:var(--ibiz-color-text-3);--w-e-textarea-slight-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-selected-border-color:var(--ibiz-color-border);--w-e-textarea-handler-bg-color:var(--ibiz-color-primary);--w-e-toolbar-color:var(--ibiz-color-text-0);--w-e-toolbar-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-active-color:var(--ibiz-color-text-0);--w-e-toolbar-active-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-disabled-color:var(--ibiz-color-disabled-text);--w-e-toolbar-border-color:var(--ibiz-color-border);--w-e-modal-button-bg-color:var(--ibiz-color-bg-1);--w-e-modal-button-border-color:var(--ibiz-color-border)}.ibiz-html .ibiz-html-content{display:flex;flex-direction:column;height:100%;background-color:var(--ibiz-color-bg-0)}.ibiz-html .ibiz-html-editor{height:var(--ibiz-html-height)!important;padding:0;overflow-y:scroll;border:1px solid var(--ibiz-color-border)}.ibiz-html .ibiz-html-editor.is-readonly{height:auto!important}.ibiz-html .ibiz-html-editor table{width:100%!important;border-collapse:collapse}.ibiz-html .ibiz-html-editor table th{height:var(--ibiz-height-control-large);min-height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-html .ibiz-html-editor table td{height:var(--ibiz-height-control-large);min-height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight);empty-cells:show;border:1px solid var(--ibiz-color-border)}.ibiz-html .w-e-menu-tooltip-v5::before{color:var(--ibiz-color-text-0);background-color:var(--w-e-toolbar-bg-color)}.ibiz-html .w-e-full-screen-container{z-index:9999}.ibiz-html .w-e-scroll>div{background-color:var(--ibiz-color-bg-1)}.ibiz-html .table-container table{width:100%}.ibiz-html-editor-readonly .ibiz-html-toolbar{display:none}.ibiz-html-editor-readonly .ibiz-html-editor{border:none}.ibiz-html-footer{display:flex;align-items:center;justify-content:end;margin-top:var(--ibiz-spacing-base-tight);margin-right:var(--ibiz-spacing-tight)}.ibiz-html-footer>*+*{margin-left:var(--ibiz-spacing-base)}.ibiz-html-footer__cancel{height:var(--ibiz-height-control-default);line-height:var(--ibiz-height-control-default);color:var(--ibiz-color-text-1);cursor:pointer;opacity:.7}.ibiz-html-footer__cancel:hover{color:var(--ibiz-color-primary);opacity:1}.ibiz-html-footer__save{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base);line-height:var(--ibiz-height-control-default);color:var(--ibiz-color-primary-active-text);text-align:center;cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-html-custom-toolbar{display:flex;align-items:center;justify-content:end;width:100%;height:var(--ibiz-height-control-default);padding-right:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-6)}.ibiz-html-custom-toolbar>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-html-custom-toolbar i{cursor:pointer}.ibiz-html-custom-toolbar i:hover{color:var(--ibiz-color-primary)}.ibiz-html-message{width:500px;max-width:unset}.ibiz-html-message__message-content--message-tip{color:var(--ibiz-color-text-3)}.ibiz-html-message__message-cancel{color:var(--ibiz-color-text-1);background-color:transparent}.ibiz-html-message__message-cancel:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-html-message__message-comfire{background-color:var(--ibiz-color-danger)!important}.ibiz-html-message__message-comfire:hover{box-shadow:0 2px 5px 1px var(--ibiz-color-danger)}.ibiz-html-dialog-full-screen{height:80%}.ibiz-html-dialog-full-screen .ibiz-html{padding:0 var(--ibiz-spacing-extra-loose);--w-e-toolbar-bg-color:var(--ibiz-color-bg-0)}.ibiz-html-dialog-full-screen .ibiz-html-custom-toolbar{height:56px}.ibiz-html-dialog-full-screen .ibiz-html-content{height:calc(100% - 124px)}.ibiz-html-dialog-full-screen .ibiz-html-content .ibiz-html-editor{height:100%!important}.ibiz-html-footer-dialog{height:68px;margin-top:0}
+.ibiz-html{--ibiz-html-height:300px;display:inline-block;width:100%;height:100%;--w-e-textarea-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-color:var(--ibiz-color-text-2);--w-e-textarea-border-color:var(--ibiz-color-border);--w-e-textarea-slight-border-color:var(--ibiz-color-border);--w-e-textarea-slight-color:var(--ibiz-color-text-3);--w-e-textarea-slight-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-selected-border-color:var(--ibiz-color-border);--w-e-textarea-handler-bg-color:var(--ibiz-color-primary);--w-e-toolbar-color:var(--ibiz-color-text-0);--w-e-toolbar-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-active-color:var(--ibiz-color-text-0);--w-e-toolbar-active-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-disabled-color:var(--ibiz-color-disabled-text);--w-e-toolbar-border-color:var(--ibiz-color-border);--w-e-modal-button-bg-color:var(--ibiz-color-bg-1);--w-e-modal-button-border-color:var(--ibiz-color-border)}.ibiz-html .ibiz-html-content{display:flex;flex-direction:column;height:100%;background-color:var(--ibiz-color-bg-0)}.ibiz-html .ibiz-html-editor{height:var(--ibiz-html-height)!important;padding:0;overflow-y:scroll;border:1px solid var(--ibiz-color-border)}.ibiz-html .ibiz-html-editor.is-readonly{height:auto!important}.ibiz-html .ibiz-html-editor table{width:100%!important;border-collapse:collapse}.ibiz-html .ibiz-html-editor table th{height:var(--ibiz-height-control-large);min-height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-html .ibiz-html-editor table td{height:var(--ibiz-height-control-large);min-height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight);empty-cells:show;border:1px solid var(--ibiz-color-border)}.ibiz-html .w-e-menu-tooltip-v5::before{color:var(--ibiz-color-text-0);background-color:var(--w-e-toolbar-bg-color)}.ibiz-html .w-e-full-screen-container{z-index:9999}.ibiz-html .w-e-scroll>div{background-color:var(--ibiz-color-bg-1)}.ibiz-html .table-container table{width:100%}.ibiz-html-editor-readonly .ibiz-html-toolbar{display:none}.ibiz-html-editor-readonly .ibiz-html-editor{border:none}.ibiz-html-footer{display:flex;align-items:center;justify-content:end;margin-top:var(--ibiz-spacing-base-tight);margin-right:var(--ibiz-spacing-tight)}.ibiz-html-footer>*+*{margin-left:var(--ibiz-spacing-base)}.ibiz-html-footer__cancel{height:var(--ibiz-height-control-default);line-height:var(--ibiz-height-control-default);color:var(--ibiz-color-text-1);cursor:pointer;opacity:.7}.ibiz-html-footer__cancel:hover{color:var(--ibiz-color-primary);opacity:1}.ibiz-html-footer__save{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base);line-height:var(--ibiz-height-control-default);color:var(--ibiz-color-primary-active-text);text-align:center;cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-html-custom-toolbar{display:flex;align-items:center;justify-content:end;width:100%;height:var(--ibiz-height-control-default);padding-right:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-6)}.ibiz-html-custom-toolbar>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-html-custom-toolbar i{cursor:pointer}.ibiz-html-custom-toolbar i:hover{color:var(--ibiz-color-primary)}.ibiz-html-message{width:500px;max-width:unset}.ibiz-html-message__message-content--message-tip{color:var(--ibiz-color-text-3)}.ibiz-html-message__message-cancel{color:var(--ibiz-color-text-1);background-color:transparent}.ibiz-html-message__message-cancel:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-html-message__message-comfire{background-color:var(--ibiz-color-danger)!important}.ibiz-html-message__message-comfire:hover{box-shadow:0 2px 5px 1px var(--ibiz-color-danger)}.ibiz-html-dialog-full-screen{height:80%}.ibiz-html-dialog-full-screen .ibiz-html{padding:0 var(--ibiz-spacing-extra-loose);--w-e-toolbar-bg-color:var(--ibiz-color-bg-0)}.ibiz-html-dialog-full-screen .ibiz-html-custom-toolbar{height:56px}.ibiz-html-dialog-full-screen .ibiz-html-content{height:calc(100% - 124px)}.ibiz-html-dialog-full-screen .ibiz-html-content .ibiz-html-editor{height:100%!important}.ibiz-html-footer-dialog{height:68px;margin-top:0}emoji-elem{margin:0 1px!important}