wehub-resource-sync
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import type { TemplateFontOption } from "@/components/slide-editor/text/google-fonts";
|
|
import type { Marker } from "@/components/slide-editor/types";
|
|
import {
|
|
rawTextListRunsForEditor,
|
|
setRawTextListRunsContent,
|
|
} from "@/components/slide-editor/text/template-v2-text";
|
|
import type { TextSelectionRange } from "@/components/slide-editor/text/text-runs";
|
|
import type { BulletsSlideElement, TextSlideElement } from "@/components/slide-editor/state/state";
|
|
import { TextToolbar } from "@/components/slide-editor/text/TextToolbar";
|
|
import type { ComponentActionsMenuActions } from "@/components/slide-editor/selection/ComponentActionsMenu";
|
|
|
|
export function BulletsToolbar({
|
|
element,
|
|
index,
|
|
anchorBox,
|
|
scale,
|
|
componentActions,
|
|
selectionRange,
|
|
templateFonts,
|
|
onChange,
|
|
}: {
|
|
element: BulletsSlideElement;
|
|
index: number;
|
|
anchorBox?: {
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
} | null;
|
|
scale: number;
|
|
componentActions?: ComponentActionsMenuActions | null;
|
|
selectionRange?: TextSelectionRange | null;
|
|
templateFonts?: TemplateFontOption[];
|
|
onChange: (index: number, element: BulletsSlideElement) => void;
|
|
}) {
|
|
const marker = readMarker(element.marker);
|
|
const textElement: TextSlideElement = {
|
|
...element,
|
|
type: "text",
|
|
runs: rawTextListRunsForEditor(element),
|
|
};
|
|
|
|
const updateMarker = (nextMarker: Marker) => {
|
|
onChange(index, {
|
|
...element,
|
|
marker: nextMarker,
|
|
});
|
|
};
|
|
|
|
const updateTextElement = (
|
|
_index: number,
|
|
nextTextElement: TextSlideElement,
|
|
) => {
|
|
const nextListElement = setRawTextListRunsContent(
|
|
{
|
|
...element,
|
|
font: nextTextElement.font,
|
|
},
|
|
nextTextElement.runs,
|
|
) as BulletsSlideElement;
|
|
onChange(index, nextListElement);
|
|
};
|
|
|
|
return (
|
|
<TextToolbar
|
|
element={textElement}
|
|
index={index}
|
|
anchorBox={anchorBox}
|
|
scale={scale}
|
|
componentActions={componentActions}
|
|
listMarker={marker}
|
|
selectionRange={selectionRange}
|
|
templateFonts={templateFonts}
|
|
onChange={updateTextElement}
|
|
onListMarkerChange={updateMarker}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function readMarker(value: unknown): Marker {
|
|
return value === "number" || value === "none" ? value : "bullet";
|
|
}
|