=> {
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest()
+ const formData = new FormData()
+ formData.append('file', file)
+
+ xhr.upload.addEventListener('progress', (event) => {
+ if (event.lengthComputable) {
+ onProgress({
+ loaded: event.loaded,
+ total: event.total,
+ })
+ }
+ })
+
+ xhr.addEventListener('load', () => {
+ if (xhr.status === 200) {
+ try {
+ const json = JSON.parse(xhr.responseText) as { data: { url: string } }
+ const url: string = json.data.url.replace(
+ 'tmpfiles.org/',
+ 'tmpfiles.org/dl/',
+ )
+
+ // Simulate a larger delay
+ setTimeout(() => resolve(url), 1000)
+ } catch (error) {
+ reject(new Error('Failed to parse response', { cause: error }))
+ }
+ } else {
+ reject(new Error(`Upload failed with status ${xhr.status}`))
+ }
+ })
+
+ xhr.addEventListener('error', () => {
+ reject(new Error('Upload failed'))
+ })
+
+ xhr.open('POST', 'https://tmpfiles.org/api/v1/upload', true)
+ xhr.send(formData)
+ })
+}
diff --git a/preact-image-view/tsconfig.json b/preact-image-view/tsconfig.json
new file mode 100644
index 000000000..a0883e202
--- /dev/null
+++ b/preact-image-view/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/preact-image-view/tsconfig.node.json b/preact-image-view/tsconfig.node.json
new file mode 100644
index 000000000..42872c59f
--- /dev/null
+++ b/preact-image-view/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/preact-image-view/vite.config.ts b/preact-image-view/vite.config.ts
new file mode 100644
index 000000000..5e0b3c9e1
--- /dev/null
+++ b/preact-image-view/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [preact(), tailwindcss()],
+})
diff --git a/preact-link-mark-view/.gitignore b/preact-link-mark-view/.gitignore
new file mode 100644
index 000000000..5d6225c6d
--- /dev/null
+++ b/preact-link-mark-view/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+.svelte-kit
diff --git a/preact-link-mark-view/README.md b/preact-link-mark-view/README.md
new file mode 100644
index 000000000..34a7cee8f
--- /dev/null
+++ b/preact-link-mark-view/README.md
@@ -0,0 +1,15 @@
+# preact-link-mark-view
+
+A [ProseKit](https://prosekit.dev) example.
+
+[](https://stackblitz.com/github/prosekit/examples/tree/master/preact-link-mark-view)
+[](https://codesandbox.io/p/sandbox/github/prosekit/examples/tree/master/preact-link-mark-view)
+
+Run the example locally with:
+
+```bash
+npx degit prosekit/examples/preact-link-mark-view preact-link-mark-view
+cd preact-link-mark-view
+npm install
+npm run dev
+```
diff --git a/preact-link-mark-view/index.html b/preact-link-mark-view/index.html
new file mode 100644
index 000000000..b4f79f223
--- /dev/null
+++ b/preact-link-mark-view/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ ProseKit + Preact
+
+
+
+
+
+
diff --git a/preact-link-mark-view/package.json b/preact-link-mark-view/package.json
new file mode 100644
index 000000000..ef3214b07
--- /dev/null
+++ b/preact-link-mark-view/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "example-preact-link-mark-view",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "tsc && vite build",
+ "dev": "vite",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "preact": "^10.27.2",
+ "prosekit": "^0.15.6"
+ },
+ "devDependencies": {
+ "@egoist/tailwindcss-icons": "^1.9.0",
+ "@iconify-json/lucide": "^1.2.68",
+ "@preact/preset-vite": "^2.10.2",
+ "@tailwindcss/vite": "^4.1.14",
+ "postcss": "^8.5.6",
+ "tailwindcss": "^4.1.14",
+ "tw-animate-css": "^1.4.0",
+ "typescript": "5.9.3",
+ "vite": "7.1.9"
+ }
+}
diff --git a/preact-link-mark-view/src/app.css b/preact-link-mark-view/src/app.css
new file mode 100644
index 000000000..b1ff4f9bc
--- /dev/null
+++ b/preact-link-mark-view/src/app.css
@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+
+@plugin "@egoist/tailwindcss-icons";
+@import 'tw-animate-css';
+
+body {
+ height: 100svh;
+ display: grid;
+ max-width: 900px;
+ padding: 16px;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/preact-link-mark-view/src/editor.tsx b/preact-link-mark-view/src/editor.tsx
new file mode 100644
index 000000000..1862b5930
--- /dev/null
+++ b/preact-link-mark-view/src/editor.tsx
@@ -0,0 +1,31 @@
+import 'prosekit/basic/style.css'
+import 'prosekit/basic/typography.css'
+
+import { useMemo } from 'preact/hooks'
+import { createEditor } from 'prosekit/core'
+import { ProseKit } from 'prosekit/preact'
+
+import { defineExtension } from './extension'
+
+export default function Editor() {
+ const editor = useMemo(() => {
+ return createEditor({ extension: defineExtension(), defaultContent })
+ }, [])
+
+ return (
+
+
+
+ )
+}
+
+const defaultContent = `
+ Here is a link that changes color every second: example link
+`
diff --git a/preact-link-mark-view/src/extension.ts b/preact-link-mark-view/src/extension.ts
new file mode 100644
index 000000000..c9c2d7f7c
--- /dev/null
+++ b/preact-link-mark-view/src/extension.ts
@@ -0,0 +1,17 @@
+import { defineBasicExtension } from 'prosekit/basic'
+import { union } from 'prosekit/core'
+import { definePreactMarkView } from 'prosekit/preact'
+
+import LinkView from './link-view'
+
+export function defineExtension() {
+ return union(
+ defineBasicExtension(),
+ definePreactMarkView({
+ name: 'link',
+ component: LinkView,
+ }),
+ )
+}
+
+export type EditorExtension = ReturnType
diff --git a/preact-link-mark-view/src/link-view.tsx b/preact-link-mark-view/src/link-view.tsx
new file mode 100644
index 000000000..8306ed2ad
--- /dev/null
+++ b/preact-link-mark-view/src/link-view.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'preact/hooks'
+import type { PreactMarkViewProps } from 'prosekit/preact'
+
+const colors = [
+ '#f06292',
+ '#ba68c8',
+ '#9575cd',
+ '#7986cb',
+ '#64b5f6',
+ '#4fc3f7',
+ '#4dd0e1',
+ '#4db6ac',
+ '#81c784',
+ '#aed581',
+ '#ffb74d',
+ '#ffa726',
+ '#ff8a65',
+ '#d4e157',
+ '#ffd54f',
+ '#ffecb3',
+]
+
+function pickRandomColor() {
+ return colors[Math.floor(Math.random() * colors.length)]
+}
+
+export default function Link(props: PreactMarkViewProps) {
+ const [color, setColor] = useState(colors[0])
+ const { mark, contentRef } = props
+ const href = mark.attrs.href as string
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setColor(pickRandomColor())
+ }, 1000)
+ return () => clearInterval(interval)
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/preact-link-mark-view/src/main.tsx b/preact-link-mark-view/src/main.tsx
new file mode 100644
index 000000000..78ffbf844
--- /dev/null
+++ b/preact-link-mark-view/src/main.tsx
@@ -0,0 +1,5 @@
+import './app.css'
+import { render } from 'preact'
+import Editor from './editor.tsx'
+
+render(, document.getElementById('app')!)
diff --git a/preact-link-mark-view/tsconfig.json b/preact-link-mark-view/tsconfig.json
new file mode 100644
index 000000000..a0883e202
--- /dev/null
+++ b/preact-link-mark-view/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/preact-link-mark-view/tsconfig.node.json b/preact-link-mark-view/tsconfig.node.json
new file mode 100644
index 000000000..42872c59f
--- /dev/null
+++ b/preact-link-mark-view/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/preact-link-mark-view/vite.config.ts b/preact-link-mark-view/vite.config.ts
new file mode 100644
index 000000000..5e0b3c9e1
--- /dev/null
+++ b/preact-link-mark-view/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [preact(), tailwindcss()],
+})
diff --git a/preact-typography/src/typography-content.ts b/preact-typography/src/typography-content.ts
index 302de32f6..9dc2ac317 100644
--- a/preact-typography/src/typography-content.ts
+++ b/preact-typography/src/typography-content.ts
@@ -51,7 +51,7 @@ export const typographyContent = `
Images
-
+
Tables
diff --git a/react-code-block-themes/src/editor.tsx b/react-code-block-themes/src/editor.tsx
index b54b6b57a..dc936416c 100644
--- a/react-code-block-themes/src/editor.tsx
+++ b/react-code-block-themes/src/editor.tsx
@@ -5,8 +5,8 @@ import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar'
export default function Editor() {
diff --git a/react-code-block-themes/src/default-doc.ts b/react-code-block-themes/src/sample-doc-code-block.ts
similarity index 100%
rename from react-code-block-themes/src/default-doc.ts
rename to react-code-block-themes/src/sample-doc-code-block.ts
diff --git a/react-code-block/src/editor.tsx b/react-code-block/src/editor.tsx
index b54b6b57a..dc936416c 100644
--- a/react-code-block/src/editor.tsx
+++ b/react-code-block/src/editor.tsx
@@ -5,8 +5,8 @@ import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar'
export default function Editor() {
diff --git a/react-code-block/src/default-doc.ts b/react-code-block/src/sample-doc-code-block.ts
similarity index 100%
rename from react-code-block/src/default-doc.ts
rename to react-code-block/src/sample-doc-code-block.ts
diff --git a/react-full/src/default-content-full.ts b/react-full/src/default-content-full.ts
index 09e09f003..3656d3d13 100644
--- a/react-full/src/default-content-full.ts
+++ b/react-full/src/default-content-full.ts
@@ -43,7 +43,7 @@ magic.transform(thoughts)
Images that captivate.
-
+
Drag the handle in the bottom right corner to resize.
diff --git a/react-gap-cursor/src/editor.tsx b/react-gap-cursor/src/editor.tsx
index 3b7d9cda7..b8bcc23ba 100644
--- a/react-gap-cursor/src/editor.tsx
+++ b/react-gap-cursor/src/editor.tsx
@@ -28,6 +28,6 @@ export default function Editor() {
const defaultContent = `
Click the gap between two images or press arrow keys to see the gap cursor between two images
-
-
+
+
`
diff --git a/react-image-view/src/sample-doc-image.ts b/react-image-view/src/sample-doc-image.ts
index 8e08ed894..b62b561a2 100644
--- a/react-image-view/src/sample-doc-image.ts
+++ b/react-image-view/src/sample-doc-image.ts
@@ -15,17 +15,17 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x150/8bd450/ffffff/png',
- width: 150,
- height: 150,
+ src: 'https://static.photos/white/200x200/1',
+ width: 160,
+ height: 160,
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x75/965fd4/ffffff/png',
- width: 150,
- height: 75,
+ src: 'https://static.photos/yellow/640x360/42',
+ width: 240,
+ height: 135,
},
},
],
diff --git a/react-typography/src/typography-content.ts b/react-typography/src/typography-content.ts
index 302de32f6..9dc2ac317 100644
--- a/react-typography/src/typography-content.ts
+++ b/react-typography/src/typography-content.ts
@@ -51,7 +51,7 @@ export const typographyContent = `
Images
-
+
Tables
diff --git a/solid-code-block/src/editor.tsx b/solid-code-block/src/editor.tsx
index 713cb9e78..e2190f2ba 100644
--- a/solid-code-block/src/editor.tsx
+++ b/solid-code-block/src/editor.tsx
@@ -4,8 +4,8 @@ import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/solid'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar'
export default function Editor() {
diff --git a/solid-code-block/src/default-doc.ts b/solid-code-block/src/sample-doc-code-block.ts
similarity index 100%
rename from solid-code-block/src/default-doc.ts
rename to solid-code-block/src/sample-doc-code-block.ts
diff --git a/solid-drop-cursor/src/editor.tsx b/solid-drop-cursor/src/editor.tsx
index 9004d86b0..213dd46c2 100644
--- a/solid-drop-cursor/src/editor.tsx
+++ b/solid-drop-cursor/src/editor.tsx
@@ -4,8 +4,8 @@ import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/solid'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-drop-cursor'
export default function Editor() {
const editor = createEditor({ extension: defineExtension(), defaultContent })
diff --git a/solid-drop-cursor/src/default-doc.ts b/solid-drop-cursor/src/sample-doc-drop-cursor.ts
similarity index 67%
rename from solid-drop-cursor/src/default-doc.ts
rename to solid-drop-cursor/src/sample-doc-drop-cursor.ts
index 54e960d30..756fd4618 100644
--- a/solid-drop-cursor/src/default-doc.ts
+++ b/solid-drop-cursor/src/sample-doc-drop-cursor.ts
@@ -15,25 +15,25 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f59e0b/FFF?text=Amber',
+ src: 'https://static.photos/yellow/320x240/42',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/84cc16/FFF?text=Lime',
+ src: 'https://static.photos/green/320x240/40',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/06b6d4/FFF?text=Cyan',
+ src: 'https://static.photos/blue/320x240/187',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f43f5e/FFF?text=Rose',
+ src: 'https://static.photos/red/320x240/188',
},
},
],
diff --git a/solid-image-view/src/sample-doc-image.ts b/solid-image-view/src/sample-doc-image.ts
index 8e08ed894..b62b561a2 100644
--- a/solid-image-view/src/sample-doc-image.ts
+++ b/solid-image-view/src/sample-doc-image.ts
@@ -15,17 +15,17 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x150/8bd450/ffffff/png',
- width: 150,
- height: 150,
+ src: 'https://static.photos/white/200x200/1',
+ width: 160,
+ height: 160,
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x75/965fd4/ffffff/png',
- width: 150,
- height: 75,
+ src: 'https://static.photos/yellow/640x360/42',
+ width: 240,
+ height: 135,
},
},
],
diff --git a/solid-typography/src/typography-content.ts b/solid-typography/src/typography-content.ts
index 302de32f6..9dc2ac317 100644
--- a/solid-typography/src/typography-content.ts
+++ b/solid-typography/src/typography-content.ts
@@ -51,7 +51,7 @@ export const typographyContent = `
Images
-
+
Tables
diff --git a/svelte-code-block-themes/src/editor.svelte b/svelte-code-block-themes/src/editor.svelte
index 84b639eb1..faa8879f8 100644
--- a/svelte-code-block-themes/src/editor.svelte
+++ b/svelte-code-block-themes/src/editor.svelte
@@ -5,8 +5,8 @@ import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/svelte'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar.svelte'
const extension = defineExtension()
diff --git a/svelte-code-block-themes/src/default-doc.ts b/svelte-code-block-themes/src/sample-doc-code-block.ts
similarity index 100%
rename from svelte-code-block-themes/src/default-doc.ts
rename to svelte-code-block-themes/src/sample-doc-code-block.ts
diff --git a/svelte-code-block/src/editor.svelte b/svelte-code-block/src/editor.svelte
index 4130b3e39..82f8e38ef 100644
--- a/svelte-code-block/src/editor.svelte
+++ b/svelte-code-block/src/editor.svelte
@@ -4,8 +4,8 @@ import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/svelte'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar.svelte'
const extension = defineExtension()
diff --git a/svelte-code-block/src/default-doc.ts b/svelte-code-block/src/sample-doc-code-block.ts
similarity index 100%
rename from svelte-code-block/src/default-doc.ts
rename to svelte-code-block/src/sample-doc-code-block.ts
diff --git a/svelte-drop-cursor/src/editor.svelte b/svelte-drop-cursor/src/editor.svelte
index 7ff019454..225e29b8f 100644
--- a/svelte-drop-cursor/src/editor.svelte
+++ b/svelte-drop-cursor/src/editor.svelte
@@ -4,8 +4,8 @@ import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/svelte'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-drop-cursor'
const editor = createEditor({ extension: defineExtension(), defaultContent })
diff --git a/svelte-drop-cursor/src/default-doc.ts b/svelte-drop-cursor/src/sample-doc-drop-cursor.ts
similarity index 67%
rename from svelte-drop-cursor/src/default-doc.ts
rename to svelte-drop-cursor/src/sample-doc-drop-cursor.ts
index 54e960d30..756fd4618 100644
--- a/svelte-drop-cursor/src/default-doc.ts
+++ b/svelte-drop-cursor/src/sample-doc-drop-cursor.ts
@@ -15,25 +15,25 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f59e0b/FFF?text=Amber',
+ src: 'https://static.photos/yellow/320x240/42',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/84cc16/FFF?text=Lime',
+ src: 'https://static.photos/green/320x240/40',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/06b6d4/FFF?text=Cyan',
+ src: 'https://static.photos/blue/320x240/187',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f43f5e/FFF?text=Rose',
+ src: 'https://static.photos/red/320x240/188',
},
},
],
diff --git a/svelte-full/src/default-content-full.ts b/svelte-full/src/default-content-full.ts
index 09e09f003..3656d3d13 100644
--- a/svelte-full/src/default-content-full.ts
+++ b/svelte-full/src/default-content-full.ts
@@ -43,7 +43,7 @@ magic.transform(thoughts)
Images that captivate.
-
+
Drag the handle in the bottom right corner to resize.
diff --git a/svelte-image-view/src/sample-doc-image.ts b/svelte-image-view/src/sample-doc-image.ts
index 8e08ed894..b62b561a2 100644
--- a/svelte-image-view/src/sample-doc-image.ts
+++ b/svelte-image-view/src/sample-doc-image.ts
@@ -15,17 +15,17 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x150/8bd450/ffffff/png',
- width: 150,
- height: 150,
+ src: 'https://static.photos/white/200x200/1',
+ width: 160,
+ height: 160,
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x75/965fd4/ffffff/png',
- width: 150,
- height: 75,
+ src: 'https://static.photos/yellow/640x360/42',
+ width: 240,
+ height: 135,
},
},
],
diff --git a/svelte-typography/src/typography-content.ts b/svelte-typography/src/typography-content.ts
index 302de32f6..9dc2ac317 100644
--- a/svelte-typography/src/typography-content.ts
+++ b/svelte-typography/src/typography-content.ts
@@ -51,7 +51,7 @@ export const typographyContent = `
Images
-
+
Tables
diff --git a/sveltekit-full/src/lib/default-content-full.ts b/sveltekit-full/src/lib/default-content-full.ts
index 09e09f003..3656d3d13 100644
--- a/sveltekit-full/src/lib/default-content-full.ts
+++ b/sveltekit-full/src/lib/default-content-full.ts
@@ -43,7 +43,7 @@ magic.transform(thoughts)
Images that captivate.
-
+
Drag the handle in the bottom right corner to resize.
diff --git a/vue-code-block-themes/src/editor.vue b/vue-code-block-themes/src/editor.vue
index 8c9eab506..90c4d453c 100644
--- a/vue-code-block-themes/src/editor.vue
+++ b/vue-code-block-themes/src/editor.vue
@@ -6,8 +6,8 @@ import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/vue'
import { ref, watchPostEffect } from 'vue'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar.vue'
const editor = createEditor({ extension: defineExtension(), defaultContent })
diff --git a/vue-code-block-themes/src/default-doc.ts b/vue-code-block-themes/src/sample-doc-code-block.ts
similarity index 100%
rename from vue-code-block-themes/src/default-doc.ts
rename to vue-code-block-themes/src/sample-doc-code-block.ts
diff --git a/vue-code-block/src/editor.vue b/vue-code-block/src/editor.vue
index 8c9eab506..90c4d453c 100644
--- a/vue-code-block/src/editor.vue
+++ b/vue-code-block/src/editor.vue
@@ -6,8 +6,8 @@ import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/vue'
import { ref, watchPostEffect } from 'vue'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-code-block'
import Toolbar from './toolbar.vue'
const editor = createEditor({ extension: defineExtension(), defaultContent })
diff --git a/vue-code-block/src/default-doc.ts b/vue-code-block/src/sample-doc-code-block.ts
similarity index 100%
rename from vue-code-block/src/default-doc.ts
rename to vue-code-block/src/sample-doc-code-block.ts
diff --git a/vue-drop-cursor/src/editor.vue b/vue-drop-cursor/src/editor.vue
index de331c42e..355f06be0 100644
--- a/vue-drop-cursor/src/editor.vue
+++ b/vue-drop-cursor/src/editor.vue
@@ -6,8 +6,8 @@ import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/vue'
import { ref, watchPostEffect } from 'vue'
-import { defaultContent } from './default-doc'
import { defineExtension } from './extension'
+import { defaultContent } from './sample-doc-drop-cursor'
const editor = createEditor({ extension: defineExtension(), defaultContent })
const editorRef = ref(null)
diff --git a/vue-drop-cursor/src/default-doc.ts b/vue-drop-cursor/src/sample-doc-drop-cursor.ts
similarity index 67%
rename from vue-drop-cursor/src/default-doc.ts
rename to vue-drop-cursor/src/sample-doc-drop-cursor.ts
index 54e960d30..756fd4618 100644
--- a/vue-drop-cursor/src/default-doc.ts
+++ b/vue-drop-cursor/src/sample-doc-drop-cursor.ts
@@ -15,25 +15,25 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f59e0b/FFF?text=Amber',
+ src: 'https://static.photos/yellow/320x240/42',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/84cc16/FFF?text=Lime',
+ src: 'https://static.photos/green/320x240/40',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/06b6d4/FFF?text=Cyan',
+ src: 'https://static.photos/blue/320x240/187',
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/120x60/f43f5e/FFF?text=Rose',
+ src: 'https://static.photos/red/320x240/188',
},
},
],
diff --git a/vue-full/src/default-content-full.ts b/vue-full/src/default-content-full.ts
index 09e09f003..3656d3d13 100644
--- a/vue-full/src/default-content-full.ts
+++ b/vue-full/src/default-content-full.ts
@@ -43,7 +43,7 @@ magic.transform(thoughts)
Images that captivate.
-
+
Drag the handle in the bottom right corner to resize.
diff --git a/vue-image-view/src/sample-doc-image.ts b/vue-image-view/src/sample-doc-image.ts
index 8e08ed894..b62b561a2 100644
--- a/vue-image-view/src/sample-doc-image.ts
+++ b/vue-image-view/src/sample-doc-image.ts
@@ -15,17 +15,17 @@ export const defaultContent: NodeJSON = {
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x150/8bd450/ffffff/png',
- width: 150,
- height: 150,
+ src: 'https://static.photos/white/200x200/1',
+ width: 160,
+ height: 160,
},
},
{
type: 'image',
attrs: {
- src: 'https://placehold.co/150x75/965fd4/ffffff/png',
- width: 150,
- height: 75,
+ src: 'https://static.photos/yellow/640x360/42',
+ width: 240,
+ height: 135,
},
},
],
diff --git a/vue-typography/src/typography-content.ts b/vue-typography/src/typography-content.ts
index 302de32f6..9dc2ac317 100644
--- a/vue-typography/src/typography-content.ts
+++ b/vue-typography/src/typography-content.ts
@@ -51,7 +51,7 @@ export const typographyContent = `
Images
-
+
Tables