Class TJSCodeMirror

Provides a reactive wrapper for Foundry CodeMirror editor support. Allows editing Foundry document data or directly from content prop.

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. content is updated after editing finishes.

• options - Defines the options object for this component some of which are passed onto the Foundry CodeMirror support. Please review all the options defined below TJSCodeMirrorOptions.

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: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:

`.tjs-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%

`.tjs-editor` HTMLDivElement; properties available when activated:
---------------------------------
--tjs-editor-active-box-shadow, unset
--tjs-editor-active-outline - unset
--tjs-editor-active-overflow - 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-box-shadow-hover - unset
--tjs-editor-inactive-outline-hover - unset

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