Support wordWrap option in umb-code-editor-modal to match umb-code-editor capabilities

[andrejd22]

There is currently no way to pass a wordWrap parameter to the umb-code-editor-modal, even though it internally uses the umb-code-editor component, which does support the wordWrap option.

The umb-code-editor-modal receives its data via the following interface:

export interface UmbCodeEditorModalData {
    headline: string;
    content: string;
    language: 'razor' | 'typescript' | 'javascript' | 'css' | 'markdown' | 'json' | 'html';
    color?: 'positive' | 'danger';
    confirmLabel?: string;
    formatOnLoad?: boolean;
}

Proposal:

We should add an optional wordWrap?: boolean property to this interface and apply it in the #renderCodeEditor() method of umb-code-editor-modal like so:

#renderCodeEditor() {
  return html`
    <umb-code-editor
      language=${ifDefined(this.data?.language)}
      .code=${this.data?.content ?? ''}
      .wordWrap=${this.data?.wordWrap ?? false} // Proposed addition
      @loaded=${this.onLoaded}
    ></umb-code-editor>
  `;
}

This change would allow better control over the editor’s behavior via the modal and aligns with the capabilities of the underlying umb-code-editor component.

Use case example:

When creating a custom TinyMCE plugin with a code preview feature, this update would make it possible to configure the modal like so:

const modal = modalManager.open(this, UMB_CODE_EDITOR_MODAL, {
  data: {
    headline: 'Edit source code',
    content: this.editor.getContent() ?? '',
    language: 'html',
    formatOnLoad: true, // Note: this is currently missing in the TinyMCE plugin implementation (only exists in Tiptap)
    wordWrap: true,     // Proposed addition
  },
});

This demonstrates a practical benefit of the change and highlights an existing inconsistency (formatOnLoad missing in the TinyMCE plugin) that could also be addressed.