@ceedcv-maya/shared-editor-react 0.6.0

package/src/extensions/Indent.ts

@@ -0,0 +1,133 @@
+import { Extension } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    indent: {
+      indent: () => ReturnType;
+      outdent: () => ReturnType;
+    };
+  }
+}
+
+export interface IndentOptions {
+  types: string[];
+  minLevel: number;
+  maxLevel: number;
+}
+
+/**
+ * Adds an `indent` attribute (integer level) to paragraph/heading nodes
+ * and exposes `indent()` / `outdent()` commands.
+ *
+ * Lists and task lists already have native indent via Tab/Shift-Tab from
+ * StarterKit's `listKeymap`; this extension covers the rest of the
+ * schema so the toolbar Indent button works on any block.
+ *
+ * Rendered as inline `style="margin-left: <level * step>em"` so the
+ * output round-trips through the SSR renderer and copy-pastes elsewhere
+ * without losing the visual.
+ */
+export const Indent = Extension.create<IndentOptions>({
+  name: 'indent',
+
+  addOptions() {
+    return {
+      types: ['paragraph', 'heading', 'blockquote'],
+      minLevel: 0,
+      maxLevel: 8,
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          indent: {
+            default: 0,
+            parseHTML: (element) => {
+              const attr = element.getAttribute('data-indent');
+              if (attr) return parseInt(attr, 10) || 0;
+              const ml = (element as HTMLElement).style?.marginLeft;
+              if (ml && ml.endsWith('em')) {
+                return Math.max(0, Math.round(parseFloat(ml) / 2));
+              }
+              return 0;
+            },
+            renderHTML: (attrs) => {
+              const level = Number(attrs.indent) || 0;
+              if (level <= 0) return {};
+              return {
+                'data-indent': String(level),
+                style: `margin-left: ${level * 2}em`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      indent:
+        () =>
+        ({ state, tr, dispatch }) => {
+          const { selection } = state;
+          let changed = false;
+          state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+            if (!this.options.types.includes(node.type.name)) return;
+            const current = (node.attrs?.indent as number) ?? 0;
+            const next = Math.min(this.options.maxLevel, current + 1);
+            if (next === current) return;
+            if (dispatch) tr.setNodeMarkup(pos, undefined, { ...node.attrs, indent: next });
+            changed = true;
+          });
+          return changed;
+        },
+      outdent:
+        () =>
+        ({ state, tr, dispatch }) => {
+          const { selection } = state;
+          let changed = false;
+          state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+            if (!this.options.types.includes(node.type.name)) return;
+            const current = (node.attrs?.indent as number) ?? 0;
+            const next = Math.max(this.options.minLevel, current - 1);
+            if (next === current) return;
+            if (dispatch) tr.setNodeMarkup(pos, undefined, { ...node.attrs, indent: next });
+            changed = true;
+          });
+          return changed;
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        // Don't steal Tab from lists/tasks/tables — those have their own handlers.
+        const { state } = this.editor;
+        const { $from } = state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const name = $from.node(depth).type.name;
+          if (['listItem', 'taskItem', 'tableCell', 'tableHeader'].includes(name)) {
+            return false;
+          }
+        }
+        return this.editor.commands.indent();
+      },
+      'Shift-Tab': () => {
+        const { state } = this.editor;
+        const { $from } = state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const name = $from.node(depth).type.name;
+          if (['listItem', 'taskItem', 'tableCell', 'tableHeader'].includes(name)) {
+            return false;
+          }
+        }
+        return this.editor.commands.outdent();
+      },
+    };
+  },
+});

package/src/hooks/useEditorContent.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { TiptapDoc } from '../types';
+
+export type EditorOutput = 'html' | 'json';
+
+/**
+ * Debounced onChange wiring for a TipTap editor instance.
+ *
+ * The payload shape is selected by `output`:
+ *   - 'html' (default for `<MayaEditor mode="lite">`) — string HTML, fed
+ *     straight to a sanitiser before persistence.
+ *   - 'json' (default for `<MayaEditor mode="full">`) — full ProseMirror
+ *     doc object `{ type: 'doc', content: [...] }`, structurally equivalent
+ *     to BlockNote's legacy block array so backends that stored BlockNote
+ *     JSON can keep their `array | object` validation rules.
+ */
+export function useEditorContent(
+  editor: Editor | null,
+  onChange: ((payload: string | TiptapDoc) => void) | undefined,
+  options: { output?: EditorOutput; delayMs?: number } = {},
+): void {
+  const { output = 'html', delayMs = 300 } = options;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handlerRef = useRef(onChange);
+  handlerRef.current = onChange;
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleUpdate = () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        const payload = output === 'json'
+          ? (editor.getJSON() as TiptapDoc)
+          : editor.getHTML();
+        handlerRef.current?.(payload);
+      }, delayMs);
+    };
+
+    editor.on('update', handleUpdate);
+    return () => {
+      editor.off('update', handleUpdate);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [editor, delayMs, output]);
+}

package/src/i18n/en.json

@@ -0,0 +1,54 @@
+{
+  "editor": {
+    "toolbar": {
+      "bold": "Bold",
+      "italic": "Italic",
+      "underline": "Underline",
+      "strike": "Strikethrough",
+      "code": "Code",
+      "link": "Insert link",
+      "linkPrompt": "Link URL",
+      "unlink": "Remove link",
+      "heading1": "Heading 1",
+      "heading2": "Heading 2",
+      "heading3": "Heading 3",
+      "paragraph": "Paragraph",
+      "bulletList": "Bullet list",
+      "orderedList": "Numbered list",
+      "taskList": "Task list",
+      "blockquote": "Quote",
+      "codeBlock": "Code block",
+      "horizontalRule": "Horizontal rule",
+      "image": "Insert image",
+      "table": "Insert table",
+      "alert": "Alert",
+      "iframe": "Insert iframe",
+      "iframePrompt": "Iframe URL",
+      "fullscreen": "Fullscreen",
+      "exitFullscreen": "Exit fullscreen",
+      "addComment": "Comment selection",
+      "importDocx": "Import .docx",
+      "exportDocx": "Export as .docx",
+      "insertHtml": "Insert HTML",
+      "insertMarkdown": "Insert Markdown",
+      "undo": "Undo",
+      "redo": "Redo",
+      "uploadImage": "Insert image",
+      "find": "Find and replace",
+      "findPlaceholder": "Find",
+      "replacePlaceholder": "Replace with",
+      "findNext": "Next match",
+      "findPrev": "Previous match",
+      "replace": "Replace",
+      "replaceAll": "Replace all",
+      "findClose": "Close find",
+      "caseSensitive": "Match case",
+      "findNone": "No matches"
+    },
+    "placeholder": "Start typing or press / for commands…",
+    "errors": {
+      "uploadFailed": "File upload failed",
+      "linkInvalid": "Invalid URL"
+    }
+  }
+}

package/src/i18n/es.json

@@ -0,0 +1,54 @@
+{
+  "editor": {
+    "toolbar": {
+      "bold": "Negrita",
+      "italic": "Cursiva",
+      "underline": "Subrayado",
+      "strike": "Tachado",
+      "code": "Código",
+      "link": "Insertar enlace",
+      "linkPrompt": "URL del enlace",
+      "unlink": "Quitar enlace",
+      "heading1": "Título 1",
+      "heading2": "Título 2",
+      "heading3": "Título 3",
+      "paragraph": "Párrafo",
+      "bulletList": "Lista",
+      "orderedList": "Lista numerada",
+      "taskList": "Lista de tareas",
+      "blockquote": "Cita",
+      "codeBlock": "Bloque de código",
+      "horizontalRule": "Separador",
+      "image": "Insertar imagen",
+      "table": "Insertar tabla",
+      "alert": "Aviso",
+      "iframe": "Insertar iframe",
+      "iframePrompt": "URL del iframe",
+      "fullscreen": "Pantalla completa",
+      "exitFullscreen": "Salir de pantalla completa",
+      "addComment": "Comentar selección",
+      "importDocx": "Importar .docx",
+      "exportDocx": "Exportar como .docx",
+      "insertHtml": "Insertar HTML",
+      "insertMarkdown": "Insertar Markdown",
+      "undo": "Deshacer",
+      "redo": "Rehacer",
+      "uploadImage": "Insertar imagen",
+      "find": "Buscar y reemplazar",
+      "findPlaceholder": "Buscar",
+      "replacePlaceholder": "Reemplazar por",
+      "findNext": "Siguiente",
+      "findPrev": "Anterior",
+      "replace": "Reemplazar",
+      "replaceAll": "Reemplazar todo",
+      "findClose": "Cerrar",
+      "caseSensitive": "Distinguir mayúsculas",
+      "findNone": "Sin coincidencias"
+    },
+    "placeholder": "Empieza a escribir o pulsa / para comandos…",
+    "errors": {
+      "uploadFailed": "No se pudo subir el archivo",
+      "linkInvalid": "URL no válida"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+export { MayaEditor } from './components/MayaEditor';
+export type { MayaEditorProps } from './components/MayaEditor';
+export { EditorContentHtml } from './components/EditorContentHtml';
+export { EditorToolbar } from './components/EditorToolbar';
+export type { ToolbarLabels } from './components/EditorToolbar';
+
+export { IframeBlock } from './extensions/IframeBlock';
+export { AlertBlock } from './extensions/AlertBlock';
+export type { AlertVariant } from './extensions/AlertBlock';
+export { CommentMark } from './extensions/CommentMark';
+export { Indent } from './extensions/Indent';
+export type { IndentOptions } from './extensions/Indent';
+export { ColorPicker } from './components/ColorPicker';
+
+export { convertBlockNoteToTiptap } from './serializers/BlockNoteToTiptap';
+export { useEditorContent } from './hooks/useEditorContent';
+export { getAnchorRange, setAnchorRange, rebaseAnchors } from './lib/CommentAnchor';
+export type { AnchorRange } from './lib/CommentAnchor';
+
+export { sanitizeEditorHtml, ALLOWED_TAGS, ALLOWED_ATTR } from './lib/dompurifyConfig';
+export { markdownToHtml } from './lib/markdownToHtml';
+export { htmlToMarkdown } from './lib/htmlToMarkdown';
+export { normalizeTableHtml } from './lib/normalizeTableHtml';
+export { splitHtmlIntoBlocks } from './lib/splitHtmlIntoBlocks';
+export type { BlockChunk, BlockChunkType } from './lib/splitHtmlIntoBlocks';
+export { htmlToTiptapDoc } from './lib/htmlToTiptapDoc';
+export { buildMayaEditorExtensions } from './lib/editorExtensions';
+export { docxToHtml, docxToHtmlResult } from './lib/docxToHtml';
+export type { DocxConversionMessage, DocxConversionResult } from './lib/docxToHtml';
+export { SourceInputDialog } from './components/SourceInputDialog';
+export { FindReplaceBar } from './components/FindReplaceBar';
+export { CommentHoverPopover } from './components/CommentHoverPopover';
+export type { CommentHoverData } from './components/CommentHoverPopover';
+
+export type {
+  EditorMode,
+  TiptapMark,
+  TiptapNode,
+  TiptapDoc,
+  AnchoredComment,
+  BlockNoteBlock,
+  BlockNoteInline,
+  BlockNoteStyles,
+} from './types';
+
+export { default as esTranslations } from './i18n/es.json';
+export { default as enTranslations } from './i18n/en.json';

package/src/lib/CommentAnchor.ts

@@ -0,0 +1,68 @@
+import type { Editor } from '@tiptap/react';
+import type { Transaction } from '@tiptap/pm/state';
+import type { AnchoredComment } from '../types';
+
+/**
+ * Anchored-comment helpers that rebase positions across edits using
+ * ProseMirror's `Transaction.mapping`.
+ *
+ * Stable semantics:
+ *   - Insertions BEFORE the anchor → both `from` and `to` shift right.
+ *   - Insertions INSIDE the anchor → `to` shifts right; `from` unchanged.
+ *   - Deletions overlapping fully  → anchor becomes invalid (`from === to`).
+ *   - Deletions partial            → range collapses to the surviving slice.
+ */
+export interface AnchorRange {
+  from: number;
+  to: number;
+}
+
+export function getAnchorRange(editor: Editor, commentId: string | number): AnchorRange | null {
+  let found: AnchorRange | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (found) return false;
+    node.marks.forEach((mark) => {
+      if (mark.type.name === 'comment' && String(mark.attrs.commentId) === String(commentId)) {
+        found = { from: pos, to: pos + node.nodeSize };
+      }
+    });
+    return true;
+  });
+  return found;
+}
+
+export function setAnchorRange(
+  editor: Editor,
+  commentId: string | number,
+  range: AnchorRange,
+): boolean {
+  return editor
+    .chain()
+    .focus()
+    .setTextSelection(range)
+    .setComment(commentId)
+    .run();
+}
+
+/**
+ * Rebase a list of anchors against a ProseMirror transaction's mapping.
+ * Returns the updated anchors; entries whose range collapsed to zero
+ * width are marked `anchorIsValid: false` for server reconciliation.
+ */
+export function rebaseAnchors(
+  anchors: AnchoredComment[],
+  tr: Transaction,
+): AnchoredComment[] {
+  const mapping = tr.mapping;
+  return anchors.map((anchor) => {
+    const newFrom = mapping.map(anchor.anchorFrom, 1);
+    const newTo = mapping.map(anchor.anchorTo, -1);
+    const collapsed = newFrom >= newTo;
+    return {
+      ...anchor,
+      anchorFrom: newFrom,
+      anchorTo: newTo,
+      anchorIsValid: anchor.anchorIsValid && !collapsed,
+    };
+  });
+}

package/src/lib/docxToHtml.ts

@@ -0,0 +1,58 @@
+/**
+ * Convert a `.docx` File to sanitised, editor-ready HTML.
+ *
+ * Mammoth runs entirely client-side and is loaded via dynamic `import()` so
+ * its ~430KB bundle only ships to apps that exercise the .docx flow. The
+ * `mammoth/mammoth.browser.js` entry is required — the package root pulls
+ * Node-specific code that breaks under Vite's browser optimisation.
+ *
+ * Output passes through the same `normalizeTableHtml` + `sanitizeEditorHtml`
+ * pipeline the live editor uses, so the result is safe to drop straight into
+ * a TipTap doc (see {@link htmlToTiptapDoc}) or split into block chunks
+ * (see {@link splitHtmlIntoBlocks}).
+ */
+import { normalizeTableHtml } from './normalizeTableHtml';
+import { sanitizeEditorHtml } from './dompurifyConfig';
+
+export interface DocxConversionMessage {
+  type: string;
+  message: string;
+}
+
+export interface DocxConversionResult {
+  /** Sanitised, editor-ready HTML. */
+  html: string;
+  /** Warnings/errors emitted by mammoth (unrecognised styles, dropped tags…). */
+  messages: DocxConversionMessage[];
+}
+
+type MammothConvert = (input: {
+  arrayBuffer: ArrayBuffer;
+}) => Promise<{ value: string; messages?: DocxConversionMessage[] }>;
+
+/**
+ * Convert .docx to HTML with full diagnostic messages.
+ * Use this when you need to show users warnings about unsupported Word features
+ * (e.g., "Warning: dropped unsupported style 'MyStyle'").
+ * The messages array contains any warnings/errors from the mammoth parser.
+ */
+export async function docxToHtmlResult(file: File): Promise<DocxConversionResult> {
+  const mod = (await import('mammoth/mammoth.browser.js')) as unknown as {
+    convertToHtml: MammothConvert;
+    default?: { convertToHtml: MammothConvert };
+  };
+  const mammoth = mod.default ?? mod;
+  const buffer = await file.arrayBuffer();
+  const { value: rawHtml, messages = [] } = await mammoth.convertToHtml({ arrayBuffer: buffer });
+  return { html: sanitizeEditorHtml(normalizeTableHtml(rawHtml)), messages };
+}
+
+/**
+ * Convenience wrapper that returns only the sanitised HTML.
+ * Use this when you don't need diagnostic messages and just want clean HTML
+ * ready to insert into the editor.
+ */
+export async function docxToHtml(file: File): Promise<string> {
+  const { html } = await docxToHtmlResult(file);
+  return html;
+}

package/src/lib/dompurifyConfig.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+import { sanitizeEditorHtml } from './dompurifyConfig';
+
+describe('dompurifyConfig - XSS protection', () => {
+  it('blocks javascript: URLs in href', () => {
+    const html = '<a href="javascript:alert(1)">click</a>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('javascript:');
+    // DOMPurify removes the href attribute entirely for invalid schemes
+    expect(result).toContain('<a>click</a>');
+  });
+
+  it('blocks data: URLs in href', () => {
+    const html = '<a href="data:text/html,<script>alert(1)</script>">click</a>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('data:');
+  });
+
+  it('blocks vbscript: URLs in href', () => {
+    const html = '<a href="vbscript:msgbox(1)">click</a>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('vbscript:');
+  });
+
+  it('strips onclick event handler', () => {
+    const html = '<p onclick="alert(1)">text</p>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('onclick');
+  });
+
+  it('strips onerror event handler on img', () => {
+    const html = '<img src="x" onerror="alert(1)" alt="test">';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('onerror');
+  });
+
+  it('strips script tags', () => {
+    const html = '<p>safe</p><script>alert(1)</script>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('<script>');
+    expect(result).toContain('safe');
+  });
+
+  it('allows iframe with src attribute', () => {
+    // DOMPurify preserves iframe and src attribute
+    const html = '<iframe src="https://example.com" sandbox="allow-scripts"></iframe>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).toContain('<iframe');
+    expect(result).toContain('https://example.com');
+  });
+
+  it('preserves https and http URLs in href', () => {
+    const urls = ['https://example.com', 'http://example.com'];
+    for (const url of urls) {
+      const html = `<a href="${url}">link</a>`;
+      const result = sanitizeEditorHtml(html);
+      expect(result).toContain(`href="${url}"`);
+    }
+  });
+
+  it('preserves mailto links', () => {
+    const html = '<a href="mailto:user@example.com">email</a>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).toContain('mailto:');
+  });
+
+  it('preserves relative paths and anchors', () => {
+    const paths = ['#anchor', '/path', './relative', '../parent'];
+    for (const path of paths) {
+      const html = `<a href="${path}">link</a>`;
+      const result = sanitizeEditorHtml(html);
+      expect(result).toContain(`href="${path}"`);
+    }
+  });
+
+  it('preserves custom data-* attributes by default (all data-* are whitelisted)', () => {
+    // DOMPurify by default allows data-* attributes with any name (not in strictest configs)
+    // This test documents the behavior: custom data-* attributes are preserved
+    const html = '<div data-custom-evil="malicious">text</div>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).toContain('data-custom-evil');
+  });
+
+  it('preserves whitelisted data-* attributes', () => {
+    // Whitelisted attributes from dompurifyConfig
+    const html = '<div data-node-type="custom" data-block-type="xyz">text</div>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).toContain('data-node-type');
+    expect(result).toContain('data-block-type');
+  });
+
+  it('converts plaintext to safe HTML with < > escaped', () => {
+    const html = '<p><script>alert(1)</script> and <img src=x onerror=alert(1)></p>';
+    const result = sanitizeEditorHtml(html);
+    expect(result).not.toContain('<script>');
+    expect(result).not.toContain('onerror');
+  });
+});

package/src/lib/dompurifyConfig.ts

@@ -0,0 +1,123 @@
+import DOMPurify from 'dompurify';
+
+/**
+ * DOMPurify config aligned with the server-side TiptapHtmlRenderer output
+ * so the SSR-rendered HTML survives client-side sanitization without
+ * silent tag stripping.
+ *
+ * Ampliated by council audit (Fase 0) — the previous BlockNote config
+ * only allowed `[label, input, ul]` which silently stripped `<p>, <h1-6>,
+ * <strong>, <table>, <img>, <a>, <blockquote>` etc. emitted by the PHP
+ * renderer.
+ */
+export const ALLOWED_TAGS = [
+  'p',
+  'br',
+  'hr',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'strong',
+  'em',
+  'u',
+  's',
+  'code',
+  'pre',
+  'blockquote',
+  'span',
+  'div',
+  'a',
+  'ul',
+  'ol',
+  'li',
+  'label',
+  'input',
+  'figure',
+  'figcaption',
+  'img',
+  'iframe',
+  'aside',
+  'table',
+  'caption',
+  'thead',
+  'tbody',
+  'tfoot',
+  'colgroup',
+  'col',
+  'tr',
+  'th',
+  'td',
+];
+
+export const ALLOWED_ATTR = [
+  'class',
+  'style',
+  'href',
+  'src',
+  'alt',
+  'title',
+  'type',
+  'checked',
+  'disabled',
+  'colspan',
+  'rowspan',
+  'role',
+  // Data attributes: trusted because they originate from TiptapHtmlRenderer, not user input
+  'data-node-type',
+  'data-comment-id',
+  'data-block-type',
+  'data-original-type',
+  'data-indent',
+  // iframe sandbox attribute: server-side renderer sets default sandbox if none present
+  'sandbox',
+  'loading',
+  'scope',
+  'headers',
+  'summary',
+  'abbr',
+  'span',
+  'id',
+];
+
+/**
+ * Restricts URL schemes — blocks dangerous protocols like `javascript:`, `data:`, `vbscript:`.
+ * This pattern is exported for reference and should match the server-side TiptapHtmlRenderer
+ * URL scheme validation for consistent security across client and server.
+ *
+ * Allowed schemes:
+ * - http:// and https:// (secure web links)
+ * - mailto: (email links)
+ * - tel: (phone links)
+ * - # (fragment identifiers / anchors)
+ * - /, ./, ../ (relative paths)
+ */
+export const ALLOWED_URI_REGEXP = /^(https?:|mailto:|tel:|#|\/|\.\/|\.\.\/)/i;
+
+let hooksInstalled = false;
+
+/**
+ * Install DOMPurify hooks for sanitization enhancements:
+ * - Ensure INPUT elements without a type attribute default to 'checkbox'
+ */
+function installDomPurifyHooks(): void {
+  if (hooksInstalled) return;
+  hooksInstalled = true;
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if ((node as Element).tagName === 'INPUT' && !(node as Element).getAttribute('type')) {
+      (node as Element).setAttribute('type', 'checkbox');
+    }
+  });
+}
+
+export function sanitizeEditorHtml(rawHtml: string): string {
+  installDomPurifyHooks();
+  return DOMPurify.sanitize(rawHtml, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOWED_URI_REGEXP,
+  });
+}