fix: Removes filesafe dependency from bold editor (#69)

* fix: remove filesafe dependency from bold editor

* chore: yarn install

* fix: update webpack config

* chore: update webpack config

Author: antsgar

.yarn/cache/filesafe-embed-npm-1.0.13-a521dfb974-8e69eb0fc7.zip

@@ -1,16 +1,8 @@
 import React from 'react';
-import FilesafeEmbed from 'filesafe-embed';
 import EditorKit from '@standardnotes/editor-kit';
 import DOMPurify  from 'dompurify';
 import { SKAlert } from 'sn-stylekit';
 
-// Not used directly here, but required to be imported so that it is included
-// in dist file.
-// Note that filesafe-embed also imports filesafe-js, but conditionally, so
-// it's not included in it's own dist files.
-// eslint-disable-next-line no-unused-vars
-import Filesafe from 'filesafe-js';
-
 export default class Editor extends React.Component {
 
   constructor(props) {
@@ -161,35 +153,25 @@ export default class Editor extends React.Component {
 
     this.editorKit = new EditorKit(delegate, {
       mode: 'html',
-      supportsFileSafe: true,
       // Redactor has its own debouncing, so we'll set ours to 0
       coallesedSavingDelay: 0
     });
   }
 
   async configureEditor() {
-    // We need to set this as a window variable so that the filesafe plugin
-    // can interact with this object passing it as an opt for some reason
-    // strips any functions off the objects.
-    const filesafeInstance = await this.editorKit.getFileSafe();
-    window.filesafe_params = {
-      embed: FilesafeEmbed,
-      client: filesafeInstance
-    };
     this.redactor = $R('#editor', {
       styles: true,
       toolbarFixed: true, // sticky toolbar
       tabAsSpaces: 2, // currently tab only works if you use spaces.
       tabKey: true, // explicitly set tabkey for editor use, not for focus.
       linkSize: 20000, // redactor default is 30, which truncates the link.
-      buttonsAdd: ['filesafe'],
       buttons: [
         'bold', 'italic', 'underline', 'deleted', 'format', 'fontsize',
-        'fontfamily', 'fontcolor', 'filesafe', 'link', 'lists', 'alignment',
+        'fontfamily', 'fontcolor', 'link', 'lists', 'alignment',
         'line', 'redo', 'undo', 'indent', 'outdent', 'textdirection', 'html'
       ],
       plugins: [
-        'filesafe', 'fontsize', 'fontfamily', 'fontcolor', 'alignment',
+        'fontsize', 'fontfamily', 'fontcolor', 'alignment',
         'table', 'inlinestyle', 'textdirection'
       ],
       fontfamily: [
@@ -206,7 +188,7 @@ export default class Editor extends React.Component {
           this.editorKit.onEditorValueChanged(html);
         },
         pasted: (_nodes) => {
-          this.editorKit.onEditorPaste();
+          this.editorKit.onEditorPaste?.();
         },
         image: {
           resized: (image) => {
@@ -222,16 +204,12 @@ export default class Editor extends React.Component {
       imageEditable: false,
       imageCaption: false,
       imageLink: false,
-      imageResizable: true, // requires image to be wrapped in a figure.
-      imageUpload: (formData, files, _event) => {
-        // Called when images are pasted from the clipboard too.
-        this.onEditorFilesDrop(files);
-      }
+      imageResizable: true // requires image to be wrapped in a figure.
     });
 
     this.redactor.editor.getElement().on('keyup.textsearcher', (event) => {
       const key = event.which;
-      this.editorKit.onEditorKeyUp({
+      this.editorKit.onEditorKeyUp?.({
         key,
         isSpace: key == this.redactor.keycodes.SPACE,
         isEnter: key == this.redactor.keycodes.ENTER
@@ -246,27 +224,6 @@ export default class Editor extends React.Component {
     }
   }
 
-  onEditorFilesDrop(files) {
-    if (!this.editorKit.canUseFileSafe()) {
-      return;
-    }
-
-    if (!this.editorKit.canUploadFiles()) {
-      // Open filesafe modal
-      this.redactor.plugin.filesafe.open();
-      return;
-    }
-
-    for (const file of files) {
-      // Observers in EditorKitInternal.js will handle successful upload
-      this.editorKit.uploadJSFileObject(file).then((descriptor) => {
-        if (!descriptor || !descriptor.uuid) {
-          // alert("File failed to upload. Please try again");
-        }
-      });
-    }
-  }
-
   /**
    * Checks if HTML is safe to render.
    */

.yarn/cache/filesafe-js-npm-1.0.5-9373a9e617-1db0bad186.zip

@@ -41,8 +41,6 @@
     "dompurify": "^2.2.9",
     "eslint": "*",
     "eslint-plugin-react": "*",
-    "filesafe-embed": "1.0.13",
-    "filesafe-js": "1.0.5",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.4.0",
     "react": "17.x",

packages/com.sncommunity.bold-editor/app/components/Editor.js

@@ -60,19 +60,13 @@ module.exports = {
       template: 'editor.index.ejs',
       filename: 'index.html'
     }),
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: require.resolve('filesafe-js/dist/filesafe-js/EncryptionWorker.js'), to: 'filesafe-js/EncryptionWorker.js' },
-      ],
-    }),
     new MergeIntoSingleFilePlugin({
       files: {
         "vendor.js": [
           'redactor/src/redactor.min.js',
           'redactor/plugins/**/*.min.js',
         ],
         "vendor.css": [
-          require.resolve('filesafe-embed/dist/dist.css'),
           'redactor/src/redactor.min.css',
           'redactor/plugins/inlinestyle/inlinestyle.min.css'
         ]

packages/com.sncommunity.bold-editor/package.json

@@ -7,10 +7,7 @@ module.exports = merge(config, {
   devtool: 'cheap-source-map',
   devServer: {
     port: 8001,
-    contentBase: path.resolve(__dirname, 'dist'),
-    disableHostCheck: true,
     historyApiFallback: true,
-    watchOptions: { aggregateTimeout: 300, poll: 1000 },
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',

packages/com.sncommunity.bold-editor/webpack.config.js

@@ -7165,8 +7165,6 @@ __metadata:
     dompurify: ^2.2.9
     eslint: "*"
     eslint-plugin-react: "*"
-    filesafe-embed: 1.0.13
-    filesafe-js: 1.0.5
     html-webpack-plugin: ^5.3.1
     mini-css-extract-plugin: ^1.4.0
     react: 17.x
@@ -16274,27 +16272,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesafe-embed@npm:1.0.13":
-  version: 1.0.13
-  resolution: "filesafe-embed@npm:1.0.13"
-  checksum: 8e69eb0fc784355b38958cbf707e24c0b9304466964eac47d9126fe9fcf3561623d1e6b62802db253d8bd5a536c952bcce1249651658e226be84bde15eed430c
-  languageName: node
-  linkType: hard
-
 "filesafe-embed@standardnotes/filesafe-embed#309a4282959ffe08ebb8d0e23dbddb60adbd09ce":
   version: 1.1.0
   resolution: "filesafe-embed@https://github.com/standardnotes/filesafe-embed.git#commit=309a4282959ffe08ebb8d0e23dbddb60adbd09ce"
   checksum: 3e795f069b31564b1c77d6af9920c75f63c034d12e9b1437e4de1384e30003496fe4e72bc85961d5a862be114e6f0acec51481288041d76e2ebd819675fbad04
   languageName: node
   linkType: hard
 
-"filesafe-js@npm:1.0.5":
-  version: 1.0.5
-  resolution: "filesafe-js@npm:1.0.5"
-  checksum: 1db0bad1861f072067011e271af35ef0f87a4c8b6f9b4e525d5e2ae8872da19418555d72467a5aca86145f678644f3d34e0118f4ea17c7cfc7094380a26f9551
-  languageName: node
-  linkType: hard
-
 "filesafe-js@standardnotes/filesafe-js#09278cc13b61b4dd672613201f69a034d5c41ed4":
   version: 1.0.6
   resolution: "filesafe-js@https://github.com/standardnotes/filesafe-js.git#commit=09278cc13b61b4dd672613201f69a034d5c41ed4"