@univerjs/docs-hyper-link-ui 0.2.0

package/lib/es/index.js

@@ -0,0 +1,644 @@
+var be = Object.defineProperty;
+var we = (e, t, i) => t in e ? be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var E = (e, t, i) => we(e, typeof t != "symbol" ? t + "" : t, i);
+import { CommandType as z, ICommandService as O, IUniverInstanceService as T, UniverInstanceType as _, LocaleService as ve, Disposable as $, Tools as J, CustomRangeType as M, sequenceExecuteAsync as De, OnLifecycle as Q, LifecycleStages as ee, updateAttributeByDelete as Ne, DependentOn as Ue, Plugin as Te } from "@univerjs/core";
+import { Inject as m, Injector as me } from "@wendellhu/redi";
+import { DocHyperLinkModel as H, AddDocHyperLinkMutation as $e, UpdateDocHyperLinkMutation as He, UniverDocsHyperLinkPlugin as Ae } from "@univerjs/docs-hyper-link";
+import { IRenderManagerService as te, DocumentEditArea as q, ITextSelectionRenderManager as je } from "@univerjs/engine-render";
+import { IMessageService as Be, useObservable as Ke, MetaKeys as Ve, KeyCode as Fe, MenuGroup as Ye, MenuItemType as Ze, MenuPosition as ae, getMenuHiddenObservable as We, ComponentManager as ze, IMenuService as Ge, IShortcutService as qe } from "@univerjs/ui";
+import { Tooltip as j, MessageType as Xe, FormLayout as Je, Input as Qe, Button as de } from "@univerjs/design";
+import d, { forwardRef as x, useRef as et, createElement as R, useState as le, useEffect as ue } from "react";
+import { useDependency as g, useObservable as tt } from "@wendellhu/redi/react-bindings";
+import { deleteCustomRangeFactory as nt, TextSelectionManagerService as A, DocSkeletonManagerService as Le, addCustomRangeBySelectionFactory as it, SetTextSelectionsOperation as rt, DocInterceptorService as ot, DOC_INTERCEPTOR_POINT as ct } from "@univerjs/docs";
+import { DocCanvasPopManagerService as st, whenDocAndEditorFocused as at, IDocClipboardService as dt } from "@univerjs/docs-ui";
+import { BehaviorSubject as pe, Observable as lt, debounceTime as ut } from "rxjs";
+import fe from "clsx";
+const pt = "DOC_HYPER_LINK_UI_PLUGIN";
+var v = function() {
+  return v = Object.assign || function(e) {
+    for (var t, i = 1, n = arguments.length; i < n; i++) {
+      t = arguments[i];
+      for (var r in t) Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
+    }
+    return e;
+  }, v.apply(this, arguments);
+}, ft = function(e, t) {
+  var i = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) < 0 && (i[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, n = Object.getOwnPropertySymbols(e); r < n.length; r++)
+      t.indexOf(n[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[r]) && (i[n[r]] = e[n[r]]);
+  return i;
+}, b = x(function(e, t) {
+  var i = e.icon, n = e.id, r = e.className, o = e.extend, c = ft(e, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(n, " ").concat(r || "").trim(), a = et("_".concat(vt()));
+  return _e(i, "".concat(n), { defIds: i.defIds, idSuffix: a.current }, v({ ref: t, className: s }, c), o);
+});
+function _e(e, t, i, n, r) {
+  return R(e.tag, v(v({ key: t }, ht(e, i, r)), n), (gt(e, i).children || []).map(function(o, c) {
+    return _e(o, "".concat(t, "-").concat(e.tag, "-").concat(c), i, void 0, r);
+  }));
+}
+function ht(e, t, i) {
+  var n = v({}, e.attrs);
+  i != null && i.colorChannel1 && n.fill === "colorChannel1" && (n.fill = i.colorChannel1);
+  var r = t.defIds;
+  return !r || r.length === 0 || (e.tag === "use" && n["xlink:href"] && (n["xlink:href"] = n["xlink:href"] + t.idSuffix), Object.entries(n).forEach(function(o) {
+    var c = o[0], s = o[1];
+    typeof s == "string" && (n[c] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(t.idSuffix, ")")));
+  })), n;
+}
+function gt(e, t) {
+  var i, n = t.defIds;
+  return !n || n.length === 0 ? e : e.tag === "defs" && (!((i = e.children) === null || i === void 0) && i.length) ? v(v({}, e), { children: e.children.map(function(r) {
+    return typeof r.attrs.id == "string" && n && n.indexOf(r.attrs.id) > -1 ? v(v({}, r), { attrs: v(v({}, r.attrs), { id: r.attrs.id + t.idSuffix }) }) : r;
+  }) }) : e;
+}
+function vt() {
+  return Math.random().toString(36).substring(2, 8);
+}
+b.displayName = "UniverIcon";
+var mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3.71274 2.86421C3.47843 2.6299 3.09853 2.6299 2.86421 2.86421C2.6299 3.09853 2.6299 3.47843 2.86421 3.71274L7.15154 8.00007L2.86421 12.2874C2.6299 12.5217 2.6299 12.9016 2.86421 13.1359C3.09853 13.3702 3.47843 13.3702 3.71274 13.1359L8.00007 8.84859L12.2874 13.1359C12.5217 13.3702 12.9016 13.3702 13.1359 13.1359C13.3702 12.9016 13.3702 12.5217 13.1359 12.2874L8.84859 8.00007L13.1359 3.71274C13.3702 3.47843 13.3702 3.09853 13.1359 2.86421C12.9016 2.6299 12.5217 2.6299 12.2874 2.86421L8.00007 7.15154L3.71274 2.86421Z" } }] }, Ce = x(function(e, t) {
+  return R(b, Object.assign({}, e, {
+    id: "close-single",
+    ref: t,
+    icon: mt
+  }));
+});
+Ce.displayName = "CloseSingle";
+var Lt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.02547 12.4251C5.15328 13.7417 6.26305 14.7708 7.61318 14.7708H12.6132C14.0491 14.7708 15.2132 13.6067 15.2132 12.1708V6.1708C15.2132 4.78586 14.1303 3.65383 12.7651 3.57517C12.6373 2.25858 11.5275 1.22949 10.1774 1.22949H5.17739C3.74145 1.22949 2.57739 2.39355 2.57739 3.82949V9.82949C2.57739 11.2144 3.66024 12.3465 5.02547 12.4251ZM11.5535 3.5708H7.61318C6.17724 3.5708 5.01318 4.73486 5.01318 6.1708V11.22C4.31736 11.1387 3.77739 10.5471 3.77739 9.82949V3.82949C3.77739 3.05629 4.40419 2.42949 5.17739 2.42949H10.1774C10.8622 2.42949 11.4322 2.92119 11.5535 3.5708ZM14.0132 6.1708C14.0132 5.3976 13.3864 4.7708 12.6132 4.7708H7.61318C6.83998 4.7708 6.21318 5.3976 6.21318 6.1708V12.1708C6.21318 12.944 6.83998 13.5708 7.61318 13.5708H12.6132C13.3864 13.5708 14.0132 12.944 14.0132 12.1708V6.1708Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Ie = x(function(e, t) {
+  return R(b, Object.assign({}, e, {
+    id: "copy-single",
+    ref: t,
+    icon: Lt
+  }));
+});
+Ie.displayName = "CopySingle";
+var _t = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.9564 2.91332C4.91407 1.87102 3.22413 1.87101 2.18182 2.91333L2.18182 2.91333C1.13953 3.95567 1.13952 5.6456 2.18182 6.68791L8.27777 12.7838C9.72408 14.2302 12.069 14.2302 13.5154 12.7839L13.0911 12.3596L13.5154 12.7839C14.9617 11.3375 14.9617 8.99257 13.5154 7.54626L8.39476 2.42566C8.16044 2.19134 7.78054 2.19134 7.54623 2.42566C7.31191 2.65997 7.31191 3.03987 7.54623 3.27419L12.6668 8.39479L13.0911 7.97052L12.6668 8.39479C13.6445 9.37247 13.6445 10.9576 12.6668 11.9353L13.0399 12.3084L12.6668 11.9353C11.6891 12.913 10.104 12.913 9.1263 11.9353L3.03035 5.83938C2.45668 5.26571 2.45667 4.33556 3.03036 3.76184C3.60403 3.18818 4.53416 3.18817 5.10788 3.76185C5.10788 3.76186 5.10788 3.76186 5.10789 3.76186L11.2038 9.8578L11.601 9.46061L11.2038 9.8578C11.3735 10.0275 11.3735 10.3026 11.2038 10.4723L11.2038 10.4723C11.0341 10.642 10.759 10.642 10.5893 10.4723L5.46874 5.35171C5.23442 5.1174 4.85452 5.1174 4.62021 5.35171C4.38589 5.58602 4.38589 5.96592 4.62021 6.20024L9.74078 11.3208C10.3791 11.9591 11.414 11.9591 12.0523 11.3208C12.0523 11.3208 12.0523 11.3208 12.0523 11.3208M12.0523 11.3208C12.6907 10.6825 12.6906 9.64757 12.0523 9.00927L5.95641 2.91333L5.9564 2.91332", fillRule: "evenodd", clipRule: "evenodd" } }] }, ne = x(function(e, t) {
+  return R(b, Object.assign({}, e, {
+    id: "link-single",
+    ref: t,
+    icon: _t
+  }));
+});
+ne.displayName = "LinkSingle";
+var Ct = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 17", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M12.5935 3.47302C11.6354 2.51492 10.082 2.51492 9.12388 3.47302L7.83534 4.76157C7.60102 4.99588 7.22112 4.99588 6.98681 4.76157 6.75249 4.52725 6.75249 4.14735 6.98681 3.91304L8.27535 2.62449C9.70209 1.19776 12.0153 1.19776 13.442 2.62449 14.8688 4.05123 14.8688 6.36442 13.442 7.79116L12.1535 9.0797C11.9192 9.31402 11.5393 9.31402 11.3049 9.0797 11.0706 8.84539 11.0706 8.46549 11.3049 8.23117L12.5935 6.94263C13.5516 5.98452 13.5516 4.43113 12.5935 3.47302zM3.40637 12.6606C2.44827 11.7025 2.44827 10.1491 3.40637 9.19102L4.69492 7.90248C4.92923 7.66816 4.92923 7.28826 4.69492 7.05395 4.4606 6.81963 4.0807 6.81963 3.84639 7.05395L2.55784 8.34249C1.13111 9.76923 1.13111 12.0824 2.55784 13.5092 3.98458 14.9359 6.29777 14.9359 7.72451 13.5092L9.01305 12.2206C9.24737 11.9863 9.24737 11.6064 9.01305 11.3721 8.77874 11.1378 8.39884 11.1378 8.16452 11.3721L6.87598 12.6606C5.91787 13.6187 4.36448 13.6187 3.40637 12.6606zM3.5852 2.80332C3.35088 2.569 2.97098 2.569 2.73667 2.80332 2.50235 3.03763 2.50235 3.41753 2.73667 3.65185L12.4151 13.3302C12.6494 13.5646 13.0293 13.5646 13.2636 13.3302 13.4979 13.0959 13.4979 12.716 13.2636 12.4817L3.5852 2.80332z" } }] }, ke = x(function(e, t) {
+  return R(b, Object.assign({}, e, {
+    id: "unlink-single",
+    ref: t,
+    icon: Ct
+  }));
+});
+ke.displayName = "UnlinkSingle";
+var It = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M12.6551 1.98906C11.7476 1.08113 10.2757 1.08149 9.3686 1.98987L4.82542 6.53955C4.75087 6.61421 4.69336 6.70411 4.65682 6.80309L3.2461 10.625C3.16506 10.8446 3.21909 11.0912 3.3845 11.2568C3.54991 11.4224 3.79651 11.4767 4.01616 11.3959L7.85031 9.98517C7.94979 9.94856 8.04014 9.89077 8.11508 9.81579L12.6552 5.27327C13.5618 4.36621 13.5618 2.89607 12.6551 1.98906ZM10.2177 2.83779C10.6562 2.39869 11.3677 2.39851 11.8064 2.8374C12.2447 3.27584 12.2447 3.9865 11.8065 4.42497L7.3392 8.89457L4.82213 9.82068L5.74706 7.31487L10.2177 2.83779Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.79238 13.2999C1.46101 13.2999 1.19238 13.5685 1.19238 13.8999C1.19238 14.2313 1.46101 14.4999 1.79238 14.4999H14.4924C14.8238 14.4999 15.0924 14.2313 15.0924 13.8999C15.0924 13.5685 14.8238 13.2999 14.4924 13.2999H1.79238Z" } }] }, ye = x(function(e, t) {
+  return R(b, Object.assign({}, e, {
+    id: "write-single",
+    ref: t,
+    icon: It
+  }));
+});
+ye.displayName = "WriteSingle";
+const Se = {
+  type: z.COMMAND,
+  id: "docs.command.delete-hyper-link",
+  handler(e, t) {
+    if (!t)
+      return !1;
+    const { unitId: i, linkId: n } = t, r = e.get(O);
+    if (!e.get(H).getLink(i, n))
+      return !1;
+    const s = nt(e, { unitId: i, rangeId: n });
+    return s ? r.executeCommand(s.id, s.params) : !1;
+  }
+}, Oe = (e) => {
+  var p;
+  const t = e.get(A), i = e.get(T), n = t.getActiveRange(), o = e.get(te).getCurrent(), c = o == null ? void 0 : o.with(Le).getSkeleton(), s = c == null ? void 0 : c.getViewModel().getEditArea();
+  if (s === q.FOOTER || s === q.HEADER)
+    return !0;
+  const a = i.getCurrentUnitForType(_.UNIVER_DOC);
+  if (!a || !n || n.collapsed)
+    return !0;
+  const u = (p = a.getBody()) == null ? void 0 : p.paragraphs;
+  if (!u)
+    return !0;
+  for (let f = 0, l = u.length; f < l; f++) {
+    const h = u[f];
+    if (n.startOffset <= h.startIndex && n.endOffset > h.startIndex)
+      return !0;
+    if (h.startIndex > n.endOffset)
+      break;
+  }
+  return !1;
+}, G = {
+  type: z.OPERATION,
+  id: "docs.operation.show-hyper-link-edit-popup",
+  handler(e, t) {
+    const i = t == null ? void 0 : t.link;
+    return Oe(e) && !i ? !1 : (e.get(S).showEditPopup(i), !0);
+  }
+}, kt = "univer-doc-link", yt = "univer-doc-link-type", St = "univer-doc-link-content", Ot = "univer-doc-link-content-error", Et = "univer-doc-link-url", Pt = "univer-doc-link-operations", Mt = "univer-doc-link-operation", xt = "univer-doc-link-operation-error", y = {
+  docLink: kt,
+  docLinkType: yt,
+  docLinkContent: St,
+  docLinkContentError: Ot,
+  docLinkUrl: Et,
+  docLinkOperations: Pt,
+  docLinkOperation: Mt,
+  docLinkOperationError: xt
+}, Y = () => {
+  const e = g(S), t = g(H), i = g(O), n = g(Be), r = g(ve), o = Ke(e.showingLink$);
+  if (!o)
+    return null;
+  const { unitId: c, linkId: s } = o, a = t.getLink(c, s);
+  return a ? /* @__PURE__ */ d.createElement(
+    "div",
+    {
+      className: y.docLink,
+      onClick: () => {
+        e.hideInfoPopup();
+      }
+    },
+    /* @__PURE__ */ d.createElement("div", { className: fe(y.docLinkContent), onClick: () => window.open(a.payload) }, /* @__PURE__ */ d.createElement("div", { className: y.docLinkType }, /* @__PURE__ */ d.createElement(ne, null)), /* @__PURE__ */ d.createElement(j, { showIfEllipsis: !0, title: a.payload }, /* @__PURE__ */ d.createElement("span", { className: y.docLinkUrl }, a.payload))),
+    /* @__PURE__ */ d.createElement("div", { className: y.docLinkOperations }, /* @__PURE__ */ d.createElement(
+      "div",
+      {
+        className: fe(y.docLinkOperation),
+        onClick: () => {
+          navigator.clipboard.writeText(a.payload), n.show({
+            content: r.t("docLink.info.coped"),
+            type: Xe.Info
+          });
+        }
+      },
+      /* @__PURE__ */ d.createElement(j, { placement: "bottom", title: r.t("docLink.info.copy") }, /* @__PURE__ */ d.createElement(Ie, null))
+    ), /* @__PURE__ */ d.createElement(
+      "div",
+      {
+        className: y.docLinkOperation,
+        onClick: () => {
+          i.executeCommand(G.id, {
+            link: o
+          });
+        }
+      },
+      /* @__PURE__ */ d.createElement(j, { placement: "bottom", title: r.t("docLink.info.edit") }, /* @__PURE__ */ d.createElement(ye, null))
+    ), /* @__PURE__ */ d.createElement(
+      "div",
+      {
+        className: y.docLinkOperation,
+        onClick: () => {
+          i.executeCommand(Se.id, {
+            unitId: c,
+            linkId: a.id
+          });
+        }
+      },
+      /* @__PURE__ */ d.createElement(j, { placement: "bottom", title: r.t("docLink.info.cancel") }, /* @__PURE__ */ d.createElement(ke, null))
+    ))
+  ) : null;
+};
+Y.componentKey = "univer.doc.link-info-popup";
+var Rt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, wt = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? bt(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && Rt(t, i, r), r;
+}, D = (e, t) => (i, n) => t(i, n, e);
+let S = class extends $ {
+  constructor(t, i, n, r, o) {
+    super();
+    E(this, "_editingLink$", new pe(null));
+    E(this, "_showingLink$", new pe(null));
+    E(this, "editingLink$", this._editingLink$.asObservable());
+    E(this, "showingLink$", this._showingLink$.asObservable());
+    E(this, "_editPopup", null);
+    E(this, "_infoPopup", null);
+    this._docCanvasPopupManagerService = t, this._textSelectionManagerService = i, this._docHyperLinkModel = n, this._univerInstanceService = r, this._commandService = o;
+  }
+  get editing() {
+    return this._editingLink$.value;
+  }
+  get showing() {
+    return this._showingLink$.value;
+  }
+  showEditPopup(t) {
+    var n, r;
+    this._editPopup && this._editPopup.dispose(), this._editingLink$.next(t);
+    let i = this._textSelectionManagerService.getActiveRange();
+    if (t) {
+      const { unitId: o, rangeIndex: c } = t, s = this._univerInstanceService.getUnit(o, _.UNIVER_DOC), a = (r = (n = s == null ? void 0 : s.getBody()) == null ? void 0 : n.customRanges) == null ? void 0 : r[c];
+      a && (i = {
+        collapsed: !1,
+        startOffset: a.startIndex,
+        endOffset: a.endIndex + 1
+      }, this._textSelectionManagerService.replaceTextRanges([{
+        startOffset: a.startIndex,
+        endOffset: a.endIndex + 1
+      }]));
+    }
+    return i ? (this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(
+      i,
+      {
+        componentKey: Z.componentKey,
+        direction: "bottom"
+      }
+    ), this._editPopup) : null;
+  }
+  hideEditPopup() {
+    var t;
+    this._editingLink$.next(null), (t = this._editPopup) == null || t.dispose();
+  }
+  showInfoPopup(t) {
+    var a, u, p, f;
+    const { linkId: i, unitId: n, rangeIndex: r } = t;
+    if (((a = this.showing) == null ? void 0 : a.linkId) === i && ((u = this.showing) == null ? void 0 : u.unitId) === n && this.showing.rangeIndex === r)
+      return;
+    this._infoPopup && this._infoPopup.dispose();
+    const o = this._docHyperLinkModel.getLink(n, i), c = this._univerInstanceService.getUnit(n, _.UNIVER_DOC);
+    if (!c || !o)
+      return;
+    const s = (f = (p = c.getBody()) == null ? void 0 : p.customRanges) == null ? void 0 : f[r];
+    if (this._showingLink$.next({ unitId: n, linkId: i, rangeIndex: r }), !!s)
+      return this._infoPopup = this._docCanvasPopupManagerService.attachPopupToRange(
+        {
+          collapsed: !1,
+          startOffset: s.startIndex,
+          endOffset: s.endIndex + 1
+        },
+        {
+          componentKey: Y.componentKey,
+          direction: "top",
+          closeOnSelfTarget: !0,
+          onClickOutside: () => {
+            this.hideInfoPopup();
+          }
+        }
+      ), this._infoPopup;
+  }
+  hideInfoPopup() {
+    var t;
+    this._showingLink$.next(null), (t = this._infoPopup) == null || t.dispose();
+  }
+};
+S = wt([
+  D(0, m(st)),
+  D(1, m(A)),
+  D(2, m(H)),
+  D(3, T),
+  D(4, O)
+], S);
+const Ee = {
+  type: z.COMMAND,
+  id: "docs.command.add-hyper-link",
+  async handler(e, t) {
+    if (!t)
+      return !1;
+    const { payload: i, unitId: n } = t, r = e.get(O), o = J.generateRandomId(), c = it(
+      e,
+      {
+        rangeId: o,
+        rangeType: M.HYPERLINK
+      }
+    );
+    if (c) {
+      const s = {
+        id: $e.id,
+        params: {
+          unitId: n,
+          link: {
+            payload: i,
+            id: o
+          }
+        }
+      };
+      return (await De([s, c], r)).result;
+    }
+    return !1;
+  }
+}, Pe = {
+  id: "docs.command.update-hyper-link",
+  type: z.COMMAND,
+  handler(e, t) {
+    return t ? e.get(O).executeCommand(He.id, t) : !1;
+  }
+}, Dt = "univer-docs-link-edit", Nt = "univer-docs-link-edit-title", Ut = "univer-docs-link-edit-close", Tt = "univer-docs-link-edit-buttons", $t = "univer-docs-link-edit-button", P = {
+  docsLinkEdit: Dt,
+  docsLinkEditTitle: Nt,
+  docsLinkEditClose: Ut,
+  docsLinkEditButtons: Tt,
+  docsLinkEditButton: $t
+};
+function Ht(e) {
+  return /^[a-zA-Z]+:\/\//.test(e);
+}
+function At(e) {
+  return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(e);
+}
+function jt(e) {
+  return Ht(e) ? e : At(e) ? `mailto://${e}` : `https://${e}`;
+}
+const Z = () => {
+  const e = g(S), t = g(ve), i = g(H), n = tt(e.editingLink$), r = g(O), o = g(T), c = g(je), s = g(A), [a, u] = le(""), [p, f] = le(!1), l = J.isLegalUrl(a), h = n ? o.getUnit(n.unitId, _.UNIVER_DOC) : o.getCurrentUnitForType(_.UNIVER_DOC);
+  ue(() => {
+    var re, oe, ce, se;
+    if (n) {
+      const I = n ? i.getLink(n.unitId, n.linkId) : null;
+      u((re = I == null ? void 0 : I.payload) != null ? re : "");
+      return;
+    }
+    const L = s.getActiveRange();
+    if (!L)
+      return;
+    const w = o.getCurrentUnitForType(_.UNIVER_DOC), ie = (ce = (oe = w == null ? void 0 : w.getBody()) == null ? void 0 : oe.customRanges) == null ? void 0 : ce.find((I) => Math.max(L.startOffset, I.startIndex) <= Math.min(L.endOffset - 1, I.endIndex));
+    if (w && ie) {
+      const I = i.getLink(w.getUnitId(), ie.rangeId);
+      u((se = I == null ? void 0 : I.payload) != null ? se : "");
+    }
+  }, [n, i, s, o]), ue(() => (c.blur(), () => {
+    c.focus();
+  }), [c]);
+  const C = () => {
+    e.hideEditPopup();
+  }, k = () => {
+    if (f(!0), !l || !h)
+      return;
+    const L = jt(a);
+    n ? r.executeCommand(Pe.id, {
+      unitId: h.getUnitId(),
+      payload: L,
+      linkId: n.linkId
+    }) : r.executeCommand(Ee.id, {
+      unitId: h.getUnitId(),
+      payload: L
+    }), e.hideEditPopup();
+  };
+  if (h)
+    return /* @__PURE__ */ d.createElement("div", { className: P.docsLinkEdit }, /* @__PURE__ */ d.createElement("div", { className: P.docsLinkEditTitle }, /* @__PURE__ */ d.createElement("span", null, t.t("docLink.edit.title")), /* @__PURE__ */ d.createElement(Ce, { className: P.docsLinkEditClose, onClick: C })), /* @__PURE__ */ d.createElement("div", null, /* @__PURE__ */ d.createElement(
+      Je,
+      {
+        label: t.t("docLink.edit.address"),
+        error: p && !l ? t.t("docLink.edit.addressError") : ""
+      },
+      /* @__PURE__ */ d.createElement(Qe, { value: a, onChange: u, autoFocus: !0 })
+    )), /* @__PURE__ */ d.createElement("div", { className: P.docsLinkEditButtons }, /* @__PURE__ */ d.createElement(
+      de,
+      {
+        className: P.docsLinkEditButton,
+        onClick: C
+      },
+      t.t("docLink.edit.cancel")
+    ), /* @__PURE__ */ d.createElement(
+      de,
+      {
+        disabled: !a,
+        className: P.docsLinkEditButton,
+        type: "primary",
+        onClick: k
+      },
+      t.t("docLink.edit.confirm")
+    )));
+};
+Z.componentKey = "docs-hyper-link-edit";
+const Me = "doc-hyper-link-icon";
+function Bt(e) {
+  return {
+    id: G.id,
+    group: Ye.TOOLBAR_LAYOUT,
+    type: Ze.BUTTON,
+    icon: Me,
+    title: "docLink.menu.tooltip",
+    tooltip: "docLink.menu.tooltip",
+    positions: [ae.TOOLBAR_START, ae.CONTEXT_MENU],
+    hidden$: We(e, _.UNIVER_DOC),
+    disabled$: new lt(function(t) {
+      const n = e.get(A).textSelection$.pipe(ut(16)).subscribe(() => {
+        t.next(Oe(e));
+      });
+      return () => {
+        n.unsubscribe();
+      };
+    })
+  };
+}
+const Kt = {
+  id: G.id,
+  binding: Ve.CTRL_COMMAND | Fe.K,
+  description: "docLink.menu.tooltip",
+  preconditions: at
+};
+var Vt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Yt = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? Ft(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && Vt(t, i, r), r;
+}, N = (e, t) => (i, n) => t(i, n, e);
+let U = class extends $ {
+  constructor(e, t, i, n, r, o) {
+    super(), this._config = e, this._componentManager = t, this._commandService = i, this._menuService = n, this._injector = r, this._shortcutService = o, this._initComponents(), this._initCommands(), this._initMenus(), this._initShortcut();
+  }
+  _initComponents() {
+    [
+      [Z, Z.componentKey],
+      [Y, Y.componentKey],
+      [ne, Me]
+    ].forEach(([e, t]) => {
+      this._componentManager.register(t, e);
+    });
+  }
+  _initCommands() {
+    [
+      Ee,
+      Pe,
+      Se,
+      G
+    ].forEach((e) => {
+      this._commandService.registerCommand(e);
+    });
+  }
+  _initShortcut() {
+    [Kt].forEach((e) => {
+      this._shortcutService.registerShortcut(e);
+    });
+  }
+  _initMenus() {
+    [Bt].forEach((e) => {
+      this.disposeWithMe(this._menuService.addMenuItem(e(this._injector), {}));
+    });
+  }
+};
+U = Yt([
+  Q(ee.Starting, U),
+  N(1, m(ze)),
+  N(2, O),
+  N(3, Ge),
+  N(4, m(me)),
+  N(5, qe)
+], U);
+var Zt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, zt = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? Wt(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && Zt(t, i, r), r;
+}, B = (e, t) => (i, n) => t(i, n, e);
+let V = class extends $ {
+  constructor(e, t, i, n) {
+    super(), this._commandService = e, this._univerInstanceService = t, this._docHyperLinkService = i, this._renderMangerService = n, this._initSelectionChange();
+  }
+  _initSelectionChange() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((e) => {
+        var t, i;
+        if (e.id === rt.id) {
+          const n = e.params, { unitId: r, ranges: o } = n, c = this._renderMangerService.getRenderById(r), s = c == null ? void 0 : c.with(Le).getSkeleton();
+          if ((s == null ? void 0 : s.getViewModel().getEditArea()) !== q.BODY) {
+            this._docHyperLinkService.hideInfoPopup(), this._docHyperLinkService.hideEditPopup();
+            return;
+          }
+          const u = this._univerInstanceService.getUnit(r, _.UNIVER_DOC), p = o[0];
+          if (p && u) {
+            const { startOffset: f, endOffset: l, collapsed: h } = p, C = (t = u.getBody()) == null ? void 0 : t.customRanges;
+            if (h) {
+              const k = (i = C == null ? void 0 : C.findIndex((L) => L.startIndex < f && L.endIndex > l - 1)) != null ? i : -1;
+              if (k > -1) {
+                const L = C[k];
+                this._docHyperLinkService.showInfoPopup({ unitId: r, linkId: L.rangeId, rangeIndex: k });
+                return;
+              }
+            } else if (C != null && C.find((k) => k.startIndex <= f && k.endIndex >= l - 1))
+              return;
+          }
+          this._docHyperLinkService.hideInfoPopup(), this._docHyperLinkService.hideEditPopup();
+        }
+      })
+    );
+  }
+};
+V = zt([
+  Q(ee.Ready, V),
+  B(0, O),
+  B(1, T),
+  B(2, m(S)),
+  B(3, te)
+], V);
+var Gt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Xt = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? qt(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && Gt(t, i, r), r;
+}, he = (e, t) => (i, n) => t(i, n, e);
+let X = class extends $ {
+  constructor(e, t, i) {
+    super(), this._context = e, this._docInterceptorService = t, this._hyperLinkService = i, this._init();
+  }
+  _init() {
+    this._docInterceptorService.intercept(ct.CUSTOM_RANGE, {
+      handler: (e, t, i) => {
+        if (!e)
+          return i(e);
+        const { unitId: n } = t, r = this._hyperLinkService.editing, { linkId: o, unitId: c } = r || {}, s = c === n && e.rangeId === o;
+        return i({
+          ...e,
+          active: s
+        });
+      }
+    });
+  }
+};
+X = Xt([
+  he(1, m(ot)),
+  he(2, m(S))
+], X);
+var Jt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, en = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? Qt(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && Jt(t, i, r), r;
+}, K = (e, t) => (i, n) => t(i, n, e);
+let F = class extends $ {
+  constructor(e, t, i, n) {
+    super(), this._docClipboardService = e, this._univerInstanceService = t, this._hyperLinkModel = i, this._textSelectionManagerService = n, this._initClipboard();
+  }
+  _initClipboard() {
+    this.disposeWithMe(this._docClipboardService.addClipboardHook({
+      onBeforePaste: (e) => {
+        var o, c;
+        const t = this._univerInstanceService.getCurrentUnitForType(_.UNIVER_DOC);
+        if (!t)
+          return e;
+        const i = this._textSelectionManagerService.getActiveRange(), n = (o = t.getBody()) == null ? void 0 : o.customRanges;
+        if (!(n != null && n.length))
+          return e;
+        if (i ? n.find(
+          (s) => s.rangeType === M.HYPERLINK && s.startIndex <= i.startOffset && s.endIndex >= i.endOffset - 1
+        ) : null) {
+          const { customRanges: s = [], ...a } = e, p = s.filter((l) => l.rangeType === M.HYPERLINK).map((l) => [l.startIndex, l.endIndex]).flat().sort((l, h) => l - h), f = {
+            ...a,
+            customRanges: s.filter((l) => l.rangeType !== M.HYPERLINK)
+          };
+          for (let l = 0; l < p.length; l++)
+            Ne(f, 1, p[l] - l);
+          return f;
+        } else {
+          const s = new Set(n.map((a) => a.rangeType === M.HYPERLINK && a.rangeId));
+          (c = e.customRanges) == null || c.forEach((a) => {
+            if (a.rangeType === M.HYPERLINK && s.has(a.rangeId)) {
+              const u = this._hyperLinkModel.getLink(t.getUnitId(), a.rangeId);
+              if (u) {
+                const p = J.generateRandomId();
+                this._hyperLinkModel.addLink(t.getUnitId(), {
+                  payload: u.payload,
+                  id: p
+                }), a.rangeId = p;
+              }
+            }
+          });
+        }
+        return e;
+      }
+    }));
+  }
+};
+F = en([
+  Q(ee.Ready, F),
+  K(0, m(dt)),
+  K(1, T),
+  K(2, m(H)),
+  K(3, m(A))
+], F);
+var xe = Object.defineProperty, tn = Object.getOwnPropertyDescriptor, nn = (e, t, i) => t in e ? xe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, rn = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? tn(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (n ? c(t, i, r) : c(r)) || r);
+  return n && r && xe(t, i, r), r;
+}, ge = (e, t) => (i, n) => t(i, n, e), Re = (e, t, i) => nn(e, typeof t != "symbol" ? t + "" : t, i);
+let W = class extends Te {
+  constructor(e = { menu: {} }, t, i) {
+    super(), this._config = e, this._injector = t, this._renderManagerSrv = i;
+  }
+  onStarting(e) {
+    [
+      [S],
+      [
+        U,
+        {
+          useFactory: () => this._injector.createInstance(U, this._config)
+        }
+      ],
+      [V],
+      [F]
+    ].forEach((i) => {
+      e.add(i);
+    });
+  }
+  onRendered() {
+    this._initRenderModule();
+  }
+  _initRenderModule() {
+    [X].forEach((e) => {
+      this._renderManagerSrv.registerRenderModule(_.UNIVER_DOC, e);
+    });
+  }
+};
+Re(W, "pluginName", pt);
+Re(W, "type", _.UNIVER_DOC);
+W = rn([
+  Ue(Ae),
+  ge(1, m(me)),
+  ge(2, te)
+], W);
+export {
+  W as UniverDocsHyperLinkUIPlugin
+};

package/lib/index.css

@@ -0,0 +1 @@
+.univer-doc-link{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:12px;box-shadow:var(--box-shadow-base);border-radius:8px;border:1px solid rgb(var(--grey-200));background:rgb(var(--color-white));max-width:328px;overflow:hidden}.univer-doc-link-type{height:20px;width:20px;font-size:16px;margin-right:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:rgb(var(--color-black))}.univer-doc-link-content{height:24px;display:flex;flex-direction:row;align-items:center;font-size:13px;line-height:20px;color:rgb(var(--blue-500));cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.univer-doc-link-content-error{color:rgb(var(--grey-500))}.univer-doc-link-url{flex:1;overflow:hidden;text-overflow:ellipsis}.univer-doc-link-operations{display:flex;flex-direction:row;justify-content:center;align-items:center;height:24px;flex-basis:auto;flex-grow:0;flex-shrink:0}.univer-doc-link-operation{width:24px;height:24px;margin-left:8px;font-size:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.univer-doc-link-operation-error{color:rgb(var(--grey-500))}.univer-doc-link-operation:hover{background:#ccc}.univer-docs-link-edit{border-radius:12px;border:1px solid rgb(var(--grey-200));background:rgb(var(--color-white));box-shadow:var(--box-shadow-base);padding:20px 24px;width:328px}.univer-docs-link-edit-title{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:24px;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-bottom:16px;color:rgb(var(--color-black))}.univer-docs-link-edit-close{width:16px;height:16px;font-size:16px;color:rgb(var(--grey-600));cursor:pointer}.univer-docs-link-edit-buttons{display:flex;flex-direction:row;justify-content:flex-end}.univer-docs-link-edit-button{margin-left:12px}

package/lib/locale/en-US.json

@@ -0,0 +1,21 @@
+{
+  "docLink": {
+    "edit": {
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "title": "Link",
+      "address": "Link address",
+      "placeholder": "Please input a link url",
+      "addressError": "Url is illegal!"
+    },
+    "info": {
+      "copy": "Copy",
+      "edit": "Edit",
+      "cancel": "Cancel link",
+      "coped": "Link copied to clipboard"
+    },
+    "menu": {
+      "tooltip": "Add link"
+    }
+  }
+}