import type { NodeJSON } from 'prosekit/core'
export const sampleContent: NodeJSON = {
type: 'doc',
content: [
{
type: 'heading',
attrs: {
level: 1,
},
content: [
{
type: 'text',
text: 'ProseKit Typography',
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'This example shows the typography styles provided by ',
},
{
type: 'text',
marks: [
{
type: 'code',
},
],
text: 'prosekit/basic/typography.css',
},
{
type: 'text',
text: '.',
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Inline marks',
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Text can be formatted in different ways: ',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'bold text',
},
{
type: 'text',
text: ', ',
},
{
type: 'text',
marks: [
{
type: 'italic',
},
],
text: 'italic text',
},
{
type: 'text',
text: ', ',
},
{
type: 'text',
marks: [
{
type: 'underline',
},
],
text: 'underlined text',
},
{
type: 'text',
text: ', ',
},
{
type: 'text',
marks: [
{
type: 'strike',
},
],
text: 'strikethrough text',
},
{
type: 'text',
text: ', ',
},
{
type: 'text',
marks: [
{
type: 'code',
},
],
text: 'inline code',
},
{
type: 'text',
text: ' and ',
},
{
type: 'text',
marks: [
{
type: 'link',
attrs: {
href: 'https://example.com',
target: null,
rel: null,
},
},
],
text: 'links',
},
{
type: 'text',
text: '.',
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Lists',
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Here are different types of lists:',
},
],
},
{
type: 'list',
attrs: {
kind: 'bullet',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Unordered list item 1',
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'bullet',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Unordered list item 2',
},
],
},
{
type: 'list',
attrs: {
kind: 'bullet',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Nested item A',
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'bullet',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Nested item B',
},
],
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'ordered',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'First ordered item',
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'ordered',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Second ordered item',
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'task',
order: null,
checked: true,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Completed task',
},
],
},
],
},
{
type: 'list',
attrs: {
kind: 'task',
order: null,
checked: false,
collapsed: false,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Pending task',
},
],
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Blockquotes',
},
],
},
{
type: 'blockquote',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'This is a blockquote demonstrating how quoted content appears in the editor. It can span multiple lines and maintains proper formatting.',
},
],
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Code Blocks',
},
],
},
{
type: 'codeBlock',
attrs: {
language: '',
},
content: [
{
type: 'text',
text: "function example() {\n const greeting = 'Hello ProseKit!';\n console.log(greeting);\n return greeting;\n}",
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Horizontal Rule',
},
],
},
{
type: 'horizontalRule',
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Images',
},
],
},
{
type: 'image',
attrs: {
src: 'https://static.photos/blurred/640x360/42',
},
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Tables',
},
],
},
{
type: 'table',
content: [
{
type: 'tableRow',
content: [
{
type: 'tableHeaderCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Header 1',
},
],
},
],
},
{
type: 'tableHeaderCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Header 2',
},
],
},
],
},
],
},
{
type: 'tableRow',
content: [
{
type: 'tableCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Cell 1',
},
],
},
],
},
{
type: 'tableCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Cell 2',
},
],
},
],
},
],
},
{
type: 'tableRow',
content: [
{
type: 'tableCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Cell 3',
},
],
},
],
},
{
type: 'tableCell',
attrs: {
colspan: 1,
rowspan: 1,
colwidth: null,
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Cell 4',
},
],
},
],
},
],
},
],
},
],
}
npx shadcn@latest add @prosekit/preact-sample-sample-doc-typographyimport { PreactSampleSampleDocTypography } from "@/components/preact-sample-sample-doc-typography"<PreactSampleSampleDocTypography />