-
Notifications
You must be signed in to change notification settings - Fork 33
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
adding typescript support #47
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work
src/index.ts
Outdated
*/ | ||
import './polyfills.js'; | ||
interface ChecklistItem { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets export it
src/index.ts
Outdated
|
||
/** | ||
* @typedef {object} ChecklistData | ||
* @property {ChecklistItem[]} items - checklist elements | ||
*/ | ||
interface ChecklistData { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and this
package.json
Outdated
@@ -23,18 +23,23 @@ | |||
}, | |||
"scripts": { | |||
"dev": "vite", | |||
"build": "vite build" | |||
"build": "tsc && vite build" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
vite will automatically compile the .ts file, isn't it?
src/index.ts
Outdated
private _elements: { wrapper: HTMLElement | null; items: HTMLElement[] }; | ||
private readOnly: boolean; | ||
private api: any; | ||
private data: ChecklistData; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please, add docs for all interfaces and properties
src/index.ts
Outdated
* @typedef {object} ChecklistItem | ||
* @property {string} text - item label | ||
* @property {boolean} checked - is the item checked |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
move docs to each property, please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
still actual. Typedef is not needed anymore, use comments near properties instead
src/index.ts
Outdated
event.preventDefault(); | ||
|
||
const items = this.items; | ||
const currentItem = document.activeElement.closest(`.${this.CSS.item}`); | ||
const currentItem = document.activeElement?.closest(`.${this.CSS.item}`) as HTMLElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same
backspace(event) { | ||
const currentItem = event.target.closest(`.${this.CSS.item}`); | ||
backspace(event: KeyboardEvent): void { | ||
const currentItem = (event.target as HTMLElement).closest(`.${this.CSS.item}`) as HTMLElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
still actual
const currentIndex = this.items.indexOf(currentItem); | ||
const prevItem = this.items[currentIndex - 1]; | ||
|
||
if (!prevItem) { | ||
return; | ||
} | ||
|
||
const selection = window.getSelection(); | ||
const selection = window.getSelection() as Selection; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and here
src/utils.ts
Outdated
/** | ||
* Remove and return HTML content after carer position in current input | ||
* | ||
* @returns {DocumentFragment} extracted HTML nodes | ||
*/ | ||
export function extractContentAfterCaret() { | ||
const input = document.activeElement; | ||
const selection = window.getSelection(); | ||
* Remove and return HTML content after carer position in current input | ||
* | ||
* @returns {DocumentFragment} extracted HTML nodes | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bad "*" aligning
const input = document.activeElement as HTMLElement; | ||
const selection = window.getSelection() as Selection; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
unexpected casting
da57ad8
to
6d8a249
Compare
6d8a249
to
9c848ec
Compare
@neSpecc thanks for the review so far. I pushed some udpates. |
src/index.ts
Outdated
* @typedef {object} ChecklistItem | ||
* @property {string} text - item label | ||
* @property {boolean} checked - is the item checked |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
still actual. Typedef is not needed anymore, use comments near properties instead
@@ -65,15 +74,15 @@ export default class Checklist { | |||
* | |||
* @returns {{export: Function, import: Function}} | |||
*/ | |||
static get conversionConfig() { | |||
static get conversionConfig(): { export: (data: ChecklistData) => string; import: (str: string) => ChecklistData } { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
show me the error you got. I think, it should work fine. Maybe you need to make ChecklistData extend BlockToolData ?
src/index.ts
Outdated
if (isLastItem) { | ||
const currentItemText = getHTML(this.getItemInput(currentItem)); | ||
const isEmptyItem = currentItemText.length === 0; | ||
if (isLastItem && currentItem) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this change can break the logic. Its better to handle currentItem=undefined
case separately above
backspace(event) { | ||
const currentItem = event.target.closest(`.${this.CSS.item}`); | ||
backspace(event: KeyboardEvent): void { | ||
const currentItem = (event.target as HTMLElement).closest(`.${this.CSS.item}`) as HTMLElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
still actual
|
||
/** | ||
* Checklist Tool for the Editor.js 2.0 | ||
*/ | ||
export default class Checklist { | ||
/** @private HTML nodes */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@private
is not needed in typescript since you explicitly specify access modifier
@@ -1,6 +1,6 @@ | |||
{ | |||
"name": "@editorjs/checklist", | |||
"version": "1.6.0", | |||
"version": "1.7.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"version": "1.7.0", | |
"version": "1.6.1", |
*/ | ||
export interface ChecklistOptions { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets use the BlockToolConstructorOptions
the from editorjs package
@@ -53,7 +73,7 @@ export default class Checklist { | |||
* | |||
* @returns {{icon: string, title: string}} | |||
*/ | |||
static get toolbox() { | |||
static get toolbox(): { icon: string; title: string } { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
static get toolbox(): { icon: string; title: string } { | |
static get toolbox(): ToolboxConfig { |
api: EditorJS; | ||
/** @property {boolean} readOnly - read only mode flag */ | ||
readOnly: boolean; | ||
} | ||
|
||
/** | ||
* Checklist Tool for the Editor.js 2.0 | ||
*/ | ||
export default class Checklist { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export default class Checklist { | |
export default class Checklist implements BlockTool { |
checkListItem.classList.toggle(this.CSS.itemChecked); | ||
checkbox.classList.add(this.CSS.noHover); | ||
checkbox.addEventListener('mouseleave', () => this.removeSpecialHoverBehavior(checkbox), { once: true }); | ||
toggleCheckbox(target: HTMLElement | null, event: MouseEvent): void { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why target has been added?
const range = document.createRange(); | ||
const selection = window.getSelection(); | ||
const selection = window.getSelection() as Selection; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
casting is not expected here, it can lead errors since there can be no selection
Adding Typescript support to improve developement experience.
And generating types declarion during build, to be published and also to improve development experirce for the library users.