Editor Abstract Class

[ashwinkjoseph]

Task Description
Set up an abstract class for the editor which should define the methods and the APIs for an editor in TPF learning section's tutorials.
In the context of TPF, an editor should have the following behaviour:

• Accept an HTML Div Element and mount to it while initializing
• Accept custom styles when initializing and should also allow for customization after initialization.
• Should store the content in the editor in memory
• Should have the option to persist the content of the editor in localStorage
• Should allow external classes to retrieve the content as a formatted string
• Should have a method for minimizing
• Should have a method for closing
• Accept callback function which will be called with appropriate status when minimizing or closing

Acceptance criteria for task

• Check that the implementations of the class have a private method named mount
• Check that the implementations of the class have a public method named style.
• Check that the implementations of the class have a public method named getContent
• Check that the implementations of the class have a public method named persistContent
• Check that the implementations of the class have a public method method minimize
• Check that the implementations of the class have a public method named close

Additional context
Shiva Raju has a very good implementation for the abstract class in Javascript. Refer to this if you are unsure about how to do it.

class PFEditorAbstractClass {
    constructor() {
        if (this.constructor === PFEditorAbstractClass) {
            throw new TypeError('Abstract class "PFEditorAbstractClass" cannot be instantiated directly.');
        }
		
		//abstract method for mounting an Editor into a DOM Elemement must be implemented
		if(!typeof this.mountEditorToDOMElement === 'function'){
			throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
		}

                 if (this.content === undefined) {
                         throw new TypeError('Classes implementing PFEditorAbstractClass must have the content as an attribute')
                 }
		
		//abstract method for storing one or more variables in local storage must be implemented
		if(!this.saveContent === 'function'){
			throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
		}]
		
		//abstract method for retrieving one or more variables from local storage must be implemented
		if(!typeof this. this.getContent === 'function'){
			throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
		}
		
		//abstract method for closing the Editor after necessary cleanup operations must be implemented
		if(!typeof this.closeEditor === 'function'){
			throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
		}
		
		//abstract method for minimizing the Editor after necessary saving operations must be implemented
		if(!typeof this.minimizeEditor === 'function'){
			throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
		}
    }
  }

[ashwinkjoseph]

shiva and emily are working on this

[shivaraju7]

An abstract class by definition cannot have a private field or private method.

Here's the definition of the abstract class:

class TPFEditorAbstractClass {
constructor() {
if (this.constructor === PFEditorAbstractClass) {
throw new TypeError('Abstract class "PFEditorAbstractClass" cannot be instantiated directly.');
}

// Check that the implementations of the class have a public method named mount
// Check that the implementations of the class have a public method named style.
// Check that the implementations of the class have a public method named getContent
// Check that the implementations of the class have a public method named persistContent
// Check that the implementations of the class have a public method method minimize
// Check that the implementations of the class have a public method named close
if(this.mount === undefined
|| this.style === undefined
|| this.getContent === undefined
|| this.persistContent === undefined
|| this.minimize === undefined
|| this.close === undefined
){
throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
}

}

}

[shivaraju7]

ashwin,

Please review and let me know where to place the abstract class in the project structure.

[ashwinkjoseph]

An abstract class by definition cannot have a private field or private method.

Here's the definition of the abstract class:

class TPFEditorAbstractClass {
constructor() {
if (this.constructor === PFEditorAbstractClass) {
throw new TypeError('Abstract class "PFEditorAbstractClass" cannot be instantiated directly.');
}

// Check that the implementations of the class have a public method named mount
// Check that the implementations of the class have a public method named style.
// Check that the implementations of the class have a public method named getContent
// Check that the implementations of the class have a public method named persistContent
// Check that the implementations of the class have a public method method minimize
// Check that the implementations of the class have a public method named close
if(this.mount === undefined
|| this.style === undefined
|| this.getContent === undefined
|| this.persistContent === undefined
|| this.minimize === undefined
|| this.close === undefined
){
throw new TypeError('Classes implementing PFEditorAbstractClass class must implement all its methods');
}

}

}

Hey @shivaraju7 This looks perfect, exactly what we need.

Yes, don't worry about the Private and public issue. That was part of the spec but as we are implementing in JS, we don't need to check that. It was written in the spec just in case we do use Typescript in the future.

As for where you can add them, add them to this directory - https://github.com/The-Programming-Foundation/learningcodesnippets/tree/master/tools.

Sorry for the delayed response.

[yu-emily]

There is a small typo in the constructor:
class TPFEditorAbstractClass {
constructor() {
if (this.constructor === TPFEditorAbstractClass) {
throw new TypeError('Abstract class "PFEditorAbstractClass" cannot be instantiated directly.');
}

Also, I was wondering if we should separate the error messages for the methods like this:

    // Check that the implementations of the class have a public method named mount
    if(this.mount === undefined){
        throw new TypeError('A method called mount must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named style.
    if(this.style === undefined){
        throw new TypeError('A method called style must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named getContent
    if(this.getContent === undefined){
        throw new TypeError('A method called getContent must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named persistContent
    if(this.persistContent === undefined){
        throw new TypeError('A method called persistContent must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method method minimize
    if(this.minimize === undefined){
        throw new TypeError('A method called minimize must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named close
    if(this.close === undefined){
        throw new TypeError('A method called close must be implemented for classes implementing PFEditorAbstractClass');
    }

[ashwinkjoseph]

There is a small typo in the constructor:
class TPFEditorAbstractClass {
constructor() {
if (this.constructor === TPFEditorAbstractClass) {
throw new TypeError('Abstract class "PFEditorAbstractClass" cannot be instantiated directly.');
}

Also, I was wondering if we should separate the error messages for the methods like this:

    // Check that the implementations of the class have a public method named mount
    if(this.mount === undefined){
        throw new TypeError('A method called mount must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named style.
    if(this.style === undefined){
        throw new TypeError('A method called style must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named getContent
    if(this.getContent === undefined){
        throw new TypeError('A method called getContent must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named persistContent
    if(this.persistContent === undefined){
        throw new TypeError('A method called persistContent must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method method minimize
    if(this.minimize === undefined){
        throw new TypeError('A method called minimize must be implemented for classes implementing PFEditorAbstractClass');
    }
    // Check that the implementations of the class have a public method named close
    if(this.close === undefined){
        throw new TypeError('A method called close must be implemented for classes implementing PFEditorAbstractClass');
    }

Hey @yu-emily I think this is great. could you make a PR for this. I recommend having such discussions over a PR as then once the solution is agreed upon, we can merge it in