Spaces:
Running
Running
File size: 3,426 Bytes
79278ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import React, { useRef, useEffect, useCallback, MouseEventHandler } from "react";
import ContentEditable, { ContentEditableEvent } from "react-contenteditable";
import "./Editable.scss";
import { EditableProps } from "./Editable.interface";
const Editable: React.FC<EditableProps> = ({
className,
placeholder,
content,
onContentChange,
handleClick: handleContentClick,
}) => {
const editableRef = useRef<HTMLElement>(null);
const lastCaretPosition = useRef<number>(0);
const getCaretPosition = (el: HTMLElement): number => {
let caretPosition = 0;
const selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const preRange = range.cloneRange();
preRange.selectNodeContents(el);
preRange.setEnd(range.endContainer, range.endOffset);
caretPosition = preRange.toString().length;
}
return caretPosition;
};
const setCaretPosition = useCallback((offset: number) => {
const selection = window.getSelection();
const range = document.createRange();
const el = editableRef.current;
let localOffset = offset;
el?.childNodes.forEach((element) => {
if (!element.textContent?.length) {
element.textContent = "";
}
if (localOffset <= element.textContent?.length && localOffset >= 0) {
range.setStart(element.childNodes[0] ?? element, localOffset);
range.collapse(true);
selection?.removeAllRanges();
selection?.addRange(range);
localOffset -= element.textContent?.length;
return;
} else if (localOffset >= 0) {
localOffset -= element.textContent?.length;
}
});
}, []);
const handleChange = (event: ContentEditableEvent) => {
const newText = event.currentTarget.innerText;
const currentCaretPosition = getCaretPosition(editableRef.current!);
if (newText.length <= 500) {
onContentChange(newText);
lastCaretPosition.current = currentCaretPosition;
} else {
const trimmedText = newText.substring(0, 500);
event.currentTarget.innerText = trimmedText;
onContentChange(trimmedText);
lastCaretPosition.current = currentCaretPosition;
setCaretPosition(500);
}
};
const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {
lastCaretPosition.current = getCaretPosition(editableRef.current!);
if (handleContentClick) handleContentClick(event);
};
useEffect(() => {
const contentEditable = editableRef.current;
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === "childList") {
mutation.removedNodes.forEach((node) => {
if (node instanceof HTMLElement && node.tagName === "A") {
setCaretPosition(lastCaretPosition.current);
}
});
}
});
});
if (contentEditable) {
observer.observe(contentEditable, { childList: true, subtree: true });
}
return () => {
observer.disconnect();
};
}, [setCaretPosition]);
return (
<ContentEditable
innerRef={editableRef}
className={`editable ${className}`}
onChange={handleChange}
onBlur={() => {}}
html={content.replaceAll("@@@", "")}
data-placeholder={placeholder}
onClick={handleClick}
/>
);
};
export default Editable;
|