@fiduswriter/editor 0.1.0

package/src/images/edit_dialog/edit_dialog/index.js

@@ -0,0 +1,222 @@
+import {CheckableList, ContentMenu, Dialog, addAlert} from "fwtoolkit"
+import {E2EEEncryptor} from "../../../e2ee/encryptor"
+import {imageEditModel} from "./model"
+import {imageEditTemplate} from "./templates"
+export class ImageEditDialog {
+    constructor(imageDB, imageId = false, page) {
+        this.imageDB = imageDB
+        this.page = page
+        this.imageId = imageId
+        this.dialog = false
+        this.copyright = this.imageId
+            ? this.imageDB.db[this.imageId].copyright
+            : {
+                  holder: false,
+                  year: false,
+                  freeToRead: true,
+                  licenses: []
+              }
+        this.menu = this.page.menu?.imageEditModel || imageEditModel()
+    }
+
+    //open a dialog for uploading an image
+    init() {
+        if (this.page.app.isOffline()) {
+            this.showOffline()
+            return Promise.resolve()
+        }
+        const returnPromise = new Promise(resolve => {
+            this.dialog = new Dialog({
+                title: this.imageId
+                    ? gettext("Update Image Information")
+                    : gettext("Upload Image"),
+                id: "editimage",
+                classes: "fw-media-uploader",
+                body: imageEditTemplate({
+                    image: this.imageId ? this.imageDB.db[this.imageId] : false,
+                    cats: this.imageDB.cats
+                }),
+                buttons: [
+                    {
+                        text: this.imageId
+                            ? gettext("Update")
+                            : gettext("Upload"),
+                        click: () => resolve(this.saveImage()),
+                        classes: "fw-dark"
+                    },
+                    {
+                        type: "cancel",
+                        classes: "fw-orange",
+                        click: () => this.dialog.close()
+                    }
+                ]
+            })
+            this.dialog.open()
+        })
+
+        const image = this.imageId ? this.imageDB.db[this.imageId] : false
+        const catsEl = document.getElementById("image-edit-categories")
+        if (catsEl) {
+            this.catsList = new CheckableList({
+                dom: catsEl,
+                options: this.imageDB.cats.map(cat => ({
+                    id: cat.id,
+                    label: cat.category_title
+                })),
+                initialValue: image ? image.cats : [],
+                multiple: true
+            })
+        } else {
+            this.catsList = {value: []}
+        }
+
+        if (!this.imageId) {
+            this.bindMediaUploadEvents()
+        }
+
+        document
+            .querySelector(".figure-edit-menu")
+            .addEventListener("click", event => {
+                event.preventDefault()
+                event.stopImmediatePropagation()
+
+                const contentMenu = new ContentMenu({
+                    menu: this.menu,
+                    width: 220,
+                    page: this,
+                    menuPos: {X: event.pageX - 50, Y: event.pageY + 50}
+                })
+                contentMenu.open()
+            })
+
+        return returnPromise
+    }
+
+    //add image upload events
+    bindMediaUploadEvents() {
+        const selectButton = document.querySelector(
+                "#editimage .fw-media-select-button"
+            ),
+            mediaInputSelector = document.querySelector(
+                "#editimage .fw-media-file-input"
+            )
+        this.mediaPreviewerDiv = document.querySelector(
+            "#editimage .figure-preview > div"
+        )
+        this.rotation = 0
+        this.cropped = false
+
+        selectButton.addEventListener("click", () => {
+            mediaInputSelector.click()
+        })
+
+        mediaInputSelector.addEventListener("change", () => {
+            this.mediaInput = mediaInputSelector.files[0]
+            const fr = new window.FileReader()
+            fr.onload = () => {
+                this.mediaPreviewerDiv.innerHTML = `<div class="img" style="background-image: url(${fr.result});" />`
+                this.mediaPreviewer =
+                    this.mediaPreviewerDiv.querySelector(".img")
+                this.mediaPreviewerDiv.classList.remove("crop-mode")
+                this.dialog.centerDialog()
+            }
+            fr.readAsDataURL(this.mediaInput)
+        })
+    }
+
+    displayCreateImageError(errors) {
+        Object.keys(errors).forEach(eKey => {
+            const eMsg = `<div class="fw-warning">${errors[eKey]}</div>`
+            if ("error" == eKey) {
+                document
+                    .getElementById("editimage")
+                    .insertAdjacentHTML("afterbegin", eMsg)
+            } else {
+                document
+                    .getElementById(`id_${eKey}`)
+                    .insertAdjacentHTML("afterend", eMsg)
+            }
+        })
+    }
+
+    async saveImage() {
+        const imageData = {
+            title: document.querySelector("#editimage .fw-media-title").value,
+            copyright: this.copyright,
+            cats: this.catsList.value
+        }
+        if (this.imageId) {
+            imageData.id = this.imageId
+        } else if (!this.rotation && !this.cropped) {
+            imageData.image = this.mediaInput
+        } else {
+            const mediaPreviewerStyle =
+                this.mediaPreviewer.currentStyle ||
+                window.getComputedStyle(this.mediaPreviewer, false)
+            const base64data = mediaPreviewerStyle.backgroundImage
+                .slice(4, -1)
+                .replace(/"/g, "")
+            const bstr = atob(base64data.split(",")[1])
+            let n = bstr.length
+            const u8arr = new Uint8Array(n)
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n)
+            }
+            imageData.image = new File([u8arr], this.mediaInput.name, {
+                type: this.mediaInput.type
+            })
+        }
+
+        // For E2EE documents, encrypt the image and copyright before uploading
+        const isE2EE = this.page.e2ee?.encrypted === true
+        if (isE2EE && imageData.image) {
+            imageData.image = await E2EEEncryptor.encryptImage(
+                imageData.image,
+                this.page.e2ee.key
+            )
+            imageData.original_file_type = this.mediaInput?.type || "image/png"
+            // Encrypt copyright metadata so the server cannot read it
+            imageData.copyright = await E2EEEncryptor.encryptObject(
+                imageData.copyright,
+                this.page.e2ee.key
+            )
+        }
+
+        // Remove old warning messages
+        document
+            .querySelectorAll("#editimage .fw-warning")
+            .forEach(el => el.parentElement.removeChild(el))
+        return new Promise(resolve => {
+            this.imageDB.saveImage(imageData).then(
+                imageId => {
+                    this.dialog.close()
+                    addAlert("success", gettext("The image has been updated."))
+                    this.imageId = imageId
+                    resolve(imageId)
+                },
+                errors => {
+                    if (this.page.app.isOffline()) {
+                        this.showOffline()
+                        return
+                    }
+                    this.displayCreateImageError(errors)
+                    addAlert(
+                        "error",
+                        gettext(
+                            "Some errors were found. Please examine the form."
+                        )
+                    )
+                }
+            )
+        })
+    }
+
+    showOffline() {
+        addAlert(
+            "info",
+            gettext(
+                "You are currently offline. Please try again after going online."
+            )
+        )
+    }
+}

package/src/images/edit_dialog/edit_dialog/model.js

@@ -0,0 +1,183 @@
+import Cropper from "cropperjs"
+
+import {CopyrightDialog} from "../../copyright_dialog"
+
+let mediaPreviewerImg = false
+
+export const imageEditModel = () => ({
+    content: [
+        {
+            title: gettext("Rotate Left"),
+            type: "action",
+            tooltip: gettext("Rotate-left"),
+            order: 0,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                rotateBase64Image(
+                    mediaPreviewerStyle.backgroundImage
+                        .slice(4, -1)
+                        .replace(/"/g, ""),
+                    dialog.mediaInput.type,
+                    "left"
+                ).then(response =>
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${response});`
+                    )
+                )
+                if (dialog.rotation === 0) {
+                    dialog.rotation = 270
+                } else {
+                    dialog.rotation -= 90
+                }
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "redo fa-rotate-180"
+        },
+        {
+            title: gettext("Rotate Right"),
+            type: "action",
+            tooltip: gettext("Rotate-right"),
+            order: 1,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                rotateBase64Image(
+                    mediaPreviewerStyle.backgroundImage
+                        .slice(4, -1)
+                        .replace(/"/g, ""),
+                    dialog.mediaInput.type,
+                    "right"
+                ).then(response =>
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${response});`
+                    )
+                )
+                if (dialog.rotation === 270) {
+                    dialog.rotation = 0
+                } else {
+                    dialog.rotation += 90
+                }
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "undo"
+        },
+        {
+            title: gettext("Crop"),
+            type: "action",
+            tooltip: gettext("Crop image"),
+            order: 2,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                //const base64data = mediaPreviewerStyle.backgroundImage.slice(4, -1).replace(/"/g, "")
+                mediaPreviewerImg = document.createElement("img")
+                //img.src = `url(${base64data})`
+                mediaPreviewerImg.src = mediaPreviewerStyle.backgroundImage
+                    .slice(4, -1)
+                    .replace(/"/g, "")
+                dialog.mediaPreviewer.parentElement.replaceChild(
+                    mediaPreviewerImg,
+                    dialog.mediaPreviewer
+                )
+                const cropper = new Cropper(mediaPreviewerImg, {
+                    viewMode: 1,
+                    responsive: true
+                })
+                toggleCropMode(true, dialog, cropper)
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "crop"
+        },
+        {
+            title: gettext("Set Copyright"),
+            type: "action",
+            tooltip: gettext("Specify copyright information"),
+            order: 3,
+            action: dialog => {
+                const crDialog = new CopyrightDialog(dialog.copyright)
+                crDialog.init().then(copyright => {
+                    if (copyright) {
+                        dialog.copyright = copyright
+                    }
+                })
+            }
+        }
+    ]
+})
+
+let oldButtons = false
+
+const toggleCropMode = (val, dialog, cropper) => {
+    if (val && !oldButtons) {
+        dialog.mediaPreviewerDiv.classList.add("crop-mode")
+        oldButtons = dialog.dialog.buttons
+        dialog.dialog.setButtons([
+            {
+                text: gettext("Crop"),
+                click: () => {
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${cropper
+                            .getCroppedCanvas()
+                            .toDataURL(dialog.mediaInput.type)});`
+                    )
+                    dialog.cropped = true
+                    cropper.destroy()
+                    toggleCropMode(false, dialog, cropper)
+                },
+                classes: "fw-dark"
+            },
+            {
+                type: "cancel",
+                classes: "fw-orange",
+                click: () => {
+                    cropper.destroy()
+                    toggleCropMode(false, dialog, cropper)
+                }
+            }
+        ])
+    } else {
+        dialog.mediaPreviewerDiv.classList.remove("crop-mode")
+        if (mediaPreviewerImg) {
+            mediaPreviewerImg.parentElement.replaceChild(
+                dialog.mediaPreviewer,
+                mediaPreviewerImg
+            )
+            mediaPreviewerImg = false
+        }
+        if (oldButtons) {
+            dialog.dialog.buttons = oldButtons
+            oldButtons = false
+        }
+    }
+    dialog.dialog.refreshButtons()
+    dialog.dialog.centerDialog()
+}
+
+const rotateBase64Image = (base64data, type, direction) => {
+    return new Promise(resolve => {
+        const canvas = document.createElement("canvas")
+        const ctx = canvas.getContext("2d")
+        const image = new Image()
+        image.src = base64data
+        image.onload = () => {
+            canvas.height = image.width
+            canvas.width = image.height
+            if (direction == "left") {
+                ctx.rotate((90 * Math.PI) / 180)
+                ctx.translate(0, -canvas.width)
+            } else {
+                ctx.rotate((-90 * Math.PI) / 180)
+                ctx.translate(-canvas.height, 0)
+            }
+            ctx.drawImage(image, 0, 0)
+            resolve(canvas.toDataURL(type))
+        }
+    })
+}

package/src/images/edit_dialog/edit_dialog/templates.js

@@ -0,0 +1,41 @@
+import {escapeText} from "fwtoolkit"
+
+/* A template for the image category selection of the image selection dialog. */
+const imageEditCategoryTemplate = ({cats}) => {
+    if (!cats.length) {
+        return ""
+    }
+    return `<div class="fw-media-category">
+            <div>${gettext("Select categories")}</div>
+            <div id="image-edit-categories"></div>
+        </div>`
+}
+
+/* A template for the form for the image upload dialog. */
+export const imageEditTemplate = ({image, cats}) =>
+    `<div>
+        <input name="title" class="fw-media-title" type="text"
+                placeholder="${gettext("Insert a title")}" value="${
+                    image ? escapeText(image.title) : ""
+                }" />
+        ${
+            image
+                ? ""
+                : `<button type="button" class="fw-media-select-button fw-button fw-light">
+                ${gettext("Select a file")}
+            </button>
+            <input name="image" type="file" class="fw-media-file-input">`
+        }
+    </div>
+    <div class="figure-preview">
+        <button class="figure-edit-menu" title="${gettext("Edit Image")}">
+            <span class="dot-menu-icon"><i class="fa fa-ellipsis-v"></i></span>
+        </button>
+    <div>
+        ${
+            image && image.image
+                ? `<div class="img" style="background-image: url(${image.image});"></div>`
+                : ""
+        }
+    </div></div>
+    ${imageEditCategoryTemplate({cats})}`

package/src/images/edit_dialog/model.js

@@ -0,0 +1,5 @@
+// TODO: image editing was originally part of the usermedia Django app.
+// This stub keeps the editor package buildable until a decision is made on
+// whether image editing belongs in @fiduswriter/editor, @fiduswriter/common,
+// or a separate package.
+export const imageEditModel = () => ({content: []})

package/src/images/selection_dialog/index.js

@@ -0,0 +1,176 @@
+import {Dialog, SelectionDataTable, cancelPromise, escapeText} from "fwtoolkit"
+
+export class ImageSelectionDialog {
+    constructor(imageDB, userImageDB, imgId, page) {
+        this.imageDB = imageDB
+        this.userImageDB = userImageDB
+        this.page = page
+        this.imgId = imgId // a preselected image
+        this.imgDb = "document" // the preselection image will always come from the document
+        this.images = [] // images from both databases
+    }
+
+    isE2EE() {
+        return this.page.e2ee?.encrypted === true
+    }
+
+    init() {
+        console.log(
+            "DEBUG selection init: docImages=",
+            Object.keys(this.imageDB.db).length,
+            "userImages=",
+            Object.keys(this.userImageDB.db).length
+        )
+        this.images = Object.values(this.imageDB.db).map(image => {
+            return {
+                image,
+                db: "document"
+            }
+        })
+        Object.values(this.userImageDB.db).forEach(image => {
+            if (this.imageDB.db[image.id]) {
+                return
+            }
+            this.images.push({
+                image,
+                db: "user"
+            })
+        })
+        console.log("DEBUG selection images=", this.images.length)
+        const buttons = []
+        const p = new Promise(resolve => {
+            if (!this.page.app.isOffline()) {
+                buttons.push({
+                    text: gettext("Add new image"),
+                    icon: "plus-circle",
+                    click: () => {
+                        import("../edit_dialog").then(({ImageEditDialog}) => {
+                            const targetDB = this.isE2EE()
+                                ? this.imageDB
+                                : this.userImageDB
+                            const imageUpload = new ImageEditDialog(
+                                targetDB,
+                                false,
+                                this.page
+                            )
+
+                            resolve(
+                                imageUpload.init().then(imageId => {
+                                    console.log(
+                                        "DEBUG upload resolved imageId=",
+                                        imageId
+                                    )
+                                    this.imgId = imageId
+                                    // For E2EE docs the image goes straight
+                                    // into the document DB, not the user's.
+                                    this.imgDb = this.isE2EE()
+                                        ? "document"
+                                        : "user"
+                                    console.log(
+                                        "DEBUG closing selection dialog"
+                                    )
+                                    this.imageDialog.close()
+                                    console.log("DEBUG reinit selection dialog")
+                                    return this.init()
+                                })
+                            )
+                        })
+                    }
+                })
+            }
+
+            buttons.push({
+                text: gettext("Use image"),
+                classes: "fw-dark",
+                click: () => {
+                    this.imageDialog.close()
+                    resolve({id: this.imgId, db: this.imgDb})
+                }
+            })
+
+            buttons.push({
+                type: "cancel",
+                click: () => {
+                    this.imageDialog.close()
+                    resolve(cancelPromise())
+                }
+            })
+        })
+        this.imageDialog = new Dialog({
+            buttons,
+            width: 300,
+            body: '<div class="image-selection-table"></div>',
+            title: gettext("Images"),
+            id: "select-image-dialog"
+        })
+        this.imageDialog.open()
+        this.initTable()
+        this.imageDialog.centerDialog()
+        return p
+    }
+
+    initTable() {
+        /* Initialize the overview table */
+        const tableEl = document.createElement("table")
+        tableEl.classList.add("fw-data-table")
+        tableEl.classList.add("fw-small")
+        const host = this.imageDialog.dialogEl.querySelector(
+            "div.image-selection-table"
+        )
+        host.innerHTML = ""
+        host.appendChild(tableEl)
+
+        const selectedIds =
+            this.imgId === false ? [] : [`${this.imgDb}-${this.imgId}`]
+
+        this.selectionTable = new SelectionDataTable({
+            dom: host,
+            classes: ["fw-data-table", "fw-small"],
+            columns: [
+                {
+                    select: 0,
+                    hidden: true
+                },
+                {
+                    select: [0, 2],
+                    type: "string"
+                },
+                {
+                    select: [1, 3],
+                    sortable: false
+                }
+            ],
+            data: this.images.map(image => this.createTableRow(image)),
+            idColumn: 0,
+            multiple: false,
+            selectedIds,
+            scrollY: "270px",
+            labels: {
+                noRows: gettext("No images available"), // Message shown when there are no images
+                noResults: gettext("No images found"), // Message shown when no images are found after search
+                placeholder: gettext("Search...") // placeholder for search field
+            },
+            onChange: selected => {
+                if (selected.length) {
+                    const [db, id] = String(selected[0]).split("-")
+                    this.imgId = Number.parseInt(id)
+                    this.imgDb = db
+                } else {
+                    this.imgId = false
+                }
+            }
+        })
+        this.selectionTable.init()
+        this.table = this.selectionTable.table
+    }
+
+    createTableRow(image) {
+        return [
+            `${image.db}-${image.image.id}`,
+            image.image.thumbnail === undefined
+                ? `<img src="${image.image.image}" style="max-heigth:30px;max-width:30px;">`
+                : `<img src="${image.image.thumbnail}" style="max-heigth:30px;max-width:30px;">`,
+            escapeText(image.image.title)
+        ]
+    }
+}