Skip to content

Commit

Permalink
feat: rewrited remaining types and updated some comment
Browse files Browse the repository at this point in the history
  • Loading branch information
GeekaN2 committed Feb 14, 2023
1 parent 55ac901 commit 98e1fd6
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 56 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2018 CodeX
Copyright (c) 2023 CodeX

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
14 changes: 7 additions & 7 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.ce-paragraph {
line-height: 1.6em;
outline: none;
line-height: 1.6em;
outline: none;
}

.ce-paragraph[data-placeholder]:empty::before{
.ce-paragraph[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: #707684;
font-weight: normal;
Expand All @@ -20,10 +20,10 @@
opacity: 0;
}

.ce-paragraph p:first-of-type{
margin-top: 0;
.ce-paragraph p:first-of-type {
margin-top: 0;
}

.ce-paragraph p:last-of-type{
margin-bottom: 0;
.ce-paragraph p:last-of-type {
margin-bottom: 0;
}
49 changes: 15 additions & 34 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import './index.css';

import { IconText } from '@codexteam/icons'
import { API, BlockTool, PasteEvent } from '@editorjs/editorjs';
import type { ParagraphToolConfig, ParagraphToolCSS, ParagraphToolData } from './types';
import type { ParagraphToolConfig, ParagraphToolCSS, ParagraphToolData, PasteConfig, Toolbox } from './types';

/**
* Base Paragraph Block for the Editor.js.
* Represents simple paragraph
*
* @author CodeX ([email protected])
* @copyright CodeX 2018
* @author CodeX <[email protected]>
* @copyright CodeX 2023
* @license The MIT License (MIT)
*/
export default class Paragraph implements BlockTool {
Expand Down Expand Up @@ -55,10 +55,9 @@ export default class Paragraph implements BlockTool {
/**
* Default placeholder for Paragraph Tool
*
* @return {string}
* @constructor
*/
static get DEFAULT_PLACEHOLDER() {
static get DEFAULT_PLACEHOLDER(): string {
return '';
}

Expand All @@ -84,17 +83,15 @@ export default class Paragraph implements BlockTool {
this.onKeyUp = this.onKeyUp.bind(this);
}

this.placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
this.placeholder = config.placeholder ?? Paragraph.DEFAULT_PLACEHOLDER;
this.element = this.drawView();
this.preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
this.preserveBlank = config.preserveBlank ?? false;
this.data = data;
}

/**
* Check if text content is empty and set empty string to inner html.
* We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
*
* @param e - key up event
*/
private onKeyUp(e: KeyboardEvent): void {
if (e.code !== 'Backspace' && e.code !== 'Delete') {
Expand All @@ -109,9 +106,7 @@ export default class Paragraph implements BlockTool {
}

/**
* Create Tool's view
*
* @return {HTMLElement}
* Create Tool's html view
*/
private drawView(): HTMLDivElement {
let div = document.createElement('div');
Expand Down Expand Up @@ -141,7 +136,7 @@ export default class Paragraph implements BlockTool {
* Method that specified how to merge two Text blocks.
* Called by Editor.js by backspace at the beginning of the Block
*
* @param data
* @param data - paragraph content
*/
public merge(data: ParagraphToolData) {
this.data = {
Expand Down Expand Up @@ -180,16 +175,14 @@ export default class Paragraph implements BlockTool {

/**
* On paste callback fired from Editor.
*
* @param {PasteEvent} event - event with pasted data
*/
onPaste(event: PasteEvent) {
if (!('data' in event.detail)) {
return;
}

this.data = {
text: (event.detail.data as HTMLElement).innerHTML,
text: (event.detail.data as HTMLElement).innerHTML,
};
}

Expand All @@ -216,17 +209,13 @@ export default class Paragraph implements BlockTool {

/**
* Returns true to notify the core that read-only mode is supported
*
* @return {boolean}
*/
static get isReadOnlySupported() {
static get isReadOnlySupported(): boolean {
return true;
}

/**
* Get current Tools`s data
*
* @returns Current data
*/
private get data(): ParagraphToolData {
this._data.text = this.element.innerHTML;
Expand All @@ -235,11 +224,7 @@ export default class Paragraph implements BlockTool {
}

/**
* Store data in plugin:
* - at the this._data property
* - at the HTML
*
* @param data — data to set
* Updates the internal state and state of the html element
*/
private set data(data: ParagraphToolData) {
this._data = data || {};
Expand All @@ -250,21 +235,17 @@ export default class Paragraph implements BlockTool {
/**
* Used by Editor paste handling API.
* Provides configuration to handle P tags.
*
* @returns {{tags: string[]}}
*/
static get pasteConfig() {
static get pasteConfig(): PasteConfig {
return {
tags: [ 'P' ]
tags: ['P']
};
}

/**
* Icon and title for displaying at the Toolbox
*
* @return {{icon: string, title: string}}
* Icon and title for displaying paragraph module at the Toolbox
*/
static get toolbox() {
static get toolbox(): Toolbox {
return {
icon: IconText,
title: 'Text'
Expand Down
43 changes: 29 additions & 14 deletions src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,41 @@ import { BlockToolData, ToolConfig } from '@editorjs/editorjs';
* Tool's input and output data format
*/
export interface ParagraphToolData extends BlockToolData {
/**
* Paragraph's content. Can include HTML tags: <a><b><i>
*/
text?: string;
/**
* Paragraph's content. Can include HTML tags: <a><b><i>
*/
text?: string;
}

export interface ParagraphToolConfig extends ToolConfig {
/**
* Placeholder for the empty paragraph
*/
placeholder?: string;
/**
* Placeholder for the empty paragraph
*/
placeholder?: string;

/**
* Whether or not to keep blank paragraphs when saving editor data
*/
preserveBlank?: boolean;
/**
* Whether or not to keep blank paragraphs when saving editor data
*/
preserveBlank?: boolean;
}

export interface ParagraphToolCSS {
block: string;
/**
* Block CSS class name
*/
block: string;

wrapper: 'ce-paragraph';
/**
* Wrapper CSS class name
*/
wrapper: string;
}

export interface PasteConfig {
tags: string[];
}

export interface Toolbox {
icon: string;
title: string;
}

0 comments on commit 98e1fd6

Please sign in to comment.