@a3s-lab/office 0.2.2 → 0.4.0

package/dist/0~presentation-editor.js

@@ -11,11 +11,11 @@ import extension_underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 import starter_kit from "@tiptap/starter-kit";
 import { canUngroupPresentationElements, withPresentationDesign, groupPresentationElements, expandPresentationGroupSelection, ungroupPresentationElements, canGroupPresentationElements, presentationSlideView, applyPresentationLayout, presentationSelectionUnits, remapPresentationGroupPaths } from "./0~1403.js";
-import { createOfficeId as createWorkId } from "./1134.js";
+import { createOfficeId as createWorkId } from "./5184.js";
 import { OfficeTableInsertPopover, readOfficeFileAsDataUrl } from "./0~9445.js";
 import { normalizePresentationChartLegendPosition, presentationChartDataLabelPositions, presentationChartDataLabelText, normalizePresentationBubbleSizeRepresents, parsePresentationChartCategories, presentationChartXValues, withPresentationChartLayout, presentationChartTypeLabel, presentationChartAxes, withPresentationChartSeriesAnalysis, presentationChartUsesNumericXAxis, presentationChartSupportsSeriesMarkers, presentationChartBubbleSizes, createPresentationChartElement, parsePresentationChartValueDraft, normalizePresentationChartDataLabelPosition, presentationChartSupportsAxisTitles, withPresentationChartDataLabels, withPresentationChartType, createPresentationChartSeries, presentationChartErrorBarCount, normalizePresentationScatterStyle, withPresentationChartSeriesStyle, normalizePresentationBubbleScale, presentationChartDataLabelPositionLabel, presentationChartShowsLegend, presentationChartTrendlineCount, presentationChartHasDataLabels, normalizeDoughnutHoleSize, withPresentationChartAxes } from "./0~work-presentation-charts.js";
 import { spreadsheetChartSeriesLayout, workSpreadsheetChartSupportsGrouping, normalizeWorkSpreadsheetChartSmoothLines, workSpreadsheetChartAxisIsValueAxis, fitSpreadsheetTrendline, spreadsheetChartSeriesLegendColor, normalizeWorkSpreadsheetChartSeriesStyle, spreadsheetChartCategoryVisualIndex, errorBarSourceValues, normalizeWorkSpreadsheetErrorBars, workSpreadsheetChartSupportsTrendlines, normalizeWorkSpreadsheetChartLegendOverlay, normalizeWorkSpreadsheetChartGapWidth, spreadsheetChartCategoryLabelVisible, spreadsheetChartAxisLabelLayout, workSpreadsheetChartSupportsSmoothLines, workSpreadsheetChartGroupingIsStacked, normalizeWorkSpreadsheetChartGrouping, workSpreadsheetChartSupportsBarSpacing, workSpreadsheetChartSupportsErrorBars, spreadsheetChartSeriesLineStyle, workSpreadsheetChartAxisDefaultLabelPosition, workSpreadsheetChartSupportsSeriesAnalysis, workSpreadsheetChartAxisIsCategoryAxis, spreadsheetErrorBarAmounts, spreadsheetChartAxisValueRatio, spreadsheetChartAxisScale, normalizeWorkSpreadsheetChartOverlap, spreadsheetChartBarGeometry, workSpreadsheetChartAxisShowsMajorGridlinesByDefault, spreadsheetChartAxisGridlinesVisible, normalizeWorkSpreadsheetTrendline, roundChartNumber, formatSpreadsheetChartAxisNumber, spreadsheetChartSeriesFillStyle } from "./8715.js";
-import { useOfficeEditorWheelZoom, office_text_field_OfficeTextArea, stepOfficeZoom, button_Button, CommittedOfficeTextArea, CommittedOfficeTextField, office_text_field_OfficeTextField, useDialogFocusScope, icon_button_IconButton, office_text_field_OfficeFileInput } from "./0~9512.js";
+import { officePresenceColorStyle, office_text_field_OfficeTextArea, stepOfficeZoom, useOfficeEditorWheelZoom, useOfficeRemoteParticipants, button_Button, useOfficePublishPresenceLocation, CommittedOfficeTextArea, CommittedOfficeTextField, office_text_field_OfficeTextField, useDialogFocusScope, icon_button_IconButton, office_text_field_OfficeFileInput } from "./0~6090.js";
 import { useOfficeTaskPaneEscape, normalizeOfficeFontFamily, OfficeCheckbox, CommittedOfficeNumberField, useOfficeTaskPaneModal, officeFontFamilyLabel, useOfficeDialog, officeFontFamilies, CollectionState, createOfficeKernelClient, OfficeNumberField, handleOfficeTaskPaneKeyDown } from "./0~7048.js";
 import { WorkspaceContextMenu, isWorkspaceContextMenuKeyboardEvent, WorkOfficeZoomControls, WorkOfficeStatusBar, WorkOfficeRibbon, workspaceContextMenuPosition, OfficeSelect, WorkOfficeRibbonGroup, WorkOfficePreviewBar, WorkOfficeRibbonButton } from "./0~4595.js";
 import { presentationAgentProposalTargets, SpreadsheetChartSeriesStyleEditor, applyPresentationAgentProposalChanges, normalizeOptionalOfficeNumber, SpreadsheetErrorBarEditor, useOfficeHistory, presentationNotesProposalTarget, presentationAgentSelection, SpreadsheetTrendlineEditor, presentationAgentMenuItems } from "./0~3539.js";
@@ -25,6 +25,8 @@ import { slideTransitionDurationMilliseconds, createWorkSlideTransition, workSli
 import { normalizeDocumentHref, DOCUMENT_LINK_VALIDATION_MESSAGE } from "./0~work-document-links.js";
 import { showToast } from "./6489.js";
 import { scaledPresentationVisuals } from "./0~work-presentation-visual-scale.js";
+import { readOfficePresentationCollaboration as readWorkOfficePresentationCollaboration, createOfficePresentationCollaborationBinding as createWorkOfficePresentationCollaborationBinding } from "./4560.js";
+import { useOfficeEditorInitialFocus, useOfficeCollaborationLocationNavigator } from "./432.js";
 var presentation_editor_namespaceObject = {};
 __webpack_require__.r(presentation_editor_namespaceObject);
 __webpack_require__.d(presentation_editor_namespaceObject, {
@@ -2391,9 +2393,9 @@ function PlaceholderButtons({ onAdd }) {
     });
 }
 const PRESENTATION_WORKSPACE_FOCUS_RETRY_FRAMES = 6;
-function restorePresentationWorkspaceFocus(root, getState) {
+function restorePresentationWorkspaceFocus(root, getState, focusOrigin = document.activeElement) {
     if (!root) return;
-    const commandTrigger = document.activeElement;
+    const commandTrigger = focusOrigin;
     let lastRestoredTarget = null;
     let remainingFrames = PRESENTATION_WORKSPACE_FOCUS_RETRY_FRAMES;
     const restore = ()=>{
@@ -2401,8 +2403,7 @@ function restorePresentationWorkspaceFocus(root, getState) {
         remainingFrames -= 1;
         const state = getState();
         if ('normal' === state.viewMode && state.editingElementId) return;
-        const selectedElementId = state.selectedElementIds.at(-1);
-        const target = 'normal' === state.viewMode && selectedElementId ? Array.from(root.querySelectorAll('[data-slide-element-id]')).find((candidate)=>candidate.dataset.slideElementId === selectedElementId && 'true' === candidate.dataset.slideElementSelected) : Array.from(root.querySelectorAll('[data-slide-thumbnail]')).find((candidate)=>candidate.dataset.slideId === state.selectedSlideId && candidate.classList.contains('active'));
+        const target = presentationWorkspaceFocusTarget(root, state);
         if (!target) return void requestAnimationFrame(restore);
         const activeElement = document.activeElement;
         const canRestore = activeElement === commandTrigger || activeElement === target || activeElement === lastRestoredTarget || activeElement === document.body || activeElement === document.documentElement || !activeElement?.isConnected;
@@ -2415,6 +2416,11 @@ function restorePresentationWorkspaceFocus(root, getState) {
     };
     requestAnimationFrame(restore);
 }
+function presentationWorkspaceFocusTarget(root, state) {
+    if ('normal' === state.viewMode && state.editingElementId) return;
+    const selectedElementId = state.selectedElementIds.at(-1);
+    return 'normal' === state.viewMode && selectedElementId ? Array.from(root.querySelectorAll('[data-slide-element-id]')).find((candidate)=>candidate.dataset.slideElementId === selectedElementId && 'true' === candidate.dataset.slideElementSelected) : Array.from(root.querySelectorAll('[data-slide-thumbnail]')).find((candidate)=>candidate.dataset.slideId === state.selectedSlideId && candidate.classList.contains('active'));
+}
 function presentationCommandsWithObjectFocus(commands, restoreFocus) {
     const afterSuccessfulCommand = (command)=>(...args)=>{
             const result = command(...args);
@@ -5477,6 +5483,53 @@ function presentationFontFamilyOptions(current) {
 function normalizePresentationFontFamily(value) {
     return normalizeOfficeFontFamily(value);
 }
+function PresentationCollaborationPresenceLayer({ elements, slideId }) {
+    const participants = useOfficeRemoteParticipants().filter((participant)=>participant.location?.kind === 'presentation' && participant.location.slideId === slideId);
+    if (!participants.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-presentation-remote-presence-layer",
+        "aria-hidden": "true",
+        children: participants.flatMap((participant, participantIndex)=>{
+            const location = participant.location;
+            if (location?.kind !== 'presentation') return [];
+            const selected = location.elementIds.flatMap((elementId)=>{
+                const element = elements.find((candidate)=>candidate.id === elementId);
+                return element ? [
+                    element
+                ] : [];
+            });
+            if (!selected.length) return [
+                /*#__PURE__*/ jsx("span", {
+                    className: "work-presentation-remote-slide-marker",
+                    "data-activity": participant.activity,
+                    "data-participant-id": participant.actor.id,
+                    style: {
+                        ...officePresenceColorStyle(participant),
+                        top: 8 + 22 * participantIndex
+                    },
+                    children: participant.actor.name
+                }, `${participant.presenceId}:slide`)
+            ];
+            return selected.map((element, index)=>/*#__PURE__*/ jsx("span", {
+                    className: "work-presentation-remote-element",
+                    "data-activity": participant.activity,
+                    "data-participant-id": participant.actor.id,
+                    "data-remote-slide-element-id": element.id,
+                    style: {
+                        ...officePresenceColorStyle(participant),
+                        left: `${element.x}%`,
+                        top: `${element.y}%`,
+                        width: `${element.width}%`,
+                        height: `${element.height}%`,
+                        transform: element.rotation ? `rotate(${element.rotation}deg)` : void 0
+                    },
+                    children: 0 === index && /*#__PURE__*/ jsx("span", {
+                        children: participant.actor.name
+                    })
+                }, `${participant.presenceId}:${element.id}`));
+        })
+    });
+}
 function PresentationSlideThumbnail({ content, slide, index, selected, slideCount, aspectRatio, variant, renderPreview, onFocus, onSelect, onDelete, onNavigate, onContextMenu, onDoubleClick }) {
     return /*#__PURE__*/ jsxs("button", {
         type: "button",
@@ -6354,6 +6407,10 @@ function PresentationWorkspace({ activeBackground, activeCommentId, activeElemen
                                     ]
                                 }, element.id);
                             }),
+                            'slide' === designMode && /*#__PURE__*/ jsx(PresentationCollaborationPresenceLayer, {
+                                elements: activeElements,
+                                slideId: selectedSlide.id
+                            }),
                             'slide' === designMode && (selectedSlide.comments ?? []).map((comment, index)=>/*#__PURE__*/ jsx("button", {
                                     type: "button",
                                     className: `work-presentation-comment-pin ${comment.id === activeCommentId ? 'active' : ''}`,
@@ -7804,7 +7861,73 @@ function cancelPresentationFrame(frame) {
 function presentationFrameTimestamp() {
     return "u" < typeof performance ? Date.now() : performance.now();
 }
+const EMPTY_PRESENTATION_PRESENCE_ELEMENT_IDS = [];
 function PresentationEditor(props) {
+    if (props.collaboration) return /*#__PURE__*/ jsx(CollaborativePresentationEditor, {
+        ...props,
+        collaboration: props.collaboration
+    });
+    return /*#__PURE__*/ jsx(PresentationEditorSurface, {
+        ...props
+    });
+}
+function CollaborativePresentationEditor(props) {
+    const { collaboration } = props;
+    const collaborationRef = useRef(collaboration);
+    if (collaborationRef.current !== collaboration) throw new Error('PresentationEditor collaboration sessions cannot be replaced while mounted. Remount the editor for another shared presentation.');
+    const [sharedContent, setSharedContent] = useState(()=>readWorkOfficePresentationCollaboration(collaboration));
+    const contentRef = useRef(sharedContent);
+    const bindingRef = useRef(void 0);
+    const [, refreshHistory] = useState(0);
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    contentRef.current = sharedContent;
+    useEffect(()=>{
+        const binding = createWorkOfficePresentationCollaborationBinding(collaboration);
+        bindingRef.current = binding;
+        const unsubscribeContent = binding.subscribe(({ content })=>{
+            contentRef.current = content;
+            setSharedContent(content);
+            onChangeRef.current(content);
+        });
+        const unsubscribeError = binding.subscribeError((error)=>{
+            queueMicrotask(()=>{
+                throw error;
+            });
+        });
+        const unsubscribeHistory = binding.subscribeHistory(()=>refreshHistory((value)=>value + 1));
+        const current = binding.content();
+        contentRef.current = current;
+        setSharedContent(current);
+        return ()=>{
+            unsubscribeContent();
+            unsubscribeError();
+            unsubscribeHistory();
+            if (bindingRef.current === binding) bindingRef.current = void 0;
+            binding.destroy();
+        };
+    }, [
+        collaboration
+    ]);
+    const commit = useCallback((next)=>{
+        const previous = contentRef.current;
+        if (bindingRef.current?.replace(previous, next)) contentRef.current = next;
+    }, []);
+    const history = {
+        canRedo: bindingRef.current?.canRedo() ?? false,
+        canUndo: bindingRef.current?.canUndo() ?? false,
+        redo: ()=>bindingRef.current?.redo() ?? false,
+        undo: ()=>bindingRef.current?.undo() ?? false
+    };
+    return /*#__PURE__*/ jsx(PresentationEditorSurface, {
+        ...props,
+        content: sharedContent,
+        collaborationHistory: history,
+        onChange: commit,
+        preview: props.preview || 'edit' !== collaboration.mode
+    });
+}
+function PresentationEditorSurface(props) {
     const { content, fileActions, preview } = props;
     if (preview) return /*#__PURE__*/ jsxs("section", {
         className: "work-presentation-editor preview",
@@ -7828,7 +7951,7 @@ function PresentationEditor(props) {
         initialSlide: initialSlide
     });
 }
-function PresentationEditingSurface({ initialSlide, content, preview, saveStatus = '已自动保存', fileActions, kernelWasmUrl, onChange, onAgentRequest, onStartSlideshow }) {
+function PresentationEditingSurface({ initialSlide, autoFocus = true, collaborationHistory, content, preview, saveStatus = '已自动保存', fileActions, kernelWasmUrl, onChange, onAgentRequest, onStartSlideshow }) {
     const contentRef = useRef(content);
     const presentationCommandsRef = useRef(null);
     const [selectedSlideId, setSelectedSlideId] = useState(content.slides[0]?.id ?? '');
@@ -7867,6 +7990,45 @@ function PresentationEditingSurface({ initialSlide, content, preview, saveStatus
     const selectedMaster = designContent.masters?.find((master)=>master.id === selectedLayout?.masterId) ?? designContent.masters?.[0];
     const activeElements = 'layout' === designMode ? selectedLayout?.elements ?? [] : 'master' === designMode ? selectedMaster?.elements ?? [] : selectedSlide?.elements ?? [];
     const selection = usePresentationSelection(activeElements);
+    const presentationPresenceLocation = useMemo(()=>({
+            kind: 'presentation',
+            slideId: selectedSlide.id,
+            elementIds: 'slide' === designMode ? selection.selectedElementIds : EMPTY_PRESENTATION_PRESENCE_ELEMENT_IDS
+        }), [
+        designMode,
+        selectedSlide.id,
+        selection.selectedElementIds
+    ]);
+    useOfficePublishPresenceLocation(presentationPresenceLocation);
+    const navigateToPresentationParticipant = useCallback((participant)=>{
+        const location = participant.location;
+        if (location?.kind !== 'presentation') return false;
+        const slide = content.slides.find((candidate)=>candidate.id === location.slideId);
+        if (!slide) return false;
+        const elementIds = location.elementIds.filter((elementId)=>slide.elements.some((element)=>element.id === elementId));
+        setDesignMode('slide');
+        setViewMode('normal');
+        setSelectedSlideId(slide.id);
+        selection.replace(elementIds);
+        requestAnimationFrame(()=>{
+            const root = presentationRootRef.current;
+            if (!root) return;
+            const selectedElementId = elementIds.at(-1);
+            const target = selectedElementId ? Array.from(root.querySelectorAll('[data-slide-element-id]')).find((candidate)=>candidate.dataset.slideElementId === selectedElementId) : Array.from(root.querySelectorAll('[data-slide-thumbnail]')).find((candidate)=>candidate.dataset.slideId === slide.id);
+            target?.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+            });
+            target?.focus({
+                preventScroll: true
+            });
+        });
+        return true;
+    }, [
+        content.slides,
+        selection.replace
+    ]);
+    useOfficeCollaborationLocationNavigator(navigateToPresentationParticipant);
     const selectedElements = selectedPresentationElements(activeElements, selection.selectedElementIds);
     const selectionUnits = presentationSelectionUnits(activeElements, selection.selectedElementIds);
     const selectedElementId = selection.selectedElementIds.at(-1) ?? null;
@@ -7882,6 +8044,14 @@ function PresentationEditingSurface({ initialSlide, content, preview, saveStatus
         selectedSlideId: selectedSlide.id,
         viewMode
     };
+    useOfficeEditorInitialFocus({
+        enabled: autoFocus,
+        getTarget: ()=>{
+            const root = presentationRootRef.current;
+            return root ? presentationWorkspaceFocusTarget(root, workspaceFocusStateRef.current) ?? null : null;
+        },
+        isTargetReady: (target)=>target.tabIndex >= 0 && !target.hasAttribute('disabled') && 'true' !== target.getAttribute('aria-disabled')
+    });
     useEffect(()=>{
         setDismissedChartPaneElementId(null);
     }, [
@@ -7953,7 +8123,7 @@ function PresentationEditingSurface({ initialSlide, content, preview, saveStatus
         selectedSlideId,
         selection.clear
     ]);
-    const history = usePresentationHistory({
+    const controlledHistory = usePresentationHistory({
         content,
         onChange,
         selectedSlideId,
@@ -7962,6 +8132,7 @@ function PresentationEditingSurface({ initialSlide, content, preview, saveStatus
             selection.clear();
         }
     });
+    const history = collaborationHistory ?? controlledHistory;
     const presentationSlides = usePresentationSlideCommands({
         content,
         onChange,