fix: class constructor NodeView cannot be invoked without 'new' (#1009)

projects/demo/src/app/pages/anchors/examples/1/index.ts

@@ -41,6 +41,6 @@ export class TuiEditorAnchorsExample1 {
     ];
 
     control = new FormControl(
-        '<p><strong><em>War and Peace</em></strong> (<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_language">Russian</a>: Война и мир, <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Romanization_of_Russian">romanized</a>:&nbsp;<em>Voyna i mir</em>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Reforms_of_Russian_orthography">pre-reform Russian</a>: <strong>Война и миръ</strong>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Help:IPA/Russian">[vɐjˈna i ˈmʲir]</a>) is a literary work by the Russian author <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Leo_Tolstoy">Leo Tolstoy</a> that mixes fictional narrative with chapters on history and philosophy. It was first published serially, then published in its entirety in 1869. It is regarded as Tolstoy\'s finest literary achievement and remains an internationally praised classic of <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/World_literature">world literature</a>.<a target="_blank" rel="noopener noreferrer nofollow" href="#moser">[1]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#thirlwell">[2]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#briggs">[3]</a></p><p>The novel chronicles the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/French_invasion_of_Russia">French invasion of Russia</a> and the impact of the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Napoleonic_era">Napoleonic era</a> on <a target="_blank" rel="noopener noreferrer nofollow" class="my-custom-class mw-redirect" href="https://en.wikipedia.org/wiki/Tsarist">Tsarist</a> society through the stories of five Russian <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Aristocracy_(class)">aristocratic</a> families. Portions of an earlier version, titled <em>The Year 1805</em>,<a target="_blank" rel="noopener noreferrer nofollow" href="#introduction">[4] </a>were serialized in <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/The_Russian_Messenger"><em>The Russian Messenger</em></a> from 1865 to 1867 before the novel was published in its entirety in 1869.<a target="_blank" rel="noopener noreferrer nofollow" href="#knowles">[5]</a></p><p>Tolstoy said that the best <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_literature">Russian literature</a> does not conform to standards and hence hesitated to classify <em>War and Peace</em>, saying it is "not a novel, even less is it a poem, and still less a historical chronicle". Large sections, especially the later chapters, are philosophical discussions rather than narrative.<a target="_blank" rel="noopener noreferrer nofollow" href="#war">[6]</a> He regarded <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Anna_Karenina"><em>Anna Karenina</em></a> as his first true novel.</p><p></p><img src="./assets/images/piece-and-war.jpg" width="732" alt="" title="" data-type="image-editor"><p></p><p><strong>References</strong>:</p><ol><li><p><a data-type="jump-anchor" id="moser">Moser</a>, Charles. 1992. <em>Encyclopedia of Russian Literature</em>. Cambridge University Press, pp. 298–300.</p></li><li><p><a data-type="jump-anchor" id="thirlwell">Thirlwell</a>, Adam <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://www.theguardian.com/books/2005/oct/08/classics.leonikolaevichtolstoy">"A masterpiece in miniature"</a>. <em>The Guardian</em> (London, UK) October 8, 2005</p></li><li><p><a data-type="jump-anchor" id="briggs">Briggs</a>, Anthony. 2005. "Introduction" to <em>War and Peace</em>. Penguin Classics.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Pevear, Richard</a> (2008). "<a data-type="jump-anchor" id="introduction">Introduction</a>". <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://archive.org/details/warpeace00tols_1"><em>War and Peace</em></a>. Trans. Pevear; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Volokhonsky, Larissa</a>. New York: Vintage Books. pp.&nbsp;VIII–IX. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-4000-7998-8">978-1-4000-7998-8</a>.</p><p></p></li><li><p><a data-type="jump-anchor" id="knowles">Knowles</a>, A. V. <em>Leo Tolstoy</em>, Routledge 1997.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://books.google.com/books?id=c4HEAN-ti1MC&amp;pg=PR10">"Introduction?"</a>. <a data-type="jump-anchor" id="war"><em>War and Peace</em></a>. Wordsworth Editions. 1993. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-85326-062-9">978-1-85326-062-9</a>. Retrieved 2009-03-24.</p></li></ol>',
+        '<p><strong><em>War and Peace</em></strong> (<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_language">Russian</a>: Война и мир, <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Romanization_of_Russian">romanized</a>:&nbsp;<em>Voyna i mir</em>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Reforms_of_Russian_orthography">pre-reform Russian</a>: <strong>Война и миръ</strong>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Help:IPA/Russian">[vɐjˈna i ˈmʲir]</a>) is a literary work by the Russian author <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Leo_Tolstoy">Leo Tolstoy</a> that mixes fictional narrative with chapters on history and philosophy. It was first published serially, then published in its entirety in 1869. It is regarded as Tolstoy\'s finest literary achievement and remains an internationally praised classic of <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/World_literature">world literature</a>.<a target="_blank" rel="noopener noreferrer nofollow" href="#moser">[1]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#thirlwell">[2]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#briggs">[3]</a></p><p>The novel chronicles the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/French_invasion_of_Russia">French invasion of Russia</a> and the impact of the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Napoleonic_era">Napoleonic era</a> on <a target="_blank" rel="noopener noreferrer nofollow" class="my-custom-class mw-redirect" href="https://en.wikipedia.org/wiki/Tsarist">Tsarist</a> society through the stories of five Russian <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Aristocracy_(class)">aristocratic</a> families. Portions of an earlier version, titled <em>The Year 1805</em>,<a target="_blank" rel="noopener noreferrer nofollow" href="#introduction">[4] </a>were serialized in <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/The_Russian_Messenger"><em>The Russian Messenger</em></a> from 1865 to 1867 before the novel was published in its entirety in 1869.<a target="_blank" rel="noopener noreferrer nofollow" href="#knowles">[5]</a></p><p>Tolstoy said that the best <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_literature">Russian literature</a> does not conform to standards and hence hesitated to classify <em>War and Peace</em>, saying it is "not a novel, even less is it a poem, and still less a historical chronicle". Large sections, especially the later chapters, are philosophical discussions rather than narrative.<a target="_blank" rel="noopener noreferrer nofollow" href="#war">[6]</a> He regarded <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Anna_Karenina"><em>Anna Karenina</em></a> as his first true novel.</p><p></p><img src="./assets/images/piece-and-war.jpg" width="732" alt="" title=""><p></p><p><strong>References</strong>:</p><ol><li><p><a data-type="jump-anchor" id="moser">Moser</a>, Charles. 1992. <em>Encyclopedia of Russian Literature</em>. Cambridge University Press, pp. 298–300.</p></li><li><p><a data-type="jump-anchor" id="thirlwell">Thirlwell</a>, Adam <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://www.theguardian.com/books/2005/oct/08/classics.leonikolaevichtolstoy">"A masterpiece in miniature"</a>. <em>The Guardian</em> (London, UK) October 8, 2005</p></li><li><p><a data-type="jump-anchor" id="briggs">Briggs</a>, Anthony. 2005. "Introduction" to <em>War and Peace</em>. Penguin Classics.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Pevear, Richard</a> (2008). "<a data-type="jump-anchor" id="introduction">Introduction</a>". <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://archive.org/details/warpeace00tols_1"><em>War and Peace</em></a>. Trans. Pevear; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Volokhonsky, Larissa</a>. New York: Vintage Books. pp.&nbsp;VIII–IX. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-4000-7998-8">978-1-4000-7998-8</a>.</p><p></p></li><li><p><a data-type="jump-anchor" id="knowles">Knowles</a>, A. V. <em>Leo Tolstoy</em>, Routledge 1997.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://books.google.com/books?id=c4HEAN-ti1MC&amp;pg=PR10">"Introduction?"</a>. <a data-type="jump-anchor" id="war"><em>War and Peace</em></a>. Wordsworth Editions. 1993. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-85326-062-9">978-1-85326-062-9</a>. Retrieved 2009-03-24.</p></li></ol>',
     );
 }

projects/demo/src/app/pages/focus/examples/1/index.ts

@@ -106,6 +106,6 @@ export class TuiEditorFocusExample1 {
 
     control = new FormControl(
         // eslint-disable-next-line @typescript-eslint/quotes
-        `<img src="./assets/images/piece-and-war.jpg" width="732" alt="" title="" data-type="image-editor"><p><strong>WYSIWYG</strong> (<em>What you see is what you get</em>) — <u>Rich Text Editor</u> for using with Angular <sup>forms.</sup></p><h1>Heading</h1><p>Lorem ipsum dolor sit amet consectetur <a target="_blank" rel="noopener noreferrer nofollow" href="http://taiga-ui.dev">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim</p><blockquote><p> ad minim veniam, quis nostrud exercitation <span style="color: rgb(196, 11, 8); background-color: rgb(221, 228, 237)">ullamco</span>, laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p></blockquote><p style="text-align: right">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><pre><code>class EditorExample {}</code></pre><table><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p>Free</p></th><th colspan="1" rowspan="1"><p>Pro</p></th></tr><tr><td colspan="1" rowspan="1"><p>24/7 support</p></td><td style="background: rgb(255, 221, 41)" colspan="1" rowspan="1"><p>+</p></td><td style="background: rgb(57, 181, 77)" colspan="1" rowspan="1"><p>+</p></td></tr></tbody></table><p style="text-align: center"><code>Code in text</code></p>`,
+        `<img src="./assets/images/piece-and-war.jpg" width="732" alt="" title=""><p><strong>WYSIWYG</strong> (<em>What you see is what you get</em>) — <u>Rich Text Editor</u> for using with Angular <sup>forms.</sup></p><h1>Heading</h1><p>Lorem ipsum dolor sit amet consectetur <a target="_blank" rel="noopener noreferrer nofollow" href="http://taiga-ui.dev">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim</p><blockquote><p> ad minim veniam, quis nostrud exercitation <span style="color: rgb(196, 11, 8); background-color: rgb(221, 228, 237)">ullamco</span>, laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p></blockquote><p style="text-align: right">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><pre><code>class EditorExample {}</code></pre><table><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p>Free</p></th><th colspan="1" rowspan="1"><p>Pro</p></th></tr><tr><td colspan="1" rowspan="1"><p>24/7 support</p></td><td style="background: rgb(255, 221, 41)" colspan="1" rowspan="1"><p>+</p></td><td style="background: rgb(57, 181, 77)" colspan="1" rowspan="1"><p>+</p></td></tr></tbody></table><p style="text-align: center"><code>Code in text</code></p>`,
     );
 }

projects/demo/src/app/pages/images/preview/examples/1/index.ts

@@ -39,7 +39,7 @@ export class TuiEditorPreviewImagesExample1 {
 
     constructor(@Inject(TUI_IS_STACKBLITZ) private readonly isStackblitz: boolean) {
         this.control.patchValue(
-            `<p>Small image</p><img data-type="image-editor" src="${this.relativePath}assets/images/lumberjack.png" width="300"><p>Big image</p><img data-type="image-editor" src="${this.relativePath}assets/images/big-wallpaper.jpg" width="500">`,
+            `<p>Small image</p><img src="${this.relativePath}assets/images/lumberjack.png" width="300"><p>Big image</p><img src="${this.relativePath}assets/images/big-wallpaper.jpg" width="500">`,
         );
     }
 }

projects/demo/src/app/pages/images/resizable/examples/1/index.html

@@ -6,3 +6,6 @@
 
 <h4>HTML:</h4>
 <tui-editor-socket [content]="control.value || ''"></tui-editor-socket>
+
+<h4>Text:</h4>
+<p>{{ control.value }}</p>

projects/demo/src/app/pages/images/resizable/examples/1/index.ts

@@ -59,7 +59,7 @@ export class TuiEditorResizableEditorExample1 {
         this.base64Image$.pipe(takeUntil(destroy$)).subscribe(src => {
             this.control.patchValue(
                 `
-                    <img data-type="image-editor" src="${src}" width="300">
+                    <img src="${src}" width="300" />
                     <p>Try to drag right border of image!</p>
                     <p>To change min/max size of image use token <code>TUI_IMAGE_EDITOR_OPTIONS</code>.
                 `,

projects/demo/src/app/pages/images/upload/examples/1/index.ts

@@ -75,7 +75,7 @@ export class TuiEditorUploadingImagesExample1 {
     ) {
         this.control.patchValue(
             `
-                <img data-type="image-editor" src="${this.relativePath}assets/images/lumberjack.png" width="300">
+                <img src="${this.relativePath}assets/images/lumberjack.png" width="300" />
                 <p>Try to drag right border of image!</p>
                 <p>To change min/max size of image use token <code>TUI_IMAGE_EDITOR_OPTIONS</code>.</p>
                 <img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwIDUwIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiPjxzdHlsZT4uYXtmaWxsOiNkZDAwMzF9LmJ7ZmlsbDojYzMwMDJmfS5je2ZpbGw6I2ZmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJhIiBkPSJtNDMuNiAxMi42bC0yLjggMjQuNy0xNS44IDguNy0xNS44LTguNy0yLjgtMjQuNyAxOC42LTYuNnoiLz48cGF0aCBjbGFzcz0iYiIgZD0ibTI1IDZsMTguNiA2LjYtMi44IDI0LjctMTUuOCA4Ljd2LTE1LjMtMjAuMy00LjR6Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iYyIgZD0ibTM2LjYgMzYuNWgtNC4zbC0yLjQtNS44aC05LjlsLTIuMyA1LjhoLTQuM2wxMS42LTI2LjF6bS0xMS42LTE3LjZsLTMuNCA4LjJoNi44eiIvPjwvc3ZnPg==" />`,

projects/tui-editor/extensions/iframe-editor/iframe-editor.extension.ts

@@ -71,7 +71,11 @@ export const createIframeEditorExtension = (injector: Injector): Node =>
 
         addNodeView(): NodeViewRenderer {
             return (props: NodeViewRendererProps) =>
-                new TuiNodeView(TuiIframeEditorComponent, props, {injector, ...props});
+                Reflect.construct(TuiNodeView, [
+                    TuiIframeEditorComponent,
+                    props,
+                    {injector, ...props},
+                ]);
         },
 
         addCommands(): Partial<RawCommands> {

projects/tui-editor/extensions/image-editor/image-editor.extension.ts

@@ -27,7 +27,7 @@ declare module '@tiptap/core' {
     }
 }
 
-const IMAGE_EDITOR_PARSE_META = [{tag: `img[data-type="image-editor"]`}];
+const IMAGE_EDITOR_PARSE_META = [{tag: `img`}];
 
 const DEFAULT_IMAGE_ATTRS = {
     src: {
@@ -127,15 +127,19 @@ export function createImageEditorExtension<T, K>(
         },
 
         renderHTML({HTMLAttributes}: Record<string, any>): DOMOutputSpec {
-            return [
-                `img`,
-                mergeAttributes(HTMLAttributes, {'data-type': `image-editor`}),
-            ];
+            return [`img`, mergeAttributes(HTMLAttributes)];
         },
 
         addNodeView(): NodeViewRenderer {
             return (props: NodeViewRendererProps) =>
-                new TuiNodeView(TuiImageEditorComponent, props, {injector, ...props});
+                Reflect.construct(TuiNodeView, [
+                    TuiImageEditorComponent,
+                    props,
+                    {
+                        injector,
+                        ...props,
+                    },
+                ]);
         },
 
         addCommands(): Partial<RawCommands> {

projects/tui-editor/extensions/tiptap-node-view/node-view-render.ts

@@ -5,7 +5,6 @@ import {
     Editor,
     NodeView,
     NodeViewProps,
-    NodeViewRenderer,
     NodeViewRendererOptions,
     NodeViewRendererProps,
 } from '@tiptap/core';
@@ -176,14 +175,3 @@ export class TuiNodeView extends NodeView<
         }
     }
 }
-
-/**
- * @deprecated
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function TuiNodeViewRenderer(
-    component: Type<TuiNodeViewNgComponent>,
-    options: Partial<TuiNodeViewRendererOptions>,
-): NodeViewRenderer {
-    return (props: NodeViewRendererProps) => new TuiNodeView(component, props, options);
-}