Class HTMLProseMirrorElement

A custom HTML element responsible displaying a ProseMirror rich text editor.

Hierarchy (view full)

AbstractFormInputElement
- HTMLProseMirrorElement

Properties

`Protected` _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

`Protected` _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

`Protected` _value

_value: string

The underlying value of the element.

`Private` #active

#active: boolean = false

Is the editor in active edit mode?

`Private` #editor

#editor: ProseMirrorEditor

The ProseMirror editor instance.

`Private` #content

#content: HTMLDivElement

Current editor contents

`Private` #toggled

#toggled: boolean

Does this editor function via a toggle button? Or is it always active?

`Private` #enriched

#enriched: string

Enriched content which is optionally used if the editor is toggled.

`Private` #button

#button: HTMLButtonElement = null

An optional edit button which activates edit mode for the editor

`Static` tagName

tagName: string = "prose-mirror"

`Static` formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

form

get form(): HTMLFormElement
The form this element belongs to.

Returns HTMLFormElement
Inherited from AbstractFormInputElement.form

name

get name(): string
The input element name.

Returns string
Inherited from AbstractFormInputElement.name

value

get value(): FormInputValueType
The value of the input element.

Returns FormInputValueType
Inherited from AbstractFormInputElement.value

disabled

get disabled(): boolean
Is this element disabled?

Returns boolean
Inherited from AbstractFormInputElement.disabled

editable

get editable(): boolean
Is this field editable? The field can be neither disabled nor readonly.

Returns boolean
Inherited from AbstractFormInputElement.editable

Methods

disconnectedCallback

disconnectedCallback(): void
Actions to take when the custom element is removed from the document.

Returns void

_buildElements

_buildElements(): (HTMLButtonElement | HTMLDivElement)[]
Returns (HTMLButtonElement | HTMLDivElement)[]
Overrides AbstractFormInputElement._buildElements

_refresh

_refresh(): void
Returns void
Overrides AbstractFormInputElement._refresh

_activateListeners

_activateListeners(): void
Returns void
Overrides AbstractFormInputElement._activateListeners

_getValue

_getValue(): any
Returns any
Overrides AbstractFormInputElement._getValue

_toggleDisabled

_toggleDisabled(disabled): void
Parameters
- disabled: any
Returns void
Overrides AbstractFormInputElement._toggleDisabled

connectedCallback

connectedCallback(): void
Initialize the custom element, constructing its HTML.

Returns void
Inherited from AbstractFormInputElement.connectedCallback

_applyInputAttributes

_applyInputAttributes(input): void
Internal
Apply key attributes on the containing custom HTML element to input elements contained within it.
Parameters
- input: any
Returns void
Inherited from AbstractFormInputElement._applyInputAttributes

`Protected` _configurePlugins

_configurePlugins(): Record<string, Plugin>
Protected
Configure ProseMirror editor plugins.

Returns Record<string, Plugin>

`Protected` _setValue

_setValue(value): void
Protected
Translate user-provided input value into the format that should be stored.
Parameters
- value: string
  A new value to assign to the element
Returns void
Throws
An error if the provided value is invalid

Inherited from AbstractFormInputElement._setValue

`Protected` _onClick

_onClick(event): void
Protected
Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.
Parameters
- event: PointerEvent
Returns void
Inherited from AbstractFormInputElement._onClick

`Private` #activateEditor

#activateEditor(): Promise<void>
Activate the ProseMirror editor.

Returns Promise<void>

`Private` #onClickButton

#onClickButton(event): void
Handle clicking the editor activation button.
Parameters
- event: PointerEvent
  The triggering event.
Returns void

`Private` #save

#save(): void
Handle saving the editor content. Store new parsed HTML into the _value attribute of the element. If the editor is toggled, also deactivate editing mode.

Returns void

`Static` create

create(config): HTMLProseMirrorElement
Create a HTMLProseMirrorElement using provided configuration data.
Parameters
- config: any
Returns HTMLProseMirrorElement

Class HTMLProseMirrorElement

Hierarchy (view full)

Index

Properties

Accessors

Methods

Properties

Protected _internals

Protected _primaryInput

Protected _value

Private #active

Private #editor

Private #content

Private #toggled

Private #enriched

Private #button

Static tagName

Static formAssociated

Accessors

form

Returns HTMLFormElement

name

Returns string

value

Returns FormInputValueType

disabled

Returns boolean

editable

Returns boolean

Methods

disconnectedCallback

Returns void

_buildElements

Returns (HTMLButtonElement | HTMLDivElement)[]

_refresh

Returns void

_activateListeners

Returns void

_getValue

Returns any

_toggleDisabled

Parameters

Returns void

connectedCallback

Returns void

_applyInputAttributes

Parameters

Returns void

Protected _configurePlugins

Returns Record<string, Plugin>

Protected _setValue

Parameters

Returns void

Throws

Protected _onClick

Parameters

Returns void

Private #activateEditor

Returns Promise<void>

Private #onClickButton

Parameters

Returns void

Private #save

Returns void

Static create

Parameters

Returns HTMLProseMirrorElement

Settings

Member Visibility

Theme

On This Page

`Protected` _internals

`Protected` _primaryInput

`Protected` _value

`Private` #active

`Private` #editor

`Private` #content

`Private` #toggled

`Private` #enriched

`Private` #button

`Static` tagName

`Static` formAssociated

`Protected` _configurePlugins

`Protected` _setValue

`Protected` _onClick

`Private` #activateEditor

`Private` #onClickButton

`Private` #save

`Static` create