@fiduswriter/image-manager 0.1.4 → 0.1.6

package/dist/types.d.ts

@@ -0,0 +1,118 @@
+import type { DataTable } from "simple-datatables";
+import type { ImageDB } from "./database.js";
+/** A single license under which an image is available. */
+export interface License {
+    url: string;
+    title: string;
+    start?: string | false;
+}
+/** Copyright and licensing information for an image. */
+export interface Copyright {
+    holder?: string | false;
+    year?: number | false;
+    freeToRead: boolean;
+    licenses: License[];
+}
+/** A category used to group images. */
+export interface ImageCategory {
+    id: number;
+    category_title: string;
+}
+/** A single image as stored in the client-side image database. */
+export interface Image {
+    id: number;
+    title: string;
+    file_type: string;
+    image: string;
+    thumbnail?: string;
+    width: number;
+    height: number;
+    added: number;
+    cats: number[];
+    copyright: Copyright;
+    [key: string]: unknown;
+}
+/** End-to-end encryption context passed to dialogs that handle images. */
+export interface E2EEContext {
+    encrypted: boolean;
+    key: CryptoKey;
+}
+/** Subset of the main Fidus Writer app object used by image-manager code. */
+export interface ImageManagerApp {
+    imageDB: ImageDB;
+    isOffline: () => boolean;
+    settings: {
+        APPS: string[];
+        MEDIA_MAX_SIZE?: number;
+        [key: string]: unknown;
+    };
+    name: string;
+    [key: string]: unknown;
+}
+/** Page object passed to image dialogs. */
+export interface ImageManagerPage {
+    app: ImageManagerApp;
+    e2ee?: E2EEContext;
+    menu?: unknown;
+    [key: string]: unknown;
+}
+/** Plugin instance created by the overview's plugin activation. */
+export interface ImageOverviewPlugin {
+    init?: () => Promise<unknown> | unknown;
+    [key: string]: unknown;
+}
+/** Constructor for an image-overview plugin. */
+export interface ImageOverviewPluginConstructor {
+    new (overview: unknown): ImageOverviewPlugin;
+}
+/** Row displayed in the image overview data table. */
+export type ImageTableRow = [
+    id: number,
+    selected: boolean,
+    file: string,
+    size: string,
+    added: string,
+    actions: string
+];
+/** An image selection item coming from either the document or user DB. */
+export interface ImageSelectionItem {
+    image: Image;
+    db: "document" | "user";
+}
+/** Response body from `POST /api/usermedia/images/`. */
+export interface ImagesResponse {
+    imageCategories: ImageCategory[];
+    images: Image[];
+}
+/** Response body from `POST /api/usermedia/save/`. */
+export interface SaveImageResponse {
+    errormsg: Record<string, string> & {
+        error?: string;
+    };
+    values: Image;
+}
+/** Request body for `POST /api/usermedia/save/`. */
+export interface SaveImageRequest {
+    id?: number;
+    title: string;
+    copyright: Copyright | string;
+    cats: (string | number)[];
+    image?: File | Blob;
+    original_file_type?: string;
+    [key: string]: unknown;
+}
+/** Request body for `POST /api/usermedia/save_category/`. */
+export interface SaveCategoriesRequest {
+    ids: (string | number)[];
+    titles: string[];
+}
+/** Response body from `POST /api/usermedia/save_category/`. */
+export interface SaveCategoriesResponse {
+    entries: ImageCategory[];
+}
+/** Request body for `POST /api/usermedia/delete/`. */
+export interface DeleteImagesRequest {
+    ids: (string | number)[];
+}
+export type { DataTable };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,85 +1,101 @@
 {
-    "name": "@fiduswriter/image-manager",
-    "version": "0.1.4",
-    "description": "Fidus Writer image/media manager",
-    "repository": {
-        "type": "git",
-        "url": "ssh://git@codeberg.org/fiduswriter/fiduswriter-image-manager-js.git"
+  "name": "@fiduswriter/image-manager",
+  "version": "0.1.6",
+  "description": "Fidus Writer image/media manager",
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@codeberg.org/fiduswriter/fiduswriter-image-manager-js.git"
+  },
+  "license": "AGPL-3.0",
+  "author": "Johannes Wilm",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
-    "license": "AGPL-3.0",
-    "author": "Johannes Wilm",
-    "type": "module",
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
-        },
-        "./*": {
-            "types": "./dist/*.d.ts",
-            "default": "./dist/*.js"
-        },
-        "./copyright_dialog": {
-            "types": "./dist/copyright_dialog/index.d.ts",
-            "default": "./dist/copyright_dialog/index.js"
-        },
-        "./copyright_dialog/*": {
-            "types": "./dist/copyright_dialog/*.d.ts",
-            "default": "./dist/copyright_dialog/*.js"
-        },
-        "./edit_dialog": {
-            "types": "./dist/edit_dialog/index.d.ts",
-            "default": "./dist/edit_dialog/index.js"
-        },
-        "./edit_dialog/*": {
-            "types": "./dist/edit_dialog/*.d.ts",
-            "default": "./dist/edit_dialog/*.js"
-        },
-        "./overview": {
-            "types": "./dist/overview/index.d.ts",
-            "default": "./dist/overview/index.js"
-        },
-        "./overview/*": {
-            "types": "./dist/overview/*.d.ts",
-            "default": "./dist/overview/*.js"
-        },
-        "./selection_dialog": {
-            "types": "./dist/selection_dialog/index.d.ts",
-            "default": "./dist/selection_dialog/index.js"
-        },
-        "./selection_dialog/*": {
-            "types": "./dist/selection_dialog/*.d.ts",
-            "default": "./dist/selection_dialog/*.js"
-        }
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
     },
-    "files": [
-        "dist/",
-        "src/",
-        "README.md",
-        "LICENSE"
-    ],
-    "scripts": {
-        "build": "tsc",
-        "prepare": "npm run build",
-        "prepublishOnly": "npm run build",
-        "typecheck": "tsc --noEmit",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
-        "format": "prettier --write .",
-        "format:check": "prettier --check ."
+    "./copyright_dialog": {
+      "types": "./dist/copyright_dialog/index.d.ts",
+      "default": "./dist/copyright_dialog/index.js"
+    },
+    "./copyright_dialog/*": {
+      "types": "./dist/copyright_dialog/*.d.ts",
+      "default": "./dist/copyright_dialog/*.js"
+    },
+    "./edit_dialog": {
+      "types": "./dist/edit_dialog/index.d.ts",
+      "default": "./dist/edit_dialog/index.js"
+    },
+    "./edit_dialog/*": {
+      "types": "./dist/edit_dialog/*.d.ts",
+      "default": "./dist/edit_dialog/*.js"
     },
-    "dependencies": {
-        "@fiduswriter/common": "^0.1.4",
-        "cropperjs": "^1.6.2",
-        "fwtoolkit": "^0.1.9"
+    "./overview": {
+      "types": "./dist/overview/index.d.ts",
+      "default": "./dist/overview/index.js"
     },
-    "devDependencies": {
-        "@eslint/js": "^10.0.1",
-        "eslint": "^10.6.0",
-        "globals": "^15.15.0",
-        "prettier": "^3.5.3",
-        "typescript": "^6.0.3",
-        "typescript-eslint": "^8.62.0"
+    "./overview/*": {
+      "types": "./dist/overview/*.d.ts",
+      "default": "./dist/overview/*.js"
+    },
+    "./selection_dialog": {
+      "types": "./dist/selection_dialog/index.d.ts",
+      "default": "./dist/selection_dialog/index.js"
+    },
+    "./selection_dialog/*": {
+      "types": "./dist/selection_dialog/*.d.ts",
+      "default": "./dist/selection_dialog/*.js"
     }
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --config jest.config.js"
+  },
+  "dependencies": {
+    "@fiduswriter/common": "^0.1.4",
+    "bibliojson": "^4.0.3",
+    "cropperjs": "^1.6.2",
+    "fast-deep-equal": "^3.1.3",
+    "fwtoolkit": "^0.1.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/jest": "^30.0.0",
+    "eslint": "^10.6.0",
+    "globals": "^15.15.0",
+    "happy-dom": "^20.10.6",
+    "jest": "^30.4.2",
+    "prettier": "^3.5.3",
+    "ts-jest": "^29.4.11",
+    "ts-jest-resolver": "^2.0.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.0"
+  },
+  "lint-staged": {
+    "*.{ts,js,mjs,css,md,json,html}": [
+      "prettier --write"
+    ],
+    "*.{ts,js,mjs}": [
+      "eslint --fix"
+    ]
+  }
 }

package/src/copyright_dialog/{index.js → index.ts}

@@ -1,11 +1,14 @@
 import {edtfParse} from "bibliojson"
 import deepEqual from "fast-deep-equal"
 import {Dialog, InputList, TypeSwitch, escapeText} from "fwtoolkit"
+import type {InputListItemRenderResult} from "fwtoolkit"
+
 import {
     copyrightTemplate,
     licenseInputTemplate,
     licenseSelectTemplate
 } from "./templates.js"
+import type {Copyright, License} from "../types.js"
 
 export const LICENSE_URLS = [
     ["CC BY 4.0", "https://creativecommons.org/licenses/by/4.0/"],
@@ -15,42 +18,58 @@ export const LICENSE_URLS = [
     ["CC BY-NC-SA 4.0", "https://creativecommons.org/licenses/by-nc-sa/4.0/"],
     ["CC BY-NC-ND 4.0", "https://creativecommons.org/licenses/by-nc-nd/4.0/"],
     ["CC0", "https://creativecommons.org/publicdomain/zero/1.0/"]
-]
+] as [string, string][]
 
-function getLicenseTitle(url) {
+function getLicenseTitle(url: string): string {
     const license = LICENSE_URLS.find(license => license[1] === url)
     return license ? license[0] : ""
 }
 
 export class CopyrightDialog {
-    constructor(copyright) {
+    copyright: Copyright
+
+    origCopyright: Copyright
+
+    dialog: Dialog | false = false
+
+    licensesList!: InputList<License>
+
+    constructor(copyright: Copyright) {
         this.copyright = copyright
         this.origCopyright = copyright
         this.dialog = false
     }
 
-    getCurrentValue() {
-        this.copyright = {}
-        const holder = this.dialog.dialogEl.querySelector(".holder").value
+    getCurrentValue(): void {
+        if (!this.dialog) {
+            return
+        }
+        const dialogEl = this.dialog.dialogEl
+        this.copyright = {} as Copyright
+        const holder = (
+            dialogEl.querySelector(".holder") as HTMLInputElement
+        ).value
         this.copyright.holder = holder.length ? holder : false
-        const year = this.dialog.dialogEl.querySelector(".year").value
+        const year = (
+            dialogEl.querySelector(".year") as HTMLInputElement
+        ).value
         this.copyright.year = year.length
             ? Math.max(0, Math.min(Number.parseInt(year) || 0, 2100))
             : false
-        this.copyright.freeToRead = this.dialog.dialogEl.querySelector(
+        this.copyright.freeToRead = dialogEl.querySelector(
             ".free-to-read:checked"
         )
             ? true
             : false
         const licenseStartDates = Array.from(
-            this.dialog.dialogEl.querySelectorAll(".license-start")
-        ).map(el => el.value)
+            dialogEl.querySelectorAll(".license-start")
+        ).map(el => (el as HTMLInputElement).value)
         this.copyright.licenses = this.licensesList.values
             .map((license, index) => {
                 if (!license.url.length) {
                     return false
                 }
-                const returnValue = {
+                const returnValue: License = {
                     url: license.url,
                     title: license.title
                 }
@@ -67,17 +86,17 @@ export class CopyrightDialog {
                 }
                 return returnValue
             })
-            .filter(license => license)
+            .filter((license): license is License => license !== false)
     }
 
-    init() {
+    init(): Promise<Copyright | false> {
         return new Promise(resolve => {
             const buttons = []
             buttons.push({
                 text: gettext("Change"),
                 classes: "fw-dark",
                 click: () => {
-                    this.dialog.close()
+                    dialog.close()
                     this.getCurrentValue()
                     if (deepEqual(this.copyright, this.origCopyright)) {
                         // No change.
@@ -88,10 +107,10 @@ export class CopyrightDialog {
             })
 
             buttons.push({
-                type: "cancel"
+                type: "cancel" as const
             })
 
-            this.dialog = new Dialog({
+            const dialog = new Dialog({
                 width: 940,
                 height: 300,
                 id: "configure-copyright",
@@ -99,28 +118,35 @@ export class CopyrightDialog {
                 body: copyrightTemplate(this.copyright),
                 buttons
             })
+            this.dialog = dialog
 
-            this.dialog.open()
+            dialog.open()
             this.bind()
         })
     }
 
-    bind() {
-        this.licensesList = new InputList({
-            dom: this.dialog.dialogEl.querySelector(".copyright-licenses-list"),
+    bind(): void {
+        if (!this.dialog) {
+            return
+        }
+        const dialogEl = this.dialog.dialogEl
+        this.licensesList = new InputList<License>({
+            dom: dialogEl.querySelector(
+                ".copyright-licenses-list"
+            ) as HTMLElement,
             initialValues: this.copyright.licenses || [],
             emptyValue: {url: "", title: "", start: false},
-            renderItem: license => ({
+            renderItem: (license): InputListItemRenderResult<License> => ({
                 html: `<div class="copyright-license-switch"></div>
                     <div class="field-part field-part-small">
                         <input type="text" class="license-start" value="${license.start ? escapeText(license.start) : ""}" placeholder="${gettext("Start date")}">
                     </div>`,
                 bind: el => {
-                    const licenseContainer = el.closest("tr")
+                    const licenseContainer = el.closest("tr") as HTMLElement
                     const startInput =
                         licenseContainer.querySelector(".license-start")
-                    if (license.start) {
-                        startInput.value = license.start
+                    if (license.start && startInput) {
+                        ;(startInput as HTMLInputElement).value = license.start
                     }
 
                     const mode =
@@ -131,12 +157,13 @@ export class CopyrightDialog {
                             ? 1
                             : 2
                     new TypeSwitch({
-                        dom: el.querySelector(".copyright-license-switch"),
+                        dom: el.querySelector(
+                            ".copyright-license-switch"
+                        ) as HTMLElement,
                         label1: gettext("From list"),
                         label2: gettext("Custom"),
-                        initialMode: mode,
-                        render1: () =>
-                            licenseSelectTemplate({url: license.url}),
+                        initialMode: mode as 1 | 2,
+                        render1: () => licenseSelectTemplate({url: license.url}),
                         render2: () =>
                             licenseInputTemplate({
                                 url: license.url,
@@ -148,7 +175,7 @@ export class CopyrightDialog {
                                 ".fw-type-switch-input-inner input, .fw-type-switch-input-inner select"
                             )
                             if (focusable) {
-                                focusable.focus()
+                                ;(focusable as HTMLElement).focus()
                             }
                         }
                     })
@@ -157,22 +184,27 @@ export class CopyrightDialog {
             getValue: el => {
                 const licenseInput = el.querySelector(
                     ".fw-type-switch-input-inner"
-                )
+                ) as HTMLElement
                 const selectEl = licenseInput.querySelector("select.license")
-                let url, title
+                let url: string, title: string
                 if (selectEl) {
-                    url = selectEl.value
+                    url = (selectEl as HTMLSelectElement).value
                     title = getLicenseTitle(url)
                 } else {
-                    url = licenseInput.querySelector("input.license").value
-                    title = licenseInput.querySelector(
+                    url = (licenseInput.querySelector("input.license") as HTMLInputElement).value
+                    title = (licenseInput.querySelector(
                         "input.license-title"
-                    ).value
+                    ) as HTMLInputElement).value
                 }
                 const start =
-                    el.closest("tr").querySelector(".license-start").value ||
-                    false
-                return {url, title, start}
+                    (el.closest("tr") as HTMLElement).querySelector(
+                        ".license-start"
+                    )
+                return {
+                    url,
+                    title,
+                    start: start ? (start as HTMLInputElement).value || false : false
+                }
             }
         })
     }

package/src/copyright_dialog/{templates.js → templates.ts}

@@ -1,7 +1,23 @@
 import {escapeText} from "fwtoolkit"
+
 import {LICENSE_URLS} from "./index.js"
 
-export const licenseSelectTemplate = ({url}) =>
+interface LicenseSelectTemplateData {
+    url: string
+}
+
+interface LicenseInputTemplateData {
+    url: string
+    title: string
+}
+
+interface CopyrightTemplateData {
+    holder?: string | false
+    year?: number | false
+    freeToRead: boolean
+}
+
+export const licenseSelectTemplate = ({url}: LicenseSelectTemplateData) =>
     `<select class="license">
         <option value=""></option>
         ${LICENSE_URLS.map(
@@ -11,7 +27,7 @@ export const licenseSelectTemplate = ({url}) =>
     </select>
     <div class="fw-select-arrow fa fa-caret-down"></div>`
 
-export const licenseInputTemplate = ({url, title}) =>
+export const licenseInputTemplate = ({url, title}: LicenseInputTemplateData) =>
     `<div class="field-part field-part-huge">
         <input type='text' class='license' value="${escapeText(url)}" placeholder="${gettext("License URL")}">
     </div>
@@ -19,7 +35,7 @@ export const licenseInputTemplate = ({url, title}) =>
         <input type='text' class='license-title' value="${escapeText(title)}" placeholder="${gettext("License Title")}">
     </div>`
 
-export const copyrightTemplate = ({holder, year, freeToRead}) =>
+export const copyrightTemplate = ({holder, year, freeToRead}: CopyrightTemplateData) =>
     `<table class="fw-dialog-table">
         <tbody>
             <tr>

package/src/database.ts

@@ -0,0 +1,83 @@
+import {activateWait, addAlert, deactivateWait, gettext, postJson} from "fwtoolkit"
+
+import type {
+    Image,
+    ImageCategory,
+    ImageManagerApp,
+    ImagesResponse,
+    SaveImageRequest,
+    SaveImageResponse
+} from "./types.js"
+
+/* A class that holds information about images uploaded by the user. */
+
+export class ImageDB {
+    app: ImageManagerApp
+
+    db: Record<number, Image>
+
+    cats: ImageCategory[]
+
+    constructor(app: ImageManagerApp) {
+        this.app = app
+        this.db = {}
+        this.cats = []
+    }
+
+    getDB(): Promise<void> {
+        this.db = {}
+        this.cats = []
+
+        activateWait()
+
+        return postJson("/api/usermedia/images/").then(({json}) => {
+            const response = json as ImagesResponse
+            this.cats = response.imageCategories
+            response.images.forEach(image => {
+                this.db[image.id] = image
+            })
+            deactivateWait()
+            return
+        })
+    }
+
+    saveImage(imageData: SaveImageRequest): Promise<number> {
+        activateWait()
+        const {image, ...jsonData} = imageData
+
+        return postJson(
+            "/api/usermedia/save/",
+            jsonData,
+            image ? {image} : {}
+        )
+            .then(({json}) => {
+                const response = json as SaveImageResponse
+                deactivateWait()
+                if (Object.keys(response.errormsg).length) {
+                    return Promise.reject(new Error(response.errormsg.error))
+                } else {
+                    this.db[response.values.id] = response.values
+                    return response.values.id
+                }
+            })
+            .catch(error => {
+                const networkError = error as {
+                    status?: number
+                    message?: string
+                    statusText?: string
+                }
+                if (networkError.status === 413) {
+                    addAlert(
+                        "error",
+                        `${gettext("Image is larger than the maximum permitted size")}${this.app.settings?.MEDIA_MAX_SIZE ? `: ${Number.parseInt(String(this.app.settings.MEDIA_MAX_SIZE / 1000000))}MB` : "."}`
+                    )
+                } else if (networkError.message) {
+                    addAlert("error", gettext(networkError.message))
+                } else {
+                    addAlert("error", gettext(networkError.statusText || ""))
+                }
+                deactivateWait()
+                throw error
+            })
+    }
+}