refactor: image view as angular element

demo/src/app/doc.ts

@@ -257,6 +257,23 @@ export default {
           text: 'The content of the code editor is kept in sync with the content of the code block in the rich text editor, so that it is as if you\'re directly editing the outer document, using a more convenient interface.'
         }
       ]
+    },
+    {
+      type: 'paragraph',
+      attrs: {
+        align: 'center'
+      },
+      content: [
+        {
+          type: 'image',
+          attrs: {
+            src: 'https://gameranx.com/wp-content/uploads/2016/03/Rise-of-the-Tomb-Raider-4K-Wallpaper-3.jpg',
+            alt: null,
+            title: null,
+            width: '578px'
+          }
+        }
+      ]
     }
   ]
 };

demo/src/app/plugins/index.ts

@@ -2,7 +2,6 @@ import { EditorState, Plugin, Selection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { keymap } from 'prosemirror-keymap';
 
-import { image } from 'ngx-editor/plugins';
 import { Command } from 'prosemirror-commands';
 
 type Dir = 'left' | 'right' | 'up' | 'down';
@@ -34,9 +33,6 @@ const arrowHandlers = keymap({
 
 const getPlugins = (): Plugin[] => {
   const plugins = [
-    image({
-      resize: true,
-    }),
     arrowHandlers
   ];
 

docs/_sidebar.md

@@ -3,7 +3,6 @@
   - [Quick start](quickstart.md)
   - [Editor](editor.md)
   - [Configuration](configuration.md)
-  - [Plugins](plugins.md)
   - [Schema](schema.md)
   - [Commands](commands.md)
   - [Convert JSON doc to HTML](doc-html-doc.md)
@@ -13,7 +12,6 @@
   - [Full Featured Editor](full-featured-editor.md)
   - [Menu](menu.md)
   - [History](history.md)
-  - [Images](images.md)
   - [InputRules](input-rules.md)
   - [Shortcuts](shortcuts.md)
   - [Reactive Forms](reactive-forms.md)

docs/full-featured-editor.md

@@ -4,22 +4,6 @@
 
 Use the following config to created a full featured editor
 
-### plugin.ts
-
-```ts
-import { Plugin } from 'prosemirror-state';
-import { image } from 'ngx-editor/plugins';
-
-const plugins: Plugin[] = [
-  image({
-    // enables image resizing
-    resize: true,
-  }),
-];
-
-export default plugins;
-```
-
 ### app.module.ts
 
 ```ts
@@ -29,8 +13,6 @@ import { FormsModule } from '@angular/forms';
 import { NgxEditorModule, schema } from 'ngx-editor';
 import { schema } from 'ngx-editor/schema';
 
-import plugins from './plugins';
-
 @NgModule({
   imports: [
     FormsModule,
@@ -81,8 +63,6 @@ import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
 import { Validators, Editor, Toolbar } from 'ngx-editor';
 
-import plugins from './plugins';
-
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -107,9 +87,7 @@ export class AppComponent implements OnInit, OnDestroy {
   });
 
   ngOnInit(): void {
-    this.editor = new Editor({
-      plugins,
-    });
+    this.editor = new Editor();
   }
 
   ngOnDestroy(): void {

package.json

@@ -34,6 +34,7 @@
     "@angular/common": "~11.0.1",
     "@angular/compiler": "~11.0.1",
     "@angular/core": "~11.0.1",
+    "@angular/elements": "^11.0.1",
     "@angular/forms": "~11.0.1",
     "@angular/platform-browser": "~11.0.1",
     "@angular/platform-browser-dynamic": "~11.0.1",

src/lib/components/image-view/image-view.component.html

@@ -0,0 +1,9 @@
+<span class="NgxEditor__ImageWrapper" [ngClass]="{'NgxEditor__Resizer--Active': selected}" [style.width]="outerWidth">
+  <span class="NgxEditor__ResizeHandle" *ngIf="selected" (mousedown)="startResizing($event)">
+    <span class="NgxEditor__ResizeHandle--TL" ></span>
+    <span class="NgxEditor__ResizeHandle--TR" ></span>
+    <span class="NgxEditor__ResizeHandle--BL"></span>
+    <span class="NgxEditor__ResizeHandle--BR"></span>
+  </span>
+  <img [src]="src" [alt]="alt" [title]="title" #imgEl />
+</span>

src/lib/components/image-view/image-view.component.scss

@@ -0,0 +1,59 @@
+$primary: #1a73e8;
+
+img {
+  width: 100%;
+  height: 100%;
+}
+
+.NgxEditor__ImageWrapper {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+  padding: 2px;
+
+  &.NgxEditor__Resizer--Active {
+    padding: 1px;
+    border: 1px solid $primary;
+  }
+
+  .NgxEditor__ResizeHandle {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    .NgxEditor__ResizeHandle--TL,
+    .NgxEditor__ResizeHandle--BL,
+    .NgxEditor__ResizeHandle--TR,
+    .NgxEditor__ResizeHandle--BR {
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      background-color: $primary;
+      border: 1px solid white;
+    }
+
+    .NgxEditor__ResizeHandle--BR {
+      bottom: -5px;
+      right: -5px;
+      cursor: se-resize;
+    }
+
+    .NgxEditor__ResizeHandle--TR {
+      top: -5px;
+      right: -5px;
+      cursor: ne-resize;
+    }
+
+    .NgxEditor__ResizeHandle--TL {
+      top: -5px;
+      left: -5px;
+      cursor: nw-resize;
+    }
+
+    .NgxEditor__ResizeHandle--BL {
+      bottom: -5px;
+      left: -5px;
+      cursor: sw-resize;
+    }
+  }
+}

src/lib/components/image-view/image-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageViewComponent } from './image-view.component';
+
+describe('ImageComponent', () => {
+  let component: ImageViewComponent;
+  let fixture: ComponentFixture<ImageViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImageViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/components/image-view/image-view.component.ts

@@ -0,0 +1,66 @@
+import {
+  Component, ElementRef, EventEmitter,
+  Input, Output, ViewChild
+} from '@angular/core';
+import { EditorView } from 'prosemirror-view';
+
+@Component({
+  selector: 'ngx-image-view',
+  templateUrl: './image-view.component.html',
+  styleUrls: ['./image-view.component.scss']
+})
+
+export class ImageViewComponent {
+  private resizing = false;
+  @Input() src: string;
+  @Input() alt = '';
+  @Input() title = '';
+  @Input() outerWidth = '';
+  @Input() selected = false;
+  @Input() view: EditorView;
+
+  @Output() imageResize = new EventEmitter();
+
+  @ViewChild('imgEl', { static: true }) imgEl: ElementRef;
+
+  constructor() { }
+
+  startResizing(e: MouseEvent): void {
+    e.preventDefault();
+    this.resizeImage(e);
+  }
+
+  resizeImage(evt: MouseEvent): void {
+    const startX = evt.pageX;
+    const startWidth = this.imgEl.nativeElement.clientWidth;
+
+    const { width } = window.getComputedStyle(this.view.dom);
+    const editorWidth = parseInt(width, 10);
+
+    const onMouseMove = (e: MouseEvent) => {
+      const currentX = e.pageX;
+      const diffInPx = currentX - startX;
+      const computedWidth = startWidth + diffInPx;
+
+      // prevent image overflow the editor
+      // prevent resizng below 20px
+      if (computedWidth > editorWidth || computedWidth < 20) {
+        return;
+      }
+
+      this.outerWidth = `${computedWidth}px`;
+    };
+
+    const onMouseUp = (e: MouseEvent) => {
+      e.preventDefault();
+
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+
+      this.imageResize.emit();
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+}

src/lib/editor.component.html

@@ -1,3 +1 @@
-<div class="NgxEditor" #ngxEditor>
-  <ngx-bubble [editor]="editor"></ngx-bubble>
-</div>
+<div class="NgxEditor" #ngxEditor></div>

src/lib/editor.component.scss

@@ -1,8 +1,3 @@
-$primary: #1a73e8;
-$light-gray: #f1f1f1;
-
-// prosemirror
-
 .NgxEditor {
   background: white;
   color: black;
@@ -51,60 +46,6 @@ $light-gray: #f1f1f1;
   pointer-events: none;
 }
 
-.NgxEditor__ImageWrapper {
-  position: relative;
-  display: inline-block;
-  line-height: 0;
-  padding: 2px;
-
-  &.NgxEditor__Resizer--Active {
-    padding: 1px;
-    border: 1px solid $primary;
-  }
-
-  .NgxEditor__ResizeHandle {
-    position: absolute;
-    display: none;
-    height: 100%;
-    width: 100%;
-
-    .NgxEditor__ResizeHandle--TL,
-    .NgxEditor__ResizeHandle--BL,
-    .NgxEditor__ResizeHandle--TR,
-    .NgxEditor__ResizeHandle--BR {
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      background-color: $primary;
-      border: 1px solid white;
-    }
-
-    .NgxEditor__ResizeHandle--BR {
-      bottom: -5px;
-      right: -5px;
-      cursor: se-resize;
-    }
-
-    .NgxEditor__ResizeHandle--TR {
-      top: -5px;
-      right: -5px;
-      cursor: ne-resize;
-    }
-
-    .NgxEditor__ResizeHandle--TL {
-      top: -5px;
-      left: -5px;
-      cursor: nw-resize;
-    }
-
-    .NgxEditor__ResizeHandle--BL {
-      bottom: -5px;
-      left: -5px;
-      cursor: sw-resize;
-    }
-  }
-}
-
 .NgxEditor__Wrapper {
   border: 1px solid rgba(0, 0, 0, 0.4);
   border-radius: 4px;