Preserve QPowerPoint strikethrough in PPTX

2026-06-02 07:46:39 +03:00
parent c4532902c8
commit b117e11431
6 changed files with 65 additions and 11 deletions
@@ -60,7 +60,9 @@ describe("QPowerPoint", () => {
    const view = render(<QPowerPoint deck={deckWithLinkedImage()} onChange={onChange} />);

    const boldTitleButton = view.container.querySelector('button[aria-label="Полужирный заголовок"]');
+    const strikeTitleButton = view.container.querySelector('button[aria-label="Зачеркнутый заголовок"]');
    expect(boldTitleButton).toBeTruthy();
+    expect(strikeTitleButton).toBeTruthy();
    fireEvent.click(boldTitleButton as Element);

    const nextDeck = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as SlideDeck;
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import type { CSSProperties } from "react";
-import { Bold, Copy, Download, EyeOff, FileText, FileUp, Image as ImageIcon, Italic, Link, List, ListOrdered, ListX, Palette, Plus, Save, Trash2, Underline } from "lucide-react";
+import { Bold, Copy, Download, EyeOff, FileText, FileUp, Image as ImageIcon, Italic, Link, List, ListOrdered, ListX, Palette, Plus, Save, Strikethrough, Trash2, Underline } from "lucide-react";
 import type { Slide, SlideDeck, SlideImage, SlideListStyle, SlideTransition } from "../../types";
 import { downloadBlobFile, downloadTextFile } from "../../utils/download";
 import { exportPptxBlob, importPptxFile } from "../../io/powerPointOffice";
@@ -14,7 +14,15 @@ interface QPowerPointProps {
  onChange: (deck: SlideDeck) => void;
 }

-type SlideTextFormatField = "titleBold" | "titleItalics" | "titleUnderline" | "subtitleBold" | "subtitleItalics" | "subtitleUnderline";
+type SlideTextFormatField =
+  | "titleBold"
+  | "titleItalics"
+  | "titleUnderline"
+  | "titleStrike"
+  | "subtitleBold"
+  | "subtitleItalics"
+  | "subtitleUnderline"
+  | "subtitleStrike";

 const themeLabels: Record<Slide["theme"], string> = {
  classic: "Классическая",
@@ -108,19 +116,20 @@ function slideTextStyle(
  color?: string,
  fontSize?: number,
  fontFamily?: string,
-  textFormat: { bold?: boolean; italics?: boolean; underline?: boolean; defaultBold?: boolean } = {}
+  textFormat: { bold?: boolean; italics?: boolean; underline?: boolean; strike?: boolean; defaultBold?: boolean } = {}
 ): CSSProperties | undefined {
  const textColor = normalizedHexColor(color);
  const normalizedFontSize = normalizeFontSize(fontSize);
  const normalizedFamily = normalizedFontFamily(fontFamily);
  const effectiveBold = textFormat.bold ?? textFormat.defaultBold;
+  const textDecoration = [textFormat.underline ? "underline" : "", textFormat.strike ? "line-through" : ""].filter(Boolean).join(" ");
  const style: CSSProperties = {
    ...(textColor ? { color: `#${textColor}` } : {}),
    ...(normalizedFontSize ? { fontSize: `${normalizedFontSize}pt` } : {}),
    ...(normalizedFamily ? { fontFamily: normalizedFamily } : {}),
    ...(effectiveBold !== undefined ? { fontWeight: effectiveBold ? 780 : 400 } : {}),
    ...(textFormat.italics ? { fontStyle: "italic" } : {}),
-    ...(textFormat.underline ? { textDecoration: "underline" } : {})
+    ...(textDecoration ? { textDecoration } : {})
  };

  return Object.keys(style).length > 0 ? style : undefined;
@@ -541,6 +550,15 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
              >
                <Underline size={16} />
              </button>
+              <button
+                className={`icon-button format-toggle ${activeSlide.titleStrike ? "is-active" : ""}`.trim()}
+                type="button"
+                onClick={() => toggleSlideTextFormat("titleStrike")}
+                title="Зачеркнутый заголовок"
+                aria-label="Зачеркнутый заголовок"
+              >
+                <Strikethrough size={16} />
+              </button>
            </div>
            <label className="office-field office-field-wide">
              <span>
@@ -626,6 +644,15 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
              >
                <Underline size={16} />
              </button>
+              <button
+                className={`icon-button format-toggle ${activeSlide.subtitleStrike ? "is-active" : ""}`.trim()}
+                type="button"
+                onClick={() => toggleSlideTextFormat("subtitleStrike")}
+                title="Зачеркнутый подзаголовок"
+                aria-label="Зачеркнутый подзаголовок"
+              >
+                <Strikethrough size={16} />
+              </button>
            </div>
            <label className="office-field office-field-wide">
              <span>
@@ -785,6 +812,7 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
              bold: activeSlide.titleBold,
              italics: activeSlide.titleItalics,
              underline: activeSlide.titleUnderline,
+              strike: activeSlide.titleStrike,
              defaultBold: true
            })}
            onChange={(event) => updateSlide({ ...activeSlide, title: event.target.value })}
@@ -796,7 +824,8 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
            style={slideTextStyle(activeSlide.subtitleColor, activeSlide.subtitleFontSize, activeSlide.subtitleFontFamily, {
              bold: activeSlide.subtitleBold,
              italics: activeSlide.subtitleItalics,
-              underline: activeSlide.subtitleUnderline
+              underline: activeSlide.subtitleUnderline,
+              strike: activeSlide.subtitleStrike
            })}
            onChange={(event) => updateSlide({ ...activeSlide, subtitle: event.target.value })}
          />
@@ -614,9 +614,11 @@ describe("powerPointOffice helpers", () => {
      titleBold: true,
      titleItalics: true,
      titleUnderline: true,
+      titleStrike: true,
      subtitleBold: true,
      subtitleItalics: true,
-      subtitleUnderline: true
+      subtitleUnderline: true,
+      subtitleStrike: true
    });

    const exportedBlob = await exportPptxBlob({
@@ -631,9 +633,11 @@ describe("powerPointOffice helpers", () => {
          titleBold: false,
          titleItalics: true,
          titleUnderline: true,
+          titleStrike: true,
          subtitleBold: true,
          subtitleItalics: true,
-          subtitleUnderline: true
+          subtitleUnderline: true,
+          subtitleStrike: true
        }
      ]
    });
@@ -642,6 +646,7 @@ describe("powerPointOffice helpers", () => {

    expect(exportedSlideXml).toContain('i="1"');
    expect(exportedSlideXml).toContain('u="sng"');
+    expect(exportedSlideXml).toContain('strike="sngStrike"');
    expect(exportedSlideXml).toContain('b="1"');

    const reimported = await importPptxFile(new File([exportedBlob], "Начертание.pptx", { type: exportedBlob.type }));
@@ -649,9 +654,11 @@ describe("powerPointOffice helpers", () => {
      titleBold: false,
      titleItalics: true,
      titleUnderline: true,
+      titleStrike: true,
      subtitleBold: true,
      subtitleItalics: true,
-      subtitleUnderline: true
+      subtitleUnderline: true,
+      subtitleStrike: true
    });
  });

@@ -743,7 +750,7 @@ function slideXmlWithTextStyles(title: string, subtitle: string) {
 }

 function slideXmlWithTextRunStyles(title: string, subtitle: string) {
-  return `<p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"><p:cSld><p:spTree><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng"/><a:t>${title}</a:t></a:r></a:p></p:txBody></p:sp><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng"/><a:t>${subtitle}</a:t></a:r></a:p></p:txBody></p:sp></p:spTree></p:cSld></p:sld>`;
+  return `<p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"><p:cSld><p:spTree><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng" strike="sngStrike"/><a:t>${title}</a:t></a:r></a:p></p:txBody></p:sp><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng" strike="sngStrike"/><a:t>${subtitle}</a:t></a:r></a:p></p:txBody></p:sp></p:spTree></p:cSld></p:sld>`;
 }

 function slideXmlWithTextHyperlinks(title: string, subtitle: string) {
@@ -18,6 +18,7 @@ interface SlideTextBlock {
  bold?: boolean;
  italics?: boolean;
  underline?: boolean;
+  strike?: boolean;
  color?: string;
  fontSize?: number;
  fontFamily?: string;
@@ -105,12 +106,14 @@ export async function importPptxFile(file: File): Promise<ImportedPowerPointDeck
        titleBold: slideTextBlocks[0]?.bold ?? false,
        ...(slideTextBlocks[0]?.italics ? { titleItalics: true } : {}),
        ...(slideTextBlocks[0]?.underline ? { titleUnderline: true } : {}),
+        ...(slideTextBlocks[0]?.strike ? { titleStrike: true } : {}),
        ...(slideTextBlocks[0]?.color ? { titleColor: slideTextBlocks[0].color } : {}),
        ...(slideTextBlocks[0]?.fontSize ? { titleFontSize: slideTextBlocks[0].fontSize } : {}),
        ...(slideTextBlocks[0]?.fontFamily ? { titleFontFamily: slideTextBlocks[0].fontFamily } : {}),
        ...(slideTextBlocks[1]?.bold ? { subtitleBold: true } : {}),
        ...(slideTextBlocks[1]?.italics ? { subtitleItalics: true } : {}),
        ...(slideTextBlocks[1]?.underline ? { subtitleUnderline: true } : {}),
+        ...(slideTextBlocks[1]?.strike ? { subtitleStrike: true } : {}),
        ...(slideTextBlocks[1]?.color ? { subtitleColor: slideTextBlocks[1].color } : {}),
        ...(slideTextBlocks[1]?.fontSize ? { subtitleFontSize: slideTextBlocks[1].fontSize } : {}),
        ...(slideTextBlocks[1]?.fontFamily ? { subtitleFontFamily: slideTextBlocks[1].fontFamily } : {}),
@@ -159,9 +162,11 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
    const titleBold = sourceSlide.titleBold ?? true;
    const titleItalics = Boolean(sourceSlide.titleItalics);
    const titleUnderline = Boolean(sourceSlide.titleUnderline);
+    const titleStrike = Boolean(sourceSlide.titleStrike);
    const subtitleBold = Boolean(sourceSlide.subtitleBold);
    const subtitleItalics = Boolean(sourceSlide.subtitleItalics);
    const subtitleUnderline = Boolean(sourceSlide.subtitleUnderline);
+    const subtitleStrike = Boolean(sourceSlide.subtitleStrike);
    const titleHyperlink = normalizedExternalHyperlinkTarget(sourceSlide.titleHyperlink);
    const subtitleHyperlink = normalizedExternalHyperlinkTarget(sourceSlide.subtitleHyperlink);
    const slide = pptx.addSlide();
@@ -193,6 +198,7 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
      bold: titleBold,
      italic: titleItalics,
      ...(titleUnderline ? { underline: { style: "sng" } } : {}),
+      ...(titleStrike ? { strike: "sngStrike" } : {}),
      color: titleColor,
      margin: 0.04,
      breakLine: false,
@@ -208,6 +214,7 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
      bold: subtitleBold,
      italic: subtitleItalics,
      ...(subtitleUnderline ? { underline: { style: "sng" } } : {}),
+      ...(subtitleStrike ? { strike: "sngStrike" } : {}),
      color: subtitleColor,
      valign: "top",
      fit: "shrink",
@@ -248,6 +255,7 @@ function extractSlideTextBlocks(slideXml: unknown, hyperlinkTargets: Record<stri
      const bold = runTextBold(runProperties);
      const italics = runTextItalics(runProperties);
      const underline = runTextUnderline(runProperties);
+      const strike = runTextStrike(runProperties);
      const color = runTextColor(runProperties);
      const fontSize = runTextFontSize(runProperties);
      const fontFamily = runTextFontFamily(runProperties);
@@ -258,6 +266,7 @@ function extractSlideTextBlocks(slideXml: unknown, hyperlinkTargets: Record<stri
        bold,
        italics,
        underline,
+        strike,
        ...(color ? { color } : {}),
        ...(fontSize ? { fontSize } : {}),
        ...(fontFamily ? { fontFamily } : {})
@@ -706,6 +715,11 @@ function runTextUnderline(runProperties: Record<string, unknown>) {
  return Boolean(value && value !== "none");
 }

+function runTextStrike(runProperties: Record<string, unknown>) {
+  const value = stringValue(runProperties.strike ?? runProperties["@_strike"]).trim().toLowerCase();
+  return Boolean(value && value !== "nostrike");
+}
+
 function runTextFontSize(runProperties: Record<string, unknown>) {
  const rawSize = numberAttribute(runProperties, "sz");
  return rawSize ? normalizeFontSize(rawSize / 100) : undefined;
@@ -99,12 +99,14 @@ export interface Slide {
  titleBold?: boolean;
  titleItalics?: boolean;
  titleUnderline?: boolean;
+  titleStrike?: boolean;
  titleColor?: string;
  titleFontSize?: number;
  titleFontFamily?: string;
  subtitleBold?: boolean;
  subtitleItalics?: boolean;
  subtitleUnderline?: boolean;
+  subtitleStrike?: boolean;
  subtitleColor?: string;
  subtitleFontSize?: number;
  subtitleFontFamily?: string;