선생님 혹시 인스타그램 처럼 게시물에 해시태그다는거요

[정중식]

textarea처럼 막 게시글에 "글 적다가 #선생님 " 이런식으로하고 #선생님 이 부분만 색깔다르게하게끔 구현을 하고싶은데..

import { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: none;
  min-height: 168px;
  max-height: 168px;
  outline: none;</pre>
<pre>  span.hashtag {
    position: relative;
    z-index: 10;
    color: rgb(224, 241, 255);
  }
  span.mention {
    position: relative;
    z-index: 10;
    background: #69c;
    color: white;
    border-radius: 0.5em;
    padding: 0 0.2em;
    margin: 0 -0.2em;
  }
`;

const Output = styled.div`
  padding-top: 2rem;
  text-align: left;
  width: 100%;
  height: auto;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: visible;</pre>
<pre>  span.hashtag {
    position: relative;
    z-index: 10;
    color: rgb(224, 241, 255);
  }
  span.mention {
    position: relative;
    z-index: 10;
    background: #69c;
    color: white;
    border-radius: 0.5em;
    padding: 0 0.2em;
    margin: 0 -0.2em;
  }
`;

const Input = styled.div`
  padding-top: 2rem;
  text-align: left;
  width: 100%;
  height: auto;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: visible;
  border: none;
  outline: none;
`;

const Editor = () => {
  const [value, setValue] = useState('');

  const handleChange = (e: React.FormEvent<HTMLDivElement>) => {
    const str = e.currentTarget.innerText
      .replace(/(<)/gi, '&lt;')
      .replace(/(<)/gi, '&lg;')
      .replace(/(?:\r\n|\n\r|\r|\n)/g, '\n<br />')
      .replace(/#(.+?)(?=[\s.,:,]|$)/g, "<span class='hashtag'>#$1</span>")
      .replace(/@(.+?)(?=[\s.,:,]|$)/g, "<span class='mention'>@$1</span>")
      .replace(
        /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/g,
        '<span>$1</span>'
      );

    setValue(str);
  };

  return (
    <Container>
      <Output id='output' dangerouslySetInnerHTML={{ __html: value }}></Output>
      <Input contentEditable={true} onInput={(e) => handleChange(e)}></Input>
    </Container>
  );
};

export default Editor;

이런식으로 일단 구현은했습니다.

잘안보이는데 암튼 구현은됬어요 근데 문제는
엔터를 막 눌러요막막마막막마가막 누르면

결국엔 둘로 쪼개져버려요 이런식으로요

마지막부분 둘로 쪼개진거 보이실까요?

      <Output id='output' dangerouslySetInnerHTML={{ __html: value }}></Output>
      <Input contentEditable={true} onInput={(e) => handleChange(e)}></Input>
 
이 두개 css 포지션앱솔루트 줘서 똑같이 겹쳤는데 왜 이렇게 쪼개지는현상이 발생하는걸까요... 진짜 도무지모르겠어요 ㅠㅠ

[정중식]

선생님 질문을 좀 수정하겠습니다. 일단 원인은 엔터였습니다.
f12로 확인결과 엔터를 누르면 
입력하는 div인 <Input />태그는 <div><br/></div> 이렇게되고,
입력받은걸 출력하는 div인 <Output />태그는 <br/> 이렇게되다보니까 

결과가 이상하게 둘로 쪼개는 현상이 발생했던거같습니다.

그래서 <Input  onKeyDown={handleKeyDown}/> 으로 엔터하면 뭐 <div><br/></div>를 <br/>로 바꿔줘야겠는데요..

  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.keyCode === 13) {
      e.preventDefault();
 // 여기에 이제 적어야함
      return false;
    }
  };

저부분에 뭘 적어야하나요?... 혹시 아실까요?..

[codingapple]

외부라이브러리면 div로 감싸는걸 막는기능을 써보거나 엔터치면 div태그 찾아서 div안에 있는것만 남기라고 하면 될수도요
근데 div같은게 있다고 span태그가 안된다는게 뭔가 이상합니다

[정중식]

해결했어요 선생님 감사합니다.
제가 e.target.value값을 중복해서 하고있어서 그런거였습니다.

선생님 뜬금없지만 저 힘내라고 한마디만 해주시면안될까요? 요즘 좀 힘든일이 많았네요..

[codingapple]

힘을내도록합시다

[글쓴이]

글