Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/#053 블럭내 복사 붙여넣기 구현 #192

Merged
merged 48 commits into from
Nov 26, 2024
Merged

Feature/#053 블럭내 복사 붙여넣기 구현 #192

merged 48 commits into from
Nov 26, 2024

Conversation

Ludovico7
Copy link
Collaborator

📝 변경 사항

🔍 변경 사항 설명

복사, 붙여넣기, 한번에 삭제 모두 브라우저 기본 이벤트를 막습니다.

  • 텍스트 복사: 드래그 해서 선택된 텍스트의 노드를 찾습니다. 선택된 노드들의 스타일 정보가 있으면 스타일 정보를 포함한 메타데이터를 클립보드에 저장합니다(text/plain이 아닌 객체 형식)
  • 텍스트 붙여넣기
    • 일반 텍스트일 경우: text/plain에 저장되어 있는 텍스트 정보를 한글자씩 삽입 연산을 서버로 전송합니다.
    • 스타일 텍스트일 경우: 클립보드에 저장한 객체를 가지고 와서 각 노드별로 value와 스타일을 적용한 텍스트 삽입 연산을 서버에 전송합니다.
  • 텍스트 한번에 삭제: 드래그 해서 선택된 텍스트의 노드를 찾습니다. 선택된 노드들을 하나씩 삭제 연산처리해서 서버로 전송합니다.

🙏 질문 사항

  • 현재 색상 관련된 데이터가 클라이언트간에 통신이 안되고 있는 것 같습니다. 이 부분은 확인해보고 수정하겠습니다.
  • 붙여넣기 할때, 특정 조건에서 캐럿이 이전 위치에 계속 있는 문제가 있는 것 같은데 어떤 조건에서 일어나는 문제인지는 아직 확인하지 못했습니다.

혹시 문제되는 부분 발견하시면 피드백 부탁드립니다!

📷 스크린샷 (선택)

2024-11-26.3.04.36.mov

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

@Ludovico7
feat: Char style 속성 추가
ac12282
@Ludovico7
build: dompurify 패키지 의존성 추가
5563a35
@Ludovico7
feat: 텍스트 타입 카테고리 추가
6427329
@Ludovico7
feat: useBlockOption 서윤님 피드백 반영
8a3543f
@Ludovico7
feat: 텍스트 옵션 모달 구현
35c6e55
@Ludovico7
feat: 공통 style 속성 추가
2dc8e0b
@Ludovico7
feat: 텍스트 드래그 했을 때 선택된 텍스트들 찾는 로직 추가
189d3e9
@Ludovico7
feat: sendCharUpdateOperation 소켓 연결 추가
20787b9
@Ludovico7
feat: 서버에서 스타일 변경 처리 추가
c2fd847
@Ludovico7
feat: 구현한 텍스트 수정 로직 에디터와 블록 구조에 반영
07315a0
@Ludovico7
feat: 스타일 태그를 위한 텍스트 렌더링 방식 변경
ea97d1a 
- 기존에는 read를 통해 일반 텍스트로 모두 변경
- 스타일 태그 적용을 위해 배열을 순회하며 스타일 속성이 있는 글자는 스타일 태그로 묶어서 innerhtml로 생성
@Ludovico7
fix: currentBlock과 currentCaret 에디터에서 값을 입력할때마다 갱신
a70d430
@Ludovico7
feat: 텍스트 감지 방식 변경
90d0e2d 
- getTextOffset 함수를 통해 드래그한 텍스트가 스타일이 적용되어있어도 감지
- setInnerhtml을 텍스트가 변경될때마다 실행해서 실제 텍스트 렌더링
@Ludovico7
design: 기본 글자 굵기 normal로 변경
f0d48cd
@Ludovico7
fix: 스타일 추가, 삭제 로직 변경
d646a1f
@Ludovico7
feat: 스타일 속성 있는 경우 처리하기 위한 파라미터 추가
dfc4d59
@Ludovico7
fix: 불필요한 파라미터 제거
14cc2f0
@Ludovico7
feat: 캐럿 관리 방식 수정
8214475
@Ludovico7
chore: 불필요한 console.log 제거
7100ac3
@Ludovico7
진행상황 저장
b1b83f8
@Ludovico7
feat: 텍스트 스타일 클래스 구현
685a161
@Ludovico7
fix: span기반 스타일링 방식으로 수정
cb2cc39
@Ludovico7
fix: span 구조에 맞게 렌더링 함수 수정
25ced5b
@Ludovico7
fix: 캐럿 이상하게 이동하는 문제 수정
6008698
@Ludovico7
fix: 스타일 적용된 텍스트 삭제하도록 수정
776ed88
@Ludovico7
fix: 변경된 리치 텍스트 구조에 맞게 수정
2df4eb6 
- 스타일 적용된 텍스트 분할하거나 합병해도 텍스트 스타일 유지
- 리치 텍스트 구조에 맞게 화살표 핸들러 수정
@Ludovico7
feat: 스타일 있는 텍스트 병합하거나 분할할 때, 스타일 유지되게 데이터 전송
5fceaa0
@Ludovico7
chore: lint 설정
a630562
@Ludovico7
Merge branch 'dev' into Feature/#180_리치_텍스트_구현
087720c
@Ludovico7
feat: 선택된 텍스트의 스타일에 따라 버튼 디자인 변경
00f1bc5
@Ludovico7
fix: 서윤님 피드백 반영
fe6c112
@Ludovico7
feat: 색상 변경을 위한 속성 추가
a21ba10
@Ludovico7
design: 색상 변경을 위한 토큰 추가
1eeb4c3
@Ludovico7
feat: 텍스트 색상, 배경 update 메서드 구현
56006b9
@Ludovico7
feat: 텍스트 색상, 배경 스타일 반영을 위한 렌더링 로직 수정
5212733
@Ludovico7
feat: 텍스트 모달창 구현
63a2ac8 
- 텍스트 스타일: 기존 레이아웃과 동일
- 텍스트 색상: 버튼에 hover하면 서브 모달 생성. 서브 모달에서 색상 클릭하면 색상 적용
- 배경 색상: 버튼에 hover하면 서브 모달 생성. 서브 모달에서 색상 클릭하면 배경 색상 적욕
@Ludovico7
chore: lint 적용
c22551b
@Ludovico7
design: 색상 버튼 디자인 수정
3247d93
@Ludovico7
feat: 블록 복제, 병합, 분할 할때 스타일 같이 적용되게 수정
1e5a3fd
@Ludovico7
design: 제목과 에디터 사이에 스페이서 추가
e66fd21
@Ludovico7
fix: 서윤님 피드백 반영
fb88335
@Ludovico7
feat: 일반 텍스트 붙여넣기 기능 구현
bfa4393
@Ludovico7
feat: 서버로 받은 char 삽입시 스타일 적용하도록 변경
f153fe7
@Ludovico7
feat: remoteCharInsertOperation에 스타일 속성 추가
8a28c17
@Ludovico7
feat: 서버 인스턴스에서 operation 생성 방식 변경
1e874e2
@Ludovico7
feat: getTextOffset 유틸리티 함수로 분리
97e5093
@Ludovico7
feat: 복사 붙여넣기 구현
4e43800 
- 일반 텍스트 복사
- 스타일 있는 텍스트 복사시 클립보드에 커스텀 데이터 구조로 저장
- 붙여넣기 시 커스텀 데이터 없으면 일반 글자 처리
- 커스텀 데이터 있으면 해당 스타일 모두 적용해서 붙여넣기
@Ludovico7
feat: 텍스트 드래그한 후 백스페이스 클릭시 한번에 삭제하도록 구현
19e9844
@Ludovico7 Ludovico7 added FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 P1 긴급/즉시 반영 labels Nov 25, 2024
@Ludovico7 Ludovico7 self-assigned this Nov 25, 2024
minjungw00
minjungw00 approved these changes Nov 26, 2024
View reviewed changes
Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다!

pipisebastian
pipisebastian approved these changes Nov 26, 2024
View reviewed changes
Copy link
Member

@pipisebastian pipisebastian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!!!!!!! 복사붙혀넣기 너무 신기하네요!!!

@github-actions github-actions bot merged commit 1169885 into dev Nov 26, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pipisebastian pipisebastian pipisebastian approved these changes

@minjungw00 minjungw00 minjungw00 approved these changes

@hyonun321 hyonun321 Awaiting requested review from hyonun321

Assignees

@Ludovico7 Ludovico7

Labels
FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 P1 긴급/즉시 반영
Projects
None yet
Milestone
복사 붙여넣기를 할 수 있다.
Development

Successfully merging this pull request may close these issues.
3 participants
@Ludovico7 @minjungw00 @pipisebastian