feat: add parseOptions

projects/demo/src/app/app.pages.ts

@@ -17,6 +17,12 @@ export const DEMO_PAGES: TuiDocRoutePages = [
         route: `${TuiDemoPath.StarterKit}/Options`,
         keywords: 'TUI_EDITOR_OPTIONS, TUI_ATTACH_FILES_LOADER',
     },
+    {
+        section: 'Documentation',
+        title: 'Parse options',
+        route: TuiDemoPath.ParseOptions,
+        keywords: 'editor, parse, options, preserveWhitespace',
+    },
     {
         section: 'Documentation',
         title: 'Font',

projects/demo/src/app/app.routes.ts

@@ -9,6 +9,11 @@ export const routes: Routes = [
         loadComponent: async () => import('./pages/starter'),
         title: 'StarterKit',
     }),
+    route({
+        path: TuiDemoPath.ParseOptions,
+        loadComponent: async () => import('./pages/parse-options'),
+        title: 'ParseOptions',
+    }),
     route({
         path: TuiDemoPath.Font,
         loadComponent: async () => import('./pages/font'),

projects/demo/src/app/pages/parse-options/examples/1/index.html

@@ -0,0 +1,11 @@
+<tui-editor
+    class="heading"
+    [formControl]="control"
+    [tools]="builtInTools"
+/>
+
+<h4>HTML:</h4>
+<tui-editor-socket [content]="control.value || ''" />
+
+<h4>Text:</h4>
+<p>{{ control.value }}</p>

projects/demo/src/app/pages/parse-options/examples/1/index.ts

@@ -0,0 +1,35 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {
+    TUI_EDITOR_EXTENSIONS,
+    TuiEditor,
+    tuiEditorOptionsProvider,
+    TuiEditorSocket,
+    TuiEditorTool,
+} from '@taiga-ui/editor';
+
+@Component({
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiEditor, TuiEditorSocket],
+    templateUrl: './index.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        tuiEditorOptionsProvider({
+            parseOptions: {
+                preserveWhitespace: 'full',
+            },
+        }),
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            useValue: [
+                import('@taiga-ui/editor').then(({TuiStarterKit}) => TuiStarterKit),
+            ],
+        },
+    ],
+})
+export default class Example {
+    protected readonly builtInTools = [TuiEditorTool.Undo];
+
+    protected control = new FormControl('test text\n\rtest text 2');
+}

projects/demo/src/app/pages/parse-options/index.html

@@ -0,0 +1,24 @@
+<tui-doc-page
+    header="Editor"
+    type="components"
+>
+    <p>
+        Passed content is parsed by ProseMirror. To hook into the parsing, you can pass parseOptions which are then
+        handled by
+        <a
+            href="https://prosemirror.net/docs/ref/#model.ParseOptions"
+            target="_blank"
+            tuiLink
+        >
+            ProseMirror.
+        </a>
+    </p>
+
+    <tui-doc-example
+        id="preserve-whitespace"
+        description="By default, whitespace is collapsed as per HTML's rules. Pass true to preserve whitespace, but normalize newlines to spaces, and 'full' to preserve whitespace entirely."
+        heading="Preserve whitespace"
+        [component]="component1"
+        [content]="example1"
+    />
+</tui-doc-page>

projects/demo/src/app/pages/parse-options/index.ts

@@ -0,0 +1,18 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiAddonDoc, TuiLink],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class Example {
+    protected readonly component1 = import('./examples/1');
+
+    protected readonly example1 = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+    };
+}

projects/demo/src/app/shared/routes.ts

@@ -9,6 +9,7 @@ export const TuiDemoPath = {
     EmbedIframe: 'embed/iframe',
     EmbedYoutube: 'embed/youtube',
     Focus: 'focus',
+    ParseOptions: 'parse-options',
     Font: 'font',
     Groups: 'groups',
     HighlightCode: 'highlight/code',

projects/editor/common/editor-options.ts

@@ -1,5 +1,6 @@
 import type {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+import type {EditorOptions} from '@tiptap/core';
 
 import {
     EDITOR_BLANK_COLOR,
@@ -11,7 +12,7 @@ import type {TuiEditorLinkOptions} from './default-link-options-handler';
 import {TUI_DEFAULT_LINK_OPTIONS} from './default-link-options-handler';
 import type {TuiEditorToolType} from './editor-tool';
 
-export interface TuiEditorOptions {
+export interface TuiEditorOptions extends Partial<EditorOptions> {
     readonly blankColor: string;
     readonly colors: ReadonlyMap<string, string>;
     readonly fontOptions: typeof tuiDefaultFontOptionsHandler;
@@ -98,6 +99,7 @@ export const TUI_EDITOR_DEFAULT_OPTIONS: TuiEditorOptions = {
     linkOptions: TUI_DEFAULT_LINK_OPTIONS,
     fontOptions: tuiDefaultFontOptionsHandler,
     floatingToolbar: false,
+    parseOptions: {},
     icons: {
         undo: '@tui.undo',
         redo: '@tui.redo',

projects/editor/components/editor/editor.providers.ts

@@ -1,11 +1,13 @@
 import {Renderer2} from '@angular/core';
 import {WA_WINDOW} from '@ng-web-apis/common';
+import type {TuiEditorOptions} from '@taiga-ui/editor/common';
 import {
     INITIALIZATION_TIPTAP_CONTAINER,
     LAZY_EDITOR_EXTENSIONS,
     LAZY_TIPTAP_EDITOR,
     TIPTAP_EDITOR,
     TUI_EDITOR_EXTENSIONS,
+    TUI_EDITOR_OPTIONS,
 } from '@taiga-ui/editor/common';
 import {TuiTiptapEditorService} from '@taiga-ui/editor/directives';
 import type {Editor, Extension, Mark, Node} from '@tiptap/core';
@@ -45,23 +47,26 @@ export const TUI_EDITOR_PROVIDERS = [
             LAZY_EDITOR_EXTENSIONS,
             LAZY_TIPTAP_EDITOR,
             WA_WINDOW,
+            TUI_EDITOR_OPTIONS,
         ],
         // eslint-disable-next-line @typescript-eslint/max-params
         useFactory: (
             element: HTMLElement,
             extensions: Observable<Array<Extension | Mark | Node>>,
             editor: Observable<typeof Editor>,
             winRef: Window,
+            options: TuiEditorOptions,
         ): Observable<Editor | null> =>
             combineLatest([editor, extensions]).pipe(
                 take(1),
-                map(([LazyEditor, extensions]) => {
+                map(([Editor, extensions]) => {
                     try {
                         if (!globalThis.document) {
                             globalThis.document = winRef.document;
                         }
 
-                        return new LazyEditor({
+                        return new Editor({
+                            ...options,
                             element,
                             extensions,
                         });

projects/editor/directives/tiptap-editor/tiptap-editor.service.ts

@@ -11,6 +11,7 @@ import {
     AbstractTuiEditor,
     EDITOR_BLANK_COLOR,
     TIPTAP_EDITOR,
+    TUI_EDITOR_OPTIONS,
 } from '@taiga-ui/editor/common';
 import type * as TuiEditorTypes from '@taiga-ui/editor/common/types';
 import {tuiGetMarkRange, tuiParseStyle} from '@taiga-ui/editor/utils';
@@ -27,6 +28,7 @@ type Level = 1 | 2 | 3 | 4 | 5 | 6;
 @Injectable()
 export class TuiTiptapEditorService extends AbstractTuiEditor {
     private readonly editorRef: Observable<Editor | null> = inject(TIPTAP_EDITOR);
+    private readonly options = inject(TUI_EDITOR_OPTIONS);
 
     protected editor?: Editor;
 
@@ -341,7 +343,7 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
             return;
         }
 
-        this.editor?.commands.setContent(value);
+        this.editor?.commands.setContent(value, false, this.options.parseOptions);
         this.editor?.view.updateState(
             EditorState.create({
                 schema: this.editor.state.schema,