docusaurus-plugin-generate-schema-docs 1.8.2 → 1.8.4

package/__tests__/components/PropertyRow.test.js

@@ -1,9 +1,35 @@
 import '@testing-library/jest-dom';
+import fs from 'fs';
 import React from 'react';
+import path from 'path';
 import { render } from '@testing-library/react';
 import PropertyRow from '../../components/PropertyRow';
 
 describe('PropertyRow', () => {
+  it('does not suppress first-column separators for nested tree cells in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).not.toContain(
+      '.schema-table tbody tr + tr td.property-cell--tree',
+    );
+  });
+
+  it('removes the extra left border from full-width schema rows in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain(".schema-table td[colspan='5']");
+    expect(css).toContain('border-left: none;');
+  });
+
+  it('defines an explicit neutral class for control rows in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain('.schema-row--control');
+    expect(css).toContain('background-color: transparent');
+  });
   it('renders a basic property', () => {
     const row = {
       name: 'name',
@@ -30,6 +56,31 @@ describe('PropertyRow', () => {
     expect(getByText('"John Doe"')).toBeInTheDocument();
   });
 
+  it('renders array type values as comma-separated text', () => {
+    const row = {
+      name: 'additionalProperties',
+      level: 0,
+      required: false,
+      propertyType: ['string', 'number', 'integer', 'boolean', 'null'],
+      description: 'Catch-all values.',
+      examples: [],
+      constraints: [],
+      path: ['additionalProperties'],
+    };
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+
+    expect(
+      getByText('string, number, integer, boolean, null'),
+    ).toBeInTheDocument();
+  });
+
   it('marks required properties', () => {
     const row = {
       name: 'name',
@@ -51,10 +102,40 @@ describe('PropertyRow', () => {
     );
 
     expect(container.querySelector('.required-row')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-cell--required'),
+    ).toBeInTheDocument();
     expect(container.querySelector('.required')).toBeInTheDocument();
     expect(getByText('required')).toBeInTheDocument();
   });
 
+  it('applies the same zebra class to the main row and continuation rows', () => {
+    const row = {
+      name: 'event',
+      level: 0,
+      required: true,
+      propertyType: 'string',
+      description: 'Event name.',
+      examples: ['purchase'],
+      constraints: ['required', 'const: "purchase"'],
+      path: ['event'],
+    };
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} stripeIndex={1} />
+        </tbody>
+      </table>,
+    );
+
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveClass('schema-row--zebra-odd');
+    expect(rows[1]).toHaveClass('schema-row--zebra-odd');
+    expect(rows[0]).not.toHaveClass('schema-row--zebra-even');
+  });
+
   it('renders multiple constraints', () => {
     const row = {
       name: 'name',
@@ -156,6 +237,163 @@ describe('PropertyRow', () => {
     expect(cells[2].innerHTML).toBe('');
   });
 
+  it('renders additionalProperties as a schema keyword row and keeps its connector open', () => {
+    const row = {
+      name: 'additionalProperties',
+      level: 1,
+      required: false,
+      propertyType: 'string',
+      description: 'Catch-all values.',
+      examples: ['beta_tester'],
+      constraints: [],
+      path: ['user_properties', 'additionalProperties'],
+      hasChildren: false,
+      containerType: null,
+      continuingLevels: [],
+      isSchemaKeywordRow: true,
+      keepConnectorOpen: false,
+    };
+
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} isLastInGroup={true} />
+        </tbody>
+      </table>,
+    );
+
+    const keyword = getByText('additionalProperties');
+    expect(keyword).toBeInTheDocument();
+    expect(container.querySelector('.property-keyword')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-cell--keyword'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.property-cell--tree')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-name--keyword'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-keyword-badge'),
+    ).toBeInTheDocument();
+    expect(getByText('Schema constraint')).toBeInTheDocument();
+    expect(keyword).not.toHaveAttribute('title');
+    expect(keyword).toHaveAttribute(
+      'aria-describedby',
+      'schema-keyword-help-user_properties-additionalProperties',
+    );
+    expect(
+      container.querySelector('.property-keyword-tooltip'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '#schema-keyword-help-user_properties-additionalProperties',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'Controls properties not listed in properties and not matched by patternProperties.',
+      ),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.is-last')).toBeInTheDocument();
+  });
+
+  it('defines keyword badge styles in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain('.property-keyword-badge');
+    expect(css).toContain('text-transform: uppercase');
+  });
+
+  it('renders patternProperties rows as schema keywords with tooltip help', () => {
+    const row = {
+      name: 'patternProperties /^custom_/',
+      level: 1,
+      required: false,
+      propertyType: 'number',
+      description: 'Numeric custom attribute values.',
+      examples: [5],
+      constraints: ['minimum: 0'],
+      path: ['attributes', 'patternProperties /^custom_/'],
+      hasChildren: false,
+      containerType: null,
+      continuingLevels: [],
+      isSchemaKeywordRow: true,
+      keepConnectorOpen: false,
+    };
+
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} isLastInGroup={true} />
+        </tbody>
+      </table>,
+    );
+
+    const keyword = getByText('patternProperties');
+    expect(getByText('/^custom_/')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-keyword-pattern'),
+    ).toBeInTheDocument();
+    expect(keyword).toHaveAttribute(
+      'aria-describedby',
+      'schema-keyword-help-attributes-patternProperties___custom__',
+    );
+    expect(
+      container.ownerDocument.getElementById(
+        'schema-keyword-help-attributes-patternProperties___custom__',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'Applies the subschema to property names that match the given regular expression.',
+      ),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.is-last')).toBeInTheDocument();
+  });
+
+  it('uses unique tooltip ids for repeated schema keyword rows', () => {
+    const firstRow = {
+      name: 'additionalProperties',
+      level: 1,
+      required: false,
+      propertyType: 'string',
+      description: 'User property values.',
+      examples: ['beta_tester'],
+      constraints: [],
+      path: ['user_properties', 'additionalProperties'],
+      hasChildren: false,
+      containerType: null,
+      continuingLevels: [],
+      isSchemaKeywordRow: true,
+      keepConnectorOpen: false,
+    };
+    const secondRow = {
+      ...firstRow,
+      path: ['metadata', 'additionalProperties'],
+      description: 'Metadata values.',
+    };
+
+    const { container, getAllByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={firstRow} isLastInGroup={true} />
+          <PropertyRow row={secondRow} isLastInGroup={true} />
+        </tbody>
+      </table>,
+    );
+
+    const keywords = getAllByText('additionalProperties');
+    const firstTooltipId = keywords[0].getAttribute('aria-describedby');
+    const secondTooltipId = keywords[1].getAttribute('aria-describedby');
+
+    expect(firstTooltipId).toBeTruthy();
+    expect(secondTooltipId).toBeTruthy();
+    expect(firstTooltipId).not.toBe(secondTooltipId);
+    expect(container.querySelector(`#${firstTooltipId}`)).toBeInTheDocument();
+    expect(container.querySelector(`#${secondTooltipId}`)).toBeInTheDocument();
+  });
+
   describe('hierarchical lines feature', () => {
     it('renders {} symbol for object containers', () => {
       const row = {
@@ -368,6 +606,65 @@ describe('PropertyRow', () => {
       );
 
       expect(container.querySelector('.level-2')).toBeInTheDocument();
+      expect(
+        container.querySelector('.property-cell--tree'),
+      ).toBeInTheDocument();
+    });
+
+    it('does not add a separator-suppression class to nested tree cells', () => {
+      const row = {
+        name: 'nested_item',
+        level: 2,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['parent', 'nested_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(
+        container.querySelector('.property-cell--tree-no-separator'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('does not mark root-level cells as tree cells', () => {
+      const row = {
+        name: 'root_item',
+        level: 0,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['root_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(
+        container.querySelector('.property-cell--tree'),
+      ).not.toBeInTheDocument();
     });
 
     it('applies padding-left based on level using rem units', () => {

package/__tests__/components/SchemaJsonViewer.test.js

@@ -1,17 +1,44 @@
+/* eslint-disable @docusaurus/no-html-links */
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import SchemaJsonViewer from '../../components/SchemaJsonViewer';
 
-// Mock CodeBlock as it's an external theme component
-jest.mock('@theme/CodeBlock', () => {
-  return function DummyCodeBlock({ children, language }) {
-    return <pre data-language={language}>{children}</pre>;
-  };
-});
+jest.mock(
+  '@docusaurus/Link',
+  () => {
+    return function DocusaurusLink({ children, ...props }) {
+      return <a {...props}>{children}</a>;
+    };
+  },
+  { virtual: true },
+);
+
+jest.mock('@docusaurus/theme-common', () => ({
+  usePrismTheme: () => ({
+    plain: {
+      color: 'rgb(1, 2, 3)',
+      backgroundColor: 'rgb(4, 5, 6)',
+    },
+    styles: [
+      {
+        types: ['property'],
+        style: { color: 'rgb(0, 0, 255)' },
+      },
+      {
+        types: ['string'],
+        style: { color: 'rgb(255, 0, 0)' },
+      },
+      {
+        types: ['number'],
+        style: { color: 'rgb(0, 128, 0)' },
+      },
+    ],
+  }),
+}));
 
 describe('SchemaJsonViewer', () => {
-  it('renders the schema in a CodeBlock', () => {
+  it('renders the schema in a syntax-highlighted pre block', () => {
     const schema = {
       type: 'object',
       properties: {
@@ -29,8 +56,165 @@ describe('SchemaJsonViewer', () => {
     const codeBlockElement = container.querySelector('pre');
     expect(codeBlockElement).toBeInTheDocument();
     expect(codeBlockElement).toHaveAttribute('data-language', 'json');
-    expect(codeBlockElement.textContent).toEqual(
-      JSON.stringify(schema, null, 2),
+    expect(codeBlockElement.textContent.replace(/\s+/g, '')).toEqual(
+      JSON.stringify(schema, null, 2).replace(/\s+/g, ''),
+    );
+  });
+
+  it('uses the prism theme for base json token styling', () => {
+    const schema = {
+      type: 'string',
+      examples: ['x'],
+    };
+
+    render(<SchemaJsonViewer schema={schema} />);
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+
+    expect(screen.getByText('"type"')).toHaveStyle({ color: 'rgb(0, 0, 255)' });
+    expect(screen.getByText('"string"')).toHaveStyle({
+      color: 'rgb(255, 0, 0)',
+    });
+  });
+
+  it('navigates local $ref values inside the viewer and resets to root', () => {
+    const rootSchema = {
+      type: 'object',
+      properties: {
+        component: { $ref: './components/referenced.json' },
+      },
+    };
+    const referencedSchema = {
+      title: 'Referenced Component',
+      type: 'object',
+      properties: {
+        prop: { type: 'string' },
+      },
+    };
+
+    render(
+      <SchemaJsonViewer
+        schema={rootSchema}
+        sourcePath="main-schema.json"
+        schemaSources={{
+          'main-schema.json': rootSchema,
+          'components/referenced.json': referencedSchema,
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+    fireEvent.click(
+      screen.getByRole('button', { name: '"./components/referenced.json"' }),
+    );
+
+    expect(screen.getAllByText(/Referenced Component/).length).toBeGreaterThan(
+      0,
     );
+    expect(
+      screen.getByRole('button', { name: 'Back to root' }),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Back to root' }));
+
+    expect(
+      screen.getByText('"./components/referenced.json"'),
+    ).toBeInTheDocument();
+  });
+
+  it('highlights schema meta keywords inside the raw json view', () => {
+    const schema = {
+      $schema: 'https://json-schema.org/draft/2020-12/schema',
+      $id: 'https://example.com/event.json',
+      $anchor: 'eventRoot',
+      $comment: 'Internal authoring note',
+      $vocabulary: {
+        'https://json-schema.org/draft/2020-12/vocab/validation': true,
+      },
+      type: 'object',
+    };
+
+    render(<SchemaJsonViewer schema={schema} sourcePath="event.json" />);
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+
+    expect(screen.getByText('"$schema"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--meta',
+    );
+    expect(screen.getByText('"$anchor"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--meta',
+    );
+    expect(screen.getByText('"$vocabulary"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--meta',
+    );
+  });
+
+  it('highlights structural schema keywords inside the raw json view', () => {
+    const schema = {
+      type: 'object',
+      allOf: [{ $ref: './component.json' }],
+      properties: {
+        name: { type: 'string' },
+      },
+    };
+
+    render(<SchemaJsonViewer schema={schema} sourcePath="event.json" />);
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+
+    expect(screen.getByText('"allOf"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--structural',
+    );
+    expect(screen.getByText('"properties"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--structural',
+    );
+    expect(screen.getByText('"$ref"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--structural',
+    );
+  });
+
+  it('does not highlight payload property names inside properties as meta keywords', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        $schema: {
+          type: 'string',
+        },
+      },
+    };
+
+    render(<SchemaJsonViewer schema={schema} sourcePath="event.json" />);
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+
+    expect(screen.getByText('"properties"')).toHaveClass(
+      'schema-json-viewer__keyword',
+      'schema-json-viewer__keyword--structural',
+    );
+    expect(screen.getByText('"$schema"')).toHaveClass('token property');
+  });
+
+  it('renders external $ref values as new-tab links', () => {
+    const schema = {
+      $ref: 'https://example.com/schema.json',
+    };
+
+    render(<SchemaJsonViewer schema={schema} sourcePath="root.json" />);
+
+    fireEvent.click(screen.getByText('View Raw JSON Schema'));
+    const refLink = screen.getByRole('link', {
+      name: '"https://example.com/schema.json"',
+    });
+
+    expect(refLink).toHaveAttribute('href', 'https://example.com/schema.json');
+    expect(refLink).toHaveAttribute('target', '_blank');
+    expect(refLink).toHaveAttribute('rel', 'noreferrer');
+    expect(refLink).toHaveClass('schema-json-viewer__ref-link');
   });
 });

package/__tests__/components/SchemaRows.test.js

@@ -7,7 +7,9 @@ import SchemaRows from '../../components/SchemaRows';
 jest.mock('../../components/PropertyRow', () => {
   const MockPropertyRow = (props) => (
     <tr>
-      <td>Mocked PropertyRow: {props.row.name}</td>
+      <td>
+        Mocked PropertyRow: {props.row.name} ({props.stripeIndex})
+      </td>
     </tr>
   );
   MockPropertyRow.displayName = 'MockPropertyRow';
@@ -17,7 +19,10 @@ jest.mock('../../components/PropertyRow', () => {
 jest.mock('../../components/FoldableRows', () => {
   const MockFoldableRows = (props) => (
     <tr>
-      <td>Mocked FoldableRows: {props.row.choiceType}</td>
+      <td>
+        Mocked FoldableRows: {props.row.choiceType} ({props.stripeIndex},{' '}
+        {String(!!props.stripeState)})
+      </td>
     </tr>
   );
   MockFoldableRows.displayName = 'MockFoldableRows';
@@ -27,7 +32,10 @@ jest.mock('../../components/FoldableRows', () => {
 jest.mock('../../components/ConditionalRows', () => {
   const MockConditionalRows = (props) => (
     <tr>
-      <td>Mocked ConditionalRows: {props.row.condition.title}</td>
+      <td>
+        Mocked ConditionalRows: {props.row.condition.title} ({props.stripeIndex}
+        , {String(!!props.stripeState)})
+      </td>
     </tr>
   );
   MockConditionalRows.displayName = 'MockConditionalRows';
@@ -49,8 +57,8 @@ describe('SchemaRows', () => {
       </table>,
     );
 
-    expect(getByText('Mocked PropertyRow: name')).toBeInTheDocument();
-    expect(getByText('Mocked PropertyRow: age')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: name (0)')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: age (1)')).toBeInTheDocument();
   });
 
   it('renders nested properties from a flat list', () => {
@@ -68,8 +76,8 @@ describe('SchemaRows', () => {
     );
 
     // It should render both the parent and child property from the flat list
-    expect(getByText('Mocked PropertyRow: user')).toBeInTheDocument();
-    expect(getByText('Mocked PropertyRow: id')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: user (0)')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: id (1)')).toBeInTheDocument();
   });
 
   it('renders a FoldableRows for choice type items in tableData', () => {
@@ -90,7 +98,9 @@ describe('SchemaRows', () => {
       </table>,
     );
 
-    expect(getByText('Mocked FoldableRows: oneOf')).toBeInTheDocument();
+    expect(
+      getByText('Mocked FoldableRows: oneOf (0, true)'),
+    ).toBeInTheDocument();
   });
 
   it('renders a mix of properties and choices', () => {
@@ -113,9 +123,11 @@ describe('SchemaRows', () => {
       </table>,
     );
 
-    expect(getByText('Mocked PropertyRow: prop1')).toBeInTheDocument();
-    expect(getByText('Mocked FoldableRows: anyOf')).toBeInTheDocument();
-    expect(getByText('Mocked PropertyRow: prop2')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: prop1 (0)')).toBeInTheDocument();
+    expect(
+      getByText('Mocked FoldableRows: anyOf (1, true)'),
+    ).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: prop2 (2)')).toBeInTheDocument();
   });
 
   it('renders a ConditionalRows for conditional type items in tableData', () => {
@@ -136,6 +148,44 @@ describe('SchemaRows', () => {
       </table>,
     );
 
-    expect(getByText('Mocked ConditionalRows: If')).toBeInTheDocument();
+    expect(
+      getByText('Mocked ConditionalRows: If (0, true)'),
+    ).toBeInTheDocument();
+  });
+
+  it('increments stripe indices across logical rows', () => {
+    const tableData = [
+      { type: 'property', name: 'prop1', path: ['prop1'] },
+      {
+        type: 'choice',
+        choiceType: 'anyOf',
+        path: ['choice'],
+        options: [],
+      },
+      {
+        type: 'conditional',
+        path: ['if/then/else'],
+        condition: { title: 'If', rows: [] },
+        branches: [],
+      },
+      { type: 'property', name: 'prop2', path: ['prop2'] },
+    ];
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <SchemaRows tableData={tableData} />
+        </tbody>
+      </table>,
+    );
+
+    expect(getByText('Mocked PropertyRow: prop1 (0)')).toBeInTheDocument();
+    expect(
+      getByText('Mocked FoldableRows: anyOf (1, true)'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('Mocked ConditionalRows: If (2, true)'),
+    ).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: prop2 (3)')).toBeInTheDocument();
   });
 });

package/__tests__/components/__snapshots__/ConnectorLines.visualRegression.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`connector lines visual regressions keeps cvv row open when payment choice has following options 1`] = `"<td rowspan="1" style="padding-left: 1.75rem;" class="property-cell level-1"><span class="property-name"><strong>cvv</strong></span></td>"`;
+exports[`connector lines visual regressions keeps cvv row open when payment choice has following options 1`] = `"<td rowspan="1" style="padding-left: 1.75rem;" class="property-cell property-cell--tree level-1"><span class="property-name"><strong>cvv</strong></span></td>"`;
 
-exports[`connector lines visual regressions keeps user_id option row open when user conditional follows 1`] = `"<td rowspan="1" style="padding-left: 1.75rem;" class="property-cell level-1"><span class="property-name"><strong>user_id</strong></span></td>"`;
+exports[`connector lines visual regressions keeps user_id option row open when user conditional follows 1`] = `"<td rowspan="1" style="padding-left: 1.75rem;" class="property-cell property-cell--tree level-1"><span class="property-name"><strong>user_id</strong></span></td>"`;
 
-exports[`connector lines visual regressions keeps wallet_provider option row open when wallet_email follows 1`] = `"<td rowspan="2" style="padding-left: 1.75rem;" class="property-cell level-1"><span class="property-name"><strong>wallet_provider</strong></span></td>"`;
+exports[`connector lines visual regressions keeps wallet_provider option row open when wallet_email follows 1`] = `"<td rowspan="2" style="padding-left: 1.75rem;" class="property-cell property-cell--required property-cell--tree level-1"><span class="property-name"><strong>wallet_provider</strong></span></td>"`;