Troubleshooting error in Angular 5 with QuillJS: "Parchment issue - Quill unable to

Question

Troubleshooting error in Angular 5 with QuillJS: "Parchment issue - Quill unable to

I've been working with the primeng editor and everything seems fine with the editor itself. However, I've spent the last two days struggling to extend a standard block for a custom tag. The official documentation suggests using the quilljs API for additional features.

Despite checking all APIs and GitHub issues, it appears that I'm on the right track but I keep encountering this pesky error:

ERROR Error: [Parchment] Unable to create marker blot
at new ParchmentError (scripts.bundle.js:148)
at Object.create (scripts.bundle.js:178)
at BlockBlot.insertAt (scripts.bundle.js:7323)
at Block.insertAt (scripts.bundle.js:855)
at Scroll.ContainerBlot.insertAt (scripts.bundle.js:3404)
at ScrollBlot.insertAt (scripts.bundle.js:7060)
at Scroll.insertAt (scripts.bundle.js:4252)
at Editor.insertEmbed (scripts.bundle.js:2606)
at scripts.bundle.js:1379
at Quill.modify (scripts.bundle.js:1610)

My goal is to add a custom tag with non-editable content inside. Here's a snippet of my code:

...
import {Editor} from 'primeng/editor';

import * as Quill from 'quill';
import * as Parchment from 'parchment';
const Block = Quill.import('blots/block/embed');
class BlockEmbed extends Parchment.default.Embed {}
BlockEmbed.prototype = Block.prototype;

export class Variable extends BlockEmbed {

  static blotName = 'marker';
  static tagName = 'marker';

  static create(value: any) {
    console.log(value);
    const node = (super.create(value) as any);
    node.innerHTML = '<span contenteditable=false>' + value + '</span>';
    node.setAttribute('contenteditable', false);
    return node;
  }

}

Variable.blotName = 'marker';
Variable.tagName = 'marker';

Quill.register('formats/marker', Variable);

@Component({
  selector: 'manager',
  templateUrl: './manager.component.html',
  styleUrls: ['./manager.component.css']
})

export class ManagerComponent implements OnInit, AfterViewInit {

   private quill: any;
  @ViewChild(Editor) editorComponent: Editor;

  ngOnInit() {}

 // based on primeng github issue this how we can get references to quill 
  ngAfterViewInit() {
    this.quill = this.editorComponent.quill;
  }

 variableSelected(event) {
    // grab string variable from event 
    this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value);
  }

}

According to similar topics on the quill GitHub, my code should be functioning correctly:

topic 1

topic 2

topic 3

topic 4

If anyone could assist me in pinpointing what I might be overlooking or where my issue lies, I would greatly appreciate it. Thanks in advance.

angular typescript quill

Answer 1

Answer №1

I managed to resolve my issue using the following method:

...
declare var Quill: any;
const BlockEmbed = Quill.import('blots/embed');

export class CustomBlock extends BlockEmbed {

  static create(value: any) {
    const node = super.create(typeof value === 'object' ? value.text : value);
    node.innerText = typeof value === 'object' ? value.text : value;
    node.setAttribute('contenteditable', false);
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('contenteditable'),
      text: node.innerText
    };
  }

}

CustomBlock['blotName'] = 'marker';
CustomBlock['className'] = 'marker';
CustomBlock['tagName'] = 'span';

Quill.register('formats/marker', CustomBlock);

export class ManagerComponent implements OnInit, AfterViewInit {

  private quill: any;

  @ViewChild('stepper') stepper;
  @ViewChild(Editor) editorComponent: Editor;

...

variableSelected(event) {
    this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value, 'user');
    this.quill.update('user'); 
  }

Answer 2

I managed to resolve my issue using the following method:

...
declare var Quill: any;
const BlockEmbed = Quill.import('blots/embed');

export class CustomBlock extends BlockEmbed {

  static create(value: any) {
    const node = super.create(typeof value === 'object' ? value.text : value);
    node.innerText = typeof value === 'object' ? value.text : value;
    node.setAttribute('contenteditable', false);
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('contenteditable'),
      text: node.innerText
    };
  }

}

CustomBlock['blotName'] = 'marker';
CustomBlock['className'] = 'marker';
CustomBlock['tagName'] = 'span';

Quill.register('formats/marker', CustomBlock);

export class ManagerComponent implements OnInit, AfterViewInit {

  private quill: any;

  @ViewChild('stepper') stepper;
  @ViewChild(Editor) editorComponent: Editor;

...

variableSelected(event) {
    this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value, 'user');
    this.quill.update('user'); 
  }

Answer 3

Answer №2

Here is how I've been successfully using it:

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;

const BlockEmbed = Quill.import('blots/block/embed');

Answer 4

Here is how I've been successfully using it:

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;

const BlockEmbed = Quill.import('blots/block/embed');

Answer 5

Answer №3

I encountered a similar issue while using ngx-quill. It seems that the root of the problem lies in the component being declared within a webpack-hidden scope, preventing us from accessing the necessary Quill instance to add extra components. After seeking assistance from KillerCodeMonkey on https://github.com/KillerCodeMonkey/ngx-quill, I found a resolution. By removing any other quill.js imports (from package.json or .angular-cli.json), the code should function correctly on angular/core 5.2.0:

import * as Quill from 'quill'; 
import Parchment from "parchment";

console.log(Quill);
const QuillBlockEmbed = (Quill as any).import('blots/block/embed');

class BlockEmbed extends Parchment.Embed {};
BlockEmbed.prototype = QuillBlockEmbed.prototype;

class MyBlot extends BlockEmbed {
    static create(value) {
        let node: Element = super.create(value) as Element;
        if (typeof value === 'object') {
            node.classList.add("my-class");
        }
        return node;
    }
...
}

MyBlot.blotName = 'boltTwo';
MyBlot.tagName = 'img';

(Quill as any).register({ 'blots/myblot':MyBlot});

Answer 6

I encountered a similar issue while using ngx-quill. It seems that the root of the problem lies in the component being declared within a webpack-hidden scope, preventing us from accessing the necessary Quill instance to add extra components. After seeking assistance from KillerCodeMonkey on https://github.com/KillerCodeMonkey/ngx-quill, I found a resolution. By removing any other quill.js imports (from package.json or .angular-cli.json), the code should function correctly on angular/core 5.2.0:

import * as Quill from 'quill'; 
import Parchment from "parchment";

console.log(Quill);
const QuillBlockEmbed = (Quill as any).import('blots/block/embed');

class BlockEmbed extends Parchment.Embed {};
BlockEmbed.prototype = QuillBlockEmbed.prototype;

class MyBlot extends BlockEmbed {
    static create(value) {
        let node: Element = super.create(value) as Element;
        if (typeof value === 'object') {
            node.classList.add("my-class");
        }
        return node;
    }
...
}

MyBlot.blotName = 'boltTwo';
MyBlot.tagName = 'img';

(Quill as any).register({ 'blots/myblot':MyBlot});

Troubleshooting error in Angular 5 with QuillJS: "Parchment issue - Quill unable to

Answer №1

Answer №2

Answer №3

Similar questions

Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

The ListItemButton's onclick event does not trigger on the initial click when utilizing a custom component as its children

After successfully logging in with the angular2-token package, the Rails 4 API is responding with a 401 unauthorized error

Using TypeScript with GraphQL Fetch: A Guide

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

Utilizing Typescript for Axios Response

"Linking a Next.js application with Azure's Application Insights for advanced insights

Rxjs: Making recursive HTTP requests with a condition-based approach

When converting to a React Functional Component using Typescript, an error occurred: The property 'forceUpdateHandler' could not be found on the type 'MutableRefObject<Spinner | null>'

What is the way to send custom properties to TypeScript in combination with StyledComponents?

Strange activities observed during the management of state in react hooks, where the splice() function ends up eliminating the

Provider in Angular2 that relies on multiple other Providers

Incorporate a Google map into a table row by extending it across all table data cells

``I am facing an issue with Angular CLI where it is not compiling

Warning issued by Angular 7 indicating the usage of the routerLink directive and advising against navigation triggered outside the Angular zone

Exploring the depths of nested JSON with Angular2

Preventing data binding for a specific variable in Angular 2: Tips and tricks

A guide on integrating mat-select into Angular input fields

Restricting access to tabPanel in tabView when a tab is clicked using Angular

Establishing a custom variable within a recurring component in a form for the purpose of validation