@lotics/docx 0.1.0

package/src/parse/sections.ts

@@ -0,0 +1,182 @@
+import {
+  getAttr,
+  getChildren,
+  findChild,
+  getTagName,
+  type XmlElement,
+} from "@lotics/ooxml/xml";
+import type { Body, Block } from "../model/types";
+import {
+  DEFAULT_COLUMNS,
+  DEFAULT_PAGE_MARGINS,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_SECTION_PROPERTIES,
+  type Column,
+  type Columns,
+  type HeaderFooterRef,
+  type HeaderFooterType,
+  type Orientation,
+  type PageMargins,
+  type PageSize,
+  type Section,
+  type SectionProperties,
+  type SectionType,
+} from "../model/sections";
+
+function parseIntOrDefault(value: string | undefined, fallback: number): number {
+  if (value === undefined) return fallback;
+  const n = Number.parseInt(value, 10);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+function parseIntOrNull(value: string | undefined): number | null {
+  if (value === undefined) return null;
+  const n = Number.parseInt(value, 10);
+  return Number.isFinite(n) ? n : null;
+}
+
+function isOrientation(value: string): value is Orientation {
+  return value === "portrait" || value === "landscape";
+}
+
+function isSectionType(value: string): value is SectionType {
+  return (
+    value === "continuous" ||
+    value === "evenPage" ||
+    value === "nextColumn" ||
+    value === "nextPage" ||
+    value === "oddPage"
+  );
+}
+
+function isHeaderFooterType(value: string): value is HeaderFooterType {
+  return value === "default" || value === "first" || value === "even";
+}
+
+function parsePageSize(el: XmlElement | undefined): PageSize {
+  if (!el) return DEFAULT_PAGE_SIZE;
+  const orientStr = getAttr(el, "w:orient");
+  const orientation: Orientation =
+    orientStr && isOrientation(orientStr) ? orientStr : "portrait";
+  const width = parseIntOrDefault(getAttr(el, "w:w"), DEFAULT_PAGE_SIZE.width);
+  const height = parseIntOrDefault(getAttr(el, "w:h"), DEFAULT_PAGE_SIZE.height);
+  return { width, height, orientation };
+}
+
+function parseMargins(el: XmlElement | undefined): PageMargins {
+  if (!el) return DEFAULT_PAGE_MARGINS;
+  return {
+    top: parseIntOrDefault(getAttr(el, "w:top"), DEFAULT_PAGE_MARGINS.top),
+    right: parseIntOrDefault(getAttr(el, "w:right"), DEFAULT_PAGE_MARGINS.right),
+    bottom: parseIntOrDefault(getAttr(el, "w:bottom"), DEFAULT_PAGE_MARGINS.bottom),
+    left: parseIntOrDefault(getAttr(el, "w:left"), DEFAULT_PAGE_MARGINS.left),
+    header: parseIntOrDefault(getAttr(el, "w:header"), DEFAULT_PAGE_MARGINS.header),
+    footer: parseIntOrDefault(getAttr(el, "w:footer"), DEFAULT_PAGE_MARGINS.footer),
+    gutter: parseIntOrDefault(getAttr(el, "w:gutter"), DEFAULT_PAGE_MARGINS.gutter),
+  };
+}
+
+function parseColumns(el: XmlElement | undefined): Columns {
+  if (!el) return DEFAULT_COLUMNS;
+  const count = parseIntOrDefault(getAttr(el, "w:num"), 1);
+  const space = parseIntOrNull(getAttr(el, "w:space"));
+  const equalWidth = getAttr(el, "w:equalWidth") !== "0";
+  const separator = getAttr(el, "w:sep") === "1";
+  const columns: Column[] = [];
+  for (const child of getChildren(el)) {
+    if (getTagName(child) !== "w:col") continue;
+    columns.push({
+      width: parseIntOrNull(getAttr(child, "w:w")),
+      space: parseIntOrNull(getAttr(child, "w:space")),
+    });
+  }
+  return { count, space, equalWidth, separator, columns };
+}
+
+function parseHeaderFooterRefs(
+  sectPr: XmlElement,
+  refTag: "w:headerReference" | "w:footerReference",
+): HeaderFooterRef[] {
+  const refs: HeaderFooterRef[] = [];
+  for (const child of getChildren(sectPr)) {
+    if (getTagName(child) !== refTag) continue;
+    const typeStr = getAttr(child, "w:type") ?? "default";
+    if (!isHeaderFooterType(typeStr)) continue;
+    const rId = getAttr(child, "r:id");
+    if (!rId) continue;
+    refs.push({ type: typeStr, relationshipId: rId });
+  }
+  return refs;
+}
+
+export function parseSectionProperties(sectPr: XmlElement): SectionProperties {
+  const typeChild = findChild(sectPr, "w:type");
+  const typeStr = typeChild ? getAttr(typeChild, "w:val") : undefined;
+  const type: SectionType =
+    typeStr && isSectionType(typeStr) ? typeStr : "nextPage";
+
+  const pageSize = parsePageSize(findChild(sectPr, "w:pgSz"));
+  const margins = parseMargins(findChild(sectPr, "w:pgMar"));
+  const columns = parseColumns(findChild(sectPr, "w:cols"));
+  const titlePage = findChild(sectPr, "w:titlePg") !== undefined;
+  const headerRefs = parseHeaderFooterRefs(sectPr, "w:headerReference");
+  const footerRefs = parseHeaderFooterRefs(sectPr, "w:footerReference");
+
+  return {
+    type,
+    pageSize,
+    margins,
+    columns,
+    titlePage,
+    headerRefs,
+    footerRefs,
+  };
+}
+
+function findParagraphSectPr(block: Block): XmlElement | null {
+  if (block.kind !== "paragraph") return null;
+  if (block.properties === null) return null;
+  for (const propEl of block.properties) {
+    if (getTagName(propEl) === "w:sectPr") return propEl;
+  }
+  return null;
+}
+
+export function parseBodySections(body: Body): Section[] {
+  const sections: Section[] = [];
+  let sectionStart = 0;
+
+  for (let i = 0; i < body.children.length; i++) {
+    const block = body.children[i];
+
+    if (block.kind === "body_sect_pr") {
+      sections.push({
+        properties: parseSectionProperties(block.xml),
+        blockStartIndex: sectionStart,
+        blockEndIndex: i - 1,
+      });
+      sectionStart = i + 1;
+      continue;
+    }
+
+    const inlineSectPr = findParagraphSectPr(block);
+    if (inlineSectPr !== null) {
+      sections.push({
+        properties: parseSectionProperties(inlineSectPr),
+        blockStartIndex: sectionStart,
+        blockEndIndex: i,
+      });
+      sectionStart = i + 1;
+    }
+  }
+
+  if (sections.length === 0) {
+    sections.push({
+      properties: { ...DEFAULT_SECTION_PROPERTIES },
+      blockStartIndex: 0,
+      blockEndIndex: body.children.length - 1,
+    });
+  }
+
+  return sections;
+}

package/src/parse/styles.ts

@@ -0,0 +1,149 @@
+import {
+  parseXml,
+  getTagName,
+  getChildren,
+  findChild,
+  getAttr,
+  type XmlElement,
+} from "@lotics/ooxml/xml";
+import {
+  EMPTY_PARAGRAPH_PROPERTIES,
+  EMPTY_RUN_PROPERTIES,
+  extractParagraphProperties,
+  extractRunProperties,
+  type ParagraphProperties,
+  type RunProperties,
+} from "../model/properties";
+import type { Style, StyleTable, StyleType } from "../model/style_table";
+
+export function parseStyleTable(parts: ReadonlyMap<string, Uint8Array>): StyleTable {
+  const stylesBytes = parts.get("word/styles.xml");
+  if (!stylesBytes) {
+    return {
+      paragraphDefaults: { ...EMPTY_PARAGRAPH_PROPERTIES },
+      runDefaults: { ...EMPTY_RUN_PROPERTIES },
+      styles: new Map(),
+      defaultParagraphStyleId: null,
+      defaultCharacterStyleId: null,
+    };
+  }
+
+  const xml = new TextDecoder("utf-8").decode(stylesBytes);
+  const parsed = parseXml(xml);
+  const stylesEl = parsed.find((el) => getTagName(el) === "w:styles");
+
+  if (!stylesEl) {
+    return {
+      paragraphDefaults: { ...EMPTY_PARAGRAPH_PROPERTIES },
+      runDefaults: { ...EMPTY_RUN_PROPERTIES },
+      styles: new Map(),
+      defaultParagraphStyleId: null,
+      defaultCharacterStyleId: null,
+    };
+  }
+
+  let paragraphDefaults = { ...EMPTY_PARAGRAPH_PROPERTIES };
+  let runDefaults = { ...EMPTY_RUN_PROPERTIES };
+  const styles = new Map<string, Style>();
+  let defaultParagraphStyleId: string | null = null;
+  let defaultCharacterStyleId: string | null = null;
+
+  for (const child of getChildren(stylesEl)) {
+    const tag = getTagName(child);
+    if (tag === "w:docDefaults") {
+      const result = parseDocDefaults(child);
+      paragraphDefaults = result.paragraph;
+      runDefaults = result.run;
+      continue;
+    }
+    if (tag === "w:style") {
+      const style = parseStyle(child);
+      if (!style) continue;
+      styles.set(style.id, style);
+      if (style.isDefault) {
+        if (style.type === "paragraph" && defaultParagraphStyleId === null) {
+          defaultParagraphStyleId = style.id;
+        } else if (style.type === "character" && defaultCharacterStyleId === null) {
+          defaultCharacterStyleId = style.id;
+        }
+      }
+    }
+  }
+
+  return {
+    paragraphDefaults,
+    runDefaults,
+    styles,
+    defaultParagraphStyleId,
+    defaultCharacterStyleId,
+  };
+}
+
+function parseDocDefaults(
+  el: XmlElement,
+): { paragraph: ParagraphProperties; run: RunProperties } {
+  let paragraph = { ...EMPTY_PARAGRAPH_PROPERTIES };
+  let run = { ...EMPTY_RUN_PROPERTIES };
+
+  const rPrDefault = findChild(el, "w:rPrDefault");
+  if (rPrDefault) {
+    const rPr = findChild(rPrDefault, "w:rPr");
+    if (rPr) run = extractRunProperties(getChildren(rPr));
+  }
+
+  const pPrDefault = findChild(el, "w:pPrDefault");
+  if (pPrDefault) {
+    const pPr = findChild(pPrDefault, "w:pPr");
+    if (pPr) paragraph = extractParagraphProperties(getChildren(pPr));
+  }
+
+  return { paragraph, run };
+}
+
+function parseStyle(el: XmlElement): Style | null {
+  const typeStr = getAttr(el, "w:type");
+  const id = getAttr(el, "w:styleId");
+  if (!id || !typeStr) return null;
+  if (
+    typeStr !== "paragraph" &&
+    typeStr !== "character" &&
+    typeStr !== "table" &&
+    typeStr !== "numbering"
+  ) {
+    return null;
+  }
+  const type: StyleType = typeStr;
+  const isDefault = getAttr(el, "w:default") === "1";
+
+  let name: string | null = null;
+  let basedOn: string | null = null;
+  let linkedStyleId: string | null = null;
+  let paragraphProperties: ParagraphProperties | null = null;
+  let runProperties: RunProperties | null = null;
+
+  for (const child of getChildren(el)) {
+    const tag = getTagName(child);
+    if (tag === "w:name") {
+      name = getAttr(child, "w:val") ?? null;
+    } else if (tag === "w:basedOn") {
+      basedOn = getAttr(child, "w:val") ?? null;
+    } else if (tag === "w:link") {
+      linkedStyleId = getAttr(child, "w:val") ?? null;
+    } else if (tag === "w:pPr") {
+      paragraphProperties = extractParagraphProperties(getChildren(child));
+    } else if (tag === "w:rPr") {
+      runProperties = extractRunProperties(getChildren(child));
+    }
+  }
+
+  return {
+    id,
+    name,
+    type,
+    basedOn,
+    linkedStyleId,
+    paragraphProperties,
+    runProperties,
+    isDefault,
+  };
+}

package/src/parse/theme.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from "vitest";
+import { parseThemeTable } from "./theme";
+import { resolveThemeColor } from "../model/theme";
+
+const THEME_XML = `<?xml version="1.0"?>
+<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office">
+  <a:themeElements>
+    <a:clrScheme name="Office">
+      <a:dk1><a:sysClr val="windowText" lastClr="000000"/></a:dk1>
+      <a:lt1><a:sysClr val="window" lastClr="FFFFFF"/></a:lt1>
+      <a:dk2><a:srgbClr val="44546A"/></a:dk2>
+      <a:lt2><a:srgbClr val="E7E6E6"/></a:lt2>
+      <a:accent1><a:srgbClr val="5B9BD5"/></a:accent1>
+      <a:accent2><a:srgbClr val="ED7D31"/></a:accent2>
+      <a:accent3><a:srgbClr val="A5A5A5"/></a:accent3>
+      <a:accent4><a:srgbClr val="FFC000"/></a:accent4>
+      <a:accent5><a:srgbClr val="4472C4"/></a:accent5>
+      <a:accent6><a:srgbClr val="70AD47"/></a:accent6>
+      <a:hlink><a:srgbClr val="0563C1"/></a:hlink>
+      <a:folHlink><a:srgbClr val="954F72"/></a:folHlink>
+    </a:clrScheme>
+    <a:fontScheme name="Office">
+      <a:majorFont><a:latin typeface="Calibri Light"/></a:majorFont>
+      <a:minorFont><a:latin typeface="Calibri"/></a:minorFont>
+    </a:fontScheme>
+  </a:themeElements>
+</a:theme>`;
+
+function themeParts() {
+  return new Map([["word/theme/theme1.xml", new TextEncoder().encode(THEME_XML)]]);
+}
+
+describe("parseThemeTable", () => {
+  it("extracts all 12 theme colors", () => {
+    const theme = parseThemeTable(themeParts());
+    expect(theme.colors.get("dk1")).toBe("000000");
+    expect(theme.colors.get("lt1")).toBe("FFFFFF");
+    expect(theme.colors.get("accent1")).toBe("5B9BD5");
+    expect(theme.colors.get("hlink")).toBe("0563C1");
+    expect(theme.colors.get("folHlink")).toBe("954F72");
+  });
+
+  it("extracts major and minor latin fonts", () => {
+    const theme = parseThemeTable(themeParts());
+    expect(theme.majorFonts.latin).toBe("Calibri Light");
+    expect(theme.minorFonts.latin).toBe("Calibri");
+  });
+
+  it("returns empty table when theme part is missing", () => {
+    const theme = parseThemeTable(new Map());
+    expect(theme.colors.size).toBe(0);
+  });
+});
+
+describe("resolveThemeColor", () => {
+  it("resolves named theme color (text1 → dk1) without modifiers", () => {
+    const theme = parseThemeTable(themeParts());
+    expect(resolveThemeColor(theme, "text1", null, null)).toBe("000000");
+    expect(resolveThemeColor(theme, "background1", null, null)).toBe("FFFFFF");
+    expect(resolveThemeColor(theme, "accent1", null, null)).toBe("5B9BD5");
+  });
+
+  it("applies tint to lighten the base color", () => {
+    const theme = parseThemeTable(themeParts());
+    const lightened = resolveThemeColor(theme, "accent1", "BF", null);
+    expect(lightened).not.toBe("5B9BD5");
+    expect(lightened).not.toBeNull();
+    if (!lightened) return;
+    const r = Number.parseInt(lightened.slice(0, 2), 16);
+    expect(r).toBeGreaterThan(0x5b);
+  });
+
+  it("applies shade to darken the base color", () => {
+    const theme = parseThemeTable(themeParts());
+    const darkened = resolveThemeColor(theme, "accent1", null, "80");
+    expect(darkened).not.toBeNull();
+    if (!darkened) return;
+    const r = Number.parseInt(darkened.slice(0, 2), 16);
+    expect(r).toBeLessThan(0x5b);
+  });
+
+  it("returns null for unknown theme color name", () => {
+    const theme = parseThemeTable(themeParts());
+    expect(resolveThemeColor(theme, "ghost", null, null)).toBeNull();
+  });
+});

package/src/parse/theme.ts

@@ -0,0 +1,112 @@
+import {
+  parseXml,
+  getAttr,
+  getChildren,
+  getTagName,
+  type XmlElement,
+} from "@lotics/ooxml/xml";
+import {
+  EMPTY_THEME_TABLE,
+  type ThemeColorName,
+  type ThemeFontVariants,
+  type ThemeTable,
+} from "../model/theme";
+
+const COLOR_NAMES: ThemeColorName[] = [
+  "dk1",
+  "lt1",
+  "dk2",
+  "lt2",
+  "accent1",
+  "accent2",
+  "accent3",
+  "accent4",
+  "accent5",
+  "accent6",
+  "hlink",
+  "folHlink",
+];
+
+function findChildByLocal(
+  el: XmlElement,
+  local: string,
+): XmlElement | null {
+  for (const child of getChildren(el)) {
+    const tag = getTagName(child);
+    if (tag && tag.endsWith(`:${local}`)) return child;
+    if (tag === local) return child;
+  }
+  return null;
+}
+
+function readColorValue(el: XmlElement | null): string | null {
+  if (!el) return null;
+  for (const child of getChildren(el)) {
+    const tag = getTagName(child) ?? "";
+    if (tag.endsWith(":sysClr")) {
+      const last = getAttr(child, "lastClr");
+      if (last) return last.toUpperCase();
+    } else if (tag.endsWith(":srgbClr")) {
+      const v = getAttr(child, "val");
+      if (v) return v.toUpperCase();
+    }
+  }
+  return null;
+}
+
+function parseFontVariants(el: XmlElement | null): ThemeFontVariants {
+  if (!el) return { latin: null, eastAsia: null, complexScript: null };
+  const out: ThemeFontVariants = { latin: null, eastAsia: null, complexScript: null };
+  for (const child of getChildren(el)) {
+    const tag = getTagName(child) ?? "";
+    if (tag.endsWith(":latin")) out.latin = getAttr(child, "typeface") ?? null;
+    else if (tag.endsWith(":ea")) out.eastAsia = getAttr(child, "typeface") ?? null;
+    else if (tag.endsWith(":cs"))
+      out.complexScript = getAttr(child, "typeface") ?? null;
+  }
+  return out;
+}
+
+export function parseThemeTable(
+  parts: ReadonlyMap<string, Uint8Array>,
+): ThemeTable {
+  let bytes: Uint8Array | undefined;
+  for (const [path, value] of parts) {
+    if (/^word\/theme\/theme\d+\.xml$/.test(path)) {
+      bytes = value;
+      break;
+    }
+  }
+  if (!bytes) return EMPTY_THEME_TABLE;
+
+  const xml = new TextDecoder("utf-8").decode(bytes);
+  const parsed = parseXml(xml);
+  const themeEl = parsed.find((el) => {
+    const tag = getTagName(el) ?? "";
+    return tag.endsWith(":theme") || tag === "theme";
+  });
+  if (!themeEl) return EMPTY_THEME_TABLE;
+
+  const elements = findChildByLocal(themeEl, "themeElements");
+  if (!elements) return EMPTY_THEME_TABLE;
+
+  const colors = new Map<ThemeColorName, string>();
+  const clrScheme = findChildByLocal(elements, "clrScheme");
+  if (clrScheme) {
+    for (const name of COLOR_NAMES) {
+      const colorWrapper = findChildByLocal(clrScheme, name);
+      const value = readColorValue(colorWrapper);
+      if (value) colors.set(name, value);
+    }
+  }
+
+  const fontScheme = findChildByLocal(elements, "fontScheme");
+  const majorFonts = parseFontVariants(
+    fontScheme ? findChildByLocal(fontScheme, "majorFont") : null,
+  );
+  const minorFonts = parseFontVariants(
+    fontScheme ? findChildByLocal(fontScheme, "minorFont") : null,
+  );
+
+  return { colors, majorFonts, minorFonts };
+}

package/src/pm/bubble_menu.ts

@@ -0,0 +1,117 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { toggleMark } from "prosemirror-commands";
+import type { EditorView } from "prosemirror-view";
+import { docxSchema } from "./schema";
+import { registerGlobalStyle } from "../render/style_registry";
+
+const bubbleKey = new PluginKey("docx-bubble-menu");
+
+const BUBBLE_CSS = `
+.docx-bubble-menu {
+  position: absolute;
+  display: none;
+  background: #202124;
+  color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  padding: 4px;
+  gap: 2px;
+  z-index: 1000;
+  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.docx-bubble-menu[data-visible="true"] { display: flex; }
+.docx-bubble-menu button {
+  background: transparent;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font: inherit;
+}
+.docx-bubble-menu button:hover { background: rgba(255,255,255,0.15); }
+.docx-bubble-menu button[data-active="true"] { background: rgba(26,115,232,0.6); }
+`;
+
+function installStyle(): () => void {
+  return registerGlobalStyle("docx-bubble-style", BUBBLE_CSS);
+}
+
+function buildButton(label: string, title: string, onClick: () => void): HTMLButtonElement {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = label;
+  btn.title = title;
+  btn.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  });
+  return btn;
+}
+
+export function bubbleMenuPlugin(): Plugin {
+  return new Plugin({
+    key: bubbleKey,
+    view(view) {
+      const releaseStyle = installStyle();
+      const menu = document.createElement("div");
+      menu.className = "docx-bubble-menu";
+      menu.setAttribute("data-docx-bubble-menu", "true");
+      menu.setAttribute("data-visible", "false");
+
+      const boldBtn = buildButton("B", "Bold (⌘B)", () => {
+        toggleMark(docxSchema.marks.bold)(view.state, view.dispatch);
+        view.focus();
+      });
+      boldBtn.style.fontWeight = "700";
+      const italicBtn = buildButton("I", "Italic (⌘I)", () => {
+        toggleMark(docxSchema.marks.italic)(view.state, view.dispatch);
+        view.focus();
+      });
+      italicBtn.style.fontStyle = "italic";
+      const underlineBtn = buildButton("U", "Underline (⌘U)", () => {
+        toggleMark(docxSchema.marks.underline)(view.state, view.dispatch);
+        view.focus();
+      });
+      underlineBtn.style.textDecoration = "underline";
+
+      menu.append(boldBtn, italicBtn, underlineBtn);
+      document.body.appendChild(menu);
+
+      const update = (v: EditorView) => {
+        const { from, to, empty } = v.state.selection;
+        if (empty || !v.hasFocus()) {
+          menu.setAttribute("data-visible", "false");
+          return;
+        }
+        const start = v.coordsAtPos(from);
+        const end = v.coordsAtPos(to);
+        const left = (start.left + end.right) / 2;
+        const top = start.top - 8;
+        menu.style.left = `${left}px`;
+        menu.style.top = `${top + window.scrollY}px`;
+        menu.style.transform = "translate(-50%, -100%)";
+        menu.setAttribute("data-visible", "true");
+
+        for (const [btn, type] of [
+          [boldBtn, docxSchema.marks.bold],
+          [italicBtn, docxSchema.marks.italic],
+          [underlineBtn, docxSchema.marks.underline],
+        ] as const) {
+          const active = v.state.doc.rangeHasMark(from, to, type);
+          btn.setAttribute("data-active", String(active));
+        }
+      };
+
+      update(view);
+      return {
+        update,
+        destroy() {
+          menu.remove();
+          releaseStyle();
+        },
+      };
+    },
+  });
+}