microboard-ui-temp 0.0.3

package/src/App/Location.ts

@@ -0,0 +1,23 @@
+export class Location {
+	/** Parse current location pathname for board id. */
+	getCurrentBoardId(): string | undefined {
+		const pathname = window.location.pathname;
+		return this.getBoardId(pathname);
+	}
+
+	/** Parse pathname for board id. */
+	getBoardId(pathname: string): string | undefined {
+		const regex = /^\/boards\/([A-Za-z0-9\-]+)$/;
+		const matches = pathname.match(regex);
+		if (matches !== null && matches.length > 0) {
+			return matches[1];
+		} else {
+			return undefined;
+		}
+	}
+
+	/** Get pathname from an url */
+	getPathname(id: string): string {
+		return "/boards/" + id;
+	}
+}

package/src/App/MediaHelpers.ts

@@ -0,0 +1,221 @@
+import { conf } from "microboard-temp";
+import { Account } from "entities/account/Account";
+
+export const validateMediaFile = (file: File, account: Account): boolean => {
+	const fileExtension = file.name.split(".").pop()?.toLowerCase() || "";
+	if (
+		!file.type.startsWith("image") &&
+		!conf.AUDIO_FORMATS.includes(fileExtension) &&
+		!conf.VIDEO_FORMATS.includes(fileExtension)
+	) {
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.header"),
+			body: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.body"),
+			duration: 4000,
+		});
+		return false;
+	}
+
+	const isBasicPlan = account.billingInfo?.plan.name === "basic";
+	let errorBody = conf.i18n.t(
+		`toolsPanel.addMedia.tooLarge.imageBody.${isBasicPlan ? "basic" : "plus"}`,
+	);
+
+	if (
+		conf.AUDIO_FORMATS.includes(fileExtension) ||
+		conf.VIDEO_FORMATS.includes(fileExtension)
+	) {
+		errorBody = conf.i18n.t(
+			`toolsPanel.addMedia.tooLarge.audioOrVideoBody.${isBasicPlan ? "basic" : "plus"}`,
+		);
+		if (
+			file.size / 1024 ** 2 >
+			(account.billingInfo?.storage.maxMediaSize || Infinity)
+		) {
+			conf.notify({
+				variant: "warning",
+				header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
+				body: errorBody,
+				button: isBasicPlan
+					? {
+							text: conf.i18n.t(
+								"toolsPanel.addMedia.upgradeToPlus",
+							),
+							onClick: () => conf.openModal("USER_PLAN_MODAL_ID"),
+						}
+					: undefined,
+				duration: 4000,
+			});
+			return false;
+		}
+	} else if (
+		file.size / 1024 ** 2 >
+		(account.billingInfo?.storage.maxImageSize || Infinity)
+	) {
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
+			body: errorBody,
+			button: isBasicPlan
+				? {
+						text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
+						onClick: () => conf.openModal("USER_PLAN_MODAL_ID"),
+					}
+				: undefined,
+			duration: 4000,
+		});
+		return false;
+	}
+	return true;
+};
+
+export const catchDuplicateErrorResponse = async (response: Response) => {
+	if (response.status === 403) {
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.limitReached.header"),
+			body: conf.i18n.t("toolsPanel.addMedia.limitReached.duplicateBody"),
+			duration: 4000,
+		});
+	} else {
+		conf.notify({
+			variant: "error",
+			header: conf.i18n.t("toolsPanel.addMedia.unhandled.header"),
+			body: conf.i18n.t("toolsPanel.addMedia.unhandled.body"),
+			duration: 4000,
+		});
+	}
+	throw new Error(`HTTP status: ${response.status}`);
+};
+
+export const catchMediaErrorResponse = async (
+	response: Response,
+	mediaType: "image" | "video" | "audio",
+) => {
+	if (response.status === 403) {
+		const data = await response.json();
+		let errorBody = conf.i18n.t(
+			"toolsPanel.addMedia.limitReached.bodyWithoutLimit",
+		);
+		if (!data.isOwnerRequest) {
+			errorBody = conf.i18n.t(
+				"toolsPanel.addMedia.limitReached.bodyOwner",
+			);
+		} else if (data.currentUsage && data.storageLimit) {
+			errorBody = conf.i18n.t(
+				`toolsPanel.addMedia.limitReached.body.${
+					parseInt(data.storageLimit) < 100_000 ? "basic" : "plus"
+				}`,
+			);
+		}
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.limitReached.header"),
+			body: errorBody,
+			button:
+				data.isOwnerRequest && data.storageLimit <= 100
+					? {
+							text: conf.i18n.t(
+								"toolsPanel.addMedia.upgradeToPlus",
+							),
+							onClick: () => conf.openModal("USER_PLAN_MODAL_ID"),
+						}
+					: undefined,
+			duration: 8000,
+		});
+	} else if (response.status === 413) {
+		const data = await response.json();
+		let errorBody = conf.i18n.t(
+			"toolsPanel.addMedia.tooLarge.bodyWithoutLimit",
+		);
+		let isBasicPlan = false;
+		if (data.fileSizeLimit && data.fileSize) {
+			if (mediaType === "image") {
+				isBasicPlan = parseInt(data.fileSizeLimit) < 20;
+				errorBody = conf.i18n.t(
+					`toolsPanel.addMedia.tooLarge.imageBody.${isBasicPlan ? "basic" : "plus"}`,
+				);
+			} else {
+				isBasicPlan = parseInt(data.fileSizeLimit) < 1000;
+				errorBody = conf.i18n.t(
+					`toolsPanel.addMedia.tooLarge.audioOrVideoBody.${
+						isBasicPlan ? "basic" : "plus"
+					}`,
+				);
+			}
+		}
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
+			body: errorBody,
+			button: isBasicPlan
+				? {
+						text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
+						onClick: () => conf.openModal("USER_PLAN_MODAL_ID"),
+					}
+				: undefined,
+			duration: 4000,
+		});
+	} else if (response.status === 401) {
+		conf.openModal("MEDIA_UNAVAILABLE_MODAL_ID");
+	} else if (response.status === 415) {
+		conf.notify({
+			variant: "warning",
+			header: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.header"),
+			body: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.body"),
+			duration: 4000,
+		});
+	} else {
+		conf.notify({
+			variant: "error",
+			header: conf.i18n.t("toolsPanel.addMedia.unhandled.header"),
+			body: conf.i18n.t("toolsPanel.addMedia.unhandled.body"),
+			duration: 4000,
+		});
+	}
+	throw new Error(`HTTP status: ${response.status}`);
+};
+
+export const beforeMediaRemove = async (
+	mediaIds: string[],
+	boardId: string,
+): Promise<void> => {
+	fetch(`${window?.location.origin}/api/v1/media/usage/${boardId}`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+		},
+		body: JSON.stringify({ mediaIds, shouldIncrease: false }),
+	}).catch(error => {
+		console.error("Media storage error:", error);
+	});
+};
+
+export const beforeMediaUpload = async (
+	mediaIds: string[],
+	boardId: string,
+): Promise<boolean> => {
+	try {
+		const response = await fetch(
+			`${window?.location.origin}/api/v1/media/usage/${boardId}`,
+			{
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ mediaIds, shouldIncrease: true }),
+			},
+		);
+
+		if (response.status !== 200) {
+			await catchDuplicateErrorResponse(response);
+			return false;
+		}
+
+		return true;
+	} catch (error) {
+		console.error("Media storage error:", error);
+		return false;
+	}
+};

package/src/App/Paste/index.ts

@@ -0,0 +1,5 @@
+export * from "./tryToPasteFromMicroboard";
+export * from "./tryToPasteFromMiro";
+export * from "./tryToPasteImages";
+export * from "./pasteTextToTheBoard";
+export * from "./tryToPasteAsItemOrReturnText";

package/src/App/Paste/pasteTextToTheBoard.ts

@@ -0,0 +1,19 @@
+import { RichText, Board, Mbr } from "microboard-temp";
+
+export function pasteTextToTheBoard(board: Board, data: DataTransfer): void {
+	const richText = new RichText(board, new Mbr());
+	richText.transformation.translateTo(
+		board.pointer.point.x,
+		board.pointer.point.y,
+	);
+	richText.transformation.scaleBy(1, 1);
+	richText.editor.maxWidth = 600;
+	richText.editor.setSelectionHorisontalAlignment("left");
+	richText.insideOf = richText.itemType;
+	try {
+		richText.editor.editor.insertData(data);
+	} catch (error) {
+		console.error(error);
+	}
+	board.add(richText);
+}

package/src/App/Paste/tryToGetMarkdownFromDataTransfer.ts

@@ -0,0 +1,60 @@
+import {
+	conf,
+	transformHtmlOrTextToMarkdown,
+	EditorContainer,
+} from "microboard-temp";
+
+const isMarkdown = (text: string): boolean => {
+	if (!text) {
+		return false;
+	}
+
+	const markdownPatterns = [
+		/^#{1,6}\s.+/m, // (# H1, ## H2, ...)
+		/^\s*[-*]\s.+/m, // (* item, - item)
+		/^\s*\d+\.\s.+/m, // (1. item)
+		/\*\*[^*]+\*\*/, // (**bold**)
+		/(^|\s)\*[^*]+\*(\s|$)/, // (*italic*)
+		/__(.*?)__/, // (__bold__)
+		/(^|\s)_[^_]+_(\s|$)/, // (_italic_)
+		/~~[^~]+~~/, // (~~strikethrough~~)
+		/\[.+\]\(.+\)/, // [text](url)
+		/!\[.*?\]\(.*?\)/, // ![alt](url)
+		/^> .+/m, // (> quote)
+		/^```[\s\S]*```$/m, // (```code```)
+		/^-{3,}$/m, // (---)
+	];
+
+	return markdownPatterns.some(pattern => pattern.test(text));
+};
+
+export async function tryToGetMarkdownFromDataTransfer(
+	dataTransfer: DataTransfer,
+	textEditor?: EditorContainer,
+): Promise<DataTransfer | null> {
+	const html = dataTransfer?.getData("text/html");
+	const text = dataTransfer?.getData("text/plain");
+
+	const shouldSkipMarkdownTransform = Boolean(
+		textEditor?.getSelection() &&
+			textEditor?.hasTextInSelection() &&
+			conf.URL_REGEX.test(text),
+	);
+
+	if (
+		!dataTransfer?.getData("application/x-slate-fragment") &&
+		!shouldSkipMarkdownTransform
+	) {
+		try {
+			if (!isMarkdown(text) && html) {
+				return transformHtmlOrTextToMarkdown(text, html);
+			} else {
+				return transformHtmlOrTextToMarkdown(text);
+			}
+		} catch (err) {
+			console.warn("Error while parsing html to markdown", err);
+			return null;
+		}
+	}
+	return null;
+}

package/src/App/Paste/tryToPasteAsItemOrReturnText.ts

@@ -0,0 +1,72 @@
+import { Board } from "microboard-temp";
+import {
+	tryToPasteImages,
+	tryToPasteFromMiro,
+	tryToPasteFromMicroboard,
+} from ".";
+import { tryToGetMarkdownFromDataTransfer } from "App/Paste/tryToGetMarkdownFromDataTransfer";
+import { tryToPasteVideoByLink } from "App/Paste/tryToPasteVideoByLink";
+import { tryToPasteAudioByLink } from "App/Paste/tryToPasteAudioByLink";
+
+export async function tryToPasteAsItemOrReturnText(
+	event: ClipboardEvent | null,
+	dataTransfer: DataTransfer | null,
+	board: Board,
+	isLoggedIn: boolean,
+	accessToken: string | null,
+): Promise<DataTransfer | null> {
+	if (tryToPasteFromMiro(dataTransfer, board, accessToken, isLoggedIn)) {
+		event && preventPasteDefault(event);
+		return null;
+	}
+
+	const text = dataTransfer?.getData("text/plain");
+
+	if (!text) {
+		if (tryToPasteImages(dataTransfer, board, accessToken)) {
+			event && preventPasteDefault(event);
+		}
+		return null;
+	}
+
+	if (tryToPasteFromMicroboard(text, board)) {
+		event && preventPasteDefault(event);
+		return null;
+	}
+
+	const textEditor = board.selection.items.getSingle()?.getRichText()?.editor;
+
+	if (text && !textEditor?.getSelection() && window.enableVideos) {
+		if (tryToPasteVideoByLink(text, board)) {
+			event && preventPasteDefault(event);
+			return null;
+		}
+
+		if (tryToPasteAudioByLink(text, board)) {
+			event && preventPasteDefault(event);
+			return null;
+		}
+	}
+
+	if (dataTransfer) {
+		const markdownDataTransfer = await tryToGetMarkdownFromDataTransfer(
+			dataTransfer,
+			textEditor,
+		);
+		if (markdownDataTransfer) {
+			return markdownDataTransfer;
+		}
+	}
+
+	if (tryToPasteImages(dataTransfer, board, accessToken)) {
+		event && preventPasteDefault(event);
+		return null;
+	}
+
+	return dataTransfer;
+}
+
+export function preventPasteDefault(event: ClipboardEvent): void {
+	event.preventDefault();
+	event.stopPropagation();
+}

package/src/App/Paste/tryToPasteAudioByLink.ts

@@ -0,0 +1,35 @@
+import {
+	conf,
+	Board,
+	AudioItem,
+	calculateAudioPosition,
+} from "microboard-temp";
+
+function isAudioUrl(url: string): boolean {
+	const extension = url.split(".").pop()?.toLowerCase();
+	return !(
+		!url.startsWith("https://") ||
+		!extension ||
+		!conf.AUDIO_FORMATS.includes(extension)
+	);
+}
+
+export function tryToPasteAudioByLink(link: string, board: Board): boolean {
+	try {
+		if (isAudioUrl(link)) {
+			const audio = new AudioItem(board, false, link, board.events, "");
+			const { scaleX, scaleY, translateX, translateY } =
+				calculateAudioPosition(board, audio);
+			audio.transformation.applyTranslateTo(translateX, translateY);
+			audio.transformation.applyScaleTo(scaleX, scaleY);
+			audio.updateMbr();
+			const boardAudio = board.add(audio);
+			board.selection.removeAll();
+			board.selection.add(boardAudio);
+			return true;
+		}
+	} catch (error) {
+		console.error("Error while parsing audio url:", error);
+	}
+	return false;
+}

package/src/App/Paste/tryToPasteFromMicroboard.ts

@@ -0,0 +1,15 @@
+import { validateItemsMap, Board } from "microboard-temp";
+
+export function tryToPasteFromMicroboard(text: string, board: Board): boolean {
+	try {
+		const data = JSON.parse(text);
+		const isDataValid = validateItemsMap(data);
+		if (isDataValid) {
+			board.paste(data);
+			return true;
+		}
+	} catch (error) {
+		console.warn("Data is not an item, trying to paste as text");
+	}
+	return false;
+}

package/src/App/Paste/tryToPasteFromMiro.ts

@@ -0,0 +1,75 @@
+import { Board } from "microboard-temp";
+import { AUTH_CLIPBOARD_MODAL } from "features/ImportMiro/AuthClipboardModal/AuthClipboardModal";
+import { pasteMiroClipboard } from "features/ImportMiro/ImportMiroBoards/ImportBoardItem/MiroClipboardTransformer";
+import { openModal } from "shared/ui-lib/UiModal/UiModalContext";
+
+export function tryToPasteFromMiro(
+	dataTransfer: DataTransfer | null,
+	board: Board,
+	accessToken: string | null,
+	isLoggedIn: boolean,
+): boolean {
+	const html = dataTransfer?.getData("text/html");
+	const isDataFromMiro = html && /miro/i.test(html.substring(0, 100));
+	if (!isDataFromMiro) {
+		return false;
+	}
+	try {
+		const decoded = decodeMiroData(html);
+
+		if (decoded !== null) {
+			const miroData = JSON.parse(decoded);
+
+			if (!isLoggedIn && miroData !== null) {
+				openModal(AUTH_CLIPBOARD_MODAL);
+				return true;
+			}
+
+			pasteMiroClipboard(board, accessToken, miroData || []);
+
+			return true;
+		}
+	} catch (err) {
+		console.error(err);
+		// TODO: notification/ toast?
+	}
+	return false;
+}
+
+function adjustMiroBytes(byteArray: Uint8Array, adjustment: number): void {
+	for (let i = 0; i < byteArray.length; i++) {
+		const byte = byteArray[i];
+		if (byte < 256) {
+			byteArray[i] = (byte + adjustment) % 256;
+		}
+	}
+}
+
+function getMiroVersionSuffix(version: number): string {
+	return version > 0 ? `-v${version}` : "";
+}
+
+function decodeMiroData(encodedData: string): string | null {
+	return (function (encodedString: string, adjustment: number): string {
+		const decodedBase64 = atob(encodedString);
+		const byteArray = new Uint8Array(decodedBase64.length);
+
+		for (let i = 0; i < byteArray.length; i++) {
+			byteArray[i] = decodedBase64.charCodeAt(i);
+		}
+
+		adjustMiroBytes(byteArray, 197);
+		return new TextDecoder().decode(byteArray);
+	})(
+		(function (data: string, version = 1): string | null {
+			const versionSuffix = getMiroVersionSuffix(version);
+			const regex = new RegExp(
+				`<--\\(miro-data${versionSuffix}\\)(.*)(\\(\\/miro-data${versionSuffix}\\)-->)`,
+				"gi",
+			);
+			const match = regex.exec(data);
+			return match ? match[1] : null;
+		})(encodedData) || encodedData,
+		0,
+	);
+}

package/src/App/Paste/tryToPasteImages.ts

@@ -0,0 +1,44 @@
+import { Board, ImageItem, prepareImage } from "microboard-temp";
+
+export function tryToPasteImages(
+	dataTransfer: DataTransfer | null,
+	board: Board,
+	accessToken: string | null,
+): boolean {
+	let isFoundImageInClipboard = false;
+	const items = dataTransfer?.items;
+
+	if (!items) {
+		return false;
+	}
+
+	for (const item of Array.from(items)) {
+		if (item.type.indexOf("image") === -1) {
+			continue;
+		}
+		const file = item.getAsFile();
+		if (!file) {
+			continue;
+		}
+		isFoundImageInClipboard = true;
+		const reader = new FileReader();
+		reader.onload = event => {
+			prepareImage(event.target?.result, accessToken, board.getBoardId())
+				.then(imageData => {
+					const image = new ImageItem(imageData, board, board.events);
+					image.transformation.translateTo(
+						board.pointer.point.x,
+						board.pointer.point.y,
+					);
+					board.add(image);
+				})
+				.catch(er => {
+					console.error("Could not create image:", er);
+					// TODO notification
+				});
+		};
+
+		reader.readAsDataURL(file);
+	}
+	return isFoundImageInClipboard;
+}

package/src/App/Paste/tryToPasteVideoByLink.ts

@@ -0,0 +1,68 @@
+import {
+	conf,
+	getYouTubeThumbnail,
+	getYouTubeVideoPreview,
+	VideoItem,
+	Board,
+	calculatePosition,
+} from "microboard-temp";
+import { notify } from "shared/ui-lib/Toast/notify";
+import { t } from "i18next";
+
+export function tryToPasteVideoByLink(link: string, board: Board): boolean {
+	try {
+		const url = new URL(link);
+		url.pathname = url.pathname.replace("/shorts/", "/embed/");
+		const finalUrl = url.toString();
+		const youtubeId = conf.getYouTubeId(finalUrl);
+		if (youtubeId) {
+			createVideoItem(finalUrl, youtubeId, board);
+			return true;
+		}
+	} catch {
+		console.log("Can not get video id");
+	}
+	return false;
+}
+
+const createVideoItem = (url: string, youtubeId: string, board: Board) => {
+	const previewUrl = getYouTubeThumbnail(youtubeId, "maxres");
+	getYouTubeVideoPreview(previewUrl)
+		.then(preview => {
+			const videoItem = new VideoItem(
+				{
+					videoDimension: {
+						width: preview.width,
+						height: preview.height,
+					},
+					url,
+					previewUrl,
+				},
+				board,
+				board.events,
+				"",
+			);
+			videoItem.doOnceBeforeOnLoad(() => {
+				const { scaleX, scaleY, translateX, translateY } =
+					calculatePosition(videoItem, board);
+				videoItem.transformation.applyTranslateTo(
+					translateX,
+					translateY,
+				);
+				videoItem.transformation.applyScaleTo(scaleX, scaleY);
+				videoItem.updateMbr();
+				const boardVideo = board.add(videoItem);
+				board.selection.removeAll();
+				board.selection.add(boardVideo);
+			});
+		})
+		.catch(err => {
+			notify({
+				variant: "error",
+				header: t("video.error.header"),
+				body: t("video.error.body"),
+				duration: 5000,
+			});
+			console.error(err);
+		});
+};

package/src/App/Permissions.ts

@@ -0,0 +1,43 @@
+import type { Account } from "./Account";
+import { Storage } from "./Storage";
+
+export type Action = "owns" | "edits" | "reads";
+export type Resource = "boards" | "catalogs" | "groups";
+
+export class Permissions {
+	constructor(
+		private readonly account: Account,
+		private readonly storage: Storage,
+	) {}
+
+	checkPermissions(
+		action: Action,
+		resource: Resource,
+		resourceId: string | null,
+	): boolean {
+		if (resourceId === null) {
+			return false;
+		}
+		if (
+			action === "owns" &&
+			!this.account.isLoggedIn &&
+			resource === "boards"
+		) {
+			const targetBoard = this.storage.getCreatedBoard(resourceId);
+			return Boolean(targetBoard);
+		}
+
+		if (
+			!this.account.isLoggedIn ||
+			!this.account.tokenData ||
+			!this.account.tokenData[action]?.[resource]
+		) {
+			return false;
+		}
+
+		return (
+			this.account.tokenData[action]?.[resource]?.includes(resourceId) ??
+			false
+		);
+	}
+}