Hej dostaje blad taki jak w tytule gdy robie nastepujaca operacje: mam komponent w React ktory wglada mniej wiecej tak:
const [isFullscreenMode, setIsFullscreenMode] = useState(false);
return (
<div
id="editor-container"
className={`mw-textarea ${
isFullscreenMode ? "mw-editor--fullscreen" : ""
}`}
>
<MenuBar
editor={editor as Editor}
isCodeViewMode={isCodeViewMode}
setIsCodeViewMode={setIsCodeViewMode}
isFullscreenMode={isFullscreenMode}
setIsFullscreenMode={setIsFullscreenMode}
/>
<div
ref={contentRef}
id="editor-content"
className={`s-prose ProseMirror ${!isCodeViewMode ? "" : "d-none"}`}
>
<EditorContent editor={editor} />
</div>
{isCodeViewMode && (
<div
className={`mw-editor__codemirror ${isCodeViewMode ? "" : "d-none"}`}
>
<textarea ref={cmTextAreaRef}></textarea>
</div>
)}
{!isCodeViewMode && !isFullscreenMode && (
<Resizer targetId={"editor-content"} />
)}
</div>
);
Czyli mam state isFullscreenMode w zaleznosci od ktorego pokazywany jest kompnent Resizer lub nie. Poadje ten komponent i setter do MenuBar w ktorym z kolei mam przycisk ktory zmienia wartosc isFullscreenMode. Wyglada on tak:
export const FullscreenButton = ({
editor,
isFullscreenMode,
setIsFullscreenMode,
}: Props) => {
return (
<MenuButton
icon={!isFullscreenMode ? <ScreenFullIcon /> : <ScreenNormalIcon />}
command={() => {
setIsFullscreenMode(!isFullscreenMode);
return true; //editor.commands.focus();
}}
active={isFullscreenMode}
tooltip={{
content: <TooltipContent content="Fullscreen" />,
}}
/>
);
};
Sam Resizer wyglada tak:
import { useRef } from "react";
// ! had to manage this state outside of the component because `useState` isn't fast enough and creates problem cause
// ! the function is getting old data even though new data is set by `useState` before the execution of function
let lastClientX: number;
type Props = {
targetId: string;
};
export const Resizer = ({ targetId }: Props) => {
let resizerRef = useRef<HTMLDivElement>(null);
let currentPosition: any;
let mouseDown: any;
let lastClientY: any;
function touchMouseStart(e: any) {
e.preventDefault();
// if (!ref.current) return;
mouseDown = true;
if (e.touches) currentPosition = e.touches[0].clientY;
else currentPosition = e.clientY;
lastClientY = document.getElementById(targetId)?.offsetHeight;
// console.log("LastClientY");
// console.log(lastClientY);
// document.addEventListener("mousemove", documentHorizontalMouseMove);
// document.addEventListener("mouseup", stopHorizontalResize);
}
function touchMouseEnd(e: any) {
e.preventDefault();
mouseDown = false;
lastClientY = document.getElementById(targetId)?.offsetHeight;
// lastClientY = ref.current?.offsetHeight;
// console.log("LastClientY");
// console.log(lastClientY);
}
function touchMouseMove(e: any) {
e.preventDefault();
if (!mouseDown) return;
if (e.touches) var pozycja = e.touches[0].clientY;
else var pozycja = e.clientY;
// console.log("pozycja");
// console.log(pozycja);
var wysokosc = pozycja - currentPosition;
// console.log("wysokosc");
// console.log(wysokosc);
document.getElementById(targetId)!.style.height =
lastClientY + wysokosc + "px";
}
return (
<div
ref={resizerRef}
className="mw-resizer"
onPointerDown={(e: any) =>
resizerRef.current?.setPointerCapture(e.pointerId)
}
onPointerUp={(e: any) =>
resizerRef.current?.releasePointerCapture(e.pointerId)
}
onMouseDown={touchMouseStart}
onMouseUp={touchMouseEnd}
onTouchStart={touchMouseStart}
onTouchEnd={touchMouseEnd}
onTouchCancel={touchMouseEnd}
onClick={(e) => e.preventDefault()}
onTouchMove={touchMouseMove}
onMouseMove={touchMouseMove}
></div>
);
};
Gdy klikam go po raz pierwszy to poprawnie przechodze do trybu pelnoekranowego i znika Resizer. Gdy jednak klikam go ponownie to cala apliakcja sie wywala i dostaje blad z tytulu, dokladnie:
. Czy ktos jest mi w stanie pomoc po zamieszczonych fragmentach kodu?
