Skip to content

Advanced

SuperEditor Component

The core editor component that powers DOCX editing in SuperDoc. For advanced use cases, you can use SuperEditor directly.

Initialization

javascript
import '@harbour-enterprises/superdoc/super-editor/style.css';
import { SuperEditor } from '@harbour-enterprises/superdoc/super-editor';

const editor = new SuperEditor({
  selector: '#editor-container',
  fileSource: docxFile,
  state: initialState,
  documentId: 'doc-123',
  options: {
    user: {
      name: 'Editor User',
      email: 'editor@example.com',
    },
    // Additional options...
  },
});

Configuration Options

PropertyTypeDescriptionRequiredDefault
selectorstring|ElementWhere to render the editor-
fileSourceFile|Blob|stringDocument file or URL-
stateobjectInitial document statenull
documentIdstringUnique document ID-
optionsobjectEditor options-

Editor Options

PropertyTypeDescriptionDefault
userobjectCurrent user information{}
colorsobjectTheme color configurationDefault colors
rolestringUser role: 'editor', 'suggester', 'viewer''editor'
documentModestring'editing', 'viewing', or 'suggesting''viewing'
paginationbooleanEnable paginationtrue
rulersarrayDocument ruler configuration[]
ydocY.DocYjs document for collaborationnull
collaborationProviderobjectCollaboration provider instancenull
isNewFilebooleanWhether this is a new documentfalse
handleImageUploadfunctionCustom image upload handlernull
telemetryobjectTelemetry configurationnull

Methods

MethodParametersReturnDescription
destroy()--Destroys the editor instance
getHTML()-stringGets document content as HTML
getJSON()-objectGets document content as JSON
getPageStyles()-objectGets page style information
focus()--Focuses the editor
blur()--Removes focus from the editor
exportDocx()-Promise<Blob>Exports as DOCX

Hooks

SuperEditor has a variety of hooks

HookParametersDescription
onBeforeCreate-Called before the creation process starts.
onCreate-Called when the document is created.
onUpdate-Called when the document is updated.
onSelectionUpdate-Called when the document selection is updated.
onTransaction-Called during document transactions.
onFocus-Called when the document gains focus.
onBlur-Called when the document loses focus.
onDestroy-Called when the document is destroyed.
onContentError{ error }Called when there's a content error.
onTrackedChangesUpdate-Called when tracked changes are updated.
onCommentsUpdate-Called when comments are updated.
onCommentsLoaded-Called when comments have finished loading.
onCommentClicked-Called when a comment is clicked.
onCommentLocationsUpdate-Called when the locations of comments are updated.
onDocumentLocked-Called when the document lock state changes.
onFirstRender-Called on the first render of the document.
onCollaborationReady-Called when collaboration features are ready.
onPaginationUpdate-Called when pagination is updated.
onException-Called when an exception occurs.

Example: Basic Editor Commands

You can get a list of currently available commands from editor.commands

© 2025 Harbour Enterprises, Inc. 💙💛