From 38890ee010a0bc099554f926f661fc4494cdc2cf Mon Sep 17 00:00:00 2001 From: AMRIK Date: Mon, 17 Feb 2025 03:10:16 +0530 Subject: [PATCH 1/3] Migrate to TypeScript and update project configuration --- package.json | 12 +- src/{index.js => index.ts} | 229 +++++++++++++------ src/types.ts | 20 ++ tsconfig.json | 17 ++ vite.config.js | 14 +- yarn.lock | 450 ++++++++++++++++++++++++++++++++++--- 6 files changed, 630 insertions(+), 112 deletions(-) rename src/{index.js => index.ts} (54%) create mode 100644 src/types.ts create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 0962db6..7f4d708 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ ], "main": "./dist/simple-image.umd.js", "module": "./dist/simple-image.mjs", + "types": "./dist/index.d.ts", "exports": { ".": { "import": "./dist/simple-image.mjs", @@ -24,17 +25,24 @@ }, "scripts": { "dev": "vite", - "build": "vite build" + "build": "tsc && vite build" }, "author": { "name": "CodeX", "email": "team@codex.so" }, "devDependencies": { + "@editorjs/editorjs": "^2.30.8", + "@types/dompurify": "^3.0.5", + "@types/node": "^22.13.4", + "@vitejs/plugin-react": "^4.3.4", + "typescript": "^5.7.3", "vite": "^4.5.0", "vite-plugin-css-injected-by-js": "^3.3.0" }, "dependencies": { - "@codexteam/icons": "^0.0.6" + "@codexteam/icons": "^0.3.0", + "codex-notifier": "^1.1.2", + "codex-tooltip": "^1.0.5" } } diff --git a/src/index.js b/src/index.ts similarity index 54% rename from src/index.js rename to src/index.ts index e53ffa7..b2d080f 100644 --- a/src/index.js +++ b/src/index.ts @@ -1,9 +1,16 @@ /** * Build styles */ -import './index.css'; +import "./index.css"; -import { IconAddBorder, IconStretch, IconAddBackground } from '@codexteam/icons'; +import { + IconAddBorder, + IconStretch, + IconAddBackground, +} from "@codexteam/icons"; +import { SimpleImageData, SimpleImageConfig } from "./types"; +import { PasteEvent } from "@editorjs/editorjs"; +import type { TagPasteEventDetail } from "./types"; /** * SimpleImage Tool for the Editor.js @@ -17,7 +24,48 @@ import { IconAddBorder, IconStretch, IconAddBackground } from '@codexteam/icons' * @property {boolean} withBackground - should image be rendered with background * @property {boolean} stretched - should image be stretched to full width of container */ + +// Add these interfaces at the top of the file +interface HTMLPasteEventDetail { + type: "html"; + data: HTMLElement; +} + +interface FilePasteEventDetail { + type: "file"; + file: File; +} + +interface PatternPasteEventDetail { + type: "pattern"; + data: string; +} + export default class SimpleImage { + private api: any; + private readOnly: boolean; + private blockIndex: number; + private CSS: { + baseClass: string; + loading: string; + input: string; + wrapper: string; + imageHolder: string; + caption: string; + }; + private nodes: { + wrapper: HTMLElement | null; + imageHolder: HTMLElement | null; + image: HTMLImageElement | null; + caption: HTMLElement | null; + }; + private _data!: SimpleImageData; + private tunes: Array<{ + name: keyof SimpleImageData; + label: string; + icon: string; + }>; + /** * Render plugin`s main Element and fill it with saved data * @@ -27,7 +75,12 @@ export default class SimpleImage { * api - Editor.js API * readOnly - read-only mode flag */ - constructor({ data, config, api, readOnly }) { + constructor({ + data = {} as Partial, + config, + api, + readOnly, + }: SimpleImageConfig) { /** * Editor.js API */ @@ -55,9 +108,9 @@ export default class SimpleImage { /** * Tool's classes */ - wrapper: 'cdx-simple-image', - imageHolder: 'cdx-simple-image__picture', - caption: 'cdx-simple-image__caption', + wrapper: "cdx-simple-image", + imageHolder: "cdx-simple-image__picture", + caption: "cdx-simple-image__caption", }; /** @@ -74,11 +127,11 @@ export default class SimpleImage { * Tool's initial data */ this.data = { - url: data.url || '', - caption: data.caption || '', - withBorder: data.withBorder !== undefined ? data.withBorder : false, - withBackground: data.withBackground !== undefined ? data.withBackground : false, - stretched: data.stretched !== undefined ? data.stretched : false, + url: data?.url || "", + caption: data?.caption || "", + withBorder: data?.withBorder ?? false, + withBackground: data?.withBackground ?? false, + stretched: data?.stretched ?? false, }; /** @@ -86,18 +139,18 @@ export default class SimpleImage { */ this.tunes = [ { - name: 'withBorder', - label: 'Add Border', + name: "withBorder", + label: "Add Border", icon: IconAddBorder, }, { - name: 'stretched', - label: 'Stretch Image', + name: "stretched", + label: "Stretch Image", icon: IconStretch, }, { - name: 'withBackground', - label: 'Add Background', + name: "withBackground", + label: "Add Background", icon: IconAddBackground, }, ]; @@ -111,17 +164,17 @@ export default class SimpleImage { * * @public */ - render() { - const wrapper = this._make('div', [this.CSS.baseClass, this.CSS.wrapper]), - loader = this._make('div', this.CSS.loading), - imageHolder = this._make('div', this.CSS.imageHolder), - image = this._make('img'), - caption = this._make('div', [this.CSS.input, this.CSS.caption], { - contentEditable: !this.readOnly, - innerHTML: this.data.caption || '', - }); - - caption.dataset.placeholder = 'Enter a caption'; + render(): HTMLElement { + const wrapper = this._make("div", [this.CSS.baseClass, this.CSS.wrapper]), + loader = this._make("div", this.CSS.loading), + imageHolder = this._make("div", this.CSS.imageHolder), + image = this._make("img", null) as HTMLImageElement, + caption = this._make("div", [this.CSS.input, this.CSS.caption], { + contentEditable: !this.readOnly, + innerHTML: this.data.caption || "", + }); + + caption.dataset.placeholder = "Enter a caption"; wrapper.appendChild(loader); @@ -140,7 +193,7 @@ export default class SimpleImage { image.onerror = (e) => { // @todo use api.Notifies.show() to show error notification - console.log('Failed to load an image', e); + console.log("Failed to load an image", e); }; this.nodes.imageHolder = imageHolder; @@ -156,17 +209,17 @@ export default class SimpleImage { * @param {Element} blockContent - Tool's wrapper * @returns {SimpleImageData} */ - save(blockContent) { - const image = blockContent.querySelector('img'), - caption = blockContent.querySelector('.' + this.CSS.input); + save(blockContent: HTMLElement): SimpleImageData { + const image = blockContent.querySelector("img"), + caption = blockContent.querySelector("." + this.CSS.input); if (!image) { return this.data; } return Object.assign(this.data, { - url: image.src, - caption: caption.innerHTML, + url: image?.src || "", + caption: caption?.innerHTML || "", }); } @@ -201,16 +254,19 @@ export default class SimpleImage { * @param {File} file * @returns {Promise} */ - onDropHandler(file) { + onDropHandler(file: File): Promise { const reader = new FileReader(); reader.readAsDataURL(file); - return new Promise(resolve => { + return new Promise((resolve) => { reader.onload = (event) => { resolve({ - url: event.target.result, + url: event?.target?.result as string, caption: file.name, + withBorder: false, + withBackground: false, + stretched: false, }); }; }); @@ -221,34 +277,38 @@ export default class SimpleImage { * * @param {PasteEvent} event - event with pasted config */ - onPaste(event) { + onPaste(event: PasteEvent) { switch (event.type) { - case 'tag': { - const img = event.detail.data; - + case "tag": { + const img = (event.detail as TagPasteEventDetail) + .data as HTMLImageElement; this.data = { - url: img.src, + url: img?.src || "", + caption: "", + withBorder: false, + withBackground: false, + stretched: false, }; break; } - case 'pattern': { - const { data: text } = event.detail; - + case "pattern": { + const detail = event.detail as unknown as PatternPasteEventDetail; this.data = { - url: text, + url: detail.data, + caption: "", + withBorder: false, + withBackground: false, + stretched: false, }; break; } - case 'file': { - const { file } = event.detail; - - this.onDropHandler(file) - .then(data => { - this.data = data; - }); - + case "file": { + const detail = event.detail as FilePasteEventDetail; + this.onDropHandler(detail.file).then((data) => { + this.data = data; + }); break; } } @@ -259,7 +319,7 @@ export default class SimpleImage { * * @returns {SimpleImageData} */ - get data() { + get data(): SimpleImageData { return this._data; } @@ -268,7 +328,7 @@ export default class SimpleImage { * * @param {SimpleImageData} data */ - set data(data) { + set data(data: SimpleImageData) { this._data = Object.assign({}, this.data, data); if (this.nodes.image) { @@ -297,7 +357,7 @@ export default class SimpleImage { }, ], files: { - mimeTypes: [ 'image/*' ], + mimeTypes: ["image/*"], }, }; } @@ -307,15 +367,25 @@ export default class SimpleImage { * * @returns {Array} */ - renderSettings() { - return this.tunes.map(tune => ({ + renderSettings(): Array<{ + name: keyof SimpleImageData; + label: string; + icon: string; + toggle: boolean; + onActivate: () => void; + isActive: boolean; + }> { + return this.tunes.map((tune) => ({ ...tune, label: this.api.i18n.t(tune.label), toggle: true, - onActivate: () => this._toggleTune(tune.name), + onActivate: () => + this._toggleTune( + tune.name as "withBorder" | "withBackground" | "stretched" + ), isActive: !!this.data[tune.name], - })) - }; + })); + } /** * Helper for making Elements with attributes @@ -325,7 +395,11 @@ export default class SimpleImage { * @param {object} attributes - any attributes * @returns {Element} */ - _make(tagName, classNames = null, attributes = {}) { + _make( + tagName: string, + classNames: Array | string | null, + attributes: Record = {} + ): HTMLElement { const el = document.createElement(tagName); if (Array.isArray(classNames)) { @@ -335,7 +409,13 @@ export default class SimpleImage { } for (const attrName in attributes) { - el[attrName] = attributes[attrName]; + if (attrName === "contentEditable") { + el.contentEditable = attributes[attrName]; + } else if (attrName === "innerHTML") { + el.innerHTML = attributes[attrName]; + } else { + el.setAttribute(attrName, attributes[attrName]); + } } return el; @@ -347,9 +427,11 @@ export default class SimpleImage { * @private * @param tune */ - _toggleTune(tune) { - this.data[tune] = !this.data[tune]; - this._acceptTuneView(); + _toggleTune(tune: "withBorder" | "withBackground" | "stretched") { + if (typeof this.data[tune] === "boolean") { + this.data[tune] = !this.data[tune]; + this._acceptTuneView(); + } } /** @@ -358,10 +440,17 @@ export default class SimpleImage { * @private */ _acceptTuneView() { - this.tunes.forEach(tune => { - this.nodes.imageHolder.classList.toggle(this.CSS.imageHolder + '--' + tune.name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), !!this.data[tune.name]); + if (!this.nodes.imageHolder) return; + + this.tunes.forEach((tune) => { + this.nodes.imageHolder?.classList.toggle( + this.CSS.imageHolder + + "--" + + tune.name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), + !!this.data[tune.name] + ); - if (tune.name === 'stretched') { + if (tune.name === "stretched") { this.api.blocks.stretchBlock(this.blockIndex, !!this.data.stretched); } }); diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..af41741 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,20 @@ +import type { API } from "@editorjs/editorjs"; + +export interface SimpleImageData { + url: string; + caption: string; + withBorder: boolean; + withBackground: boolean; + stretched: boolean; +} + +export interface SimpleImageConfig { + data?: Partial; + config?: any; + api: any; + readOnly: boolean; +} + +export interface TagPasteEventDetail { + data: HTMLElement; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..92cce2e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "lib": ["ESNext", "DOM"], + "outDir": "dist", + "declaration": true + }, + "include": ["src"], + "exclude": ["node_modules"] +} diff --git a/vite.config.js b/vite.config.js index 46d2101..c7c4b95 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,17 +1,17 @@ -import path from "path"; -import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; -import * as pkg from "./package.json"; +import path from 'path'; +import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; +import * as pkg from './package.json'; -const NODE_ENV = process.argv.mode || "development"; +const NODE_ENV = process.argv.mode || 'development'; const VERSION = pkg.version; export default { build: { copyPublicDir: false, lib: { - entry: path.resolve(__dirname, "src", "index.js"), - name: "SimpleImage", - fileName: "simple-image", + entry: path.resolve(__dirname, 'src', 'index.ts'), + name: 'SimpleImage', + fileName: 'simple-image', }, }, define: { diff --git a/yarn.lock b/yarn.lock index c0a51d7..e056d8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,9 +2,176 @@ # yarn lockfile v1 -"@codexteam/icons@^0.0.6": - version "0.0.6" - resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.6.tgz#5553ada48dddf5940851ccc142cfe17835c36ad3" +"@ampproject/remapping@^2.2.0": + version "2.3.0" + resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz" + integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw== + dependencies: + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.24" + +"@babel/code-frame@^7.26.2": + version "7.26.2" + resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz" + integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== + dependencies: + "@babel/helper-validator-identifier" "^7.25.9" + js-tokens "^4.0.0" + picocolors "^1.0.0" + +"@babel/compat-data@^7.26.5": + version "7.26.8" + resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz" + integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ== + +"@babel/core@^7.26.0": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.9.tgz" + integrity sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.26.2" + "@babel/generator" "^7.26.9" + "@babel/helper-compilation-targets" "^7.26.5" + "@babel/helper-module-transforms" "^7.26.0" + "@babel/helpers" "^7.26.9" + "@babel/parser" "^7.26.9" + "@babel/template" "^7.26.9" + "@babel/traverse" "^7.26.9" + "@babel/types" "^7.26.9" + convert-source-map "^2.0.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + +"@babel/generator@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.26.9.tgz" + integrity sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg== + dependencies: + "@babel/parser" "^7.26.9" + "@babel/types" "^7.26.9" + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + jsesc "^3.0.2" + +"@babel/helper-compilation-targets@^7.26.5": + version "7.26.5" + resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz" + integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA== + dependencies: + "@babel/compat-data" "^7.26.5" + "@babel/helper-validator-option" "^7.25.9" + browserslist "^4.24.0" + lru-cache "^5.1.1" + semver "^6.3.1" + +"@babel/helper-module-imports@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz" + integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== + dependencies: + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" + +"@babel/helper-module-transforms@^7.26.0": + version "7.26.0" + resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz" + integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== + dependencies: + "@babel/helper-module-imports" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@babel/traverse" "^7.25.9" + +"@babel/helper-plugin-utils@^7.25.9": + version "7.26.5" + resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz" + integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg== + +"@babel/helper-string-parser@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz" + integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== + +"@babel/helper-validator-identifier@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz" + integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== + +"@babel/helper-validator-option@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz" + integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== + +"@babel/helpers@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz" + integrity sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA== + dependencies: + "@babel/template" "^7.26.9" + "@babel/types" "^7.26.9" + +"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz" + integrity sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A== + dependencies: + "@babel/types" "^7.26.9" + +"@babel/plugin-transform-react-jsx-self@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz" + integrity sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg== + dependencies: + "@babel/helper-plugin-utils" "^7.25.9" + +"@babel/plugin-transform-react-jsx-source@^7.25.9": + version "7.25.9" + resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz" + integrity sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg== + dependencies: + "@babel/helper-plugin-utils" "^7.25.9" + +"@babel/template@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz" + integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA== + dependencies: + "@babel/code-frame" "^7.26.2" + "@babel/parser" "^7.26.9" + "@babel/types" "^7.26.9" + +"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.9.tgz" + integrity sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg== + dependencies: + "@babel/code-frame" "^7.26.2" + "@babel/generator" "^7.26.9" + "@babel/parser" "^7.26.9" + "@babel/template" "^7.26.9" + "@babel/types" "^7.26.9" + debug "^4.3.1" + globals "^11.1.0" + +"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.9": + version "7.26.9" + resolved "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz" + integrity sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw== + dependencies: + "@babel/helper-string-parser" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + +"@codexteam/icons@^0.3.0": + version "0.3.3" + resolved "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.3.tgz" + integrity sha512-cp7mkZPgmBuSxigTm3Vb+DtVHYeX7qXfQd7o05vcLD8Ag5WvRlol2QSn5P10k0CDAJwmkH9nQGQLBycErS9lsQ== + +"@editorjs/editorjs@^2.30.8": + version "2.30.8" + resolved "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.30.8.tgz" + integrity sha512-ClFuxI1qZTfXPJTacQfsJtOUP6bKoIe6BQNdAvGsDTDVwMnZEzoaSOwvUpdZEE56xppVfQueNK/1MElV9SJKHg== "@esbuild/android-arm64@0.18.20": version "0.18.20" @@ -23,7 +190,7 @@ "@esbuild/darwin-arm64@0.18.20": version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1" + resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz" integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== "@esbuild/darwin-x64@0.18.20": @@ -116,9 +283,146 @@ resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d" integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ== +"@jridgewell/gen-mapping@^0.3.5": + version "0.3.8" + resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz" + integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== + dependencies: + "@jridgewell/set-array" "^1.2.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.24" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.2" + resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz" + integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== + +"@jridgewell/set-array@^1.2.1": + version "1.2.1" + resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz" + integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== + +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": + version "1.5.0" + resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz" + integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== + +"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": + version "0.3.25" + resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz" + integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + +"@types/babel__core@^7.20.5": + version "7.20.5" + resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz" + integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA== + dependencies: + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + "@types/babel__generator" "*" + "@types/babel__template" "*" + "@types/babel__traverse" "*" + +"@types/babel__generator@*": + version "7.6.8" + resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz" + integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw== + dependencies: + "@babel/types" "^7.0.0" + +"@types/babel__template@*": + version "7.4.4" + resolved "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz" + integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A== + dependencies: + "@babel/parser" "^7.1.0" + "@babel/types" "^7.0.0" + +"@types/babel__traverse@*": + version "7.20.6" + resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz" + integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg== + dependencies: + "@babel/types" "^7.20.7" + +"@types/dompurify@^3.0.5": + version "3.0.5" + resolved "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz" + integrity sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg== + dependencies: + "@types/trusted-types" "*" + +"@types/node@^22.13.4": + version "22.13.4" + resolved "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz" + integrity sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg== + dependencies: + undici-types "~6.20.0" + +"@types/trusted-types@*": + version "2.0.7" + resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz" + integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== + +"@vitejs/plugin-react@^4.3.4": + version "4.3.4" + resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz" + integrity sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug== + dependencies: + "@babel/core" "^7.26.0" + "@babel/plugin-transform-react-jsx-self" "^7.25.9" + "@babel/plugin-transform-react-jsx-source" "^7.25.9" + "@types/babel__core" "^7.20.5" + react-refresh "^0.14.2" + +browserslist@^4.24.0: + version "4.24.4" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz" + integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A== + dependencies: + caniuse-lite "^1.0.30001688" + electron-to-chromium "^1.5.73" + node-releases "^2.0.19" + update-browserslist-db "^1.1.1" + +caniuse-lite@^1.0.30001688: + version "1.0.30001699" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz" + integrity sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w== + +codex-notifier@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/codex-notifier/-/codex-notifier-1.1.2.tgz#a733079185f4c927fa296f1d71eb8753fe080895" + integrity sha512-DCp6xe/LGueJ1N5sXEwcBc3r3PyVkEEDNWCVigfvywAkeXcZMk9K41a31tkEFBW0Ptlwji6/JlAb49E3Yrxbtg== + +codex-tooltip@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/codex-tooltip/-/codex-tooltip-1.0.5.tgz#ba25fd5b3a58ba2f73fd667c2b46987ffd1edef2" + integrity sha512-IuA8LeyLU5p1B+HyhOsqR6oxyFQ11k3i9e9aXw40CrHFTRO2Y1npNBVU3W1SvhKAbUU7R/YikUBdcYFP0RcJag== + +convert-source-map@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz" + integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== + +debug@^4.1.0, debug@^4.3.1: + version "4.4.0" + resolved "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz" + integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== + dependencies: + ms "^2.1.3" + +electron-to-chromium@^1.5.73: + version "1.5.100" + resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.100.tgz" + integrity sha512-u1z9VuzDXV86X2r3vAns0/5ojfXBue9o0+JDUDBKYqGLjxLkSqsSUoPU/6kW0gx76V44frHaf6Zo+QF74TQCMg== + esbuild@^0.18.10: version "0.18.20" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6" + resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz" integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA== optionalDependencies: "@esbuild/android-arm" "0.18.20" @@ -144,54 +448,134 @@ esbuild@^0.18.10: "@esbuild/win32-ia32" "0.18.20" "@esbuild/win32-x64" "0.18.20" +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + fsevents@~2.3.2: version "2.3.3" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== -nanoid@^3.3.6: - version "3.3.6" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" - integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== +gensync@^1.0.0-beta.2: + version "1.0.0-beta.2" + resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz" + integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== + +globals@^11.1.0: + version "11.12.0" + resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz" + integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== + +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + +jsesc@^3.0.2: + version "3.1.0" + resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz" + integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== + +json5@^2.2.3: + version "2.2.3" + resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== + +lru-cache@^5.1.1: + version "5.1.1" + resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz" + integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== + dependencies: + yallist "^3.0.2" + +ms@^2.1.3: + version "2.1.3" + resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz" + integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== -picocolors@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" - integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +nanoid@^3.3.8: + version "3.3.8" + resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz" + integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w== + +node-releases@^2.0.19: + version "2.0.19" + resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz" + integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== + +picocolors@^1.0.0, picocolors@^1.1.1: + version "1.1.1" + resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== postcss@^8.4.27: - version "8.4.31" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" - integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== + version "8.5.2" + resolved "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz" + integrity sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA== dependencies: - nanoid "^3.3.6" - picocolors "^1.0.0" - source-map-js "^1.0.2" + nanoid "^3.3.8" + picocolors "^1.1.1" + source-map-js "^1.2.1" + +react-refresh@^0.14.2: + version "0.14.2" + resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz" + integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== rollup@^3.27.1: - version "3.29.4" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981" - integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw== + version "3.29.5" + resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz" + integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w== optionalDependencies: fsevents "~2.3.2" -source-map-js@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" - integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + +source-map-js@^1.2.1: + version "1.2.1" + resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz" + integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== + +typescript@^5.7.3: + version "5.7.3" + resolved "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz" + integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw== + +undici-types@~6.20.0: + version "6.20.0" + resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz" + integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg== + +update-browserslist-db@^1.1.1: + version "1.1.2" + resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz" + integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.1" vite-plugin-css-injected-by-js@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz#c19480a9e42a95c5bced976a9dde1446f9bd91ff" - integrity sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew== + version "3.5.2" + resolved "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.2.tgz" + integrity sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ== vite@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26" - integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== + version "4.5.9" + resolved "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz" + integrity sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw== dependencies: esbuild "^0.18.10" postcss "^8.4.27" rollup "^3.27.1" optionalDependencies: fsevents "~2.3.2" + +yallist@^3.0.2: + version "3.1.1" + resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz" + integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== From 9504de82fe3e4b0194444096d68fbdc7218d70be Mon Sep 17 00:00:00 2001 From: AMRIK Date: Sun, 9 Mar 2025 16:40:47 +0530 Subject: [PATCH 2/3] Refactor TypeScript types and improve code documentation --- src/index.ts | 92 +++++++++++++++++++++++++++++++-------------------- src/types.ts | 4 +-- tsconfig.json | 1 - 3 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/index.ts b/src/index.ts index b2d080f..2d7c955 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,13 @@ import { IconAddBackground, } from "@codexteam/icons"; import { SimpleImageData, SimpleImageConfig } from "./types"; -import { PasteEvent } from "@editorjs/editorjs"; +import { + API, + FilePasteEventDetail, + PasteEvent, + PatternPasteEventDetail, + BlockTool, +} from "@editorjs/editorjs"; import type { TagPasteEventDetail } from "./types"; /** @@ -25,26 +31,25 @@ import type { TagPasteEventDetail } from "./types"; * @property {boolean} stretched - should image be stretched to full width of container */ -// Add these interfaces at the top of the file -interface HTMLPasteEventDetail { - type: "html"; - data: HTMLElement; -} - -interface FilePasteEventDetail { - type: "file"; - file: File; -} - -interface PatternPasteEventDetail { - type: "pattern"; - data: string; -} +export default class SimpleImage implements BlockTool { + /** + * Editor.js API instance + */ + private api: API; -export default class SimpleImage { - private api: any; + /** + * Indicates whether the block is in read-only mode + */ private readOnly: boolean; + + /** + * Index of the current block in the editor + */ private blockIndex: number; + + /** + * CSS classes used for styling elements + */ private CSS: { baseClass: string; loading: string; @@ -53,13 +58,25 @@ export default class SimpleImage { imageHolder: string; caption: string; }; + + /** + * Cache of DOM nodes used in the block + */ private nodes: { wrapper: HTMLElement | null; imageHolder: HTMLElement | null; image: HTMLImageElement | null; caption: HTMLElement | null; }; + + /** + * Tool's data storage + */ private _data!: SimpleImageData; + + /** + * Available image settings (tunes) config + */ private tunes: Array<{ name: keyof SimpleImageData; label: string; @@ -248,11 +265,10 @@ export default class SimpleImage { } /** - * Read pasted image and convert it to base64 + * Handles file drop events by converting the image to base64 * - * @static - * @param {File} file - * @returns {Promise} + * @param {File} file - The dropped file object + * @returns {Promise} Promise resolving to image data */ onDropHandler(file: File): Promise { const reader = new FileReader(); @@ -273,9 +289,10 @@ export default class SimpleImage { } /** - * On paste callback that is fired from Editor. + * Handles paste events for images + * Supports pasting image tags, URLs, and files * - * @param {PasteEvent} event - event with pasted config + * @param {PasteEvent} event - The paste event containing image data */ onPaste(event: PasteEvent) { switch (event.type) { @@ -315,18 +332,19 @@ export default class SimpleImage { } /** - * Returns image data + * Getter for the tool's data * - * @returns {SimpleImageData} + * @returns {SimpleImageData} Current image block data */ get data(): SimpleImageData { return this._data; } /** - * Set image data and update the view + * Setter for the tool's data + * Updates both the data storage and the view * - * @param {SimpleImageData} data + * @param {SimpleImageData} data - New image block data */ set data(data: SimpleImageData) { this._data = Object.assign({}, this.data, data); @@ -388,12 +406,13 @@ export default class SimpleImage { } /** - * Helper for making Elements with attributes + * Creates a DOM element with specified attributes and classes * - * @param {string} tagName - new Element tag name - * @param {Array|string} classNames - list or name of CSS classname(s) - * @param {object} attributes - any attributes - * @returns {Element} + * @private + * @param {string} tagName - The HTML tag name for the new element + * @param {Array|string|null} classNames - CSS class name(s) to add to the element + * @param {Record} attributes - Object containing element attributes + * @returns {HTMLElement} The created DOM element */ _make( tagName: string, @@ -422,10 +441,10 @@ export default class SimpleImage { } /** - * Click on the Settings Button + * Toggles the specified tune (image setting) on/off * * @private - * @param tune + * @param {('withBorder'|'withBackground'|'stretched')} tune - The tune property to toggle */ _toggleTune(tune: "withBorder" | "withBackground" | "stretched") { if (typeof this.data[tune] === "boolean") { @@ -435,7 +454,8 @@ export default class SimpleImage { } /** - * Add specified class corresponds with activated tunes + * Updates the image holder's CSS classes based on active tunes + * Applies visual modifications like border, background, and stretch settings * * @private */ diff --git a/src/types.ts b/src/types.ts index af41741..6acf7d0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,4 @@ -import type { API } from "@editorjs/editorjs"; +import type { API } from '@editorjs/editorjs'; export interface SimpleImageData { url: string; @@ -11,7 +11,7 @@ export interface SimpleImageData { export interface SimpleImageConfig { data?: Partial; config?: any; - api: any; + api: API; readOnly: boolean; } diff --git a/tsconfig.json b/tsconfig.json index 92cce2e..bfff832 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,6 @@ "module": "ESNext", "moduleResolution": "node", "strict": true, - "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, From 5ec3c64d374128096358b65a0756d8c578245f18 Mon Sep 17 00:00:00 2001 From: AMRIK Date: Sat, 15 Mar 2025 01:30:03 +0530 Subject: [PATCH 3/3] Update build script, add TypeScript declaration plugin, and enhance SimpleImage types documentation --- package.json | 7 +++---- src/index.ts | 7 +------ src/types.ts | 24 +++++++++++++++++++++++- vite.config.js | 8 +++++++- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 7f4d708..1f06991 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "scripts": { "dev": "vite", - "build": "tsc && vite build" + "build": "vite build" }, "author": { "name": "CodeX", @@ -33,12 +33,11 @@ }, "devDependencies": { "@editorjs/editorjs": "^2.30.8", - "@types/dompurify": "^3.0.5", "@types/node": "^22.13.4", - "@vitejs/plugin-react": "^4.3.4", "typescript": "^5.7.3", "vite": "^4.5.0", - "vite-plugin-css-injected-by-js": "^3.3.0" + "vite-plugin-css-injected-by-js": "^3.3.0", + "vite-plugin-dts": "^4.5.3" }, "dependencies": { "@codexteam/icons": "^0.3.0", diff --git a/src/index.ts b/src/index.ts index 2d7c955..d89991f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -92,12 +92,7 @@ export default class SimpleImage implements BlockTool { * api - Editor.js API * readOnly - read-only mode flag */ - constructor({ - data = {} as Partial, - config, - api, - readOnly, - }: SimpleImageConfig) { + constructor({ data, config, api, readOnly }: SimpleImageConfig) { /** * Editor.js API */ diff --git a/src/types.ts b/src/types.ts index 6acf7d0..8246eea 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,20 +1,42 @@ -import type { API } from '@editorjs/editorjs'; +import type { API } from "@editorjs/editorjs"; +/** + * Interface representing the data structure for a simple image block + * @interface SimpleImageData + */ export interface SimpleImageData { + /** URL or source of the image */ url: string; + /** Optional text description displayed below the image */ caption: string; + /** Whether the image has a border */ withBorder: boolean; + /** Whether the image has a background */ withBackground: boolean; + /** Whether the image is stretched to full width */ stretched: boolean; } +/** + * Configuration options for the Simple Image block + * @interface SimpleImageConfig + */ export interface SimpleImageConfig { + /** Image data (may be partial during initialization) */ data?: Partial; + /** Additional configuration options */ config?: any; + /** Editor.js API instance */ api: API; + /** Whether the editor is in read-only mode */ readOnly: boolean; } +/** + * Event detail for paste events containing HTML tags + * @interface TagPasteEventDetail + */ export interface TagPasteEventDetail { + /** The HTML element data from the paste event */ data: HTMLElement; } diff --git a/vite.config.js b/vite.config.js index c7c4b95..eda76f9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,7 @@ import path from 'path'; import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; import * as pkg from './package.json'; +import dts from 'vite-plugin-dts'; const NODE_ENV = process.argv.mode || 'development'; const VERSION = pkg.version; @@ -19,5 +20,10 @@ export default { VERSION: JSON.stringify(VERSION), }, - plugins: [cssInjectedByJsPlugin()], + plugins: [ + cssInjectedByJsPlugin(), + dts({ + tsconfigPath: './tsconfig.json', + }), + ], };