154 lines
3.3 KiB
JavaScript
154 lines
3.3 KiB
JavaScript
"use strict";
|
|
|
|
var __assign = this && this.__assign || function () {
|
|
__assign = Object.assign || function (t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
|
|
for (var p in s) {
|
|
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
}
|
|
}
|
|
|
|
return t;
|
|
};
|
|
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
|
|
var __read = this && this.__read || function (o, n) {
|
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
if (!m) return o;
|
|
var i = m.call(o),
|
|
r,
|
|
ar = [],
|
|
e;
|
|
|
|
try {
|
|
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
|
|
ar.push(r.value);
|
|
}
|
|
} catch (error) {
|
|
e = {
|
|
error: error
|
|
};
|
|
} finally {
|
|
try {
|
|
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
} finally {
|
|
if (e) throw e.error;
|
|
}
|
|
}
|
|
|
|
return ar;
|
|
};
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var react_1 = require("react");
|
|
|
|
var dom_1 = require("../utils/dom");
|
|
|
|
var initRect = {
|
|
top: NaN,
|
|
left: NaN,
|
|
bottom: NaN,
|
|
right: NaN,
|
|
height: NaN,
|
|
width: NaN
|
|
};
|
|
|
|
var initState = __assign({
|
|
text: ''
|
|
}, initRect);
|
|
|
|
function getRectFromSelection(selection) {
|
|
if (!selection) {
|
|
return initRect;
|
|
}
|
|
|
|
if (selection.rangeCount < 1) {
|
|
return initRect;
|
|
}
|
|
|
|
var range = selection.getRangeAt(0);
|
|
|
|
var _a = range.getBoundingClientRect(),
|
|
height = _a.height,
|
|
width = _a.width,
|
|
top = _a.top,
|
|
left = _a.left,
|
|
right = _a.right,
|
|
bottom = _a.bottom;
|
|
|
|
return {
|
|
height: height,
|
|
width: width,
|
|
top: top,
|
|
left: left,
|
|
right: right,
|
|
bottom: bottom
|
|
};
|
|
}
|
|
/**
|
|
* 获取用户选取的文本或当前光标插入的位置
|
|
* */
|
|
|
|
|
|
function useTextSelection(target) {
|
|
var _a = __read(react_1.useState(initState), 2),
|
|
state = _a[0],
|
|
setState = _a[1];
|
|
|
|
var stateRef = react_1.useRef(state);
|
|
stateRef.current = state;
|
|
react_1.useEffect(function () {
|
|
// 获取 target 需要放在 useEffect 里，否则存在组件未加载好的情况而导致元素获取不到
|
|
var el = dom_1.getTargetElement(target, document);
|
|
|
|
if (!el) {
|
|
return function () {};
|
|
}
|
|
|
|
var mouseupHandler = function mouseupHandler() {
|
|
var selObj = null;
|
|
var text = '';
|
|
var rect = initRect;
|
|
if (!window.getSelection) return;
|
|
selObj = window.getSelection();
|
|
text = selObj ? selObj.toString() : '';
|
|
|
|
if (text) {
|
|
rect = getRectFromSelection(selObj);
|
|
setState(__assign(__assign(__assign({}, state), {
|
|
text: text
|
|
}), rect));
|
|
}
|
|
}; // 任意点击都需要清空之前的 range
|
|
|
|
|
|
var mousedownHandler = function mousedownHandler() {
|
|
if (!window.getSelection) return;
|
|
|
|
if (stateRef.current.text) {
|
|
setState(__assign({}, initState));
|
|
}
|
|
|
|
var selObj = window.getSelection();
|
|
if (!selObj) return;
|
|
selObj.removeAllRanges();
|
|
};
|
|
|
|
el.addEventListener('mouseup', mouseupHandler);
|
|
document.addEventListener('mousedown', mousedownHandler);
|
|
return function () {
|
|
el.removeEventListener('mouseup', mouseupHandler);
|
|
document.removeEventListener('mousedown', mousedownHandler);
|
|
};
|
|
}, [typeof target === 'function' ? undefined : target]);
|
|
return state;
|
|
}
|
|
|
|
exports["default"] = useTextSelection; |