@lotics/docx 0.1.0

package/src/render/paragraph_view.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import { createReadOnlyView } from "./view";
+import { docxToPm } from "../pm/docx_to_pm";
+import { parseStyleTable } from "../parse/styles";
+import type { Section } from "../model/sections";
+import type { DocxDocument } from "../model/types";
+
+const fontRegistry = buildFontRegistry({
+  embeddedFonts: [],
+  workspaceFonts: [],
+});
+
+const defaultSections: Section[] = [
+  {
+    properties: { ...DEFAULT_SECTION_PROPERTIES },
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+  },
+];
+
+const STYLES_XML = `<?xml version="1.0"?>
+<w:styles xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:docDefaults>
+    <w:rPrDefault><w:rPr><w:rFonts w:ascii="Calibri"/><w:sz w:val="22"/></w:rPr></w:rPrDefault>
+  </w:docDefaults>
+  <w:style w:type="paragraph" w:styleId="Normal" w:default="1"><w:name w:val="Normal"/></w:style>
+  <w:style w:type="paragraph" w:styleId="Heading1">
+    <w:name w:val="heading 1"/>
+    <w:basedOn w:val="Normal"/>
+    <w:pPr><w:outlineLvl w:val="0"/><w:spacing w:before="240" w:after="120"/></w:pPr>
+    <w:rPr><w:b/><w:sz w:val="32"/><w:color w:val="2E74B5"/></w:rPr>
+  </w:style>
+</w:styles>`;
+
+function styleTable() {
+  return parseStyleTable(
+    new Map([["word/styles.xml", new TextEncoder().encode(STYLES_XML)]]),
+  );
+}
+
+let host: HTMLElement;
+beforeEach(() => {
+  document.body.innerHTML = "";
+  host = document.createElement("div");
+  document.body.appendChild(host);
+});
+
+function buildDocxWith(blocks: DocxDocument["body"]["children"]): DocxDocument {
+  return {
+    parts: new Map(),
+    documentAttrs: {},
+    body: { children: blocks },
+  };
+}
+
+describe("paragraphView — resolved styles", () => {
+  it("applies heading run baseline (size + bold + color) to paragraph wrapper", () => {
+    const docx = buildDocxWith([
+      {
+        kind: "paragraph",
+        properties: [
+          { "w:pStyle": [], ":@": { "@_w:val": "Heading1" } },
+        ],
+        content: [
+          { kind: "run", properties: null, content: [{ kind: "text", value: "Title", preserveSpace: false }] },
+        ],
+      },
+    ]);
+    const pm = docxToPm(docx, { styleTable: styleTable() });
+    const view = createReadOnlyView(host, pm, { fontRegistry, sections: defaultSections });
+
+    const p = host.querySelector("p.docx-paragraph") as HTMLElement;
+    expect(p).not.toBeNull();
+    const style = p.getAttribute("style") ?? "";
+    expect(style).toContain("font-size: 21.33px");
+    expect(style).toContain("font-weight: 700");
+    expect(style).toContain("color: #2E74B5");
+    expect(p.getAttribute("data-style")).toBe("Heading1");
+    expect(p.getAttribute("data-outline")).toBe("0");
+    view.destroy();
+  });
+
+  it("applies paragraph spacing from style chain", () => {
+    const docx = buildDocxWith([
+      {
+        kind: "paragraph",
+        properties: [{ "w:pStyle": [], ":@": { "@_w:val": "Heading1" } }],
+        content: [],
+      },
+    ]);
+    const pm = docxToPm(docx, { styleTable: styleTable() });
+    const view = createReadOnlyView(host, pm, { fontRegistry, sections: defaultSections });
+
+    const p = host.querySelector("p.docx-paragraph") as HTMLElement;
+    const style = p.getAttribute("style") ?? "";
+    expect(style).toContain("margin-top: 16px");
+    expect(style).toContain("margin-bottom: 8px");
+    view.destroy();
+  });
+
+  it("applies direct alignment override on top of style chain", () => {
+    const docx = buildDocxWith([
+      {
+        kind: "paragraph",
+        properties: [
+          { "w:pStyle": [], ":@": { "@_w:val": "Heading1" } },
+          { "w:jc": [], ":@": { "@_w:val": "center" } },
+        ],
+        content: [],
+      },
+    ]);
+    const pm = docxToPm(docx, { styleTable: styleTable() });
+    const view = createReadOnlyView(host, pm, { fontRegistry, sections: defaultSections });
+
+    const p = host.querySelector("p.docx-paragraph") as HTMLElement;
+    expect((p.getAttribute("style") ?? "")).toContain("text-align: center");
+    view.destroy();
+  });
+
+  it("applies indent (left + firstLine) in pixels via dxa conversion", () => {
+    const docx = buildDocxWith([
+      {
+        kind: "paragraph",
+        properties: [
+          {
+            "w:ind": [],
+            ":@": { "@_w:left": "720", "@_w:firstLine": "360" },
+          },
+        ],
+        content: [],
+      },
+    ]);
+    const pm = docxToPm(docx, { styleTable: styleTable() });
+    const view = createReadOnlyView(host, pm, { fontRegistry, sections: defaultSections });
+
+    const p = host.querySelector("p.docx-paragraph") as HTMLElement;
+    const style = p.getAttribute("style") ?? "";
+    expect(style).toContain("padding-left: 48px");
+    expect(style).toContain("text-indent: 24px");
+    view.destroy();
+  });
+
+  it("falls back to no resolved style when no styleTable is provided", () => {
+    const docx = buildDocxWith([
+      {
+        kind: "paragraph",
+        properties: [{ "w:jc": [], ":@": { "@_w:val": "right" } }],
+        content: [],
+      },
+    ]);
+    const pm = docxToPm(docx);
+    const view = createReadOnlyView(host, pm, { fontRegistry, sections: defaultSections });
+
+    const p = host.querySelector("p.docx-paragraph") as HTMLElement;
+    expect(p).not.toBeNull();
+    expect((p.getAttribute("style") ?? "")).not.toContain("text-align");
+    view.destroy();
+  });
+});

package/src/render/paragraph_view.ts

@@ -0,0 +1,141 @@
+import type { Node as PMNode } from "prosemirror-model";
+import type { NodeView } from "prosemirror-view";
+import type {
+  ParagraphProperties,
+  RunProperties,
+} from "../model/properties";
+import {
+  resolveThemeColor,
+  type ThemeTable,
+} from "../model/theme";
+import { dxaToPx, halfPointsToPx } from "./units";
+
+function resolveRunColor(
+  props: RunProperties,
+  theme: ThemeTable | null,
+): string | null {
+  if (props.color !== null) return `#${props.color}`;
+  if (props.themeColor !== null && theme) {
+    const hex = resolveThemeColor(
+      theme,
+      props.themeColor,
+      props.themeTint,
+      props.themeShade,
+    );
+    if (hex) return `#${hex}`;
+  }
+  return null;
+}
+
+function alignmentCss(align: ParagraphProperties["alignment"]): string | null {
+  if (align === null) return null;
+  if (align === "both") return "justify";
+  if (align === "start") return "left";
+  if (align === "end") return "right";
+  return align;
+}
+
+function fontFamilyCss(props: RunProperties): string | null {
+  const family = props.fontAscii ?? props.fontHAnsi ?? props.fontEastAsia;
+  if (!family) return null;
+  return `"${family}"`;
+}
+
+function buildParagraphStyle(
+  resolvedParagraph: ParagraphProperties | null,
+  resolvedBaseRun: RunProperties | null,
+  outlineLevel: number | null,
+  theme: ThemeTable | null,
+): string {
+  const parts: string[] = [];
+
+  if (resolvedParagraph) {
+    const align = alignmentCss(resolvedParagraph.alignment);
+    if (align) parts.push(`text-align: ${align}`);
+
+    if (resolvedParagraph.indent) {
+      const left = resolvedParagraph.indent.left ?? 0;
+      const right = resolvedParagraph.indent.right ?? 0;
+      const firstLine = resolvedParagraph.indent.firstLine;
+      const hanging = resolvedParagraph.indent.hanging;
+      if (left !== 0) parts.push(`padding-left: ${dxaToPx(left)}px`);
+      if (right !== 0) parts.push(`padding-right: ${dxaToPx(right)}px`);
+      if (firstLine !== null && firstLine !== undefined) {
+        parts.push(`text-indent: ${dxaToPx(firstLine)}px`);
+      } else if (hanging !== null && hanging !== undefined) {
+        parts.push(`text-indent: ${dxaToPx(-hanging)}px`);
+      }
+    }
+
+    if (resolvedParagraph.spacing) {
+      const before = resolvedParagraph.spacing.before;
+      const after = resolvedParagraph.spacing.after;
+      if (before !== null) parts.push(`margin-top: ${dxaToPx(before)}px`);
+      if (after !== null) parts.push(`margin-bottom: ${dxaToPx(after)}px`);
+      const line = resolvedParagraph.spacing.line;
+      const rule = resolvedParagraph.spacing.lineRule;
+      if (line !== null) {
+        if (rule === "exact" || rule === "atLeast") {
+          parts.push(`line-height: ${dxaToPx(line)}px`);
+        } else {
+          parts.push(`line-height: ${(line / 240).toFixed(3)}`);
+        }
+      }
+    }
+  }
+
+  if (resolvedBaseRun) {
+    const family = fontFamilyCss(resolvedBaseRun);
+    if (family) parts.push(`font-family: ${family}`);
+    if (resolvedBaseRun.size !== null) {
+      const px = halfPointsToPx(resolvedBaseRun.size);
+      parts.push(`font-size: ${Number.isInteger(px) ? px : px.toFixed(2)}px`);
+    }
+    if (resolvedBaseRun.bold === true) parts.push("font-weight: 700");
+    if (resolvedBaseRun.italic === true) parts.push("font-style: italic");
+    const color = resolveRunColor(resolvedBaseRun, theme);
+    if (color) parts.push(`color: ${color}`);
+  }
+
+  if (outlineLevel !== null && outlineLevel !== undefined) {
+    parts.push(`--docx-outline-level: ${outlineLevel}`);
+  }
+
+  return parts.join("; ");
+}
+
+export function buildParagraphView(theme: ThemeTable | null) {
+  return (node: PMNode): NodeView => paragraphViewImpl(node, theme);
+}
+
+export function paragraphView(node: PMNode): NodeView {
+  return paragraphViewImpl(node, null);
+}
+
+function paragraphViewImpl(
+  node: PMNode,
+  theme: ThemeTable | null,
+): NodeView {
+  const dom = document.createElement("p");
+  dom.className = "docx-paragraph";
+
+  const props = node.attrs.properties as ParagraphProperties | null;
+  const resolved = node.attrs.resolvedProperties as ParagraphProperties | null;
+  const resolvedBaseRun = node.attrs.resolvedBaseRun as RunProperties | null;
+  const outlineLevel =
+    resolved?.outlineLevel ?? props?.outlineLevel ?? null;
+
+  const style = buildParagraphStyle(resolved, resolvedBaseRun, outlineLevel, theme);
+  if (style.length > 0) dom.setAttribute("style", style);
+
+  if (resolved?.styleId) {
+    dom.setAttribute("data-style", resolved.styleId);
+  } else if (props?.styleId) {
+    dom.setAttribute("data-style", props.styleId);
+  }
+  if (outlineLevel !== null && outlineLevel !== undefined) {
+    dom.setAttribute("data-outline", String(outlineLevel));
+  }
+
+  return { dom, contentDOM: dom };
+}

package/src/render/ruler.ts

@@ -0,0 +1,110 @@
+import type { SectionProperties } from "../model/sections";
+import { dxaToPx, PX_PER_INCH } from "./units";
+
+export type RulerHandle = {
+  element: HTMLElement;
+  destroy(): void;
+};
+
+export function buildRuler(props: SectionProperties): RulerHandle {
+  const widthPx = dxaToPx(props.pageSize.width);
+  const leftMarginPx = dxaToPx(props.margins.left);
+  const rightMarginPx = dxaToPx(props.margins.right);
+
+  const ruler = document.createElement("div");
+  ruler.className = "docx-ruler";
+  ruler.setAttribute("data-docx-ruler", "true");
+  ruler.style.width = `${widthPx}px`;
+
+  // Margin gutters (gray) and body area (white) — reflects the OOXML margins.
+  const leftGutter = document.createElement("div");
+  leftGutter.className = "docx-ruler__gutter docx-ruler__gutter--left";
+  leftGutter.style.width = `${leftMarginPx}px`;
+  ruler.appendChild(leftGutter);
+
+  const body = document.createElement("div");
+  body.className = "docx-ruler__body";
+  body.style.left = `${leftMarginPx}px`;
+  body.style.right = `${rightMarginPx}px`;
+  ruler.appendChild(body);
+
+  const rightGutter = document.createElement("div");
+  rightGutter.className = "docx-ruler__gutter docx-ruler__gutter--right";
+  rightGutter.style.width = `${rightMarginPx}px`;
+  rightGutter.style.right = "0";
+  ruler.appendChild(rightGutter);
+
+  // Tick marks every quarter inch, numbers every inch (relative to body start).
+  const bodyWidthPx = widthPx - leftMarginPx - rightMarginPx;
+  const inchCount = Math.floor(bodyWidthPx / PX_PER_INCH);
+  for (let i = 0; i <= inchCount; i++) {
+    for (let q = 0; q < 4; q++) {
+      const tickPx = i * PX_PER_INCH + (q * PX_PER_INCH) / 4;
+      if (tickPx > bodyWidthPx) break;
+      const tick = document.createElement("div");
+      tick.className =
+        q === 0 ? "docx-ruler__tick docx-ruler__tick--major" : "docx-ruler__tick";
+      tick.style.left = `${tickPx}px`;
+      body.appendChild(tick);
+      if (q === 0 && i > 0) {
+        const label = document.createElement("span");
+        label.className = "docx-ruler__label";
+        label.style.left = `${tickPx}px`;
+        label.textContent = String(i);
+        body.appendChild(label);
+      }
+    }
+  }
+
+  // Indent triangles intentionally absent — the visual handles aren't yet
+  // wired to drag-to-indent commands. Adding a `cursor: ew-resize` element
+  // without a working drag handler is a UX lie, so we ship the ruler as
+  // measurement-only until Phase 3 wires drag-to-indent.
+
+  return {
+    element: ruler,
+    destroy() {
+      ruler.remove();
+    },
+  };
+}
+
+export const RULER_CSS = `
+.docx-ruler {
+  position: relative;
+  height: 24px;
+  margin: 0 auto 4px;
+  font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #5f6368;
+  user-select: none;
+}
+.docx-ruler__gutter {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: #dadce0;
+}
+.docx-ruler__gutter--left { left: 0; }
+.docx-ruler__body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: #ffffff;
+  border-top: 1px solid #dadce0;
+  border-bottom: 1px solid #dadce0;
+}
+.docx-ruler__tick {
+  position: absolute;
+  bottom: 0;
+  width: 1px;
+  height: 4px;
+  background: #80868b;
+}
+.docx-ruler__tick--major { height: 8px; background: #5f6368; }
+.docx-ruler__label {
+  position: absolute;
+  top: 4px;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+`;

package/src/render/style_registry.ts

@@ -0,0 +1,33 @@
+/**
+ * Ref-counted global style injection. Plugins that mount floating DOM into
+ * `document.body` share styles via this helper so that:
+ *  - Multiple editor instances on the same page don't duplicate the style tag.
+ *  - The style tag is removed when the last consumer destroys.
+ *
+ * Caller flow:
+ *   const release = registerGlobalStyle("docx-bubble-style", BUBBLE_CSS);
+ *   // …
+ *   release();  // on plugin destroy
+ */
+const REFCOUNTS = new Map<string, number>();
+
+export function registerGlobalStyle(key: string, css: string): () => void {
+  const attr = `data-${key}`;
+  const existing = document.querySelector(`[${attr}]`);
+  REFCOUNTS.set(key, (REFCOUNTS.get(key) ?? 0) + 1);
+  if (!existing) {
+    const el = document.createElement("style");
+    el.setAttribute(attr, "true");
+    el.textContent = css;
+    document.head.appendChild(el);
+  }
+  return () => {
+    const next = (REFCOUNTS.get(key) ?? 1) - 1;
+    if (next <= 0) {
+      REFCOUNTS.delete(key);
+      document.querySelector(`[${attr}]`)?.remove();
+    } else {
+      REFCOUNTS.set(key, next);
+    }
+  };
+}

package/src/render/table_dom.test.ts

@@ -0,0 +1,171 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { parseXml } from "@lotics/ooxml/xml";
+import { renderTable, isTableXml } from "./table_dom";
+import { docxSchema } from "../pm/schema";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import { createReadOnlyView } from "./view";
+
+const NS = `xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"`;
+
+let host: HTMLElement;
+beforeEach(() => {
+  document.body.innerHTML = "";
+  host = document.createElement("div");
+  document.body.appendChild(host);
+});
+
+describe("renderTable — basic structure", () => {
+  it("renders <w:tbl> with rows and cells into a real <table>", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr>
+          <w:tc><w:p><w:r><w:t>A1</w:t></w:r></w:p></w:tc>
+          <w:tc><w:p><w:r><w:t>B1</w:t></w:r></w:p></w:tc>
+        </w:tr>
+        <w:tr>
+          <w:tc><w:p><w:r><w:t>A2</w:t></w:r></w:p></w:tc>
+          <w:tc><w:p><w:r><w:t>B2</w:t></w:r></w:p></w:tc>
+        </w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    expect(dom.tagName.toLowerCase()).toBe("table");
+    const rows = dom.querySelectorAll("tr");
+    expect(rows).toHaveLength(2);
+    expect(rows[0].cells).toHaveLength(2);
+    expect(rows[0].cells[0].textContent).toContain("A1");
+    expect(rows[1].cells[1].textContent).toContain("B2");
+  });
+
+  it("applies gridSpan as colspan", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr>
+          <w:tc>
+            <w:tcPr><w:gridSpan w:val="2"/></w:tcPr>
+            <w:p><w:r><w:t>spanning</w:t></w:r></w:p>
+          </w:tc>
+        </w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    const cell = dom.querySelector("td")!;
+    expect(cell.getAttribute("colspan")).toBe("2");
+  });
+
+  it("converts vMerge restart + continue into rowspan on the originating cell", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr>
+          <w:tc><w:tcPr><w:vMerge w:val="restart"/></w:tcPr><w:p><w:r><w:t>top</w:t></w:r></w:p></w:tc>
+          <w:tc><w:p><w:r><w:t>r1c2</w:t></w:r></w:p></w:tc>
+        </w:tr>
+        <w:tr>
+          <w:tc><w:tcPr><w:vMerge/></w:tcPr><w:p/></w:tc>
+          <w:tc><w:p><w:r><w:t>r2c2</w:t></w:r></w:p></w:tc>
+        </w:tr>
+        <w:tr>
+          <w:tc><w:tcPr><w:vMerge/></w:tcPr><w:p/></w:tc>
+          <w:tc><w:p><w:r><w:t>r3c2</w:t></w:r></w:p></w:tc>
+        </w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    const rows = dom.querySelectorAll("tr");
+    expect(rows[0].cells[0].getAttribute("rowspan")).toBe("3");
+    expect(rows[0].cells[0].textContent).toContain("top");
+    expect(rows[1].cells).toHaveLength(1);
+    expect(rows[1].cells[0].textContent).toContain("r2c2");
+    expect(rows[2].cells[0].textContent).toContain("r3c2");
+  });
+
+  it("applies cell border styles from <w:tcBorders>", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr>
+          <w:tc>
+            <w:tcPr>
+              <w:tcBorders>
+                <w:top w:val="single" w:sz="8" w:color="333333"/>
+                <w:bottom w:val="double" w:sz="16" w:color="000000"/>
+              </w:tcBorders>
+            </w:tcPr>
+            <w:p><w:r><w:t>x</w:t></w:r></w:p>
+          </w:tc>
+        </w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    const cell = dom.querySelector("td")!;
+    const style = cell.getAttribute("style") ?? "";
+    expect(style).toMatch(/border-top:\s*1pt\s+solid\s+#333333/);
+    expect(style).toMatch(/border-bottom:\s*2pt\s+double/);
+  });
+
+  it("renders bold and italic runs inside cells", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr><w:tc>
+          <w:p><w:r><w:rPr><w:b/></w:rPr><w:t>bold</w:t></w:r></w:p>
+          <w:p><w:r><w:rPr><w:i/></w:rPr><w:t>italic</w:t></w:r></w:p>
+        </w:tc></w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    expect(dom.querySelector("strong")?.textContent).toBe("bold");
+    expect(dom.querySelector("em")?.textContent).toBe("italic");
+  });
+
+  it("renders nested tables inside cells", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr><w:tc>
+          <w:tbl>
+            <w:tr><w:tc><w:p><w:r><w:t>inner</w:t></w:r></w:p></w:tc></w:tr>
+          </w:tbl>
+        </w:tc></w:tr>
+      </w:tbl>`)[0];
+    const dom = renderTable(tbl);
+    const tables = dom.querySelectorAll("table");
+    expect(tables).toHaveLength(1);
+    expect(tables[0].textContent).toContain("inner");
+  });
+
+  it("isTableXml correctly identifies w:tbl elements", () => {
+    const tbl = parseXml(`<w:tbl ${NS}/>`)[0];
+    const notTbl = parseXml(`<w:p ${NS}/>`)[0];
+    expect(isTableXml(tbl)).toBe(true);
+    expect(isTableXml(notTbl)).toBe(false);
+    expect(isTableXml(null)).toBe(false);
+    expect(isTableXml(undefined)).toBe(false);
+  });
+});
+
+describe("opaque_block nodeView routes w:tbl through renderTable", () => {
+  it("renders a table inside an opaque_block in the EditorView", () => {
+    const tbl = parseXml(`
+      <w:tbl ${NS}>
+        <w:tr>
+          <w:tc><w:p><w:r><w:t>X</w:t></w:r></w:p></w:tc>
+          <w:tc><w:p><w:r><w:t>Y</w:t></w:r></w:p></w:tc>
+        </w:tr>
+      </w:tbl>`)[0];
+    const { doc, paragraph, opaque_block } = docxSchema.nodes;
+    const pmDoc = doc.create({}, [
+      paragraph.create({}, []),
+      opaque_block.create({ xml: tbl }),
+    ]);
+    const view = createReadOnlyView(host, pmDoc, {
+      fontRegistry: buildFontRegistry({ embeddedFonts: [], workspaceFonts: [] }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        },
+      ],
+    });
+    const tables = host.querySelectorAll("table.docx-table");
+    expect(tables).toHaveLength(1);
+    expect(tables[0].textContent).toContain("X");
+    expect(tables[0].textContent).toContain("Y");
+    view.destroy();
+  });
+});