From dc2b38fcb3c1ffd7b5a4f97b4502dcc77ab7860d Mon Sep 17 00:00:00 2001 From: Koppeks Date: Mon, 2 Sep 2024 20:20:37 -0300 Subject: [PATCH 1/6] Index.ts mainly interfaces and changes up to line 297(onPaste function) --- .gitignore | 1 + package.json | 5 +- src/{index.js => index.ts} | 132 ++++++++++++++++++++++++++-------- yarn.lock | 140 ++++++------------------------------- 4 files changed, 128 insertions(+), 150 deletions(-) rename src/{index.js => index.ts} (70%) diff --git a/.gitignore b/.gitignore index 641d5eb..4b2b4e5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ npm-debug.log .idea/ .DS_Store dist +package-lock.json diff --git a/package.json b/package.json index 0962db6..4fdd69d 100644 --- a/package.json +++ b/package.json @@ -31,10 +31,13 @@ "email": "team@codex.so" }, "devDependencies": { + "@editorjs/editorjs": "^2.30.5", + "typescript": "^5.5.4", "vite": "^4.5.0", "vite-plugin-css-injected-by-js": "^3.3.0" }, "dependencies": { "@codexteam/icons": "^0.0.6" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/index.js b/src/index.ts similarity index 70% rename from src/index.js rename to src/index.ts index e53ffa7..79036c7 100644 --- a/src/index.js +++ b/src/index.ts @@ -5,6 +5,14 @@ import './index.css'; import { IconAddBorder, IconStretch, IconAddBackground } from '@codexteam/icons'; +import type { + API, + FilePasteEvent, + HTMLPasteEvent, + PasteEvent, + PatternPasteEvent +} from "@editorjs/editorjs" + /** * SimpleImage Tool for the Editor.js * Works only with pasted image URLs and requires no server-side uploader. @@ -17,17 +25,71 @@ 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 */ + +export interface SimpleImageData { + //image URL + url: string; + //image caption + caption?: string; + //should image be rendered with border + withBorder?: boolean; + //should image be rendered with background + withBackground?: boolean; + //should image be stretched to full width of container + stretched?: boolean; +} + +interface SimpleImageParams { + dataImage: SimpleImageData; + config:object; + api: API; + readOnly: boolean; +} + +interface SimpleImageCSS { + baseClass:string, + loading: string, + input:string, + /** + * Tool's classes + */ + wrapper: string, + imageHolder: string, + caption: string, +} + export default class SimpleImage { /** * Render plugin`s main Element and fill it with saved data * - * @param {{data: SimpleImageData, config: object, api: object}} - * data — previously saved data + * @param {{dataImage: SimpleImageData, config: object, api: object}} + * dataImage — previously saved data * config - user config for Tool * api - Editor.js API * readOnly - read-only mode flag */ - constructor({ data, config, api, readOnly }) { + + // api - Editor.js API + private api: API; + // readOnly - read-only mode flag + private readOnly: boolean; + private blockIndex: number; + // dataImage — previously saved data + private dataImage: SimpleImageData; + private CSS: SimpleImageCSS + private nodes: { + wrapper: HTMLElement | null; + imageHolder: HTMLElement | null; + image: HTMLElement | null; + caption: HTMLElement | null; + } + private tunes: { + name: string; + label: string; + icon: any; + }[]; + + constructor({ dataImage, config, api, readOnly }:SimpleImageParams) { /** * Editor.js API */ @@ -73,12 +135,12 @@ 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, + this.dataImage = { + url: dataImage.url || '', + caption: dataImage.caption || '', + withBorder: dataImage.withBorder !== undefined ? dataImage.withBorder : false, + withBackground: dataImage.withBackground !== undefined ? dataImage.withBackground : false, + stretched: dataImage.stretched !== undefined ? dataImage.stretched : false, }; /** @@ -112,14 +174,15 @@ 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'), + + const wrapper = this._make('div',[this.CSS.baseClass, this.CSS.wrapper]) as HTMLElement, + loader = this._make('div', this.CSS.loading) as HTMLElement, + imageHolder = this._make('div', this.CSS.imageHolder) as HTMLElement, + image = this._make('img') as HTMLImageElement, caption = this._make('div', [this.CSS.input, this.CSS.caption], { contentEditable: !this.readOnly, innerHTML: this.data.caption || '', - }); + }) as HTMLElement; caption.dataset.placeholder = 'Enter a caption'; @@ -156,7 +219,7 @@ export default class SimpleImage { * @param {Element} blockContent - Tool's wrapper * @returns {SimpleImageData} */ - save(blockContent) { + save(blockContent: Element): SimpleImageData { const image = blockContent.querySelector('img'), caption = blockContent.querySelector('.' + this.CSS.input); @@ -166,7 +229,7 @@ export default class SimpleImage { return Object.assign(this.data, { url: image.src, - caption: caption.innerHTML, + caption: caption?.innerHTML || "", }); } @@ -190,7 +253,7 @@ export default class SimpleImage { * * @returns {boolean} */ - static get isReadOnlySupported() { + static get isReadOnlySupported(): boolean { return true; } @@ -201,18 +264,28 @@ 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, reject) => { reader.onload = (event) => { - resolve({ - url: event.target.result, - caption: file.name, - }); + const target = event.target; + + //Make sure the target is not null and is a string + if(target && typeof target.result === "string"){ + resolve({ + url: target.result, + caption: file.name, + }); + }else{ + reject(new Error("FileReader result is not valid")) + } }; + reader.onerror = () => { + reject(new Error("Failed to read the file")) + } }); } @@ -221,11 +294,11 @@ 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; - + this.data = { url: img.src, }; @@ -259,7 +332,7 @@ export default class SimpleImage { * * @returns {SimpleImageData} */ - get data() { + get data(): SimpleImageData { return this._data; } @@ -325,7 +398,9 @@ export default class SimpleImage { * @param {object} attributes - any attributes * @returns {Element} */ - _make(tagName, classNames = null, attributes = {}) { + + + _make(tagName: string, classNames?: string[] | string, attributes: object = {}): HTMLElement | HTMLImageElement{ const el = document.createElement(tagName); if (Array.isArray(classNames)) { @@ -337,8 +412,7 @@ export default class SimpleImage { for (const attrName in attributes) { el[attrName] = attributes[attrName]; } - - return el; + return el } /** diff --git a/yarn.lock b/yarn.lock index c0a51d7..a042fb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4,121 +4,21 @@ "@codexteam/icons@^0.0.6": version "0.0.6" - resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.6.tgz#5553ada48dddf5940851ccc142cfe17835c36ad3" + resolved "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.6.tgz" -"@esbuild/android-arm64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622" - integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ== - -"@esbuild/android-arm@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682" - integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw== - -"@esbuild/android-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2" - integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg== - -"@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" - integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== - -"@esbuild/darwin-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d" - integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ== - -"@esbuild/freebsd-arm64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54" - integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw== - -"@esbuild/freebsd-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e" - integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ== - -"@esbuild/linux-arm64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0" - integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA== - -"@esbuild/linux-arm@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0" - integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg== - -"@esbuild/linux-ia32@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7" - integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA== - -"@esbuild/linux-loong64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" - integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg== - -"@esbuild/linux-mips64el@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231" - integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ== - -"@esbuild/linux-ppc64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb" - integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA== - -"@esbuild/linux-riscv64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6" - integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A== - -"@esbuild/linux-s390x@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071" - integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ== - -"@esbuild/linux-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338" - integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w== - -"@esbuild/netbsd-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1" - integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A== - -"@esbuild/openbsd-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae" - integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg== - -"@esbuild/sunos-x64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d" - integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ== - -"@esbuild/win32-arm64@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9" - integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg== - -"@esbuild/win32-ia32@0.18.20": - version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102" - integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g== +"@editorjs/editorjs@^2.30.5": + version "2.30.5" + resolved "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.30.5.tgz" + integrity sha512-sE7m/UPbuf+nSGjv9cmWggFsfvtYlgEX7PCby2lZWvOsOLbRxuLT+ZYlwbWshD+8BFJwiAmBj9e+ScZcOjCzeg== "@esbuild/win32-x64@0.18.20": version "0.18.20" - resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d" + resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz" integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ== 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,24 +44,19 @@ esbuild@^0.18.10: "@esbuild/win32-ia32" "0.18.20" "@esbuild/win32-x64" "0.18.20" -fsevents@~2.3.2: - version "2.3.3" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" - 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" + resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== picocolors@^1.0.0: version "1.0.0" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== postcss@^8.4.27: version "8.4.31" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz" integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== dependencies: nanoid "^3.3.6" @@ -170,24 +65,29 @@ postcss@^8.4.27: rollup@^3.27.1: version "3.29.4" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981" + resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz" integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw== 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" + resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== +typescript@^5.5.4: + version "5.5.4" + resolved "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz" + integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q== + 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" + resolved "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz" integrity sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew== -vite@^4.5.0: +vite@^4.5.0, vite@>2.0.0-0: version "4.5.0" - resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26" + resolved "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz" integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== dependencies: esbuild "^0.18.10" From ec7ce641d97069c10852913b9b64f54c63c46d7f Mon Sep 17 00:00:00 2001 From: Koppeks Date: Tue, 3 Sep 2024 18:35:07 -0300 Subject: [PATCH 2/6] Changes to set and get data also assert on returns as SimpleImageData, remove error throws --- package.json | 2 +- src/index.ts | 50 +++++++++++----------- yarn.lock | 119 +++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 140 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 4fdd69d..17bfedb 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "vite-plugin-css-injected-by-js": "^3.3.0" }, "dependencies": { - "@codexteam/icons": "^0.0.6" + "@codexteam/icons": "^0.3.2" }, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/index.ts b/src/index.ts index 79036c7..4e49688 100644 --- a/src/index.ts +++ b/src/index.ts @@ -30,7 +30,7 @@ export interface SimpleImageData { //image URL url: string; //image caption - caption?: string; + caption: string; //should image be rendered with border withBorder?: boolean; //should image be rendered with background @@ -69,18 +69,18 @@ export default class SimpleImage { * readOnly - read-only mode flag */ - // api - Editor.js API + /** + * Create all private the necesary class properties + */ private api: API; - // readOnly - read-only mode flag private readOnly: boolean; private blockIndex: number; - // dataImage — previously saved data private dataImage: SimpleImageData; private CSS: SimpleImageCSS private nodes: { wrapper: HTMLElement | null; imageHolder: HTMLElement | null; - image: HTMLElement | null; + image: HTMLImageElement | null; caption: HTMLElement | null; } private tunes: { @@ -174,7 +174,9 @@ export default class SimpleImage { * @public */ render() { - + /** + * Specific return as on each of the _make + */ const wrapper = this._make('div',[this.CSS.baseClass, this.CSS.wrapper]) as HTMLElement, loader = this._make('div', this.CSS.loading) as HTMLElement, imageHolder = this._make('div', this.CSS.imageHolder) as HTMLElement, @@ -269,22 +271,15 @@ export default class SimpleImage { reader.readAsDataURL(file); - return new Promise((resolve, reject) => { + return new Promise((resolve) => { reader.onload = (event) => { const target = event.target; - - //Make sure the target is not null and is a string if(target && typeof target.result === "string"){ resolve({ url: target.result, caption: file.name, }); - }else{ - reject(new Error("FileReader result is not valid")) } - }; - reader.onerror = () => { - reject(new Error("Failed to read the file")) } }); } @@ -297,25 +292,28 @@ export default class SimpleImage { onPaste(event: PasteEvent) { switch (event.type) { case 'tag': { - const img = event.detail.data; - - this.data = { - url: img.src, - }; + const img = (event as HTMLPasteEvent).detail.data; + if (img instanceof HTMLImageElement) { + this.data = { + url: img.src + } as SimpleImageData; + } else { + console.error("Pasted element is not an image."); + } break; } case 'pattern': { - const { data: text } = event.detail; + const { data: text } = (event as PatternPasteEvent).detail; this.data = { - url: text, - }; + url: text + } as SimpleImageData; break; } case 'file': { - const { file } = event.detail; + const { file } = (event as FilePasteEvent).detail; this.onDropHandler(file) .then(data => { @@ -333,7 +331,7 @@ export default class SimpleImage { * @returns {SimpleImageData} */ get data(): SimpleImageData { - return this._data; + return this.dataImage; } /** @@ -341,8 +339,8 @@ export default class SimpleImage { * * @param {SimpleImageData} data */ - set data(data) { - this._data = Object.assign({}, this.data, data); + set data(data: SimpleImageData) { + this.dataImage = Object.assign({}, this.data, data); if (this.nodes.image) { this.nodes.image.src = this.data.url; diff --git a/yarn.lock b/yarn.lock index a042fb7..d031126 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,15 +2,121 @@ # yarn lockfile v1 -"@codexteam/icons@^0.0.6": - version "0.0.6" - resolved "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.6.tgz" +"@codexteam/icons@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.3.2.tgz#b7aed0ba7b344e07953101f5476cded570d4f150" + integrity sha512-P1ep2fHoy0tv4wx85eic+uee5plDnZQ1Qa6gDfv7eHPkCXorMtVqJhzMb75o1izogh6G7380PqmFDXV3bW3Pig== "@editorjs/editorjs@^2.30.5": version "2.30.5" resolved "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.30.5.tgz" integrity sha512-sE7m/UPbuf+nSGjv9cmWggFsfvtYlgEX7PCby2lZWvOsOLbRxuLT+ZYlwbWshD+8BFJwiAmBj9e+ScZcOjCzeg== +"@esbuild/android-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622" + integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ== + +"@esbuild/android-arm@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682" + integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw== + +"@esbuild/android-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2" + integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg== + +"@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" + integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== + +"@esbuild/darwin-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d" + integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ== + +"@esbuild/freebsd-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54" + integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw== + +"@esbuild/freebsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e" + integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ== + +"@esbuild/linux-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0" + integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA== + +"@esbuild/linux-arm@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0" + integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg== + +"@esbuild/linux-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7" + integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA== + +"@esbuild/linux-loong64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" + integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg== + +"@esbuild/linux-mips64el@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231" + integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ== + +"@esbuild/linux-ppc64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb" + integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA== + +"@esbuild/linux-riscv64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6" + integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A== + +"@esbuild/linux-s390x@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071" + integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ== + +"@esbuild/linux-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338" + integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w== + +"@esbuild/netbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1" + integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A== + +"@esbuild/openbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae" + integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg== + +"@esbuild/sunos-x64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d" + integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ== + +"@esbuild/win32-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9" + integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg== + +"@esbuild/win32-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102" + integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g== + "@esbuild/win32-x64@0.18.20": version "0.18.20" resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz" @@ -44,6 +150,11 @@ esbuild@^0.18.10: "@esbuild/win32-ia32" "0.18.20" "@esbuild/win32-x64" "0.18.20" +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + nanoid@^3.3.6: version "3.3.6" resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz" @@ -85,7 +196,7 @@ vite-plugin-css-injected-by-js@^3.3.0: resolved "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz" integrity sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew== -vite@^4.5.0, vite@>2.0.0-0: +vite@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz" integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== From 91c28d0d962295e0930c541d0f81335abae0c6e4 Mon Sep 17 00:00:00 2001 From: Koppeks Date: Tue, 3 Sep 2024 18:46:09 -0300 Subject: [PATCH 3/6] Remove unnecessary comments, add last types and interfaces, added if statement to check imageHolder --- src/index.ts | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/index.ts b/src/index.ts index 4e49688..6c18756 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,15 +27,10 @@ import type { */ export interface SimpleImageData { - //image URL url: string; - //image caption caption: string; - //should image be rendered with border withBorder?: boolean; - //should image be rendered with background withBackground?: boolean; - //should image be stretched to full width of container stretched?: boolean; } @@ -58,6 +53,18 @@ interface SimpleImageCSS { caption: string, } +interface tune { + name: string; + label: string; + icon: any; +} +interface nodes { + wrapper: HTMLElement | null; + imageHolder: HTMLElement | null; + image: HTMLImageElement | null; + caption: HTMLElement | null; +} + export default class SimpleImage { /** * Render plugin`s main Element and fill it with saved data @@ -76,18 +83,9 @@ export default class SimpleImage { private readOnly: boolean; private blockIndex: number; private dataImage: SimpleImageData; - private CSS: SimpleImageCSS - private nodes: { - wrapper: HTMLElement | null; - imageHolder: HTMLElement | null; - image: HTMLImageElement | null; - caption: HTMLElement | null; - } - private tunes: { - name: string; - label: string; - icon: any; - }[]; + private CSS: SimpleImageCSS; + private nodes: nodes; + private tunes: tune[]; constructor({ dataImage, config, api, readOnly }:SimpleImageParams) { /** @@ -378,7 +376,7 @@ export default class SimpleImage { * * @returns {Array} */ - renderSettings() { + renderSettings(): Array { return this.tunes.map(tune => ({ ...tune, label: this.api.i18n.t(tune.label), @@ -419,11 +417,12 @@ export default class SimpleImage { * @private * @param tune */ - _toggleTune(tune) { + _toggleTune(tune:string) { this.data[tune] = !this.data[tune]; this._acceptTuneView(); } + /** * Add specified class corresponds with activated tunes * @@ -431,8 +430,9 @@ export default class SimpleImage { */ _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){ + 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') { this.api.blocks.stretchBlock(this.blockIndex, !!this.data.stretched); } From e6d3fcbc0d5e1e845e924b1873d4246874229cb2 Mon Sep 17 00:00:00 2001 From: Koppeks Date: Wed, 4 Sep 2024 19:00:22 -0300 Subject: [PATCH 4/6] Provided docs for each property and interface --- src/index.ts | 133 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 103 insertions(+), 30 deletions(-) diff --git a/src/index.ts b/src/index.ts index 6c18756..147f8ad 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,32 +16,63 @@ import type { /** * SimpleImage Tool for the Editor.js * Works only with pasted image URLs and requires no server-side uploader. - * - * @typedef {object} SimpleImageData - * @description Tool's input and output data format - * @property {string} url — image URL - * @property {string} caption — image caption - * @property {boolean} withBorder - should image be rendered with border - * @property {boolean} withBackground - should image be rendered with background - * @property {boolean} stretched - should image be stretched to full width of container */ +/** + * Tool's input and output data format + */ export interface SimpleImageData { + /** + * image URL + */ url: string; + /** + * image caption + */ caption: string; + /** + * should image be rendered with border + */ withBorder?: boolean; + /** + * should image be rendered with background + */ withBackground?: boolean; + /** + * should image be stretched to full width of container + */ stretched?: boolean; } +/** + * Represents the parameters used on the constructor inside the SimpleImage class + */ interface SimpleImageParams { - dataImage: SimpleImageData; + /** + * previously saved data + */ + data: SimpleImageData; + /** + * user config for Tool + */ config:object; + /** + * Editor.js API + */ api: API; + /** + * read-only mode flag + */ readOnly: boolean; } +/** + * Represents the styles and tools of a image + */ interface SimpleImageCSS { + /** + * Styles + */ baseClass:string, loading: string, input:string, @@ -53,45 +84,89 @@ interface SimpleImageCSS { caption: string, } +/** + * Represents a single tune option for the tool + */ interface tune { + /** + * The name of the tune + */ name: string; - label: string; + /** + * The label displayed + */ + label: string; + /** + * The icon representing the tune, can be any type + */ icon: any; } + +/** + * Represents the nodes (HTML elements) used in the tool + */ interface nodes { + /** + * The main wrapper element for the tool + */ wrapper: HTMLElement | null; + /** + * The container element for holding the image + */ imageHolder: HTMLElement | null; + /** + * The image element + */ image: HTMLImageElement | null; + /** + * The element used for displaying the image caption + */ caption: HTMLElement | null; } export default class SimpleImage { /** * Render plugin`s main Element and fill it with saved data - * - * @param {{dataImage: SimpleImageData, config: object, api: object}} - * dataImage — previously saved data - * config - user config for Tool - * api - Editor.js API - * readOnly - read-only mode flag */ /** - * Create all private the necesary class properties + * Editor.js API instance */ private api: API; + /** + * Flag indicating read-only mode + */ private readOnly: boolean; + /** + * The index of the current block in the editor + */ private blockIndex: number; - private dataImage: SimpleImageData; + /** + * Stores current block data internally + */ + private _data: SimpleImageData; + /** + * CSS classes used for styling the tool + */ private CSS: SimpleImageCSS; + /** + * Nodes cache + */ private nodes: nodes; + /** + * Represents an array of tunes + */ private tunes: tune[]; + - constructor({ dataImage, config, api, readOnly }:SimpleImageParams) { + constructor({ data, config, api, readOnly }:SimpleImageParams) { /** - * Editor.js API + * Editor.js API */ this.api = api; + /** + * Read-only mode + */ this.readOnly = readOnly; /** @@ -100,7 +175,6 @@ export default class SimpleImage { * So real block index will be +1 after rendering * * @todo place it at the `rendered` event hook to get real block index without +1; - * @type {number} */ this.blockIndex = this.api.blocks.getCurrentBlockIndex() + 1; @@ -111,7 +185,6 @@ export default class SimpleImage { baseClass: this.api.styles.block, loading: this.api.styles.loader, input: this.api.styles.input, - /** * Tool's classes */ @@ -133,12 +206,12 @@ export default class SimpleImage { /** * Tool's initial data */ - this.dataImage = { - url: dataImage.url || '', - caption: dataImage.caption || '', - withBorder: dataImage.withBorder !== undefined ? dataImage.withBorder : false, - withBackground: dataImage.withBackground !== undefined ? dataImage.withBackground : false, - stretched: dataImage.stretched !== undefined ? dataImage.stretched : false, + 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, }; /** @@ -329,7 +402,7 @@ export default class SimpleImage { * @returns {SimpleImageData} */ get data(): SimpleImageData { - return this.dataImage; + return this._data; } /** @@ -338,7 +411,7 @@ export default class SimpleImage { * @param {SimpleImageData} data */ set data(data: SimpleImageData) { - this.dataImage = Object.assign({}, this.data, data); + this._data = Object.assign({}, this.data, data); if (this.nodes.image) { this.nodes.image.src = this.data.url; From 39f6e7419b50789a1113076e5497dd1cc941d148 Mon Sep 17 00:00:00 2001 From: Koppeks Date: Wed, 4 Sep 2024 19:18:34 -0300 Subject: [PATCH 5/6] Interface proper syntax, remove redundant reader promise condition and console.log, added proper type for renderSettings return --- src/index.ts | 47 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/index.ts b/src/index.ts index 147f8ad..e51ecb0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -87,7 +87,7 @@ interface SimpleImageCSS { /** * Represents a single tune option for the tool */ -interface tune { +interface Tune { /** * The name of the tune */ @@ -105,7 +105,7 @@ interface tune { /** * Represents the nodes (HTML elements) used in the tool */ -interface nodes { +interface Nodes { /** * The main wrapper element for the tool */ @@ -124,6 +124,32 @@ interface nodes { caption: HTMLElement | null; } +/** + * Returns image tunes config + */ +interface TuneSetting { + /** + * Name of the tune setting + */ + name: string; + /** + * Label of the tune setting + */ + label: string; + /** + * Toogle tune + */ + toggle: boolean; + /** + * Function that will run on activate + */ + onActivate: () => void; + /** + * Property that will set if tune setting is active + */ + isActive: boolean; +} + export default class SimpleImage { /** * Render plugin`s main Element and fill it with saved data @@ -152,11 +178,11 @@ export default class SimpleImage { /** * Nodes cache */ - private nodes: nodes; + private nodes: Nodes; /** * Represents an array of tunes */ - private tunes: tune[]; + private tunes: Tune[]; constructor({ data, config, api, readOnly }:SimpleImageParams) { @@ -344,8 +370,8 @@ export default class SimpleImage { return new Promise((resolve) => { reader.onload = (event) => { - const target = event.target; - if(target && typeof target.result === "string"){ + const target = event.target as FileReader; + if(typeof target.result === "string"){ resolve({ url: target.result, caption: file.name, @@ -368,8 +394,6 @@ export default class SimpleImage { this.data = { url: img.src } as SimpleImageData; - } else { - console.error("Pasted element is not an image."); } break; } @@ -444,12 +468,7 @@ export default class SimpleImage { }; } - /** - * Returns image tunes config - * - * @returns {Array} - */ - renderSettings(): Array { + renderSettings(): Array { return this.tunes.map(tune => ({ ...tune, label: this.api.i18n.t(tune.label), From fc7d09a39821adb5e0ac68aff312b4c9c9e70e3d Mon Sep 17 00:00:00 2001 From: Koppeks Date: Wed, 2 Oct 2024 13:21:37 -0300 Subject: [PATCH 6/6] Added comments and docs for attributes and fix small typo's --- package.json | 3 +-- src/index.ts | 26 ++++++++++++++++---------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 17bfedb..6f8f097 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,5 @@ }, "dependencies": { "@codexteam/icons": "^0.3.2" - }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + } } diff --git a/src/index.ts b/src/index.ts index e51ecb0..61940ba 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,13 +5,7 @@ import './index.css'; import { IconAddBorder, IconStretch, IconAddBackground } from '@codexteam/icons'; -import type { - API, - FilePasteEvent, - HTMLPasteEvent, - PasteEvent, - PatternPasteEvent -} from "@editorjs/editorjs" +import type { API, FilePasteEvent, HTMLPasteEvent, PasteEvent, PatternPasteEvent } from "@editorjs/editorjs" /** * SimpleImage Tool for the Editor.js @@ -71,16 +65,28 @@ interface SimpleImageParams { */ interface SimpleImageCSS { /** - * Styles + * The base CSS class for the component, defining general styling for the entire element. */ baseClass:string, + /** + * CSS class applied when the image or component is in a loading state. + */ loading: string, + /** + * CSS class applied to the input element. + */ input:string, /** * Tool's classes */ wrapper: string, + /** + * Controlling the layout and appearance of the area where the image is displayed. + */ imageHolder: string, + /** + * Defining styles for the text or label associated with the image. + */ caption: string, } @@ -185,7 +191,7 @@ export default class SimpleImage { private tunes: Tune[]; - constructor({ data, config, api, readOnly }:SimpleImageParams) { + constructor({ data, config, api, readOnly }: SimpleImageParams) { /** * Editor.js API */ @@ -500,7 +506,7 @@ export default class SimpleImage { for (const attrName in attributes) { el[attrName] = attributes[attrName]; } - return el + return el; } /**