Prosemirror Guide2: Documents, Transformation, Commands

import {schema} from "prosemirror-schema-basic" import {EditorState} from "prosemirror-state" import {EditorView} from "prosemirror-view" let state = EditorState.create({schema}) let view = new EditorView(document.body, {state})

let state = EditorState.create({ schema }) let view = new EditorView(document.body, { state, dispatchTransaction(transaction) { console.log("Document size went from", transaction.before.content.size, "to", transaction.doc.content.size) let newState = view.state.apply(transaction) view.updateState(newState) } })

import { undo, redo, history } from "prosemirror-history" import { keymap } from "prosemirror-keymap" let state = EditorState.create({ schema, plugins: [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }) // Ctrl/Cmd+Z → undo, Ctrl/Cmd+Y → redo ] }) let view = new EditorView(document.body, { state })

import { baseKeymap } from "prosemirror-commands" let state = EditorState.create({ schema, plugins: [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }), // 되돌리기/다시 실행 단축키 keymap(baseKeymap) // Enter, Delete 등 기본 명령어 바인딩 ] }) let view = new EditorView(document.body, { state })

import { DOMParser } from "prosemirror-model" import { EditorState } from "prosemirror-state" import { schema } from "prosemirror-schema-basic" let content = document.getElementById("content") let state = EditorState.create({ doc: DOMParser.fromSchema(schema).parse(content) })

<p>This is <strong>strong text with <em>emphasis</em></strong></p>

const doc1 = { type: "doc", content: [ { type: "paragraph", content: [{ type: "text", text: "Hello" }] }, { type: "paragraph", content: [{ type: "text", text: "World" }] }, ] }

// 새로 만든 노드 const newParagraph = { type: "paragraph", content: [{ type: "text", text: "Hi" }] } // 새로운 도큐먼트: 나머지는 doc1에서 재사용 const doc2 = { type: "doc", content: [ newParagraph, // 새로 만든 노드 doc1.content[1] // 기존 노드를 그대로 참조 ] }

import {schema} from "prosemirror-schema-basic" // (The null arguments are where you can specify attributes, if necessary.) let doc = schema.node("doc", null, [ schema.node("paragraph", null, [schema.text("One.")]), schema.node("horizontal_rule"), schema.node("paragraph", null, [schema.text("Two!")]) ])

editor.state.doc.descendants((node) => { if (node.type.name === 'highlight') { // hightlight 노드에 대한 추가적인 작업... } });

<p>One</p> <blockquote><p>Two<img src="..."></p></blockquote>

0 1 2 3 4 5  <p> O n e </p> 5 6 7 8 9 10 11 12 13 <blockquote> <p> T w o <img> </p> </blockquote>

// doc holds two paragraphs, containing text "a" and "b" let slice1 = doc.slice(0, 3) // The first paragraph console.log(slice1.openStart, slice1.openEnd) // → 0 0

let slice2 = doc.slice(1, 5) // From start of first paragraph // to end of second console.log(slice2.openStart, slice2.openEnd) // → 1 1

console.log(myDoc.toString()) // → p("hello") // A step that deletes the content between positions 3 and 5 let step = new ReplaceStep(3, 5, Slice.empty) let result = step.apply(myDoc) console.log(result.doc.toString()) // → p("heo")

let tr = new Transform(myDoc) tr.delete(5, 7) // Delete between position 5 and 7 tr.split(5) // Split the parent node at position 5 console.log(tr.doc.toString()) // The modified document console.log(tr.steps.length) // → 2

let step = new ReplaceStep(4, 6, Slice.empty) // Delete 4-5 let map = step.getMap() console.log(map.map(8)) // → 6 (2토큰 빠졌으니 8 → 6) console.log(map.map(2)) // → 2 (삭제 이전 위치라 변화 없음)

let tr = new Transform(myDoc) tr.split(10) // 10에서 노드 분리 → 토큰 2개 추가됨 tr.delete(2, 5) // 2~4 삭제 → 토큰 3개 삭제됨 console.log(tr.mapping.map(15)) // → 14 console.log(tr.mapping.map(6)) // → 3 console.log(tr.mapping.map(10)) // → 9

console.log(tr.mapping.map(10)) // → 9 (삽입 뒤로 이동)

console.log(tr.mapping.map(10, -1)) // → 7

stepA(doc) = docA stepB(doc) = docB

stepB(docA) = ❌ // 에러. docA는 stepB의 대상과 다름

rebase(stepB, mapA) = stepB' stepB'(docA) = docAB

stepA2(stepA1(doc)) = docA stepB2(stepB1(doc)) = docB

???(docA) = docAB

rebase(stepB2, [ invert(mapB1), // stepB1이 삽입한 위치 기준 → 원래 문서 기준으로 되돌리기 mapA1, mapA2, // stepA 들의 변화 적용 mapB1' // 재배치된 stepB1의 map ])

// 원본 문서 doc = "오늘 날씨는 좋다. 산책을 가고 싶다."

// stepA1: 앞에 "제목: "을 삽입 → "제목: 오늘 날씨는 좋다. 산책을 가고 싶다." // stepA2: 마지막 문장을 "등산을 가고 싶다."로 변경 → "제목: 오늘 날씨는 좋다. 등산을 가고 싶다."

// stepB1: "날씨는 좋다"를 "날씨가 맑다"로 변경 → "오늘 날씨가 맑다. 산책을 가고 싶다." // stepB2: "산책"이라는 단어에 밑줄(mark)을 추가 → "오늘 날씨가 맑다. _산책_을 가고 싶다."

rebase(stepB2, [ invert(mapB1), // stepB1이 삽입했던 위치를 "되돌림" — 원래 위치로 감 mapA1, mapA2, // A 사용자의 변경 사항들을 적용해서 위치 다시 이동 mapB1' // stepB1을 docA 기준으로 다시 적용한 버전의 map ])

function myCommand(state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView): boolean

function deleteSelection(state, dispatch) { if (state.selection.empty) return false if (dispatch) dispatch(state.tr.deleteSelection()) return true }

// 실행 가능한지만 확인 deleteSelection(state) // 실제로 실행 deleteSelection(state, dispatch)

function blinkView(_state, dispatch, view) { if (dispatch) { view.dom.style.background = "yellow" setTimeout(() => (view.dom.style.background = ""), 1000) } return true }

import { chainCommands, deleteSelection, joinBackward, selectNodeBackward } from 'prosemirror-commands' const backspaceCommand = chainCommands( deleteSelection, joinBackward, selectNodeBackward )