npm - @bendyline/docblocks-react - Versions diffs - 1.1.0 → 1.1.1 - Mend

@bendyline/docblocks-react 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/AppMenu/AppMenu.d.ts +11 -1
package/dist/AppMenu/AppMenu.d.ts.map +1 -1
package/dist/AppMenu/AppMenu.js +2 -2
package/dist/AppMenu/AppMenu.js.map +1 -1
package/dist/DocBlocksShell/DocBlocksShell.d.ts +21 -1
package/dist/DocBlocksShell/DocBlocksShell.d.ts.map +1 -1
package/dist/DocBlocksShell/DocBlocksShell.js +562 -67
package/dist/DocBlocksShell/DocBlocksShell.js.map +1 -1
package/dist/Export/ExportDialog.d.ts.map +1 -1
package/dist/Export/ExportDialog.js +104 -5
package/dist/Export/ExportDialog.js.map +1 -1
package/dist/Export/ExportToolbarControls.d.ts.map +1 -1
package/dist/Export/ExportToolbarControls.js +44 -3
package/dist/Export/ExportToolbarControls.js.map +1 -1
package/dist/Export/export-options.d.ts +35 -0
package/dist/Export/export-options.d.ts.map +1 -1
package/dist/Export/export-options.js +6 -1
package/dist/Export/export-options.js.map +1 -1
package/dist/Export/run-export.d.ts.map +1 -1
package/dist/Export/run-export.js +163 -91
package/dist/Export/run-export.js.map +1 -1
package/dist/FileExplorer/FileExplorer.d.ts.map +1 -1
package/dist/FileExplorer/FileExplorer.js +17 -2
package/dist/FileExplorer/FileExplorer.js.map +1 -1
package/dist/WorkspacePicker/WorkspaceSettingsButton.d.ts +2 -1
package/dist/WorkspacePicker/WorkspaceSettingsButton.d.ts.map +1 -1
package/dist/WorkspacePicker/WorkspaceSettingsButton.js +2 -2
package/dist/WorkspacePicker/WorkspaceSettingsButton.js.map +1 -1
package/dist/WorkspacePicker/WorkspaceSettingsDialog.d.ts +20 -0
package/dist/WorkspacePicker/WorkspaceSettingsDialog.d.ts.map +1 -0
package/dist/WorkspacePicker/WorkspaceSettingsDialog.js +36 -0
package/dist/WorkspacePicker/WorkspaceSettingsDialog.js.map +1 -0
package/dist/hooks/useAutoSave.d.ts +8 -2
package/dist/hooks/useAutoSave.d.ts.map +1 -1
package/dist/hooks/useAutoSave.js +65 -30
package/dist/hooks/useAutoSave.js.map +1 -1
package/dist/preferences/versioning.d.ts +27 -0
package/dist/preferences/versioning.d.ts.map +1 -0
package/dist/preferences/versioning.js +62 -0
package/dist/preferences/versioning.js.map +1 -0
package/package.json +10 -8
package/src/AppMenu/AppMenu.tsx +64 -1
package/src/DocBlocksShell/DocBlocksShell.tsx +756 -80
package/src/Export/ExportDialog.tsx +208 -19
package/src/Export/ExportToolbarControls.tsx +45 -3
package/src/Export/export-options.ts +43 -1
package/src/Export/run-export.ts +190 -91
package/src/FileExplorer/FileExplorer.tsx +31 -9
package/src/WorkspacePicker/WorkspaceSettingsButton.tsx +9 -0
package/src/WorkspacePicker/WorkspaceSettingsDialog.tsx +121 -0
package/src/hooks/useAutoSave.ts +87 -29
package/src/preferences/versioning.ts +69 -0
package/src/styles/docblocks.css +920 -53

package/src/Export/run-export.ts CHANGED Viewed

@@ -9,10 +9,22 @@ import type {
 } from '@bendyline/squisq/markdown';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { markdownToDoc } from '@bendyline/squisq/doc';
+import type { Doc } from '@bendyline/squisq/schemas';
 import { applyTransform } from '@bendyline/squisq/transform';
 import { markdownDocToDocx } from '@bendyline/squisq-formats/docx';
 import { markdownDocToPdf } from '@bendyline/squisq-formats/pdf';
 import { docToPptx } from '@bendyline/squisq-formats/pptx';
+import {
+  docToHtml,
+  docToHtmlZip,
+  collectImagePaths,
+  markdownDocsToPlainHtmlBundle,
+  markdownDocsToHtmlBundle,
+  markdownDocToPlainHtml,
+} from '@bendyline/squisq-formats/html';
+import { containerToZip } from '@bendyline/squisq-formats/container';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+import { PLAYER_BUNDLE } from '@bendyline/squisq-react/standalone-source';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import type { ExportOptions, ExportFormat } from './export-options.js';
 import { FORMAT_EXTENSIONS } from './export-options.js';
@@ -57,8 +69,7 @@ export async function runExport(
   }
   if (options.format === 'html') {
-    const html = wrapMarkdownAsHtml(markdown);
-    downloadBlob(new Blob([html], { type: MIME_TYPES.html }), filename);
+    await runHtmlExport(markdown, filename, options, mediaContainer, selectedFile);
     return;
   }
@@ -94,94 +105,126 @@ export async function runExport(
   }
 }
-/** Wrap raw markdown in a basic styled HTML page. */
-function wrapMarkdownAsHtml(markdown: string): string {
-  // Convert markdown to simple HTML via the parser
-  const doc = parseMarkdown(markdown);
-  // Build a minimal representation from the parsed nodes
-  const lines: string[] = [];
-  for (const node of doc.children) {
-    lines.push(nodeToHtml(node));
-  }
-  const body = lines.join('\n');
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Document</title>
-<style>
-  body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; line-height: 1.6; color: #1f2937; }
-  h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.5em; }
-  pre { background: #f3f4f6; padding: 1em; border-radius: 4px; overflow-x: auto; }
-  code { background: #f3f4f6; padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
-  pre code { background: none; padding: 0; }
-  blockquote { border-left: 3px solid #d1d5db; margin-left: 0; padding-left: 1em; color: #6b7280; }
-  img { max-width: 100%; }
-  a { color: #3b82f6; }
-</style>
-</head>
-<body>
-${body}
-</body>
-</html>`;
-}
+/** Run the HTML export branch — handles all four htmlStyle × htmlBundle combinations. */
+async function runHtmlExport(
+  markdown: string,
+  htmlFilename: string,
+  options: ExportOptions,
+  mediaContainer?: ContentContainer | null,
+  selectedFile?: string | null,
+): Promise<void> {
+  const baseName = htmlFilename.replace(/\.html$/, '');
+  const zipName = `${baseName}.zip`;
+  // When `entryAsIndex` is on, a single-doc HTML download lands on
+  // disk as `index.html` so it drops straight into a static host. The
+  // recursive ZIP path doesn't care — squisq's bundle helpers handle
+  // the inside-zip rename and the cross-doc link rewrite themselves.
+  const singleHtmlFilename = options.entryAsIndex ? 'index.html' : htmlFilename;
+  const themeId = options.themeId !== 'standard' ? options.themeId : undefined;
-/** Convert a markdown AST node to HTML (basic). */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function nodeToHtml(node: any): string {
-  if (!node) return '';
-  switch (node.type) {
-    case 'heading': {
-      const tag = `h${node.depth ?? 1}`;
-      return `<${tag}>${childrenToHtml(node)}</${tag}>`;
+  // Recursive HTML bundle: when the user opted in, ask squisq to walk
+  // this doc's relative .md links and emit a ZIP with every reachable
+  // page rendered + cross-doc hrefs rewritten. Two pipelines:
+  //   • Plain  → `markdownDocsToPlainHtmlBundle` (semantic HTML)
+  //   • Rendered → `markdownDocsToHtmlBundle` (SquisqPlayer-rendered,
+  //                shared `squisq-player.js`, Doc-tree link rewrites)
+  // Both consume the workspace container to resolve sibling files —
+  // `mediaContainer` is already scoped to the selected file's parent
+  // dir, which is exactly the bundle's scope root. Falls back to the
+  // single-doc path if either prerequisite is missing rather than
+  // silently skipping the recursion.
+  if (options.includeLinkedDocs && mediaContainer && selectedFile) {
+    const entryPath = basenameForBundle(selectedFile);
+    if (options.htmlStyle === 'rendered') {
+      const blob = await markdownDocsToHtmlBundle({
+        entryPath,
+        readDocument: (path) => readDocumentFromContainer(mediaContainer, path),
+        readBinary: (path) => mediaContainer.readFile(path),
+        playerScript: PLAYER_BUNDLE,
+        title: baseName,
+        themeId,
+        mode: 'static',
+        entryAsIndex: options.entryAsIndex,
+      });
+      downloadBlob(blob, zipName);
+      return;
     }
-    case 'paragraph':
-      return `<p>${childrenToHtml(node)}</p>`;
-    case 'text':
-      return escapeHtml(node.value ?? '');
-    case 'strong':
-      return `<strong>${childrenToHtml(node)}</strong>`;
-    case 'emphasis':
-      return `<em>${childrenToHtml(node)}</em>`;
-    case 'delete':
-      return `<del>${childrenToHtml(node)}</del>`;
-    case 'inlineCode':
-      return `<code>${escapeHtml(node.value ?? '')}</code>`;
-    case 'code':
-      return `<pre><code>${escapeHtml(node.value ?? '')}</code></pre>`;
-    case 'blockquote':
-      return `<blockquote>${childrenToHtml(node)}</blockquote>`;
-    case 'list': {
-      const tag = node.ordered ? 'ol' : 'ul';
-      return `<${tag}>${childrenToHtml(node)}</${tag}>`;
+    const blob = await markdownDocsToPlainHtmlBundle({
+      entryPath,
+      readDocument: (path) => readDocumentFromContainer(mediaContainer, path),
+      readBinary: (path) => mediaContainer.readFile(path),
+      title: baseName,
+      themeId,
+      entryAsIndex: options.entryAsIndex,
+    });
+    downloadBlob(blob, zipName);
+    return;
+  }
+  if (options.htmlStyle === 'rendered') {
+    const mdDoc = parseMarkdown(markdown);
+    const baseDoc = markdownToDoc(mdDoc);
+    if (themeId) baseDoc.themeId = themeId;
+    const images = mediaContainer ? await resolveDocImages(baseDoc, mediaContainer) : undefined;
+    if (options.htmlBundle === 'zip') {
+      const blob = await docToHtmlZip(baseDoc, {
+        playerScript: PLAYER_BUNDLE,
+        images,
+        mode: 'static',
+        title: baseName,
+      });
+      downloadBlob(blob, zipName);
+      return;
     }
-    case 'listItem':
-      return `<li>${childrenToHtml(node)}</li>`;
-    case 'link':
-      return `<a href="${escapeAttr(node.url ?? '')}">${childrenToHtml(node)}</a>`;
-    case 'image':
-      return `<img src="${escapeAttr(node.url ?? '')}" alt="${escapeAttr(node.alt ?? '')}" />`;
-    case 'thematicBreak':
-      return '<hr />';
-    default:
-      return node.children ? childrenToHtml(node) : escapeHtml(node.value ?? '');
+    const html = docToHtml(baseDoc, {
+      playerScript: PLAYER_BUNDLE,
+      images,
+      mode: 'static',
+      title: baseName,
+    });
+    downloadBlob(new Blob([html], { type: MIME_TYPES.html }), singleHtmlFilename);
+    return;
   }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function childrenToHtml(node: any): string {
-  if (!node.children) return node.value ? escapeHtml(node.value) : '';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return node.children.map((c: any) => nodeToHtml(c)).join('');
-}
+  // Plain semantic HTML
+  const mdDoc = parseMarkdown(markdown);
+  const referencedImages = collectMarkdownImageUrls(mdDoc);
+  const localImages = referencedImages.filter((u) => !isExternalUrl(u));
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
+  if (options.htmlBundle === 'zip' && mediaContainer && localImages.length > 0) {
+    // Mirror the markdown's relative paths inside the zip so <img src="..."> still resolves.
+    const html = markdownDocToPlainHtml(mdDoc, { title: baseName, themeId });
+    const container = new MemoryContentContainer();
+    await container.writeFile('index.html', new TextEncoder().encode(html));
+    for (const url of localImages) {
+      const data = await mediaContainer.readFile(url);
+      if (!data) continue;
+      const cleanPath = url.replace(/^\/+/, '');
+      await container.writeFile(cleanPath, new Uint8Array(data));
+    }
+    const blob = await containerToZip(container);
+    downloadBlob(blob, zipName);
+    return;
+  }
-function escapeAttr(s: string): string {
-  return escapeHtml(s).replace(/"/g, '&quot;');
+  // Single-file plain HTML — embed local images as base64 data URIs.
+  const inlineMap = new Map<string, string>();
+  if (mediaContainer) {
+    for (const url of localImages) {
+      const data = await mediaContainer.readFile(url);
+      if (!data) continue;
+      inlineMap.set(url, arrayBufferToDataUrl(data, url));
+    }
+  }
+  const html = markdownDocToPlainHtml(mdDoc, {
+    title: baseName,
+    images: inlineMap.size > 0 ? inlineMap : undefined,
+    themeId,
+  });
+  downloadBlob(new Blob([html], { type: MIME_TYPES.html }), singleHtmlFilename);
 }
 const IMAGE_MIME: Record<string, string> = {
@@ -191,15 +234,37 @@ const IMAGE_MIME: Record<string, string> = {
   gif: 'image/gif',
   webp: 'image/webp',
   bmp: 'image/bmp',
+  svg: 'image/svg+xml',
 };
+function isExternalUrl(url: string): boolean {
+  return (
+    url.startsWith('http://') ||
+    url.startsWith('https://') ||
+    url.startsWith('data:') ||
+    url.startsWith('blob:')
+  );
+}
+function arrayBufferToDataUrl(data: ArrayBuffer, url: string): string {
+  const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
+  const mime = IMAGE_MIME[ext] ?? 'application/octet-stream';
+  // btoa requires a binary string; chunk to avoid call-stack issues on large files.
+  const bytes = new Uint8Array(data);
+  let binary = '';
+  const CHUNK = 0x8000;
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+  }
+  return `data:${mime};base64,${btoa(binary)}`;
+}
 /** Walk the markdown AST and collect all image URLs. */
-function collectImageUrls(doc: MarkdownDocument): string[] {
+function collectMarkdownImageUrls(doc: MarkdownDocument): string[] {
   const urls: string[] = [];
   function walkBlocks(nodes: MarkdownBlockNode[]): void {
     for (const node of nodes) {
       if ('children' in node && Array.isArray(node.children)) {
-        // Check if children are inline or block nodes
         for (const child of node.children as (MarkdownBlockNode | MarkdownInlineNode)[]) {
           if (child.type === 'image') {
             urls.push((child as { url: string }).url);
@@ -211,22 +276,20 @@ function collectImageUrls(doc: MarkdownDocument): string[] {
     }
   }
   walkBlocks(doc.children);
-  return urls;
+  return Array.from(new Set(urls));
 }
-/** Resolve image URLs to binary data from a ContentContainer. */
+/** Resolve image URLs (markdown → docx) to binary data from a ContentContainer. */
 async function resolveImages(
   doc: MarkdownDocument,
   container: ContentContainer,
 ): Promise<Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>> {
-  const urls = collectImageUrls(doc);
+  const urls = collectMarkdownImageUrls(doc);
   const map = new Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>();
   for (const url of urls) {
     if (map.has(url)) continue;
-    // Skip external URLs
-    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:'))
-      continue;
+    if (isExternalUrl(url)) continue;
     const data = await container.readFile(url);
     if (!data) continue;
     const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
@@ -236,3 +299,39 @@ async function resolveImages(
   return map;
 }
+/** Container-relative path for the bundle's entry document. `mediaContainer`
+ *  is already scoped to the selected file's parent directory, so the bundle
+ *  needs the basename ("docs/home.md" → "home.md"). */
+function basenameForBundle(selectedFile: string): string {
+  const clean = selectedFile.replace(/^\/+/, '');
+  const idx = clean.lastIndexOf('/');
+  return idx === -1 ? clean : clean.slice(idx + 1);
+}
+/** Read a UTF-8 text document from a ContentContainer. Returns null when
+ *  the file is missing — preserves the bundle's "abort with error" contract
+ *  for unreachable .md links. */
+async function readDocumentFromContainer(
+  container: ContentContainer,
+  path: string,
+): Promise<string | null> {
+  const data = await container.readFile(path);
+  if (!data) return null;
+  return new TextDecoder('utf-8').decode(data);
+}
+/** Resolve image paths referenced by a squisq Doc to ArrayBuffers for HTML export. */
+async function resolveDocImages(
+  doc: Doc,
+  container: ContentContainer,
+): Promise<Map<string, ArrayBuffer>> {
+  const paths = collectImagePaths(doc);
+  const map = new Map<string, ArrayBuffer>();
+  for (const path of paths) {
+    const data = await container.readFile(path);
+    if (!data) continue;
+    map.set(path, data);
+  }
+  return map;
+}

package/src/FileExplorer/FileExplorer.tsx CHANGED Viewed

@@ -13,6 +13,22 @@ import { NewFileIcon, NewFolderIcon, RefreshIcon } from '../icons.js';
 const SUPPORTED_EXTENSIONS = new Set(['.txt', '.md', '.docx', '.pdf', '.dbk', '.zip']);
+/**
+ * Hide auto-generated `<basename>_files/` companion folders from the
+ * tree. They hold per-document images and version snapshots — useful
+ * to the editor, noisy in the user-facing file list. The folders still
+ * exist on disk; we just don't surface them in the explorer.
+ */
+function isHiddenEntry(entry: FileSystemEntry): boolean {
+  if (entry.kind !== 'directory') return false;
+  const name = entry.path.replace(/^\/+/, '').split('/').pop() ?? '';
+  return name.endsWith('_files');
+}
+function filterVisible(entries: FileSystemEntry[]): FileSystemEntry[] {
+  return entries.filter((e) => !isHiddenEntry(e));
+}
 export interface FileExplorerProps {
   /** The filesystem to display. */
   provider: FileSystemProvider | null;
@@ -154,7 +170,7 @@ export function FileExplorer({
   const renderEntries = useCallback(
     (entries: FileSystemEntry[], depth: number): React.ReactNode => {
-      return entries.map((entry) => (
+      return filterVisible(entries).map((entry) => (
         <FileTreeNode
           key={entry.path}
           entry={entry}
@@ -245,16 +261,22 @@ export function FileExplorer({
         </div>
       )}
-      {/* Tree */}
-      <div className="db-tree" role="tree">
-        {tree.loading ? (
+      {/* Tree — role="tree" only when there are real treeitem children; the
+          loading/empty states get a status role so axe doesn't flag the
+          tree as missing required children. */}
+      {tree.loading ? (
+        <div className="db-tree" role="status" aria-live="polite">
           <div className="db-tree-loading">Loading...</div>
-        ) : tree.entries.length === 0 ? (
+        </div>
+      ) : filterVisible(tree.entries).length === 0 ? (
+        <div className="db-tree">
           <div className="db-tree-empty">No files yet</div>
-        ) : (
-          renderEntries(tree.entries, 0)
-        )}
-      </div>
+        </div>
+      ) : (
+        <div className="db-tree" role="tree">
+          {renderEntries(tree.entries, 0)}
+        </div>
+      )}
     </div>
   );
 }

package/src/WorkspacePicker/WorkspaceSettingsButton.tsx CHANGED Viewed

@@ -6,12 +6,14 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { WorkspaceIcon } from '../icons.js';
 export interface WorkspaceSettingsButtonProps {
+  onSettings: () => void;
   onRename: () => void;
   onDownload: () => void;
   onRemove: () => void;
 }
 export function WorkspaceSettingsButton({
+  onSettings,
   onRename,
   onDownload,
   onRemove,
@@ -50,6 +52,13 @@ export function WorkspaceSettingsButton({
       {isOpen && (
         <div className="db-ws-settings-dropdown" role="menu">
+          <button
+            className="db-ws-settings-item"
+            role="menuitem"
+            onClick={() => handleAction(onSettings)}
+          >
+            Workspace settings…
+          </button>
           <button
             className="db-ws-settings-item"
             role="menuitem"

package/src/WorkspacePicker/WorkspaceSettingsDialog.tsx ADDED Viewed

@@ -0,0 +1,121 @@
+/**
+ * WorkspaceSettingsDialog — per-workspace settings modal.
+ *
+ * Lets the user override the global versioning preference for a single
+ * workspace (or fall back to inheriting it). The override is stored on
+ * the WorkspaceDescriptor and persisted via `saveWorkspace`.
+ */
+import { useCallback, useEffect } from 'react';
+import type { WorkspaceDescriptor } from '@bendyline/docblocks/workspace';
+import {
+  isLocalWorkspaceType,
+  resolveVersioningEnabled,
+  type VersioningPreference,
+} from '../preferences/versioning.js';
+export type WorkspaceVersioningOverride = NonNullable<WorkspaceDescriptor['versioningOverride']>;
+export interface WorkspaceSettingsDialogProps {
+  workspace: WorkspaceDescriptor;
+  /** Current global versioning preference — used to label "Inherit". */
+  globalVersioningPreference: VersioningPreference;
+  /** Apply a new override and close the dialog. */
+  onChange: (override: WorkspaceVersioningOverride) => void;
+  onClose: () => void;
+}
+const VERSIONING_LABELS: Record<VersioningPreference, string> = {
+  on: 'on',
+  'browser-only': 'on for browser workspaces, off for local folders',
+  off: 'off',
+};
+export function WorkspaceSettingsDialog({
+  workspace,
+  globalVersioningPreference,
+  onChange,
+  onClose,
+}: WorkspaceSettingsDialogProps) {
+  // Treat absent/undefined as 'inherit' for the radio state.
+  const current: WorkspaceVersioningOverride = workspace.versioningOverride ?? 'inherit';
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose],
+  );
+  const isLocal = isLocalWorkspaceType(workspace.type);
+  const inheritedEnabled = resolveVersioningEnabled(
+    { ...workspace, versioningOverride: 'inherit' },
+    globalVersioningPreference,
+  );
+  const inheritLabel = `Inherit default — currently ${VERSIONING_LABELS[globalVersioningPreference]} (${inheritedEnabled ? 'on' : 'off'} for this workspace)`;
+  return (
+    <div className="db-dialog-overlay" onClick={handleBackdropClick}>
+      <div className="db-dialog" role="dialog" aria-label="Workspace settings">
+        <div className="db-dialog-header">
+          <h2 className="db-dialog-title">Workspace settings</h2>
+          <button type="button" className="db-dialog-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+        <div className="db-dialog-body">
+          <p className="db-settings-hint">
+            <strong>{workspace.name}</strong> &middot;{' '}
+            {isLocal ? 'Local folder workspace' : 'Browser workspace'}
+          </p>
+          <fieldset className="db-settings-fieldset">
+            <legend className="db-settings-legend">Version history</legend>
+            <p className="db-settings-hint">
+              Controls whether DocBlocks keeps prior revisions in{' '}
+              <code>&lt;name&gt;_files/.versions/</code> for documents in this workspace.
+            </p>
+            <label className="db-settings-radio">
+              <input
+                type="radio"
+                name="ws-versioning"
+                value="inherit"
+                checked={current === 'inherit'}
+                onChange={() => onChange('inherit')}
+              />
+              {inheritLabel}
+            </label>
+            <label className="db-settings-radio">
+              <input
+                type="radio"
+                name="ws-versioning"
+                value="on"
+                checked={current === 'on'}
+                onChange={() => onChange('on')}
+              />
+              On for this workspace
+            </label>
+            <label className="db-settings-radio">
+              <input
+                type="radio"
+                name="ws-versioning"
+                value="off"
+                checked={current === 'off'}
+                onChange={() => onChange('off')}
+              />
+              Off for this workspace
+            </label>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+  );
+}