@prozilla-os/text-editor 1.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sieben De Beule
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## About 
+
+`@prozilla-os/text-editor` is a text editor application for ProzillaOS.
+
+## Installation
+
+`@prozilla-os/core` is required to run this application.
+
+```sh
+$ npm install @prozilla-os/core @prozilla-os/text-editor
+$ yarn add @prozilla-os/core @prozilla-os/text-editor
+$ pnpm add @prozilla-os/core @prozilla-os/text-editor
+```
+
+## Usage
+
+```tsx
+import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
+import { textEditor } from "@prozilla-os/text-editor";
+
+function App() {
+  return (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ textEditor ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+## Links
+
+- [Website/demo][website]
+- [GitHub][github]
+- [npm][npm]
+- [Ko-fi][ko-fi]
+
+[website]: https://os.prozilla.dev/text-editor
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/text-editor
+[npm]: https://www.npmjs.com/package/@prozilla-os/text-editor
+[ko-fi]: https://ko-fi.com/prozilla

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@prozilla-os/text-editor",
+  "description": "A text editor application for ProzillaOS.",
+  "version": "1.0.1",
+  "homepage": "https://os.prozilla.dev/text-editor",
+  "author": {
+    "name": "Prozilla",
+    "email": "business@prozilla.dev",
+    "url": "https://prozilla.dev/"
+  },
+  "main": "src/index.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+    "directory": "packages/apps/text-editor"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.3.1",
+    "@prozilla-os/core": "1.0.11"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  },
+  "files": [
+    "src/**/*"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "test": "tsc --watch"
+  }
+}

package/src/components/TextEditor.module.css

@@ -0,0 +1,195 @@
+.TextEditor {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	text-align: start;
+}
+
+.TextEditor p,
+.TextEditor div,
+.TextEditor span,
+.TextEditor textarea {
+	font-size: 1em;
+}
+
+.View, .Code {
+	width: 100%;
+	height: 100%;
+	padding: 1rem !important;
+	color: var(--foreground-color-0) !important;
+	background-color: var(--background-color-2) !important;
+	border: none;
+	outline: none;
+	font-size: 1rem;
+	font-family: var(--body-font-family);
+	resize: none;
+	overflow: auto;
+}
+
+.View {
+	z-index: 2;
+}
+
+.MarkdownImage {
+	max-width: 100%;
+	object-fit: contain;
+	border-radius: var(--border-radius-0);
+	margin: 1rem 0.5rem 1rem 0;
+}
+
+.MarkdownBlockquote {
+	display: flex;
+	gap: 1rem;
+	flex-direction: column;
+	margin: 0;
+}
+
+.AlertContainer {
+	--color-0: var(--color-1);
+	--color-1: var(--background-color-0);
+	--color-2: var(--background-color-1);
+
+	margin: 0;
+	padding: 1rem 1.5rem;
+	border-left: 1rem solid var(--color-1);
+	background-color: var(--color-2);
+	border-radius: var(--border-radius-1);
+}
+
+.Alert {
+	display: inline-flex;
+	gap: 0.5rem;
+	justify-content: flex-start;
+	align-items: center;
+	margin-bottom: 0.5rem;
+	color: var(--color-0);
+	font-weight: 600;
+}
+
+.Alert > svg * {
+	fill: var(--color-0);
+}
+
+.ImportantAlert {
+	--color-0: var(--purple-0);
+	--color-1: var(--purple-1);
+	--color-2: var(--purple-2);
+}
+
+.NoteAlert {
+	--color-0: var(--blue-0);
+	--color-1: var(--blue-1);
+	--color-2: var(--blue-2);
+}
+
+.TipAlert {
+	--color-0: var(--green-0);
+	--color-1: var(--green-1);
+	--color-2: var(--green-2);
+}
+
+.WarningAlert {
+	--color-0: var(--yellow-0);
+	--color-1: var(--yellow-1);
+	--color-2: var(--yellow-2);
+}
+
+.CautionAlert {
+	--color-0: var(--red-0);
+	--color-1: var(--red-1);
+	--color-2: var(--red-2);
+}
+
+
+.View code {
+	position: relative;
+	font-family: var(--mono-font-family);
+	border-radius: var(--border-radius-1);
+	padding: 0.125rem 0.25rem;
+	font-size: 0.875rem;
+	letter-spacing: -0.01rem;
+}
+
+.View code::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--background-color-1);
+	border-radius: inherit;
+	z-index: -1;
+}
+
+.MarkdownLink {
+	position: relative;
+	display: inline-block;
+	color: var(--light-blue-0);
+	transition: color 200ms ease-in-out;
+}
+
+.MarkdownLink:hover, .MarkdownLink:focus-visible {
+	color: var(--light-blue-1);
+}
+
+.MarkdownLink > * {
+	color: inherit;
+}
+
+div > .MarkdownLink {
+	margin: 1rem 0;
+}
+
+.MarkdownLink > .MarkdownImage {
+	margin: 0;
+}
+
+.View h1,
+.View h2,
+.View h3,
+.View h4,
+.View h5,
+.View h6 {
+	margin-top: 1.75rem;
+	margin-bottom: -0.25rem;
+}
+
+.View p {
+	line-height: 1.375rem;
+}
+
+.View li > ul {
+	margin: 1rem 0;
+}
+
+.View table {
+	margin: 1rem 0;
+	border-collapse: collapse;
+}
+
+.View table, .View th, .View td {
+	border: 0.2rem solid var(--background-color-0);
+}
+
+.View th, .View td {
+	padding: 0.5rem;
+}
+
+.Code {
+	margin: 0;
+	cursor: default;
+}
+
+.Code *[class*="hljs-string"] { color: var(--green-0); }
+.Code *[class*="hljs-literal"] { color: var(--yellow-0); }
+.Code *[class*="hljs-number"] { color: var(--yellow-0); }
+.Code *[class*="hljs-keyword"] { color: var(--blue-0); }
+.Code *[class*="hljs-title"] { color: var(--cyan-0); }
+.Code *[class*="hljs-name"] { color: var(---red-0); }
+.Code *[class*="hljs-attr"] { color: var(--blue-0); }
+.Code *[class*="hljs-param"] { color: var(---red-0); }
+.Code *[class*="hljs-comment"] { color: var(--black-0); }
+.Code *[class*="linenumber"] { color: var(--black-0); }
+.Code *[class*="hljs-meta"] { color: var(--blue-0); }

package/src/components/TextEditor.tsx

@@ -0,0 +1,208 @@
+import { ReactNode, Ref, useEffect, useRef, useState } from "react";
+import styles from "./TextEditor.module.css";
+import Markdown from "markdown-to-jsx";
+import { MarkdownLink } from "./overrides/MarkdownLink";
+import { MarkdownImage } from "./overrides/MarkdownImage";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { MarkdownBlockquote } from "./overrides/MarkdownBlockquote";
+import { App, ClickAction, CODE_EXTENSIONS, Divider, DropdownAction, FileSelector, FileSelectorMode, HeaderMenu, ModalsManager, useSystemManager, useVirtualRoot, useWindowedModal, useWindowsManager, VirtualFile, WindowProps, WindowsManager } from "@prozilla-os/core";
+import { DEFAULT_ZOOM, EXTENSION_TO_LANGUAGE, ZOOM_FACTOR } from "../constants/textEditor.const";
+
+const OVERRIDES = {
+	a: MarkdownLink,
+	img: MarkdownImage,
+	blockquote: MarkdownBlockquote,
+};
+
+export interface MarkdownProps {
+	modalsManager: ModalsManager;
+	setCurrentFile: Function;
+	currentFile: VirtualFile;
+	app: App;
+	windowsManager: WindowsManager;
+	children?: ReactNode;
+}
+
+interface TextEditorProps extends WindowProps {
+	file?: VirtualFile;
+	mode?: "view" | "edit";
+	path?: string;
+}
+
+export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app, modalsManager }: TextEditorProps) {
+	const { windowsConfig, modalsConfig } = useSystemManager();	
+	const ref = useRef<HTMLDivElement | HTMLTextAreaElement>();
+	const windowsManager = useWindowsManager();
+	const virtualRoot = useVirtualRoot();
+	const [currentFile, setCurrentFile] = useState<VirtualFile | null>(file as VirtualFile);
+	const [currentMode, setCurrentMode] = useState<TextEditorProps["mode"]>(mode);
+	const [content, setContent] = useState(file?.content ?? "");
+	const [unsavedChanges, setUnsavedChanges] = useState(file == null);
+	const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+	const [initialised, setInitialised] = useState(false);
+	const { openWindowedModal } = useWindowedModal();
+
+	useEffect(() => {
+		void (async () => {
+			let newContent = "";
+
+			// Load file
+			if (currentFile) {
+				if (currentFile.content) {
+					newContent = currentFile.content;
+				} else if (currentFile.source) {
+					await fetch(currentFile.source).then((response) =>
+						response.text()
+					).then((response) => {
+						newContent = response;
+					});
+				}
+
+				const iconUrl = currentFile.getIconUrl();
+				if (iconUrl)
+					setIconUrl?.(iconUrl);
+
+				if (newContent?.trim() === "")
+					setCurrentMode("edit");
+			} else if (app != null && app.iconUrl != null) {
+				setIconUrl?.(app.iconUrl);
+			}
+	
+			setContent(newContent);
+
+			if (ref.current) {
+				(ref.current as HTMLElement).scrollTo(0, 0);
+			}
+		})();
+	}, [app?.id, currentFile, setIconUrl]);
+
+	useEffect(() => {
+		// Update title
+		let label = currentFile?.id ?? "Untitled";
+
+		if (unsavedChanges)
+			label += "*";
+
+		if (currentMode === "view")
+			label += " (preview)";
+
+		setTitle?.(app != null ? `${label} ${windowsConfig.titleSeparator} ${app.name}` : label);
+	}, [currentFile, setTitle, unsavedChanges, currentMode, app?.name]);
+
+	useEffect(() => {
+		if (!initialised && currentFile == null && path != null) {
+			const newFile = virtualRoot?.navigate(path);
+
+			if (newFile == null || !newFile.isFile())
+				return;
+
+			setCurrentFile(newFile as VirtualFile);
+			setInitialised(true);
+		}
+	}, [path, currentFile]);
+
+	const newText = () => {
+		setCurrentFile(null);
+		setCurrentMode("edit");
+		setUnsavedChanges(true);
+	};
+
+	const saveTextAs = () => {
+		onChange({ target: { value: content } });
+	};
+
+	const saveText = () => {
+		if (currentFile == null)
+			return saveTextAs();
+
+		currentFile.setContent(content);
+		onChange({ target: { value: content } });
+	};
+
+	const onChange = (event: Event | { target: { value: string } }) => {
+		const value = (event.target as HTMLInputElement).value;
+
+		if (currentFile != null) {
+			setUnsavedChanges(currentFile.content !== value);
+		} else {
+			setUnsavedChanges(true);
+		}
+
+		return setContent(value);
+	};
+
+	const overrides: Record<string, object> = {};
+	for (const [key, value] of Object.entries(OVERRIDES)) {
+		overrides[key] = {
+			component: value,
+			props: {
+				modalsManager,
+				setCurrentFile,
+				currentFile,
+				app,
+				windowsManager
+			} as MarkdownProps
+		};
+	}
+
+	return <div className={styles.TextEditor} style={{ fontSize: zoom }}>
+		<HeaderMenu>
+			<DropdownAction label="File" showOnHover={false}>
+				<ClickAction label="New" onTrigger={() => { newText(); }} shortcut={["Control", "e"]}/>
+				<ClickAction label="Open" onTrigger={() => {
+					openWindowedModal({
+						size: modalsConfig.defaultFileSelectorSize,
+						Modal: (props: object) => <FileSelector
+							type={FileSelectorMode.Single}
+							onFinish={(file) => {
+								setCurrentFile(file as VirtualFile);
+								setUnsavedChanges(false);
+							}}
+							{...props}
+						/>
+					});
+				}} shortcut={["Control", "o"]}/>
+				<Divider/>
+				<ClickAction label="Save" onTrigger={() => { saveText(); }} shortcut={["Control", "s"]}/>
+				{/* <ClickAction label={`Reveal in ${APP_NAMES.FILE_EXPLORER}`} disabled={currentFile == null} onTrigger={() => {
+					if (windowsManager != null)	currentFile?.parent?.open(windowsManager);
+				}}/> */}
+				<Divider/>
+				<ClickAction label="Quit" onTrigger={() => { close?.(); }} shortcut={["Control", "q"]}/>
+			</DropdownAction>
+			<DropdownAction label="View" showOnHover={false}>
+				<ClickAction label={currentMode === "view" ? "Edit mode" : "Preview mode"} onTrigger={() => {
+					setCurrentMode(currentMode === "view" ? "edit" : "view");
+				}} shortcut={["Control", "u"]}/>
+				<Divider/>
+				<ClickAction label="Zoom in" onTrigger={() => { setZoom(zoom + ZOOM_FACTOR); }} shortcut={["Control", "+"]}/>
+				<ClickAction label="Zoom out" onTrigger={() => { setZoom(zoom - ZOOM_FACTOR); }} shortcut={["Control", "-"]}/>
+				<ClickAction label="Reset Zoom" disabled={zoom == DEFAULT_ZOOM} onTrigger={() => { setZoom(DEFAULT_ZOOM); }} shortcut={["Control", "0"]}/>
+			</DropdownAction>
+		</HeaderMenu>
+		{currentMode === "view"
+			? currentFile?.extension != null && CODE_EXTENSIONS.includes(currentFile?.extension)
+				? <SyntaxHighlighter
+					language={EXTENSION_TO_LANGUAGE[currentFile?.extension] ?? currentFile?.extension}
+					className={styles.Code}
+					useInlineStyles={false}
+					showLineNumbers={true}
+				>{content}</SyntaxHighlighter>
+				: <div ref={ref as Ref<HTMLDivElement>} className={styles.View}>
+					{currentFile?.extension === "md"
+						? <Markdown options={{ overrides } as object}>{content}</Markdown>
+						: <pre><p>{content}</p></pre>
+					}
+				</div>
+			: <textarea
+				ref={ref as Ref<HTMLTextAreaElement>}
+				className={styles.View}
+				value={content}
+				onChange={onChange}
+				spellCheck={false}
+				autoComplete="off"
+				autoFocus
+			/>
+		}
+	</div>;
+}

package/src/components/overrides/MarkdownBlockquote.tsx

@@ -0,0 +1,85 @@
+import { MarkdownProps } from "../TextEditor";
+import { Attributes, Children, cloneElement, DetailedHTMLProps, isValidElement, ReactNode } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationCircle, faExclamationTriangle, faInfoCircle, faLightbulb } from "@fortawesome/free-solid-svg-icons";
+import styles from "../TextEditor.module.css";
+import { sanitizeProps } from "../../core/_utils/sanitizeProps";
+
+type Props = Partial<unknown> & Attributes & { children: ReactNode, className?: string };
+
+export function MarkdownBlockquote({ children, ...props }: MarkdownProps) {
+	sanitizeProps(props);
+
+	const formatContent = (children: ReactNode): [ReactNode, string | null] => {
+		if (!children) return [null, null];
+
+		let alertType: string | null = null;
+
+		children = Children.map(children, (child) => {
+			if (isValidElement(child)) {
+				const { children, ...props } = child.props as Props;
+
+				const [newChildren, childAlertType] = formatContent(children);
+
+				if (childAlertType != null)
+					props.className = `${styles.AlertContainer} ${styles[childAlertType + "Alert"]}`;
+
+				return cloneElement(child, {
+					...props,
+					children: newChildren,
+				} as Props);
+			} else if (typeof child !== "string") {
+				return child;
+			}
+
+			switch (child) {
+				case "[!IMPORTANT]":
+					child = <span className={styles.Alert}>
+						<FontAwesomeIcon icon={faExclamationCircle}/>
+						Important
+					</span>;
+					alertType = "Important";
+					break;
+				case "[!NOTE]":
+					child = <span className={styles.Alert}>
+						<FontAwesomeIcon icon={faInfoCircle}/>
+						Note
+					</span>;
+					alertType = "Note";
+					break;
+				case "[!TIP]":
+					child = <span className={styles.Alert}>
+						<FontAwesomeIcon icon={faLightbulb}/>
+						Tip
+					</span>;
+					alertType = "Tip";
+					break;
+				case "[!WARNING]":
+					child = <span className={styles.Alert}>
+						<FontAwesomeIcon icon={faExclamationTriangle}/>
+						Warning
+					</span>;
+					alertType = "Warning";
+					break;
+				case "[!CAUTION]":
+					child = <span className={styles.Alert}>
+						<FontAwesomeIcon icon={faExclamationTriangle}/>
+						Caution
+					</span>;
+					alertType = "Caution";
+					break;
+			}
+
+			return child;
+		});
+
+		return [children, alertType];
+	};
+
+	return <blockquote
+		{...(props as DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>)}
+		className={styles.MarkdownBlockquote}
+	>
+		{formatContent(children)[0]}
+	</blockquote>;
+}

package/src/components/overrides/MarkdownImage.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { MarkdownProps } from "../TextEditor";
+import styles from "../TextEditor.module.css";
+import { sanitizeProps } from "../../core/_utils/sanitizeProps";
+
+interface MarkdownImageProps extends MarkdownProps {
+	src: string;
+	alt: string
+}
+
+export function MarkdownImage({ alt, src, ...props }: MarkdownImageProps) {
+	const source = useMemo(() => {
+		if (src.startsWith("public")) {
+			return src.replace(/^public\//g, "/");
+		}
+
+		return src;
+	}, [src]);
+
+	sanitizeProps(props);
+
+	return <img
+		{...props}
+		src={source}
+		className={styles.MarkdownImage}
+		alt={alt}
+	/>;
+}

package/src/components/overrides/MarkdownLink.tsx

@@ -0,0 +1,80 @@
+import { MouseEventHandler, ReactNode, useMemo } from "react";
+import { faClipboard, faExternalLink } from "@fortawesome/free-solid-svg-icons";
+import { MarkdownProps } from "../TextEditor";
+import styles from "../TextEditor.module.css";
+import { Actions, ClickAction, copyToClipboard, DIALOG_CONTENT_TYPES, DialogBox, ModalProps, removeUrlProtocol, TextDisplay, useContextMenu, useWindowedModal, Vector2 } from "@prozilla-os/core";
+import { sanitizeProps } from "../../core/_utils/sanitizeProps";
+
+interface MarkdownLinkProps extends MarkdownProps {
+	href: string;
+	children: ReactNode;
+}
+
+export function MarkdownLink({ href, children, windowsManager, currentFile, setCurrentFile, app, ...props }: MarkdownLinkProps) {
+	const { openWindowedModal } = useWindowedModal();
+
+	const onClick = (event: MouseEvent) => {
+		event.preventDefault();
+
+		if (!href.startsWith("http://") && !href.startsWith("https://")) {
+			const target = currentFile.parent?.navigate(href);
+			if (target != null) {
+				if (target.isFile()) {
+					setCurrentFile(target);
+				} else {
+					windowsManager.open("file-explorer", { path: target.path });
+				}
+			} else {
+				openWindowedModal({
+					iconUrl: app?.iconUrl as string | undefined,
+					title: "Failed to open link",
+					size: new Vector2(450, 150),
+					Modal: (props: ModalProps) =>
+						<DialogBox {...props}>
+							<p>Target not found: "{href}"</p>
+							<button data-type={DIALOG_CONTENT_TYPES.closeButton}>Ok</button>
+						</DialogBox>
+				});
+			}
+		} else {
+			window.open(href, "_blank")?.focus();
+		}
+	};
+
+	const { onContextMenu } = useContextMenu({ Actions: (props) =>
+		<Actions {...props}>
+			<TextDisplay>{removeUrlProtocol(href)}</TextDisplay>
+			<ClickAction label="Open link" icon={faExternalLink} onTrigger={(event) => {
+				onClick(event as MouseEvent);
+			}}/>
+			<ClickAction label="Copy link" icon={faClipboard} onTrigger={() => {
+				copyToClipboard(href);
+			}}/>
+		</Actions>
+	});
+
+	const title = useMemo<string>(() => {
+		let title: string = "";
+		try {
+			title = new URL(href).hostname;
+		} catch (error) {
+			title = href.split("/").pop() ?? "";
+		}
+		return title;
+	}, [href]);
+
+	sanitizeProps(props);
+
+	return <a
+		{...props}
+		className={styles.MarkdownLink}
+		target="_blank"
+		rel="noreferrer"
+		href={href}
+		onContextMenu={onContextMenu as unknown as MouseEventHandler}
+		onClick={onClick as unknown as MouseEventHandler}
+		title={title}
+	>
+		{children}
+	</a>;
+}

package/src/constants/textEditor.const.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_ZOOM = 16;
+export const ZOOM_FACTOR = 4;
+
+export const EXTENSION_TO_LANGUAGE: Record<string, string> = {
+	"js": "javascript",
+	"jsx": "javascript",
+	"ts": "typescript",
+	"tsx": "typescript",
+	"yml": "yaml",
+};

package/src/core/_utils/sanitizeProps.ts

@@ -0,0 +1,7 @@
+export function sanitizeProps(props: Record<string, unknown>) {
+	delete props.modalsManager;
+	delete props.setCurrentFile;
+	delete props.currentFile;
+	delete props.app;
+	delete props.windowsManager;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import { App } from "@prozilla-os/core";
+import { TextEditor } from "./components/TextEditor";
+
+const textEditor = new App("Text Editor", "text-editor", TextEditor)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/text-editor.svg");
+
+export { textEditor };