chore: fix mount Vue on wrapper element and fix React docs lifecycle cleanup

harbournick · harbournick · commit 1950d2e0125a · 2026-02-08T10:51:06.000-08:00
diff --git a/apps/docs/getting-started/frameworks/react.mdx b/apps/docs/getting-started/frameworks/react.mdx
@@ -31,6 +31,7 @@ function DocEditor({ document }) {
     });
 
     return () => {
+      superdocRef.current?.destroy();
       superdocRef.current = null;
     };
   }, [document]);
@@ -69,6 +70,7 @@ const DocEditor = forwardRef(({ document, user, onReady }, ref) => {
     });
 
     return () => {
+      superdocRef.current?.destroy();
       superdocRef.current = null;
     };
   }, [document, user, onReady]);
@@ -190,6 +192,7 @@ const DocEditor = forwardRef<EditorRef, EditorProps>(
       superdocRef.current = new SuperDoc(config);
       
       return () => {
+        superdocRef.current?.destroy();
         superdocRef.current = null;
       };
     }, [document, userId, onReady]);
@@ -247,6 +250,7 @@ function useSuperDoc(config) {
     });
     
     return () => {
+      superdocRef.current?.destroy();
       superdocRef.current = null;
       setReady(false);
     };
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -12,6 +12,7 @@ export default [
   {
     ignores: [
       '**/dist/**',
+      '**/dist-types/**',
       '**/node_modules/**',
       // Generated/vendor files that shouldn't be linted
       '**/pdfjs.js',
diff --git a/packages/ai/src/index.ts b/packages/ai/src/index.ts
@@ -14,14 +14,6 @@ export { createAIProvider } from './ai-actions/providers';
 export * from './shared/types';
 export * from './shared/utils';
 export * from './shared/constants';
-export type {
-  AIToolActions,
-  SafeRecord,
-  SelectionRange,
-  SelectionSnapshot,
-  PlannerContextSnapshot,
-  BuilderPlanResult,
-} from './shared/types';
 
 export { createToolRegistry, getToolDescriptions, isValidTool } from './ai-actions/tools';
 
diff --git a/packages/esign/demo/server/server.js b/packages/esign/demo/server/server.js
@@ -1,14 +1,13 @@
 import express from 'express';
 import cors from 'cors';
-import dotenv from 'dotenv';
+import { config as dotenvConfig } from 'dotenv';
 
-dotenv.config();
+dotenvConfig();
 
 const app = express();
 const PORT = process.env.PORT || 3001;
 const SUPERDOC_SERVICES_API_KEY = process.env.SUPERDOC_SERVICES_API_KEY;
-const SUPERDOC_SERVICES_BASE_URL =
-  process.env.SUPERDOC_SERVICES_BASE_URL || 'https://api.superdoc.dev';
+const SUPERDOC_SERVICES_BASE_URL = process.env.SUPERDOC_SERVICES_BASE_URL || 'https://api.superdoc.dev';
 const CONSENT_FIELD_IDS = new Set(['consent_agreement', 'terms', 'email', '406948812']);
 const SIGNATURE_FIELD_ID = '789012';
 const IP_ADDRESS = '127.0.0.1'; // Replace with real client IP once available
@@ -85,8 +84,7 @@ const sendPdfBuffer = (res, base64, fileName, contentType = 'application/pdf') =
 
 app.post('/v1/download', async (req, res) => {
   try {
-    const { document, fields = {}, fileName = 'document.pdf', signatureMode = 'annotate' } =
-      req.body || {};
+    const { document, fields = {}, fileName = 'document.pdf', signatureMode = 'annotate' } = req.body || {};
 
     if (!SUPERDOC_SERVICES_API_KEY) {
       return res.status(500).json({ error: 'Missing SUPERDOC_SERVICES_API_KEY on the server' });
diff --git a/packages/esign/demo/src/CustomSignature.tsx b/packages/esign/demo/src/CustomSignature.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type FC } from 'react';
 import SignaturePad from 'signature_pad';
 import type { FieldComponentProps } from '@superdoc-dev/esign';
 
@@ -17,12 +17,7 @@ const cropSVG = (svgText: string): string => {
     if (bbox.width === 0 || bbox.height === 0) return svgText;
 
     const padding = 5;
-    const viewBox = [
-      bbox.x - padding,
-      bbox.y - padding,
-      bbox.width + padding * 2,
-      bbox.height + padding * 2,
-    ].join(' ');
+    const viewBox = [bbox.x - padding, bbox.y - padding, bbox.width + padding * 2, bbox.height + padding * 2].join(' ');
     svgElement.setAttribute('viewBox', viewBox);
     svgElement.setAttribute('width', String(Math.ceil(bbox.width + padding * 2)));
     svgElement.setAttribute('height', String(Math.ceil(bbox.height + padding * 2)));
@@ -54,7 +49,7 @@ const svgToPngDataUrl = (svgText: string): Promise<string> =>
     img.src = svgDataUrl;
   });
 
-const CustomSignature: React.FC<FieldComponentProps> = ({ value, onChange, isDisabled, label }) => {
+const CustomSignature: FC<FieldComponentProps> = ({ value, onChange, isDisabled, label }) => {
   const [mode, setMode] = useState<'type' | 'draw'>('type');
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const signaturePadRef = useRef<SignaturePad | null>(null);
@@ -164,12 +159,10 @@ const CustomSignature: React.FC<FieldComponentProps> = ({ value, onChange, isDis
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      {label && (
-        <label style={{ fontSize: '14px', fontWeight: '600', color: '#1f2937' }}>{label}</label>
-      )}
+      {label && <label style={{ fontSize: '14px', fontWeight: '600', color: '#1f2937' }}>{label}</label>}
       <div style={{ display: 'flex', gap: '8px', marginBottom: '4px' }}>
         <button
-          type="button"
+          type='button'
           onClick={() => switchMode('type')}
           disabled={isDisabled}
           style={{
@@ -185,7 +178,7 @@ const CustomSignature: React.FC<FieldComponentProps> = ({ value, onChange, isDis
           Type
         </button>
         <button
-          type="button"
+          type='button'
           onClick={() => switchMode('draw')}
           disabled={isDisabled}
           style={{
@@ -203,11 +196,11 @@ const CustomSignature: React.FC<FieldComponentProps> = ({ value, onChange, isDis
       </div>
       {mode === 'type' ? (
         <input
-          type="text"
+          type='text'
           value={String(value || '')}
           onChange={(e) => onChange(e.target.value)}
           disabled={isDisabled}
-          placeholder="Type your full name"
+          placeholder='Type your full name'
           style={{
             fontFamily: 'cursive',
             fontSize: '20px',
@@ -234,7 +227,7 @@ const CustomSignature: React.FC<FieldComponentProps> = ({ value, onChange, isDis
             }}
           />
           <button
-            type="button"
+            type='button'
             onClick={clearCanvas}
             disabled={isDisabled}
             style={{
diff --git a/packages/esign/demo/src/main.tsx b/packages/esign/demo/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
+  </StrictMode>,
 );
diff --git a/packages/esign/src/defaults/CheckboxInput.tsx b/packages/esign/src/defaults/CheckboxInput.tsx
@@ -1,16 +1,11 @@
-import React from 'react';
+import type { FC } from 'react';
 import type { FieldComponentProps } from '../types';
 
-export const CheckboxInput: React.FC<FieldComponentProps> = ({
-  value,
-  onChange,
-  isDisabled,
-  label,
-}) => {
+export const CheckboxInput: FC<FieldComponentProps> = ({ value, onChange, isDisabled, label }) => {
   return (
-    <label className="superdoc-esign-checkbox-input" style={{ display: 'flex', gap: '8px' }}>
+    <label className='superdoc-esign-checkbox-input' style={{ display: 'flex', gap: '8px' }}>
       <input
-        type="checkbox"
+        type='checkbox'
         checked={Boolean(value)}
         onChange={(e) => onChange(e.target.checked)}
         disabled={isDisabled}
diff --git a/packages/esign/src/defaults/DownloadButton.tsx b/packages/esign/src/defaults/DownloadButton.tsx
@@ -1,13 +1,8 @@
-import React from 'react';
+import type { FC } from 'react';
 import type { DownloadButtonProps, DownloadConfig } from '../types';
 
 export const createDownloadButton = (config?: DownloadConfig) => {
-  const Component: React.FC<DownloadButtonProps> = ({
-    onClick,
-    fileName,
-    isDisabled,
-    isDownloading,
-  }) => {
+  const Component: FC<DownloadButtonProps> = ({ onClick, fileName, isDisabled, isDownloading }) => {
     const label = config?.label || 'Download';
     const disabled = isDisabled || isDownloading;
 
@@ -32,7 +27,7 @@ export const createDownloadButton = (config?: DownloadConfig) => {
           transition: 'opacity 0.2s ease',
         }}
       >
-        {isDownloading && <span className="superdoc-esign-spinner" />}
+        {isDownloading && <span className='superdoc-esign-spinner' />}
         {isDownloading ? 'Downloading...' : label}
         {!isDownloading && fileName && ` (${fileName})`}
       </button>
diff --git a/packages/esign/src/defaults/SignatureInput.tsx b/packages/esign/src/defaults/SignatureInput.tsx
@@ -1,24 +1,16 @@
-import React from 'react';
+import type { FC } from 'react';
 import type { FieldComponentProps } from '../types';
 
-export const SignatureInput: React.FC<FieldComponentProps> = ({
-  value,
-  onChange,
-  isDisabled,
-  label,
-}) => {
+export const SignatureInput: FC<FieldComponentProps> = ({ value, onChange, isDisabled, label }) => {
   return (
-    <div
-      className={`superdoc-esign-signature-input`}
-      style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
-    >
+    <div className={`superdoc-esign-signature-input`} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
       {label && <label>{label}</label>}
       <input
-        type="text"
+        type='text'
         value={String(value || '')}
         onChange={(e) => onChange(e.target.value)}
         disabled={isDisabled}
-        placeholder="Type your full name"
+        placeholder='Type your full name'
         style={{
           fontFamily: 'cursive',
           fontSize: '18px',
diff --git a/packages/esign/src/defaults/SubmitButton.tsx b/packages/esign/src/defaults/SubmitButton.tsx
@@ -1,13 +1,8 @@
-import React from 'react';
+import type { FC } from 'react';
 import type { SubmitButtonProps, SubmitConfig } from '../types';
 
 export const createSubmitButton = (config?: SubmitConfig) => {
-  const Component: React.FC<SubmitButtonProps> = ({
-    onClick,
-    isValid,
-    isDisabled,
-    isSubmitting,
-  }) => {
+  const Component: FC<SubmitButtonProps> = ({ onClick, isValid, isDisabled, isSubmitting }) => {
     const label = config?.label || 'Submit';
     const disabled = !isValid || isDisabled || isSubmitting;
 
@@ -32,7 +27,7 @@ export const createSubmitButton = (config?: SubmitConfig) => {
           transition: 'opacity 0.2s ease',
         }}
       >
-        {isSubmitting && <span className="superdoc-esign-spinner superdoc-esign-spinner--light" />}
+        {isSubmitting && <span className='superdoc-esign-spinner superdoc-esign-spinner--light' />}
         {isSubmitting ? 'Submitting...' : label}
       </button>
     );
diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js
@@ -137,10 +137,21 @@ export class SuperDoc extends EventEmitter {
    */
   constructor(config) {
     super();
-    this.#init(config);
+
+    if (!config.selector) {
+      throw new Error('SuperDoc: selector is required');
+    }
+
+    const container = typeof config.selector === 'string' ? document.querySelector(config.selector) : config.selector;
+
+    if (!(container instanceof HTMLElement)) {
+      throw new Error('SuperDoc: selector must be a valid CSS selector string or DOM element');
+    }
+
+    this.#init(config, container);
   }
 
-  async #init(config) {
+  async #init(config, container) {
     this.config = {
       ...this.config,
       ...config,
@@ -246,20 +257,9 @@ export class SuperDoc extends EventEmitter {
     this.activeEditor = null;
     this.comments = [];
 
-    if (!this.config.selector) {
-      throw new Error('SuperDoc: selector is required');
-    }
-
     // Mount Vue into a child wrapper element instead of directly on the user's
     // container. This prevents conflicts with host frameworks (React, Angular)
     // that manage the container's DOM. See SD-1832.
-    const container =
-      typeof this.config.selector === 'string' ? document.querySelector(this.config.selector) : this.config.selector;
-
-    if (!container) {
-      throw new Error('SuperDoc: selector element not found');
-    }
-
     this.#mountWrapper = document.createElement('div');
     this.#mountWrapper.style.display = 'contents';
     container.appendChild(this.#mountWrapper);
diff --git a/packages/superdoc/src/core/SuperDoc.test.js b/packages/superdoc/src/core/SuperDoc.test.js
@@ -621,6 +621,21 @@ describe('SuperDoc core', () => {
     expect(mountArg.parentElement).toBe(host);
   });
 
+  it('throws when selector does not match any DOM element', () => {
+    createAppHarness();
+    expect(
+      () =>
+        new SuperDoc({
+          selector: '#nonexistent',
+          document: 'https://example.com/doc.docx',
+          documents: [],
+          modules: { comments: {} },
+          colors: ['red'],
+          user: { name: 'Jane', email: 'jane@example.com' },
+        }),
+    ).toThrow('SuperDoc: selector must be a valid CSS selector string or DOM element');
+  });
+
   it('prevents app mounting if destroy is called during async init', async () => {
     const { app } = createAppHarness();
 

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export default [`
`12`	`12`	`{`
`13`	`13`	`ignores: [`
`14`	`14`	`'/dist/',`
	`15`	`+ '/dist-types/',`
`15`	`16`	`'/node_modules/',`
`16`	`17`	`// Generated/vendor files that shouldn't be linted`
`17`	`18`	`'**/pdfjs.js',`