ProseMirror- 버튼 세분화하기

저녁부터 임시로 브랜치를파서  코드를 치며 어떻게 변하는지를 찾아보았다. 

근데 모르겠다.

하루종일해서 알아낸게 개발자도구에서 p태그가 타이틀버튼을 누르면

h2로 변하는정도..?

 

일단 어디서 바뀌는지부터 알아야할것같아서

h2를 어떻게 사용했는지 찾아보았는데

schema폴더의 heading에서 밖에 찾지 못했다.

 

2로 바뀌는것을 보면 어딘가에서 분명 사용중일텐데..

이파일 저파일 다찾아보다가 다시 처음부터 생각해보기로했다.

 

일단 schem에 heading이 정의되어있다.

schema 파일을 다시 읽어보니 level 값으로 표현된다고한다.

/**
 * Heading 노드는 Paragraph 노드와 유사하기 때문에 Attributes 를 공유합니다.
 * level 값에 따라 h1 ~ h3 으로 표현됩니다. (아래 toDOM 메서드 참조)
 * 
 * 참고한 자료: https://github.com/chanzuckerberg/czi-prosemirror/blob/master/src/HeadingNodeSpec.js
 *
 * @type {import('prosemirror-model').NodeSpec}
 */

 

개발자 모드를 켜고 검색해보니 찾을 수 있었다.

사이즈를 조절하는 js파일이 있었다.

 if (state === 'toggle-heading') {
          return setBlockType(view.state.schema.nodes.heading, {level: 2})(view.state, view.dispatch)
        }

 

이 부분의 level을 바꾸니 태그가 바뀌는것을 확인 할 수 있었다.

(바뀌는 이유는 schema파일에 h태그들이 지정되어있어서)

이제 h2 밖에 없는 이 에디터의 heading 버튼에 h2와 h3를 선택할 수 있게해야한다.

heading태그를 dispatch하는 파일을 아래와같이 수정하였다.

if (state?.type === "heading") {
          return setHeadingType(view.state.schema.nodes.heading)(
            view.state,
            view.dispatch,
          );
        }

 

commands에 사용할 파일을 생성하고 heading버튼의 함수와 조건문을 입력하였다.

import { heading2, heading3 } from "../commands/titleSize";

export const changeHeading = (level) => (state, dispatch) => {
	const tr = state.tr
    const { node, from, to } = selection;
  if (!node || node.type.name !== 'paragraph') {
    return false;
  }
	
 const isSameHeading = node.attrs.level === level;
 
 if (isSameHeading) {
    const paragraph = node.type.schema.nodes.paragraph.create(node.attrs, node.content);
    const newTr = tr.replaceWith(from, to, paragraph);
    dispatch(newTr);
    return true;
  }
  
  let headingNode;
  
  if (level === 2) {
    headingNode = heading2.create({}, node.content);
  } else if (level === 3) {
    headingNode = heading3.create({}, node.content);
  } else {
    return false;
  }
  
  const newTr = tr.replaceWith(from, to, headingNode);
  dispatch(newTr);
  return true;
};

 

---

완성한 버튼

새로운 스키마를 생성해서 만들어보았다. 

사수님께서 왜 기존의 스키마를 사용하지않고 새로만들었는지 물어보셨다.

내가 함부로 회사의 코드를 변경하면 안되겠다는 생각에서 새롭게 만들었다고 대답하였다

하지만 그 코드를 변경하지않고 사용할 수 있다고하셨다. 

기존의 스키마를 사용하니 정말 간단한거였는데 회사코드가 어떻게 돌아가는지를 제대로 모르니 이런 문제가 생긴..ㅠ

어떻게해야 회사의 코드를 빠르고 정확하게 이해할 수 있을까? 생각해봤는데

일단 개발자 모드를 켜고 다양하게 시도해보는게 맞는거같다.

가만히 코드만 본다고 해서 해결되는것은 없었다.