@portone/docx-editor 0.1.0

package/dist/styles/classNames.js

@@ -0,0 +1,208 @@
+// src/styles/classNames.ts
+var PREFIX = "docx-editor";
+var editorClassNames = {
+  /** The outermost box holding both the toolbar and the paper */
+  frame: `${PREFIX}-frame`,
+  /** The box that owns the scrolling */
+  root: `${PREFIX}-editor`,
+  /** The paper the text sits on (contenteditable) */
+  sheet: `${PREFIX}-sheet`,
+  paragraph: `${PREFIX}-p`,
+  run: `${PREFIX}-run`,
+  tab: `${PREFIX}-tab`,
+  /** The independently measurable DOM range around one tab character. */
+  tabSlot: `${PREFIX}-tab-slot`,
+  /** The caret drawn at an unambiguous edge of a laid-out tab. */
+  tabCaret: `${PREFIX}-tab-caret`,
+  /** Attached to the contenteditable while its native caret is replaced. */
+  tabCaretActive: `${PREFIX}-tab-caret-active`,
+  /** An inline image (`w:drawing` holding a picture) */
+  image: `${PREFIX}-img`,
+  /** The box the image sits in, which is also what the resize handles stand in */
+  imageBox: `${PREFIX}-img-box`,
+  /** Attached to that box while the image is the selection */
+  imageSelected: `${PREFIX}-img-selected`,
+  /** One of the four corner handles a selected image is resized by */
+  imageHandle: `${PREFIX}-img-handle`,
+  table: `${PREFIX}-tbl`,
+  tableRow: `${PREFIX}-tr`,
+  tableCell: `${PREFIX}-tc`,
+  /** Attached alongside it when the control around the cell says the cell may not be edited */
+  cellLocked: `${PREFIX}-tc-locked`,
+  /** A stretch of text sitting inside a content control (`w:sdt`) */
+  sdt: `${PREFIX}-sdt`,
+  /** Attached alongside it when the control says its contents may not be edited */
+  sdtLocked: `${PREFIX}-sdt-locked`,
+  /** A stretch of text inside a hyperlink (`w:hyperlink`) */
+  link: `${PREFIX}-link`,
+  /** A stretch of text carrying a comment anchor */
+  commentRange: `${PREFIX}-comment-range`,
+  /** An invisible OOXML comment marker inside the editable text flow */
+  commentMarker: `${PREFIX}-comment-marker`,
+  /** A superscript footnote or endnote reference */
+  noteReference: `${PREFIX}-note-reference`,
+  /** An invisible bookmark marker that occurs between body blocks */
+  bookmarkBlock: `${PREFIX}-bookmark-block`,
+  rawInline: `${PREFIX}-raw-inline`,
+  rawBlock: `${PREFIX}-raw-block`,
+  /** A preserved block that carries the original XML directly (inside a table cell, and so on) */
+  rawXmlBlock: `${PREFIX}-raw-xml`,
+  tablePlaceholder: `${PREFIX}-table`,
+  /** The box holding both the paper and the marks overlaid on it */
+  pageLayer: `${PREFIX}-page-layer`,
+  /** All of the page marks drawn over the paper */
+  pageGuides: `${PREFIX}-page-guides`,
+  /** The band that covers the space between one page and the next */
+  pageSplit: `${PREFIX}-page-split`,
+  /** The line drawn where a block that cannot be pushed down crosses a page */
+  pageCrossed: `${PREFIX}-page-crossed`,
+  /** The page number laid on the top corner of a page */
+  pageBadge: `${PREFIX}-page-badge`,
+  /** A first-section header story projected into a visual page margin */
+  pageHeader: `${PREFIX}-page-header`,
+  /** A first-section footer story projected into a visual page margin */
+  pageFooter: `${PREFIX}-page-footer`,
+  /** The mark that changes the cursor while it is over a column boundary or while a boundary is being dragged. Attached to the sheet */
+  columnResize: `${PREFIX}-col-resize`,
+  /** The vertical line that shows where the boundary stands while it is being dragged */
+  columnResizeGuide: `${PREFIX}-col-guide`,
+  rowResize: `${PREFIX}-row-resize`,
+  rowResizeGuide: `${PREFIX}-row-guide`,
+  /* The controls that come with the editor */
+  toolbar: `${PREFIX}-toolbar`,
+  /** A bundle of buttons set off by a single separator */
+  toolbarGroup: `${PREFIX}-toolbar-group`,
+  toolbarSeparator: `${PREFIX}-toolbar-sep`,
+  toolbarButton: `${PREFIX}-toolbar-btn`,
+  toolbarColorIcon: `${PREFIX}-toolbar-color-icon`,
+  toolbarColorIndicator: `${PREFIX}-toolbar-color-indicator`,
+  toolbarSelect: `${PREFIX}-toolbar-select`,
+  fontFamilySelect: `${PREFIX}-font-family-select`,
+  zoomSelect: `${PREFIX}-zoom-select`,
+  /** The box wrapped around a control that cannot draw its own tooltip (a native `select`) */
+  tooltipWrapper: `${PREFIX}-tooltip-wrap`,
+  /** The box around the button a panel opens from. A click inside it counts as a click on the panel */
+  popoverBox: `${PREFIX}-popover-box`,
+  /** The small panel that opens below a button, floated against the screen */
+  popover: `${PREFIX}-popover`,
+  /** The grid for picking a table size */
+  sizeGrid: `${PREFIX}-size-grid`,
+  sizeGridRow: `${PREFIX}-size-row`,
+  sizeGridCell: `${PREFIX}-size-cell`,
+  sizeGridLabel: `${PREFIX}-size-label`,
+  colorPicker: `${PREFIX}-color-picker`,
+  /** The text color palette. A grid of rows, so the markup says what the layout shows */
+  colorGrid: `${PREFIX}-color-grid`,
+  /** One row of the palette. Ten swatches of a family, light to dark */
+  colorRow: `${PREFIX}-color-row`,
+  /** The row at the head of the palette holding the entry that withdraws the color */
+  colorClearRow: `${PREFIX}-color-clear-row`,
+  swatch: `${PREFIX}-swatch`,
+  colorCustom: `${PREFIX}-color-custom`,
+  colorNativeInput: `${PREFIX}-color-native-input`,
+  colorHexInput: `${PREFIX}-color-hex-input`,
+  colorApply: `${PREFIX}-color-apply`,
+  /** The table menu opened with the right button, and the choice menus inside the toolbar panels */
+  menu: `${PREFIX}-menu`,
+  /** A menu of choices inside a toolbar panel, where one of them is the current one */
+  menuList: `${PREFIX}-menu-list`,
+  menuItem: `${PREFIX}-menu-item`,
+  /** The slot at the head of a menu row where the check mark of the current choice goes */
+  menuCheck: `${PREFIX}-menu-check`,
+  /** The keyboard shortcut written on the right of a menu row */
+  menuHint: `${PREFIX}-menu-hint`,
+  menuSeparator: `${PREFIX}-menu-sep`,
+  /** The panel that reads and writes a link's address, floated over the selection */
+  linkPanel: `${PREFIX}-link-panel`,
+  /** The field the address is typed into */
+  linkAddress: `${PREFIX}-link-address`,
+  /** The row of buttons under it */
+  linkPanelRow: `${PREFIX}-link-row`,
+  linkPanelIcon: `${PREFIX}-link-icon`,
+  /** A button of that panel, and of the card below, which offer the same actions */
+  /** The card that says where the link under the cursor points, floated under the link's first line */
+  linkCard: `${PREFIX}-link-card`,
+  /** The address it shows, cut off with an ellipsis where it is longer than the card */
+  linkCardAddress: `${PREFIX}-link-card-address`,
+  /** What it says in place of an address for a link that names a place in the document */
+  linkCardNote: `${PREFIX}-link-card-note`,
+  /** The document and its comment rail, laid out side by side */
+  workspace: `${PREFIX}-workspace`,
+  commentsPanel: `${PREFIX}-comments`,
+  commentsToggle: `${PREFIX}-comments-toggle`,
+  commentsHeading: `${PREFIX}-comments-heading`,
+  commentsCanvas: `${PREFIX}-comments-canvas`,
+  commentsEmpty: `${PREFIX}-comments-empty`,
+  commentPosition: `${PREFIX}-comment-position`,
+  commentCard: `${PREFIX}-comment-card`,
+  commentHeader: `${PREFIX}-comment-header`,
+  commentReply: `${PREFIX}-comment-reply`,
+  commentMeta: `${PREFIX}-comment-meta`,
+  commentAuthor: `${PREFIX}-comment-author`,
+  commentDate: `${PREFIX}-comment-date`,
+  commentBody: `${PREFIX}-comment-body`,
+  commentActions: `${PREFIX}-comment-actions`,
+  commentPrimaryAction: `${PREFIX}-comment-primary-action`,
+  commentIconActions: `${PREFIX}-comment-icon-actions`,
+  commentComposer: `${PREFIX}-comment-composer`,
+  commentInput: `${PREFIX}-comment-input`,
+  notesPanel: `${PREFIX}-notes`,
+  notesHeading: `${PREFIX}-notes-heading`,
+  notesList: `${PREFIX}-notes-list`,
+  noteLabel: `${PREFIX}-note-label`,
+  noteBody: `${PREFIX}-note-body`,
+  /** The panel drawn in place of the editor when a document was refused and the consumer wrote no panel of its own */
+  rejection: `${PREFIX}-rejection`,
+  rejectionTitle: `${PREFIX}-rejection-title`
+};
+var editorCssVariables = {
+  fontSize: `--${PREFIX}-font-size`,
+  fontFamily: `--${PREFIX}-font-family`,
+  lineHeight: `--${PREFIX}-line-height`,
+  /** The hanging indent width the list marker sits in */
+  markerWidth: `--${PREFIX}-marker-width`,
+  /** The width calculated for a tab using custom paragraph stops. */
+  tabWidth: `--${PREFIX}-tab-width`,
+  /** The paper height, grown to match the page count */
+  sheetHeight: `--${PREFIX}-sheet-height`,
+  /** The paper the open document names, and the margins printed inside it */
+  pageWidth: `--${PREFIX}-page-width`,
+  pageHeight: `--${PREFIX}-page-height`,
+  pageMarginTop: `--${PREFIX}-page-margin-top`,
+  pageMarginRight: `--${PREFIX}-page-margin-right`,
+  pageMarginBottom: `--${PREFIX}-page-margin-bottom`,
+  pageMarginLeft: `--${PREFIX}-page-margin-left`
+};
+var editorAttributes = {
+  listMarker: "data-marker",
+  /** A new page starts at this paragraph */
+  pageBreakBefore: "data-page-break",
+  /** The kind of line break. `page` when the break splits the page */
+  breakType: "data-break",
+  /** Which corner of the image a resize handle stands at (`nw`, `ne`, `sw`, `se`) */
+  imageCorner: "data-corner",
+  /** The extra height opened up to push content down to the top of the next page */
+  pagePush: "data-page-push",
+  /** The space opened up at a page break, so what follows the break starts the next page */
+  pageBreakSpace: "data-page-space",
+  /** A display-only table row that fills the remainder between page bodies */
+  tablePageSpace: "data-table-page-space",
+  /** A display-only copy of a table header row on a continued page */
+  tableRepeatedHeader: "data-table-repeated-header",
+  /**
+   * The tooltip a control shows on hover, drawn by the CSS straight from this attribute.
+   * It is the one mark here whose selector is the attribute on its own rather than a
+   * class of ours, so it carries the prefix and cannot collide with the host app.
+   */
+  tooltip: `data-${PREFIX}-tooltip`,
+  /**
+   * Put on the box the tooltips are drawn inside while they are hushed, which is what Escape
+   * does to the one standing in the way (`ui/Tooltip.tsx`).
+   */
+  tooltipsHushed: `data-${PREFIX}-tooltips-off`
+};
+export {
+  editorAttributes,
+  editorClassNames,
+  editorCssVariables
+};

package/dist/styles/colors.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The colors the built-in pickers offer, the same set for text, for text background and for the
+ * lines and the fill of a table cell.
+ *
+ * The swatches are the standard Google Docs palette, written exactly as it is laid out on
+ * screen: ten colors to a row, the neutrals first and the pure hues after them, and from the
+ * third row down each column holds one family descending from light to dark.
+ */
+/** One row of the grid a color picker draws, holding that row's `#rrggbb` colors */
+export type ColorRow = readonly string[];
+export declare const DEFAULT_COLORS: readonly ColorRow[];

package/dist/styles/colors.js

@@ -0,0 +1,14 @@
+// src/styles/colors.ts
+var DEFAULT_COLORS = [
+  "000000 434343 666666 999999 b7b7b7 cccccc d9d9d9 efefef f3f3f3 ffffff",
+  "980000 ff0000 ff9900 ffff00 00ff00 00ffff 4a86e8 0000ff 9900ff ff00ff",
+  "e6b8af f4cccc fce5cd fff2cc d9ead3 d0e0e3 c9daf8 cfe2f3 d9d2e9 ead1dc",
+  "dd7e6b ea9999 f9cb9c ffe599 b6d7a8 a2c4c9 a4c2f4 9fc5e8 b4a7d6 d5a6bd",
+  "cc4125 e06666 f6b26b ffd966 93c47d 76a5af 6d9eeb 6fa8dc 8e7cc3 c27ba0",
+  "a61c00 cc0000 e69138 f1c232 6aa84f 45818e 3c78d8 3d85c6 674ea7 a64d79",
+  "85200c 990000 b45f06 bf9000 38761d 134f5c 1155cc 0b5394 351c75 741b47",
+  "5b0f00 660000 783f04 7f6000 274e13 0c343d 1c4587 073763 20124d 4c1130"
+].map((row) => row.split(" ").map((hex) => `#${hex}`));
+export {
+  DEFAULT_COLORS
+};

package/dist/styles/fontSizes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The sizes in points the built-in font size picker offers, which is the set Word offers.
+ * A size the open document itself uses is offered along with them whether or not it stands in
+ * this list, so nothing a document declares is left unreachable.
+ */
+export declare const DEFAULT_FONT_SIZES: readonly number[];

package/dist/styles/fontSizes.js

@@ -0,0 +1,20 @@
+// src/styles/fontSizes.ts
+var DEFAULT_FONT_SIZES = [
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  15,
+  16,
+  18,
+  20,
+  22,
+  24,
+  28,
+  36
+];
+export {
+  DEFAULT_FONT_SIZES
+};

package/dist/styles/fontStack.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Injectable display-only fallback stacks for fonts unavailable on the current platform. The
+ * document's declared name remains first and exported `w:rFonts` is never changed.
+ */
+/**
+ * One fallback stack and the font names that receive it.
+ *
+ * A group is a family: every name in it is drawn with the same stand-in font.
+ */
+export interface FontFallbackGroup {
+    /** The fonts appended after the declared name, written as a CSS font-family list */
+    readonly stack: string;
+    /** The font names in this family. Letter case varies from document to document, so matching ignores it */
+    readonly names: readonly string[];
+}
+/** The fallback fonts an editor draws with */
+export interface FontFallbacks {
+    readonly groups: readonly FontFallbackGroup[];
+    /**
+     * The stack for a name in no group, and the stack laid across the whole paper
+     * when the document declares no font at all.
+     */
+    readonly defaultStack: string;
+    /**
+     * The font name the toolbar shows for a document that declares none.
+     * It has to be the font `defaultStack` actually renders, since that is what the
+     * reader sees.
+     */
+    readonly defaultFontName: string;
+}
+/**
+ * The built-in set: the CJK and Latin families above, and a Latin default.
+ *
+ * An unrecognized name, and a document that declares no font at all, land on a
+ * Latin sans. A screen serving documents in a particular language hands in its
+ * own set (`fontFallbacks` on `DocxEditor`).
+ */
+export declare const DEFAULT_FONT_FALLBACKS: FontFallbacks;
+/**
+ * Whether this font name belongs to a script written in Han characters, kana or
+ * Hangul.
+ *
+ * It decides which `w:rFonts` slots a font applies to, so it reads the built-in
+ * families rather than the fallback set the consumer handed in: which fonts stand in
+ * for which names on screen must not change what is written into the document.
+ */
+export declare function isEastAsianFontName(name: string): boolean;
+/**
+ * Appends a fallback font of the same family after each name the document declares.
+ *
+ * A run of a Japanese or Chinese document names a Latin font and an East Asian one
+ * both, one per `w:rFonts` slot, and the two belong to different families: each of
+ * them needs the stack of its own family behind it.
+ */
+export declare function withFontFallback(cssNames: string, fallbacks?: FontFallbacks): string;

package/dist/styles/fontStack.js

@@ -0,0 +1,262 @@
+// src/styles/fontStack.ts
+var KOREAN_GOTHIC = '"Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif';
+var KOREAN_MYEONGJO = '"Noto Serif KR", AppleMyungjo, serif';
+var JAPANESE_GOTHIC = '"Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif';
+var JAPANESE_MINCHO = '"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif';
+var CHINESE_SIMPLIFIED_SANS = '"PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif';
+var CHINESE_SIMPLIFIED_SERIF = '"Songti SC", "Noto Serif SC", serif';
+var CHINESE_TRADITIONAL_SANS = '"PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif';
+var CHINESE_TRADITIONAL_SERIF = '"Songti TC", "Noto Serif TC", serif';
+var EAST_ASIAN_GROUPS = [
+  {
+    stack: KOREAN_GOTHIC,
+    names: [
+      "malgun gothic",
+      "\uB9D1\uC740\uACE0\uB515",
+      "\uB9D1\uC740 \uACE0\uB515",
+      "gulim",
+      "gulimche",
+      "\uAD74\uB9BC",
+      "\uAD74\uB9BC\uCCB4",
+      "dotum",
+      "dotumche",
+      "\uB3CB\uC6C0",
+      "\uB3CB\uC6C0\uCCB4",
+      "nanum gothic",
+      "\uB098\uB214\uACE0\uB515",
+      "noto sans kr",
+      "apple sd gothic neo",
+      "\uD568\uCD08\uB86C\uB3CB\uC6C0"
+    ]
+  },
+  {
+    stack: KOREAN_MYEONGJO,
+    names: [
+      "batang",
+      "batangche",
+      "\uBC14\uD0D5",
+      "\uBC14\uD0D5\uCCB4",
+      "gungsuh",
+      "gungsuhche",
+      "\uAD81\uC11C",
+      "\uAD81\uC11C\uCCB4",
+      "nanum myeongjo",
+      "\uB098\uB214\uBA85\uC870",
+      "\uBA85\uC870",
+      "\uD568\uCD08\uB86C\uBC14\uD0D5"
+    ]
+  },
+  {
+    stack: JAPANESE_GOTHIC,
+    names: [
+      "ms gothic",
+      "\uFF2D\uFF33 \u30B4\u30B7\u30C3\u30AF",
+      "ms pgothic",
+      "\uFF2D\uFF33 \uFF30\u30B4\u30B7\u30C3\u30AF",
+      "ms ui gothic",
+      "\uFF2D\uFF33 \uFF35\uFF29 \u30B4\u30B7\u30C3\u30AF",
+      "yu gothic",
+      "yugothic",
+      "\u6E38\u30B4\u30B7\u30C3\u30AF",
+      "yu gothic ui",
+      "\u6E38\u30B4\u30B7\u30C3\u30AF UI",
+      "meiryo",
+      "\u30E1\u30A4\u30EA\u30AA",
+      "meiryo ui",
+      "hiragino kaku gothic pro",
+      "hiragino kaku gothic pron",
+      "hiragino sans",
+      "\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 Pro W3",
+      "\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3",
+      "\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF",
+      "noto sans jp",
+      "biz udgothic",
+      "biz udpgothic",
+      "BIZ UD\u30B4\u30B7\u30C3\u30AF"
+    ]
+  },
+  {
+    stack: JAPANESE_MINCHO,
+    names: [
+      "ms mincho",
+      "\uFF2D\uFF33 \u660E\u671D",
+      "ms pmincho",
+      "\uFF2D\uFF33 \uFF30\u660E\u671D",
+      "yu mincho",
+      "yumincho",
+      "\u6E38\u660E\u671D",
+      "hiragino mincho pro",
+      "hiragino mincho pron",
+      "\u30D2\u30E9\u30AE\u30CE\u660E\u671D Pro W3",
+      "\u30D2\u30E9\u30AE\u30CE\u660E\u671D ProN W3",
+      "\u30D2\u30E9\u30AE\u30CE\u660E\u671D",
+      "noto serif jp",
+      "biz udmincho",
+      "biz udpmincho",
+      "BIZ UD\u660E\u671D"
+    ]
+  },
+  {
+    stack: CHINESE_SIMPLIFIED_SANS,
+    names: [
+      "microsoft yahei",
+      "microsoft yahei ui",
+      "\u5FAE\u8F6F\u96C5\u9ED1",
+      "pingfang sc",
+      "\u82F9\u65B9",
+      "\u82F9\u65B9-\u7B80",
+      "noto sans sc",
+      "source han sans sc",
+      "simhei",
+      "\u9ED1\u4F53",
+      "heiti sc",
+      "dengxian",
+      "\u7B49\u7EBF"
+    ]
+  },
+  {
+    stack: CHINESE_SIMPLIFIED_SERIF,
+    names: [
+      "simsun",
+      "\u5B8B\u4F53",
+      "nsimsun",
+      "\u65B0\u5B8B\u4F53",
+      "songti sc",
+      "fangsong",
+      "\u4EFF\u5B8B",
+      "kaiti",
+      "\u6977\u4F53",
+      "noto serif sc",
+      "source han serif sc"
+    ]
+  },
+  {
+    stack: CHINESE_TRADITIONAL_SANS,
+    names: [
+      "microsoft jhenghei",
+      "microsoft jhenghei ui",
+      "\u5FAE\u8EDF\u6B63\u9ED1\u9AD4",
+      "pingfang tc",
+      "\u860B\u65B9-\u7E41",
+      "noto sans tc"
+    ]
+  },
+  {
+    stack: CHINESE_TRADITIONAL_SERIF,
+    names: [
+      "pmingliu",
+      "\u65B0\u7D30\u660E\u9AD4",
+      "mingliu",
+      "\u7D30\u660E\u9AD4",
+      "dfkai-sb",
+      "\u6A19\u6977\u9AD4",
+      "songti tc",
+      "noto serif tc"
+    ]
+  }
+];
+var LATIN_GROUPS = [
+  {
+    stack: "sans-serif",
+    names: [
+      "arial",
+      "helvetica",
+      "verdana",
+      "tahoma",
+      "trebuchet ms",
+      "calibri",
+      "segoe ui",
+      "roboto",
+      "open sans",
+      "noto sans"
+    ]
+  },
+  {
+    stack: "serif",
+    names: [
+      "times new roman",
+      "georgia",
+      "garamond",
+      "cambria",
+      "book antiqua",
+      "palatino linotype"
+    ]
+  },
+  { stack: "monospace", names: ["courier new", "consolas"] }
+];
+var DEFAULT_FONT_FALLBACKS = {
+  groups: [...EAST_ASIAN_GROUPS, ...LATIN_GROUPS],
+  defaultStack: "Arial, Helvetica, sans-serif",
+  defaultFontName: "Arial"
+};
+function comparableName(name) {
+  return name.trim().replace(/^["']|["']$/g, "").toLowerCase();
+}
+var EAST_ASIAN_CHARACTER = /[\u1100-\u11ff\u3000-\u30ff\u3130-\u318f\u31f0-\u31ff\u3400-\u4dbf\u4e00-\u9fff\ua960-\ua97f\uac00-\ud7ff\uf900-\ufaff\uff00-\uffef\u{20000}-\u{2fa1f}]/u;
+var eastAsianNames = new Set(
+  EAST_ASIAN_GROUPS.flatMap((group) => group.names.map(comparableName))
+);
+function isEastAsianFontName(name) {
+  return EAST_ASIAN_CHARACTER.test(name) || eastAsianNames.has(comparableName(name));
+}
+var stacksByFallbacks = /* @__PURE__ */ new WeakMap();
+function stackByName(fallbacks) {
+  const built = stacksByFallbacks.get(fallbacks);
+  if (built) return built;
+  const stacks = /* @__PURE__ */ new Map();
+  for (const group of fallbacks.groups) {
+    for (const name of group.names)
+      stacks.set(comparableName(name), group.stack);
+  }
+  stacksByFallbacks.set(fallbacks, stacks);
+  return stacks;
+}
+function matchedStacks(cssNames, fallbacks) {
+  const stacks = stackByName(fallbacks);
+  const matched = [];
+  for (const name of cssNames.split(",")) {
+    const stack = stacks.get(comparableName(name));
+    if (stack !== void 0 && !matched.includes(stack)) matched.push(stack);
+  }
+  return matched;
+}
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji"
+]);
+function isGenericFamily(name) {
+  return GENERIC_FAMILIES.has(comparableName(name));
+}
+function distinctNames(names) {
+  const seen = /* @__PURE__ */ new Set();
+  return names.filter((name) => {
+    const comparable = comparableName(name);
+    if (seen.has(comparable)) return false;
+    seen.add(comparable);
+    return true;
+  });
+}
+function withFontFallback(cssNames, fallbacks = DEFAULT_FONT_FALLBACKS) {
+  const matched = matchedStacks(cssNames, fallbacks);
+  const appended = (matched.length > 0 ? matched : [fallbacks.defaultStack]).flatMap((stack) => stack.split(","));
+  return distinctNames([
+    ...cssNames.split(","),
+    ...appended.filter((name) => !isGenericFamily(name)),
+    ...appended.filter(isGenericFamily)
+  ]).join(",");
+}
+export {
+  DEFAULT_FONT_FALLBACKS,
+  isEastAsianFontName,
+  withFontFallback
+};

package/dist/styles/fonts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The Latin web-safe fonts.
+ * A screen serving documents in a particular language hands in its own list
+ * (`presets.fonts` on `DocxEditor`).
+ */
+export declare const DEFAULT_FONTS: readonly string[];

package/dist/styles/fonts.js

@@ -0,0 +1,11 @@
+// src/styles/fonts.ts
+var DEFAULT_FONTS = [
+  "Arial",
+  "Times New Roman",
+  "Georgia",
+  "Trebuchet MS",
+  "Courier New"
+];
+export {
+  DEFAULT_FONTS
+};

package/dist/styles/inlineStyle.d.ts

@@ -0,0 +1,67 @@
+import { type CellFormat, type DocumentDefaults, type HighlightName, type LineSpacing, type ParagraphFormat, type RowFormat, type RunFormat, type TableFormat, type TableWidth } from "../model/format";
+import { type FontFallbacks } from "./fontStack";
+/**
+ * The value used on screen only, when nowhere in the document declares a default
+ * font size.
+ * It matches the value Word uses, and it never makes its way back into the document.
+ */
+export declare const FALLBACK_FONT_SIZE_PT = 10;
+/**
+ * What Word calls "one line" is not the font size but the line height the font
+ * itself declares.
+ * On screen that height is approximated as this multiple of the font size.
+ * It is also the default for a document that declares no line spacing anywhere.
+ *
+ * Malgun Gothic, which dominates contracts, has a tall font-declared line box, so
+ * Word really does render more loosely.
+ * Drawing at 1.2 drew the complaint that it looked denser than the original, so it
+ * was raised to 1.3.
+ * The same value is also written as the `--docx-editor-line-height` default in
+ * `editor.css`.
+ */
+export declare const SINGLE_LINE_RATIO = 1.3;
+/**
+ * Word highlighter (`w:highlight`) names and the colors they stand for.
+ *
+ * We write background colors with `w:shd`, but older documents recorded them under
+ * these names.
+ * Converting the names to colors lets such a document be drawn as the original was
+ * and lets the toolbar palette compare against the current color.
+ */
+export declare const HIGHLIGHT_COLORS: Record<HighlightName, string>;
+/** Turns line spacing into a single CSS line-height value. With none given, one line height is the default */
+export declare function lineHeightValue(spacing: LineSpacing | null): string;
+export declare function runStyle(format: RunFormat | null, fontFallbacks?: FontFallbacks): string | undefined;
+/**
+ * The CSS a paragraph is drawn with: its own formatting, and the character formatting the style it
+ * wears lays down for the text inside it (`styleRun`).
+ *
+ * Text typed in the editor carries no run of its own, so inheriting from the paragraph is the only
+ * way it can be drawn in the style's character formatting. Text that does carry a run declares
+ * those same values on itself, and an element's own declaration beats an inherited one, so nothing
+ * a run wrote down is disturbed.
+ * Only the declarations that carry down are written. A fill paints a box instead of passing down,
+ * so on a paragraph it would cover the whole line, and the paragraph's own shading along with it.
+ * A style that fills behind its characters is therefore drawn from the run each piece of text
+ * carries, and not from here.
+ * The fonts stood in for the ones the style names are the built-in ones, because unlike a run
+ * (`editor/runMarkView`) a paragraph is drawn by the schema alone, which cannot see which editor it
+ * is drawing for.
+ */
+export declare function paragraphStyle(format: ParagraphFormat | null, styleRun?: RunFormat | null): string | undefined;
+export declare function columnWidthPx(dxa: number): number;
+/**
+ * The table itself draws no line at all: every line of a table, the ones around the outside included,
+ * is drawn by its cells. A border on the table element would win over a cell that says to draw
+ * nothing, because CSS resolves a collapsed border in favour of the solid line.
+ */
+export declare function tableStyle(format: TableFormat | null, width: TableWidth | null): string | undefined;
+/** CSS treats a row's height as a floor whichever rule the document wrote, so both are drawn alike */
+export declare function rowStyle(format: RowFormat | null): string | undefined;
+export declare function cellStyle(format: CellFormat | null): string | undefined;
+/**
+ * Turns the document defaults into CSS variables that apply across the whole paper.
+ * A font is always settled on, even when the document declares none, so that it is
+ * not drawn in a different font in every environment.
+ */
+export declare function documentDefaultsStyle(defaults: DocumentDefaults, fontFallbacks?: FontFallbacks): string;