Add rtf to TinyMCE

README.md

@@ -204,7 +204,7 @@ docker run -dp 3000:3000 --rm --name daedalos daedalos
 - [eSheep](https://adrianotiger.github.io/web-esheep/)
 - Activate from Start Menu or **_SHIFT+F10_**
 
-### [TinyMCE](https://www.tiny.cloud/tinymce/) (**_.whtml_**)
+### [TinyMCE](https://www.tiny.cloud/tinymce/) (**_.rtf, .whtml_**)
 
 - Read & WYSIWYG modes
 - File save support

components/apps/TinyMCE/types.ts

@@ -5,3 +5,11 @@ declare global {
     tinymce: TinyMCE;
   }
 }
+
+export interface IRTFJS {
+  RTFJS: {
+    Document: new (documentData: Buffer) => {
+      render: () => Promise<HTMLElement[]>;
+    };
+  };
+}

components/apps/TinyMCE/useTinyMCE.ts

@@ -3,6 +3,7 @@ import {
   draggableEditor,
   setReadOnlyMode,
 } from "components/apps/TinyMCE/functions";
+import type { IRTFJS } from "components/apps/TinyMCE/types";
 import {
   getModifiedTime,
   getProcessByFileExtension,
@@ -81,7 +82,17 @@ const useTinyMCE = (
 
       if (fileContents.length > 0) setReadOnlyMode(editor);
 
+      if (extname(url) === ".rtf") {
+        const { RTFJS } = (await import("rtf.js")) as unknown as IRTFJS;
+        const rtfDoc = new RTFJS.Document(fileContents);
+        const rtfHtml = await rtfDoc.render();
+
+        editor.setContent(
+          rtfHtml.map((domElement) => domElement.outerHTML).join("")
+        );
+      } else {
         editor.setContent(fileContents.toString());
+      }
 
       linksToProcesses();
       updateTitle(url);
@@ -100,7 +111,13 @@ const useTinyMCE = (
         const saveUrl = url || DEFAULT_SAVE_PATH;
 
         try {
-          await writeFile(saveUrl, editor.getContent(), true);
+          await writeFile(
+            extname(saveUrl) === ".rtf"
+              ? saveUrl.replace(".rtf", ".whtml")
+              : saveUrl,
+            editor.getContent(),
+            true
+          );
           updateFolder(dirname(saveUrl), basename(saveUrl));
           updateTitle(saveUrl);
         } catch {

components/system/Files/FileEntry/extensions.ts

@@ -118,6 +118,7 @@ const extensions: Record<string, Extension> = {
   ".pdf": types.PdfDocument,
   ".pls": types.AudioPlaylist,
   ".py": types.PythonFile,
+  ".rtf": types.WysiwygHtmlDocument,
   ".spl": types.FutureSplash,
   ".svg": types.SvgFile,
   ".swf": types.ShockwaveFlash,

package.json

@@ -68,6 +68,7 @@
     "react-dom": "^18.2.0",
     "react-rnd": "^10.3.7",
     "resedit": "^1.6.0",
+    "rtf.js": "^3.0.9",
     "styled-components": "^5.3.6",
     "utif": "https://github.com/photopea/UTIF.js",
     "wasi-js": "^1.7.2"

public/CREDITS.md

@@ -74,6 +74,7 @@ This project is greatly augmented by code from the open source community. Thank
 - [Print.js](https://github.com/crabbly/print.js)
 - [Kiwi IRC](https://github.com/kiwiirc/kiwiirc)
 - [ClassiCube](https://github.com/UnknownShadow200/ClassiCube)
+- [rtf.js](https://github.com/tbluemel/rtf.js)
 
 ## Services
 

yarn.lock

@@ -2017,7 +2017,7 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
-codepage@~1.15.0:
+codepage@^1.15.0, codepage@~1.15.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.15.0.tgz#2e00519024b39424ec66eeb3ec07227e692618ab"
   integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
@@ -5844,6 +5844,13 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rtf.js@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/rtf.js/-/rtf.js-3.0.9.tgz#27d4f4e26372ba080b945ee48293347346de943e"
+  integrity sha512-I1GpDat4i548WzmeZXv27f/743984fvEeeBS8BC01/Sop17pMlUl3M7DYcdcB3PUvOZTrFIMxGZx8qw7cSMAKQ==
+  dependencies:
+    codepage "^1.15.0"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"