xt-plugin-editor 1.0.0 → 1.3.0

package/CHANGELOG.md

@@ -1,2 +0,0 @@
-# Changelog
-

package/angular.json

@@ -1,148 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "cache": {
-      "enabled": true
-    },
-    "analytics": "853114a2-918e-4fdd-a034-01da3328a1fa"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "editor": {
-      "projectType": "library",
-      "root": "projects/editor",
-      "sourceRoot": "projects/editor/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:ng-packagr",
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/editor/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/editor/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test",
-          "options": {
-            "tsConfig": "projects/editor/tsconfig.spec.json"
-          }
-        }
-      }
-    },
-    "editor-plugin": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "projects/editor-plugin",
-      "sourceRoot": "projects/editor-plugin/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-architects/native-federation:build",
-          "options": {},
-          "configurations": {
-            "production": {
-              "target": "editor-plugin:esbuild:production"
-            },
-            "development": {
-              "target": "editor-plugin:esbuild:development",
-              "dev": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-architects/native-federation:build",
-          "options": {
-            "target": "editor-plugin:serve-original:development",
-            "rebuildDelay": 500,
-            "dev": true,
-            "cacheExternalArtifacts": false,
-            "port": 0
-          }
-        },
-        "test": {
-          "builder": "@angular/build:unit-test"
-        },
-        "esbuild": {
-          "builder": "@angular/build:application",
-          "options": {
-            "outputPath": "dist/xt-editor-plugin",
-            "index": "projects/editor-plugin/src/index.html",
-            "browser": "projects/editor-plugin/src/main.ts",
-            "preserveSymlinks": true,
-            "polyfills": [
-              "es-module-shims"
-            ],
-            "tsConfig": "projects/editor-plugin/tsconfig.app.json",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "projects/editor-plugin/public"
-              },
-              {
-                "glob": "prosemirror-view/style/*.css",
-                "input": "node_modules",
-                "output": "/"
-              },
-              {
-                "glob": "prosemirror-menu/style/*.css",
-                "input": "node_modules",
-                "output": "/"
-              },
-              {
-                "glob": "prosemirror-gapcursor/style/*.css",
-                "input": "node_modules",
-                "output": "/"
-              }
-            ],
-            "styles": ["projects/editor-plugin/src/styles.css"]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "1MB",
-                  "maximumError": "2MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-					"defaultConfiguration": "development"
-        },
-				"serve-original": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "editor-plugin:esbuild:production"
-            },
-            "development": {
-              "buildTarget": "editor-plugin:esbuild:development"
-            }
-          },
-          "defaultConfiguration": "development",
-          "options": {
-            "port": 4206
-          }
-        }
-      }
-    }
-  }
-}

package/projects/editor/README.md

@@ -1,13 +0,0 @@
-![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
-
-# Plugin xt-editor
-
-This plugin is part of the [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md)
-
-It enable [xt-components](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-components) to
-
-- Display and edit rich text notes
-  ![Rich Text Editor](https://dont-code.net/assets/images/screenshots/plugin-default-primitive.png)
-
-With it you are sure you can display / edit any type within any xt-components application like [xt-host](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-host).
-

package/projects/editor/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/xt-plugin-editor",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/projects/editor/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "xt-plugin-editor",
-  "version": "1.0.0",
-  "repository": {
-    "url": "https://github.com/dont-code/ng-xtend.git"
-  },
-  "peerDependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "xt-components": "^1.0.0",
-    "rxjs": "^7.8.2",
-    "primeng": "^21.0.0",
-    "primeicons": "^7.0.0",
-    "prosemirror-model": "^1.25.11",
-    "prosemirror-transform": "^1.12.0",
-    "prosemirror-state": "^1.4.4",
-    "prosemirror-view": "^1.42.2",
-    "prosemirror-keymap": "^1.2.3",
-    "prosemirror-commands": "^1.0.0",
-    "prosemirror-schema-basic": "^1.2.4",
-    "prosemirror-markdown": "^1.13.5",
-    "prosemirror-schema-list": "^1.5.1",
-    "prosemirror-menu": "^1.3.2",
-    "prosemirror-history": "^1.5.0",
-    "prosemirror-inputrules": "^1.5.1",
-    "prosemirror-dropcursor": "^1.8.3",
-    "prosemirror-gapcursor": "^1.4.1",
-    "prosemirror-history-v2": "^1.1.3",
-    "markdown-it": "^15.0.2",
-    "crelt": "~1.0.7",
-    "marked": "~18.0.13"
-  },
-  "dependencies": {
-    "tslib": "^2.8.1"
-  },
-  "sideEffects": false
-}

package/projects/editor/src/lib/editor/editor.component.css

@@ -1,15 +0,0 @@
-.editorContainer {
-  width: 60em;
-  border: white solid thin;
-  padding: 5px;
-}
-
-/*
- * PrimeNG's tooltip preset (.p-tooltip-text) sets white-space: pre-line,
- * which renders the newline characters emitted by the markdown pipe between
- * block elements as visible blank lines ("large line heights").
- * Normalize white-space here so tooltip and in-page rendering match.
- */
-.toolTip {
-  white-space: normal;
-}

package/projects/editor/src/lib/editor/editor.component.html

@@ -1,29 +0,0 @@
-@if (isInForm() ) {
-  <div class="editorContainer">
-    <div #editor [formGroup]="formGroup()">
-    </div>
-  </div>
-  <p-dialog [visible]="displayAttrDialog()" [modal]="true" header="Edit">
-    <form [formGroup]="editAttrForm">
-      <xt-render [valueType]="editAttrValueType" [formGroup]="editAttrForm" displayMode="FULL_EDITABLE" ></xt-render>
-    </form>
-    <ng-template #footer>
-      <button type="button" pButton severity="secondary" variant="outlined" (click)="displayAttrDialog.set(false)">Cancel</button>
-      <button type="button" pButton (click)="updateAttrsFromForm()">Save</button>
-    </ng-template>
-  </p-dialog>
-} @else {
-  @let toDisplay=displayValue();
-  @if (toDisplay!=null) {
-    @if (context().displayMode=='FULL_VIEW') {
-      <div class="displayForm" [innerHTML]="displayValue() | markdown">
-      </div>
-    } @else {
-      <span [pTooltip]="fullText">{{ toDisplay | inlineMarkdown}}</span>
-      <ng-template #fullText>
-        <div class="toolTip" [innerHTML]="displayValue() | markdown">
-        </div>
-      </ng-template>
-    }
-  }
-}

package/projects/editor/src/lib/editor/editor.component.spec.ts

@@ -1,53 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
-import { provideZonelessChangeDetection } from '@angular/core';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { HostTestFormComponent, XtBaseContext, XtResolverService } from 'xt-components';
-import { EditorComponent } from './editor.component';
-import { By } from '@angular/platform-browser';
-import { registerDefaultPlugin } from 'xt-plugin-default';
-
-describe('EditorComponent', () => {
-  let component: EditorComponent;
-  let fixture: ComponentFixture<EditorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [EditorComponent],
-      providers: [provideNoopAnimations(), provideZonelessChangeDetection()]
-
-    })
-    .compileComponents();
-    // The editor dialog renders an xt-render for editorImageType/editorLinkType.
-    // Those composite types resolve to the generic object component from the default plugin.
-    registerDefaultPlugin(TestBed.inject(XtResolverService));
-  });
-
-  it('should create', () => {
-    fixture = TestBed.createComponent(EditorComponent);
-    const context=new XtBaseContext('FULL_VIEW');
-    context.setDisplayValue("My Text to display");
-    fixture.componentRef.setInput('context', context);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  it('should show editor in form', () => {
-    const hostFixture = TestBed.createComponent(HostTestFormComponent);
-    hostFixture.componentRef.setInput('type', EditorComponent);
-    hostFixture.componentRef.setInput('formDescription', {
-      testText: 'My text to edit'
-    });
-    hostFixture.componentRef.setInput('controlName', 'testText');
-    const host = hostFixture.componentInstance;
-    expect(host).toBeTruthy();
-    hostFixture.detectChanges();
-
-    const componentDebug = hostFixture.debugElement.query(By.directive(EditorComponent));
-    component=componentDebug.componentInstance;
-    expect(component).toBeTruthy();
-  });
-
-});

package/projects/editor/src/lib/editor/editor.component.ts

@@ -1,202 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  effect,
-  ElementRef, inject,
-  input,
-  signal,
-  viewChild
-} from '@angular/core';
-import { updateFormGroupWithValue, XtContext, XtRenderComponent, XtResolverService, XtSimpleComponent } from 'xt-components';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { EditorState, NodeSelection, Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { MarkType, Node, NodeType, Schema } from 'prosemirror-model';
-import { defaultMarkdownParser, defaultMarkdownSerializer, schema } from 'prosemirror-markdown';
-import { basicSetup, canInsert, markActive, openPrompt, TextField } from '../prose-mirror/basic-setup';
-import { MarkdownPipe } from '../markdown/markdown-pipe';
-import { InlineMarkdownPipe } from '../markdown/inline-markdown-pipe';
-import { Tooltip } from 'primeng/tooltip';
-import { Dialog } from 'primeng/dialog';
-import { icons, MenuElement, MenuItem } from 'prosemirror-menu';
-import { type } from '@ngrx/signals';
-import { ButtonDirective } from 'primeng/button';
-import { toggleMark } from 'prosemirror-commands';
-
-@Component({
-  selector: 'xt-editor-editor',
-  imports: [
-    ReactiveFormsModule,
-    FormsModule,
-    MarkdownPipe, InlineMarkdownPipe, Tooltip, Dialog,
-    XtRenderComponent, ButtonDirective
-  ],
-  templateUrl: './editor.component.html',
-  styleUrl: './editor.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class EditorComponent extends XtSimpleComponent<any> implements AfterViewInit{
-  override context = input.required<XtContext<any>>();
-
-  protected resolver = inject(XtResolverService);
-
-  protected editor = viewChild<ElementRef<HTMLDivElement>>('editor');
-
-  protected sampleJson={ "type": "doc", "content": [ { "type": "heading", "attrs": { "level": 1 }, "content": [ { "type": "text", "text": "Example Text" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "s it working ?" } ] } ] };
-  protected emptyJson={ "type": "doc", "content": [ { "type": "paragraph"} ] };
-// Mix the nodes from prosemirror-schema-list into the basic schema to create a schema with list support.
-  /** mySchema: Schema = new Schema({
-    nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
-    marks: schema.spec.marks
-  });*/
-  // Creates the markdown schema
-  mySchema = schema;
-
-  protected view: EditorView|null=null;
-
-  /**
-   * Enable dialog box for image or link editing
-   * @protected
-   */
-  protected displayAttrDialog = signal<boolean>(false);
-  protected editAttrForm = new FormGroup({});
-  protected editAttrNodeType:NodeType|MarkType=(this.mySchema as any)['image'];
-  protected editAttrValueType: string = "editorImageType";
-
-  constructor() {
-    super();
-    const imageType=this.resolver.typeResolver.findType('image');
-    const linkType=this.resolver.typeResolver.findType('link');
-        // Register the type with the image type if supported
-    this.resolver.registerTypes({
-      editorImageType: {
-        children: {
-          src: (imageType==null)?"string":"image",
-          title: "string",
-          alt: "string"
-        }
-      },
-      editorLinkType: {
-        children: {
-          href: (linkType==null)?"string":"link",
-          title: "string"
-        }
-      }
-    });
-
-    updateFormGroupWithValue (this.editAttrForm, {}, 'editorImageType', this.resolver.typeResolver);
-
-    // Setup the editor once the divs are available
-    effect(() => {
-      const editor=this.editor();
-      if( (editor!=null) && (this.view==null)) {
-        const value=this.context().formControlValue();
-
-        const doc = this.toProseMirrorDoc (value);
-        this.view = new EditorView(editor.nativeElement, {
-          state: EditorState.create({
-            doc: doc,
-            plugins: basicSetup({schema: this.mySchema, menuContent: {
-                image: this.imageMenu(this.mySchema.nodes['image'], this),
-                link: this.linkMenu (this.mySchema.marks['link'], this)
-              }})
-          }),
-          dispatchTransaction: this.handleTransactions.bind(this)
-        })
-      }
-
-    })
-  }
-
-  ngAfterViewInit() {
-  /*  this.editor.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe((jsonDoc) => {
-      this.handleChange(jsonDoc);
-    });*/
-  }
-
-  protected imageMenu(imageNodeType:NodeType, that: EditorComponent):MenuElement {
-    return new MenuItem({
-      title: "Insert image",
-      label: "Image",
-      enable(state) {
-        return canInsert(state, imageNodeType)
-      },
-      run(state, _, view) {
-        let { from, to } = state.selection, attrs: {src?:string, title?:string, alt?:string} = { };
-        if (state.selection instanceof NodeSelection && state.selection.node.type == imageNodeType)
-          attrs = state.selection.node.attrs||{};
-        if (attrs.alt==null)
-          attrs.alt= state.doc.textBetween(from, to, " ");
-        that.editAttrValueType="editorImageType";
-        updateFormGroupWithValue(that.editAttrForm, attrs, that.editAttrValueType, that.resolver.typeResolver);
-        that.editAttrNodeType=imageNodeType;
-        that.displayAttrDialog.set(true);
-      }
-    });
-  }
-
-  protected updateAttrsFromForm() {
-    if (this.view != null) {
-      if (this.editAttrValueType == "editorImageType"){
-        this.view.dispatch(this.view.state.tr.replaceSelectionWith((this.mySchema.nodes['image']).createAndFill(this.editAttrForm.value)!))
-      } else if (this.editAttrValueType == "editorLinkType"){
-        toggleMark(this.editAttrNodeType as MarkType, this.editAttrForm.value)(this.view.state, this.view.dispatch)
-      }
-      this.view.focus()
-      }
-    this.displayAttrDialog.set(false);
-  }
-
-  protected linkMenu(linkMarkType:MarkType, that: EditorComponent):MenuElement {
-    return new MenuItem({
-      title: "Add or Remove link",
-      icon: icons["link"],
-      active(state) { return markActive(state, linkMarkType) },
-      enable(state) { return !state.selection.empty },
-      run(state, _, view) {
-        let { from, to } = state.selection, attrs: {href?:string, title?:string} = { };
-        if (markActive(state, linkMarkType)) {
-          toggleMark(linkMarkType)(state, view.dispatch)
-          return true
-        }
-        that.editAttrValueType="editorLinkType";
-        updateFormGroupWithValue(that.editAttrForm, attrs, that.editAttrValueType, that.resolver.typeResolver);
-        that.editAttrNodeType=linkMarkType;
-        that.displayAttrDialog.set(true);
-        return true;
-      }
-    });
-  }
-
-  protected handleTransactions(tr: Transaction): void {
-    if (this.view!=null) {
-      const state = this.view.state.apply(tr);
-      this.view.updateState(state);
-
-      if (tr.docChanged) {
-        const markdown = defaultMarkdownSerializer.serialize(state.doc);
-        this.context().setFormValue(markdown, true);
-      }
-    } else {
-      console.error("Editor: View transaction received while no view defined.",tr.doc.toJSON());
-    }
-  }
-
-
-  private toProseMirrorDoc(value: any): Node {
-    if (value == null) {
-      return this.mySchema.nodeFromJSON ( this.emptyJson);
-    }
-    if (typeof value === 'string') {
-      // This is a markdown text,
-      return defaultMarkdownParser.parse(value);
-    }
-    return this.mySchema.nodeFromJSON (value);
-  }
-
-  protected textJson (text:string){
-    return { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": text } ] } ] }
-  };
-
-}

package/projects/editor/src/lib/markdown/inline-markdown-pipe.spec.ts

@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { InlineMarkdownPipe } from './inline-markdown-pipe';
-
-describe('InlineMarkdownPipe', () => {
-  it('create an instance', () => {
-    const pipe = new InlineMarkdownPipe();
-    expect(pipe).toBeTruthy();
-  });
-
-  it('extract text from markdown', () => {
-    const pipe = new InlineMarkdownPipe();
-    const resp = pipe.transform("# Header\n\n**Simple** Text") as string;
-
-    expect(resp).toBe('Header Simple Text');
-  });
-
-  it('supports long markdown', () => {
-    const pipe = new InlineMarkdownPipe();
-    const resp = pipe.transform("# Header 1\n\n## Header 1.1\n\n**Simple** Text\n\n- List Item 1\n- List Item 2\n\n## Header 1.2\n\nVery long text that should be clipped.") as string;
-
-    expect(resp.indexOf('clipped')).toBe(-1);
-    expect(resp.indexOf('List Item 1')).not.toBe(-1);
-    expect(resp.endsWith('...')).toBeTruthy();
-  });
-});

package/projects/editor/src/lib/markdown/inline-markdown-pipe.ts

@@ -1,30 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'inlineMarkdown',
-})
-export class InlineMarkdownPipe implements PipeTransform {
-  transform(value: unknown, ...args: unknown[]): unknown {
-    if( typeof value === 'string' ) {
-      let text = value as string;
-      if (text.length>100)
-        text=text.substring(0,100); // For inline text, we don't want all the text, just the start
-      text = text.replace(/!\[[^\]]*\]\([^)]*\)/g, '');   // images
-      text = text.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1');// links -> visible text
-      text = text.replace(/^#{1,6}\s*/gm, '');            // headers
-      text = text.replace(/^\s*[-*+]\s+/gm, '');          // bullet lists
-      text = text.replace(/^\s*\d+[.)]\s+/gm, '');        // numbered lists
-      text = text.replace(/^\s*[-*]\s+/gm, '');           // bullets that were bold markers
-      text = text.replace(/\*\*([^*]*)\*\*/g, '$1');      // bold
-      text = text.replace(/\*([^*]*)\*/g, '$1');          // italic *
-      text = text.replace(/(?<!\w)_([^_\n]+)_(?!\w)/g, '$1');   // italic _text_
-      text = text.replace(/\s*\n\s*/g, ' ');              // newlines -> spaces
-      text = text.replace(/\s{2,}/g, ' ').trim();         // collapse
-      if (text.length>57) {
-        return text.substring(0,57)+'...';
-      }
-      return text;
-    }
-    return null;
-  }
-}

package/projects/editor/src/lib/markdown/markdown-pipe.spec.ts

@@ -1,29 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-import { MarkdownPipe } from './markdown-pipe';
-import { TestBed } from '@angular/core/testing';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
-import { provideZonelessChangeDetection } from '@angular/core';
-
-describe('MarkdownPipe', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      providers: [MarkdownPipe, provideNoopAnimations(), provideZonelessChangeDetection()]
-
-    })
-      .compileComponents();
-  });
-
-  it('create an instance', () => {
-    const pipe = TestBed.inject(MarkdownPipe);
-    expect(pipe).toBeTruthy();
-  });
-
-  it('Render correctly HTML', () => {
-    const pipe = TestBed.inject(MarkdownPipe);
-    const response = pipe.transform("# Header\n\nTest **Text**") as string;
-    expect(response.indexOf('<h1>')).not.toBe(-1);
-    expect(response.indexOf('Test')).not.toBe(-1);
-    expect(response.indexOf('<strong>')).not.toBe(-1);
-  });
-
-});

package/projects/editor/src/lib/markdown/markdown-pipe.ts

@@ -1,21 +0,0 @@
-import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
-import { marked } from 'marked';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-  name: 'markdown',
-})
-export class MarkdownPipe implements PipeTransform {
-  constructor(protected sanitizer: DomSanitizer) {
-  }
-  transform(value: unknown, ...args: unknown[]): unknown {
-    if( typeof value === 'string' ) {
-      const html= marked.parse(value.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,""),
-        {
-          async:false
-        });
-      return this.sanitizer.sanitize(SecurityContext.HTML, html);
-    }
-    return null;
-  }
-}