@nextsparkjs/theme-blog 0.1.0-beta.188 → 0.1.0-beta.189

package/components/editor/WysiwygEditor.tsx

@@ -6,12 +6,15 @@
  * A rich text editor built with native contentEditable.
  * Provides formatting, markdown shortcuts, and a clean interface.
  *
- * No external dependencies - uses document.execCommand for formatting.
+ * Formatting uses document.execCommand. Stored HTML, and markup pasted or
+ * dropped in, is sanitised before it reaches the DOM, in the editable area and
+ * in the preview.
  */
 
 import { useRef, useCallback, useEffect, useState } from 'react'
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { Button } from '@nextsparkjs/core/components/ui/button'
+import { postHtmlHasUnsafeMarkup, sanitizePostHtml } from '@/themes/blog/lib/sanitize-post-html'
 import {
   Bold,
   Italic,
@@ -78,6 +81,22 @@ const TOOLBAR_GROUPS: ToolbarButton[][] = [
   ],
 ]
 
+/** The caret position under a point, so a drop lands where the pointer is. */
+function rangeAtPoint(x: number, y: number): Range | null {
+  const doc = document as Document & {
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null
+    caretRangeFromPoint?: (x: number, y: number) => Range | null
+  }
+  const position = doc.caretPositionFromPoint?.(x, y)
+  if (position) {
+    const range = document.createRange()
+    range.setStart(position.offsetNode, position.offset)
+    range.collapse(true)
+    return range
+  }
+  return doc.caretRangeFromPoint?.(x, y) ?? null
+}
+
 export function WysiwygEditor({
   value,
   onChange,
@@ -91,15 +110,18 @@ export function WysiwygEditor({
   const [isFocused, setIsFocused] = useState(false)
   const isComposing = useRef(false)
 
-  // Initialize content
+  // Fill the editable area. A value from outside (a loaded post) always goes in
+  // sanitised, and so does the value when leaving the preview mounts a new,
+  // empty area. One the area produced itself (typing, a paste, a command) is
+  // replaced only when sanitising would change it: rewriting it for a mere
+  // re-serialisation would move the caret to the start.
   useEffect(() => {
     if (editorRef.current && !isComposing.current) {
-      const currentContent = editorRef.current.innerHTML
-      if (currentContent !== value) {
-        editorRef.current.innerHTML = value || ''
+      if (editorRef.current.innerHTML !== value || postHtmlHasUnsafeMarkup(value)) {
+        editorRef.current.innerHTML = sanitizePostHtml(value)
       }
     }
-  }, [value])
+  }, [value, isPreview])
 
   // Auto focus
   useEffect(() => {
@@ -115,6 +137,31 @@ export function WysiwygEditor({
     }
   }, [onChange])
 
+  // Markup pasted or dropped in that sanitising would change goes in sanitised,
+  // in place of the browser's own insertion. Replacing it once it is in the
+  // editable area is too late: an attribute such as onerror fires as soon as
+  // the element is in the document. Anything else keeps the browser's paste
+  // and drop, which is also how text moves within the editor.
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const html = e.clipboardData.getData('text/html')
+    if (!postHtmlHasUnsafeMarkup(html)) return
+    e.preventDefault()
+    document.execCommand('insertHTML', false, sanitizePostHtml(html))
+  }, [])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    const html = e.dataTransfer.getData('text/html')
+    if (!postHtmlHasUnsafeMarkup(html)) return
+    e.preventDefault()
+    const range = rangeAtPoint(e.clientX, e.clientY)
+    if (range) {
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+    }
+    document.execCommand('insertHTML', false, sanitizePostHtml(html))
+  }, [])
+
   const execCommand = useCallback((command: string, value?: string) => {
     if (command === 'createLink') {
       const url = prompt('Enter URL:')
@@ -275,7 +322,7 @@ export function WysiwygEditor({
         <div
           className="flex-1 min-h-0 prose prose-sm max-w-none p-4 overflow-auto"
           style={{ minHeight }}
-          dangerouslySetInnerHTML={{ __html: value || '<p class="text-muted-foreground">Nothing to preview...</p>' }}
+          dangerouslySetInnerHTML={{ __html: value ? sanitizePostHtml(value) : '<p class="text-muted-foreground">Nothing to preview...</p>' }}
           data-cy="wysiwyg-preview"
         />
       ) : (
@@ -302,6 +349,8 @@ export function WysiwygEditor({
             )}
             style={{ minHeight }}
             onInput={handleInput}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
             onKeyDown={handleKeyDown}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}

package/lib/sanitize-post-html.ts

@@ -0,0 +1,52 @@
+import DOMPurify from 'dompurify'
+
+/**
+ * A post body is HTML written by anyone who can create a post, a team member
+ * and not only an owner, so every place that turns it back into DOM sanitises
+ * it first: the public page, the editor and the editor's preview.
+ *
+ * DOMPurify needs a DOM. Where there is none (a server render pass) this
+ * returns '' rather than the raw string, failing closed.
+ */
+export function sanitizePostHtml(html: string | null | undefined): string {
+  if (!html) return ''
+  if (!DOMPurify.isSupported) return ''
+  return DOMPurify.sanitize(html)
+}
+
+/**
+ * Whether sanitising changes the markup beyond what parsing it already does.
+ *
+ * Parsing alone rewrites markup that is not unsafe: the browser's editing
+ * commands leave a list inside a <p>, and the parser moves it out. So the
+ * original and the sanitised result are both parsed and compared as trees; any
+ * difference is something the sanitiser took out or altered. It does not read
+ * DOMPurify.removed, which DOMPurify documents as unfit for security decisions
+ * and which misses changes such as an attribute it rewrites.
+ *
+ * Both are parsed as a fragment, the way the editable area receives a paste. A
+ * document parse moves a leading <script> or <base> into a <head> that a
+ * comparison of bodies never sees. A template's content is inert, so nothing in
+ * the unsanitised markup runs or loads while it is inspected. Where there is no
+ * DOM the answer is true, sending callers down the sanitising path.
+ */
+export function postHtmlHasUnsafeMarkup(html: string | null | undefined): boolean {
+  if (!html) return false
+  if (!DOMPurify.isSupported || typeof document === 'undefined') return true
+  return !sameMarkup(parseFragment(html), parseFragment(DOMPurify.sanitize(html)))
+}
+
+function parseFragment(markup: string): DocumentFragment {
+  const template = document.createElement('template')
+  template.innerHTML = markup
+  return template.content
+}
+
+/** Equal trees, including what each <template> holds: isEqualNode does not look inside one. */
+function sameMarkup(a: DocumentFragment, b: DocumentFragment): boolean {
+  if (!a.isEqualNode(b)) return false
+  const templatesA = Array.from(a.querySelectorAll('template'))
+  const templatesB = Array.from(b.querySelectorAll('template'))
+  return templatesA.length === templatesB.length
+    && templatesA.every((template, i) => sameMarkup(template.content, templatesB[i].content))
+}

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@nextsparkjs/theme-blog",
-  "version": "0.1.0-beta.188",
+  "version": "0.1.0-beta.189",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
   "requiredPlugins": [],
-  "dependencies": {},
+  "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "dompurify": "^3.2.7",
+    "next-themes": "^0.4.6"
+  },
   "peerDependencies": {
-    "@nextsparkjs/core": "*",
-    "@nextsparkjs/testing": "*",
+    "@nextsparkjs/core": ">=0.1.0-0",
+    "@nextsparkjs/testing": ">=0.1.0-0",
     "lucide-react": "^0.539.0",
     "next": "^15.0.0",
     "next-intl": "^4.0.0",
@@ -19,5 +23,8 @@
   "nextspark": {
     "type": "theme",
     "name": "blog"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.2.0"
   }
 }

package/templates/(public)/posts/[slug]/page.tsx

@@ -12,6 +12,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { ArrowLeft, Calendar, Clock, Loader2, Share2, Bookmark } from 'lucide-react'
 import { use, useEffect, useState } from 'react'
+import { sanitizePostHtml } from '@/themes/blog/lib/sanitize-post-html'
 import { ReadingProgress } from '@/themes/blog/components/public/ReadingProgress'
 import { AuthorBio } from '@/themes/blog/components/public/AuthorBio'
 import { RelatedPosts } from '@/themes/blog/components/public/RelatedPosts'
@@ -294,7 +295,7 @@ export default function PostPage({ params }: PageProps) {
 
         {/* Article Content */}
         <div className="article-content">
-          <div dangerouslySetInnerHTML={{ __html: renderContent(post.content) }} />
+          <div dangerouslySetInnerHTML={{ __html: sanitizePostHtml(renderContent(post.content)) }} />
         </div>
 
         {/* Divider */}

package/tests/jest/components/WysiwygEditor.test.tsx

@@ -0,0 +1,117 @@
+import { render, fireEvent } from '@testing-library/react'
+import { WysiwygEditor } from '@/themes/blog/components/editor/WysiwygEditor'
+
+// What a team member can store as a post body through the API.
+const STORED = [
+  '<p>kept <strong>bold</strong></p>',
+  '<img src="x" onerror="globalThis.pwned = 1">',
+  '<script>globalThis.pwned = 1</script>',
+  '<a href="javascript:globalThis.pwned = 1">link</a>',
+].join('')
+
+function expectInert(root: Element) {
+  expect(root.querySelector('script')).toBeNull()
+  expect(root.querySelector('[onerror]')).toBeNull()
+  expect(root.querySelector('a[href^="javascript:"]')).toBeNull()
+  expect(root.querySelector('strong')?.textContent).toBe('bold')
+}
+
+describe('WysiwygEditor with stored HTML', () => {
+  it('renders formatting but no script in the editable area', () => {
+    const { container } = render(<WysiwygEditor value={STORED} onChange={jest.fn()} />)
+    expectInert(container.querySelector('[contenteditable]')!)
+  })
+
+  it('drops script that reaches the editable area while editing', () => {
+    const onChange = jest.fn()
+    const { container, rerender } = render(<WysiwygEditor value="" onChange={onChange} />)
+    const editable = container.querySelector('[contenteditable]')!
+    editable.innerHTML = STORED
+    fireEvent.input(editable)
+    const emitted = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+    rerender(<WysiwygEditor value={emitted} onChange={onChange} />)
+    expectInert(editable)
+  })
+
+  it('drops a handler the sanitiser only reports as a rewritten attribute', () => {
+    const onChange = jest.fn()
+    const { container, rerender } = render(<WysiwygEditor value="" onChange={onChange} />)
+    const editable = container.querySelector('[contenteditable]')!
+    editable.innerHTML = '<p><strong>bold</strong></p><img title=" x " onerror="globalThis.pwned = 1" src="bad">'
+    fireEvent.input(editable)
+    const emitted = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+    rerender(<WysiwygEditor value={emitted} onChange={onChange} />)
+    expectInert(editable)
+  })
+
+  it('renders formatting but no script in the preview', () => {
+    const { container } = render(<WysiwygEditor value={STORED} onChange={jest.fn()} />)
+    fireEvent.click(container.querySelector('[data-cy="wysiwyg-preview-toggle"]')!)
+    expectInert(container.querySelector('[data-cy="wysiwyg-preview"]')!)
+  })
+})
+
+describe('WysiwygEditor with markup pasted or dropped in', () => {
+  const UNSAFE = '<p><strong>bold</strong></p><img title=" x " onerror="globalThis.pwned = 1" src="bad">'
+  const transfer = (html: string) => ({ getData: (type: string) => (type === 'text/html' ? html : '') })
+  let execCommand: jest.Mock
+
+  beforeEach(() => {
+    execCommand = jest.fn()
+    Object.defineProperty(document, 'execCommand', { value: execCommand, configurable: true, writable: true })
+  })
+
+  afterEach(() => {
+    delete (document as unknown as { execCommand?: unknown }).execCommand
+  })
+
+  function expectSanitisedInsertion() {
+    expect(execCommand).toHaveBeenCalledTimes(1)
+    const [command, , inserted] = execCommand.mock.calls[0]
+    expect(command).toBe('insertHTML')
+    expect(inserted).toContain('<strong>bold</strong>')
+    expect(inserted).not.toContain('onerror')
+  }
+
+  it('inserts a paste with a handler sanitised, instead of the browser paste', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, { clipboardData: transfer(UNSAFE) })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+  })
+
+  it('inserts a drop with a handler sanitised, instead of the browser drop', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.drop(container.querySelector('[contenteditable]')!, { dataTransfer: transfer(UNSAFE) })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+  })
+
+  it('inserts a paste whose script a document parse would move out of the body, sanitised', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, {
+      clipboardData: transfer('<script>globalThis.pwned = 1</script><p><strong>bold</strong></p>'),
+    })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+    expect(execCommand.mock.calls[0][2]).not.toContain('<script')
+  })
+
+  it('leaves a paste with nothing to take out to the browser', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, { clipboardData: transfer('<p>plain <em>text</em></p>') })
+    expect(proceeded).toBe(true)
+    expect(execCommand).not.toHaveBeenCalled()
+  })
+})
+
+describe('WysiwygEditor preview toggle', () => {
+  it('keeps the content in the editable area after leaving the preview', () => {
+    const { container } = render(<WysiwygEditor value="<p>kept <strong>bold</strong></p>" onChange={jest.fn()} />)
+    const toggle = container.querySelector('[data-cy="wysiwyg-preview-toggle"]')!
+    fireEvent.click(toggle)
+    expect(container.querySelector('[contenteditable]')).toBeNull()
+    fireEvent.click(toggle)
+    expect(container.querySelector('[contenteditable]')!.innerHTML).toBe('<p>kept <strong>bold</strong></p>')
+  })
+})

package/tests/jest/jest.config.cjs

@@ -48,6 +48,8 @@ const moduleNameMapper = isNpmMode
       // Monorepo mode: resolve from packages/core/src (rootDir is apps/dev)
       '^@nextsparkjs/core/(.*)$': '<rootDir>/../../packages/core/src/$1',
       '^@nextsparkjs/core$': '<rootDir>/../../packages/core/src',
+      // core's components import the UI package, resolved from source as core's own jest config does
+      '^@nextsparkjs/ui$': '<rootDir>/../../packages/ui/src/index.ts',
       '^@/contents/(.*)$': '<rootDir>/contents/$1',
       '^@/entities/(.*)$': '<rootDir>/contents/entities/$1',
       '^@/plugins/(.*)$': '<rootDir>/contents/plugins/$1',
@@ -97,10 +99,25 @@ module.exports = {
   // Setup files
   setupFilesAfterEnv,
 
-  // Transform configuration
+  // In npm mode, use project's tsconfig with jsx override
+  // In monorepo, use the local tsconfig.jest.json
   transform: {
     '^.+\\.(ts|tsx)$': ['ts-jest', {
-      tsconfig: path.join(projectRoot, 'tsconfig.json'),
+      tsconfig: isNpmMode
+        ? {
+            jsx: 'react-jsx',
+            esModuleInterop: true,
+            allowSyntheticDefaultImports: true,
+            module: 'ESNext',
+            moduleResolution: 'bundler',
+            strict: true,
+            baseUrl: projectRoot,
+            paths: {
+              '@/*': ['./*'],
+              '@/contents/*': ['./contents/*'],
+            },
+          }
+        : path.join(themeTestsRoot, 'tsconfig.jest.json'),
     }],
   },
 

package/tests/jest/lib/sanitize-post-html.test.ts

@@ -0,0 +1,47 @@
+import { postHtmlHasUnsafeMarkup, sanitizePostHtml } from '@/themes/blog/lib/sanitize-post-html'
+
+describe('sanitizePostHtml', () => {
+  it('keeps formatting and drops what scripts', () => {
+    const out = sanitizePostHtml('<p><strong>bold</strong></p><img src="x" onerror="globalThis.pwned = 1"><script>globalThis.pwned = 1</script>')
+    expect(out).toContain('<strong>bold</strong>')
+    expect(out).not.toMatch(/onerror|<script/)
+  })
+
+  it('returns an empty string for no input', () => {
+    expect(sanitizePostHtml('')).toBe('')
+    expect(sanitizePostHtml(null)).toBe('')
+    expect(sanitizePostHtml(undefined)).toBe('')
+  })
+})
+
+describe('postHtmlHasUnsafeMarkup', () => {
+  it('is true when sanitising removes or alters anything', () => {
+    for (const unsafe of [
+      '<img src="x" onerror="globalThis.pwned = 1">',
+      '<p>x</p><script>globalThis.pwned = 1</script>',
+      '<a href="javascript:globalThis.pwned = 1">x</a>',
+      '<img title=" x " onerror="globalThis.pwned = 1" src="bad">',
+      '<p onclick="globalThis.pwned = 1">x</p>',
+      '<a title=" y " href=" javascript:globalThis.pwned = 1">x</a>',
+      '<script>globalThis.pwned = 1</script>',
+      '<head><base href="https://attacker.test/"></head><p>safe</p>',
+      '<template><img src="x" onerror="globalThis.pwned = 1"></template>',
+      '<template><template><img src="x" onerror="globalThis.pwned = 1"></template></template>',
+    ]) {
+      expect(postHtmlHasUnsafeMarkup(unsafe)).toBe(true)
+    }
+  })
+
+  it('is false for markup the parser only re-nests or re-serialises', () => {
+    for (const safe of [
+      '<p><ul><li>item</li></ul></p>',
+      '<p>plain <em>text</em></p>',
+      '  <p>leading whitespace</p>',
+      '<p>a&nbsp;b<br></p>',
+      '<ol><li>one</li><li><b>two</b></li></ol>',
+      '<p style="text-align: center">centred</p>',
+    ]) {
+      expect(postHtmlHasUnsafeMarkup(safe)).toBe(false)
+    }
+  })
+})

package/tests/jest/tsconfig.jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../apps/dev/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}