Class TJSContentEdit

Provides a reactive wrapper for direct content editable elements. 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. Please review all the options defined below TJSContentEditOptions.

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` HTMLDivElement; when editing - the content overflow is set to auto:
---------------------------------
--tjs-editor-content-color - #000
--tjs-editor-content-font-family - "Signika"
--tjs-editor-content-font-size - 10.5pt
--tjs-editor-content-line-height - 1.2
--tjs-editor-content-overflow - auto
--tjs-editor-content-padding - 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
Copy