@portone/docx-editor 0.1.0

package/dist/styles/inlineStyle.js

@@ -0,0 +1,212 @@
+// src/styles/inlineStyle.ts
+import {
+  NO_FILL
+} from "../model/format.js";
+import { editorCssVariables } from "./classNames.js";
+import {
+  DEFAULT_FONT_FALLBACKS,
+  withFontFallback
+} from "./fontStack.js";
+var FALLBACK_FONT_SIZE_PT = 10;
+var SINGLE_LINE_RATIO = 1.3;
+var HIGHLIGHT_COLORS = {
+  black: "#000000",
+  blue: "#0000ff",
+  cyan: "#00ffff",
+  darkBlue: "#000080",
+  darkCyan: "#008080",
+  darkGray: "#808080",
+  darkGreen: "#008000",
+  darkMagenta: "#800080",
+  darkRed: "#800000",
+  darkYellow: "#808000",
+  green: "#00ff00",
+  lightGray: "#c0c0c0",
+  magenta: "#ff00ff",
+  red: "#ff0000",
+  white: "#ffffff",
+  yellow: "#ffff00"
+};
+var UNDERLINE_STYLES = {
+  double: "double",
+  dotted: "dotted",
+  dottedHeavy: "dotted",
+  dash: "dashed",
+  dashedHeavy: "dashed",
+  dashLong: "dashed",
+  wave: "wavy",
+  wavyHeavy: "wavy",
+  wavyDouble: "wavy"
+};
+function pt(value) {
+  return `${value}pt`;
+}
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function declarations(css) {
+  return css.length > 0 ? css.join(";") : void 0;
+}
+function fillColor(background) {
+  return background === NO_FILL ? "transparent" : background;
+}
+function lineHeightValue(spacing) {
+  if (!spacing) return `${SINGLE_LINE_RATIO}`;
+  if (spacing.rule === "auto") {
+    return `${round(spacing.lines * SINGLE_LINE_RATIO)}`;
+  }
+  if (spacing.rule === "exact") return pt(spacing.pt);
+  return `max(${pt(spacing.pt)},${SINGLE_LINE_RATIO}em)`;
+}
+function textDecoration(format) {
+  const lines = [];
+  if (format.underline) lines.push("underline");
+  if (format.strike) lines.push("line-through");
+  if (lines.length === 0) return [];
+  const css = [`text-decoration-line:${lines.join(" ")}`];
+  const style = format.underline ? UNDERLINE_STYLES[format.underline] : void 0;
+  if (style) css.push(`text-decoration-style:${style}`);
+  return css;
+}
+function inheritedRunCss(format, fontFallbacks) {
+  const css = [];
+  if (format.bold) css.push("font-weight:bold");
+  if (format.italic) css.push("font-style:italic");
+  if (format.smallCaps) css.push("font-variant:small-caps");
+  css.push(...textDecoration(format));
+  if (format.fontSizePt !== void 0)
+    css.push(`font-size:${pt(format.fontSizePt)}`);
+  if (format.fontFamily)
+    css.push(
+      `font-family:${withFontFallback(format.fontFamily, fontFallbacks)}`
+    );
+  if (format.color) css.push(`color:${format.color}`);
+  return css;
+}
+function ownRunCss(format) {
+  const css = [];
+  const highlight = format.highlight ? HIGHLIGHT_COLORS[format.highlight] : void 0;
+  if (highlight) css.push(`background-color:${highlight}`);
+  else if (format.background)
+    css.push(`background-color:${fillColor(format.background)}`);
+  if (format.verticalAlign === "superscript") css.push("vertical-align:super");
+  if (format.verticalAlign === "subscript") css.push("vertical-align:sub");
+  return css;
+}
+function runStyle(format, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
+  if (!format) return void 0;
+  return declarations([
+    ...inheritedRunCss(format, fontFallbacks),
+    ...ownRunCss(format)
+  ]);
+}
+function paragraphStyle(format, styleRun = null) {
+  const inherited = styleRun ? inheritedRunCss(styleRun, DEFAULT_FONT_FALLBACKS) : [];
+  if (!format) return declarations(inherited);
+  const css = [...inherited];
+  if (format.align) css.push(`text-align:${format.align}`);
+  if (format.direction) css.push(`direction:${format.direction}`);
+  if (format.indentLeftPt !== void 0)
+    css.push(`margin-left:${pt(format.indentLeftPt)}`);
+  if (format.indentRightPt !== void 0)
+    css.push(`margin-right:${pt(format.indentRightPt)}`);
+  if (format.indentStartPt !== void 0)
+    css.push(`margin-inline-start:${pt(format.indentStartPt)}`);
+  if (format.indentEndPt !== void 0)
+    css.push(`margin-inline-end:${pt(format.indentEndPt)}`);
+  if (format.textIndentPt !== void 0)
+    css.push(`text-indent:${pt(format.textIndentPt)}`);
+  if (format.spaceBeforePt !== void 0)
+    css.push(`margin-top:${pt(format.spaceBeforePt)}`);
+  if (format.spaceAfterPt !== void 0)
+    css.push(`margin-bottom:${pt(format.spaceAfterPt)}`);
+  if (format.lineSpacing)
+    css.push(`line-height:${lineHeightValue(format.lineSpacing)}`);
+  if (format.borderTop) css.push(`border-top:${format.borderTop}`);
+  if (format.borderBottom) css.push(`border-bottom:${format.borderBottom}`);
+  if (format.borderLeft) css.push(`border-left:${format.borderLeft}`);
+  if (format.borderRight) css.push(`border-right:${format.borderRight}`);
+  if (format.background)
+    css.push(`background-color:${fillColor(format.background)}`);
+  return declarations(css);
+}
+var DXA_PER_PX = 15;
+function columnWidthPx(dxa) {
+  return round(dxa / DXA_PER_PX);
+}
+function widthCss(width) {
+  if (width?.type === "dxa") return [`width:${columnWidthPx(width.twips)}px`];
+  if (width?.type === "pct") return [`width:${round(width.fiftieths / 50)}%`];
+  return [];
+}
+function borderDeclarations(format) {
+  const css = [];
+  if (format.borderTop) css.push(`border-top:${format.borderTop}`);
+  if (format.borderBottom) css.push(`border-bottom:${format.borderBottom}`);
+  if (format.borderLeft) css.push(`border-left:${format.borderLeft}`);
+  if (format.borderRight) css.push(`border-right:${format.borderRight}`);
+  return css;
+}
+var TABLE_ALIGN_MARGIN = {
+  center: "margin-left:auto;margin-right:auto",
+  right: "margin-left:auto;margin-right:0"
+};
+function tableStyle(format, width) {
+  const css = [...widthCss(width)];
+  if (format) {
+    if (format.background)
+      css.push(`background-color:${fillColor(format.background)}`);
+    const align = format.align ? TABLE_ALIGN_MARGIN[format.align] : void 0;
+    if (align && !format.indentLeftPt) css.push(align);
+    else if (format.indentLeftPt !== void 0)
+      css.push(`margin-left:${pt(format.indentLeftPt)}`);
+  }
+  return declarations(css);
+}
+function rowStyle(format) {
+  const height = format?.height;
+  return height ? `height:${pt(height.pt)}` : void 0;
+}
+var CELL_VERTICAL_ALIGN = {
+  top: "top",
+  center: "middle",
+  bottom: "bottom"
+};
+function cellStyle(format) {
+  if (!format) return void 0;
+  const css = [...borderDeclarations(format)];
+  if (format.background)
+    css.push(`background-color:${fillColor(format.background)}`);
+  const verticalAlign = format.verticalAlign ? CELL_VERTICAL_ALIGN[format.verticalAlign] : void 0;
+  if (verticalAlign) css.push(`vertical-align:${verticalAlign}`);
+  if (format.paddingTopPt !== void 0)
+    css.push(`padding-top:${pt(format.paddingTopPt)}`);
+  if (format.paddingRightPt !== void 0)
+    css.push(`padding-right:${pt(format.paddingRightPt)}`);
+  if (format.paddingBottomPt !== void 0)
+    css.push(`padding-bottom:${pt(format.paddingBottomPt)}`);
+  if (format.paddingLeftPt !== void 0)
+    css.push(`padding-left:${pt(format.paddingLeftPt)}`);
+  return declarations(css);
+}
+function documentDefaultsStyle(defaults, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
+  const fontFamily = defaults.fontFamily ? withFontFallback(defaults.fontFamily, fontFallbacks) : fontFallbacks.defaultStack;
+  return [
+    `${editorCssVariables.fontSize}:${pt(defaults.fontSizePt ?? FALLBACK_FONT_SIZE_PT)}`,
+    `${editorCssVariables.lineHeight}:${lineHeightValue(defaults.lineSpacing)}`,
+    `${editorCssVariables.fontFamily}:${fontFamily}`
+  ].join(";");
+}
+export {
+  FALLBACK_FONT_SIZE_PT,
+  HIGHLIGHT_COLORS,
+  SINGLE_LINE_RATIO,
+  cellStyle,
+  columnWidthPx,
+  documentDefaultsStyle,
+  lineHeightValue,
+  paragraphStyle,
+  rowStyle,
+  runStyle,
+  tableStyle
+};

package/dist/styles/lineSpacings.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The line spacings the built-in menu offers: the four presets Word and Google Docs offer.
+ * Each carries the value `setLineSpacing` takes, so a menu of your own runs the same command
+ * off the same list.
+ */
+import type { LineSpacing } from "../model/format";
+export interface LineSpacingOption {
+    label: string;
+    spacing: LineSpacing;
+}
+export declare const DEFAULT_LINE_SPACINGS: readonly LineSpacingOption[];

package/dist/styles/lineSpacings.js

@@ -0,0 +1,10 @@
+// src/styles/lineSpacings.ts
+var DEFAULT_LINE_SPACINGS = [
+  { label: "Single", spacing: { rule: "auto", lines: 1 } },
+  { label: "1.15", spacing: { rule: "auto", lines: 1.15 } },
+  { label: "1.5", spacing: { rule: "auto", lines: 1.5 } },
+  { label: "Double", spacing: { rule: "auto", lines: 2 } }
+];
+export {
+  DEFAULT_LINE_SPACINGS
+};