diff --git a/apps/backend/test-1.spec.ts b/apps/backend/test-1.spec.ts new file mode 100644 index 000000000..277090f7b --- /dev/null +++ b/apps/backend/test-1.spec.ts @@ -0,0 +1,56 @@ +import { test, expect } from "@playwright/test"; + +test("test", async ({ page }) => { + // Go to http://localhost:19006/ + await page.goto("http://localhost:19006/"); + + // Go to http://localhost:19006/login + await page.goto("http://localhost:19006/login"); + + // Click [placeholder="Enter your email …"] + await page.locator('[placeholder="Enter your email …"]').click(); + + // Fill [placeholder="Enter your email …"] + await page.locator('[placeholder="Enter your email …"]').fill("a@a.com"); + + // Press Tab + await page.locator('[placeholder="Enter your email …"]').press("Tab"); + + // Fill [placeholder="Enter your password …"] + await page.locator('[placeholder="Enter your password …"]').fill("pass"); + + // Click div[role="button"]:has-text("Log in") + await page.locator('div[role="button"]:has-text("Log in")').click(); + await expect(page).toHaveURL( + "http://localhost:19006/workspace/8f832295-4e3a-482f-a506-cb407dc2e650/page/18610bc1-edd5-41af-b3f8-0af282aa230d" + ); + + // Click [data-testid="editor-sidebar__add-image"] div:has-text("Upload Image") >> nth=0 + await page + .locator( + '[data-testid="editor-sidebar__add-image"] div:has-text("Upload Image")' + ) + .first() + .click(); + + // Upload whatsapp-logo.png + await page + .locator('[data-testid="editor-sidebar__add-image"]') + .setInputFiles("whatsapp-logo.png"); + + // Click img + await page.locator("img").click(); + + // Click img + await page.locator("img").click({ + button: "right", + }); + await expect(page).toHaveURL( + "http://localhost:19006/workspace/8f832295-4e3a-482f-a506-cb407dc2e650/page/18610bc1-edd5-41af-b3f8-0af282aa230d" + ); + + // Click img + await page.locator("img").click({ + button: "right", + }); +}); diff --git a/apps/backend/test/e2e/images/register.e2e.ts b/apps/backend/test/e2e/images/register.e2e.ts new file mode 100644 index 000000000..0e75b92fc --- /dev/null +++ b/apps/backend/test/e2e/images/register.e2e.ts @@ -0,0 +1,56 @@ +import { test } from "@playwright/test"; +import * as sodium from "@serenity-tools/libsodium"; +import { v4 as uuidv4 } from "uuid"; +import { createDocument } from "../../helpers/e2e/createDocument"; +import { createSubFolder } from "../../helpers/e2e/createSubFolder"; +import { deleteDocument } from "../../helpers/e2e/deleteDocument"; +import { register } from "../../helpers/e2e/register"; +import { renameDocument } from "../../helpers/e2e/renameDocument"; +import { uploadImage } from "../../helpers/e2e/uploadImage"; + +const username = `${uuidv4()}@example.com`; +const password = "pass"; +const workspaceName = "a workspace"; + +test.beforeAll(async () => { + await sodium.ready; +}); + +test.describe("After register", () => { + test.only("Upload, remove image", async ({ page }) => { + const { workspace, folder } = await register({ + page, + username, + password, + workspaceName, + }); + const numImages = await uploadImage({ + page, + filePath: "/Users/adonis/Downloads/whatsapp-logo.png", + }); + }); + + test("Create, rename, delete document in subfolder", async ({ page }) => { + const { workspace, folder } = await register({ + page, + username: `${uuidv4()}@example.com`, + password, + workspaceName, + }); + const addedFolder = await createSubFolder( + page, + folder?.id!, + workspace?.id! + ); + if (!addedFolder) { + throw new Error("Folder not found"); + } + const addedDocument = await createDocument( + page, + addedFolder.id, + workspace?.id! + ); + await renameDocument(page, addedDocument?.id!, "Renamed document"); + await deleteDocument(page, addedDocument?.id!, workspace?.id!); + }); +}); diff --git a/apps/backend/test/helpers/e2e/uploadImage.ts b/apps/backend/test/helpers/e2e/uploadImage.ts new file mode 100644 index 000000000..df29af49d --- /dev/null +++ b/apps/backend/test/helpers/e2e/uploadImage.ts @@ -0,0 +1,28 @@ +import { expect, Page } from "@playwright/test"; +import { delayForSeconds } from "../delayForSeconds"; + +export type Props = { + page: Page; + filePath: string; +}; +export const uploadImage = async ({ page, filePath }: Props) => { + const numImagesBefore = await page + .locator("div[class='ProseMirror'] > img") + .count(); + // await page.locator('[data-testid="editor-sidebar__add-image"]').click(); + // await delayForSeconds(2); + // await page + // .locator('[data-testid="editor-sidebar__add-image"]') + // .setInputFiles(filePath); + const identifier = + '//input[@data-testid="editor-sidebar__add-image--file-input"]'; + // await page.locator(identifier).click(); + await delayForSeconds(2); + await page.setInputFiles(identifier, [filePath]); + await delayForSeconds(20); + const numImagesAfter = await page + .locator("div[class='ProseMirror'] > img") + .count(); + expect(numImagesAfter).toBe(numImagesBefore + 1); + return numImagesAfter; +}; diff --git a/packages/editor/components/editorSidebar/EditorSidebar.tsx b/packages/editor/components/editorSidebar/EditorSidebar.tsx index 3dfbd9dd9..60bf45c43 100644 --- a/packages/editor/components/editorSidebar/EditorSidebar.tsx +++ b/packages/editor/components/editorSidebar/EditorSidebar.tsx @@ -2,6 +2,7 @@ import { EncryptAndUploadFunctionFile, initiateImagePicker, InsertImageParams, + insertImages, updateImageAttributes, UpdateImageAttributesParams, } from "@serenity-tools/editor-image-extension"; @@ -16,7 +17,8 @@ import { } from "@serenity-tools/ui"; import { Level } from "@tiptap/extension-heading"; import { Editor } from "@tiptap/react"; -import React from "react"; +import React, { useRef } from "react"; +import { Platform } from "react-native"; type EditorSidebarProps = { editor: Editor | null; @@ -29,6 +31,53 @@ export default function EditorSidebar({ headingLevels, encryptAndUploadFile, }: EditorSidebarProps) { + const fileInputRef = useRef(); + const insertImage = async ({ + uploadId, + width, + height, + }: InsertImageParams) => { + if (!editor) { + return; + } + editor.commands.insertContent({ + type: "image", + attrs: { + uploadId, + width, + height, + }, + }); + }; + + const testFileUpload = async (event: any) => { + const file = event.target.files[0]; + if (!file) { + return; + } + const reader = new FileReader(); + reader.onload = function (e) { + const buf = e.target?.result as ArrayBuffer; + const data = Buffer.from(buf).toString("base64"); + console.log(data); + insertImages({ + encryptAndUploadFile, + filesAsBase64: [data], + insertImage, + updateImageAttributes: (params: UpdateImageAttributesParams) => { + if (!editor) { + return; + } + updateImageAttributes({ ...params, view: editor.view }); + }, + }); + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + reader.readAsArrayBuffer(file); + }; + return ( { initiateImagePicker({ encryptAndUploadFile, - insertImage: ({ uploadId, width, height }: InsertImageParams) => { - if (!editor) { - return; - } - editor.commands.insertContent({ - type: "image", - attrs: { - uploadId, - width, - height, - }, - }); - }, + insertImage, updateImageAttributes: (params: UpdateImageAttributesParams) => { if (!editor) { return; @@ -207,12 +244,21 @@ export default function EditorSidebar({ }, }); }} + testID="editor-sidebar__add-image" > Upload Image + {Platform.OS === "web" && ( + + )} ); }