@univerjs/docs-hyper-link-ui 0.6.7 → 0.6.9

package/lib/index.js

@@ -0,0 +1,769 @@
+var Ue = Object.defineProperty;
+var Te = (n, e, t) => e in n ? Ue(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var O = (n, e, t) => Te(n, typeof e != "symbol" ? e + "" : e, t);
+import { CommandType as R, ICommandService as k, generateRandomId as $e, CustomRangeType as E, IUniverInstanceService as L, UniverInstanceType as _, getBodySlice as Se, LocaleService as ye, Tools as He, BuildTextUtils as ve, Inject as I, Disposable as D, DOCS_ZEN_EDITOR_UNIT_ID_KEY as je, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as Ke, DependentOn as Ae, Injector as Fe, IConfigService as Be, Plugin as Ve, merge as Ye } from "@univerjs/core";
+import { UniverDocsHyperLinkPlugin as Ze } from "@univerjs/docs-hyper-link";
+import { IRenderManagerService as ze } from "@univerjs/engine-render";
+import { addCustomRangeBySelectionFactory as We, DocSelectionManagerService as w, replaceSelectionFactory as Ge, deleteCustomRangeFactory as qe, SetTextSelectionsOperation as Je, DocSkeletonManagerService as Qe, DocInterceptorService as Xe, DOC_INTERCEPTOR_POINT as en } from "@univerjs/docs";
+import { DocCanvasPopManagerService as nn, DocEventManagerService as tn, DocRenderController as rn, whenDocAndEditorFocused as on } from "@univerjs/docs-ui";
+import { BehaviorSubject as fe, distinctUntilChanged as sn, pairwise as cn, Observable as dn, debounceTime as an } from "rxjs";
+import { jsxs as P, jsx as v } from "react/jsx-runtime";
+import { FormLayout as he, Input as me, Button as Ie, Tooltip as K, MessageType as ln } from "@univerjs/design";
+import { useDependency as S, useObservable as xe, KeyCode as X, IMessageService as un, MetaKeys as pn, getMenuHiddenObservable as gn, MenuItemType as vn, ContextMenuPosition as fn, ContextMenuGroup as hn, RibbonStartGroup as mn, ComponentManager as In, IMenuManagerService as _n, IShortcutService as Cn } from "@univerjs/ui";
+import { useState as W, useEffect as Sn, forwardRef as N, useRef as yn, createElement as U } from "react";
+const xn = "docs-hyper-link-ui.config", _e = {}, ke = {
+  type: R.COMMAND,
+  id: "docs.command.add-hyper-link",
+  async handler(n, e) {
+    if (!e)
+      return !1;
+    const { payload: t, unitId: i, selections: r } = e, o = n.get(k), s = $e(), c = We(
+      n,
+      {
+        rangeId: s,
+        rangeType: E.HYPERLINK,
+        properties: {
+          url: t
+        },
+        unitId: i,
+        selections: r
+      }
+    );
+    return c ? o.syncExecuteCommand(c.id, c.params) : !1;
+  }
+}, Le = {
+  id: "docs.command.update-hyper-link",
+  type: R.COMMAND,
+  handler(n, e) {
+    var p;
+    if (!e)
+      return !1;
+    const { unitId: t, payload: i, segmentId: r, linkId: o } = e, s = n.get(k), c = n.get(L), u = n.get(w).getActiveTextRange(), f = c.getUnit(t, _.UNIVER_DOC);
+    if (!u || !f)
+      return !1;
+    const g = (p = Se(f.getSelfOrHeaderFooterModel(r).getBody(), u.startOffset, u.endOffset).textRuns) == null ? void 0 : p[0];
+    g && (g.ed = e.label.length + 1);
+    const d = Ge(n, {
+      unitId: t,
+      body: {
+        dataStream: `${e.label}`,
+        customRanges: [{
+          rangeId: o,
+          rangeType: E.HYPERLINK,
+          startIndex: 0,
+          endIndex: e.label.length + 1,
+          properties: {
+            url: i
+          }
+        }],
+        textRuns: g ? [g] : void 0
+      },
+      selection: {
+        startOffset: u.startOffset,
+        endOffset: u.endOffset,
+        collapsed: !1,
+        segmentId: r
+      }
+    });
+    return d ? s.syncExecuteCommand(d.id, d.params) : !1;
+  }
+};
+function kn(n) {
+  return /^[a-zA-Z]+:\/\//.test(n);
+}
+function Ln(n) {
+  return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(n);
+}
+function On(n) {
+  return kn(n) ? n : Ln(n) ? `mailto://${n}` : `https://${n}`;
+}
+const F = () => {
+  const n = S(y), e = S(ye), t = xe(n.editingLink$), i = S(k), r = S(L), o = S(w), [s, c] = W(""), [l, u] = W(""), [f, h] = W(!1), g = He.isLegalUrl(s), d = t ? r.getUnit(t.unitId, _.UNIVER_DOC) : r.getCurrentUnitForType(_.UNIVER_DOC);
+  Sn(() => {
+    var oe, se, ce, de, ae, le, ue, pe, ge;
+    const a = o.getActiveTextRange();
+    if (!a)
+      return;
+    if (t) {
+      const H = (oe = d == null ? void 0 : d.getSelfOrHeaderFooterModel(t.segmentId)) == null ? void 0 : oe.getBody(), j = (se = H == null ? void 0 : H.customRanges) == null ? void 0 : se.find((z) => (t == null ? void 0 : t.linkId) === z.rangeId && z.startIndex === t.startIndex && z.endIndex === t.endIndex);
+      d && j && (c((de = (ce = j.properties) == null ? void 0 : ce.url) != null ? de : ""), u(ve.transform.getPlainText(Se(H, j.startIndex, j.endIndex + 1).dataStream)));
+      return;
+    }
+    const x = (ae = d == null ? void 0 : d.getSelfOrHeaderFooterModel(a.segmentId)) == null ? void 0 : ae.getBody(), re = x ? a : null, $ = re && ((ue = ve.customRange.getCustomRangesInterestsWithSelection(re, (le = x == null ? void 0 : x.customRanges) != null ? le : [])) == null ? void 0 : ue[0]);
+    d && $ && c((ge = (pe = $ == null ? void 0 : $.properties) == null ? void 0 : pe.url) != null ? ge : "");
+  }, [d, t, o, r]);
+  const p = () => {
+    n.hideEditPopup();
+  }, C = () => {
+    if (h(!0), !g || !d)
+      return;
+    const a = On(s);
+    if (!t)
+      i.executeCommand(ke.id, {
+        unitId: d.getUnitId(),
+        payload: a
+      });
+    else {
+      if (!l)
+        return;
+      i.executeCommand(Le.id, {
+        unitId: d.getUnitId(),
+        payload: a,
+        linkId: t.linkId,
+        label: l,
+        segmentId: t.segmentId
+      });
+    }
+    n.hideEditPopup();
+  };
+  if (d)
+    return /* @__PURE__ */ P(
+      "div",
+      {
+        className: `
+              univer-box-border univer-w-[328px] univer-rounded-xl univer-border univer-border-solid
+              univer-border-gray-200 univer-bg-white univer-px-6 univer-py-5 univer-shadow
+            `,
+        children: [
+          /* @__PURE__ */ P("div", { children: [
+            t ? /* @__PURE__ */ v(
+              he,
+              {
+                label: e.t("docLink.edit.label"),
+                error: f && !l ? e.t("docLink.edit.labelError") : "",
+                children: /* @__PURE__ */ v(
+                  me,
+                  {
+                    value: l,
+                    onChange: u,
+                    autoFocus: !0,
+                    onKeyDown: (a) => {
+                      a.keyCode === X.ENTER && C();
+                    }
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ v(
+              he,
+              {
+                label: e.t("docLink.edit.address"),
+                error: f && !g ? e.t("docLink.edit.addressError") : "",
+                children: /* @__PURE__ */ v(
+                  me,
+                  {
+                    value: s,
+                    onChange: c,
+                    autoFocus: !0,
+                    onKeyDown: (a) => {
+                      a.keyCode === X.ENTER && C();
+                    }
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ P("div", { className: "univer-flex univer-justify-end univer-gap-3", children: [
+            /* @__PURE__ */ v(Ie, { onClick: p, children: e.t("docLink.edit.cancel") }),
+            /* @__PURE__ */ v(
+              Ie,
+              {
+                type: "primary",
+                disabled: !s,
+                onClick: C,
+                children: e.t("docLink.edit.confirm")
+              }
+            )
+          ] })
+        ]
+      }
+    );
+};
+F.componentKey = "docs-hyper-link-edit";
+var m = function() {
+  return m = Object.assign || function(n) {
+    for (var e, t = 1, i = arguments.length; t < i; t++) {
+      e = arguments[t];
+      for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (n[r] = e[r]);
+    }
+    return n;
+  }, m.apply(this, arguments);
+}, Pn = function(n, e) {
+  var t = {};
+  for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && e.indexOf(i) < 0 && (t[i] = n[i]);
+  if (n != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, i = Object.getOwnPropertySymbols(n); r < i.length; r++)
+      e.indexOf(i[r]) < 0 && Object.prototype.propertyIsEnumerable.call(n, i[r]) && (t[i[r]] = n[i[r]]);
+  return t;
+}, T = N(function(n, e) {
+  var t = n.icon, i = n.id, r = n.className, o = n.extend, s = Pn(n, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(i, " ").concat(r || "").trim(), l = yn("_".concat(wn()));
+  return Oe(t, "".concat(i), { defIds: t.defIds, idSuffix: l.current }, m({ ref: e, className: c }, s), o);
+});
+function Oe(n, e, t, i, r) {
+  return U(n.tag, m(m({ key: e }, bn(n, t, r)), i), (Rn(n, t).children || []).map(function(o, s) {
+    return Oe(o, "".concat(e, "-").concat(n.tag, "-").concat(s), t, void 0, r);
+  }));
+}
+function bn(n, e, t) {
+  var i = m({}, n.attrs);
+  t != null && t.colorChannel1 && i.fill === "colorChannel1" && (i.fill = t.colorChannel1), n.tag === "mask" && i.id && (i.id = i.id + e.idSuffix), Object.entries(i).forEach(function(o) {
+    var s = o[0], c = o[1];
+    s === "mask" && typeof c == "string" && (i[s] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  });
+  var r = e.defIds;
+  return !r || r.length === 0 || (n.tag === "use" && i["xlink:href"] && (i["xlink:href"] = i["xlink:href"] + e.idSuffix), Object.entries(i).forEach(function(o) {
+    var s = o[0], c = o[1];
+    typeof c == "string" && (i[s] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  })), i;
+}
+function Rn(n, e) {
+  var t, i = e.defIds;
+  return !i || i.length === 0 ? n : n.tag === "defs" && (!((t = n.children) === null || t === void 0) && t.length) ? m(m({}, n), { children: n.children.map(function(r) {
+    return typeof r.attrs.id == "string" && i && i.indexOf(r.attrs.id) > -1 ? m(m({}, r), { attrs: m(m({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
+  }) }) : n;
+}
+function wn() {
+  return Math.random().toString(36).substring(2, 8);
+}
+T.displayName = "UniverIcon";
+var Mn = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M4.1302 12.4251C4.25802 13.7417 5.36779 14.7708 6.71792 14.7708H11.7179C13.1539 14.7708 14.3179 13.6067 14.3179 12.1708V6.1708C14.3179 4.78586 13.2351 3.65383 11.8698 3.57517C11.742 2.25858 10.6323 1.22949 9.28213 1.22949H4.28213C2.84619 1.22949 1.68213 2.39355 1.68213 3.82949V9.82949C1.68213 11.2144 2.76497 12.3465 4.1302 12.4251ZM10.6583 3.5708H6.71792C5.28198 3.5708 4.11792 4.73486 4.11792 6.1708V11.22C3.4221 11.1387 2.88213 10.5471 2.88213 9.82949V3.82949C2.88213 3.05629 3.50893 2.42949 4.28213 2.42949H9.28213C9.96695 2.42949 10.5369 2.92119 10.6583 3.5708ZM13.1179 6.1708C13.1179 5.3976 12.4911 4.7708 11.7179 4.7708H6.71792C5.94472 4.7708 5.31792 5.3976 5.31792 6.1708V12.1708C5.31792 12.944 5.94472 13.5708 6.71792 13.5708H11.7179C12.4911 13.5708 13.1179 12.944 13.1179 12.1708V6.1708Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Pe = N(function(n, e) {
+  return U(T, Object.assign({}, n, {
+    id: "copy-single",
+    ref: e,
+    icon: Mn
+  }));
+});
+Pe.displayName = "CopySingle";
+var En = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M9.8816 1.97978C11.0177 0.843607 12.862 0.884962 14.0004 2.02342C15.1389 3.16188 15.1803 5.00612 14.0441 6.14228L11.399 8.78737C11.1608 9.02559 10.7746 9.02559 10.5363 8.78737C10.2981 8.54915 10.2981 8.16292 10.5363 7.9247L13.1814 5.2796C13.8195 4.64155 13.8217 3.57006 13.1378 2.8861C12.4538 2.20211 11.3823 2.20438 10.7443 2.84245L7.6976 5.88911L7.69317 5.89349C7.05959 6.53211 7.05894 7.60014 7.74132 8.28252C7.97954 8.52074 7.97954 8.90697 7.74132 9.14519C7.5031 9.38341 7.11687 9.38341 6.87865 9.14519C5.74016 8.00671 5.69884 6.16251 6.83497 5.02633L6.84021 5.02116L9.8816 1.97978Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M4.61426 7.2364C4.85248 6.99818 5.23871 6.99818 5.47693 7.2364C5.71515 7.47462 5.71515 7.86085 5.47693 8.09907L2.83183 10.7442C2.19375 11.3823 2.1915 12.4537 2.87547 13.1377C3.55945 13.8217 4.6309 13.8194 5.26899 13.1813L8.31566 10.1347C8.32262 10.1277 8.32971 10.121 8.33691 10.1144C8.34408 10.1064 8.3515 10.0986 8.35916 10.091C8.99721 9.45291 8.99949 8.38145 8.3155 7.69746C8.07728 7.45924 8.07728 7.07301 8.3155 6.83479C8.55372 6.59657 8.93995 6.59657 9.17817 6.83479C10.3166 7.97327 10.358 9.81748 9.22183 10.9536C9.21487 10.9606 9.20779 10.9673 9.20058 10.9739C9.19341 10.9819 9.18599 10.9897 9.17833 10.9973L6.13166 14.044C4.99548 15.1802 3.15127 15.1389 2.01279 14.0004C0.874362 12.8619 0.83297 11.0177 1.96916 9.8815L4.61426 7.2364Z" } }] }, ie = N(function(n, e) {
+  return U(T, Object.assign({}, n, {
+    id: "link-single",
+    ref: e,
+    icon: En
+  }));
+});
+ie.displayName = "LinkSingle";
+var Dn = { 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" } }] }, be = N(function(n, e) {
+  return U(T, Object.assign({}, n, {
+    id: "unlink-single",
+    ref: e,
+    icon: Dn
+  }));
+});
+be.displayName = "UnlinkSingle";
+var Nn = { 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" } }] }, Re = N(function(n, e) {
+  return U(T, Object.assign({}, n, {
+    id: "write-single",
+    ref: e,
+    icon: Nn
+  }));
+});
+Re.displayName = "WriteSingle";
+const we = {
+  type: R.COMMAND,
+  id: "docs.command.delete-hyper-link",
+  async handler(n, e) {
+    if (!e)
+      return !1;
+    const { unitId: t, linkId: i, segmentId: r } = e, o = n.get(k), s = qe(n, { unitId: t, rangeId: i, segmentId: r });
+    return s ? await o.syncExecuteCommand(s.id, s.params) : !1;
+  }
+}, Me = (n) => {
+  const e = n.get(w), t = n.get(L), i = e.getTextRanges();
+  if (!(i != null && i.length))
+    return !0;
+  const r = i[0];
+  return !!(!t.getCurrentUnitForType(_.UNIVER_DOC) || !r || r.collapsed);
+}, b = {
+  type: R.OPERATION,
+  id: "doc.operation.show-hyper-link-edit-popup",
+  handler(n, e) {
+    var s;
+    const t = e == null ? void 0 : e.link, i = n.get(L);
+    if (Me(n) && !t)
+      return !1;
+    const r = n.get(y), o = (t == null ? void 0 : t.unitId) || ((s = i.getCurrentUnitForType(_.UNIVER_DOC)) == null ? void 0 : s.getUnitId());
+    return o ? (r.showEditPopup(o, t), !0) : !1;
+  }
+}, ee = {
+  type: R.OPERATION,
+  id: "doc.operation.toggle-hyper-link-info-popup",
+  handler(n, e) {
+    const t = n.get(y);
+    return e ? (t.showInfoPopup(e), !0) : (t.hideInfoPopup(), !0);
+  }
+}, Ee = {
+  type: R.OPERATION,
+  id: "doc.operation.click-hyper-link",
+  handler(n, e) {
+    var u, f, h;
+    if (!e)
+      return !1;
+    const { unitId: t, linkId: i, segmentId: r } = e, s = n.get(L).getUnit(t, _.UNIVER_DOC), c = s == null ? void 0 : s.getSelfOrHeaderFooterModel(r).getBody(), l = (h = (f = (u = c == null ? void 0 : c.customRanges) == null ? void 0 : u.find((g) => g.rangeId === i && g.rangeType === E.HYPERLINK)) == null ? void 0 : f.properties) == null ? void 0 : h.url;
+    return l && window.open(l, "_blank", "noopener noreferrer"), !0;
+  }
+}, B = () => {
+  var C, a;
+  const n = S(y), e = S(k), t = S(un), i = S(ye), r = xe(n.showingLink$), o = S(L);
+  if (!r)
+    return null;
+  const { unitId: s, linkId: c, segmentId: l, startIndex: u, endIndex: f } = r, h = o.getUnit(s, _.UNIVER_DOC), g = h == null ? void 0 : h.getSelfOrHeaderFooterModel(l).getBody(), d = (C = g == null ? void 0 : g.customRanges) == null ? void 0 : C.find((x) => x.rangeId === c && x.rangeType === E.HYPERLINK && x.startIndex === u && x.endIndex === f);
+  if (!d)
+    return null;
+  const p = (a = d.properties) == null ? void 0 : a.url;
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: `
+              univer-box-border univer-flex univer-max-w-[328px] univer-items-center univer-justify-between
+              univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
+              univer-bg-white univer-p-3 univer-shadow
+            `,
+      onClick: () => {
+        n.hideInfoPopup();
+      },
+      children: [
+        /* @__PURE__ */ P(
+          "div",
+          {
+            className: `
+                  univer-flex univer-h-6 univer-flex-1 univer-cursor-pointer univer-items-center univer-truncate
+                  univer-text-[13px] univer-leading-5 univer-text-primary-500
+                `,
+            onClick: () => window.open(p, void 0, "noopener,noreferrer"),
+            children: [
+              /* @__PURE__ */ v(
+                "div",
+                {
+                  className: `
+                      univer-mr-2 univer-flex univer-size-5 univer-flex-[0_0_auto] univer-items-center
+                      univer-justify-center univer-text-base univer-text-black
+                    `,
+                  children: /* @__PURE__ */ v(ie, {})
+                }
+              ),
+              /* @__PURE__ */ v(K, { showIfEllipsis: !0, title: p, children: /* @__PURE__ */ v("span", { className: "univer-flex-1 univer-truncate", children: p }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ P("div", { className: "univer-flex univer-h-6 univer-flex-[0_0_auto] univer-items-center univer-justify-center", children: [
+          /* @__PURE__ */ v(
+            "div",
+            {
+              className: `
+                      univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center
+                      univer-justify-center univer-rounded univer-text-base
+                    `,
+              onClick: () => {
+                navigator.clipboard.writeText(p), t.show({
+                  content: i.t("docLink.info.coped"),
+                  type: ln.Info
+                });
+              },
+              children: /* @__PURE__ */ v(K, { placement: "bottom", title: i.t("docLink.info.copy"), children: /* @__PURE__ */ v(Pe, {}) })
+            }
+          ),
+          /* @__PURE__ */ v(
+            "div",
+            {
+              className: `
+                      univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center
+                      univer-justify-center univer-rounded univer-text-base
+                    `,
+              onClick: () => {
+                e.executeCommand(b.id, {
+                  link: r
+                });
+              },
+              children: /* @__PURE__ */ v(K, { placement: "bottom", title: i.t("docLink.info.edit"), children: /* @__PURE__ */ v(Re, {}) })
+            }
+          ),
+          /* @__PURE__ */ v(
+            "div",
+            {
+              className: `
+                      univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center
+                      univer-justify-center univer-rounded univer-text-base
+                    `,
+              onClick: () => {
+                e.executeCommand(we.id, {
+                  unitId: s,
+                  linkId: d.rangeId,
+                  segmentId: l
+                });
+              },
+              children: /* @__PURE__ */ v(K, { placement: "bottom", title: i.t("docLink.info.cancel"), children: /* @__PURE__ */ v(be, {}) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+B.componentKey = "univer.doc.link-info-popup";
+var Un = Object.getOwnPropertyDescriptor, Tn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? Un(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, G = (n, e) => (t, i) => e(t, i, n);
+let y = class extends D {
+  constructor(e, t, i) {
+    super();
+    O(this, "_editingLink$", new fe(null));
+    O(this, "_showingLink$", new fe(null));
+    O(this, "editingLink$", this._editingLink$.asObservable());
+    O(this, "showingLink$", this._showingLink$.asObservable());
+    O(this, "_editPopup", null);
+    O(this, "_infoPopup", null);
+    this._docCanvasPopupManagerService = e, this._textSelectionManagerService = t, this._univerInstanceService = i, this.disposeWithMe(() => {
+      this._editingLink$.complete(), this._showingLink$.complete();
+    });
+  }
+  get editing() {
+    return this._editingLink$.value;
+  }
+  get showing() {
+    return this._showingLink$.value;
+  }
+  showEditPopup(e, t) {
+    this._editPopup && this._editPopup.dispose(), this._editingLink$.next(t);
+    const i = this._textSelectionManagerService.getTextRanges({ unitId: e, subUnitId: e });
+    let r = i == null ? void 0 : i[i.length - 1];
+    if (t) {
+      const { segmentId: o, segmentPage: s, startIndex: c, endIndex: l } = t;
+      r = {
+        collapsed: !1,
+        startOffset: c,
+        endOffset: l + 1,
+        segmentId: o,
+        segmentPage: s
+      }, this._textSelectionManagerService.replaceDocRanges([{
+        startOffset: c,
+        endOffset: l + 1
+      }]);
+    }
+    return r ? (this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(
+      r,
+      {
+        componentKey: F.componentKey,
+        direction: "bottom"
+      },
+      e
+    ), this._editPopup) : null;
+  }
+  hideEditPopup() {
+    var e;
+    this._editingLink$.next(null), (e = this._editPopup) == null || e.dispose();
+  }
+  showInfoPopup(e) {
+    var u, f, h, g, d, p;
+    const { linkId: t, unitId: i, segmentId: r, segmentPage: o, startIndex: s, endIndex: c } = e;
+    if (!(((u = this.showing) == null ? void 0 : u.linkId) === t && ((f = this.showing) == null ? void 0 : f.unitId) === i && ((h = this.showing) == null ? void 0 : h.segmentId) === r && ((g = this.showing) == null ? void 0 : g.segmentPage) === o && ((d = this.showing) == null ? void 0 : d.startIndex) === s && ((p = this.showing) == null ? void 0 : p.endIndex) === c || (this._infoPopup && this._infoPopup.dispose(), !this._univerInstanceService.getUnit(i, _.UNIVER_DOC))))
+      return this._showingLink$.next({ unitId: i, linkId: t, segmentId: r, segmentPage: o, startIndex: s, endIndex: c }), this._infoPopup = this._docCanvasPopupManagerService.attachPopupToRange(
+        {
+          collapsed: !1,
+          startOffset: s,
+          endOffset: c + 1,
+          segmentId: r,
+          segmentPage: o
+        },
+        {
+          componentKey: B.componentKey,
+          direction: "top-center",
+          multipleDirection: "top",
+          onClickOutside: () => {
+            this.hideInfoPopup();
+          }
+        },
+        i
+      ), this._infoPopup;
+  }
+  hideInfoPopup() {
+    var e;
+    this._showingLink$.next(null), (e = this._infoPopup) == null || e.dispose();
+  }
+};
+y = Tn([
+  G(0, I(nn)),
+  G(1, I(w)),
+  G(2, L)
+], y);
+var $n = Object.getOwnPropertyDescriptor, Hn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? $n(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, q = (n, e) => (t, i) => e(t, i, n);
+let V = class extends D {
+  constructor(n, e, t) {
+    super(), this._commandService = n, this._univerInstanceService = e, this._docHyperLinkService = t, this._initSelectionChange();
+  }
+  _initSelectionChange() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((n) => {
+        var e, t, i;
+        if (n.id === Je.id) {
+          const r = n.params, { unitId: o, ranges: s, segmentId: c } = r, l = this._univerInstanceService.getUnit(o, _.UNIVER_DOC), u = s[0];
+          if (u && l) {
+            const { startOffset: f, endOffset: h, collapsed: g, segmentPage: d } = u, p = (t = (e = l.getSelfOrHeaderFooterModel(c)) == null ? void 0 : e.getBody()) == null ? void 0 : t.customRanges;
+            if (g) {
+              const C = (i = p == null ? void 0 : p.findIndex((a) => a.startIndex < f && a.endIndex > h - 1)) != null ? i : -1;
+              if (C > -1) {
+                const a = p[C];
+                this._docHyperLinkService.showInfoPopup({ unitId: o, linkId: a.rangeId, segmentId: c, segmentPage: d, startIndex: a.startIndex, endIndex: a.endIndex });
+                return;
+              }
+            } else if (p == null ? void 0 : p.find((a) => a.startIndex <= f && a.endIndex >= h - 1))
+              return;
+          }
+          this._docHyperLinkService.hideInfoPopup(), this._docHyperLinkService.hideEditPopup();
+        }
+      })
+    );
+  }
+};
+V = Hn([
+  q(0, k),
+  q(1, L),
+  q(2, I(y))
+], V);
+var jn = Object.getOwnPropertyDescriptor, Kn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? jn(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, M = (n, e) => (t, i) => e(t, i, n);
+let ne = class extends D {
+  constructor(n, e, t, i, r, o) {
+    super(), this._context = n, this._docEventManagerService = e, this._commandService = t, this._hyperLinkPopupService = i, this._docSkeletonManagerService = r, this._docSelectionManagerService = o, !(this._context.unitId === je || this._context.unitId === Ke) && (this._initHover(), this._initClick());
+  }
+  get _skeleton() {
+    return this._docSkeletonManagerService.getSkeleton();
+  }
+  _hideInfoPopup() {
+    this._hyperLinkPopupService.showing && this._commandService.executeCommand(
+      ee.id
+    );
+  }
+  _initHover() {
+    this.disposeWithMe(
+      this._docEventManagerService.hoverCustomRanges$.subscribe((n) => {
+        var r;
+        const e = n.find((o) => o.range.rangeType === E.HYPERLINK), t = this._docSelectionManagerService.getTextRanges(), i = t == null ? void 0 : t[0].segmentId;
+        if (((r = e == null ? void 0 : e.segmentId) != null ? r : "") !== i) {
+          this._hideInfoPopup();
+          return;
+        }
+        e ? this._commandService.executeCommand(
+          ee.id,
+          {
+            unitId: this._context.unitId,
+            linkId: e.range.rangeId,
+            segmentId: e.segmentId,
+            segmentPage: e.segmentPageIndex,
+            rangeId: e.range.rangeId,
+            startIndex: e.range.startIndex,
+            endIndex: e.range.endIndex
+          }
+        ) : this._hideInfoPopup();
+      })
+    );
+  }
+  _initClick() {
+    this.disposeWithMe(
+      this._docEventManagerService.clickCustomRanges$.subscribe((n) => {
+        const e = n.range;
+        e && this._commandService.executeCommand(
+          Ee.id,
+          {
+            unitId: this._context.unitId,
+            linkId: e.rangeId,
+            segmentId: n.segmentId
+          }
+        );
+      })
+    );
+  }
+};
+ne = Kn([
+  M(1, I(tn)),
+  M(2, k),
+  M(3, I(y)),
+  M(4, I(Qe)),
+  M(5, I(w))
+], ne);
+var An = Object.getOwnPropertyDescriptor, Fn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? An(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, J = (n, e) => (t, i) => e(t, i, n);
+let te = class extends D {
+  constructor(n, e, t, i) {
+    super(), this._context = n, this._docInterceptorService = e, this._hyperLinkService = t, this._docRenderController = i, this._init(), this._initReRender();
+  }
+  _init() {
+    this._docInterceptorService.intercept(en.CUSTOM_RANGE, {
+      handler: (n, e, t) => {
+        if (!n)
+          return t(n);
+        const { unitId: i, index: r } = e, o = this._hyperLinkService.showing;
+        if (!o)
+          return t({
+            ...n,
+            active: !1
+          });
+        const { linkId: s, unitId: c, startIndex: l, endIndex: u } = o, f = c === i && n.rangeId === s && r >= l && r <= u;
+        return t({
+          ...n,
+          active: f
+        });
+      }
+    });
+  }
+  _initReRender() {
+    this.disposeWithMe(this._hyperLinkService.showingLink$.pipe(
+      sn((n, e) => (n == null ? void 0 : n.linkId) === (e == null ? void 0 : e.linkId) && (n == null ? void 0 : n.unitId) === (e == null ? void 0 : e.unitId) && (n == null ? void 0 : n.startIndex) === (e == null ? void 0 : e.startIndex)),
+      cn()
+    ).subscribe(([n, e]) => {
+      e ? e.unitId === this._context.unitId && this._docRenderController.reRender(e.unitId) : n && n.unitId === this._context.unitId && this._docRenderController.reRender(n.unitId);
+    }));
+  }
+};
+te = Fn([
+  J(1, I(Xe)),
+  J(2, I(y)),
+  J(3, I(rn))
+], te);
+const De = "doc-hyper-link-icon";
+function Ce(n) {
+  return {
+    id: b.id,
+    type: vn.BUTTON,
+    icon: De,
+    title: "docLink.menu.tooltip",
+    tooltip: "docLink.menu.tooltip",
+    hidden$: gn(n, _.UNIVER_DOC),
+    disabled$: new dn(function(e) {
+      const i = n.get(w).textSelection$.pipe(an(16)).subscribe(() => {
+        e.next(Me(n));
+      });
+      return () => {
+        i.unsubscribe();
+      };
+    })
+  };
+}
+const Bn = {
+  id: b.id,
+  binding: pn.CTRL_COMMAND | X.K,
+  description: "docLink.menu.tooltip",
+  preconditions: on
+}, Vn = {
+  [mn.OTHERS]: {
+    [b.id]: {
+      order: 0,
+      menuItemFactory: Ce
+    }
+  },
+  [fn.MAIN_AREA]: {
+    [hn.DATA]: {
+      [b.id]: {
+        order: 0,
+        menuItemFactory: Ce
+      }
+    }
+  }
+};
+var Yn = Object.getOwnPropertyDescriptor, Zn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? Yn(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, A = (n, e) => (t, i) => e(t, i, n);
+let Y = class extends D {
+  constructor(n, e, t, i) {
+    super(), this._componentManager = n, this._commandService = e, this._menuManagerService = t, this._shortcutService = i, this._initComponents(), this._initCommands(), this._initMenus(), this._initShortcut();
+  }
+  _initComponents() {
+    [
+      [F, F.componentKey],
+      [B, B.componentKey],
+      [ie, De]
+    ].forEach(([n, e]) => {
+      this._componentManager.register(e, n);
+    });
+  }
+  _initCommands() {
+    [
+      ke,
+      Le,
+      we,
+      b,
+      ee,
+      Ee
+    ].forEach((n) => {
+      this._commandService.registerCommand(n);
+    });
+  }
+  _initShortcut() {
+    [Bn].forEach((n) => {
+      this._shortcutService.registerShortcut(n);
+    });
+  }
+  _initMenus() {
+    this._menuManagerService.mergeMenu(Vn);
+  }
+};
+Y = Zn([
+  A(0, I(In)),
+  A(1, k),
+  A(2, _n),
+  A(3, Cn)
+], Y);
+const zn = "DOC_HYPER_LINK_UI_PLUGIN";
+var Wn = Object.defineProperty, Gn = Object.getOwnPropertyDescriptor, qn = (n, e, t) => e in n ? Wn(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, Jn = (n, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? Gn(e, t) : e, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (r = s(r) || r);
+  return r;
+}, Q = (n, e) => (t, i) => e(t, i, n), Ne = (n, e, t) => qn(n, typeof e != "symbol" ? e + "" : e, t);
+let Z = class extends Ve {
+  constructor(n = _e, e, t, i) {
+    super(), this._config = n, this._injector = e, this._renderManagerSrv = t, this._configService = i;
+    const { menu: r, ...o } = Ye(
+      {},
+      _e,
+      this._config
+    );
+    r && this._configService.setConfig("menu", r, { merge: !0 }), this._configService.setConfig(xn, o);
+  }
+  onStarting() {
+    [
+      [y],
+      [Y],
+      [V]
+    ].forEach((e) => {
+      this._injector.add(e);
+    }), this._injector.get(Y);
+  }
+  onReady() {
+    this._injector.get(V);
+  }
+  onRendered() {
+    this._initRenderModule();
+  }
+  _initRenderModule() {
+    [
+      [te],
+      [ne]
+    ].forEach((n) => {
+      this._renderManagerSrv.registerRenderModule(_.UNIVER_DOC, n);
+    });
+  }
+};
+Ne(Z, "pluginName", zn);
+Ne(Z, "type", _.UNIVER_DOC);
+Z = Jn([
+  Ae(Ze),
+  Q(1, I(Fe)),
+  Q(2, ze),
+  Q(3, Be)
+], Z);
+export {
+  Z as UniverDocsHyperLinkUIPlugin
+};

package/lib/locale/en-US.js

@@ -0,0 +1,26 @@
+const l = {
+  docLink: {
+    edit: {
+      confirm: "Confirm",
+      cancel: "Cancel",
+      title: "Link",
+      address: "Link",
+      placeholder: "Please input a link url",
+      addressError: "Url is illegal!",
+      label: "Label",
+      labelError: "Please input label of link"
+    },
+    info: {
+      copy: "Copy",
+      edit: "Edit",
+      cancel: "Cancel link",
+      coped: "Link copied to clipboard"
+    },
+    menu: {
+      tooltip: "Add link"
+    }
+  }
+};
+export {
+  l as default
+};

package/lib/locale/fa-IR.js

@@ -0,0 +1,26 @@
+const e = {
+  docLink: {
+    edit: {
+      confirm: "تایید",
+      cancel: "انصراف",
+      title: "لینک",
+      address: "لینک",
+      placeholder: "لطفا یک آدرس لینک وارد کنید",
+      addressError: "آدرس غیرمجاز است!",
+      label: "برچسب",
+      labelError: "لطفا برچسب لینک را وارد کنید"
+    },
+    info: {
+      copy: "کپی",
+      edit: "ویرایش",
+      cancel: "لینک را لغو کنید",
+      coped: "لینک به کلیپ بورد کپی شد"
+    },
+    menu: {
+      tooltip: "افزودن لینک"
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/fr-FR.js

@@ -0,0 +1,26 @@
+const e = {
+  docLink: {
+    edit: {
+      confirm: "Confirmer",
+      cancel: "Annuler",
+      title: "Lien",
+      address: "Link",
+      placeholder: "Veuillez entrer un lien",
+      addressError: "L'url est illégal!",
+      label: "Label",
+      labelError: "Veuillez entrer le label du lien"
+    },
+    info: {
+      copy: "Copy",
+      edit: "Edit",
+      cancel: "Cancel link",
+      coped: "Link copied to clipboard"
+    },
+    menu: {
+      tooltip: "Add link"
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/ru-RU.js

@@ -0,0 +1,26 @@
+const e = {
+  docLink: {
+    edit: {
+      confirm: "Подтвердить",
+      cancel: "Отменить",
+      title: "Ссылка",
+      address: "Cсылки",
+      label: "Текст",
+      labelError: "Введите текст ссылки",
+      placeholder: "Пожалуйста, введите URL ссылки",
+      addressError: "URL некорректен!"
+    },
+    info: {
+      copy: "Копировать",
+      edit: "Редактировать",
+      cancel: "Отменить ссылку",
+      coped: "Link copied to clipboard"
+    },
+    menu: {
+      tooltip: "Добавить ссылку"
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/vi-VN.js

@@ -0,0 +1,26 @@
+const n = {
+  docLink: {
+    edit: {
+      confirm: "Xác nhận",
+      cancel: "Hủy",
+      title: "Liên kết",
+      address: "Liên kết",
+      label: "Nhãn",
+      labelError: "Vui lòng nhập nhãn liên kết",
+      placeholder: "Vui lòng nhập liên kết hợp lệ",
+      addressError: "Vui lòng nhập liên kết hợp lệ"
+    },
+    info: {
+      copy: "Sao chép",
+      edit: "Chỉnh sửa",
+      cancel: "Hủy liên kết",
+      coped: "Liên kết đã được sao chép vào clipboard"
+    },
+    menu: {
+      tooltip: "Thêm liên kết"
+    }
+  }
+};
+export {
+  n as default
+};

package/lib/locale/zh-CN.js

@@ -0,0 +1,26 @@
+const e = {
+  docLink: {
+    edit: {
+      confirm: "确认",
+      cancel: "取消",
+      title: "链接",
+      address: "链接",
+      label: "文本",
+      labelError: "请输入链接文本",
+      placeholder: "请输入合法的链接",
+      addressError: "请输入合法的链接"
+    },
+    info: {
+      copy: "复制",
+      edit: "编辑",
+      cancel: "取消链接",
+      coped: "链接已被复制到剪贴板"
+    },
+    menu: {
+      tooltip: "添加链接"
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/locale/zh-TW.js

@@ -0,0 +1,26 @@
+const e = {
+  docLink: {
+    edit: {
+      confirm: "確認",
+      cancel: "取消",
+      title: "連結",
+      address: "連結",
+      label: "文本",
+      labelError: "请输入链接文本",
+      placeholder: "請輸入合法的連結",
+      addressError: "請輸入合法的連結"
+    },
+    info: {
+      copy: "複製",
+      edit: "編輯",
+      cancel: "取消連結",
+      coped: "連結已複製到剪貼板"
+    },
+    menu: {
+      tooltip: "新增連結"
+    }
+  }
+};
+export {
+  e as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@univerjs/docs-hyper-link-ui",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "private": false,
   "description": "Univer thread comment plugin",
   "author": "DreamNum <developer@univer.ai>",
@@ -48,18 +48,18 @@
     "lib"
   ],
   "peerDependencies": {
-    "react": ">=16.9.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {
-    "@univerjs/icons": "^0.2.28",
-    "@univerjs/core": "0.6.7",
-    "@univerjs/docs": "0.6.7",
-    "@univerjs/design": "0.6.7",
-    "@univerjs/docs-hyper-link": "0.6.7",
-    "@univerjs/engine-render": "0.6.7",
-    "@univerjs/docs-ui": "0.6.7",
-    "@univerjs/ui": "0.6.7"
+    "@univerjs/icons": "^0.2.31",
+    "@univerjs/core": "0.6.9",
+    "@univerjs/docs": "0.6.9",
+    "@univerjs/docs-ui": "0.6.9",
+    "@univerjs/design": "0.6.9",
+    "@univerjs/docs-hyper-link": "0.6.9",
+    "@univerjs/engine-render": "0.6.9",
+    "@univerjs/ui": "0.6.9"
   },
   "devDependencies": {
     "postcss": "^8.5.3",
@@ -69,7 +69,7 @@
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
     "vitest": "^3.0.9",
-    "@univerjs-infra/shared": "0.6.7"
+    "@univerjs-infra/shared": "0.6.9"
   },
   "scripts": {
     "test": "vitest run",