feat: migrate to standalone compoents, directives

projects/demo/src/app/bubble-menu/bubble-menu.component.ts

@@ -5,12 +5,12 @@ import { FormsModule } from '@angular/forms';
 import { Editor } from '@tiptap/core';
 import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
-import { NgxTiptapModule } from 'ngx-tiptap';
+import { BubbleMenuDirective, EditorDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-bubble-menu',
   standalone: true,
-  imports: [CommonModule, FormsModule, NgxTiptapModule],
+  imports: [CommonModule, FormsModule, EditorDirective, BubbleMenuDirective],
   templateUrl: './bubble-menu.component.html',
   styleUrls: ['./bubble-menu.component.css'],
 })

projects/demo/src/app/floating-menu/floating-menu.component.ts

@@ -3,12 +3,12 @@ import { Component, OnDestroy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { NgxTiptapModule } from 'ngx-tiptap';
+import { EditorDirective, FloatingMenuDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-floating-menu',
   standalone: true,
-  imports: [CommonModule, FormsModule, NgxTiptapModule],
+  imports: [CommonModule, FormsModule, EditorDirective, FloatingMenuDirective],
   templateUrl: './floating-menu.component.html',
   styleUrls: ['./floating-menu.component.css'],
 })

projects/demo/src/app/nodeview-renderer/nodeview-renderer.component.ts

@@ -4,13 +4,13 @@ import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
 
 import { CounterComponentExtension, EditableComponentExtension } from './extensions';
-import { NgxTiptapModule } from 'ngx-tiptap';
+import { EditorDirective } from 'ngx-tiptap';
 import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-nodeview-renderer',
   standalone: true,
-  imports: [CommonModule, NgxTiptapModule],
+  imports: [CommonModule, EditorDirective],
   templateUrl: './nodeview-renderer.component.html',
   styleUrls: ['./nodeview-renderer.component.css'],
 })

projects/demo/src/app/nodeview-renderer/nodeviews/counter/counter.component.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
-import { AngularNodeViewComponent } from 'ngx-tiptap';
+import { AngularNodeViewComponent, DraggableDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-nodeview-counter',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, DraggableDirective],
   templateUrl: './counter.component.html',
   styleUrls: ['./counter.component.css'],
 })

projects/demo/src/app/nodeview-renderer/nodeviews/editable/editable.component.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
-import { AngularNodeViewComponent, NgxTiptapModule } from 'ngx-tiptap';
+import { AngularNodeViewComponent, DraggableDirective, EditorDirective, NodeViewContentDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-nodeview-editable',
   standalone: true,
-  imports: [CommonModule, NgxTiptapModule],
+  imports: [CommonModule, EditorDirective, DraggableDirective, NodeViewContentDirective],
   templateUrl: './editable.component.html',
   styleUrls: ['./editable.component.css'],
 })

projects/demo/src/app/simple-editor-reactive/simple-editor-reactive.component.ts

@@ -5,12 +5,12 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Content, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
-import { NgxTiptapModule } from 'ngx-tiptap';
+import { EditorDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-simple-editor-reactive',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, NgxTiptapModule],
+  imports: [CommonModule, ReactiveFormsModule, EditorDirective],
   templateUrl: './simple-editor-reactive.component.html',
   styleUrls: ['./simple-editor-reactive.component.css'],
 })

projects/demo/src/app/simple-editor/simple-editor.component.ts

@@ -5,12 +5,12 @@ import { CommonModule } from '@angular/common';
 import { Content, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
-import { NgxTiptapModule } from 'ngx-tiptap';
+import { EditorDirective } from 'ngx-tiptap';
 
 @Component({
   selector: 'app-simple-editor',
   standalone: true,
-  imports: [CommonModule, FormsModule, NgxTiptapModule],
+  imports: [CommonModule, FormsModule, EditorDirective],
   templateUrl: './simple-editor.component.html',
   styleUrls: ['./simple-editor.component.css'],
 })

projects/ngx-tiptap/src/lib/bubble-menu.directive.spec.ts

@@ -12,6 +12,8 @@ import { EditorDirective } from './editor.directive';
     <tiptap-editor [editor]="editor"></tiptap-editor>
     <tiptap-bubble-menu [editor]="editor">BubbleMenu</tiptap-bubble-menu>
   `,
+  imports: [EditorDirective, BubbleMenuDirective],
+  standalone: true,
 })
 class TestComponent {
   @Input() editor!: Editor;
@@ -23,11 +25,9 @@ describe('BubbleMenuDirective', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
+      imports: [TestComponent,
         EditorDirective,
-        BubbleMenuDirective,
-      ],
+        BubbleMenuDirective],
     });
 
     await TestBed.compileComponents();

projects/ngx-tiptap/src/lib/bubble-menu.directive.ts

@@ -4,6 +4,7 @@ import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubbl
 
 @Directive({
   selector: 'tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]',
+  standalone: true,
 })
 export class BubbleMenuDirective implements OnInit, OnDestroy {
   @Input() pluginKey: BubbleMenuPluginProps['pluginKey'] = 'NgxTiptapBubbleMenu';

projects/ngx-tiptap/src/lib/draggable.directive.spec.ts

@@ -6,6 +6,8 @@ import { DraggableDirective } from './draggable.directive';
 
 @Component({
   template: '<div tiptapDraggable>Hello Tiptap!</div>',
+  imports: [DraggableDirective],
+  standalone: true,
 })
 class TestComponent { }
 
@@ -14,10 +16,8 @@ describe('DraggableDirective', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
-        DraggableDirective,
-      ],
+      imports: [TestComponent,
+        DraggableDirective],
     });
 
     await TestBed.compileComponents();

projects/ngx-tiptap/src/lib/draggable.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: '[tiptapDraggable]',
+  standalone: true,
 })
 export class DraggableDirective {
   @HostBinding('attr.draggable') draggable = true;

projects/ngx-tiptap/src/lib/editor.directive.spec.ts

@@ -10,6 +10,8 @@ import { EditorDirective } from './editor.directive';
 describe('NgxTiptapDirective', () => {
   @Component({
     template: '<div tiptap [editor]="editor"></div>',
+    imports: [FormsModule, EditorDirective],
+    standalone: true,
   })
   class TestComponent {
     editor!: Editor;
@@ -20,10 +22,8 @@ describe('NgxTiptapDirective', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
-        EditorDirective,
-      ],
+      imports: [TestComponent,
+        EditorDirective],
     });
 
     await TestBed.compileComponents();
@@ -52,6 +52,8 @@ describe('NgxTiptapDirective', () => {
 describe('NgxTiptapDirective: FormsModule', () => {
   @Component({
     template: '<div tiptap [editor]="editor" [(ngModel)]="value"></div>',
+    standalone: true,
+    imports: [FormsModule, EditorDirective],
   })
   class TestFormComponent {
     editor!: Editor;
@@ -65,12 +67,10 @@ describe('NgxTiptapDirective: FormsModule', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestFormComponent,
-        EditorDirective,
-      ],
       imports: [
         FormsModule,
+        TestFormComponent,
+        EditorDirective,
       ],
     });
 
@@ -194,6 +194,8 @@ describe('NgxTiptapDirective: Reactive FormsModule', () => {
         <div tiptap [editor]="editor" formControlName="content"></div>
       </form>
       `,
+    standalone: true,
+    imports: [ReactiveFormsModule, FormsModule, EditorDirective],
   })
   class TestComponent {
     editor!: Editor;
@@ -214,8 +216,6 @@ describe('NgxTiptapDirective: Reactive FormsModule', () => {
     TestBed.configureTestingModule({
       imports: [
         ReactiveFormsModule,
-      ],
-      declarations: [
         EditorDirective,
         TestComponent,
       ],

projects/ngx-tiptap/src/lib/editor.directive.ts

@@ -12,6 +12,7 @@ import { Content, Editor, type EditorEvents } from '@tiptap/core';
     useExisting: forwardRef(() => EditorDirective),
     multi: true,
   }],
+  standalone: true,
 })
 
 export class EditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {

projects/ngx-tiptap/src/lib/floating-menu.directive.spec.ts

@@ -9,9 +9,11 @@ import { FloatingMenuDirective } from './floating-menu.directive';
 
 @Component({
   template: `
-      <tiptap-editor [editor]="editor"></tiptap-editor>
-      <tiptap-floating-menu [editor]="editor">Floater</tiptap-floating-menu>
-    `,
+    <tiptap-editor [editor]="editor"></tiptap-editor>
+    <tiptap-floating-menu [editor]="editor">Floater</tiptap-floating-menu>
+  `,
+  imports: [EditorDirective, FloatingMenuDirective],
+  standalone: true,
 })
 class TestComponent {
   @Input() editor!: Editor;
@@ -23,11 +25,9 @@ describe('FloatingMenuDirective', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
+      imports: [TestComponent,
         EditorDirective,
-        FloatingMenuDirective,
-      ],
+        FloatingMenuDirective],
     });
 
     await TestBed.compileComponents();

projects/ngx-tiptap/src/lib/floating-menu.directive.ts

@@ -4,6 +4,7 @@ import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-f
 
 @Directive({
   selector: 'tiptap-floating-menu[editor], [tiptapFloatingMenu][editor]',
+  standalone: true,
 })
 
 export class FloatingMenuDirective implements OnInit, OnDestroy {

projects/ngx-tiptap/src/lib/ngx-tiptap.module.ts

@@ -1,25 +1,25 @@
 import { NgModule } from '@angular/core';
 
-import { EditorDirective } from './editor.directive';
-import { FloatingMenuDirective } from './floating-menu.directive';
-import { BubbleMenuDirective } from './bubble-menu.directive';
-import { DraggableDirective } from './draggable.directive';
-import { NodeViewContentDirective } from './node-view-content.directive';
+// import { EditorDirective } from './editor.directive';
+// import { FloatingMenuDirective } from './floating-menu.directive';
+// import { BubbleMenuDirective } from './bubble-menu.directive';
+// import { DraggableDirective } from './draggable.directive';
+// import { NodeViewContentDirective } from './node-view-content.directive';
 
 @NgModule({
   declarations: [
-    EditorDirective,
-    FloatingMenuDirective,
-    BubbleMenuDirective,
-    DraggableDirective,
-    NodeViewContentDirective,
+    // EditorDirective,
+    // FloatingMenuDirective,
+    // BubbleMenuDirective,
+    // DraggableDirective,
+    // NodeViewContentDirective,
   ],
   exports: [
-    EditorDirective,
-    FloatingMenuDirective,
-    BubbleMenuDirective,
-    DraggableDirective,
-    NodeViewContentDirective,
+    // EditorDirective,
+    // FloatingMenuDirective,
+    // BubbleMenuDirective,
+    // DraggableDirective,
+    // NodeViewContentDirective,
   ],
 })
 export class NgxTiptapModule { }

projects/ngx-tiptap/src/lib/node-view-content.directive.spec.ts

@@ -6,6 +6,8 @@ import { NodeViewContentDirective } from './node-view-content.directive';
 
 @Component({
   template: '<div tiptapNodeViewContent>Hello Tiptap!</div>',
+  imports: [NodeViewContentDirective],
+  standalone: true,
 })
 
 class TestComponent { }
@@ -15,10 +17,8 @@ describe('NodeViewContentDirective', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
-        NodeViewContentDirective,
-      ],
+      imports: [TestComponent,
+        NodeViewContentDirective],
     });
 
     await TestBed.compileComponents();

projects/ngx-tiptap/src/lib/node-view-content.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: '[tiptapNodeViewContent]',
+  standalone: true,
 })
 export class NodeViewContentDirective {
   @HostBinding('attr.data-node-view-content') handle = '';

projects/ngx-tiptap/src/public-api.ts

@@ -8,7 +8,7 @@ export * from './lib/bubble-menu.directive';
 export * from './lib/draggable.directive';
 export * from './lib/node-view-content.directive';
 export * from './lib/node-view.component';
-export * from './lib/ngx-tiptap.module';
+// export * from './lib/ngx-tiptap.module';
 
 export * from './lib/AngularRenderer';
 export * from './lib/NodeViewRenderer';