adding typescript support by arenac · Pull Request #47 · editor-js/checklist

arenac · 2024-06-10T19:53:13Z

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.

neSpecc

Nice work

neSpecc · 2024-06-12T11:03:49Z

src/index.ts

+ * @property {boolean} checked - is the item checked
 */
-import './polyfills.js';
+interface ChecklistItem {


lets export it

neSpecc · 2024-06-12T11:03:53Z

src/index.ts

 * @typedef {object} ChecklistData
 * @property {ChecklistItem[]} items - checklist elements
 */
+interface ChecklistData {


neSpecc · 2024-06-12T11:04:20Z

package.json

  "scripts": {
    "dev": "vite",
-    "build": "vite build"
+    "build": "tsc && vite build"


vite will automatically compile the .ts file, isn't it?

neSpecc · 2024-06-12T11:04:50Z

src/index.ts

+  private _elements: { wrapper: HTMLElement | null; items: HTMLElement[] };
+  private readOnly: boolean;
+  private api: any;
+  private data: ChecklistData;


please, add docs for all interfaces and properties

neSpecc · 2024-06-12T11:05:04Z

src/index.ts

+ * @typedef {object} ChecklistItem
+ * @property {string} text - item label
+ * @property {boolean} checked - is the item checked


move docs to each property, please

still actual. Typedef is not needed anymore, use comments near properties instead

neSpecc · 2024-06-12T11:07:45Z

src/index.ts


    const items = this.items;
-    const currentItem = document.activeElement.closest(`.${this.CSS.item}`);
+    const currentItem = document.activeElement?.closest(`.${this.CSS.item}`) as HTMLElement;


neSpecc · 2024-06-12T11:08:14Z

src/index.ts

-  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;


still actual

neSpecc · 2024-06-12T11:08:19Z

src/index.ts

    }

-    const selection = window.getSelection();
+    const selection = window.getSelection() as Selection;


neSpecc · 2024-06-12T11:08:52Z

src/utils.ts

 /**
- * 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
+*/


bad "*" aligning

neSpecc · 2024-06-12T11:09:04Z

src/utils.ts

+  const input = document.activeElement as HTMLElement;
+  const selection = window.getSelection() as Selection;


unexpected casting

arenac · 2024-06-17T20:35:40Z

@neSpecc thanks for the review so far. I pushed some udpates.

neSpecc · 2024-06-17T20:43:02Z

src/index.ts

+ * @typedef {object} ChecklistItem
+ * @property {string} text - item label
+ * @property {boolean} checked - is the item checked


still actual. Typedef is not needed anymore, use comments near properties instead

neSpecc · 2024-06-17T20:46:18Z

src/index.ts

   * @returns {{export: Function, import: Function}}
   */
-  static get conversionConfig() {
+  static get conversionConfig(): { export: (data: ChecklistData) => string; import: (str: string) => ChecklistData } {


show me the error you got. I think, it should work fine. Maybe you need to make ChecklistData extend BlockToolData ?

neSpecc · 2024-06-17T20:47:23Z

src/index.ts

-    if (isLastItem) {
-      const currentItemText = getHTML(this.getItemInput(currentItem));
-      const isEmptyItem = currentItemText.length === 0;
+    if (isLastItem && currentItem) {


this change can break the logic. Its better to handle currentItem=undefined case separately above

neSpecc · 2024-06-17T20:47:43Z

src/index.ts

-  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;


still actual

neSpecc · 2024-06-19T20:21:02Z

src/index.ts

 * Checklist Tool for the Editor.js 2.0
 */
 export default class Checklist {
+  /** @private HTML nodes */


@private is not needed in typescript since you explicitly specify access modifier

neSpecc · 2024-06-19T20:21:24Z

package.json

 {
  "name": "@editorjs/checklist",
-  "version": "1.6.0",
+  "version": "1.7.0",


Suggested change

"version": "1.7.0",

"version": "1.6.1",

neSpecc · 2024-06-19T20:23:31Z

src/index.ts

- * @property {boolean} checked - is the item checked
+ * CheckList constructor options
 */
+export interface ChecklistOptions {


lets use the BlockToolConstructorOptions the from editorjs package

neSpecc · 2024-06-19T20:33:47Z

src/index.ts

   * @returns {{icon: string, title: string}}
   */
-  static get toolbox() {
+  static get toolbox(): { icon: string; title: string } {


Suggested change

static get toolbox(): { icon: string; title: string } {

static get toolbox(): ToolboxConfig {

neSpecc · 2024-06-19T20:34:13Z

src/index.ts

 /**
 * Checklist Tool for the Editor.js 2.0
 */
 export default class Checklist {


Suggested change

export default class Checklist {

export default class Checklist implements BlockTool {

neSpecc · 2024-06-19T20:37:32Z

src/index.ts

-      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 {


why target has been added?

neSpecc · 2024-06-19T20:39:42Z

src/utils.ts

+export function moveCaret(element: HTMLElement, toStart: boolean = false, offset?: number): void {
  const range = document.createRange();
-  const selection = window.getSelection();
+  const selection = window.getSelection() as Selection;


casting is not expected here, it can lead errors since there can be no selection

adding typescript support

c1cb147

neSpecc reviewed Jun 12, 2024

View reviewed changes

arenac force-pushed the typescript-support branch 2 times, most recently from da57ad8 to 6d8a249 Compare June 17, 2024 20:31

PR review

9c848ec

arenac force-pushed the typescript-support branch from 6d8a249 to 9c848ec Compare June 17, 2024 20:33

neSpecc reviewed Jun 17, 2024

View reviewed changes

more review update

fc0f803

neSpecc requested changes Jun 19, 2024

View reviewed changes

		const input = document.activeElement as HTMLElement;
		const selection = window.getSelection() as Selection;

	static get toolbox(): { icon: string; title: string } {
	static get toolbox(): ToolboxConfig {

	export default class Checklist {
	export default class Checklist implements BlockTool {

Conversation

arenac commented Jun 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

neSpecc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arenac commented Jun 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

arenac commented Jun 10, 2024 •

edited

Loading