Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Use ref instead of document.querySelector

This commit is contained in:
DrMint 2022-07-02 04:40:50 +02:00
parent b9570e903e
commit f62602f922
1 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/dev/editor.tsx
View File

@ -10,7 +10,7 @@ import { ToolTip } from "components/ToolTip";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { GetStaticPropsContext } from "next"; import { GetStaticPropsContext } from "next";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import TurndownService from "turndown"; import TurndownService from "turndown";
import { Icon } from "components/Ico"; import { Icon } from "components/Ico";
import { TOC } from "components/Markdown/TOC"; import { TOC } from "components/Markdown/TOC";
@ -24,6 +24,7 @@ export default function Editor(props: Props): JSX.Element {
const [markdown, setMarkdown] = useState(""); const [markdown, setMarkdown] = useState("");
const [converterOpened, setConverterOpened] = useState(false); const [converterOpened, setConverterOpened] = useState(false);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const transformationWrapper = useCallback( const transformationWrapper = useCallback(
( (
@ -33,10 +34,8 @@ export default function Editor(props: Props): JSX.Element {
selectedEnd: number selectedEnd: number
) => { prependLength: number; transformedValue: string } ) => { prependLength: number; transformedValue: string }
) => { ) => {
const textarea = if (textAreaRef.current) {
document.querySelector<HTMLTextAreaElement>("#editorTextArea"); const { value, selectionStart, selectionEnd } = textAreaRef.current;
if (textarea) {
const { value, selectionStart, selectionEnd } = textarea;
const { prependLength, transformedValue } = transformation( const { prependLength, transformedValue } = transformation(
value, value,
@ -44,12 +43,12 @@ export default function Editor(props: Props): JSX.Element {
selectionEnd selectionEnd
); );
textarea.value = transformedValue; textAreaRef.current.value = transformedValue;
handleInput(textarea.value); handleInput(textAreaRef.current.value);
textarea.focus(); textAreaRef.current.focus();
textarea.selectionStart = selectionStart + prependLength; textAreaRef.current.selectionStart = selectionStart + prependLength;
textarea.selectionEnd = selectionEnd + prependLength; textAreaRef.current.selectionEnd = selectionEnd + prependLength;
} }
}, },
[handleInput] [handleInput]
@ -109,10 +108,8 @@ export default function Editor(props: Props): JSX.Element {
properties?: Record<string, string>, properties?: Record<string, string>,
addInnerNewLines?: boolean addInnerNewLines?: boolean
) => { ) => {
const textarea = if (textAreaRef.current) {
document.querySelector<HTMLTextAreaElement>("#editorTextArea"); const { value, selectionStart, selectionEnd } = textAreaRef.current;
if (textarea) {
const { value, selectionStart, selectionEnd } = textarea;
if ( if (
value.slice(selectionStart - wrapper.length, selectionStart) === value.slice(selectionStart - wrapper.length, selectionStart) ===
@ -186,7 +183,6 @@ export default function Editor(props: Props): JSX.Element {
</div> </div>
<textarea <textarea
readOnly readOnly
id="htmlMdTextArea"
title="Ouput textarea" title="Ouput textarea"
onPaste={(event) => { onPaste={(event) => {
const turndownService = new TurndownService({ const turndownService = new TurndownService({
@ -428,7 +424,7 @@ export default function Editor(props: Props): JSX.Element {
<div> <div>
<h2>Editor</h2> <h2>Editor</h2>
<textarea <textarea
id="editorTextArea" ref={textAreaRef}
onInput={(event) => { onInput={(event) => {
const textarea = event.target as HTMLTextAreaElement; const textarea = event.target as HTMLTextAreaElement;
handleInput(textarea.value); handleInput(textarea.value);