[{"data":1,"prerenderedAt":382},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fbuild\u002Fmodel":3},{"id":4,"title":5,"body":6,"description":371,"extension":372,"keywords":373,"locale":374,"meta":375,"navigation":376,"order":47,"path":377,"section":378,"seo":379,"stem":380,"__hash__":381},"docs\u002Fbuild\u002Fmodel.en.md","Understand the document model",{"type":7,"value":8,"toc":364},"minimark",[9,18,23,26,138,159,162,166,169,177,180,184,229,236,250,254,257,265,269,323,338,348,360],[10,11,12,13,17],"p",{},"The previous chapter passed HTML to ",[14,15,16],"code",{},"content",". Core converts that input into a document tree describing the content; it does not store a page screenshot.",[19,20,22],"h2",{"id":21},"how-a-paragraph-becomes-a-document","How a paragraph becomes a document",[10,24,25],{},"A paragraph containing “Hello, QuireKit” has this JSON representation:",[27,28,34],"pre",{"className":29,"code":30,"filename":31,"language":32,"meta":33,"style":33},"language-json shiki shiki-themes github-light github-light github-dark","{\n  \"type\": \"doc\",\n  \"content\": [\n    {\n      \"type\": \"paragraph\",\n      \"content\": [{ \"type\": \"text\", \"text\": \"Hello, QuireKit\" }]\n    }\n  ]\n}\n","One paragraph","json","",[14,35,36,45,62,71,77,90,120,126,132],{"__ignoreMap":33},[37,38,41],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sVPnS","{\n",[37,46,48,52,55,59],{"class":39,"line":47},2,[37,49,51],{"class":50},"sUNQB","  \"type\"",[37,53,54],{"class":43},": ",[37,56,58],{"class":57},"s-HEn","\"doc\"",[37,60,61],{"class":43},",\n",[37,63,65,68],{"class":39,"line":64},3,[37,66,67],{"class":50},"  \"content\"",[37,69,70],{"class":43},": [\n",[37,72,74],{"class":39,"line":73},4,[37,75,76],{"class":43},"    {\n",[37,78,80,83,85,88],{"class":39,"line":79},5,[37,81,82],{"class":50},"      \"type\"",[37,84,54],{"class":43},[37,86,87],{"class":57},"\"paragraph\"",[37,89,61],{"class":43},[37,91,93,96,99,102,104,107,110,112,114,117],{"class":39,"line":92},6,[37,94,95],{"class":50},"      \"content\"",[37,97,98],{"class":43},": [{ ",[37,100,101],{"class":50},"\"type\"",[37,103,54],{"class":43},[37,105,106],{"class":57},"\"text\"",[37,108,109],{"class":43},", ",[37,111,106],{"class":50},[37,113,54],{"class":43},[37,115,116],{"class":57},"\"Hello, QuireKit\"",[37,118,119],{"class":43}," }]\n",[37,121,123],{"class":39,"line":122},7,[37,124,125],{"class":43},"    }\n",[37,127,129],{"class":39,"line":128},8,[37,130,131],{"class":43},"  ]\n",[37,133,135],{"class":39,"line":134},9,[37,136,137],{"class":43},"}\n",[10,139,140,109,143,146,147,150,151,154,155,158],{},[14,141,142],{},"doc",[14,144,145],{},"paragraph"," and ",[14,148,149],{},"text"," are nodes. Bold, italic and links are marks attached through a text node's ",[14,152,153],{},"marks",". Extra information such as heading level belongs in ",[14,156,157],{},"attrs",".",[10,160,161],{},"Commands can modify this structure, history can undo changes, and different views can display the same content. Page numbers and selection pixels are results of layout and display.",[19,163,165],{"id":164},"schema-defines-allowed-content","Schema defines allowed content",[10,167,168],{},"Schema is the set of structural rules: which headings exist, what a list may contain, and which marks text supports. Core builds it from the installed Node and Mark extensions.",[10,170,171,172,158],{},"StarterKit already supplies common structures and formatting. Add a Node when introducing a new content type, such as the ",[173,174,176],"a",{"href":175},"\u002Fen\u002Fbuild\u002Fextension","note group",[10,178,179],{},"Restoring saved content requires the matching extensions. Unknown nodes must not silently become ordinary paragraphs or disappear.",[19,181,183],{"id":182},"choose-articles-or-word-documents","Choose articles or Word documents",[185,186,187,203],"table",{},[188,189,190],"thead",{},[191,192,193,197,200],"tr",{},[194,195,196],"th",{},"Product needs",[194,198,199],{},"Start with",[194,201,202],{},"Difference",[204,205,206,218],"tbody",{},[191,207,208,212,215],{},[209,210,211],"td",{},"Notes, articles, knowledge bases",[209,213,214],{},"StarterKit and the generic document model",[209,216,217],{},"Headings, paragraphs and lists follow content order",[191,219,220,223,226],{},[209,221,222],{},"A Word workspace like Classic",[209,224,225],{},"Word extension preset and Word document model",[209,227,228],{},"Also stores sections, headers, footers, paragraph styles and numbering",[10,230,231,232,235],{},"A Word heading may be a styled paragraph rather than a ",[14,233,234],{},"heading"," node. Wrapping ordinary paragraphs in a page border is not a Word document model, and switching renderers does not add its content rules.",[10,237,238,239,109,242,245,246,249],{},"In ",[14,240,241],{},"assembly\u002Fword.ts",[14,243,244],{},"createClassicWordPreset()"," supplies compatible extensions and ",[14,247,248],{},"createClassicWordDefaultDocument()"," supplies matching content. This does not create the Classic toolbar. The preset handles overlapping StarterKit nodes, so do not append a complete StarterKit again.",[19,251,253],{"id":252},"how-the-model-relates-to-layout","How the model relates to layout",[10,255,256],{},"The model describes the content. A document profile supplies its page, paragraph and table rules. View displays layout results and handles input.",[10,258,259,260,264],{},"Articles can use continuous layout; Word extensions supply section and pagination rules. Reuse the preset initially. The ",[173,261,263],{"href":262},"\u002Fen\u002Fapi\u002Fextensions","profile and layout API"," is for implementing new models or layout capabilities.",[19,266,268],{"id":267},"read-and-save-content","Read and save content",[27,270,275],{"className":271,"code":272,"filename":273,"language":274,"meta":33,"style":33},"language-ts shiki shiki-themes github-light github-light github-dark","const document = editor.state.doc\nconst selection = editor.state.pm.selection\nconst backup = editor.getJSON()\n","Read editor content","ts",[14,276,277,292,304],{"__ignoreMap":33},[37,278,279,283,286,289],{"class":39,"line":40},[37,280,282],{"class":281},"sDD9d","const",[37,284,285],{"class":50}," document",[37,287,288],{"class":281}," =",[37,290,291],{"class":43}," editor.state.doc\n",[37,293,294,296,299,301],{"class":39,"line":47},[37,295,282],{"class":281},[37,297,298],{"class":50}," selection",[37,300,288],{"class":281},[37,302,303],{"class":43}," editor.state.pm.selection\n",[37,305,306,308,311,313,316,320],{"class":39,"line":64},[37,307,282],{"class":281},[37,309,310],{"class":50}," backup",[37,312,288],{"class":281},[37,314,315],{"class":43}," editor.",[37,317,319],{"class":318},"sgQzM","getJSON",[37,321,322],{"class":43},"()\n",[10,324,325,326,329,330,333,334,337],{},"Read structure through ",[14,327,328],{},"state.doc"," and selection through ",[14,331,332],{},"state.pm.selection",". Use ",[14,335,336],{},"getJSON()"," at save boundaries rather than maintaining a second reactive document and replacing content on every edit.",[10,339,340,341,146,344,347],{},"Save your model version too. The complete example distinguishes ",[14,342,343],{},"generic-v1",[14,345,346],{},"word-v1",", validating version and Schema before restore. Switching Canvas\u002FSVG changes presentation without changing the model.",[10,349,350,351,355,356,158],{},"Next: ",[173,352,354],{"href":353},"\u002Fen\u002Fbuild\u002Fview","display the document with Canvas\u002FSVG",". Both complete assemblies are in the ",[173,357,359],{"href":358},"\u002Fen\u002Fbuild\u002Freference","workspace reference",[361,362,363],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}",{"title":33,"searchDepth":47,"depth":47,"links":365},[366,367,368,369,370],{"id":21,"depth":47,"text":22},{"id":164,"depth":47,"text":165},{"id":182,"depth":47,"text":183},{"id":252,"depth":47,"text":253},{"id":267,"depth":47,"text":268},"Learn nodes, formatting and Schema, then choose a structure for articles or Word documents.","md",null,"en",{},true,"\u002Fen\u002Fbuild\u002Fmodel","Build a product",{"title":5,"description":371},"build\u002Fmodel.en","YrFfbZyDaV-GiWkUPVG6bureyUWbkWQEFJ_H-yoQ9d4",1793045208527]