_(1).jpeg&blockId=0e552736-74f0-4f5a-89e1-328d4931ca7c)
cleanUrl: /dev/prosemirror-practice-task-editor
JavaScript
복사
프로스미러 가이드에서 배웠던 개념들을 적용하기 위해 미니멀한 에디터를 만들었다.
Task Editor인데 투두를 추가하고 체크하는 간단한 에디터이다.
폴더 구조
.
└── src
├── App.tsx
├── editor
│ ├── commands
│ ├── components
│ │ ├── EditorView.tsx
│ │ └── TaskItemView.tsx
│ ├── plugins
│ │ ├── addTaskItem.ts
│ │ └── task-item-plugin.tsx
│ ├── schema
│ │ ├── index.ts
│ │ ├── marks
│ │ │ └── line-through.ts
│ │ └── task-item-node.ts
│ └── setup.ts
├── index.css
└── main.tsx
JavaScript
복사
스키마
가이드 첫번째에서 배웠던 대로, 스키마를 정의하고, state, view를 생성해야 한다. 스키마를 아래와 같이 정의했다.
import { Schema } from "prosemirror-model";
import { schema as basicSchema } from "prosemirror-schema-basic";
import { taskItemNodeSpec } from "./task-item-node";
import { lineThrough } from "./marks/line-through";
// 기존 nodes 복사해서 수정
const nodes = basicSchema.spec.nodes
.update("paragraph", {
...basicSchema.spec.nodes.get("paragraph"),
})
.addBefore("paragraph", "task-item", taskItemNodeSpec);
const marks = basicSchema.spec.marks.update("line-through", lineThrough);
export const editorSchema = new Schema({
nodes,
marks,
});
export const lineThroughMark = editorSchema.marks["line-through"].create();
TypeScript
복사
