Class TJSProseMirror

Provides a reactive wrapper for Foundry ProseMirror editor support. Allows editing Foundry document data or directly from content prop. Automatic HTML enrichment occurs for the content when saved.

Props

There are no required props, but the following are available to set:

• content - Provides an initial content string; you can bind to content from a parent component to get reactive updates when content changes. Two-way binding.

• enrichedContent - Provides the enriched content via TextEditor.enrichHTML when content changes. You can bind to enrichedContent from a parent component to get reactive updates though it is not recommended to change enrichedContent externally. One-way binding.

• options - Defines the options object for this component and passed on to the Foundry TinyMCE support. Please review all the options defined below TJSProseMirrorOptions.

Notable options passed onto Foundry ProseMirror support:

• options.collaborate - [boolean: false] When a document and fieldName is provided set this to true to enable collaborative editing.

• options.plugins - [object] An additional set of ProseMirror plugins to load.

Events

There are five events fired when the editor is canceled, saved, and started:

• editor:cancel - Fired when editing is canceled by a user action or reactive response to document changes.

• editor:document:deleted - Fired when the edited document is deleted. Access the document from event.detail.document.

• editor:enrichedContent - Fired when content is enriched. Access enriched content from event.detail.enrichedContent.

• editor:save - Fired when editing is saved. Access the content from event.detail.content.

• editor:start - Fired when editing is started.

CSS Variables

The following CSS variables control the associated styles with the default values:

`.editor` HTMLDivElement:
---------------------------------
--tjs-editor-background - none
--tjs-editor-border - none
--tjs-editor-border-radius - 0
--tjs-editor-height - 100%
--tjs-editor-margin - 0
--tjs-editor-overflow - auto
--tjs-editor-transition
--tjs-editor-width - 100%

`.editor` HTMLDivElement; properties available when activated:
---------------------------------
--tjs-editor-active-box-shadow, unset; Foundry default: 0 0 5px var(--color-shadow-primary)
--tjs-editor-active-outline - unset
--tjs-editor-active-overflow - unset; When inactive the editor overflow is auto; when active overflow is unset.

`.editor` HTMLDivElement; properties available when inactive, but manually focused:
---------------------------------
--tjs-editor-inactive-box-shadow-focus-visible - fallback: --tjs-default-box-shadow-focus-visible
--tjs-editor-inactive-outline-focus-visible - fallback: --tjs-default-outline-focus-visible; default: revert
--tjs-editor-inactive-transition-focus-visible - fallback: --tjs-default-transition-focus-visible

`.editor` HTMLDivElement; properties available when inactive, but hovered:
---------------------------------
--tjs-editor-inactive-cursor-hover - text
--tjs-editor-inactive-box-shadow-hover - unset
--tjs-editor-inactive-outline-hover - unset
--tjs-editor-inactive-user-select-hover - text

`.editor-content` HTMLDivElement; when editing - the content overflow is set to auto:
---------------------------------
--tjs-editor-content-overflow - auto
--tjs-editor-content-padding - 0 0 0 0.25em

`.editor-container` HTMLDivElement; when editing - removes default margins.
---------------------------------
--tjs-editor-container-margin - 0

.editor-edit; Defines the position of the edit button from top / right absolute positioning:
---------------------------------
--tjs-editor-edit-button-right - 5px
--tjs-editor-edit-button-top - 0

.editor-menu; Defines the toolbar / menu.
---------------------------------
--tjs-editor-toolbar-background - rgba(0, 0, 0, 0.1)
--tjs-editor-toolbar-border-radius - 6px
--tjs-editor-toolbar-box-shadow - 0 2px 2px -2px rgb(34 47 62 / 10%), 0 8px 8px -4px rgb(34 47 62 / 7%)
--tjs-editor-toolbar-padding - 2px 0
--tjs-editor-toolbar-width - 100%
Copy