@formulaxjs/kity-runtime 0.1.0

package/dist/start-GQH6XUBI.js

@@ -0,0 +1,4859 @@
+import {
+  createLegacyBaseComponent,
+  createLegacyUiUtils,
+  legacyBaseUtils,
+  legacyBoxType,
+  legacyEleType,
+  legacyGroupType,
+  legacyInputFilter,
+  legacyItemType,
+  legacyKfExtDef,
+  legacyOtherPosition,
+  legacySysconf,
+  legacyUiDef,
+  resolveToolbarAssetPath
+} from "./chunk-EKIJQ64F.js";
+
+// src/vendor/runtime-interop.ts
+function getLegacyRuntime() {
+  const runtime = window.__FORMULAX_KITY_RUNTIME__;
+  if (!runtime) {
+    throw new Error("Missing FormulaX legacy runtime");
+  }
+  return runtime;
+}
+function getLegacyKity() {
+  const runtime = getLegacyRuntime();
+  if (!runtime.kity) {
+    throw new Error("Missing FormulaX legacy kity runtime");
+  }
+  return runtime.kity;
+}
+function getLegacyKf() {
+  const runtime = getLegacyRuntime();
+  if (!runtime.kf) {
+    throw new Error("Missing FormulaX legacy kf runtime");
+  }
+  return runtime.kf;
+}
+
+// src/legacy/editor.ts
+var defaultOptions = {
+  formula: {
+    fontsize: 50,
+    autoresize: false
+  },
+  ui: {
+    zoom: true,
+    maxzoom: 2,
+    minzoom: 1
+  }
+};
+var components = {};
+function getService(serviceName) {
+  const serviceObject = this.services[serviceName];
+  if (!serviceObject) {
+    throw new Error(`KFEditor: not found service, ${serviceName}`);
+  }
+  return serviceObject;
+}
+var kity = getLegacyKity();
+var kf = getLegacyKf();
+var KFEditor = kity.createClass("KFEditor", {
+  constructor(container, options) {
+    this.options = legacyBaseUtils.extend(true, {}, defaultOptions, options);
+    this.FormulaClass = null;
+    this._readyState = false;
+    this._callbacks = [];
+    this.container = container;
+    this.services = {};
+    this.commands = {};
+    this.initResource();
+  },
+  isReady() {
+    return !!this._readyState;
+  },
+  triggerReady() {
+    let callback;
+    while (callback = this._callbacks.shift()) {
+      callback.call(this, this);
+    }
+  },
+  ready(callback) {
+    if (this._readyState) {
+      callback.call(this, this);
+      return;
+    }
+    this._callbacks.push(callback);
+  },
+  getContainer() {
+    return this.container;
+  },
+  getDocument() {
+    return this.container.ownerDocument;
+  },
+  getFormulaClass() {
+    return this.FormulaClass;
+  },
+  getOptions() {
+    return this.options;
+  },
+  initResource() {
+    kf.ResourceManager.ready((formula) => {
+      this.FormulaClass = formula;
+      this.initComponents();
+      this._readyState = true;
+      this.triggerReady();
+    }, this.options.resource);
+  },
+  initComponents() {
+    legacyBaseUtils.each(components, (Component, name) => {
+      new Component(this, this.options[name]);
+    });
+  },
+  requestService(serviceName, ...args) {
+    const serviceObject = getService.call(this, serviceName);
+    return serviceObject.service[serviceObject.key].apply(serviceObject.provider, args);
+  },
+  request(serviceName) {
+    return getService.call(this, serviceName).service;
+  },
+  registerService(serviceName, provider, serviceObject) {
+    let key = "";
+    for (const currentKey in serviceObject) {
+      if (Object.prototype.hasOwnProperty.call(serviceObject, currentKey) && serviceObject[currentKey]) {
+        serviceObject[currentKey] = legacyBaseUtils.proxy(serviceObject[currentKey], provider);
+        key = currentKey;
+      }
+    }
+    this.services[serviceName] = {
+      provider,
+      key,
+      service: serviceObject
+    };
+  },
+  registerCommand(commandName, executor, execFn) {
+    this.commands[commandName] = {
+      executor,
+      execFn
+    };
+  },
+  execCommand(commandName, ...args) {
+    const commandObject = this.commands[commandName];
+    if (!commandObject) {
+      throw new Error(`KFEditor: not found command, ${commandName}`);
+    }
+    return commandObject.execFn.apply(commandObject.executor, args);
+  }
+});
+legacyBaseUtils.extend(KFEditor, {
+  registerComponents(name, component) {
+    components[name] = component;
+  }
+});
+var editor_default = KFEditor;
+
+// src/legacy/factory.ts
+var EditorWrapper = class {
+  callbacks = [];
+  editor;
+  constructor(container, options) {
+    this.editor = new editor_default(container, options);
+    this.editor.ready(() => {
+      this.trigger();
+    });
+  }
+  trigger() {
+    const editor = this.editor;
+    getLegacyKity().Utils.each(this.callbacks, (callback) => {
+      callback.call(editor, editor);
+    });
+  }
+  ready(callback) {
+    if (this.editor.isReady()) {
+      callback.call(this.editor, this.editor);
+      return;
+    }
+    this.callbacks.push(callback);
+  }
+};
+var factory = {
+  create(container, options) {
+    return new EditorWrapper(container, options);
+  }
+};
+var factory_default = factory;
+
+// src/legacy/button.ts
+var PREFIX = "kf-editor-ui-";
+var LIST_OFFSET = 7;
+var DEFAULT_OPTIONS = {
+  iconSize: {
+    w: 32,
+    h: 32
+  }
+};
+var $$ = createLegacyUiUtils();
+var kity2 = getLegacyKity();
+function getBackgroundStyle(data) {
+  let style = `url( ${data.src} ) no-repeat `;
+  style += `${-data.x}px `;
+  style += `${-data.y}px`;
+  return style;
+}
+var Button = kity2.createClass("Button", {
+  constructor(doc, options) {
+    this.options = kity2.Utils.extend({}, DEFAULT_OPTIONS, options);
+    this.eventState = false;
+    this.toolbar = null;
+    this.displayState = false;
+    this.fixOffset = !!options.fixOffset;
+    this.doc = doc;
+    this.element = this.createButton();
+    this.disabled = true;
+    this.mountElement = null;
+    this.icon = this.createIcon();
+    this.label = this.createLabel();
+    this.sign = this.createSign();
+    this.mountPoint = this.createMountPoint();
+    this.mergeElement();
+  },
+  initEvent() {
+    if (this.eventState) {
+      return;
+    }
+    this.eventState = true;
+    $$.on(this.element, "mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if ((e.which ?? 1) !== 1 || this.disabled) {
+        return;
+      }
+      this.toggleSelect();
+      this.toggleMountElement();
+    });
+  },
+  setToolbar(toolbar) {
+    this.toolbar = toolbar;
+  },
+  toggleMountElement() {
+    if (this.displayState) {
+      this.hideMount();
+    } else {
+      this.showMount();
+    }
+  },
+  setLabel(labelText) {
+    let signText = "";
+    if (this.sign) {
+      signText = `<div class="${PREFIX}button-sign"></div>`;
+    }
+    this.label.innerHTML = `${labelText}${signText}`;
+  },
+  toggleSelect() {
+    $$.getClassList(this.element).toggle(`${PREFIX}button-in`);
+  },
+  unselect() {
+    $$.getClassList(this.element).remove(`${PREFIX}button-in`);
+  },
+  select() {
+    $$.getClassList(this.element).add(`${PREFIX}button-in`);
+  },
+  show() {
+    this.select();
+    this.showMount();
+  },
+  hide() {
+    this.unselect();
+    this.hideMount();
+  },
+  showMount() {
+    this.displayState = true;
+    this.mountPoint.style.display = "block";
+    if (this.fixOffset && this.mountElement?.setOffset) {
+      const elementRect = this.element.getBoundingClientRect();
+      this.mountElement.setOffset(elementRect.left + LIST_OFFSET, elementRect.bottom);
+    }
+    const editorContainer = this.toolbar?.getContainer();
+    if (!editorContainer || !this.mountElement) {
+      return;
+    }
+    const containerBox = $$.getRectBox(editorContainer);
+    const mountEleBox = this.mountElement.getPositionInfo();
+    if (mountEleBox.right > containerBox.right) {
+      const currentBox = $$.getRectBox(this.element);
+      this.mountPoint.style.left = `${currentBox.right - mountEleBox.right - 1}px`;
+    }
+    this.mountElement.updateSize?.();
+  },
+  hideMount() {
+    this.displayState = false;
+    this.mountPoint.style.display = "none";
+  },
+  getNode() {
+    return this.element;
+  },
+  mount(element) {
+    this.mountElement = element;
+    element.mountTo(this.mountPoint);
+  },
+  createButton() {
+    const buttonNode = $$.ele(this.doc, "div", {
+      className: `${PREFIX}button`
+    });
+    if (this.options.className) {
+      buttonNode.className += ` ${PREFIX}${this.options.className}`;
+    }
+    return buttonNode;
+  },
+  createIcon() {
+    if (!this.options.icon) {
+      return null;
+    }
+    const iconNode = $$.ele(this.doc, "div", {
+      className: `${PREFIX}button-icon`
+    });
+    if (typeof this.options.icon === "string") {
+      iconNode.style.backgroundImage = `url(${this.options.icon}) no-repeat`;
+    } else {
+      iconNode.style.background = getBackgroundStyle(this.options.icon);
+    }
+    if (this.options.iconSize.w) {
+      iconNode.style.width = `${this.options.iconSize.w}px`;
+    }
+    if (this.options.iconSize.h) {
+      iconNode.style.height = `${this.options.iconSize.h}px`;
+    }
+    return iconNode;
+  },
+  createLabel() {
+    return $$.ele(this.doc, "div", {
+      className: `${PREFIX}button-label`,
+      content: this.options.label
+    });
+  },
+  createSign() {
+    if (this.options.sign === false) {
+      return null;
+    }
+    return $$.ele(this.doc, "div", {
+      className: `${PREFIX}button-sign`
+    });
+  },
+  createMountPoint() {
+    return $$.ele(this.doc, "div", {
+      className: `${PREFIX}button-mount-point`
+    });
+  },
+  disable() {
+    this.disabled = true;
+    $$.getClassList(this.element).remove(`${PREFIX}enabled`);
+  },
+  enable() {
+    this.disabled = false;
+    $$.getClassList(this.element).add(`${PREFIX}enabled`);
+  },
+  mergeElement() {
+    if (this.icon) {
+      this.element.appendChild(this.icon);
+    }
+    this.element.appendChild(this.label);
+    if (this.sign) {
+      this.label.appendChild(this.sign);
+    }
+    this.element.appendChild(this.mountPoint);
+  }
+});
+var button_default = Button;
+
+// src/legacy/list.ts
+var PREFIX2 = "kf-editor-ui-";
+var $$2 = createLegacyUiUtils();
+var kity3 = getLegacyKity();
+var List = kity3.createClass("List", {
+  constructor(doc, options) {
+    this.options = options;
+    this.doc = doc;
+    this.onselectHandler = function() {
+    };
+    this.currentSelect = -1;
+    this.element = this.createBox();
+    this.itemGroups = this.createItems();
+    this.mergeElement();
+  },
+  setSelectHandler(selectHandler) {
+    this.onselectHandler = selectHandler;
+  },
+  createBox() {
+    const boxNode = $$2.ele(this.doc, "div", {
+      className: `${PREFIX2}list`
+    });
+    const bgNode = $$2.ele(this.doc, "div", {
+      className: `${PREFIX2}list-bg`
+    });
+    if ("width" in this.options && this.options.width !== void 0) {
+      boxNode.style.width = `${this.options.width}px`;
+    }
+    boxNode.appendChild(bgNode);
+    return boxNode;
+  },
+  select(index) {
+    let oldSelect = this.currentSelect;
+    if (oldSelect === -1) {
+      oldSelect = index;
+    }
+    this.unselect(oldSelect);
+    this.currentSelect = index;
+    $$2.getClassList(this.itemGroups.items[index]).add(`${PREFIX2}list-item-select`);
+    this.onselectHandler(index, oldSelect);
+  },
+  unselect(index) {
+    if (!this.itemGroups.items[index]) {
+      return;
+    }
+    $$2.getClassList(this.itemGroups.items[index]).remove(`${PREFIX2}list-item-select`);
+  },
+  setOffset(x, y) {
+    this.element.style.left = `${x}px`;
+    this.element.style.top = `${y}px`;
+  },
+  initEvent() {
+    const className = `.${PREFIX2}list-item`;
+    const self = this;
+    $$2.delegate(this.itemGroups.container, className, "mousedown", function(e) {
+      e.preventDefault();
+      if ((e.which ?? 1) !== 1) {
+        return;
+      }
+      const index = Number(this.getAttribute("data-index"));
+      if (!Number.isNaN(index)) {
+        self.select(index);
+      }
+    });
+    $$2.on(this.element, "mousedown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+  },
+  getPositionInfo() {
+    return $$2.getRectBox(this.element);
+  },
+  createItems() {
+    const doc = this.doc;
+    const groupNode = $$2.ele(this.doc, "div", {
+      className: `${PREFIX2}list-item`
+    });
+    const itemContainer = groupNode.cloneNode(false);
+    const items = [];
+    itemContainer.className = `${PREFIX2}list-item-container`;
+    kity3.Utils.each(this.options.items, (itemText, i) => {
+      const itemNode = groupNode.cloneNode(false);
+      const iconNode = groupNode.cloneNode(false);
+      iconNode.className = `${PREFIX2}list-item-icon`;
+      itemNode.appendChild(iconNode);
+      itemNode.appendChild($$2.ele(doc, "text", itemText));
+      itemNode.setAttribute("data-index", String(i));
+      items.push(itemNode);
+      itemContainer.appendChild(itemNode);
+    });
+    return {
+      container: itemContainer,
+      items
+    };
+  },
+  mergeElement() {
+    this.element.appendChild(this.itemGroups.container);
+  },
+  mountTo(container) {
+    container.appendChild(this.element);
+  }
+});
+var list_default = List;
+
+// src/legacy/box.ts
+var kity4 = getLegacyKity();
+var $$3 = createLegacyUiUtils();
+var PREFIX3 = "kf-editor-ui-";
+var BOX_TYPE = legacyBoxType;
+var ITEM_TYPE = legacyItemType;
+var SCROLL_STEP = 20;
+function getViewportBox(doc) {
+  const view = doc.documentElement;
+  return {
+    top: 0,
+    left: 0,
+    right: view.clientWidth,
+    bottom: view.clientHeight,
+    width: view.clientWidth,
+    height: view.clientHeight
+  };
+}
+function getStyleByData(data) {
+  let style = `background: url( ${data.img} ) no-repeat `;
+  style += `${-data.pos.x}px `;
+  style += `${-data.pos.y}px;`;
+  style += ` width: ${data.size.width}px;`;
+  style += ` height: ${data.size.height}px;`;
+  return style;
+}
+function createItems(doc, group, type) {
+  const items = [];
+  kity4.Utils.each(group, (itemVal) => {
+    items.push(new BoxItem(type, doc, itemVal));
+  });
+  return items;
+}
+function createOverlapContainer(doc) {
+  return $$3.ele(doc, "div", {
+    className: `${PREFIX3}overlap-container`
+  });
+}
+function createOverlapButton(doc, options) {
+  return new button_default(doc, {
+    className: "overlap-button",
+    label: "",
+    fixOffset: options.fixOffset
+  });
+}
+function createOverlapList(doc, list) {
+  return new list_default(doc, list);
+}
+var BoxItem = kity4.createClass("BoxItem", {
+  constructor(type, doc, options) {
+    this.type = type;
+    this.doc = doc;
+    this.options = options;
+    this.element = this.createItem();
+    this.labelNode = this.createLabel();
+    this.contentNode = this.createContent();
+    this.mergeElement();
+  },
+  getNode() {
+    return this.element;
+  },
+  createItem() {
+    return $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-item`
+    });
+  },
+  createLabel() {
+    if (!("label" in this.options)) {
+      return void 0;
+    }
+    return $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-item-label`,
+      content: this.options.label
+    });
+  },
+  getContent() {
+  },
+  createContent() {
+    switch (this.type) {
+      case ITEM_TYPE.BIG:
+        return this.createBigContent();
+      case ITEM_TYPE.SMALL:
+        return this.createSmallContent();
+      default:
+        return this.createSmallContent();
+    }
+  },
+  createBigContent() {
+    const contentNode = $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-item-content`
+    });
+    const cls = `${PREFIX3}box-item-val`;
+    const tmpContent = this.options.item;
+    const tmpNode = $$3.ele(this.doc, "div", {
+      className: cls
+    });
+    const styleStr = getStyleByData(tmpContent);
+    tmpNode.innerHTML = `<div class="${PREFIX3}item-image" style="${styleStr}"></div>`;
+    this.element.setAttribute("data-value", tmpContent.val);
+    contentNode.appendChild(tmpNode);
+    return contentNode;
+  },
+  createSmallContent() {
+    const contentNode = $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-item-content`
+    });
+    const cls = `${PREFIX3}box-item-val`;
+    const tmpContent = this.options;
+    if (tmpContent.unicode) {
+      const tmpNode2 = $$3.ele(this.doc, "span", {
+        className: `${PREFIX3}box-item-text`,
+        content: tmpContent.unicode
+      });
+      if (tmpContent.unicodeFont) {
+        tmpNode2.style.fontFamily = tmpContent.unicodeFont;
+      }
+      if (tmpContent.key) {
+        this.element.setAttribute("data-value", tmpContent.key);
+      }
+      contentNode.appendChild(tmpNode2);
+      return contentNode;
+    }
+    const tmpNode = $$3.ele(this.doc, "div", {
+      className: cls
+    });
+    tmpNode.style.background = `url( ${tmpContent.img} )`;
+    tmpNode.style.backgroundPosition = `${-tmpContent.pos.x}px ${-tmpContent.pos.y}px`;
+    if (tmpContent.key) {
+      this.element.setAttribute("data-value", tmpContent.key);
+    }
+    contentNode.appendChild(tmpNode);
+    return contentNode;
+  },
+  mergeElement() {
+    if (this.labelNode) {
+      this.element.appendChild(this.labelNode);
+    }
+    this.element.appendChild(this.contentNode);
+  },
+  appendTo(container) {
+    container.appendChild(this.element);
+  }
+});
+var Box = kity4.createClass("Box", {
+  constructor(doc, options) {
+    this.options = options;
+    this.toolbar = null;
+    this.options.type = this.options.type || BOX_TYPE.DETACHED;
+    this.doc = doc;
+    this.itemPanels = null;
+    this.overlapButtonObject = null;
+    this.overlapIndex = -1;
+    this.onchangeHandler = function() {
+    };
+    this.element = this.createBox();
+    this.groupContainer = this.createGroupContainer();
+    this.itemGroups = this.createItemGroup();
+    this.mergeElement();
+  },
+  createBox() {
+    const boxNode = $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box`
+    });
+    if ("width" in this.options && this.options.width !== void 0) {
+      boxNode.style.width = `${this.options.width}px`;
+    }
+    return boxNode;
+  },
+  setToolbar(toolbar) {
+    this.toolbar = toolbar;
+    if (this.overlapButtonObject) {
+      this.overlapButtonObject.setToolbar(toolbar);
+    }
+  },
+  updateSize() {
+    const containerBox = getViewportBox(this.doc);
+    const diff = 30;
+    const curBox = $$3.getRectBox(this.element);
+    if (this.options.type === BOX_TYPE.DETACHED) {
+      if (curBox.bottom <= containerBox.bottom) {
+        this.element.scrollTop = 0;
+        return;
+      }
+      this.element.style.height = `${curBox.height - (curBox.bottom - containerBox.bottom + diff)}px`;
+      return;
+    }
+    const panel = this.getCurrentItemPanel();
+    panel.scrollTop = 0;
+    if (curBox.bottom <= containerBox.bottom) {
+      return;
+    }
+    const panelRect = $$3.getRectBox(panel);
+    panel.style.height = `${containerBox.bottom - panelRect.top - diff}px`;
+  },
+  initEvent() {
+    const className = `.${PREFIX3}box-item`;
+    const self = this;
+    $$3.delegate(this.groupContainer, className, "mousedown", function(e) {
+      e.preventDefault();
+      if ((e.which ?? 1) !== 1) {
+        return;
+      }
+      self.onselectHandler?.(this.getAttribute("data-value"));
+    });
+    $$3.on(this.element, "mousedown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    $$3.on(this.element, "mousewheel", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.scroll(e.wheelDelta ?? 0);
+    });
+  },
+  getNode() {
+    return this.element;
+  },
+  setSelectHandler(onselectHandler) {
+    this.onselectHandler = onselectHandler;
+  },
+  scroll(delta) {
+    if (delta < 0) {
+      this.scrollDown();
+      return;
+    }
+    if (delta > 0) {
+      this.scrollUp();
+    }
+  },
+  scrollDown() {
+    if (this.options.type === BOX_TYPE.DETACHED) {
+      this.element.scrollTop += SCROLL_STEP;
+    } else {
+      this.getCurrentItemPanel().scrollTop += SCROLL_STEP;
+    }
+  },
+  scrollUp() {
+    if (this.options.type === BOX_TYPE.DETACHED) {
+      this.element.scrollTop -= SCROLL_STEP;
+    } else {
+      this.getCurrentItemPanel().scrollTop -= SCROLL_STEP;
+    }
+  },
+  setChangeHandler(changeHandler) {
+    this.onchangeHandler = changeHandler;
+  },
+  createGroupContainer() {
+    return $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-container`
+    });
+  },
+  getPositionInfo() {
+    return $$3.getRectBox(this.element);
+  },
+  createItemGroup() {
+    const itemGroup = this.createGroup();
+    switch (this.options.type) {
+      case BOX_TYPE.DETACHED:
+        return itemGroup.items[0];
+      case BOX_TYPE.OVERLAP:
+        return this.createOverlapGroup(itemGroup);
+      default:
+        return null;
+    }
+  },
+  enable() {
+    this.overlapButtonObject?.enable();
+  },
+  disable() {
+    this.overlapButtonObject?.disable();
+  },
+  hide() {
+    this.overlapButtonObject?.hideMount();
+  },
+  getOverlapContent() {
+    if (this.options.type !== BOX_TYPE.OVERLAP || this.overlapIndex < 0) {
+      return null;
+    }
+    return this.options.group[this.overlapIndex].items;
+  },
+  createOverlapGroup(itemGroup) {
+    const classifyList = itemGroup.title;
+    const overlapContainer = createOverlapContainer(this.doc);
+    const overlapButtonObject = createOverlapButton(this.doc, {
+      fixOffset: this.options.fixOffset
+    });
+    const overlapListObject = createOverlapList(this.doc, {
+      width: 150,
+      items: classifyList
+    });
+    const wrapNode = $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}wrap-group`
+    });
+    this.overlapButtonObject = overlapButtonObject;
+    overlapButtonObject.mount(overlapListObject);
+    overlapButtonObject.initEvent();
+    overlapListObject.initEvent();
+    kity4.Utils.each(itemGroup.items, (itemArr, index) => {
+      const itemWrapNode = wrapNode.cloneNode(false);
+      kity4.Utils.each(itemArr, (item) => {
+        itemWrapNode.appendChild(item);
+      });
+      itemGroup.items[index] = itemWrapNode;
+    });
+    this.itemPanels = itemGroup.items;
+    overlapListObject.setSelectHandler((index, oldIndex) => {
+      this.overlapIndex = index;
+      overlapButtonObject.setLabel(classifyList[index]);
+      overlapButtonObject.hideMount();
+      itemGroup.items[oldIndex].style.display = "none";
+      itemGroup.items[index].style.display = "block";
+      if (index !== oldIndex) {
+        this.updateSize();
+      }
+      this.onchangeHandler(index);
+    });
+    overlapContainer.appendChild(overlapButtonObject.getNode());
+    kity4.Utils.each(itemGroup.items, (group, index) => {
+      const groupNode = group;
+      if (index > 0) {
+        groupNode.style.display = "none";
+      }
+      overlapContainer.appendChild(groupNode);
+    });
+    overlapListObject.select(0);
+    return [overlapContainer];
+  },
+  getCurrentItemPanel() {
+    return this.itemPanels[this.overlapIndex];
+  },
+  getGroupList() {
+    const lists = [];
+    kity4.Utils.each(this.options.group, (group) => {
+      lists.push(group.title || "");
+    });
+    return {
+      width: 150,
+      items: lists
+    };
+  },
+  createGroup() {
+    const doc = this.doc;
+    const result = {
+      title: [],
+      items: []
+    };
+    const baseGroupNode = $$3.ele(this.doc, "div", {
+      className: `${PREFIX3}box-group`
+    });
+    const baseItemContainer = baseGroupNode.cloneNode(false);
+    baseItemContainer.className = `${PREFIX3}box-group-item-container`;
+    const itemType = BOX_TYPE.DETACHED === this.options.type ? ITEM_TYPE.BIG : ITEM_TYPE.SMALL;
+    kity4.Utils.each(this.options.group, (group) => {
+      result.title.push(group.title || "");
+      const itemGroup = [];
+      kity4.Utils.each(group.items, (item) => {
+        const groupNode = baseGroupNode.cloneNode(false);
+        const itemContainer = baseItemContainer.cloneNode(false);
+        const groupTitle = $$3.ele(doc, "div", {
+          className: `${PREFIX3}box-group-title`,
+          content: item.title
+        });
+        groupNode.appendChild(groupTitle);
+        groupNode.appendChild(itemContainer);
+        kity4.Utils.each(createItems(doc, item.content, itemType), (boxItem) => {
+          boxItem.appendTo(itemContainer);
+        });
+        itemGroup.push(groupNode);
+      });
+      result.items.push(itemGroup);
+    });
+    return result;
+  },
+  mergeElement() {
+    const groupContainer = this.groupContainer;
+    this.element.appendChild(groupContainer);
+    kity4.Utils.each(this.itemGroups, (group) => {
+      groupContainer.appendChild(group);
+    });
+  },
+  mountTo(container) {
+    container.appendChild(this.element);
+  },
+  appendTo(container) {
+    container.appendChild(this.element);
+  }
+});
+var box_default = Box;
+
+// src/legacy/area.ts
+var PREFIX4 = "kf-editor-ui-";
+var PANEL_HEIGHT = 66;
+var $$4 = createLegacyUiUtils();
+var kity5 = getLegacyKity();
+var Area = kity5.createClass("Area", {
+  constructor(doc, options) {
+    this.options = options;
+    this.doc = doc;
+    this.toolbar = null;
+    this.disabled = true;
+    this.panelIndex = 0;
+    this.maxPanelIndex = 0;
+    this.currentItemCount = 0;
+    this.lineMaxCount = 9;
+    this.element = this.createArea();
+    this.container = this.createContainer();
+    this.panel = this.createPanel();
+    this.buttonContainer = this.createButtonContainer();
+    this.button = this.createButton();
+    this.mountPoint = this.createMountPoint();
+    this.moveDownButton = this.createMoveDownButton();
+    this.moveUpButton = this.createMoveUpButton();
+    this.boxObject = this.createBox();
+    this.mergeElement();
+    this.mount();
+    this.setListener();
+    this.initEvent();
+  },
+  initEvent() {
+    const self = this;
+    $$4.on(this.button, "mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if ((e.which ?? 1) !== 1 || this.disabled) {
+        return;
+      }
+      this.showMount();
+      this.toolbar?.notify("closeOther", this);
+    });
+    $$4.on(this.moveDownButton, "mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if ((e.which ?? 1) !== 1 || this.disabled) {
+        return;
+      }
+      this.nextPanel();
+      this.toolbar?.notify("closeOther", this);
+    });
+    $$4.on(this.moveUpButton, "mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if ((e.which ?? 1) !== 1 || this.disabled) {
+        return;
+      }
+      this.prevPanel();
+      this.toolbar?.notify("closeOther", this);
+    });
+    $$4.delegate(this.container, ".kf-editor-ui-area-item", "mousedown", function(e) {
+      e.preventDefault();
+      if ((e.which ?? 1) !== 1 || self.disabled) {
+        return;
+      }
+      $$4.publish("data.select", this.getAttribute("data-value"));
+    });
+    this.boxObject.initEvent();
+  },
+  disable() {
+    this.disabled = true;
+    this.boxObject.disable();
+    $$4.getClassList(this.element).remove(`${PREFIX4}enabled`);
+  },
+  enable() {
+    this.disabled = false;
+    this.boxObject.enable();
+    $$4.getClassList(this.element).add(`${PREFIX4}enabled`);
+  },
+  setListener() {
+    this.boxObject.setSelectHandler((val) => {
+      $$4.publish("data.select", val);
+      this.hide();
+    });
+    this.boxObject.setChangeHandler(() => {
+      this.updateContent();
+    });
+  },
+  createArea() {
+    const areaNode = $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area`
+    });
+    if ("width" in this.options && this.options.width !== void 0) {
+      areaNode.style.width = `${this.options.width}px`;
+    }
+    return areaNode;
+  },
+  checkMaxPanelIndex() {
+    this.maxPanelIndex = Math.ceil(this.currentItemCount / this.lineMaxCount / 2);
+  },
+  updateContent() {
+    const items = this.boxObject.getOverlapContent();
+    let count = 0;
+    let lineno = 0;
+    let colno = 0;
+    const lineMaxCount = this.lineMaxCount;
+    const newContent = [];
+    this.panel.innerHTML = "";
+    kity5.Utils.each(items, (item) => {
+      const contents = item.content;
+      kity5.Utils.each(contents, (currentContent) => {
+        lineno = Math.floor(count / lineMaxCount);
+        colno = count % lineMaxCount;
+        count += 1;
+        const style = `top: ${lineno * 33 + 5}px; left: ${colno * 32 + 5}px;`;
+        if (currentContent.unicode !== void 0) {
+          const fontStyle = currentContent.unicodeFont ? `font-family: ${currentContent.unicodeFont};` : "";
+          newContent.push(
+            `<div class="${PREFIX4}area-item ${PREFIX4}area-item-unicode" data-value="${currentContent.key}" style="${style}"><div class="${PREFIX4}area-item-inner"><span class="${PREFIX4}area-item-text" style="${fontStyle}">${currentContent.unicode}</span></div></div>`
+          );
+        } else {
+          newContent.push(
+            `<div class="${PREFIX4}area-item" data-value="${currentContent.key}" style="${style}"><div class="${PREFIX4}area-item-inner"><div class="${PREFIX4}area-item-img" style="background: url(${currentContent.img}) no-repeat ${-(currentContent.pos?.x ?? 0)}px ${-(currentContent.pos?.y ?? 0)}px;"></div></div></div>`
+          );
+        }
+      });
+    });
+    this.currentItemCount = count;
+    this.panelIndex = 0;
+    this.panel.style.top = "0";
+    this.panel.innerHTML = newContent.join("");
+    this.checkMaxPanelIndex();
+    this.updatePanelButtonState();
+  },
+  mount() {
+    this.boxObject.mountTo(this.mountPoint);
+  },
+  showMount() {
+    this.mountPoint.style.display = "block";
+    this.boxObject.updateSize();
+  },
+  hideMount() {
+    this.mountPoint.style.display = "none";
+  },
+  hide() {
+    this.hideMount();
+    this.boxObject.hide();
+  },
+  createButton() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area-button`
+    });
+  },
+  createMoveDownButton() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}movedown-button`,
+      content: ""
+    });
+  },
+  createMoveUpButton() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}moveup-button`,
+      content: ""
+    });
+  },
+  createMountPoint() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area-mount`
+    });
+  },
+  createBox() {
+    return new box_default(this.doc, this.options.box);
+  },
+  createContainer() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area-container`
+    });
+  },
+  createPanel() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area-panel`
+    });
+  },
+  createButtonContainer() {
+    return $$4.ele(this.doc, "div", {
+      className: `${PREFIX4}area-button-container`
+    });
+  },
+  mergeElement() {
+    this.buttonContainer.appendChild(this.moveUpButton);
+    this.buttonContainer.appendChild(this.moveDownButton);
+    this.buttonContainer.appendChild(this.button);
+    this.container.appendChild(this.panel);
+    this.element.appendChild(this.container);
+    this.element.appendChild(this.buttonContainer);
+    this.element.appendChild(this.mountPoint);
+  },
+  disablePanelUp() {
+    this.disabledUp = true;
+    $$4.getClassList(this.moveUpButton).add("kf-editor-ui-disabled");
+  },
+  enablePanelUp() {
+    this.disabledUp = false;
+    $$4.getClassList(this.moveUpButton).remove("kf-editor-ui-disabled");
+  },
+  disablePanelDown() {
+    this.disabledDown = true;
+    $$4.getClassList(this.moveDownButton).add("kf-editor-ui-disabled");
+  },
+  enablePanelDown() {
+    this.disabledDown = false;
+    $$4.getClassList(this.moveDownButton).remove("kf-editor-ui-disabled");
+  },
+  updatePanelButtonState() {
+    if (this.panelIndex === 0) {
+      this.disablePanelUp();
+    } else {
+      this.enablePanelUp();
+    }
+    if (this.panelIndex + 1 >= this.maxPanelIndex) {
+      this.disablePanelDown();
+    } else {
+      this.enablePanelDown();
+    }
+  },
+  nextPanel() {
+    if (this.disabledDown || this.panelIndex + 1 >= this.maxPanelIndex) {
+      return;
+    }
+    this.panelIndex += 1;
+    this.panel.style.top = `${-this.panelIndex * PANEL_HEIGHT}px`;
+    this.updatePanelButtonState();
+  },
+  prevPanel() {
+    if (this.disabledUp || this.panelIndex === 0) {
+      return;
+    }
+    this.panelIndex -= 1;
+    this.panel.style.top = `${-this.panelIndex * PANEL_HEIGHT}px`;
+    this.updatePanelButtonState();
+  },
+  setToolbar(toolbar) {
+    this.toolbar = toolbar;
+    this.boxObject.setToolbar(toolbar);
+  },
+  attachTo(container) {
+    container.appendChild(this.element);
+    this.updateContent();
+    this.updatePanelButtonState();
+  }
+});
+var area_default = Area;
+
+// src/legacy/delimiter.ts
+var PREFIX5 = "kf-editor-ui-";
+var $$5 = createLegacyUiUtils();
+var kity6 = getLegacyKity();
+var Delimiter = kity6.createClass("Delimiter", {
+  constructor(doc) {
+    this.doc = doc;
+    this.element = this.createDilimiter();
+  },
+  setToolbar(_toolbar) {
+  },
+  createDilimiter() {
+    const dilimiterNode = $$5.ele(this.doc, "div", {
+      className: `${PREFIX5}delimiter`
+    });
+    dilimiterNode.appendChild(
+      $$5.ele(this.doc, "div", {
+        className: `${PREFIX5}delimiter-line`
+      })
+    );
+    return dilimiterNode;
+  },
+  attachTo(container) {
+    container.appendChild(this.element);
+  }
+});
+var delimiter_default = Delimiter;
+
+// src/legacy/dropdown-box.ts
+var $$6 = createLegacyUiUtils();
+var kity7 = getLegacyKity();
+var DrapdownBox = kity7.createClass("DrapdownBox", {
+  constructor(doc, options) {
+    this.options = options;
+    this.toolbar = null;
+    this.doc = doc;
+    this.buttonElement = this.createButton();
+    this.element = this.buttonElement.getNode();
+    this.boxElement = this.createBox();
+    this.buttonElement.mount(this.boxElement);
+    this.initEvent();
+  },
+  initEvent() {
+    $$6.on(this.element, "mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toolbar?.notify("closeOther", this);
+    });
+    this.buttonElement.initEvent();
+    this.boxElement.initEvent();
+    this.boxElement.setSelectHandler((val) => {
+      $$6.publish("data.select", val);
+      this.buttonElement.hide();
+    });
+  },
+  disable() {
+    this.buttonElement.disable();
+  },
+  enable() {
+    this.buttonElement.enable();
+  },
+  setToolbar(toolbar) {
+    this.toolbar = toolbar;
+    this.buttonElement.setToolbar(toolbar);
+    this.boxElement.setToolbar(toolbar);
+  },
+  createButton() {
+    return new button_default(this.doc, this.options.button);
+  },
+  show() {
+    this.buttonElement.show();
+  },
+  hide() {
+    this.buttonElement.hide();
+  },
+  createBox() {
+    return new box_default(this.doc, this.options.box);
+  },
+  attachTo(container) {
+    container.appendChild(this.element);
+  }
+});
+var dropdown_box_default = DrapdownBox;
+
+// src/legacy/ui-impl.ts
+var UiImpl = {
+  DrapdownBox: dropdown_box_default,
+  Delimiter: delimiter_default,
+  Area: area_default
+};
+var ui_impl_default = UiImpl;
+
+// src/legacy/toolbar.ts
+var $$7 = createLegacyUiUtils();
+var kity8 = getLegacyKity();
+var Toolbar = kity8.createClass("Tollbar", {
+  constructor(uiComponent, kfEditor, elementList) {
+    this.kfEditor = kfEditor;
+    this.uiComponent = uiComponent;
+    this.elementList = elementList;
+    this.elements = [];
+    this.initToolbarElements();
+    this.initServices();
+    this.initEvent();
+  },
+  initServices() {
+    this.kfEditor.registerService("ui.toolbar.disable", this, {
+      disableToolbar: this.disableToolbar
+    });
+    this.kfEditor.registerService("ui.toolbar.enable", this, {
+      enableToolbar: this.enableToolbar
+    });
+    this.kfEditor.registerService("ui.toolbar.close", this, {
+      closeToolbar: this.closeToolbar
+    });
+  },
+  initEvent() {
+    $$7.on(this.uiComponent.toolbarContainer, "mousedown", (e) => {
+      e.preventDefault();
+    });
+    $$7.on(this.uiComponent.toolbarContainer, "mousewheel", (e) => {
+      e.preventDefault();
+    });
+    $$7.on(this.kfEditor.getContainer(), "mousedown", () => {
+      this.notify("closeAll");
+    });
+    $$7.subscribe("data.select", (...args) => {
+      this.insertSource(String(args[0] ?? ""));
+    });
+  },
+  insertSource(value) {
+    this.kfEditor.requestService("control.insert.string", value);
+  },
+  disableToolbar() {
+    kity8.Utils.each(this.elements, (ele) => {
+      ele.disable?.();
+    });
+  },
+  enableToolbar() {
+    kity8.Utils.each(this.elements, (ele) => {
+      ele.enable?.();
+    });
+  },
+  getContainer() {
+    return this.kfEditor.requestService("ui.get.canvas.container");
+  },
+  closeToolbar() {
+    this.closeElement();
+  },
+  notify(type, exception) {
+    switch (type) {
+      case "closeAll":
+      case "closeOther":
+        this.closeElement(exception);
+        return;
+      default:
+        return;
+    }
+  },
+  closeElement(exception) {
+    kity8.Utils.each(this.elements, (ele) => {
+      if (ele !== exception) {
+        ele.hide?.();
+      }
+    });
+  },
+  initToolbarElements() {
+    const doc = this.uiComponent.toolbarContainer.ownerDocument;
+    kity8.Utils.each(this.elementList, (eleInfo) => {
+      const ele = createElement(eleInfo.type, doc, eleInfo.options);
+      this.elements.push(ele);
+      this.appendElement(ele);
+    });
+  },
+  appendElement(uiElement) {
+    uiElement.setToolbar(this);
+    uiElement.attachTo(this.uiComponent.toolbarContainer);
+  }
+});
+function createElement(type, doc, options) {
+  switch (type) {
+    case legacyEleType.DRAPDOWN_BOX:
+      return createDrapdownBox(doc, options);
+    case legacyEleType.DELIMITER:
+      return createDelimiter(doc);
+    case legacyEleType.AREA:
+      return createArea(doc, options);
+    default:
+      throw new Error(`Unknown toolbar element type: ${String(type)}`);
+  }
+}
+function createDrapdownBox(doc, options) {
+  return new ui_impl_default.DrapdownBox(doc, options);
+}
+function createDelimiter(doc) {
+  return new ui_impl_default.Delimiter(doc);
+}
+function createArea(doc, options) {
+  return new ui_impl_default.Area(doc, options);
+}
+var toolbar_default = Toolbar;
+
+// src/legacy/scrollbar.ts
+var SCROLLBAR_DEF = legacyUiDef.scrollbar;
+var SCROLLBAR_CONF = legacySysconf.scrollbar;
+var CLASS_PREFIX = "kf-editor-ui-";
+var kity9 = getLegacyKity();
+function createElement2(doc, eleName, className) {
+  const node = doc.createElement(eleName);
+  const str = '<div class="$1"></div><div class="$2"></div>';
+  node.className = CLASS_PREFIX + className;
+  if (className === "thumb") {
+    const thumbClassName = CLASS_PREFIX + className;
+    node.innerHTML = str.replace("$1", `${thumbClassName}-left`).replace("$2", `${thumbClassName}-right`);
+  }
+  return node;
+}
+function preventDefault(comp) {
+  legacyBaseUtils.addEvent(comp.container, "mousedown", (e) => {
+    e.preventDefault();
+  });
+}
+function trackClick(comp) {
+  legacyBaseUtils.addEvent(comp.widgets.track, "mousedown", function(e) {
+    trackClickHandler(this, comp, e);
+  });
+}
+function btnClick(comp) {
+  legacyBaseUtils.addEvent(comp.widgets.leftButton, "mousedown", () => {
+    setThumbOffsetByStep(comp, -SCROLLBAR_CONF.step);
+  });
+  legacyBaseUtils.addEvent(comp.widgets.rightButton, "mousedown", () => {
+    setThumbOffsetByStep(comp, SCROLLBAR_CONF.step);
+  });
+}
+function thumbHandler(comp) {
+  let isMoving = false;
+  let startPoint = 0;
+  let startOffset = 0;
+  const trackWidth = comp.values.trackWidth;
+  legacyBaseUtils.addEvent(comp.widgets.thumb, "mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    isMoving = true;
+    startPoint = e.clientX;
+    startOffset = comp.thumbLocationX;
+  });
+  legacyBaseUtils.addEvent(comp.container.ownerDocument, "mouseup", () => {
+    isMoving = false;
+    startPoint = 0;
+    startOffset = 0;
+  });
+  legacyBaseUtils.addEvent(comp.container.ownerDocument, "mousemove", (e) => {
+    if (!isMoving) {
+      return;
+    }
+    const distance = e.clientX - startPoint;
+    let offset = startOffset + distance;
+    const thumbWidth = comp.values.thumbWidth;
+    if (offset < 0) {
+      offset = 0;
+    } else if (offset + thumbWidth > trackWidth) {
+      offset = trackWidth - thumbWidth;
+    }
+    setThumbLocation(comp, offset);
+  });
+}
+function trackClickHandler(track, comp, evt) {
+  const trackRect = legacyBaseUtils.getRect(track);
+  const values = comp.values;
+  const unitOffset = values.viewWidth / (values.contentWidth - values.viewWidth) * values.trackWidth;
+  const clickOffset = evt.clientX - trackRect.left;
+  if (clickOffset > values.offset) {
+    if (values.offset + unitOffset > values.trackWidth) {
+      setThumbOffset(comp, values.trackWidth);
+    } else {
+      setThumbOffset(comp, values.offset + unitOffset);
+    }
+    return;
+  }
+  if (values.offset - unitOffset < 0) {
+    setThumbOffset(comp, 0);
+  } else {
+    setThumbOffset(comp, values.offset - unitOffset);
+  }
+}
+function setThumbLocation(comp, locationX) {
+  const values = comp.values;
+  const trackPieceWidth = values.trackWidth - values.thumbWidth;
+  const offset = Math.floor(locationX / trackPieceWidth * values.trackWidth);
+  comp.updateOffset(offset);
+  comp.thumbLocationX = locationX;
+  comp.widgets.thumb.style.left = `${locationX}px`;
+}
+function setThumbOffsetByStep(comp, step) {
+  let leftOverflow = comp.leftOverflow + step;
+  if (leftOverflow < 0) {
+    leftOverflow = 0;
+  } else if (leftOverflow > comp.values.scrollWidth) {
+    leftOverflow = comp.values.scrollWidth;
+  }
+  setThumbByLeftOverflow(comp, leftOverflow);
+}
+function setThumbOffset(comp, offset) {
+  const values = comp.values;
+  const offsetProportion = offset / values.trackWidth;
+  const trackPieceWidth = values.trackWidth - values.thumbWidth;
+  let thumbLocationX = Math.floor(offsetProportion * trackPieceWidth);
+  if (offset < 0) {
+    offset = 0;
+    thumbLocationX = 0;
+  }
+  comp.updateOffset(offset);
+  comp.widgets.thumb.style.left = `${thumbLocationX}px`;
+  comp.thumbLocationX = thumbLocationX;
+}
+function setThumbOffsetByViewOffset(comp, viewOffset) {
+  const values = comp.values;
+  const offsetProportion = viewOffset / (values.contentWidth - values.viewWidth);
+  const offset = Math.floor(offsetProportion * values.trackWidth);
+  setThumbOffset(comp, offset);
+}
+function setThumbByLeftOverflow(comp, leftViewOverflow) {
+  const values = comp.values;
+  const overflowProportion = leftViewOverflow / (values.contentWidth - values.viewWidth);
+  setThumbOffset(comp, overflowProportion * values.trackWidth);
+}
+var Scrollbar = kity9.createClass("Scrollbar", {
+  constructor(uiComponent, kfEditor) {
+    this.uiComponent = uiComponent;
+    this.kfEditor = kfEditor;
+    this.widgets = null;
+    this.container = this.uiComponent.scrollbarContainer;
+    this.state = false;
+    this.values = {
+      offset: 0,
+      left: 0,
+      viewWidth: 0,
+      contentWidth: 0,
+      trackWidth: 0,
+      thumbWidth: 0,
+      scrollWidth: 0
+    };
+    this.thumbLocationX = 0;
+    this.leftOverflow = 0;
+    this.rightOverflow = 0;
+    this.isExpand = true;
+    this.initWidget();
+    this.mountWidget();
+    this.initSize();
+    this.hide();
+    this.initServices();
+    this.initEvent();
+    this.updateHandler = function() {
+    };
+  },
+  initWidget() {
+    const doc = this.container.ownerDocument;
+    this.widgets = {
+      leftButton: createElement2(doc, "div", "left-button"),
+      rightButton: createElement2(doc, "div", "right-button"),
+      track: createElement2(doc, "div", "track"),
+      thumb: createElement2(doc, "div", "thumb"),
+      thumbBody: createElement2(doc, "div", "thumb-body")
+    };
+  },
+  initSize() {
+    const leftBtnWidth = legacyBaseUtils.getRect(this.widgets.leftButton).width;
+    const rightBtnWidth = legacyBaseUtils.getRect(this.widgets.rightButton).width;
+    this.values.viewWidth = legacyBaseUtils.getRect(this.container).width;
+    this.values.trackWidth = this.values.viewWidth - leftBtnWidth - rightBtnWidth;
+    this.widgets.track.style.width = `${this.values.trackWidth}px`;
+  },
+  initServices() {
+    this.kfEditor.registerService("ui.show.scrollbar", this, {
+      showScrollbar: this.show
+    });
+    this.kfEditor.registerService("ui.hide.scrollbar", this, {
+      hideScrollbar: this.hide
+    });
+    this.kfEditor.registerService("ui.update.scrollbar", this, {
+      updateScrollbar: this.update
+    });
+    this.kfEditor.registerService("ui.set.scrollbar.update.handler", this, {
+      setUpdateHandler: this.setUpdateHandler
+    });
+    this.kfEditor.registerService("ui.relocation.scrollbar", this, {
+      relocation: this.relocation
+    });
+  },
+  initEvent() {
+    preventDefault(this);
+    trackClick(this);
+    thumbHandler(this);
+    btnClick(this);
+  },
+  mountWidget() {
+    const widgets = this.widgets;
+    const container = this.container;
+    for (const wgtName in widgets) {
+      if (Object.prototype.hasOwnProperty.call(widgets, wgtName)) {
+        container.appendChild(widgets[wgtName]);
+      }
+    }
+    widgets.thumb.appendChild(widgets.thumbBody);
+    widgets.track.appendChild(widgets.thumb);
+  },
+  show() {
+    this.state = true;
+    this.container.style.display = "block";
+  },
+  hide() {
+    this.state = false;
+    this.container.style.display = "none";
+  },
+  update(contentWidth) {
+    const trackWidth = this.values.trackWidth;
+    this.isExpand = contentWidth > this.values.contentWidth;
+    this.values.contentWidth = contentWidth;
+    this.values.scrollWidth = contentWidth - this.values.viewWidth;
+    if (trackWidth >= contentWidth) {
+      this.hide();
+      return;
+    }
+    const thumbWidth = Math.max(Math.ceil(trackWidth * trackWidth / contentWidth), SCROLLBAR_DEF.thumbMinSize);
+    this.values.thumbWidth = thumbWidth;
+    this.widgets.thumb.style.width = `${thumbWidth}px`;
+    this.widgets.thumbBody.style.width = `${thumbWidth - 10}px`;
+  },
+  setUpdateHandler(updateHandler) {
+    this.updateHandler = updateHandler;
+  },
+  updateOffset(offset) {
+    const values = this.values;
+    values.offset = offset;
+    values.left = offset / values.trackWidth;
+    this.leftOverflow = values.left * (values.contentWidth - values.viewWidth);
+    this.rightOverflow = values.contentWidth - values.viewWidth - this.leftOverflow;
+    this.updateHandler(values.left, values.offset, values);
+  },
+  relocation() {
+    const cursorLocation = this.kfEditor.requestService("control.get.cursor.location");
+    const padding = SCROLLBAR_CONF.padding;
+    const contentWidth = this.values.contentWidth;
+    const viewWidth = this.values.viewWidth;
+    const viewLeftOverflow = this.values.left * (contentWidth - viewWidth);
+    if (cursorLocation.x < viewLeftOverflow) {
+      if (cursorLocation.x < 0) {
+        cursorLocation.x = 0;
+      }
+      setThumbOffsetByViewOffset(this, cursorLocation.x);
+      return;
+    }
+    if (cursorLocation.x + padding > viewLeftOverflow + viewWidth) {
+      cursorLocation.x += padding;
+      if (cursorLocation.x > contentWidth) {
+        cursorLocation.x = contentWidth;
+      }
+      const diff = cursorLocation.x - viewWidth;
+      setThumbOffsetByViewOffset(this, diff);
+      return;
+    }
+    if (this.isExpand) {
+      setThumbByLeftOverflow(this, this.leftOverflow);
+    } else {
+      setThumbByLeftOverflow(this, contentWidth - viewWidth - this.rightOverflow);
+    }
+  }
+});
+var scrollbar_default = Scrollbar;
+
+// src/formula-symbols.ts
+var UNICODE_SYMBOLS = {
+  pm: "\xB1",
+  infty: "\u221E",
+  "=": "=",
+  sim: "\u223C",
+  times: "\xD7",
+  div: "\xF7",
+  "!": "!",
+  "<": "<",
+  ll: "\u226A",
+  ">": ">",
+  gg: "\u226B",
+  leq: "\u2264",
+  geq: "\u2265",
+  mp: "\u2213",
+  cong: "\u2245",
+  equiv: "\u2261",
+  propto: "\u221D",
+  approx: "\u2248",
+  forall: "\u2200",
+  partial: "\u2202",
+  surd: "\u221A",
+  cup: "\u222A",
+  cap: "\u2229",
+  varnothing: "\u2205",
+  "%": "%",
+  circ: "\u2218",
+  exists: "\u2203",
+  nexists: "\u2204",
+  in: "\u2208",
+  ni: "\u220B",
+  gets: "\u2190",
+  uparrow: "\u2191",
+  to: "\u2192",
+  downarrow: "\u2193",
+  leftrightarrow: "\u2194",
+  therefore: "\u2234",
+  because: "\u2235",
+  "+": "+",
+  "-": "\u2212",
+  neg: "\xAC",
+  ast: "\u2217",
+  cdot: "\u22C5",
+  vdots: "\u22EE",
+  aleph: "\u2135",
+  beth: "\u2136",
+  blacksquare: "\u25A0",
+  alpha: "\u03B1",
+  beta: "\u03B2",
+  gamma: "\u03B3",
+  delta: "\u03B4",
+  epsilon: "\u03B5",
+  zeta: "\u03B6",
+  eta: "\u03B7",
+  theta: "\u03B8",
+  iota: "\u03B9",
+  kappa: "\u03BA",
+  lambda: "\u03BB",
+  mu: "\u03BC",
+  nu: "\u03BD",
+  xi: "\u03BE",
+  omicron: "\u03BF",
+  pi: "\u03C0",
+  rho: "\u03C1",
+  sigma: "\u03C3",
+  tau: "\u03C4",
+  upsilon: "\u03C5",
+  phi: "\u03C6",
+  chi: "\u03C7",
+  psi: "\u03C8",
+  omega: "\u03C9",
+  Alpha: "\u0391",
+  Beta: "\u0392",
+  Gamma: "\u0393",
+  Delta: "\u0394",
+  Epsilon: "\u0395",
+  Zeta: "\u0396",
+  Eta: "\u0397",
+  Theta: "\u0398",
+  Iota: "\u0399",
+  Kappa: "\u039A",
+  Lambda: "\u039B",
+  Mu: "\u039C",
+  Nu: "\u039D",
+  Xi: "\u039E",
+  Omicron: "\u039F",
+  Pi: "\u03A0",
+  Rho: "\u03A1",
+  Sigma: "\u03A3",
+  Tau: "\u03A4",
+  Upsilon: "\u03A5",
+  Phi: "\u03A6",
+  Chi: "\u03A7",
+  Psi: "\u03A8",
+  Omega: "\u03A9",
+  digamma: "\u03DD",
+  varepsilon: "\u03F5",
+  varkappa: "\u03F0",
+  varphi: "\u03C6",
+  varpi: "\u03D6",
+  varrho: "\u03F1",
+  varsigma: "\u03C2",
+  vartheta: "\u03D1",
+  neq: "\u2260",
+  nless: "\u226E",
+  ngtr: "\u226F",
+  nleq: "\u2270",
+  ngeq: "\u2271",
+  nsim: "\u2241",
+  lneqq: "\u2268",
+  gneqq: "\u2269",
+  nprec: "\u2280",
+  nsucc: "\u2281",
+  notin: "\u2209",
+  nsubseteq: "\u2288",
+  nsupseteq: "\u2289",
+  subsetneq: "\u228A",
+  supsetneq: "\u228B",
+  lnsim: "\u22E6",
+  gnsim: "\u22E7",
+  precnsim: "\u22E8",
+  succnsim: "\u22E9",
+  ntriangleleft: "\u22EA",
+  ntriangleright: "\u22EB",
+  ntrianglelefteq: "\u22EC",
+  ntrianglerighteq: "\u22ED",
+  nmid: "\u2224",
+  nparallel: "\u2226",
+  nvdash: "\u22AC",
+  nVdash: "\u22AE",
+  nvDash: "\u22AD",
+  nVDash: "\u22AF",
+  daleth: "\u2138",
+  gimel: "\u2137",
+  complement: "\u2201",
+  ell: "\u2113",
+  eth: "\xF0",
+  hbar: "\u210F",
+  hslash: "\u210F",
+  mho: "\u2127",
+  wp: "\u2118",
+  circledS: "\u24C8",
+  Bbbk: "\u212C",
+  Finv: "\u2132",
+  Game: "\u2141",
+  Im: "\u2111",
+  Re: "\u211C",
+  Leftarrow: "\u21D0",
+  Rightarrow: "\u21D2",
+  Uparrow: "\u21D1",
+  Downarrow: "\u21D3",
+  Leftrightarrow: "\u21D4",
+  Updownarrow: "\u21F3",
+  longleftarrow: "\u27F5",
+  longrightarrow: "\u27F6",
+  longleftrightarrow: "\u27F7",
+  Longleftarrow: "\u27F8",
+  Longrightarrow: "\u27F9",
+  Longleftrightarrow: "\u27FA",
+  nearrow: "\u2197",
+  nwarrow: "\u2196",
+  searrow: "\u2198",
+  swarrow: "\u2199",
+  nleftarrow: "\u219A",
+  nrightarrow: "\u219B",
+  nLeftarrow: "\u21CD",
+  nRightarrow: "\u21CF",
+  nLeftrightarrow: "\u21CE",
+  leftharpoonup: "\u21BC",
+  leftharpoondown: "\u21BD",
+  rightharpoonup: "\u21C0",
+  rightharpoondown: "\u21C1",
+  upharpoonleft: "\u21BF",
+  upharpoonright: "\u21BE",
+  downharpoonleft: "\u21C3",
+  downharpoonright: "\u21C2",
+  leftrightharpoons: "\u21CB",
+  rightleftharpoons: "\u21CC",
+  leftleftarrows: "\u21C7",
+  rightrightarrows: "\u21C9",
+  upuparrows: "\u21C8",
+  downdownarrows: "\u21CA",
+  leftrightarrows: "\u21C6",
+  rightleftarrows: "\u21C4",
+  looparrowleft: "\u21AB",
+  looparrowright: "\u21AC",
+  leftarrowtail: "\u21A2",
+  rightarrowtail: "\u21A3",
+  Lsh: "\u21B0",
+  Rsh: "\u21B1",
+  Lleftarrow: "\u21DA",
+  Rrightarrow: "\u21DB",
+  curvearrowleft: "\u21B6",
+  curvearrowright: "\u21B7",
+  circlearrowleft: "\u21BA",
+  circlearrowright: "\u21BB",
+  multimap: "\u22B8",
+  leftrightsquigarrow: "\u21AD",
+  twoheadleftarrow: "\u219E",
+  twoheadrightarrow: "\u21A0",
+  rightsquigarrow: "\u21DD"
+};
+var STYLE_FONT_MAP = {
+  mathcal: "KF AMS CAL, serif",
+  mathfrak: "KF AMS FRAK, serif",
+  mathbb: "KF AMS BB, serif",
+  mathrm: "KF AMS ROMAN, serif"
+};
+function resolveUnicode(key) {
+  const clean = key.replace(/^\\/, "");
+  for (const style of ["mathcal", "mathfrak", "mathbb", "mathrm"]) {
+    const prefix = `${style}{`;
+    if (clean.startsWith(prefix) && clean.endsWith("}")) {
+      const letter = clean.slice(prefix.length, -1);
+      return {
+        char: letter,
+        fontFamily: STYLE_FONT_MAP[style]
+      };
+    }
+  }
+  const code = UNICODE_SYMBOLS[clean];
+  if (code !== void 0) {
+    return { char: code };
+  }
+  return null;
+}
+
+// src/legacy/toolbar-config.ts
+var UI_ELE_TYPE = legacyEleType;
+var BOX_TYPE2 = legacyBoxType;
+var OTHER_POSITION = legacyOtherPosition;
+function each(list, callback) {
+  if (Array.isArray(list)) {
+    list.forEach((item, index) => callback(item, index));
+    return;
+  }
+  Object.keys(list).forEach((key) => callback(list[key], key));
+}
+var config = [{
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u9884\u8BBE<br/>",
+      className: "yushe-btn",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 0,
+        y: 0
+      },
+      iconSize: {
+        w: 40
+      }
+    },
+    box: {
+      width: 367,
+      group: [{
+        title: "\u9884\u8BBE\u516C\u5F0F",
+        items: [{
+          title: "\u9884\u8BBE\u516C\u5F0F",
+          content: [{
+            label: "\u4E8C\u6B21\u516C\u5F0F",
+            item: {
+              val: "x=\\frac {-b\\pm\\sqrt {b^2-4ac}}{2a}"
+            }
+          }, {
+            label: "\u4E8C\u9879\u5F0F\u5B9A\u7406",
+            item: {
+              val: "{\\left(x+a\\right)}^2=\\sum^n_{k=0}{\\left(^n_k\\right)x^ka^{n-k}}"
+            }
+          }, {
+            label: "\u52FE\u80A1\u5B9A\u7406",
+            item: {
+              val: "a^2+b^2=c^2"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DELIMITER
+}, {
+  type: UI_ELE_TYPE.AREA,
+  options: {
+    box: {
+      fixOffset: true,
+      width: 527,
+      type: BOX_TYPE2.OVERLAP,
+      group: [{
+        title: "\u57FA\u7840\u6570\u5B66",
+        items: []
+      }, {
+        title: "\u5E0C\u814A\u5B57\u6BCD",
+        items: []
+      }, {
+        title: "\u6C42\u53CD\u5173\u7CFB\u8FD0\u7B97\u7B26",
+        items: []
+      }, {
+        title: "\u5B57\u6BCD\u7C7B\u7B26\u53F7",
+        items: []
+      }, {
+        title: "\u7BAD\u5934",
+        items: []
+      }, {
+        title: "\u624B\u5199\u4F53",
+        items: []
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DELIMITER
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u5206\u6570<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 45,
+        y: 0
+      }
+    },
+    box: {
+      width: 332,
+      group: [{
+        title: "\u5206\u6570",
+        items: [{
+          title: "\u5206\u6570",
+          content: [{
+            item: {
+              val: "\\frac \\placeholder\\placeholder"
+            }
+          }, {
+            item: {
+              val: "{\\placeholder/\\placeholder}"
+            }
+          }]
+        }, {
+          title: "\u5E38\u7528\u5206\u6570",
+          content: [{
+            item: {
+              val: "\\frac {dy}{dx}"
+            }
+          }, {
+            item: {
+              val: "\\frac {\\Delta y}{\\Delta x}"
+            }
+          }, {
+            item: {
+              val: "\\frac {\\delta y}{\\delta x}"
+            }
+          }, {
+            item: {
+              val: "\\frac \\pi 2"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u4E0A\u4E0B\u6807<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 82,
+        y: 0
+      }
+    },
+    box: {
+      width: 332,
+      group: [{
+        title: "\u4E0A\u6807\u548C\u4E0B\u6807",
+        items: [{
+          title: "\u4E0A\u6807\u548C\u4E0B\u6807",
+          content: [{
+            item: {
+              val: "\\placeholder^\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\placeholder_\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\placeholder^\\placeholder_\\placeholder"
+            }
+          }, {
+            item: {
+              val: "{^\\placeholder_\\placeholder\\placeholder}"
+            }
+          }]
+        }, {
+          title: "\u5E38\u7528\u7684\u4E0A\u6807\u548C\u4E0B\u6807",
+          content: [{
+            item: {
+              val: "e^{-i\\omega t}"
+            }
+          }, {
+            item: {
+              val: "x^2"
+            }
+          }, {
+            item: {
+              val: "{}^n_1Y"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u6839\u5F0F<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 119,
+        y: 0
+      }
+    },
+    box: {
+      width: 342,
+      group: [{
+        title: "\u6839\u5F0F",
+        items: [{
+          title: "\u6839\u5F0F",
+          content: [{
+            item: {
+              val: "\\sqrt \\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sqrt [\\placeholder] \\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sqrt [2] \\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sqrt [3] \\placeholder"
+            }
+          }]
+        }, {
+          title: "\u5E38\u7528\u6839\u5F0F",
+          content: [{
+            item: {
+              val: "\\frac {-b\\pm\\sqrt{b^2-4ac}}{2a}"
+            }
+          }, {
+            item: {
+              val: "\\sqrt {a^2+b^2}"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u79EF\u5206<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 156,
+        y: 0
+      }
+    },
+    box: {
+      width: 332,
+      group: [{
+        title: "\u79EF\u5206",
+        items: [{
+          title: "\u79EF\u5206",
+          content: [{
+            item: {
+              val: "\\int \\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\int^\\placeholder_\\placeholder\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\iint\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\iint^\\placeholder_\\placeholder\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\iiint\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\iiint^\\placeholder_\\placeholder\\placeholder"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u5927\u578B<br/>\u8FD0\u7B97\u7B26",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 193,
+        y: 0
+      }
+    },
+    box: {
+      width: 332,
+      group: [{
+        title: "\u6C42\u548C",
+        items: [{
+          title: "\u6C42\u548C",
+          content: [{
+            item: {
+              val: "\\sum\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sum^\\placeholder_\\placeholder\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sum_\\placeholder\\placeholder"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u62EC\u53F7<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 230,
+        y: 0
+      }
+    },
+    box: {
+      width: 332,
+      group: [{
+        title: "\u65B9\u62EC\u53F7",
+        items: [{
+          title: "\u65B9\u62EC\u53F7",
+          content: [{
+            item: {
+              val: "\\left(\\placeholder\\right)"
+            }
+          }, {
+            item: {
+              val: "\\left[\\placeholder\\right]"
+            }
+          }, {
+            item: {
+              val: "\\left\\{\\placeholder\\right\\}"
+            }
+          }, {
+            item: {
+              val: "\\left|\\placeholder\\right|"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}, {
+  type: UI_ELE_TYPE.DRAPDOWN_BOX,
+  options: {
+    button: {
+      label: "\u51FD\u6570<br/>",
+      icon: {
+        src: resolveToolbarAssetPath("btn.png"),
+        x: 267,
+        y: 0
+      }
+    },
+    box: {
+      width: 340,
+      group: [{
+        title: "\u51FD\u6570",
+        items: [{
+          title: "\u4E09\u89D2\u51FD\u6570",
+          content: [{
+            item: {
+              val: "\\sin\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\cos\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\tan\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\csc\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\sec\\placeholder"
+            }
+          }, {
+            item: {
+              val: "\\cot\\placeholder"
+            }
+          }]
+        }, {
+          title: "\u5E38\u7528\u51FD\u6570",
+          content: [{
+            item: {
+              val: "\\sin\\theta"
+            }
+          }, {
+            item: {
+              val: "\\cos{2x}"
+            }
+          }, {
+            item: {
+              val: "\\tan\\theta=\\frac {\\sin\\theta}{\\cos\\theta}"
+            }
+          }]
+        }]
+      }]
+    }
+  }
+}];
+(function() {
+  let tmp = [], otherImageSrc = resolveToolbarAssetPath("other.png"), currentConf = [];
+  each(config, function(conf) {
+    if (conf.type === UI_ELE_TYPE.DELIMITER) {
+      return;
+    }
+    conf = conf.options.box.group;
+    tmp = tmp.concat(conf);
+  });
+  each(tmp, function(conf) {
+    conf = conf.items;
+    for (let i = 0, len = conf.length; i < len; i++) {
+      currentConf = currentConf.concat(conf[i].content);
+    }
+  });
+  each(currentConf, function(conf) {
+    let data = OTHER_POSITION[conf.item.val];
+    if (!data) {
+      return;
+    }
+    conf.item.img = otherImageSrc;
+    conf.item.pos = data.pos;
+    conf.item.size = data.size;
+  });
+})();
+(function() {
+  let list = [
+    "pm",
+    "infty",
+    "=",
+    "sim",
+    "times",
+    "div",
+    "!",
+    "<",
+    "ll",
+    ">",
+    "gg",
+    "leq",
+    "geq",
+    "mp",
+    "cong",
+    "equiv",
+    "propto",
+    "approx",
+    "forall",
+    "partial",
+    "surd",
+    "cup",
+    "cap",
+    "varnothing",
+    "%",
+    "circ",
+    "exists",
+    "nexists",
+    "in",
+    "ni",
+    "gets",
+    "uparrow",
+    "to",
+    "downarrow",
+    "leftrightarrow",
+    "therefore",
+    "because",
+    "+",
+    "-",
+    "neg",
+    "ast",
+    "cdot",
+    "vdots",
+    /* "ddots",*/
+    "aleph",
+    "beth",
+    "blacksquare"
+  ], configList = config[2].options.box.group[0].items;
+  configList.push({
+    title: "\u57FA\u7840\u6570\u5B66",
+    content: getUnicodeContents(list)
+  });
+})();
+(function() {
+  let greekList = [{
+    title: "\u5C0F\u5199",
+    values: ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi", "rho", "sigma", "tau", "upsilon", "phi", "chi", "psi", "omega"]
+  }, {
+    title: "\u5927\u5199",
+    values: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", "Theta", "Iota", "Kappa", "Lambda", "Mu", "Nu", "Xi", "Omicron", "Pi", "Rho", "Sigma", "Tau", "Upsilon", "Phi", "Chi", "Psi", "Omega"]
+  }, {
+    title: "\u53D8\u4F53",
+    values: ["digamma", "varepsilon", "varkappa", "varphi", "varpi", "varrho", "varsigma", "vartheta"]
+  }], greekConfigList = config[2].options.box.group[1].items;
+  greekConfigList.push({
+    title: greekList[0].title,
+    content: getUnicodeContents(greekList[0].values)
+  });
+  greekConfigList.push({
+    title: greekList[1].title,
+    content: getUnicodeContents(greekList[1].values)
+  });
+  greekConfigList.push({
+    title: greekList[2].title,
+    content: getUnicodeContents(greekList[2].values)
+  });
+})();
+(function() {
+  let greekList = [{
+    title: "\u6C42\u53CD\u5173\u7CFB\u8FD0\u7B97\u7B26",
+    values: [
+      "neq",
+      "nless",
+      "ngtr",
+      "nleq",
+      "ngeq",
+      "nsim",
+      "lneqq",
+      "gneqq",
+      "nprec",
+      "nsucc",
+      "notin",
+      "nsubseteq",
+      "nsupseteq",
+      "subsetneq",
+      "supsetneq",
+      "lnsim",
+      "gnsim",
+      "precnsim",
+      "succnsim",
+      "ntriangleleft",
+      "ntriangleright",
+      "ntrianglelefteq",
+      "ntrianglerighteq",
+      "nmid",
+      "nparallel",
+      "nvdash",
+      "nVdash",
+      "nvDash",
+      "nVDash",
+      "nexists"
+    ]
+  }], greekConfigList = config[2].options.box.group[2].items;
+  greekConfigList.push({
+    title: greekList[0].title,
+    content: getUnicodeContents(greekList[0].values)
+  });
+})();
+(function() {
+  let list = [
+    "aleph",
+    "beth",
+    "daleth",
+    "gimel",
+    "complement",
+    "ell",
+    "eth",
+    "hbar",
+    "hslash",
+    "mho",
+    "partial",
+    "wp",
+    "circledS",
+    "Bbbk",
+    "Finv",
+    "Game",
+    "Im",
+    "Re"
+  ], configList = config[2].options.box.group[3].items;
+  configList.push({
+    title: "\u5B57\u6BCD\u7C7B\u7B26\u53F7",
+    content: getUnicodeContents(list)
+  });
+})();
+(function() {
+  let list = [
+    "gets",
+    "to",
+    "uparrow",
+    "downarrow",
+    "leftrightarrow",
+    "updownarrow",
+    "Leftarrow",
+    "Rightarrow",
+    "Uparrow",
+    "Downarrow",
+    "Leftrightarrow",
+    "Updownarrow",
+    "longleftarrow",
+    "longrightarrow",
+    "longleftrightarrow",
+    "Longleftarrow",
+    "Longrightarrow",
+    "Longleftrightarrow",
+    "nearrow",
+    "nwarrow",
+    "searrow",
+    "swarrow",
+    "nleftarrow",
+    "nrightarrow",
+    "nLeftarrow",
+    "nRightarrow",
+    "nLeftrightarrow",
+    "leftharpoonup",
+    "leftharpoondown",
+    "rightharpoonup",
+    "rightharpoondown",
+    "upharpoonleft",
+    "upharpoonright",
+    "downharpoonleft",
+    "downharpoonright",
+    "leftrightharpoons",
+    "rightleftharpoons",
+    "leftleftarrows",
+    "rightrightarrows",
+    "upuparrows",
+    "downdownarrows",
+    "leftrightarrows",
+    "rightleftarrows",
+    "looparrowleft",
+    "looparrowright",
+    "leftarrowtail",
+    "rightarrowtail",
+    "Lsh",
+    "Rsh",
+    "Lleftarrow",
+    "Rrightarrow",
+    "curvearrowleft",
+    "curvearrowright",
+    "circlearrowleft",
+    "circlearrowright",
+    "multimap",
+    "leftrightsquigarrow",
+    "twoheadleftarrow",
+    "twoheadrightarrow",
+    "rightsquigarrow"
+  ], configList = config[2].options.box.group[4].items;
+  configList.push({
+    title: "\u7BAD\u5934",
+    content: getUnicodeContents(list)
+  });
+})();
+(function() {
+  let list = [{
+    title: "\u624B\u5199\u4F53",
+    values: [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z"
+    ]
+  }, {
+    title: "\u82B1\u4F53",
+    values: [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z",
+      "a",
+      "b",
+      "c",
+      "d",
+      "e",
+      "f",
+      "g",
+      "h",
+      "i",
+      "j",
+      "k",
+      "l",
+      "m",
+      "n",
+      "o",
+      "p",
+      "q",
+      "r",
+      "s",
+      "t",
+      "u",
+      "v",
+      "w",
+      "x",
+      "y",
+      "z"
+    ]
+  }, {
+    title: "\u53CC\u7EBF",
+    values: [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z"
+    ]
+  }, {
+    title: "\u7F57\u9A6C",
+    values: [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z",
+      "a",
+      "b",
+      "c",
+      "d",
+      "e",
+      "f",
+      "g",
+      "h",
+      "i",
+      "j",
+      "k",
+      "l",
+      "m",
+      "n",
+      "o",
+      "p",
+      "q",
+      "r",
+      "s",
+      "t",
+      "u",
+      "v",
+      "w",
+      "x",
+      "y",
+      "z"
+    ]
+  }], configList = config[2].options.box.group[5].items;
+  each(list[0].values, function(item, index) {
+    list[0].values[index] = "mathcal{" + item + "}";
+  });
+  each(list[1].values, function(item, index) {
+    list[1].values[index] = "mathfrak{" + item + "}";
+  });
+  each(list[2].values, function(item, index) {
+    list[2].values[index] = "mathbb{" + item + "}";
+  });
+  each(list[3].values, function(item, index) {
+    list[3].values[index] = "mathrm{" + item + "}";
+  });
+  configList.push({
+    title: list[0].title,
+    content: getUnicodeContents(list[0].values)
+  });
+  configList.push({
+    title: list[1].title,
+    content: getUnicodeContents(list[1].values)
+  });
+  configList.push({
+    title: list[2].title,
+    content: getUnicodeContents(list[2].values)
+  });
+  configList.push({
+    title: list[3].title,
+    content: getUnicodeContents(list[3].values)
+  });
+})();
+function getUnicodeContents(keySet) {
+  let result = [];
+  each(keySet, function(key) {
+    let displayKey = key;
+    if (key.length > 1) {
+      displayKey = "\\" + key;
+    }
+    const resolved = resolveUnicode(displayKey);
+    const item = {
+      key: displayKey,
+      unicode: resolved ? resolved.char : displayKey
+    };
+    if (resolved?.fontFamily) {
+      item.unicodeFont = resolved.fontFamily;
+    }
+    result.push(item);
+  });
+  return result;
+}
+var toolbar_config_default = config;
+
+// src/legacy/ui.ts
+var $$8 = createLegacyUiUtils();
+var VIEW_STATE = legacyUiDef.VIEW_STATE;
+var DEFAULT_EDIT_AREA_HEIGHT = 100;
+var kity10 = getLegacyKity();
+var UIComponent = kity10.createClass("UIComponent", {
+  constructor(kfEditor, options) {
+    const currentDocument = kfEditor.getContainer().ownerDocument;
+    this.options = options ?? {};
+    this.container = kfEditor.getContainer();
+    this.components = {};
+    this.canvasRect = null;
+    this.viewState = VIEW_STATE.NO_OVERFLOW;
+    this.kfEditor = kfEditor;
+    this.toolbarWrap = createToolbarWrap(currentDocument);
+    this.toolbarContainer = createToolbarContainer(currentDocument);
+    this.editArea = createEditArea(currentDocument);
+    this.canvasContainer = createCanvasContainer(currentDocument);
+    this.scrollbarContainer = createScrollbarContainer(currentDocument);
+    this.toolbarWrap.appendChild(this.toolbarContainer);
+    this.container.appendChild(this.toolbarWrap);
+    this.editArea.appendChild(this.canvasContainer);
+    this.container.appendChild(this.editArea);
+    this.container.appendChild(this.scrollbarContainer);
+    this.initComponents();
+    this.initServices();
+    this.initEvent();
+    this.updateContainerSize(this.container, this.toolbarWrap, this.editArea);
+    this.initScrollEvent();
+  },
+  initComponents() {
+    this.components.toolbar = new toolbar_default(this, this.kfEditor, toolbar_config_default);
+    this.components.scrollbar = new scrollbar_default(this, this.kfEditor);
+  },
+  updateContainerSize(container, toolbar, editArea) {
+    const containerBox = container.getBoundingClientRect();
+    const toolbarBox = toolbar.getBoundingClientRect();
+    const declaredHeight = container.style.height;
+    const containerHeight = containerBox.height;
+    let editAreaHeight = DEFAULT_EDIT_AREA_HEIGHT;
+    if (declaredHeight && declaredHeight !== "auto") {
+      editAreaHeight = Math.max(containerHeight - toolbarBox.height, DEFAULT_EDIT_AREA_HEIGHT);
+    }
+    editArea.style.width = "100%";
+    editArea.style.height = `${editAreaHeight}px`;
+  },
+  initServices() {
+    this.kfEditor.registerService("ui.get.canvas.container", this, {
+      getCanvasContainer: this.getCanvasContainer
+    });
+    this.kfEditor.registerService("ui.update.canvas.view", this, {
+      updateCanvasView: this.updateCanvasView
+    });
+    this.kfEditor.registerService("ui.canvas.container.event", this, {
+      on: this.addEvent,
+      off: this.removeEvent,
+      trigger: this.trigger,
+      fire: this.trigger
+    });
+  },
+  initEvent() {
+  },
+  initScrollEvent() {
+    this.kfEditor.requestService(
+      "ui.set.scrollbar.update.handler",
+      (proportion, _offset, values) => {
+        const offset = Math.floor(proportion * (values.contentWidth - values.viewWidth));
+        this.kfEditor.requestService("render.set.canvas.offset", offset);
+      }
+    );
+  },
+  getCanvasContainer() {
+    return this.canvasContainer;
+  },
+  addEvent(type, handler) {
+    legacyBaseUtils.addEvent(this.canvasContainer, type, handler);
+  },
+  removeEvent() {
+  },
+  trigger(type) {
+    legacyBaseUtils.trigger(this.canvasContainer, type);
+  },
+  updateCanvasView() {
+    const canvas = this.kfEditor.requestService("render.get.canvas");
+    const contentContainer = canvas.getContentContainer();
+    this.canvasRect = this.canvasContainer.getBoundingClientRect();
+    const contentRect = contentContainer.getRenderBox("paper");
+    if (contentRect.width > this.canvasRect.width) {
+      if (this.viewState === VIEW_STATE.NO_OVERFLOW) {
+        this.toggleViewState();
+        this.kfEditor.requestService("ui.show.scrollbar");
+        this.kfEditor.requestService("render.disable.relocation");
+      }
+      this.kfEditor.requestService("render.relocation");
+      this.kfEditor.requestService("ui.update.scrollbar", contentRect.width);
+      this.kfEditor.requestService("ui.relocation.scrollbar");
+      return;
+    }
+    if (this.viewState === VIEW_STATE.OVERFLOW) {
+      this.toggleViewState();
+      this.kfEditor.requestService("ui.hide.scrollbar");
+      this.kfEditor.requestService("render.enable.relocation");
+    }
+    this.kfEditor.requestService("render.relocation");
+  },
+  toggleViewState() {
+    this.viewState = this.viewState === VIEW_STATE.NO_OVERFLOW ? VIEW_STATE.OVERFLOW : VIEW_STATE.NO_OVERFLOW;
+  }
+});
+function createToolbarWrap(doc) {
+  return $$8.ele(doc, "div", {
+    className: "kf-editor-toolbar"
+  });
+}
+function createToolbarContainer(doc) {
+  return $$8.ele(doc, "div", {
+    className: "kf-editor-inner-toolbar"
+  });
+}
+function createEditArea(doc) {
+  const container = doc.createElement("div");
+  container.className = "kf-editor-edit-area";
+  container.style.width = "100%";
+  container.style.height = `${DEFAULT_EDIT_AREA_HEIGHT}px`;
+  return container;
+}
+function createCanvasContainer(doc) {
+  const container = doc.createElement("div");
+  container.className = "kf-editor-canvas-container";
+  return container;
+}
+function createScrollbarContainer(doc) {
+  const container = doc.createElement("div");
+  container.className = "kf-editor-edit-scrollbar";
+  return container;
+}
+var ui_default = UIComponent;
+
+// src/legacy/kf-ext-placeholder-operator.ts
+var kity11 = getLegacyKity();
+var kf2 = getLegacyKf();
+function createCommonShape(operator) {
+  const shape = new kity11.Rect(35, 50, 0, 0).stroke("black").fill("transparent");
+  shape.setAttr("stroke-dasharray", "5, 5");
+  operator.addOperatorShape(shape);
+  return shape;
+}
+function createRootPlaceholder(operator, label) {
+  const textShape = new kity11.Text(label).fill(legacySysconf.rootPlaceholder.color);
+  const shapeGroup = new kity11.Group();
+  const padding = 20;
+  const radius = 7;
+  const borderBoxShape = new kity11.Rect(0, 0, 0, 0, radius).stroke(legacySysconf.rootPlaceholder.color).fill("transparent");
+  textShape.setFontSize(40);
+  shapeGroup.addShape(borderBoxShape);
+  shapeGroup.addShape(textShape);
+  operator.addOperatorShape(shapeGroup);
+  const textBox = textShape.getFixRenderBox();
+  borderBoxShape.stroke(legacySysconf.rootPlaceholder.color).fill("transparent");
+  borderBoxShape.setSize(textBox.width + padding * 2, textBox.height + padding * 2);
+  borderBoxShape.setRadius(radius);
+  borderBoxShape.setAttr("stroke-dasharray", "5, 5");
+  textShape.setAttr({
+    dx: -textBox.x,
+    dy: -textBox.y
+  });
+  textShape.translate(padding, padding);
+  return borderBoxShape;
+}
+function generateOpShape(operator, label) {
+  if (label !== null) {
+    return createRootPlaceholder(operator, label);
+  }
+  return createCommonShape(operator);
+}
+var PlaceholderOperator = kity11.createClass("PlaceholderOperator", {
+  base: kf2.Operator,
+  constructor() {
+    this.opShape = null;
+    if (this.__formulaxNeverCallBase__) {
+      this.callBase("Placeholder");
+    }
+    kf2.Operator.call(this, "Placeholder");
+  },
+  applyOperand() {
+    this.opShape = generateOpShape(this, this.parentExpression.getLabel());
+    this.parentExpression.expand(20, 20);
+    this.parentExpression.translateElement(10, 10);
+  },
+  select() {
+    this.opShape?.fill(legacyKfExtDef.selectColor);
+  },
+  selectAll() {
+    this.opShape?.fill(legacyKfExtDef.allSelectColor);
+  },
+  unselect() {
+    this.opShape?.fill("transparent");
+  }
+});
+var kf_ext_placeholder_operator_default = PlaceholderOperator;
+
+// src/legacy/kf-ext-placeholder-expression.ts
+var kity12 = getLegacyKity();
+var kf3 = getLegacyKf();
+var BaseCompoundExpression = kf3.CompoundExpression;
+var PlaceholderExpression = kity12.createClass("PlaceholderExpression", {
+  base: kf3.CompoundExpression,
+  constructor() {
+    if (this.__formulaxNeverCallBase__) {
+      this.callBase();
+    }
+    BaseCompoundExpression.call(this);
+    this.setFlag("Placeholder");
+    this.label = null;
+    this.box.setAttr("data-type", null);
+    this.setOperator(new kf_ext_placeholder_operator_default());
+  },
+  setLabel(label) {
+    this.label = label;
+  },
+  getLabel() {
+    return this.label;
+  },
+  setAttr(key, val) {
+    if (key === "label") {
+      this.setLabel(val);
+      return;
+    }
+    if (typeof key === "object" && key.label) {
+      this.setLabel(key.label);
+      delete key.label;
+    }
+    BaseCompoundExpression.prototype.setAttr.call(this, key, val);
+  },
+  select() {
+    this.getOperator().select();
+  },
+  selectAll() {
+    this.getOperator().selectAll();
+  },
+  unselect() {
+    this.getOperator().unselect();
+  }
+});
+var kf_ext_placeholder_expression_default = PlaceholderExpression;
+
+// src/legacy/kf-ext-extension.ts
+var kf4 = getLegacyKf();
+function installLegacyKfExtension(parser) {
+  kf4.PlaceholderExpression = kf_ext_placeholder_expression_default;
+  kf4.Expression.prototype.select = function select() {
+    this.box.fill(legacyKfExtDef.selectColor);
+  };
+  kf4.Expression.prototype.selectAll = function selectAll() {
+    this.box.fill(legacyKfExtDef.allSelectColor);
+  };
+  kf4.Expression.prototype.unselect = function unselect() {
+    this.box.fill("transparent");
+  };
+  parser.getKFParser().expand({
+    parse: {
+      placeholder: {
+        name: "placeholder",
+        handler(info) {
+          delete info.handler;
+          info.operand = [];
+          return info;
+        },
+        sign: false
+      }
+    },
+    reverse: {
+      placeholder() {
+        return "\\placeholder ";
+      }
+    }
+  });
+}
+var kf_ext_extension_default = {
+  ext: installLegacyKfExtension
+};
+
+// src/legacy/vgroup-def.ts
+var legacyVirtualGroupMap = {
+  radical: true,
+  fraction: true,
+  summation: true,
+  integration: true,
+  placeholder: true,
+  script: true,
+  superscript: true,
+  subscript: true,
+  brackets: true,
+  function: true
+};
+var vgroup_def_default = legacyVirtualGroupMap;
+
+// src/legacy/parser.ts
+var CURSOR_CHAR = legacySysconf.cursorCharacter;
+var ROOT_P_TEXT = legacySysconf.rootPlaceholder.content;
+var COMBINATION_NAME = "combination";
+var PID_PREFIX = "_kf_editor_";
+var pidSeed = 0;
+var kity13 = getLegacyKity();
+var kf5 = getLegacyKf();
+var BaseComponent = createLegacyBaseComponent(kity13);
+function generateId() {
+  pidSeed += 1;
+  return `${PID_PREFIX}${pidSeed}`;
+}
+function isVirtualGroup(tree) {
+  return !!vgroup_def_default[tree.name];
+}
+function isPlaceholder(tree) {
+  return tree.name === "placeholder";
+}
+function onlyPlaceholder(operands) {
+  let result = 1;
+  if (operands.length > 3) {
+    return false;
+  }
+  for (const operand of operands) {
+    if (operand === CURSOR_CHAR) {
+      continue;
+    }
+    if (operand && typeof operand !== "string" && operand.name === "placeholder") {
+      result -= 1;
+    }
+  }
+  return !result;
+}
+function createGroup(parser) {
+  return {
+    name: COMBINATION_NAME,
+    attr: {
+      "data-type": legacyGroupType.GROUP,
+      id: parser.getGroupId()
+    },
+    operand: []
+  };
+}
+function processRootGroup(parser, tree) {
+  if (!parser.isResetId) {
+    tree.attr["data-type"] = legacyGroupType.VIRTUAL;
+  } else {
+    tree.attr["data-root"] = "true";
+  }
+}
+function processVirtualGroup(parser, index, tree, subtree) {
+  if (tree.name === "brackets" && index < 2 || tree.name === "function" && index === 0) {
+    return;
+  }
+  tree.attr["data-type"] = legacyGroupType.VIRTUAL;
+  if (!subtree) {
+    tree.operand[index] = subtree;
+    return;
+  }
+  if (typeof subtree === "string") {
+    tree.operand[index] = createGroup(parser);
+    tree.operand[index].operand[0] = subtree;
+    return;
+  }
+  if (isPlaceholder(subtree)) {
+    tree.operand[index] = createGroup(parser);
+    tree.operand[index].operand[0] = supplementTree(parser, subtree, tree.operand[index]);
+    return;
+  }
+  tree.operand[index] = supplementTree(parser, subtree, tree);
+}
+function processGroup(parser, index, tree, subtree) {
+  tree.attr["data-type"] = legacyGroupType.GROUP;
+  if (!subtree || typeof subtree === "string") {
+    tree.operand[index] = subtree;
+    return;
+  }
+  if (subtree.name === "text") {
+    tree.operand[index] = subtree;
+    return;
+  }
+  tree.operand[index] = supplementTree(parser, subtree, tree);
+}
+function supplementTree(parser, tree, parentTree) {
+  const isRoot = !parentTree;
+  tree.attr = tree.attr || {};
+  tree.attr.id = parser.getGroupId();
+  if (isRoot) {
+    processRootGroup(parser, tree);
+  } else if (parentTree?.attr?.["data-root"] && tree.name === "placeholder" && onlyPlaceholder(parentTree.operand)) {
+    tree.attr.label = ROOT_P_TEXT;
+  }
+  for (let i = 0; i < tree.operand.length; i += 1) {
+    const currentOperand = tree.operand[i];
+    if (isVirtualGroup(tree)) {
+      processVirtualGroup(parser, i, tree, currentOperand);
+    } else {
+      processGroup(parser, i, tree, currentOperand);
+    }
+  }
+  return tree;
+}
+var Parser = kity13.createClass("Parser", {
+  base: BaseComponent,
+  constructor(kfEditor) {
+    this.kfEditor = kfEditor;
+    if (this.__formulaxNeverCallBase__) {
+      this.callBase();
+    }
+    BaseComponent.call(this);
+    this.kfParser = kf5.Parser.use("latex");
+    this.initKFormulExtension();
+    this.pid = generateId();
+    this.groupRecord = 0;
+    this.tree = null;
+    this.isResetId = true;
+    this.initServices();
+  },
+  parse(str, isResetId) {
+    this.isResetId = !!isResetId;
+    if (this.isResetId) {
+      this.resetGroupId();
+    }
+    const parsedResult = this.kfParser.parse(str);
+    supplementTree(this, parsedResult.tree);
+    return parsedResult;
+  },
+  serialization(tree) {
+    return this.kfParser.serialization(tree);
+  },
+  initServices() {
+    this.kfEditor.registerService("parser.parse", this, {
+      parse: this.parse
+    });
+    this.kfEditor.registerService("parser.latex.serialization", this, {
+      serialization: this.serialization
+    });
+  },
+  getKFParser() {
+    return this.kfParser;
+  },
+  initKFormulExtension() {
+    kf_ext_extension_default.ext(this);
+  },
+  resetGroupId() {
+    this.groupRecord = 0;
+  },
+  getGroupId() {
+    this.groupRecord += 1;
+    return `${this.pid}_${this.groupRecord}`;
+  }
+});
+var parser_default = Parser;
+
+// src/legacy/render.ts
+var DEFAULT_OPTIONS2 = {
+  autoresize: false,
+  fontsize: 50,
+  padding: [20, 50]
+};
+var kity14 = getLegacyKity();
+var kf6 = getLegacyKf();
+var BaseComponent2 = createLegacyBaseComponent(kity14);
+var RenderComponent = kity14.createClass("RenderComponent", {
+  base: BaseComponent2,
+  constructor(kfEditor, options) {
+    if (this.__formulaxNeverCallBase__) {
+      this.callBase();
+    }
+    BaseComponent2.call(this);
+    this.options = kity14.Utils.extend({}, DEFAULT_OPTIONS2, options);
+    this.kfEditor = kfEditor;
+    this.assembly = null;
+    this.formula = null;
+    this.relDisabled = false;
+    this.canvasZoom = 1;
+    this.record = {
+      select: {},
+      cursor: {},
+      canvas: {}
+    };
+    this.initCanvas();
+    this.initServices();
+    this.initCommands();
+  },
+  initCanvas() {
+    const canvasContainer = this.kfEditor.requestService("ui.get.canvas.container");
+    const Formula = this.kfEditor.getFormulaClass();
+    this.assembly = new kf6.Assembly(new Formula(canvasContainer, this.options));
+    this.formula = this.assembly.formula;
+    this.setCanvasToCenter();
+  },
+  setCanvasOffset(offsetX, offsetY) {
+    const viewBox = this.formula.getViewBox();
+    const nextOffsetY = offsetY !== void 0 ? offsetY : -viewBox.height / 2;
+    this.formula.setViewBox(offsetX, nextOffsetY, viewBox.width, viewBox.height);
+  },
+  setCanvasToCenter() {
+    const viewBox = this.formula.getViewBox();
+    this.formula.setViewBox(-viewBox.width / 2, -viewBox.height / 2, viewBox.width, viewBox.height);
+  },
+  initServices() {
+    this.kfEditor.registerService("render.get.canvas", this, {
+      getCanvas: this.getCanvas
+    });
+    this.kfEditor.registerService("render.get.content.size", this, {
+      getContentSize: this.getContentSize
+    });
+    this.kfEditor.registerService("render.clear.canvas.transform", this, {
+      clearCanvasOffset: this.clearCanvasTransform
+    });
+    this.kfEditor.registerService("render.set.canvas.offset", this, {
+      setCanvasOffset: this.setCanvasOffset
+    });
+    this.kfEditor.registerService("render.set.canvas.to.center", this, {
+      setCanvasToCenter: this.setCanvasToCenter
+    });
+    this.kfEditor.registerService("render.revert.canvas.transform", this, {
+      revertCanvasTransform: this.revertCanvasTransform
+    });
+    this.kfEditor.registerService("render.relocation", this, {
+      relocation: this.relocation
+    });
+    this.kfEditor.registerService("render.disable.relocation", this, {
+      disableRelocation: this.disableRelocation
+    });
+    this.kfEditor.registerService("render.enable.relocation", this, {
+      enableRelocation: this.enableRelocation
+    });
+    this.kfEditor.registerService("render.select.group.content", this, {
+      selectGroupContent: this.selectGroupContent
+    });
+    this.kfEditor.registerService("render.select.group", this, {
+      selectGroup: this.selectGroup
+    });
+    this.kfEditor.registerService("render.select.group.all", this, {
+      selectAllGroup: this.selectAllGroup
+    });
+    this.kfEditor.registerService("render.tint.current.cursor", this, {
+      tintCurrentGroup: this.tintCurrentGroup
+    });
+    this.kfEditor.registerService("render.select.current.cursor", this, {
+      selectCurrentCursor: this.selectCurrentCursor
+    });
+    this.kfEditor.registerService("render.reselect", this, {
+      reselect: this.reselect
+    });
+    this.kfEditor.registerService("render.clear.select", this, {
+      clearSelect: this.clearSelect
+    });
+    this.kfEditor.registerService("render.set.canvas.zoom", this, {
+      setCanvasZoom: this.setCanvasZoom
+    });
+    this.kfEditor.registerService("render.get.canvas.zoom", this, {
+      getCanvasZoom: this.getCanvasZoom
+    });
+    this.kfEditor.registerService("render.get.paper.offset", this, {
+      getPaperOffset: this.getPaperOffset
+    });
+    this.kfEditor.registerService("render.draw", this, {
+      render: this.render
+    });
+    this.kfEditor.registerService("render.insert.string", this, {
+      insertString: this.insertString
+    });
+    this.kfEditor.registerService("render.insert.group", this, {
+      insertGroup: this.insertGroup
+    });
+    this.kfEditor.registerService("render.get.paper", this, {
+      getPaper: this.getPaper
+    });
+  },
+  initCommands() {
+    this.kfEditor.registerCommand("render", this, function(str) {
+      this.render(str);
+      this.kfEditor.requestService("ui.update.canvas.view");
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.kfEditor.requestService("ui.update.canvas.view");
+        });
+      });
+    });
+    this.kfEditor.registerCommand("getPaper", this, this.getPaper);
+  },
+  relocation() {
+    if (!this.relDisabled) {
+      this.relocationToCenter();
+      return;
+    }
+    this.relocationToLeft();
+  },
+  relocationToCenter() {
+    const formulaSpace = this.formula.container.getRenderBox();
+    this.formula.container.setTranslate(-formulaSpace.width / 2, -formulaSpace.height / 2);
+    this.setCanvasToCenter();
+  },
+  relocationToLeft() {
+    const formulaSpace = this.formula.container.getRenderBox();
+    this.formula.container.setTranslate(0, -formulaSpace.height / 2);
+    this.setCanvasOffset(0);
+  },
+  selectGroup(groupId) {
+    const groupObject = this.kfEditor.requestService("syntax.get.group.object", groupId);
+    this.clearSelect();
+    if (groupObject.node.getAttribute("data-root")) {
+      return;
+    }
+    this.record.select.lastSelect = groupObject;
+    groupObject.select();
+  },
+  selectGroupContent(group) {
+    let nextGroup = group;
+    if (group.groupObj.getAttribute("data-placeholder") !== null) {
+      nextGroup = {
+        id: group.content[0].id,
+        groupObj: group.groupObj,
+        content: group.content
+      };
+    }
+    const groupObject = this.kfEditor.requestService("syntax.get.group.object", nextGroup.id);
+    this.clearSelect();
+    this.record.select.lastSelect = groupObject;
+    if (groupObject.node.getAttribute("data-root")) {
+      return;
+    }
+    groupObject.select();
+  },
+  selectAllGroup(group) {
+    let nextGroup = group;
+    if (group.groupObj.getAttribute("data-placeholder") !== null) {
+      nextGroup = {
+        id: group.content[0].id,
+        groupObj: group.groupObj,
+        content: group.content
+      };
+    }
+    const groupObject = this.kfEditor.requestService("syntax.get.group.object", nextGroup.id);
+    this.clearSelect();
+    this.record.select.lastSelect = groupObject;
+    groupObject.selectAll();
+  },
+  selectCurrentCursor() {
+    const cursorInfo = this.kfEditor.requestService("syntax.get.record.cursor");
+    const group = this.kfEditor.requestService("syntax.get.group.object", cursorInfo.groupId);
+    let offset = -1;
+    let width = 0;
+    const startIndex = Math.min(cursorInfo.startOffset, cursorInfo.endOffset);
+    const endIndex = Math.max(cursorInfo.startOffset, cursorInfo.endOffset);
+    this.clearSelect();
+    this.record.select.lastSelect = group;
+    for (let i = startIndex; i < endIndex; i += 1) {
+      const box = group.getOperand(i).getRenderBox(group);
+      if (offset === -1) {
+        offset = box.x;
+      }
+      width += box.width;
+    }
+    group.setBoxWidth(width);
+    group.selectAll();
+    group.getBox().setTranslate(offset, 0);
+  },
+  tintCurrentGroup() {
+    const groupId = this.kfEditor.requestService("syntax.get.record.cursor").groupId;
+    let groupObject = this.kfEditor.requestService("syntax.get.group.object", groupId);
+    const isPlaceholder2 = this.kfEditor.requestService("syntax.is.placeholder.node", groupId);
+    this.clearSelect();
+    if (groupObject.node.getAttribute("data-root")) {
+      return;
+    }
+    if (isPlaceholder2) {
+      groupObject = this.kfEditor.requestService(
+        "syntax.get.group.object",
+        groupObject.operands[0].node.id
+      );
+    }
+    this.record.select.lastSelect = groupObject;
+    groupObject.select();
+  },
+  reselect() {
+    const cursorInfo = this.kfEditor.requestService("syntax.get.record.cursor");
+    const groupObject = this.kfEditor.requestService("syntax.get.group.object", cursorInfo.groupId);
+    this.clearSelect();
+    this.record.select.lastSelect = groupObject;
+    if (groupObject.node.getAttribute("data-root")) {
+      return;
+    }
+    groupObject.select();
+  },
+  clearSelect() {
+    const currentSelect = this.record.select.lastSelect;
+    if (!currentSelect || !currentSelect.node.ownerSVGElement) {
+      return;
+    }
+    currentSelect.unselect();
+    const box = currentSelect.getRenderBox(currentSelect);
+    currentSelect.setBoxWidth(box.width);
+    currentSelect.getBox().setTranslate(0, 0);
+  },
+  getPaper() {
+    return this.formula;
+  },
+  getPaperOffset() {
+    return this.formula.container.getTranslate();
+  },
+  render(latexStr) {
+    const parsedTree = this.kfEditor.requestService("parser.parse", latexStr, true);
+    const objTree = this.assembly.regenerateBy(parsedTree);
+    this.kfEditor.requestService("syntax.update.objtree", objTree);
+  },
+  enableRelocation() {
+    this.relDisabled = false;
+  },
+  disableRelocation() {
+    this.relDisabled = true;
+  },
+  setCanvasZoom(zoom) {
+    const viewPort = this.formula.getViewPort();
+    this.canvasZoom = zoom;
+    viewPort.zoom = zoom;
+    this.formula.setViewPort(viewPort);
+  },
+  getCanvas() {
+    return this.formula;
+  },
+  getContentSize() {
+    return this.formula.container.getRenderBox();
+  },
+  clearCanvasTransform() {
+    const canvasInfo = this.record.canvas;
+    canvasInfo.viewBox = this.formula.getViewBox();
+    canvasInfo.contentOffset = this.formula.container.getTranslate();
+    this.setCanvasToCenter();
+    this.formula.node.removeAttribute("viewBox");
+    this.formula.container.setTranslate(0, 0);
+  },
+  revertCanvasTransform() {
+    const canvasInfo = this.record.canvas;
+    const viewBox = canvasInfo.viewBox;
+    if (!viewBox) {
+      return false;
+    }
+    this.formula.setViewBox(viewBox.x, viewBox.y, viewBox.width, viewBox.height);
+    this.formula.container.setTranslate(canvasInfo.contentOffset);
+    canvasInfo.viewBox = null;
+    canvasInfo.contentOffset = null;
+    return true;
+  },
+  getCanvasZoom() {
+    return this.canvasZoom;
+  },
+  insertString(value) {
+    return value;
+  },
+  insertGroup(value) {
+    return value;
+  }
+});
+var render_default = RenderComponent;
+
+// src/legacy/position.ts
+var kity15 = getLegacyKity();
+function getGroup(node, isAllowVirtual, isAllowWrap) {
+  const target = node;
+  if (!target || !target.ownerSVGElement) {
+    return null;
+  }
+  const parentNode = target.parentNode;
+  if (!parentNode) {
+    return null;
+  }
+  const tagName = parentNode.tagName.toLowerCase();
+  if (tagName === "body" || tagName === "svg") {
+    return null;
+  }
+  if (parentNode.getAttribute("data-type") === "kf-editor-group") {
+    return parentNode;
+  }
+  if (isAllowVirtual && parentNode.getAttribute("data-type") === "kf-editor-virtual-group") {
+    return parentNode;
+  }
+  if (isAllowWrap && parentNode.getAttribute("data-flag") !== null) {
+    return parentNode;
+  }
+  return getGroup(parentNode, isAllowVirtual, isAllowWrap);
+}
+var PositionComponent = kity15.createClass("PositionComponenet", {
+  constructor(kfEditor) {
+    this.kfEditor = kfEditor;
+    this.initServices();
+  },
+  initServices() {
+    this.kfEditor.registerService("position.get.group", this, {
+      getGroupByTarget: this.getGroupByTarget
+    });
+    this.kfEditor.registerService("position.get.index", this, {
+      getIndexByTargetInGroup: this.getIndexByTargetInGroup
+    });
+    this.kfEditor.registerService("position.get.location.info", this, {
+      getLocationInfo: this.getLocationInfo
+    });
+    this.kfEditor.registerService("position.get.parent.group", this, {
+      getParentGroupByTarget: this.getParentGroupByTarget
+    });
+    this.kfEditor.registerService("position.get.wrap", this, {
+      getWrap: this.getWrap
+    });
+    this.kfEditor.registerService("position.get.area", this, {
+      getAreaByCursorInGroup: this.getAreaByCursorInGroup
+    });
+    this.kfEditor.registerService("position.get.group.info", this, {
+      getGroupInfoByNode: this.getGroupInfoByNode
+    });
+    this.kfEditor.registerService("position.get.parent.info", this, {
+      getParentInfoByNode: this.getParentInfoByNode
+    });
+  },
+  getGroupByTarget(target) {
+    const groupDom = getGroup(target, false, false);
+    if (!groupDom) {
+      return null;
+    }
+    return this.kfEditor.requestService("syntax.get.group.content", groupDom.id);
+  },
+  getIndexByTargetInGroup(groupNode, targetNode) {
+    const groupInfo = this.kfEditor.requestService("syntax.get.group.content", groupNode.id);
+    let index = -1;
+    kity15.Utils.each(groupInfo.content, (child, i) => {
+      index = i;
+      if (legacyBaseUtils.contains(child, targetNode)) {
+        return false;
+      }
+      return void 0;
+    });
+    return index;
+  },
+  getAreaByCursorInGroup(groupNode, offset) {
+    const groupRect = legacyBaseUtils.getRect(groupNode);
+    return groupRect.left + groupRect.width / 2 < offset;
+  },
+  getLocationInfo(distance, groupInfo) {
+    let index = -1;
+    for (let i = groupInfo.content.length - 1; i >= 0; i -= 1) {
+      index = i;
+      const child = groupInfo.content[i];
+      const boundingRect = legacyBaseUtils.getRect(child);
+      if (boundingRect.left < distance) {
+        if (boundingRect.left + boundingRect.width / 2 < distance) {
+          index += 1;
+        }
+        break;
+      }
+    }
+    return index;
+  },
+  getParentGroupByTarget(target) {
+    const groupDom = getGroup(target, true, false);
+    if (!groupDom) {
+      return null;
+    }
+    return this.kfEditor.requestService("syntax.get.group.content", groupDom.id);
+  },
+  getWrap(node) {
+    return getGroup(node, true, true);
+  },
+  getGroupInfoByNode(target) {
+    const containerNode = getGroup(target, false, false);
+    if (!containerNode) {
+      return null;
+    }
+    const containerInfo = this.kfEditor.requestService("syntax.get.group.content", containerNode.id);
+    let index = 0;
+    for (let i = 0, len = containerInfo.content.length; i < len; i += 1) {
+      index = i;
+      if (legacyBaseUtils.contains(containerInfo.content[i], target)) {
+        break;
+      }
+    }
+    return {
+      group: containerInfo,
+      index
+    };
+  },
+  getParentInfoByNode(target) {
+    const groupNode = getGroup(target, true, false);
+    if (!groupNode) {
+      throw new Error("PositionComponent: failed to resolve parent group");
+    }
+    const group = this.kfEditor.requestService("syntax.get.group.content", groupNode.id);
+    return {
+      group,
+      index: group.content.indexOf(target)
+    };
+  }
+});
+var position_default = PositionComponent;
+
+// src/legacy/syntax-delete.ts
+var kity16 = getLegacyKity();
+var DeleteComponent = kity16.createClass("DeleteComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+  },
+  deleteGroup() {
+    let cursorInfo = this.parentComponent.getCursorRecord();
+    const cursorGroupId = cursorInfo.groupId;
+    const objTree = this.parentComponent.getObjectTree();
+    const currentTree = objTree.mapping[cursorGroupId].strGroup;
+    if (cursorInfo.startOffset === cursorInfo.endOffset) {
+      if (cursorInfo.startOffset === 0) {
+        if (this.parentComponent.isRootTree(currentTree)) {
+          return false;
+        }
+        cursorInfo = this.selectParentContainer(cursorGroupId);
+        this.parentComponent.updateCursor(cursorInfo);
+        return false;
+      }
+      if (currentTree.operand.length > 1) {
+        cursorInfo = this.deletePrevGroup(currentTree, cursorInfo);
+      } else {
+        cursorInfo.startOffset = 0;
+        cursorInfo.endOffset = 1;
+        const operand0 = currentTree.operand[0];
+        if (operand0.attr && this.parentComponent.isGroupNode(operand0.attr.id)) {
+          this.parentComponent.updateCursor(cursorInfo);
+          return false;
+        }
+        currentTree.operand[0] = {
+          name: "placeholder",
+          operand: []
+        };
+        this.parentComponent.updateCursor(cursorInfo);
+        return true;
+      }
+    } else if (this.parentComponent.isSelectPlaceholder()) {
+      if (this.parentComponent.isRootTree(currentTree)) {
+        return false;
+      }
+      cursorInfo = this.selectParentContainer(cursorGroupId);
+      this.parentComponent.updateCursor(cursorInfo);
+      return false;
+    } else {
+      return this.deleteSelection(currentTree, cursorInfo);
+    }
+    this.parentComponent.updateCursor(cursorInfo);
+    return cursorInfo.startOffset === cursorInfo.endOffset;
+  },
+  deletePrevGroup(tree, cursorInfo) {
+    const index = cursorInfo.startOffset - 1;
+    const group = tree.operand[index];
+    if (this.parentComponent.isLeafTree(group)) {
+      tree.operand.splice(index, 1);
+      cursorInfo.startOffset -= 1;
+      cursorInfo.endOffset -= 1;
+    } else {
+      cursorInfo.startOffset -= 1;
+    }
+    return cursorInfo;
+  },
+  deleteSelection(tree, cursorInfo) {
+    if (cursorInfo.startOffset === 0 && cursorInfo.endOffset === tree.operand.length) {
+      tree.operand.length = 1;
+      tree.operand[0] = {
+        name: "placeholder",
+        operand: []
+      };
+      cursorInfo.endOffset = 1;
+    } else {
+      tree.operand.splice(cursorInfo.startOffset, cursorInfo.endOffset - cursorInfo.startOffset);
+      cursorInfo.endOffset = cursorInfo.startOffset;
+    }
+    this.parentComponent.updateCursor(cursorInfo);
+    return true;
+  },
+  selectParentContainer(groupId) {
+    const currentGroup = this.parentComponent.getGroupObject(groupId);
+    if (!currentGroup) {
+      throw new Error(`DeleteComponent: missing group object for ${groupId}`);
+    }
+    const currentGroupNode = currentGroup.node;
+    const parentContainerInfo = this.kfEditor.requestService("position.get.group", currentGroupNode);
+    const index = this.kfEditor.requestService("position.get.index", parentContainerInfo.groupObj, currentGroupNode);
+    return {
+      groupId: parentContainerInfo.id,
+      startOffset: index,
+      endOffset: index + 1
+    };
+  }
+});
+var syntax_delete_default = DeleteComponent;
+
+// src/legacy/syntax-move.ts
+var kity17 = getLegacyKity();
+function isRootNode(node) {
+  return !!node.getAttribute("data-root");
+}
+function isContainerNode(node) {
+  return node.getAttribute("data-type") === "kf-editor-group";
+}
+function isGroupNode(node) {
+  const dataType = node.getAttribute("data-type");
+  return dataType === "kf-editor-group" || dataType === "kf-editor-virtual-group";
+}
+function isPlaceholderNode(node) {
+  return node.getAttribute("data-flag") === "Placeholder";
+}
+function isEmptyNode(node) {
+  return node.getAttribute("data-flag") === "Empty";
+}
+function locateLeftIndex(moveComponent, groupNode) {
+  const syntaxComponent = moveComponent.parentComponent;
+  if (isPlaceholderNode(groupNode) || isEmptyNode(groupNode)) {
+    return locateOuterLeftIndex(moveComponent, groupNode);
+  }
+  if (!isGroupNode(groupNode)) {
+    return null;
+  }
+  let groupInfo = syntaxComponent.getGroupContent(groupNode.id);
+  let groupElement = groupInfo.content[groupInfo.content.length - 1];
+  if (isEmptyNode(groupElement)) {
+    return locateOuterLeftIndex(moveComponent, groupElement);
+  }
+  if (isContainerNode(groupNode)) {
+    if (isPlaceholderNode(groupElement)) {
+      return {
+        groupId: groupNode.id,
+        startOffset: groupInfo.content.length - 1,
+        endOffset: groupInfo.content.length
+      };
+    }
+    if (isContainerNode(groupElement) && groupInfo.content.length === 1) {
+      return locateLeftIndex(moveComponent, groupElement);
+    }
+    return {
+      groupId: groupNode.id,
+      startOffset: groupInfo.content.length,
+      endOffset: groupInfo.content.length
+    };
+  }
+  while (!isContainerNode(groupElement) && !isEmptyNode(groupElement) && !isPlaceholderNode(groupElement)) {
+    groupInfo = syntaxComponent.getGroupContent(groupElement.id);
+    groupElement = groupInfo.content[groupInfo.content.length - 1];
+  }
+  if (isEmptyNode(groupElement)) {
+    return locateOuterLeftIndex(moveComponent, groupElement);
+  }
+  if (isPlaceholderNode(groupElement)) {
+    return {
+      groupId: groupElement.id,
+      startOffset: groupInfo.content.length,
+      endOffset: groupInfo.content.length
+    };
+  }
+  return locateLeftIndex(moveComponent, groupElement);
+}
+function locateOuterLeftIndex(moveComponent, groupNode) {
+  const kfEditor = moveComponent.kfEditor;
+  let outerGroupInfo = kfEditor.requestService("position.get.parent.info", groupNode);
+  if (isRootNode(groupNode)) {
+    return null;
+  }
+  while (outerGroupInfo.index === 0) {
+    if (isRootNode(outerGroupInfo.group.groupObj)) {
+      return {
+        groupId: outerGroupInfo.group.id,
+        startOffset: 0,
+        endOffset: 0
+      };
+    }
+    if (isContainerNode(outerGroupInfo.group.groupObj) && outerGroupInfo.group.content.length > 1) {
+      return {
+        groupId: outerGroupInfo.group.id,
+        startOffset: 0,
+        endOffset: 0
+      };
+    }
+    outerGroupInfo = kfEditor.requestService("position.get.parent.info", outerGroupInfo.group.groupObj);
+  }
+  groupNode = outerGroupInfo.group.content[outerGroupInfo.index - 1];
+  if (isGroupNode(groupNode)) {
+    return locateLeftIndex(moveComponent, groupNode);
+  }
+  if (isEmptyNode(groupNode)) {
+    return locateOuterLeftIndex(moveComponent, groupNode);
+  }
+  return {
+    groupId: outerGroupInfo.group.id,
+    startOffset: outerGroupInfo.index,
+    endOffset: outerGroupInfo.index
+  };
+}
+function locateRightIndex(moveComponent, groupNode) {
+  const syntaxComponent = moveComponent.parentComponent;
+  if (!isGroupNode(groupNode)) {
+    return null;
+  }
+  let groupInfo = syntaxComponent.getGroupContent(groupNode.id);
+  let groupElement = groupInfo.content[0];
+  if (isContainerNode(groupNode)) {
+    if (isContainerNode(groupElement)) {
+      return locateRightIndex(moveComponent, groupElement);
+    }
+    if (isPlaceholderNode(groupElement)) {
+      return {
+        groupId: groupNode.id,
+        startOffset: 0,
+        endOffset: 1
+      };
+    }
+    return {
+      groupId: groupNode.id,
+      startOffset: 0,
+      endOffset: 0
+    };
+  }
+  while (!isContainerNode(groupElement) && !isPlaceholderNode(groupElement) && !isEmptyNode(groupElement)) {
+    groupInfo = syntaxComponent.getGroupContent(groupElement.id);
+    groupElement = groupInfo.content[0];
+  }
+  if (isPlaceholderNode(groupElement)) {
+    return {
+      groupId: groupElement.id,
+      startOffset: 0,
+      endOffset: 0
+    };
+  }
+  if (isEmptyNode(groupElement)) {
+    return locateOuterRightIndex(moveComponent, groupElement);
+  }
+  return locateRightIndex(moveComponent, groupElement);
+}
+function locateOuterRightIndex(moveComponent, groupNode) {
+  const kfEditor = moveComponent.kfEditor;
+  const syntaxComponent = moveComponent.parentComponent;
+  if (isRootNode(groupNode)) {
+    return null;
+  }
+  let outerGroupInfo = kfEditor.requestService("position.get.parent.info", groupNode);
+  while (outerGroupInfo.index === outerGroupInfo.group.content.length - 1) {
+    if (isRootNode(outerGroupInfo.group.groupObj)) {
+      return {
+        groupId: outerGroupInfo.group.id,
+        startOffset: outerGroupInfo.group.content.length,
+        endOffset: outerGroupInfo.group.content.length
+      };
+    }
+    if (isContainerNode(outerGroupInfo.group.groupObj) && outerGroupInfo.group.content.length > 1) {
+      return {
+        groupId: outerGroupInfo.group.id,
+        startOffset: outerGroupInfo.group.content.length,
+        endOffset: outerGroupInfo.group.content.length
+      };
+    }
+    outerGroupInfo = kfEditor.requestService("position.get.parent.info", outerGroupInfo.group.groupObj);
+  }
+  groupNode = outerGroupInfo.group.content[outerGroupInfo.index + 1];
+  if (isEmptyNode(groupNode)) {
+    return locateOuterRightIndex(moveComponent, groupNode);
+  }
+  if (isContainerNode(groupNode)) {
+    const groupInfo = syntaxComponent.getGroupContent(groupNode.id);
+    if (syntaxComponent.isPlaceholder(groupInfo.content[0].id)) {
+      return {
+        groupId: groupNode.id,
+        startOffset: 0,
+        endOffset: 1
+      };
+    }
+    return {
+      groupId: groupNode.id,
+      startOffset: 0,
+      endOffset: 0
+    };
+  }
+  return {
+    groupId: outerGroupInfo.group.id,
+    startOffset: outerGroupInfo.index + 1,
+    endOffset: outerGroupInfo.index + 1
+  };
+}
+function updateCursorGoLeft(moveComponent, cursorInfo) {
+  const syntaxComponent = moveComponent.parentComponent;
+  const containerInfo = syntaxComponent.getGroupContent(cursorInfo.groupId);
+  if (syntaxComponent.isSelectPlaceholder()) {
+    return locateOuterLeftIndex(moveComponent, containerInfo.content[cursorInfo.startOffset]);
+  }
+  if (cursorInfo.startOffset === cursorInfo.endOffset) {
+    if (cursorInfo.startOffset > 0) {
+      const prevGroupNode = containerInfo.content[cursorInfo.startOffset - 1];
+      if (isGroupNode(prevGroupNode)) {
+        return locateLeftIndex(moveComponent, prevGroupNode);
+      }
+      cursorInfo.startOffset -= 1;
+      if (!isPlaceholderNode(prevGroupNode)) {
+        cursorInfo.endOffset = cursorInfo.startOffset;
+      }
+      return cursorInfo;
+    }
+    return locateOuterLeftIndex(moveComponent, containerInfo.groupObj);
+  }
+  cursorInfo.startOffset = Math.min(cursorInfo.startOffset, cursorInfo.endOffset);
+  cursorInfo.endOffset = cursorInfo.startOffset;
+  return cursorInfo;
+}
+function updateCursorGoRight(moveComponent, cursorInfo) {
+  const syntaxComponent = moveComponent.parentComponent;
+  const containerInfo = syntaxComponent.getGroupContent(cursorInfo.groupId);
+  if (syntaxComponent.isSelectPlaceholder()) {
+    return locateOuterRightIndex(moveComponent, containerInfo.content[cursorInfo.startOffset]);
+  }
+  if (cursorInfo.startOffset === cursorInfo.endOffset) {
+    if (cursorInfo.startOffset < containerInfo.content.length) {
+      const nextGroupNode = containerInfo.content[cursorInfo.startOffset];
+      if (isGroupNode(nextGroupNode)) {
+        return locateRightIndex(moveComponent, nextGroupNode);
+      }
+      cursorInfo.startOffset += 1;
+      if (!isPlaceholderNode(nextGroupNode)) {
+        cursorInfo.endOffset = cursorInfo.startOffset;
+      }
+      return cursorInfo;
+    }
+    return locateOuterRightIndex(moveComponent, containerInfo.groupObj);
+  }
+  cursorInfo.endOffset = Math.max(cursorInfo.startOffset, cursorInfo.endOffset);
+  cursorInfo.startOffset = cursorInfo.endOffset;
+  return cursorInfo;
+}
+var MoveComponent = kity17.createClass("MoveComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+  },
+  leftMove() {
+    let cursorInfo = this.parentComponent.getCursorRecord();
+    cursorInfo = updateCursorGoLeft(this, cursorInfo);
+    if (cursorInfo) {
+      this.parentComponent.updateCursor(cursorInfo);
+    }
+  },
+  rightMove() {
+    let cursorInfo = this.parentComponent.getCursorRecord();
+    cursorInfo = updateCursorGoRight(this, cursorInfo);
+    if (cursorInfo) {
+      this.parentComponent.updateCursor(cursorInfo);
+    }
+  }
+});
+var syntax_move_default = MoveComponent;
+
+// src/legacy/syntax.ts
+var CURSOR_CHAR2 = legacySysconf.cursorCharacter;
+var kity18 = getLegacyKity();
+var SyntaxComponent = kity18.createClass("SyntaxComponenet", {
+  constructor(kfEditor) {
+    this.kfEditor = kfEditor;
+    this.record = {
+      cursor: {
+        groupId: null,
+        startOffset: -1,
+        endOffset: -1
+      }
+    };
+    this.components = {};
+    this.objTree = null;
+    this.initComponents();
+    this.initServices();
+    this.initCommands();
+  },
+  initComponents() {
+    this.components.move = new syntax_move_default(this, this.kfEditor);
+    this.components.delete = new syntax_delete_default(this, this.kfEditor);
+  },
+  initServices() {
+    this.kfEditor.registerService("syntax.update.objtree", this, { updateObjTree: this.updateObjTree });
+    this.kfEditor.registerService("syntax.get.objtree", this, { getObjectTree: this.getObjectTree });
+    this.kfEditor.registerService("syntax.get.group.object", this, { getGroupObject: this.getGroupObject });
+    this.kfEditor.registerService("syntax.is.root.node", this, { isRootNode: this.isRootNode });
+    this.kfEditor.registerService("syntax.is.group.node", this, { isGroupNode: this.isGroupNode });
+    this.kfEditor.registerService("syntax.is.virtual.node", this, { isVirtualNode: this.isVirtualNode });
+    this.kfEditor.registerService("syntax.is.placeholder.node", this, { isPlaceholder: this.isPlaceholder });
+    this.kfEditor.registerService("syntax.is.select.placeholder", this, { isSelectPlaceholder: this.isSelectPlaceholder });
+    this.kfEditor.registerService("syntax.has.root.placeholder", this, { hasRootplaceholder: this.hasRootplaceholder });
+    this.kfEditor.registerService("syntax.valid.brackets", this, { isBrackets: this.isBrackets });
+    this.kfEditor.registerService("syntax.get.group.content", this, { getGroupContent: this.getGroupContent });
+    this.kfEditor.registerService("syntax.get.root.group.info", this, { getRootGroupInfo: this.getRootGroupInfo });
+    this.kfEditor.registerService("syntax.get.root", this, { getRootObject: this.getRootObject });
+    this.kfEditor.registerService("syntax.update.record.cursor", this, { updateCursor: this.updateCursor });
+    this.kfEditor.registerService("syntax.update.selection", this, { updateSelection: this.updateSelection });
+    this.kfEditor.registerService("syntax.get.record.cursor", this, { getCursorRecord: this.getCursorRecord });
+    this.kfEditor.registerService("syntax.has.cursor.info", this, { hasCursorInfo: this.hasCursorInfo });
+    this.kfEditor.registerService("syntax.serialization", this, { serialization: this.serialization });
+    this.kfEditor.registerService("syntax.cursor.move.left", this, { leftMove: this.leftMove });
+    this.kfEditor.registerService("syntax.cursor.move.right", this, { rightMove: this.rightMove });
+    this.kfEditor.registerService("syntax.delete.group", this, { deleteGroup: this.deleteGroup });
+  },
+  initCommands() {
+    this.kfEditor.registerCommand("get.source", this, this.getSource);
+    this.kfEditor.registerCommand("content.is.empty", this, this.isEmpty);
+  },
+  updateObjTree(objTree) {
+    const selectInfo = objTree.select;
+    if (selectInfo?.groupId) {
+      this.updateCursor(selectInfo.groupId, selectInfo.startOffset, selectInfo.endOffset);
+    }
+    this.objTree = objTree;
+  },
+  hasCursorInfo() {
+    return this.record.cursor.groupId !== null;
+  },
+  isRootNode(groupId) {
+    return this.objTree.mapping.root.strGroup.attr.id === groupId;
+  },
+  isGroupNode(groupId) {
+    const type = this.objTree.mapping[groupId].strGroup.attr["data-type"];
+    return type === legacyGroupType.GROUP || type === legacyGroupType.VIRTUAL;
+  },
+  isVirtualNode(groupId) {
+    return this.objTree.mapping[groupId].strGroup.attr["data-type"] === legacyGroupType.VIRTUAL;
+  },
+  isPlaceholder(groupId) {
+    const currentNode = this.objTree.mapping[groupId];
+    if (!currentNode) {
+      return false;
+    }
+    return currentNode.objGroup.node.getAttribute("data-flag") === "Placeholder";
+  },
+  isBrackets(groupId) {
+    return !!this.objTree.mapping[groupId].objGroup.node.getAttribute("data-brackets");
+  },
+  hasRootplaceholder() {
+    return this.objTree.mapping.root.strGroup.operand[0].name === "placeholder";
+  },
+  isSelectPlaceholder() {
+    const cursorInfo = this.record.cursor;
+    if (cursorInfo.endOffset - cursorInfo.startOffset !== 1 || !cursorInfo.groupId) {
+      return false;
+    }
+    const groupInfo = this.getGroupContent(cursorInfo.groupId);
+    return this.isPlaceholder(groupInfo.content[cursorInfo.startOffset].id);
+  },
+  isLeafTree(tree) {
+    return typeof tree === "string";
+  },
+  isRootTree(tree) {
+    return !!tree.attr?.["data-root"];
+  },
+  getObjectTree() {
+    return this.objTree;
+  },
+  getGroupObject(id) {
+    return this.objTree.mapping[id].objGroup || null;
+  },
+  getCursorRecord() {
+    return kity18.Utils.extend({}, this.record.cursor);
+  },
+  getGroupContent(groupId) {
+    const groupInfo = this.objTree.mapping[groupId];
+    const operands = groupInfo.objGroup.operands;
+    const offset = operands.length - 1;
+    const isLtr = groupInfo.strGroup.traversal !== "rtl";
+    const content = [];
+    kity18.Utils.each(operands, (operand, i) => {
+      if (isLtr) {
+        content.push(operand.node);
+      } else {
+        content[offset - i] = operand.node;
+      }
+    });
+    return {
+      id: groupId,
+      traversal: groupInfo.strGroup.traversal || "ltr",
+      groupObj: groupInfo.objGroup.node,
+      content
+    };
+  },
+  getRootObject() {
+    return this.objTree.mapping.root.objGroup;
+  },
+  getRootGroupInfo() {
+    const rootGroupId = this.objTree.mapping.root.strGroup.attr.id;
+    return this.getGroupContent(rootGroupId);
+  },
+  updateSelection(group) {
+    let groupObj = this.objTree.mapping[group.id];
+    let curStrGroup = groupObj.strGroup;
+    let parentGroup = group;
+    let parentGroupObj = groupObj;
+    if (curStrGroup.name === "combination") {
+      this.record.cursor = {
+        groupId: parentGroup.id,
+        startOffset: 0,
+        endOffset: curStrGroup.operand.length
+      };
+      curStrGroup.operand.unshift(CURSOR_CHAR2);
+      curStrGroup.operand.push(CURSOR_CHAR2);
+    } else {
+      while (parentGroupObj.strGroup.name !== "combination" || parentGroup.content === 1) {
+        group = parentGroup;
+        groupObj = parentGroupObj;
+        parentGroup = this.kfEditor.requestService("position.get.parent.group", groupObj.objGroup.node);
+        parentGroupObj = this.objTree.mapping[parentGroup.id];
+      }
+      const parentIndex = parentGroup.content.indexOf(group.groupObj);
+      this.record.cursor = {
+        groupId: parentGroup.id,
+        startOffset: parentIndex,
+        endOffset: parentIndex + 1
+      };
+      parentGroupObj.strGroup.operand.splice(parentIndex + 1, 0, CURSOR_CHAR2);
+      parentGroupObj.strGroup.operand.splice(parentIndex, 0, CURSOR_CHAR2);
+    }
+    let resultStr = this.kfEditor.requestService("parser.latex.serialization", this.objTree.parsedTree);
+    const startOffset = resultStr.indexOf(CURSOR_CHAR2);
+    resultStr = resultStr.replace(CURSOR_CHAR2, "");
+    const endOffset = resultStr.indexOf(CURSOR_CHAR2);
+    parentGroupObj.strGroup.operand.splice(this.record.cursor.startOffset, 1);
+    parentGroupObj.strGroup.operand.splice(this.record.cursor.endOffset, 1);
+    return { str: resultStr, startOffset, endOffset };
+  },
+  getSource() {
+    return this.serialization().str.replace(CURSOR_CHAR2, "").replace(CURSOR_CHAR2, "");
+  },
+  isEmpty() {
+    return this.hasRootplaceholder();
+  },
+  serialization() {
+    const cursor = this.record.cursor;
+    const objGroup = this.objTree.mapping[cursor.groupId];
+    const curStrGroup = objGroup.strGroup;
+    let strStartIndex = Math.min(cursor.endOffset, cursor.startOffset);
+    let strEndIndex = Math.max(cursor.endOffset, cursor.startOffset);
+    curStrGroup.operand.splice(strEndIndex, 0, CURSOR_CHAR2);
+    curStrGroup.operand.splice(strStartIndex, 0, CURSOR_CHAR2);
+    strEndIndex += 1;
+    let resultStr = this.kfEditor.requestService("parser.latex.serialization", this.objTree.parsedTree);
+    curStrGroup.operand.splice(strEndIndex, 1);
+    curStrGroup.operand.splice(strStartIndex, 1);
+    strStartIndex = resultStr.indexOf(CURSOR_CHAR2);
+    if (cursor.startOffset === cursor.endOffset) {
+      resultStr = resultStr.replace(CURSOR_CHAR2, "");
+    }
+    strEndIndex = resultStr.lastIndexOf(CURSOR_CHAR2);
+    return {
+      str: resultStr,
+      startOffset: strStartIndex,
+      endOffset: strEndIndex
+    };
+  },
+  updateCursor(groupId, startOffset, endOffset) {
+    if (arguments.length === 1) {
+      endOffset = groupId.endOffset;
+      startOffset = groupId.startOffset;
+      groupId = groupId.groupId;
+    }
+    if (endOffset === void 0) {
+      endOffset = startOffset;
+    }
+    if (startOffset > endOffset) {
+      const tmp = endOffset;
+      endOffset = startOffset;
+      startOffset = tmp;
+    }
+    this.record.cursor = {
+      groupId,
+      startOffset,
+      endOffset
+    };
+  },
+  leftMove() {
+    this.components.move.leftMove();
+  },
+  rightMove() {
+    this.components.move.rightMove();
+  },
+  deleteGroup() {
+    return this.components.delete.deleteGroup();
+  },
+  insertSubtree(subtree) {
+    const cursorInfo = this.record.cursor;
+    if (this.isPlaceholder(cursorInfo.groupId)) {
+      this.replaceTree(subtree);
+      return;
+    }
+    const startOffset = Math.min(cursorInfo.startOffset, cursorInfo.endOffset);
+    const endOffset = Math.max(cursorInfo.startOffset, cursorInfo.endOffset);
+    const diff = endOffset - startOffset;
+    const currentTree = this.objTree.mapping[cursorInfo.groupId].strGroup;
+    currentTree.operand.splice(startOffset, diff, subtree);
+    cursorInfo.startOffset += 1;
+    cursorInfo.endOffset = cursorInfo.startOffset;
+  },
+  replaceTree(subtree) {
+    const cursorInfo = this.record.cursor;
+    const groupNode = this.objTree.mapping[cursorInfo.groupId].objGroup.node;
+    const parentInfo = this.kfEditor.requestService("position.get.parent.info", groupNode);
+    const currentTree = this.objTree.mapping[parentInfo.group.id].strGroup;
+    currentTree.operand[parentInfo.index] = subtree;
+    cursorInfo.groupId = parentInfo.group.id;
+    cursorInfo.startOffset = parentInfo.index + 1;
+    cursorInfo.endOffset = parentInfo.index + 1;
+  }
+});
+var syntax_default = SyntaxComponent;
+
+// src/legacy/input.ts
+var KEY_CODE = {
+  LEFT: 37,
+  RIGHT: 39,
+  DELETE: 8,
+  INPUT: 229
+};
+var kity19 = getLegacyKity();
+var InputComponent = kity19.createClass("InputComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+    this.inputBox = this.createInputBox();
+    this.initServices();
+    this.initCommands();
+    this.initEvent();
+  },
+  initServices() {
+    this.kfEditor.registerService("control.update.input", this, {
+      updateInput: this.updateInput
+    });
+    this.kfEditor.registerService("control.insert.string", this, {
+      insertStr: this.insertStr
+    });
+  },
+  initCommands() {
+    this.kfEditor.registerCommand("focus", this, this.focus);
+  },
+  createInputBox() {
+    const editorContainer = this.kfEditor.getContainer();
+    const box = this.kfEditor.getDocument().createElement("input");
+    box.className = "kf-editor-input-box";
+    box.type = "text";
+    box.isTrusted = false;
+    editorContainer.appendChild(box);
+    return box;
+  },
+  focus() {
+    this.inputBox.focus();
+    if (!this.kfEditor.requestService("syntax.has.cursor.info")) {
+      const rootInfo = this.kfEditor.requestService("syntax.get.root.group.info");
+      this.kfEditor.requestService("syntax.update.record.cursor", {
+        groupId: rootInfo.id,
+        startOffset: 0,
+        endOffset: rootInfo.content.length
+      });
+      this.kfEditor.requestService("control.update.input");
+    }
+    this.kfEditor.requestService("control.reselect");
+  },
+  setUntrusted() {
+    this.inputBox.isTrusted = false;
+  },
+  setTrusted() {
+    this.inputBox.isTrusted = true;
+  },
+  updateInput() {
+    const latexInfo = this.kfEditor.requestService("syntax.serialization");
+    this.setUntrusted();
+    this.inputBox.value = latexInfo.str;
+    this.inputBox.selectionStart = latexInfo.startOffset;
+    this.inputBox.selectionEnd = latexInfo.endOffset;
+    this.inputBox.focus();
+    this.setTrusted();
+  },
+  insertStr(str) {
+    const latexInfo = this.kfEditor.requestService("syntax.serialization");
+    let originString = latexInfo.str;
+    originString = originString.substring(0, latexInfo.startOffset) + ` ${str} ` + originString.substring(latexInfo.endOffset);
+    this.restruct(originString);
+    this.updateInput();
+    this.kfEditor.requestService("ui.update.canvas.view");
+  },
+  initEvent() {
+    legacyBaseUtils.addEvent(this.inputBox, "keydown", (e) => {
+      let isControl = false;
+      if (e.ctrlKey) {
+        this.processUserCtrl(e);
+        return;
+      }
+      switch (e.keyCode) {
+        case KEY_CODE.INPUT:
+          return;
+        case KEY_CODE.LEFT:
+          e.preventDefault();
+          this.leftMove();
+          isControl = true;
+          break;
+        case KEY_CODE.RIGHT:
+          e.preventDefault();
+          this.rightMove();
+          isControl = true;
+          break;
+        case KEY_CODE.DELETE:
+          e.preventDefault();
+          this.delete();
+          isControl = true;
+          break;
+      }
+      if (isControl) {
+        this.kfEditor.requestService("ui.update.canvas.view");
+      }
+      if (!this.pretreatmentInput(e)) {
+        e.preventDefault();
+      }
+    });
+    legacyBaseUtils.addEvent(this.inputBox, "input", () => {
+      this.processingInput();
+    });
+    legacyBaseUtils.addEvent(this.inputBox, "blur", () => {
+      this.kfEditor.requestService("ui.toolbar.disable");
+      this.kfEditor.requestService("ui.toolbar.close");
+      this.kfEditor.requestService("control.cursor.hide");
+      this.kfEditor.requestService("render.clear.select");
+    });
+    legacyBaseUtils.addEvent(this.inputBox, "focus", () => {
+      this.kfEditor.requestService("ui.toolbar.enable");
+      if (this.inputBox.isTrusted) {
+        this.kfEditor.requestService("control.reselect");
+      }
+    });
+    legacyBaseUtils.addEvent(this.inputBox, "paste", (e) => {
+      e.preventDefault();
+    });
+  },
+  hasRootplaceholder() {
+    return this.kfEditor.requestService("syntax.has.root.placeholder");
+  },
+  leftMove() {
+    if (this.hasRootplaceholder()) {
+      return;
+    }
+    this.kfEditor.requestService("syntax.cursor.move.left");
+    this.update();
+  },
+  rightMove() {
+    if (this.hasRootplaceholder()) {
+      return;
+    }
+    this.kfEditor.requestService("syntax.cursor.move.right");
+    this.update();
+  },
+  delete() {
+    if (this.hasRootplaceholder()) {
+      return;
+    }
+    const isNeedRedraw = this.kfEditor.requestService("syntax.delete.group");
+    if (isNeedRedraw) {
+      this.updateInput();
+      this.processingInput();
+      return;
+    }
+    this.updateInput();
+    this.kfEditor.requestService("control.reselect");
+  },
+  processUserCtrl(e) {
+    e.preventDefault();
+    switch (e.keyCode) {
+      case 65:
+        this.kfEditor.requestService("control.select.all");
+        break;
+      case 83:
+        this.kfEditor.requestService("print.image");
+        break;
+    }
+  },
+  pretreatmentInput(evt) {
+    const keyCode = this.getKeyCode(evt);
+    const replaceStr = legacyInputFilter.getReplaceString(keyCode);
+    if (replaceStr === null) {
+      return true;
+    }
+    this.insertStr(replaceStr);
+    return false;
+  },
+  getKeyCode(e) {
+    return `${e.shiftKey ? "s+" : ""}${e.keyCode}`;
+  },
+  processingInput() {
+    this.restruct(this.inputBox.value);
+    this.kfEditor.requestService("ui.update.canvas.view");
+  },
+  restruct(latexStr) {
+    this.kfEditor.requestService("render.draw", latexStr);
+    this.kfEditor.requestService("control.reselect");
+  },
+  update() {
+    this.updateInput();
+    this.kfEditor.requestService("control.reselect");
+  }
+});
+var input_default = InputComponent;
+
+// src/legacy/location.ts
+var kity20 = getLegacyKity();
+var LocationComponent = kity20.createClass("LocationComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+    this.paper = this.getPaper();
+    this.cursorShape = this.createCursor();
+    this.initServices();
+    this.initEvent();
+  },
+  getPaper() {
+    return this.kfEditor.requestService("render.get.paper");
+  },
+  initServices() {
+    this.kfEditor.registerService("control.cursor.relocation", this, {
+      relocationCursor: this.updateCursor
+    });
+    this.kfEditor.registerService("control.cursor.hide", this, {
+      hideCursor: this.hideCursor
+    });
+    this.kfEditor.registerService("control.reselect", this, {
+      reselect: this.reselect
+    });
+    this.kfEditor.registerService("control.get.cursor.location", this, {
+      getCursorLocation: this.getCursorLocation
+    });
+  },
+  createCursor() {
+    const cursorShape = new kity20.Rect(1, 0, 0, 0).fill("black");
+    cursorShape.setAttr("style", "display: none");
+    this.paper.addShape(cursorShape);
+    return cursorShape;
+  },
+  initEvent() {
+    const eventServiceObject = this.kfEditor.request("ui.canvas.container.event");
+    eventServiceObject.on("mousedown", (e) => {
+      e.preventDefault();
+      this.updateCursorInfo(e);
+      this.kfEditor.requestService("control.update.input");
+      this.reselect();
+    });
+  },
+  updateCursorInfo(evt) {
+    if (this.kfEditor.requestService("syntax.has.root.placeholder")) {
+      this.kfEditor.requestService("syntax.update.record.cursor", {
+        groupId: this.kfEditor.requestService("syntax.get.root.group.info").id,
+        startOffset: 0,
+        endOffset: 1
+      });
+      return false;
+    }
+    const wrapNode = this.kfEditor.requestService("position.get.wrap", evt.target);
+    if (wrapNode && this.kfEditor.requestService("syntax.is.placeholder.node", wrapNode.id)) {
+      const groupInfo2 = this.kfEditor.requestService("position.get.group.info", wrapNode);
+      this.kfEditor.requestService("syntax.update.record.cursor", groupInfo2.group.id, groupInfo2.index, groupInfo2.index + 1);
+      return;
+    }
+    let groupInfo = this.kfEditor.requestService("position.get.group", evt.target);
+    if (groupInfo === null) {
+      groupInfo = this.kfEditor.requestService("syntax.get.root.group.info");
+    }
+    const index = this.getIndex(evt.clientX, groupInfo);
+    this.kfEditor.requestService("syntax.update.record.cursor", groupInfo.id, index);
+  },
+  hideCursor() {
+    this.cursorShape.setAttr("style", "display: none");
+  },
+  reselect() {
+    const cursorInfo = this.kfEditor.requestService("syntax.get.record.cursor");
+    this.hideCursor();
+    if (this.kfEditor.requestService("syntax.is.select.placeholder")) {
+      const groupInfo = this.kfEditor.requestService("syntax.get.group.content", cursorInfo.groupId);
+      this.kfEditor.requestService("render.select.group", groupInfo.content[cursorInfo.startOffset].id);
+      return;
+    }
+    if (cursorInfo.startOffset === cursorInfo.endOffset) {
+      this.updateCursor();
+      this.kfEditor.requestService("render.tint.current.cursor");
+      return;
+    }
+    this.kfEditor.requestService("render.select.current.cursor");
+  },
+  updateCursor() {
+    const cursorInfo = this.kfEditor.requestService("syntax.get.record.cursor");
+    if (cursorInfo.startOffset !== cursorInfo.endOffset) {
+      this.hideCursor();
+      return;
+    }
+    const groupInfo = this.kfEditor.requestService("syntax.get.group.content", cursorInfo.groupId);
+    const isBefore = cursorInfo.endOffset === 0;
+    const index = isBefore ? 0 : cursorInfo.endOffset - 1;
+    const focusChild = groupInfo.content[index];
+    const paperContainerRect = legacyBaseUtils.getRect(this.paper.container.node);
+    const focusChildRect = legacyBaseUtils.getRect(focusChild);
+    const cursorTransform = this.cursorShape.getTransform(this.cursorShape);
+    const canvasZoom = this.kfEditor.requestService("render.get.canvas.zoom");
+    const formulaZoom = this.paper.getZoom();
+    this.cursorShape.setHeight(focusChildRect.height / canvasZoom / formulaZoom);
+    let cursorOffset = isBefore ? focusChildRect.left - 2 : focusChildRect.left + focusChildRect.width - 2;
+    cursorOffset -= paperContainerRect.left;
+    cursorTransform.m.e = Math.floor(cursorOffset / canvasZoom / formulaZoom) + 0.5;
+    cursorTransform.m.f = (focusChildRect.top - paperContainerRect.top) / canvasZoom / formulaZoom;
+    this.cursorShape.setMatrix(cursorTransform);
+    this.cursorShape.setAttr("style", "display: block");
+  },
+  getCursorLocation() {
+    const rect = this.cursorShape.getRenderBox("paper");
+    return {
+      x: rect.x,
+      y: rect.y
+    };
+  },
+  getIndex(distance, groupInfo) {
+    let index = -1;
+    for (let i = groupInfo.content.length - 1; i >= 0; i -= 1) {
+      index = i;
+      const child = groupInfo.content[i];
+      const boundingRect = legacyBaseUtils.getRect(child);
+      if (boundingRect.left < distance) {
+        if (boundingRect.left + boundingRect.width / 2 < distance) {
+          index += 1;
+        }
+        break;
+      }
+    }
+    return index;
+  }
+});
+var location_default = LocationComponent;
+
+// src/legacy/selection.ts
+var MAX_DISTANCE = 10;
+var kity21 = getLegacyKity();
+var SelectionComponent = kity21.createClass("SelectionComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+    this.isDrag = false;
+    this.isMousedown = false;
+    this.startPoint = { x: -1, y: -1 };
+    this.startGroupIsPlaceholder = false;
+    this.startGroup = {};
+    this.initServices();
+    this.initEvent();
+  },
+  initServices() {
+    this.kfEditor.registerService("control.select.all", this, {
+      selectAll: this.selectAll
+    });
+  },
+  initEvent() {
+    const eventServiceObject = this.kfEditor.request("ui.canvas.container.event");
+    eventServiceObject.on("mousedown", (e) => {
+      e.preventDefault();
+      if (this.kfEditor.requestService("syntax.has.root.placeholder")) {
+        return false;
+      }
+      this.isMousedown = true;
+      this.updateStartPoint(e.clientX, e.clientY);
+      this.updateStartGroup();
+    });
+    eventServiceObject.on("mouseup", (e) => {
+      e.preventDefault();
+      this.stopUpdateSelection();
+    });
+    eventServiceObject.on("mousemove", (e) => {
+      e.preventDefault();
+      if (!this.isDrag) {
+        if (this.isMousedown && MAX_DISTANCE < this.getDistance(e.clientX, e.clientY)) {
+          this.kfEditor.requestService("control.cursor.hide");
+          this.startUpdateSelection();
+        }
+        return;
+      }
+      if (e.which !== 1) {
+        this.stopUpdateSelection();
+        return;
+      }
+      this.updateSelection(e.target, e.clientX, e.clientY);
+    });
+    eventServiceObject.on("dblclick", (e) => {
+      this.updateSelectionByTarget(e.target);
+    });
+  },
+  getDistance(x, y) {
+    const distanceX = Math.abs(x - this.startPoint.x);
+    const distanceY = Math.abs(y - this.startPoint.y);
+    return Math.max(distanceX, distanceY);
+  },
+  updateStartPoint(x, y) {
+    this.startPoint.x = x;
+    this.startPoint.y = y;
+  },
+  updateStartGroup() {
+    const cursorInfo = this.kfEditor.requestService("syntax.get.record.cursor");
+    this.startGroupIsPlaceholder = this.kfEditor.requestService("syntax.is.select.placeholder");
+    this.startGroup = {
+      groupInfo: this.kfEditor.requestService("syntax.get.group.content", cursorInfo.groupId),
+      offset: cursorInfo.startOffset
+    };
+  },
+  startUpdateSelection() {
+    this.isDrag = true;
+    this.isMousedown = false;
+    this.clearSelection();
+  },
+  stopUpdateSelection() {
+    this.isDrag = false;
+    this.isMousedown = false;
+    this.kfEditor.requestService("control.update.input");
+  },
+  clearSelection() {
+    this.kfEditor.requestService("render.clear.select");
+  },
+  updateSelection(target, x) {
+    const dir = x > this.startPoint.x;
+    const startGroupInfo = this.startGroup;
+    const currentGroupInfo = this.getGroupInof(x, target);
+    let cursorInfo;
+    if (currentGroupInfo.groupInfo.id === startGroupInfo.groupInfo.id) {
+      cursorInfo = {
+        groupId: currentGroupInfo.groupInfo.id,
+        startOffset: startGroupInfo.offset,
+        endOffset: currentGroupInfo.offset
+      };
+      if (this.startGroupIsPlaceholder) {
+        if (!dir) {
+          cursorInfo.startOffset += 1;
+        } else if (cursorInfo.startOffset === cursorInfo.endOffset) {
+          cursorInfo.endOffset += 1;
+        }
+      }
+    } else if (legacyBaseUtils.contains(startGroupInfo.groupInfo.groupObj, currentGroupInfo.groupInfo.groupObj)) {
+      cursorInfo = {
+        groupId: startGroupInfo.groupInfo.id,
+        startOffset: startGroupInfo.offset,
+        endOffset: this.getIndex(startGroupInfo.groupInfo.groupObj, target, x)
+      };
+    } else if (legacyBaseUtils.contains(currentGroupInfo.groupInfo.groupObj, startGroupInfo.groupInfo.groupObj)) {
+      cursorInfo = {
+        groupId: currentGroupInfo.groupInfo.id,
+        startOffset: this.kfEditor.requestService(
+          "position.get.index",
+          currentGroupInfo.groupInfo.groupObj,
+          startGroupInfo.groupInfo.groupObj
+        ),
+        endOffset: currentGroupInfo.offset
+      };
+      if (!dir) {
+        cursorInfo.startOffset += 1;
+      }
+    } else {
+      const communityGroupInfo = this.getCommunityGroup(startGroupInfo.groupInfo, currentGroupInfo.groupInfo);
+      if (communityGroupInfo.startOffset === communityGroupInfo.endOffset) {
+        communityGroupInfo.endOffset += 1;
+      } else {
+        const currentGroupNode = communityGroupInfo.group.content[communityGroupInfo.endOffset];
+        const inRightArea = this.kfEditor.requestService("position.get.area", currentGroupNode, x);
+        if (inRightArea) {
+          communityGroupInfo.endOffset += 1;
+        }
+        if (!dir) {
+          communityGroupInfo.startOffset += 1;
+        }
+      }
+      cursorInfo = {
+        groupId: communityGroupInfo.group.id,
+        startOffset: communityGroupInfo.startOffset,
+        endOffset: communityGroupInfo.endOffset
+      };
+    }
+    this.kfEditor.requestService("syntax.update.record.cursor", cursorInfo.groupId, cursorInfo.startOffset, cursorInfo.endOffset);
+    this.kfEditor.requestService("control.reselect");
+  },
+  updateSelectionByTarget(target) {
+    const parentGroupInfo = this.kfEditor.requestService("position.get.parent.group", target);
+    if (parentGroupInfo === null) {
+      return;
+    }
+    if (this.kfEditor.requestService("syntax.is.root.node", parentGroupInfo.id)) {
+      this.selectAll();
+      return;
+    }
+    let cursorInfo;
+    if (!this.kfEditor.requestService("syntax.is.virtual.node", parentGroupInfo.id)) {
+      cursorInfo = {
+        groupId: parentGroupInfo.id,
+        startOffset: 0,
+        endOffset: parentGroupInfo.content.length
+      };
+    } else {
+      const containerInfo = this.kfEditor.requestService("position.get.group.info", parentGroupInfo.groupObj);
+      cursorInfo = {
+        groupId: containerInfo.group.id,
+        startOffset: containerInfo.index,
+        endOffset: containerInfo.index + 1
+      };
+    }
+    this.kfEditor.requestService("syntax.update.record.cursor", cursorInfo);
+    this.kfEditor.requestService("control.reselect");
+    this.kfEditor.requestService("control.update.input");
+  },
+  selectAll() {
+    const rootGroupInfo = this.kfEditor.requestService("syntax.get.root.group.info");
+    const cursorInfo = {
+      groupId: rootGroupInfo.id,
+      startOffset: 0,
+      endOffset: rootGroupInfo.content.length
+    };
+    this.kfEditor.requestService("syntax.update.record.cursor", cursorInfo);
+    this.kfEditor.requestService("control.reselect");
+    this.kfEditor.requestService("control.update.input");
+  },
+  getGroupInof(offset, target) {
+    let groupInfo = this.kfEditor.requestService("position.get.group", target);
+    if (groupInfo === null) {
+      groupInfo = this.kfEditor.requestService("syntax.get.root.group.info");
+    }
+    const index = this.kfEditor.requestService("position.get.location.info", offset, groupInfo);
+    return {
+      groupInfo,
+      offset: index
+    };
+  },
+  getIndex(groupNode, targetNode, offset) {
+    let index = this.kfEditor.requestService("position.get.index", groupNode, targetNode);
+    const groupInfo = this.kfEditor.requestService("syntax.get.group.content", groupNode.id);
+    const targetWrapNode = groupInfo.content[index];
+    const targetRect = legacyBaseUtils.getRect(targetWrapNode);
+    if (targetRect.left + targetRect.width / 2 < offset) {
+      index += 1;
+    }
+    return index;
+  },
+  getCommunityGroup(startGroupInfo, endGroupInfo) {
+    let targetGroup = startGroupInfo.groupObj;
+    let bigBoundingGroup = null;
+    while (bigBoundingGroup = this.kfEditor.requestService("position.get.group.info", targetGroup)) {
+      targetGroup = bigBoundingGroup.group.groupObj;
+      if (legacyBaseUtils.contains(bigBoundingGroup.group.groupObj, endGroupInfo.groupObj)) {
+        break;
+      }
+    }
+    if (!bigBoundingGroup) {
+      throw new Error("SelectionComponent: failed to find community group");
+    }
+    const groupNode = bigBoundingGroup.group.groupObj;
+    return {
+      group: bigBoundingGroup.group,
+      startOffset: bigBoundingGroup.index,
+      endOffset: this.kfEditor.requestService("position.get.index", groupNode, endGroupInfo.groupObj)
+    };
+  }
+});
+var selection_default = SelectionComponent;
+
+// src/legacy/listener.ts
+var kity22 = getLegacyKity();
+var ListenerComponent = kity22.createClass("MoveComponent", {
+  constructor(parentComponent, kfEditor) {
+    this.parentComponent = parentComponent;
+    this.kfEditor = kfEditor;
+    this.components = {};
+    this.initComponents();
+  },
+  initComponents() {
+    this.components.location = new location_default(this, this.kfEditor);
+    this.components.selection = new selection_default(this, this.kfEditor);
+    this.components.input = new input_default(this, this.kfEditor);
+  }
+});
+var listener_default = ListenerComponent;
+
+// src/legacy/controller.ts
+var kity23 = getLegacyKity();
+var ControllerComponent = kity23.createClass("ControllerComponent", {
+  constructor(kfEditor) {
+    this.kfEditor = kfEditor;
+    this.components = {};
+    this.initComponents();
+  },
+  initComponents() {
+    this.components.listener = new listener_default(this, this.kfEditor);
+  }
+});
+var controller_default = ControllerComponent;
+
+// src/legacy/printer.ts
+var kity24 = getLegacyKity();
+var Printer = kity24.createClass("Printer", {
+  constructor(kfEditor) {
+    this.kfEditor = kfEditor;
+    this.initServices();
+    this.initCommands();
+  },
+  initServices() {
+    this.kfEditor.registerService("print.image", this, {
+      printImage: this.printImage
+    });
+  },
+  initCommands() {
+    this.kfEditor.registerCommand("get.image.data", this, this.getImageData);
+  },
+  printImage() {
+    const formula = this.kfEditor.requestService("render.get.paper");
+    this._formatCanvas();
+    formula.toPNG((dataUrl) => {
+      document.body.innerHTML = `<img style="background: red;" src="${dataUrl}">`;
+    });
+    this._restoreCanvas();
+  },
+  getImageData(cb) {
+    const canvas = this.kfEditor.requestService("render.get.canvas");
+    const formula = this.kfEditor.requestService("render.get.paper");
+    this._formatCanvas();
+    formula.toPNG((dataUrl) => {
+      cb({
+        width: canvas.width,
+        height: canvas.height,
+        img: dataUrl
+      });
+    });
+    this._restoreCanvas();
+  },
+  _formatCanvas() {
+    const canvas = this.kfEditor.requestService("render.get.canvas");
+    const rect = canvas.container.getRenderBox();
+    canvas.node.setAttribute("width", rect.width);
+    canvas.node.setAttribute("height", rect.height);
+    this.kfEditor.requestService("render.clear.canvas.transform");
+    this.kfEditor.requestService("control.cursor.hide");
+    this.kfEditor.requestService("render.clear.select");
+  },
+  _restoreCanvas() {
+    const canvas = this.kfEditor.requestService("render.get.canvas");
+    canvas.node.setAttribute("width", "100%");
+    canvas.node.setAttribute("height", "100%");
+    this.kfEditor.requestService("render.revert.canvas.transform");
+    this.kfEditor.requestService("control.cursor.relocation");
+    this.kfEditor.requestService("render.reselect");
+  }
+});
+var printer_default = Printer;
+
+// src/boot/start.ts
+var installed = false;
+function installKityEditorStart(target = window) {
+  const runtimeTarget = target;
+  if (!installed) {
+    editor_default.registerComponents("ui", ui_default);
+    editor_default.registerComponents("parser", parser_default);
+    editor_default.registerComponents("render", render_default);
+    editor_default.registerComponents("position", position_default);
+    editor_default.registerComponents("syntax", syntax_default);
+    editor_default.registerComponents("control", controller_default);
+    editor_default.registerComponents("print", printer_default);
+    installed = true;
+  }
+  runtimeTarget.kf = runtimeTarget.kf ?? {};
+  runtimeTarget.kf.EditorFactory = factory_default;
+  return {
+    KFEditor: editor_default,
+    Factory: factory_default
+  };
+}
+var start_default = installKityEditorStart;
+export {
+  factory_default as Factory,
+  editor_default as KFEditor,
+  start_default as default,
+  installKityEditorStart
+};
+//# sourceMappingURL=start-GQH6XUBI.js.map