@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/FolderView.tsx

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+
+/**
+ * One entry in a {@link FolderView} — a file or subfolder. Host-defined
+ * `path` is opaque to this component: it's used as the React key and
+ * handed back verbatim to the open callbacks so the host can resolve it.
+ */
+export interface FolderEntry {
+  /** Display name (basename). */
+  name: string;
+  /** Full host path. Opaque here; passed back on open. */
+  path: string;
+  isDirectory: boolean;
+}
+
+export interface FolderViewProps {
+  /** Folder display name (basename) shown in the header. */
+  name: string;
+  /** Immediate children of the folder — subfolders and files. */
+  entries: FolderEntry[];
+  /** Open a file entry. The host decides what "open" means. */
+  onOpenFile: (entry: FolderEntry) => void;
+  /** Drill into a subfolder. */
+  onOpenFolder: (entry: FolderEntry) => void;
+  /** Primary action — create a new document in this folder. */
+  onNewDocument: () => void;
+  /** Secondary action — create a new subfolder. Omit to hide the button. */
+  onNewFolder?: () => void;
+  /** Color theme (default `'light'`). */
+  theme?: 'light' | 'dark';
+  /** CSS height for the container (default `'100%'`). */
+  height?: string;
+  /** Override the per-entry icon. Defaults to FontAwesome file/folder glyphs. */
+  iconFor?: (entry: FolderEntry) => ReactNode;
+}
+
+/**
+ * FolderView — a standalone folder browser surface.
+ *
+ * Lists a folder's files and subfolders plus a prominent "New document"
+ * action (and an optional "New folder"). It's the companion to
+ * {@link EditorShell}: where the shell edits a single document, this
+ * presents the directory around it.
+ *
+ * Like the shell, it's host-agnostic — the consumer supplies the
+ * `entries` and the open / new callbacks, and FolderView owns only the
+ * presentation and theming. It holds no state and reads nothing from
+ * disk, so it composes into any storage backend.
+ */
+export function FolderView({
+  name,
+  entries,
+  onOpenFile,
+  onOpenFolder,
+  onNewDocument,
+  onNewFolder,
+  theme = 'light',
+  height = '100%',
+  iconFor = defaultIconFor,
+}: FolderViewProps) {
+  // Folders first, then files; each group alphabetical (case-insensitive).
+  const sorted = [...entries].sort((a, b) => {
+    if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+    return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+  });
+
+  return (
+    <div className="squisq-folder-view" data-theme={theme} style={{ height }}>
+      <div className="squisq-folder-view-header">
+        <i
+          className="fa-regular fa-folder-open squisq-folder-view-header-icon"
+          aria-hidden="true"
+        />
+        <span className="squisq-folder-view-title">{name}</span>
+        <span className="squisq-folder-view-count">
+          {entries.length} {entries.length === 1 ? 'item' : 'items'}
+        </span>
+      </div>
+
+      <div className="squisq-folder-view-body">
+        {sorted.length === 0 ? (
+          <p className="squisq-folder-view-empty">This folder is empty.</p>
+        ) : (
+          <ul className="squisq-folder-view-list">
+            {sorted.map((entry) => (
+              <li key={entry.path}>
+                <button
+                  type="button"
+                  className="squisq-folder-view-item"
+                  onClick={() => (entry.isDirectory ? onOpenFolder(entry) : onOpenFile(entry))}
+                >
+                  <span className="squisq-folder-view-item-icon">{iconFor(entry)}</span>
+                  <span className="squisq-folder-view-item-name">{entry.name}</span>
+                  {entry.isDirectory && (
+                    <i
+                      className="fa-solid fa-chevron-right squisq-folder-view-item-chevron"
+                      aria-hidden="true"
+                    />
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="squisq-folder-view-actions">
+        <button type="button" className="squisq-folder-view-new" onClick={onNewDocument}>
+          <i className="fa-solid fa-plus" aria-hidden="true" /> New document
+        </button>
+        {onNewFolder && (
+          <button type="button" className="squisq-folder-view-new-folder" onClick={onNewFolder}>
+            <i className="fa-regular fa-folder" aria-hidden="true" /> New folder
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const IMAGE_RE = /\.(png|jpe?g|gif|svg|webp|bmp|avif)$/i;
+
+function defaultIconFor(entry: FolderEntry): ReactNode {
+  if (entry.isDirectory) {
+    return <i className="fa-regular fa-folder fa-fw" aria-hidden="true" />;
+  }
+  if (IMAGE_RE.test(entry.name)) {
+    return <i className="fa-regular fa-file-image fa-fw" aria-hidden="true" />;
+  }
+  return <i className="fa-regular fa-file-lines fa-fw" aria-hidden="true" />;
+}

package/src/Icon.tsx

@@ -0,0 +1,26 @@
+/**
+ * Icon — renders a Font Awesome Free glyph via the webfont CSS that
+ * `styles/index.css` imports (`@fortawesome/fontawesome-free`).
+ *
+ * Icons are decorative: the surrounding control owns the accessible
+ * label (`aria-label` / `data-tooltip`), so the glyph is marked
+ * `aria-hidden`. Sizing and color flow from the parent's `font-size`
+ * and `color`, matching how the inline `{[icon]}` content nodes render
+ * (see `InlineIcon.ts`).
+ */
+
+import type { CSSProperties } from 'react';
+
+export interface IconProps {
+  /** Full Font Awesome class string, e.g. `"fa-solid fa-bold"`. */
+  icon: string;
+  /** Extra class names appended after the Font Awesome classes. */
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function Icon({ icon, className, style }: IconProps) {
+  return (
+    <i className={className ? `${icon} ${className}` : icon} style={style} aria-hidden="true" />
+  );
+}

package/src/ImageEditor.tsx

@@ -13,7 +13,7 @@
  * `exportImageEditDoc` from `@bendyline/squisq/imageEdit`.
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { exportImageEditDoc, type ImageEditExportFormat } from '@bendyline/squisq/imageEdit';
 import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
@@ -24,6 +24,13 @@ import { PropertiesPanel } from './imageEditor/PropertiesPanel.js';
 import { Toolbar } from './imageEditor/Toolbar.js';
 import { useImageEditor } from './imageEditor/useImageEditor.js';
 import { useImageEditorTokens } from './imageEditor/useImageEditorTokens.js';
+import {
+  createShapeLayer,
+  createLinearShapeLayer,
+  isLinearShapeKind,
+} from './imageEditor/createShapeLayer.js';
+
+const ZOOM_STEPS = [0.0625, 0.083, 0.125, 0.167, 0.25, 0.333, 0.5, 0.667, 1, 1.5, 2, 3, 4, 8, 16];
 
 export interface ImageEditorProps {
   /**
@@ -107,6 +114,33 @@ export function ImageEditor(props: ImageEditorProps) {
   // re-lists without polling.
   const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
 
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const [zoom, setZoom] = useState(1.0);
+
+  const handleZoomIn = useCallback(() => {
+    setZoom((z) => ZOOM_STEPS.find((s) => s > z + 0.001) ?? 16);
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    setZoom((z) => [...ZOOM_STEPS].reverse().find((s) => s < z - 0.001) ?? 0.0625);
+  }, []);
+  const handleZoomSet = useCallback((z: number) => {
+    setZoom(Math.max(0.0625, Math.min(16, z)));
+  }, []);
+  const handleZoom1to1 = useCallback(() => setZoom(1), []);
+  const handleZoomFit = useCallback(() => {
+    if (!state || !surfaceRef.current) return;
+    const { clientWidth, clientHeight } = surfaceRef.current;
+    const PADDING = 32;
+    const fitZ = Math.min(
+      (clientWidth - PADDING) / state.doc.canvas.width,
+      (clientHeight - PADDING) / state.doc.canvas.height,
+    );
+    setZoom(Math.max(0.0625, Math.min(16, fitZ)));
+  }, [state]);
+
+  // ID of a newly-created text layer that should immediately enter inline editing.
+  const [requestEditLayerId, setRequestEditLayerId] = useState<string | null>(null);
+
   const handleExport = useCallback(
     async (format: ImageEditExportFormat) => {
       if (!state) return;
@@ -198,9 +232,11 @@ export function ImageEditor(props: ImageEditorProps) {
 
   const handleCreateTextAt = useCallback(
     (x: number, y: number) => {
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
       dispatch({
         type: 'add-layer',
         layer: {
+          id,
           type: 'text',
           name: 'Text',
           position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
@@ -211,35 +247,33 @@ export function ImageEditor(props: ImageEditorProps) {
         },
       });
       dispatch({ type: 'set-tool', tool: 'select' });
+      setRequestEditLayerId(id);
     },
     [dispatch],
   );
 
+  const shapeKind = state?.shapeKind ?? 'rectangle';
+  const shapeDragDraw = isLinearShapeKind(shapeKind);
+
   const handleCreateShapeAt = useCallback(
     (x: number, y: number) => {
-      dispatch({
-        type: 'add-layer',
-        layer: {
-          type: 'shape',
-          name: 'Rectangle',
-          position: {
-            x: Math.round(x - 60),
-            y: Math.round(y - 40),
-            width: 120,
-            height: 80,
-          },
-          content: {
-            shape: 'rect',
-            fill: '#3399ff',
-            stroke: '#1a4d80',
-            strokeWidth: 2,
-            borderRadius: 8,
-          },
-        },
-      });
+      const layer = createShapeLayer(shapeKind, x, y);
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
+      dispatch({ type: 'add-layer', layer: { ...layer, id } });
+      dispatch({ type: 'set-tool', tool: 'select' });
+      if (layer.type === 'text') {
+        setRequestEditLayerId(id);
+      }
+    },
+    [dispatch, shapeKind],
+  );
+
+  const handleCreateShapeFromPoints = useCallback(
+    (x1: number, y1: number, x2: number, y2: number) => {
+      dispatch({ type: 'add-layer', layer: createLinearShapeLayer(shapeKind, x1, y1, x2, y2) });
       dispatch({ type: 'set-tool', tool: 'select' });
     },
-    [dispatch],
+    [dispatch, shapeKind],
   );
 
   if (error) {
@@ -275,6 +309,7 @@ export function ImageEditor(props: ImageEditorProps) {
       <Toolbar
         doc={state.doc}
         tool={state.tool}
+        shapeKind={state.shapeKind}
         dispatch={dispatch}
         uploadAsset={uploadAsset}
         onExport={handleExport}
@@ -296,6 +331,12 @@ export function ImageEditor(props: ImageEditorProps) {
             />
           ) : null
         }
+        zoom={zoom}
+        onZoomIn={handleZoomIn}
+        onZoomOut={handleZoomOut}
+        onZoomSet={handleZoomSet}
+        onZoomFit={handleZoomFit}
+        onZoom1to1={handleZoom1to1}
       />
       <div className="squisq-image-editor-body">
         <div className="squisq-image-editor-center">
@@ -307,6 +348,12 @@ export function ImageEditor(props: ImageEditorProps) {
             dispatch={dispatch}
             onCreateTextAt={handleCreateTextAt}
             onCreateShapeAt={handleCreateShapeAt}
+            onCreateShapeFromPoints={handleCreateShapeFromPoints}
+            shapeDragDraw={shapeDragDraw}
+            zoom={zoom}
+            onSetZoom={handleZoomSet}
+            surfaceRef={surfaceRef}
+            requestEditLayerId={requestEditLayerId}
           />
         </div>
         <div className="squisq-image-editor-side">

package/src/OutlinePanel.tsx

@@ -17,18 +17,69 @@ import { templateLabel } from './TemplatePicker';
 import { useHeadingLayout } from './useHeadingLayout';
 import { usePreviewSettingsOptional } from './PreviewControls';
 
+/**
+ * Responsive default width for the outline pane, used when no fixed `width`
+ * (or `--squisq-outline-width`) is supplied: never narrower than 260px, grows
+ * with the viewport so it stretches out to fill horizontal space when there's
+ * room, and caps at 460px so it never dominates the editor. A viewport unit
+ * (rather than
+ * a container unit) keeps the pane and the toolbar's view-tabs — which read the
+ * same value — resolving to an identical width, so their right edges stay
+ * aligned.
+ */
+export const OUTLINE_RESPONSIVE_WIDTH = 'clamp(260px, 30vw, 460px)';
+
 export interface OutlinePanelProps {
-  /** Width of the pane in pixels (default: 240). */
+  /**
+   * Fixed width of the pane in pixels. When omitted, the pane sizes
+   * responsively from `--squisq-outline-width` (falling back to
+   * {@link OUTLINE_RESPONSIVE_WIDTH}) so it stretches on wider screens.
+   */
   width?: number;
   /** Optional CSS class for the outer container. */
   className?: string;
 }
 
-export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
-  const { doc, markdownSource, setMarkdownSource } = useEditorContext();
+export function OutlinePanel({ width, className }: OutlinePanelProps) {
+  const {
+    doc,
+    markdownSource,
+    setMarkdownSource,
+    layoutMode,
+    goToBlockByLine,
+    activeBlockStartLine,
+  } = useEditorContext();
   const paneRef = useRef<HTMLElement | null>(null);
   const { scrollToBlock } = useHeadingLayout(paneRef);
-  const activeBlockId = useActiveOutlineBlockId();
+  const cursorActiveId = useActiveOutlineBlockId();
+
+  // In block-at-a-time mode there's no live cursor across the whole document
+  // (only the active block is mounted), so the highlight follows the card:
+  // match the block whose heading begins on the active slice's source line.
+  const blockModeActiveId = useMemo(() => {
+    if (layoutMode !== 'block' || activeBlockStartLine == null || !doc) return null;
+    const match = flattenBlocks(doc.blocks).find(
+      (b) => b.sourceHeading?.position?.start.line === activeBlockStartLine,
+    );
+    return match?.id ?? null;
+  }, [layoutMode, activeBlockStartLine, doc]);
+  const activeBlockId = layoutMode === 'block' ? blockModeActiveId : cursorActiveId;
+
+  // Clicking a row jumps the card to that block in block mode, or scrolls the
+  // editor to it in document mode.
+  const handleSelect = useCallback(
+    (block: Block) => {
+      if (layoutMode === 'block') {
+        const line = block.sourceHeading?.position?.start.line;
+        if (typeof line === 'number') {
+          goToBlockByLine(line);
+          return;
+        }
+      }
+      scrollToBlock(block);
+    },
+    [layoutMode, goToBlockByLine, scrollToBlock],
+  );
 
   // Promote / demote the row's heading by rewriting just the `#` prefix
   // on the heading line. Falls through when the new depth would leave the
@@ -53,9 +104,15 @@ export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
   const accentColor = previewSettings?.activeTheme?.colors?.primary;
 
   const isEmpty = !doc || doc.blocks.length === 0 || !hasAnyHeading(doc.blocks);
+  // Fixed px when a width is supplied; otherwise size from the shared
+  // `--squisq-outline-width` variable (the shell sets it, and the toolbar's
+  // view-tabs read the same value so their right edges stay aligned). The
+  // clamp fallback lets a standalone OutlinePanel stretch on wide screens too.
+  const basis =
+    width != null ? `${width}px` : `var(--squisq-outline-width, ${OUTLINE_RESPONSIVE_WIDTH})`;
   const paneStyle: CSSProperties = {
-    width: `${width}px`,
-    flex: `0 0 ${width}px`,
+    width: basis,
+    flex: `0 0 ${basis}`,
     overflow: 'auto',
     ...(accentColor
       ? ({ ['--squisq-outline-accent' as string]: accentColor } as CSSProperties)
@@ -81,7 +138,7 @@ export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
               key={b.id}
               block={b}
               activeBlockId={activeBlockId}
-              onSelect={scrollToBlock}
+              onSelect={handleSelect}
               onChangeLevel={changeHeadingLevel}
             />
           ))}

package/src/PlainHtmlPreview.tsx

@@ -21,10 +21,25 @@ import type { CSSProperties } from 'react';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
 import type { MarkdownDocument, HtmlNode } from '@bendyline/squisq/markdown';
 import type { MediaProvider, Theme } from '@bendyline/squisq/schemas';
-import { markdownDocToPlainHtml } from '@bendyline/squisq-formats/html';
 import { normalizeMalformedAssetUrl } from './utils/normalizeMalformedAssetUrl';
 import { collectInlineFontAwesomeCss } from './utils/collectInlineFontAwesomeCss';
 
+// formats/html is ~50 KB and only needed for the plain-HTML preview pane.
+// Lazy-load on first render so it doesn't sit in the editor's main chunk.
+type RenderFn = typeof import('@bendyline/squisq-formats/html').markdownDocToPlainHtml;
+let cachedRender: RenderFn | null = null;
+let cachedRenderPromise: Promise<RenderFn> | null = null;
+function loadRenderFn(): Promise<RenderFn> {
+  if (cachedRender) return Promise.resolve(cachedRender);
+  if (!cachedRenderPromise) {
+    cachedRenderPromise = import('@bendyline/squisq-formats/html').then((m) => {
+      cachedRender = m.markdownDocToPlainHtml;
+      return cachedRender;
+    });
+  }
+  return cachedRenderPromise;
+}
+
 export interface PlainHtmlPreviewProps {
   /** Raw markdown source. */
   markdown: string;
@@ -129,9 +144,21 @@ export function PlainHtmlPreview({
   // fetch under `allow-same-origin`.
   const iconsCss = useMemo(() => collectInlineFontAwesomeCss(), []);
 
+  const [renderFn, setRenderFn] = useState<RenderFn | null>(() => cachedRender);
+  useEffect(() => {
+    if (renderFn) return;
+    let cancelled = false;
+    loadRenderFn().then((fn) => {
+      if (!cancelled) setRenderFn(() => fn);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [renderFn]);
+
   const html = useMemo(
-    () => markdownDocToPlainHtml(mdDoc, { title, images: mergedImages, theme, iconsCss }),
-    [mdDoc, title, mergedImages, theme, iconsCss],
+    () => (renderFn ? renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss }) : ''),
+    [renderFn, mdDoc, title, mergedImages, theme, iconsCss],
   );
 
   return (