@docx-editor.dev/pro/vue
Vue review rail — preset layout with [useReview](useReview) data wiring.
Compound part overrides (List, Card, Accept, …) match the React export names and mount when passed as slots; the preset arrangement is the default when no slot overrides are supplied. Full asChild merge semantics follow the React ladder and are typed on each part export for hosts that replace individual pieces.
Functions (14)
activatedCustomNodeOffunctionSource ↗
Resolves the host-facing custom-node activation payload.
declare function activatedCustomNodeOf(resolved: ResolvedCustomNodeActivation, editor: Editor | null | undefined): ActivatedCustomNode | null;collaborationModulefunctionSource ↗
Build the collaboration module. Construction never validates the key and never touches the network.
declare function collaborationModule(options: CollaborationModuleOptions): EditorModule;resolveCustomNodeActivationfunctionSource ↗
Resolves a painted pointer target to a registered custom-node definition.
declare function resolveCustomNodeActivation(target: EventTarget | null, nodes: readonly AnyCustomNodeDefinition[]): ResolvedCustomNodeActivation | null;reviewModulefunctionSource ↗
Build the review module. Construction never validates the key and never touches the network.
declare function reviewModule(options?: ReviewModuleOptions): EditorModule;useCollaborationParticipantsfunctionSource ↗
Subscribe to the participant roster of the collaboration session.
Omit session and it reads the one the editor above holds. The ref keeps its array reference until the roster actually changes, so unrelated awareness traffic does not retrigger watchers. No session yields a stable empty array.
declare function useCollaborationParticipants(session?: MaybeRefOrGetter$1<CollaborationSession | null>): UseCollaborationParticipantsReturn;useCollaborationSessionfunctionSource ↗
The live collaboration session of the editor above this component, or null.
The editor already holds the session a collaborationModule contributed, so presence chrome reads it from here instead of being handed it: every part and composable in this package takes session as an OPTIONAL prop and falls back to this. A host with one Root and one room never passes it at all.
Pass it explicitly when a component sits outside the Root that owns the room, or when one page renders two.
declare function useCollaborationSession(): UseCollaborationSessionReturn;useCollaborationStatusfunctionSource ↗
Reactive status for the collaboration session, with live and diverged derived.
Omit session and it reads the one the editor above holds. Pass it explicitly for a session this Root does not own.
declare function useCollaborationStatus(session?: MaybeRefOrGetter$1<CollaborationSession | null>): UseCollaborationStatusReturn;useCustomNodeDefinitionsfunctionSource ↗
Returns custom-node definitions from a prop or the mounted editor.
declare function useCustomNodeDefinitions(nodes?: MaybeRefOrGetter$1<readonly AnyCustomNodeDefinition[] | undefined>): ComputedRef<readonly AnyCustomNodeDefinition[]>;useDocumentCollaborationfunctionSource ↗
Own a provider-agnostic collaboration session for a Vue host.
The consumer creates the ydoc, the awareness, and whatever provider replicates them (WebSocket, WebRTC, offline persistence); this composable owns only the document session over them, with the same remount-safe lifecycle as useWebrtcCollaboration. It imports no network provider.
declare function useDocumentCollaboration(options?: MaybeRefOrGetter$1<UseDocumentCollaborationOptions | null>): UseDocumentCollaborationReturn;useReviewfunctionSource ↗
declare function useReview(query?: MaybeRefOrGetter<ReviewItemQuery | undefined>): UseReviewReturn;useReviewAuthorfunctionSource ↗
Returns the resolved color, slot, and declared style for one review author.
The result updates when the author or revision style declarations change.
declare function useReviewAuthor(author: MaybeRefOrGetter$1<string | undefined>): ComputedRef<ReviewAuthorInfo | undefined>;useReviewItemfunctionSource ↗
declare function useReviewItem(): ComputedRef<ReviewItemView | null>;useReviewOffunctionSource ↗
declare function useReviewOf(editorRef: Ref<Editor | null>, query?: MaybeRefOrGetter<ReviewItemQuery | undefined>): UseReviewReturn;useStackedReviewPositionsfunctionSource ↗
declare function useStackedReviewPositions(items: MaybeRefOrGetter<readonly {
readonly key: string;
readonly anchorY: number | null;
}[]>, heights: MaybeRefOrGetter<ReadonlyMap<string, number>>, options?: MaybeRefOrGetter<{
readonly gap?: number;
readonly scale?: number;
readonly defaultHeight?: number;
}>): ComputedRef<ReadonlyMap<string, number>>;Interfaces (33)
CollaborationAvatarPropsinterfaceSource ↗
Props for [DocxEditorCollaboration](DocxEditorCollaboration).Avatar.
interface CollaborationAvatarProps| Member | Type | Summary |
|---|---|---|
| children? | VNode | VNode[] | Default slot: replaces the initials inside the disc; the accent background stays. |
| className? | string | |
| participant | CollaborationParticipant |
CollaborationAvatarRenderPropsinterfaceSource ↗
Render props for [DocxEditorCollaboration](DocxEditorCollaboration).Avatars' per-participant override.
interface CollaborationAvatarRenderProps| Member | Type | Summary |
|---|---|---|
| avatarUrl? | string | The image declared for this participant with `DocxEditorAuthorStyle`, or `undefined`. |
| color | string | The resolved accent — published colour, or the review roster's colour for the name. |
| initials | string | The first letter of up to two name words, uppercased. |
| participant | CollaborationParticipant |
CollaborationAvatarsPropsinterfaceSource ↗
Props for [DocxEditorCollaboration](DocxEditorCollaboration).Avatars.
interface CollaborationAvatarsProps| Member | Type | Summary |
|---|---|---|
| children? | (props: CollaborationAvatarRenderProps) => VNode | VNode[] | Scoped slot: `#default="{ participant, color, initials, avatarUrl }"` replaces the disc. |
| className? | string | |
| max? | number | Avatars shown before the rest collapse into one "+N" chip. Omit to show everyone. |
| session? | CollaborationSession | null | The session whose participants the stack shows. Omit it and the part uses the one the editor above holds; `null` renders nothing. |
CollaborationCaretLabelRenderPropsinterfaceSource ↗
What a custom remote-caret label renders with.
The renderer mounts inside the adapter's provider tree, so every composable works in it — useDocxEditor, useEditorState, the review composables. It has the opened document, not only the collaborator.
interface CollaborationCaretLabelRenderProps| Member | Type | Summary |
|---|---|---|
| avatarUrl? | string | The image declared for this collaborator with `DocxEditorAuthorStyle`, or `undefined`. |
| color | string | The resolved accent: the published colour when the engine can paint it, otherwise the review roster's colour for the name — the same resolution the painted label uses. |
| participant | CollaborationParticipant | null | The session roster entry for the selection's actor, or null while presence catches up. |
| selection | CollaborationRemoteSelection | The remote selection this label marks, resolved into this replica's addresses. |
CollaborationCaretLabelsPropsinterfaceSource ↗
Props for [DocxEditorCollaboration](DocxEditorCollaboration).CaretLabels.
The rendered content lands in the engine's label layer, which is furniture: the layer is aria-hidden and takes no pointer events. Assistive technology does not read a label, and nothing inside one is clickable or focusable. Keep interactive or announced presence UI in your own chrome, such as the avatar stack.
interface CollaborationCaretLabelsProps| Member | Type | Summary |
|---|---|---|
| children? | (props: CollaborationCaretLabelRenderProps) => VNode | VNode[] | Scoped slot: `#default="{ selection, participant, color }"`. Without it the label shows the collaborator's name, matching the engine default. |
| session? | CollaborationSession | null | The session whose collaborators label the carets. Omit it and the part uses the one the editor above holds; `null` renders nothing. |
CollaborationFailureinterface
One collaboration failure: a typed code plus optional free-form detail.
interface CollaborationFailure| Member | Type | Summary |
|---|---|---|
| code | CollaborationFailureCode | |
| detail? | string |
CollaborationIdentityinterface
Human or automation identity attached to authored collaboration transactions.
interface CollaborationIdentity| Member | Type | Summary |
|---|---|---|
| actorId | string | |
| color? | string | |
| name | string | |
| role? | 'human' | 'agent' |
CollaborationIdentityUpdateinterfaceSource ↗
Display-identity fields a live session can update.
actorId and role are attribution and stay immutable for the session lifetime, so this type cannot name them.
interface CollaborationIdentityUpdate| Member | Type | Summary |
|---|---|---|
| color? | string | |
| name? | string |
CollaborationModuleOptionsinterfaceSource ↗
How [collaborationModule](collaborationModule) is configured. The session is required; the licence key is optional and never validated.
interface CollaborationModuleOptions extends ProLicenseOptions| Member | Type | Summary |
|---|---|---|
| session | EditorCollaborationSession |
CollaborationParticipantinterface
One validated identity visible through ephemeral collaboration presence.
interface CollaborationParticipant extends CollaborationIdentity| Member | Type | Summary |
|---|---|---|
| isLocal | boolean |
CollaborationRemoteSelectioninterface
Stable remote selection resolved into this replica's canonical paragraph addresses.
Anchor and head may name different paragraphs. A collapsed caret is the same address twice.
interface CollaborationRemoteSelection| Member | Type | Summary |
|---|---|---|
| actorId | string | |
| anchor | CollaborationRemoteSelectionAddress | |
| color? | string | |
| head | CollaborationRemoteSelectionAddress | |
| kind? | CollaborationSelectionKind | |
| name | string |
CollaborationRemoteSelectionAddressinterface
One endpoint of a remote selection resolved into this replica's canonical addresses.
paragraphId is the stable w14:paraId. nodeId is replica-local and is used to paint.
interface CollaborationRemoteSelectionAddress| Member | Type | Summary |
|---|---|---|
| nodeId | string | |
| offset | number | |
| paragraphId | string |
CollaborationRootSourceinterfaceSource ↗
What this component needs from a room, which every collaboration composable already returns.
Structural on purpose: useHocuspocusCollaboration, useWebrtcCollaboration and useDocumentCollaboration all satisfy it, and so does a host that owns its own resources.
interface CollaborationRootSource| Member | Type | Summary |
|---|---|---|
| document | Uint8Array | null | |
| modules | readonly EditorModule[] | |
| session | CollaborationSession | null |
CollaborationSessioninterfaceSource ↗
Host-facing collaboration session.
A host reads identity, status, presence, and undo. The editor attaches [EditorCollaborationSession](EditorCollaborationSession) internally and never through this type.
interface CollaborationSession| Member | Type | Summary |
|---|---|---|
| canRedo | | |
| canUndo | | |
| documentId | string | |
| identity | CollaborationIdentity | |
| participants | | |
| redo | | |
| remoteSelections | | |
| sessionId | string | Unique identity for this attachment lifetime. |
| setIdentity | | Update the display name and color mid-session, when the replica supports it. |
| status | | |
| statusSnapshot | | Cached status, current reason, and last failure. |
| subscribeParticipants | | |
| subscribeRemoteSelections | | |
| subscribeStatus | | |
| undo | |
CollaborationStatusSnapshotinterface
Cached status read. Same reference until status, reason, or last failure change.
interface CollaborationStatusSnapshot| Member | Type | Summary |
|---|---|---|
| lastFailure | CollaborationFailure | undefined | |
| reason | CollaborationFailure | undefined | |
| status | CollaborationStatus |
CreateDocumentCollaborationOptionsinterfaceSource ↗
Options for one full-document collaboration replica.
The caller owns ydoc.
interface CreateDocumentCollaborationOptions| Member | Type | Summary |
|---|---|---|
| awareness | Awareness | |
| bootstrap | CollaborationBootstrap | |
| documentId | string | |
| identity | CollaborationIdentity | |
| offlineEditing? | boolean | Admit local edits while the transport is `disconnected`. |
| sessionId? | string | Unique attachment identity. Omit it to generate a new identity for this session. |
| ydoc | Y.Doc |
CustomNodeChromePropsinterfaceSource ↗
Props for custom-node chip colors and pointer activation.
interface CustomNodeChromeProps| Member | Type | Summary |
|---|---|---|
| nodes? | readonly CustomNodeDefinition[] | Definitions to style. Defaults to definitions registered on the editor. |
| onNodeClick? | (node: ActivatedCustomNode) => void | Receives primary-button activation after the definition's own hook. |
| onNodeHover? | (node: ActivatedCustomNode) => void | Receives pointer-entry activation after the definition's own hook. |
CustomNodeContextMenuPropsinterfaceSource ↗
Props for the custom-node context-menu section.
interface CustomNodeContextMenuProps| Member | Type | Summary |
|---|---|---|
| nodes? | readonly CustomNodeDefinition[] | Definitions to offer. Defaults to definitions registered on the editor. |
| onEditNode? | (node: ActivatedCustomNode, definition: CustomNodeDefinition) => void | Runs after the definition's own edit hook. |
| onRemoveRefused? | (node: ActivatedCustomNode, reason: string) => void | Receives the engine reason when removal is refused. |
| remove? | boolean | Adds the remove row. Defaults to `true`. |
DocxEditorCollaborationRootPropsinterfaceSource ↗
Props for [DocxEditorCollaborationRoot](DocxEditorCollaborationRoot).
Everything DocxEditorRoot takes except the three this component owns, which arrive as fallthrough attributes.
interface DocxEditorCollaborationRootProps| Member | Type | Summary |
|---|---|---|
| collaboration | CollaborationRootSource | The room, straight from a collaboration composable. |
| fallback? | VNode | VNode[] | Rendered before the room has a document — while connecting, or after a failure. |
ProLicenseOptionsinterfaceSource ↗
Accepted by every pro entry point.
interface ProLicenseOptions| Member | Type | Summary |
|---|---|---|
| licenseKey? | string | Your license key from docx-editor.dev. Optional in v1: unlicensed use in development and evaluation is permitted, production use requires a license (see LICENSE.md) — the package trusts you either way. |
ResolvedCustomNodeActivationinterfaceSource ↗
A custom-node definition and decoded node under a pointer target.
interface ResolvedCustomNodeActivation| Member | Type | Summary |
|---|---|---|
| controlId | string | null | |
| definition | AnyCustomNodeDefinition | |
| node | ActivatedCustomNode |
ReviewActionPropsinterfaceSource ↗
interface ReviewActionProps extends ReviewPartProps| Member | Type | Summary |
|---|---|---|
| icon? | VNode | string |
ReviewActivationOptionsinterface
How activating a review item places it in the viewport.
interface ReviewActivationOptions| Member | Type | Summary |
|---|---|---|
| reveal? | 'start' | 'center' | 'centerIfNeeded' | 'nearest' | false | Where the item lands, or `false` to open it without scrolling at all. |
ReviewMarkersPropsinterfaceSource ↗
interface ReviewMarkersProps extends ReviewPartProps| Member | Type | Summary |
|---|---|---|
| icon? | VNode | ((item: ReviewItemView) => VNode | null | undefined) | |
| offset? | number | |
| scale? | number | |
| window? | {
top: number;
bottom: number;
} | null |
ReviewModuleOptionsinterfaceSource ↗
How [reviewModule](reviewModule) is configured. Carries only the licence key today, so reviewModule() with no argument is the ordinary call.
interface ReviewModuleOptions extends ProLicenseOptionsReviewPartPropsinterfaceSource ↗
interface ReviewPartProps| Member | Type | Summary |
|---|---|---|
| asChild? | boolean | |
| children? | VNode | VNode[] | |
| className? | string |
ReviewPropsinterfaceSource ↗
interface ReviewProps extends Omit<ReviewPartProps, 'children' | 'hidden'>| Member | Type | Summary |
|---|---|---|
| card? | {
className?: string;
} | |
| children? | VNode | VNode[] | Scoped slot for custom card render: `#default="{ item }"`. |
| filter? | (item: ReviewItemView) => boolean | |
| formatting? | boolean | |
| furniture? | VNode | VNode[] | |
| gap? | number | |
| preset? | boolean | |
| stack? | boolean | |
| structural? | boolean | |
| t? | (key: string, params?: Record<string, string | number>) => string |
UseCollaborationParticipantsReturninterfaceSource ↗
Reactive participant roster for Vue hosts.
interface UseCollaborationParticipantsReturn| Member | Type | Summary |
|---|---|---|
| participants | Readonly<Ref<readonly CollaborationParticipant[]>> |
UseCollaborationSessionReturninterfaceSource ↗
Values [useCollaborationSession](useCollaborationSession) returns.
interface UseCollaborationSessionReturn| Member | Type | Summary |
|---|---|---|
| session | ComputedRef<CollaborationSession | null> | The live collaboration session of the editor above, or null. |
UseCollaborationStatusReturninterfaceSource ↗
Reactive collaboration status for Vue hosts.
interface UseCollaborationStatusReturn| Member | Type | Summary |
|---|---|---|
| attached | Readonly<Ref<boolean>> | An editor has attached its document port to this replica. |
| diverged | ComputedRef<boolean> | This replica no longer agrees with the room, and waiting will not fix it. |
| lastFailure | Readonly<Ref<CollaborationFailure | undefined>> | |
| live | ComputedRef<boolean> | Edits made now reach the room. |
| reason | Readonly<Ref<CollaborationFailure | undefined>> | |
| status | Readonly<Ref<CollaborationStatus | 'inactive'>> |
UseDocumentCollaborationOptionsinterfaceSource ↗
Input for [useDocumentCollaboration](useDocumentCollaboration).
interface UseDocumentCollaborationOptions| Member | Type | Summary |
|---|---|---|
| modules? | readonly EditorModule[] | Host modules. The composable adds `collaborationModule` when a room is ready. A host collaboration contribution is a configuration error and throws. |
| room? | UseDocumentCollaborationConnectOptions | null | Connect this room when the composable starts. Omit it and call [UseDocumentCollaborationReturn.connect](UseDocumentCollaborationReturn.connect) after the host has a `ydoc` and a room. |
UseDocumentCollaborationReturninterfaceSource ↗
Values [useDocumentCollaboration](useDocumentCollaboration) returns.
interface UseDocumentCollaborationReturn| Member | Type | Summary |
|---|---|---|
| connect | (options: UseDocumentCollaborationConnectOptions) => Promise<CollaborationFailure | null> | Connect a room. RESOLVES with the failure, or null on success — it does not reject. |
| document | Readonly<Ref<Uint8Array | null>> | |
| error | Readonly<Ref<CollaborationFailure | null>> | |
| leave | (nextDocument: Uint8Array) => void | Destroy the session and carry on editing locally. |
| modules | Readonly<Ref<readonly EditorModule[]>> | |
| pending | Readonly<Ref<boolean>> | |
| session | Readonly<Ref<CollaborationSession | null>> |
UseReviewReturninterfaceSource ↗
interface UseReviewReturn| Member | Type | Summary |
|---|---|---|
| accept | (item: ReviewItemView) => boolean | |
| activeKey | ComputedRef<string | null> | |
| comment | (text: string, author?: string) => boolean | |
| commentResolutionDisabledReason | ComputedRef<string | null> | |
| items | ComputedRef<readonly ReviewItemView[]> | |
| paneOpen | ComputedRef<boolean> | |
| ready | ComputedRef<boolean> | |
| reject | (item: ReviewItemView) => boolean | |
| remove | (item: ReviewItemView) => boolean | |
| reopen | (item: ReviewItemView) => boolean | |
| reply | (item: ReviewItemView, text: string, author?: string) => boolean | |
| resolve | (item: ReviewItemView) => boolean | |
| selectionAnchorY | ComputedRef<number | null> | |
| setActive | (key: string | null, options?: ReviewActivationOptions) => boolean | |
| setPaneOpen | (open: boolean) => void |
Type aliases (8)
CollaborationBootstraptypeSource ↗
Create or join bootstrap for one collaboration replica.
Text, document, and WebRTC factories share this union.
create-or-join removes the out-of-band decision about which peer creates a room. The replica probes for an initialized room and joins it when one appears. Otherwise it runs a short awareness election and only the winning candidate seeds from document. A room that two peers seeded concurrently reports the terminal failure code concurrent-seed on every replica. The document and WebRTC factories accept this kind; the experimental text factory refuses it.
type CollaborationBootstrap = {
readonly kind: 'create';
readonly document: Uint8Array;
} | {
readonly kind: 'join';
readonly timeoutMs?: number;
readonly signal?: AbortSignal;
} | {
readonly kind: 'create-or-join';
readonly document: Uint8Array;
readonly probeTimeoutMs?: number;
readonly electionWindowMs?: number;
readonly timeoutMs?: number;
readonly signal?: AbortSignal;
};CollaborationFailureCodetype
Why a replica refused work, left ready, or failed a schema check.
Free-form extras (a transport phrase, a blob key, a store refusal) travel in [CollaborationFailure.detail](CollaborationFailure.detail), not here. invalid-shared-metadata follows that rule: it names one malformed field of the room's shared metadata, and which field is the detail. Distinct from invalid-document-id, which rejects a document id this host passed in. concurrent-seed reports two merged seed transactions in one room; the room cannot be repaired client-side — create a new room from saved bytes.
Two of these name a transport condition a host has to tell apart, because the answers are opposite. transport-disconnected recovers on its own, so wait. authentication-failed never does: the credential the provider re-sent was rejected, so refresh it and rejoin. transport remains the catch-all for a provider that reported neither.
type CollaborationFailureCode = 'already-initialized' | 'authentication-failed' | 'baseline-digest-mismatch' | 'baseline-too-large' | 'blob-digest-mismatch' | 'blob-read' | 'blob-store-full' | 'blob-too-large' | 'collaboration-session-destroyed' | 'collaboration-session-not-attached' | 'collaboration-session-not-ready' | 'collaboration-text-limit' | 'concurrent-seed' | 'document-id-mismatch' | 'duplicate-paragraph-id' | 'experimental-collaboration-body-text-only' | 'experimental-collaboration-existing-paragraphs-only' | 'experimental-collaboration-text-only' | 'experimental-collaboration-untracked-text-only' | 'immutable-baseline-changed' | 'immutable-metadata-changed' | 'initialization-aborted' | 'initialization-timeout' | 'invalid-baseline' | 'invalid-blob-descriptor' | 'invalid-bound' | 'invalid-document-id' | 'invalid-identity' | 'invalid-identity-color' | 'invalid-logical-id' | 'invalid-relationships' | 'invalid-session-id' | 'invalid-shared-metadata' | 'invalid-string' | 'local-mirror-failed' | 'materialize-dropped-content' | 'missing-blob' | 'missing-local-blob' | 'missing-root' | 'no-main-document-part' | 'not-initialized' | 'paragraph-set-mismatch' | 'port-already-attached' | 'protocol-version-mismatch' | 'prototype-key' | 'remote-apply-failed' | 'schema-version-mismatch' | 'shared-schema-invalid' | 'text-too-long' | 'too-many-attributes' | 'too-many-children' | 'too-many-nodes' | 'too-many-parts' | 'too-many-relationships' | 'transport' | 'transport-disconnected' | 'tree-too-deep' | 'unknown-logical-id' | 'unknown-paragraph-id' | 'unsafe-part-name' | 'unsupported-root-key';CollaborationSelectionKindtype
How a published selection covers the document.
Absent or omitted means a character range. cells means the table rectangle whose corner cells contain the two endpoints. The payload still carries only those endpoints, so a large table selection does not grow with the number of selected cells.
type CollaborationSelectionKind = 'cells';CollaborationStatustype
Lifecycle state of one collaboration replica.
One axis, because the only question a host has to answer is whether to tell the reader to wait or to reload:
- initializing — joining. Edits are refused. Recovers on its own. - ready — replicating. The only state that accepts edits. - disconnected — the transport dropped. The replica is intact and recovers on its own, so wait rather than reload. Edits are refused until reconnect by default; a session created with offline editing enabled keeps accepting them, and the buffered updates merge on reconnect. - error — this replica no longer agrees with the room. It does not recover: only a reload rejoins. [CollaborationStatusSnapshot.reason](CollaborationStatusSnapshot.reason) says why. - destroyed — torn down. Terminal.
type CollaborationStatus = 'initializing' | 'ready' | 'disconnected' | 'error' | 'destroyed';DocxEditorCollaborationNamespacetypeSource ↗
type DocxEditorCollaborationNamespace = typeof DocxEditorCollaboration;DocxEditorReviewNamespacetypeSource ↗
type DocxEditorReviewNamespace = typeof DocxEditorReview;ReviewItemViewtypeSource ↗
type ReviewItemView = ReviewItemPlacement;UseDocumentCollaborationConnectOptionstypeSource ↗
Arguments for [UseDocumentCollaborationReturn.connect](UseDocumentCollaborationReturn.connect): the createDocumentCollaboration options. The consumer owns ydoc, awareness, and whatever provider replicates them.
type UseDocumentCollaborationConnectOptions = CreateDocumentCollaborationOptions;Variables (5)
CustomNodeChromeconstSource ↗
Applies custom-node chip colors and dispatches click and hover activation.
Mount this component once inside DocxEditorRoot. It renders no element.
CustomNodeChrome: {
new (): {
$props: CustomNodeChromeProps;
};
}CustomNodeContextMenuconstSource ↗
Adds custom-node information, edit, and remove rows to the context menu.
Place this component inside DocxEditorContextMenu.
CustomNodeContextMenu: {
readonly docxRowPlacement: "start";
new (): {
$props: CustomNodeContextMenuProps;
};
}DocxEditorCollaborationconstSource ↗
Presence chrome over a live collaboration session.
Compose the parts inside DocxEditorRoot with the collaboration module registered:
DocxEditorCollaboration: {
CaretLabels: vue.DefineComponent<vue.ExtractPropTypes<{
session: {
type: PropType<CollaborationSession | null>;
default: undefined;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
session: {
type: PropType<CollaborationSession | null>;
default: undefined;
};
}>> & Readonly<{}>, {
session: CollaborationSession | null;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Avatars: vue.DefineComponent<vue.ExtractPropTypes<{
session: {
type: PropType<CollaborationSession | null>;
default: undefined;
};
max: {
type: NumberConstructor;
default: undefined;
};
className: {
type: StringConstructor;
default: undefined;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
session: {
type: PropType<CollaborationSession | null>;
default: undefined;
};
max: {
type: NumberConstructor;
default: undefined;
};
className: {
type: StringConstructor;
default: undefined;
};
}>> & Readonly<{}>, {
session: CollaborationSession | null;
className: string;
max: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
participant: {
type: PropType<CollaborationParticipant>;
required: true;
};
className: {
type: StringConstructor;
default: undefined;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
participant: {
type: PropType<CollaborationParticipant>;
required: true;
};
className: {
type: StringConstructor;
default: undefined;
};
}>> & Readonly<{}>, {
className: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}```html
<DocxEditorCollaboration.Avatars :session="session" :max="4" />
<DocxEditorCollaboration.CaretLabels :session="session" v-slot="{ selection, color }">
<MyLabel :name="selection.name" :color="color" />
</DocxEditorCollaboration.CaretLabels>
```DocxEditorCollaborationRootconstSource ↗
A DocxEditorRoot wired to a collaboration room.
html
<DocxEditorCollaborationRoot :collaboration="collaboration">
<DocxEditorToolbar />
<DocxEditorViewport>
<DocxEditorContent />
<DocxEditorCollaboration.CaretLabels />
</DocxEditorViewport>
<template #fallback><p>Connecting…</p></template>
</DocxEditorCollaborationRoot>
The presence parts take no session: they read it from the editor this mounts.
DocxEditorCollaborationRoot: vue.DefineComponent<vue.ExtractPropTypes<{
collaboration: {
type: PropType<CollaborationRootSource>;
required: true;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
collaboration: {
type: PropType<CollaborationRootSource>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>DocxEditorReviewconstSource ↗
DocxEditorReview: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
t: {
type: PropType<(key: string, params?: Record<string, string | number>) => string>;
default: undefined;
};
card: {
type: PropType<{
className?: string;
}>;
default: undefined;
};
furniture: {
type: PropType<VNode | VNode[]>;
default: undefined;
};
preset: {
type: BooleanConstructor;
default: boolean;
};
stack: {
type: BooleanConstructor;
default: boolean;
};
gap: {
type: NumberConstructor;
default: number;
};
filter: {
type: PropType<(item: ReviewItemView) => boolean>;
default: undefined;
};
structural: {
type: BooleanConstructor;
default: boolean;
};
formatting: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
filter: (item: ReviewItemView) => boolean;
hidden: boolean;
t: (key: string, params?: Record<string, string | number>) => string;
structural: boolean;
formatting: boolean;
furniture: VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
asChild: boolean;
gap: number;
preset: boolean;
card: {
className?: string;
};
stack: boolean;
}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
t: {
type: PropType<(key: string, params?: Record<string, string | number>) => string>;
default: undefined;
};
card: {
type: PropType<{
className?: string;
}>;
default: undefined;
};
furniture: {
type: PropType<VNode | VNode[]>;
default: undefined;
};
preset: {
type: BooleanConstructor;
default: boolean;
};
stack: {
type: BooleanConstructor;
default: boolean;
};
gap: {
type: NumberConstructor;
default: number;
};
filter: {
type: PropType<(item: ReviewItemView) => boolean>;
default: undefined;
};
structural: {
type: BooleanConstructor;
default: boolean;
};
formatting: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, {
filter: (item: ReviewItemView) => boolean;
hidden: boolean;
t: (key: string, params?: Record<string, string | number>) => string;
structural: boolean;
formatting: boolean;
furniture: VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
asChild: boolean;
gap: number;
preset: boolean;
card: {
className?: string;
};
stack: boolean;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
t: {
type: PropType<(key: string, params?: Record<string, string | number>) => string>;
default: undefined;
};
card: {
type: PropType<{
className?: string;
}>;
default: undefined;
};
furniture: {
type: PropType<VNode | VNode[]>;
default: undefined;
};
preset: {
type: BooleanConstructor;
default: boolean;
};
stack: {
type: BooleanConstructor;
default: boolean;
};
gap: {
type: NumberConstructor;
default: number;
};
filter: {
type: PropType<(item: ReviewItemView) => boolean>;
default: undefined;
};
structural: {
type: BooleanConstructor;
default: boolean;
};
formatting: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
filter: (item: ReviewItemView) => boolean;
hidden: boolean;
t: (key: string, params?: Record<string, string | number>) => string;
structural: boolean;
formatting: boolean;
furniture: VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
asChild: boolean;
gap: number;
preset: boolean;
card: {
className?: string;
};
stack: boolean;
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
List: vue.DefineComponent<vue.ExtractPropTypes<{
stack: {
type: BooleanConstructor;
default: boolean;
};
positions: {
type: PropType<ReadonlyMap<string, number>>;
default: undefined;
};
collapsed: {
type: PropType<ReadonlySet<string>>;
default: undefined;
};
scale: {
type: NumberConstructor;
default: number;
};
offset: {
type: NumberConstructor;
default: number;
};
window: {
type: PropType<{
top: number;
bottom: number;
} | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
stack: {
type: BooleanConstructor;
default: boolean;
};
positions: {
type: PropType<ReadonlyMap<string, number>>;
default: undefined;
};
collapsed: {
type: PropType<ReadonlySet<string>>;
default: undefined;
};
scale: {
type: NumberConstructor;
default: number;
};
offset: {
type: NumberConstructor;
default: number;
};
window: {
type: PropType<{
top: number;
bottom: number;
} | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
window: {
top: number;
bottom: number;
} | null;
offset: number;
scale: number;
collapsed: ReadonlySet<string>;
stack: boolean;
positions: ReadonlyMap<string, number>;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Empty: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Card: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Author: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Time: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Summary: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
asChild: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Accept: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
icon: string | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Reject: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
icon: string | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Resolve: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
icon: string | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Reopen: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
icon: string | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Delete: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
asChild: BooleanConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | string>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
icon: string | VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>;
asChild: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Replies: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Reply: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Markers: vue.DefineComponent<vue.ExtractPropTypes<{
scale: {
type: NumberConstructor;
default: number;
};
offset: {
type: NumberConstructor;
default: number;
};
window: {
type: PropType<{
top: number;
bottom: number;
} | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | ((item: ReviewItemView) => VNode | null | undefined)>;
default: undefined;
};
}>, () => vue_jsx_runtime.JSX.Element | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
scale: {
type: NumberConstructor;
default: number;
};
offset: {
type: NumberConstructor;
default: number;
};
window: {
type: PropType<{
top: number;
bottom: number;
} | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
icon: {
type: PropType<VNode | ((item: ReviewItemView) => VNode | null | undefined)>;
default: undefined;
};
}>> & Readonly<{}>, {
hidden: boolean;
window: {
top: number;
bottom: number;
} | null;
offset: number;
scale: number;
icon: VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | ((item: ReviewItemView) => VNode | null | undefined);
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
AddComment: vue.DefineComponent<vue.ExtractPropTypes<{
top: {
type: PropType<number | null>;
default: null;
};
drafting: {
type: BooleanConstructor;
default: boolean;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
top: {
type: PropType<number | null>;
default: null;
};
drafting: {
type: BooleanConstructor;
default: boolean;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
top: number | null;
hidden: boolean;
drafting: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Draft: vue.DefineComponent<vue.ExtractPropTypes<{
top: {
type: NumberConstructor;
default: number;
};
left: {
type: PropType<number | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
top: {
type: NumberConstructor;
default: number;
};
left: {
type: PropType<number | null>;
default: null;
};
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
left: number | null;
top: number;
hidden: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
Balloon: vue.DefineComponent<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
className: StringConstructor;
hidden: BooleanConstructor;
}>> & Readonly<{}>, {
hidden: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}