@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/codeSnippet/codeSnippetCommands.ts

@@ -1,21 +0,0 @@
-/** Lossless edits for language-tagged code fences. */
-
-import type { Editor } from '@tiptap/react';
-import { findCodeSnippetBlockPos, isCodeSnippetNode } from './CodeSnippetExtension';
-
-export function replaceCodeSnippetText(editor: Editor, blockId: string, nextText: string): boolean {
-  const pos = findCodeSnippetBlockPos(editor, blockId);
-  if (pos === null) return false;
-  const node = editor.state.doc.nodeAt(pos);
-  if (!node || !isCodeSnippetNode(node)) return false;
-  if (node.textContent === nextText) return true;
-
-  const from = pos + 1;
-  const to = pos + node.nodeSize - 1;
-  const tr =
-    nextText.length > 0
-      ? editor.state.tr.replaceWith(from, to, editor.state.schema.text(nextText))
-      : editor.state.tr.delete(from, to);
-  editor.view.dispatch(tr);
-  return true;
-}

package/src/codeSnippet/codeSnippetData.ts

@@ -1,43 +0,0 @@
-/** Live source/language view for one registered code snippet fence. */
-
-import { useEffect, useMemo, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { findCodeSnippetBlockPos, isCodeSnippetNode } from './CodeSnippetExtension';
-import { codeSnippetLanguageLabel, monacoLanguageForFence } from './codeSnippetLanguages';
-
-export interface CodeSnippetData {
-  /** Fence language exactly as stored in the ProseMirror node. */
-  fenceLanguage: string;
-  label: string;
-  monacoLanguage: string;
-  /** Source exactly as stored inside the code block. */
-  source: string;
-}
-
-export function useCodeSnippetData(editor: Editor, blockId: string): CodeSnippetData | null {
-  const [version, setVersion] = useState(0);
-  useEffect(() => {
-    const onTransaction = () => setVersion((value) => value + 1);
-    editor.on('transaction', onTransaction);
-    return () => {
-      editor.off('transaction', onTransaction);
-    };
-  }, [editor]);
-
-  return useMemo(() => {
-    const pos = findCodeSnippetBlockPos(editor, blockId);
-    if (pos === null) return null;
-    const node = editor.state.doc.nodeAt(pos);
-    if (!node || !isCodeSnippetNode(node)) return null;
-    const rawLanguage = (node.attrs as { language?: unknown }).language;
-    const fenceLanguage = typeof rawLanguage === 'string' ? rawLanguage : '';
-    return {
-      fenceLanguage,
-      label: codeSnippetLanguageLabel(fenceLanguage),
-      monacoLanguage: monacoLanguageForFence(fenceLanguage),
-      source: node.textContent,
-    };
-    // `version` is the transaction-backed invalidation token.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, blockId, version]);
-}

package/src/codeSnippet/codeSnippetLanguages.ts

@@ -1,216 +0,0 @@
-/** Languages offered by the Insert Code Snippet menu and understood by Monaco. */
-
-export interface CodeSnippetLanguage {
-  /** Language written after the opening Markdown fence. */
-  readonly fenceLanguage: string;
-  /** Human-readable picker/header label. */
-  readonly label: string;
-  /** Monaco language id used for syntax highlighting and language services. */
-  readonly monacoLanguage: string;
-  /** Small, immediately editable body inserted for a new snippet. */
-  readonly starter: string;
-}
-
-export const CODE_SNIPPET_LANGUAGES: readonly CodeSnippetLanguage[] = [
-  {
-    fenceLanguage: 'typescript',
-    label: 'TypeScript',
-    monacoLanguage: 'typescript',
-    starter: "const message: string = 'Hello, world!';",
-  },
-  {
-    fenceLanguage: 'javascript',
-    label: 'JavaScript',
-    monacoLanguage: 'javascript',
-    starter: "const message = 'Hello, world!';",
-  },
-  {
-    fenceLanguage: 'tsx',
-    label: 'TSX',
-    monacoLanguage: 'typescript',
-    starter: 'export function Component() {\n  return <div>Hello, world!</div>;\n}',
-  },
-  {
-    fenceLanguage: 'jsx',
-    label: 'JSX',
-    monacoLanguage: 'javascript',
-    starter: 'export function Component() {\n  return <div>Hello, world!</div>;\n}',
-  },
-  {
-    fenceLanguage: 'json',
-    label: 'JSON',
-    monacoLanguage: 'json',
-    starter: '{\n  "key": "value"\n}',
-  },
-  {
-    fenceLanguage: 'html',
-    label: 'HTML',
-    monacoLanguage: 'html',
-    starter: '<div>Hello, world!</div>',
-  },
-  {
-    fenceLanguage: 'css',
-    label: 'CSS',
-    monacoLanguage: 'css',
-    starter: '.example {\n  color: #2563eb;\n}',
-  },
-  {
-    fenceLanguage: 'python',
-    label: 'Python',
-    monacoLanguage: 'python',
-    starter: 'print("Hello, world!")',
-  },
-  {
-    fenceLanguage: 'bash',
-    label: 'Shell',
-    monacoLanguage: 'shell',
-    starter: 'echo "Hello, world!"',
-  },
-  {
-    fenceLanguage: 'sql',
-    label: 'SQL',
-    monacoLanguage: 'sql',
-    starter: 'SELECT *\nFROM table_name;',
-  },
-  {
-    fenceLanguage: 'yaml',
-    label: 'YAML',
-    monacoLanguage: 'yaml',
-    starter: 'key: value',
-  },
-  {
-    fenceLanguage: 'markdown',
-    label: 'Markdown',
-    monacoLanguage: 'markdown',
-    starter: '# Heading',
-  },
-  {
-    fenceLanguage: 'java',
-    label: 'Java',
-    monacoLanguage: 'java',
-    starter: 'class Main {\n  public static void main(String[] args) {\n  }\n}',
-  },
-  {
-    fenceLanguage: 'csharp',
-    label: 'C#',
-    monacoLanguage: 'csharp',
-    starter: 'Console.WriteLine("Hello, world!");',
-  },
-  {
-    fenceLanguage: 'cpp',
-    label: 'C++',
-    monacoLanguage: 'cpp',
-    starter: '#include <iostream>\n\nint main() {\n  return 0;\n}',
-  },
-  {
-    fenceLanguage: 'go',
-    label: 'Go',
-    monacoLanguage: 'go',
-    starter: 'package main\n\nfunc main() {\n}',
-  },
-  {
-    fenceLanguage: 'rust',
-    label: 'Rust',
-    monacoLanguage: 'rust',
-    starter: 'fn main() {\n  println!("Hello, world!");\n}',
-  },
-  {
-    fenceLanguage: 'ruby',
-    label: 'Ruby',
-    monacoLanguage: 'ruby',
-    starter: 'puts "Hello, world!"',
-  },
-  {
-    fenceLanguage: 'php',
-    label: 'PHP',
-    monacoLanguage: 'php',
-    starter: '<?php\necho "Hello, world!";',
-  },
-  {
-    fenceLanguage: 'swift',
-    label: 'Swift',
-    monacoLanguage: 'swift',
-    starter: 'print("Hello, world!")',
-  },
-  {
-    fenceLanguage: 'kotlin',
-    label: 'Kotlin',
-    monacoLanguage: 'kotlin',
-    starter: 'fun main() {\n  println("Hello, world!")\n}',
-  },
-  {
-    fenceLanguage: 'dockerfile',
-    label: 'Dockerfile',
-    monacoLanguage: 'dockerfile',
-    starter: 'FROM node:22-alpine',
-  },
-] as const;
-
-const BY_FENCE_LANGUAGE: ReadonlyMap<string, CodeSnippetLanguage> = new Map(
-  CODE_SNIPPET_LANGUAGES.map((language) => [language.fenceLanguage, language]),
-);
-
-/** Languages owned by the diagram/tree/timeline editors or their auto-detection gates. */
-const SPECIAL_FENCE_LANGUAGES = new Set([
-  'text',
-  'txt',
-  'plaintext',
-  'plain',
-  'ascii',
-  'diagram',
-  'tree',
-  'timeline',
-  'mermaid',
-]);
-
-const MONACO_LANGUAGE_ALIASES: Readonly<Record<string, string>> = {
-  c: 'c',
-  'c++': 'cpp',
-  'c#': 'csharp',
-  cs: 'csharp',
-  cxx: 'cpp',
-  docker: 'dockerfile',
-  htm: 'html',
-  js: 'javascript',
-  jsx: 'javascript',
-  md: 'markdown',
-  py: 'python',
-  rb: 'ruby',
-  sh: 'shell',
-  shell: 'shell',
-  ts: 'typescript',
-  tsx: 'typescript',
-  yml: 'yaml',
-};
-
-/** The first token is the syntax id; any remaining fence metadata stays untouched. */
-export function codeSnippetFenceLanguageToken(language: string | null | undefined): string {
-  if (typeof language !== 'string') return '';
-  return language.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? '';
-}
-
-/** True for explicit language-tagged fences not owned by a richer Squisq block editor. */
-export function isCodeSnippetFenceLanguage(language: string | null | undefined): boolean {
-  const token = codeSnippetFenceLanguageToken(language);
-  return token.length > 0 && !SPECIAL_FENCE_LANGUAGES.has(token);
-}
-
-export function monacoLanguageForFence(language: string | null | undefined): string {
-  const token = codeSnippetFenceLanguageToken(language);
-  const catalogEntry = BY_FENCE_LANGUAGE.get(token);
-  return (catalogEntry?.monacoLanguage ?? MONACO_LANGUAGE_ALIASES[token] ?? token) || 'plaintext';
-}
-
-export function codeSnippetLanguageLabel(language: string | null | undefined): string {
-  const token = codeSnippetFenceLanguageToken(language);
-  const catalogEntry = BY_FENCE_LANGUAGE.get(token);
-  if (catalogEntry) return catalogEntry.label;
-  return token
-    ? token.replace(/(^|[-_])([a-z])/g, (_match, _prefix, letter) => letter.toUpperCase())
-    : 'Code';
-}
-
-/** Markdown insertion form. The caller decides whether to wrap selected text or use a starter. */
-export function codeSnippetMarkdown(language: string, source: string): string {
-  return `\n\`\`\`${language}\n${source}\n\`\`\`\n`;
-}

package/src/customTemplates/AddBin.tsx

@@ -1,126 +0,0 @@
-/**
- * AddBin — the template designer's "things you can add" sidebar.
- *
- * Three sections, all feeding the same canvas:
- *   - Placeholders: dynamic tokens ({title}, {content}, …) substituted at
- *     render time. See {@link TOKEN_DEFS}.
- *   - Shapes: Squisq's standard shape library. See {@link SHAPE_DEFS}.
- *   - Media: drop an image to pin as a static, full-bleed background.
- *
- * Tokens and shapes can be placed two ways — drag onto the canvas, or
- * click to arm the matching tool and then click the canvas. The drag
- * carries the entry id under {@link TOKEN_DRAG_MIME} / {@link SHAPE_DRAG_MIME};
- * the TemplateDesigner's drop handler reads it (see `buildTokenLayer` /
- * `buildShapeLayer`). Media is upload-backed and handled by the designer.
- */
-
-import { useRef } from 'react';
-import { TOKEN_DEFS, TOKEN_DRAG_MIME } from './tokenDefs';
-import { SHAPE_DEFS, SHAPE_DRAG_MIME } from './shapeDefs';
-import { ShapeGlyph } from './ShapeGlyph';
-
-interface AddBinProps {
-  /** Currently active tool id — the matching button is highlighted. */
-  activeToolId: string;
-  /** Switch the Scene's active tool (a token or shape place tool). */
-  onActivate: (toolId: string) => void;
-  /** Whether media can be added (a MediaProvider is wired up). */
-  canAddMedia: boolean;
-  /** Add picked image files as static background layer(s). */
-  onAddMediaFiles: (files: File[]) => void;
-}
-
-export function AddBin({ activeToolId, onActivate, canAddMedia, onAddMediaFiles }: AddBinProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <aside className="squisq-template-designer-palette" aria-label="Add to layout">
-      <h3 className="squisq-template-designer-palette-title">Add</h3>
-
-      {/* Placeholders — dynamic tokens substituted at render time. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Placeholders</div>
-        <div className="squisq-template-designer-palette-list">
-          {TOKEN_DEFS.map((t) => (
-            <button
-              key={t.id}
-              type="button"
-              draggable
-              className={`squisq-template-designer-palette-item${
-                activeToolId === t.id ? ' squisq-template-designer-palette-item--active' : ''
-              }`}
-              onDragStart={(e) => {
-                e.dataTransfer.setData(TOKEN_DRAG_MIME, t.id);
-                // Some browsers require text/plain for the drag to start.
-                e.dataTransfer.setData('text/plain', t.token);
-                e.dataTransfer.effectAllowed = 'copy';
-              }}
-              onClick={() => onActivate(t.id)}
-              title={t.desc}
-            >
-              <span className="squisq-template-designer-palette-item-preview">{t.token}</span>
-              <span className="squisq-template-designer-palette-item-label">{t.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Shapes — the standard shape library. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Shapes</div>
-        <div className="squisq-template-designer-palette-shapes">
-          {SHAPE_DEFS.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              draggable
-              className={`squisq-template-designer-shape-item${
-                activeToolId === s.id ? ' squisq-template-designer-shape-item--active' : ''
-              }`}
-              onDragStart={(e) => {
-                e.dataTransfer.setData(SHAPE_DRAG_MIME, s.id);
-                e.dataTransfer.setData('text/plain', s.label);
-                e.dataTransfer.effectAllowed = 'copy';
-              }}
-              onClick={() => onActivate(s.id)}
-              title={s.label}
-              aria-label={s.label}
-            >
-              <ShapeGlyph kind={s.kind} rounded={s.rounded} />
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Media — drop an image to pin a static background. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Media</div>
-        <p className="squisq-template-designer-palette-hint">
-          {canAddMedia
-            ? 'Drop an image on the canvas to add a full-bleed background.'
-            : 'Connect media storage to add image backgrounds.'}
-        </p>
-        <button
-          type="button"
-          className="squisq-template-designer-palette-media-add"
-          disabled={!canAddMedia}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          Add image…
-        </button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          style={{ display: 'none' }}
-          onChange={(e) => {
-            const files = Array.from(e.target.files ?? []);
-            if (files.length) onAddMediaFiles(files);
-            e.target.value = ''; // allow re-selecting the same file
-          }}
-        />
-      </div>
-    </aside>
-  );
-}

package/src/customTemplates/CustomLayoutManager.tsx

@@ -1,234 +0,0 @@
-/**
- * CustomLayoutManager — a near-full-window modal for managing custom
- * layouts (templates). The left rail lists every layout available to the
- * document — those inlined in the doc and those saved to the browser
- * library — plus a "New layout" button. The right pane embeds the
- * existing {@link TemplateDesigner} (in `embedded` mode) so the selected
- * layout can be authored in place.
- *
- * The manager seeds its own {@link CustomTemplateProvider} from the
- * active doc (via {@link useDocCustomTemplates}) so it works whether or
- * not the host already mounted a provider — the toolbar that opens it
- * sits outside the WYSIWYG editor's provider.
- */
-
-import { useCallback, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import type { CustomTemplateDefinition, MediaProvider } from '@bendyline/squisq/schemas';
-import {
-  CustomTemplateProvider,
-  useCustomTemplates,
-  type CustomTemplateContextValue,
-} from './CustomTemplateContext';
-import { TemplateDesigner, type DesignerSaveTarget } from './TemplateDesigner';
-import { TemplateThumbnail } from './thumbnail';
-import { useDocCustomTemplates } from './useDocCustomTemplates';
-import { useEditorContext } from '../EditorContext';
-
-export interface CustomLayoutManagerProps {
-  /** Close the manager. */
-  onClose: () => void;
-}
-
-/**
- * A picked sidebar entry: `'new'` for the blank-slate designer, or an
- * existing template tagged by which pool it came from.
- *
- * `def` carries the definition directly for the just-saved case: the doc
- * re-parses on a 150ms debounce (see EditorContext), so immediately after
- * a save the doc-template list is briefly stale. Holding the saved
- * definition here lets the designer re-seed from it without waiting for —
- * or racing — that re-parse. User-initiated selections omit `def` and
- * resolve from the (by-then fresh) list.
- */
-type Selection =
-  | 'new'
-  | { source: 'doc' | 'library'; name: string; def?: CustomTemplateDefinition };
-
-export function CustomLayoutManager({ onClose }: CustomLayoutManagerProps) {
-  const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const { mediaProvider, colorScheme } = useEditorContext();
-
-  // Close on Escape, mirroring the other editor dialogs.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  return createPortal(
-    <div
-      className="squisq-editor-shell squisq-layout-manager-overlay"
-      data-theme={colorScheme}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Custom layouts"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="squisq-layout-manager-panel">
-        <header className="squisq-layout-manager-header">
-          <h2 className="squisq-layout-manager-title">Custom layouts</h2>
-          <button
-            type="button"
-            className="squisq-template-designer-close"
-            onClick={onClose}
-            aria-label="Close custom layouts"
-            title="Close (Esc)"
-          >
-            ×
-          </button>
-        </header>
-        <CustomTemplateProvider
-          docTemplates={docTemplates}
-          onDocTemplatesChange={onDocTemplatesChange}
-        >
-          <ManagerBody mediaProvider={mediaProvider} />
-        </CustomTemplateProvider>
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-/** Inner body — runs under the provider so it can read/write both pools. */
-function ManagerBody({ mediaProvider }: { mediaProvider: MediaProvider | null }) {
-  const ctx = useCustomTemplates();
-  // The provider is mounted just above by CustomLayoutManager, so this is
-  // never null in practice; narrow defensively rather than asserting.
-  if (!ctx) return null;
-  return <ManagerContent ctx={ctx} mediaProvider={mediaProvider} />;
-}
-
-function ManagerContent({
-  ctx,
-  mediaProvider,
-}: {
-  ctx: CustomTemplateContextValue;
-  mediaProvider: MediaProvider | null;
-}) {
-  const { docTemplates, libraryTemplates, upsertDocTemplate, upsertLibraryTemplate } = ctx;
-
-  // The doc and library pools are listed in full and kept separate — a
-  // layout can legitimately exist in both (the doc's inlined copy and a
-  // reusable library copy), so saving a doc layout "to library" produces
-  // a visible second entry rather than silently merging into the doc one.
-
-  // Default selection: first doc layout, else first library layout, else
-  // the blank-slate "new" designer.
-  const [selection, setSelection] = useState<Selection>(() => {
-    if (docTemplates[0]) return { source: 'doc', name: docTemplates[0].name };
-    if (libraryTemplates[0]) return { source: 'library', name: libraryTemplates[0].name };
-    return 'new';
-  });
-
-  // Resolve the selected definition (undefined for the "new" slate). A
-  // `def` carried on the selection wins over the list lookup so a freshly
-  // saved layout shows immediately, before the doc re-parse lands.
-  const selected: CustomTemplateDefinition | undefined =
-    selection === 'new'
-      ? undefined
-      : (selection.def ??
-        (selection.source === 'doc' ? docTemplates : libraryTemplates).find(
-          (t) => t.name === selection.name,
-        ));
-
-  const handleSave = useCallback(
-    (def: CustomTemplateDefinition, target: DesignerSaveTarget) => {
-      if (target === 'doc') upsertDocTemplate(def);
-      else upsertLibraryTemplate(def);
-      // After saving, select the just-saved layout so the list highlights
-      // it and further edits target the same entry (rather than the blank
-      // "new" slate). Carry the saved def so the designer re-seeds from it
-      // even while the doc re-parse (debounced) is still in flight.
-      setSelection({ source: target === 'doc' ? 'doc' : 'library', name: def.name, def });
-    },
-    [upsertDocTemplate, upsertLibraryTemplate],
-  );
-
-  const isActive = (source: 'doc' | 'library', name: string) =>
-    selection !== 'new' && selection.source === source && selection.name === name;
-
-  const renderItem = (def: CustomTemplateDefinition, source: 'doc' | 'library') => (
-    <button
-      key={`${source}:${def.name}`}
-      type="button"
-      className={`squisq-layout-manager-item${
-        isActive(source, def.name) ? ' squisq-layout-manager-item--active' : ''
-      }`}
-      onClick={() => setSelection({ source, name: def.name })}
-    >
-      <span className="squisq-layout-manager-item-thumb">
-        <TemplateThumbnail def={def} />
-      </span>
-      <span className="squisq-layout-manager-item-text">
-        <span className="squisq-layout-manager-item-label">{def.label || def.name}</span>
-        <span className="squisq-layout-manager-item-name">{def.name}</span>
-      </span>
-    </button>
-  );
-
-  return (
-    <div className="squisq-layout-manager-body">
-      <aside className="squisq-layout-manager-sidebar">
-        <button
-          type="button"
-          className={`squisq-layout-manager-new${
-            selection === 'new' ? ' squisq-layout-manager-new--active' : ''
-          }`}
-          onClick={() => setSelection('new')}
-        >
-          + New layout
-        </button>
-
-        {docTemplates.length > 0 && (
-          <>
-            <div className="squisq-layout-manager-section-title">This document</div>
-            <div className="squisq-layout-manager-list">
-              {docTemplates.map((def) => renderItem(def, 'doc'))}
-            </div>
-          </>
-        )}
-
-        {libraryTemplates.length > 0 && (
-          <>
-            <div className="squisq-layout-manager-section-title">Library</div>
-            <div className="squisq-layout-manager-list">
-              {libraryTemplates.map((def) => renderItem(def, 'library'))}
-            </div>
-          </>
-        )}
-
-        {docTemplates.length === 0 && libraryTemplates.length === 0 && (
-          <p className="squisq-layout-manager-empty-hint">
-            No custom layouts yet. Design one on the right and save it to this document or your
-            library.
-          </p>
-        )}
-      </aside>
-
-      <div className="squisq-layout-manager-main">
-        <TemplateDesigner
-          // Remount when the selection changes so the designer re-seeds
-          // its internal state from the newly chosen definition.
-          key={selection === 'new' ? 'new' : `${selection.source}:${selection.name}`}
-          embedded
-          initial={selected}
-          mediaProvider={mediaProvider}
-          // A layout already in the doc just "Save"s; a new or library
-          // layout reads "Save to this doc" since saving adds it.
-          primarySaveLabel={
-            selection !== 'new' && selection.source === 'doc' ? 'Save' : 'Save to this doc'
-          }
-          onSave={handleSave}
-          onClose={() => {
-            /* embedded: the manager frame owns dismissal */
-          }}
-        />
-      </div>
-    </div>
-  );
-}