Prosemirror Guide: Schema, State, View

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})

import { Schema } from 'prosemirror-model' const nodes = { doc: { content: 'block+', // 하나 이상의 블록 노드를 포함 }, paragraph: { content: 'inline*', // 0개 이상의 인라인 노드(text 등) group: 'block', // paragraph는 block 그룹 parseDOM: [{ tag: 'p' }], toDOM() { return ['p', 0] }, }, text: { group: 'inline', // text는 inline 그룹 }, } const marks = { bold: { parseDOM: [{ tag: 'strong' }, { style: 'font-weight=bold' }], toDOM() { return ['strong', 0] }, }, italic: { parseDOM: [{ tag: 'em' }, { style: 'font-style=italic' }], toDOM() { return ['em', 0] }, }, } export const schema = new Schema({ nodes, marks })

const groupSchema = new Schema({ nodes: { doc: {content: "block+"}, paragraph: {group: "block", content: "text*"}, blockquote: {group: "block", content: "block+"}, text: {} } })

const markSchema = new Schema({ nodes: { doc: {content: "block+"}, paragraph: {group: "block", content: "text*", marks: "_"}, heading: {group: "block", content: "text*", marks: ""}, text: {inline: true} }, marks: { strong: {}, em: {} } })

heading: { content: "text*", attrs: {level: {default: 1}} }

doc: { content: "heading paragraph+" }

doc( heading(...?) // 필수니까 뭔가 넣어줘야 함 paragraph() // 최소 하나 필요 )

heading: { attrs: { level: {} // 기본값이 없음 }, content: "text*" }

type Attrs = { readonly [attr: string]: any; };

export declare type Attribute = { default: any; rendered?: boolean; renderHTML?: ((attributes: Record<string, any>) => Record<string, any> | null) | null; parseHTML?: ((element: HTMLElement) => any | null) | null; keepOnSplit: boolean; isRequired?: boolean; };

const schema = new Schema({ nodes: { doc: {content: "paragraph+"}, paragraph: { content: "text*", toDOM(node) { return ["p", 0] } }, text: {} } })

parseDOM: [ {tag: "em"}, // Match <em> nodes {tag: "i"}, // and <i> nodes {style: "font-style=italic"} // and inline 'font-style: italic' ]

import { Schema } from 'prosemirror-model' import { schema as basicSchema } from 'prosemirror-schema-basic' import { addListNodes } from 'prosemirror-schema-list' // 1. 기본 스키마의 nodes는 OrderedMap 형태로 되어 있음 const originalNodes = basicSchema.spec.nodes // 2. blockquote 노드를 제거 const nodesWithoutBlockquote = originalNodes.remove('blockquote') // 3. 리스트 노드를 추가 (bullet_list, ordered_list 등) const extendedNodes = addListNodes( nodesWithoutBlockquote, 'paragraph block*', 'block' ) // 4. 새로운 스키마 생성 const mySchema = new Schema({ nodes: extendedNodes, marks: basicSchema.spec.marks, // 마크는 그대로 사용 })

import {schema} from "prosemirror-schema-basic" import {EditorState} from "prosemirror-state" let state = EditorState.create({schema}) console.log(state.doc.toString()) // An empty paragraph console.log(state.selection.from) // 1, the start of the paragraph

selection = { anchor: 6, head: 1, from: 1, to: 6 }

let tr = state.tr console.log(tr.doc.content.size) // 25 tr.insertText("hello") // Replaces selection with 'hello' let newState = state.apply(tr) console.log(tr.doc.content.size) // 30

let tr = state.tr console.log(tr.selection.from) // → 10 tr.delete(6, 8) console.log(tr.selection.from) // → 8 (moved back) tr.setSelection(TextSelection.create(tr.doc, 3)) console.log(tr.selection.from) // → 3

let myPlugin = new Plugin({ props: { handleKeyDown(view, event) { console.log("A key was pressed!") return false // We did not handle this } } }) let state = EditorState.create({schema, plugins: [myPlugin]})

let transactionCounter = new Plugin({ state: { init() { return 0 }, // 초기값 0 apply(tr, value) { return value + 1 } // 트랜잭션 발생 시 카운터 증가 } }) function getTransactionCount(state) { return transactionCounter.getState(state) }

let transactionCounter = new Plugin({ state: { init() { return 0 }, apply(tr, value) { if (tr.getMeta(transactionCounter)) return value else return value + 1 } } }) function markAsUncounted(tr) { tr.setMeta(transactionCounter, true) }

tr.setMeta('addToHistory', false); tr.setMeta('paste', true);

// The app's state let appState = { editor: EditorState.create({schema}), score: 0 } let view = new EditorView(document.body, { state: appState.editor, dispatchTransaction(transaction) { update({type: "EDITOR_TRANSACTION", transaction}) } }) // A crude app state update function, which takes an update object, // updates the `appState`, and then refreshes the UI. function update(event) { if (event.type == "EDITOR_TRANSACTION") appState.editor = appState.editor.apply(event.transaction) else if (event.type == "SCORE_POINT") appState.score++ draw() } // An even cruder drawing function function draw() { document.querySelector("#score").textContent = appState.score view.updateState(appState.editor) }

let view = new EditorView({ state: myState, editable() { return false }, // Enables read-only behavior handleDoubleClick() { console.log("Double click!") } })

function maxSizePlugin(max) { return new Plugin({ props: { editable(state) { return state.doc.content.size < max } } }) }

let purplePlugin = new Plugin({ props: { decorations(state) { return DecorationSet.create(state.doc, [ Decoration.inline(0, state.doc.content.size, {style: "color: purple"}) ]) } } })

let specklePlugin = new Plugin({ state: { init(_, {doc}) { let speckles = [] for (let pos = 1; pos < doc.content.size; pos += 4) speckles.push(Decoration.inline(pos - 1, pos, {style: "background: yellow"})) return DecorationSet.create(doc, speckles) }, apply(tr, set) { return set.map(tr.mapping, tr.doc) } }, props: { decorations(state) { return specklePlugin.getState(state) } } })

let view = new EditorView({ state, nodeViews: { image(node) { return new ImageView(node) } } }) class ImageView { constructor(node) { // The editor will use this as the node's DOM representation this.dom = document.createElement("img") this.dom.src = node.attrs.src this.dom.addEventListener("click", e => { console.log("You clicked me!") e.preventDefault() }) } stopEvent() { return true } }

let view = new EditorView({ state, nodeViews: { image(node, view, getPos) { return new ImageView(node, view, getPos) } } }) class ImageView { constructor(node, view, getPos) { this.dom = document.createElement("img") this.dom.src = node.attrs.src this.dom.alt = node.attrs.alt this.dom.addEventListener("click", e => { e.preventDefault() let alt = prompt("New alt text:", "") if (alt) view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, { src: node.attrs.src, alt })) }) } stopEvent() { return true } }

let view = new EditorView({ state, nodeViews: { paragraph(node) { return new ParagraphView(node) } } }) class ParagraphView { constructor(node) { this.dom = this.contentDOM = document.createElement("p") if (node.content.size == 0) this.dom.classList.add("empty") } update(node) { if (node.content.size > 0) this.dom.classList.remove("empty") else this.dom.classList.add("empty") return true } }