feat: Attachment of Files to Documents using S3.

example/src/index.js

@@ -80,7 +80,6 @@ class Example extends React.Component {
 
  handleChange = debounce(value => {
  const text = value();
- console.log(text);
  localStorage.setItem("saved", text);
  }, 250);
 
@@ -166,6 +165,20 @@ class Example extends React.Component {
  );
  });
  }}
+ uploadFile={file => {
+ console.log("File upload triggered: ", file);
+
+ // Delay to simulate time taken to upload
+ return new Promise(resolve => {
+ setTimeout(
+ () =>
+ resolve(
+ "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+ ),
+ 1500
+ );
+ });
+ }}
  embeds={[
  {
  title: "YouTube",

src/commands/insertAllFiles.ts

@@ -0,0 +1,70 @@
+import { ToastType } from "../types";
+
+const insertAllFiles = function(view, event, files, options) {
+ if (files.length === 0) return;
+
+ const {
+ dictionary,
+ uploadFile,
+ onFileUploadStart,
+ onFileUploadStop,
+ onShowToast,
+ } = options;
+
+ if (!uploadFile) {
+ console.warn("uploadFile callback must be defined to handle file uploads.");
+ return;
+ }
+
+ // okay, we have some dropped files and a handler – lets stop this
+ // event going any further up the stack
+ event.preventDefault();
+
+ // let the user know we're starting to process the files
+ if (onFileUploadStart) onFileUploadStart();
+
+ // we'll use this to track of how many files have succeeded or failed
+ let complete = 0;
+
+ const { state } = view;
+ const { from, to } = state.selection;
+
+ // the user might have dropped multiple files at once, we need to loop
+ for (const file of files) {
+ // start uploading the file file to the server. Using "then" syntax
+ // to allow all placeholders to be entered at once with the uploads
+ // happening in the background in parallel.
+ uploadFile(file)
+ .then(src => {
+ const title = file.name;
+ const href = src;
+
+ view.dispatch(
+ view.state.tr
+ .insertText(title, from, to)
+ .addMark(
+ from,
+ to + title.length,
+ state.schema.marks.link.create({ href })
+ )
+ );
+ })
+ .catch(error => {
+ console.error(error);
+ if (onShowToast) {
+ onShowToast(dictionary.fileUploadError, ToastType.Error);
+ }
+ })
+ // eslint-disable-next-line no-loop-func
+ .finally(() => {
+ complete++;
+
+ // once everything is done, let the user know
+ if (complete === files.length) {
+ if (onFileUploadStop) onFileUploadStop();
+ }
+ });
+ }
+};
+
+export default insertAllFiles;

src/components/BlockMenu.tsx

@@ -10,6 +10,7 @@ import Input from "./Input";
 import VisuallyHidden from "./VisuallyHidden";
 import getDataTransferFiles from "../lib/getDataTransferFiles";
 import insertFiles from "../commands/insertFiles";
+import insertAllFiles from "../commands/insertAllFiles";
 import getMenuItems from "../menus/block";
 import baseDictionary from "../dictionary";
 
@@ -22,8 +23,11 @@ type Props = {
  view: EditorView;
  search: string;
  uploadImage?: (file: File) => Promise<string>;
+ uploadFile?: (file: File) => Promise<string>;
  onImageUploadStart?: () => void;
  onImageUploadStop?: () => void;
+ onFileUploadStart?: () => void;
+ onFileUploadStop?: () => void;
  onShowToast?: (message: string, id: string) => void;
  onLinkToolbarOpen: () => void;
  onClose: () => void;
@@ -42,6 +46,7 @@ type State = {
 class BlockMenu extends React.Component<Props, State> {
  menuRef = React.createRef<HTMLDivElement>();
  inputRef = React.createRef<HTMLInputElement>();
+ fileInputRef = React.createRef<HTMLInputElement>();
 
  state: State = {
  left: -1000,
@@ -154,6 +159,8 @@ class BlockMenu extends React.Component<Props, State> {
  switch (item.name) {
  case "image":
  return this.triggerImagePick();
+ case "file":
+ return this.triggerFilePick();
  case "embed":
  return this.triggerLinkInput(item);
  case "link": {
@@ -235,6 +242,12 @@ class BlockMenu extends React.Component<Props, State> {
  }
  };
 
+ triggerFilePick = () => {
+ if (this.fileInputRef.current) {
+ this.fileInputRef.current.click();
+ }
+ };
+
  triggerLinkInput = item => {
  this.setState({ insertItem: item });
  };
@@ -273,6 +286,32 @@ class BlockMenu extends React.Component<Props, State> {
  this.props.onClose();
  };
 
+ handleFilePicked = event => {
+ const files = getDataTransferFiles(event);
+
+ const {
+ view,
+ uploadFile,
+ onFileUploadStart,
+ onFileUploadStop,
+ onShowToast,
+ } = this.props;
+ const { state } = view;
+ const parent = findParentNode(node => !!node)(state.selection);
+
+ if (parent) {
+ insertAllFiles(view, event, files, {
+ uploadFile,
+ onFileUploadStart,
+ onFileUploadStop,
+ onShowToast,
+ dictionary: this.props.dictionary,
+ });
+ }
+
+ this.props.onClose();
+ };
+
  clearSearch() {
  const { state, dispatch } = this.props.view;
  const parent = findParentNode(node => !!node)(state.selection);
@@ -344,7 +383,13 @@ class BlockMenu extends React.Component<Props, State> {
  }
 
  get filtered() {
- const { dictionary, embeds, search = "", uploadImage } = this.props;
+ const {
+ dictionary,
+ embeds,
+ search = "",
+ uploadImage,
+ uploadFile,
+ } = this.props;
  let items: (EmbedDescriptor | MenuItem)[] = getMenuItems(dictionary);
  const embedItems: EmbedDescriptor[] = [];
 
@@ -370,6 +415,9 @@ class BlockMenu extends React.Component<Props, State> {
  // If no image upload callback has been passed, filter the image block out
  if (!uploadImage && item.name === "image") return false;
 
+ // If no file upload callback has been passed, filter the file block out
+ if (!uploadFile && item.name === "file") return false;
+
  const n = search.toLowerCase();
  return (
  (item.title || "").toLowerCase().includes(n) ||
@@ -399,7 +447,7 @@ class BlockMenu extends React.Component<Props, State> {
  }
 
  render() {
- const { dictionary, isActive, uploadImage } = this.props;
+ const { dictionary, isActive, uploadImage, uploadFile } = this.props;
  const items = this.filtered;
  const { insertItem, ...positioning } = this.state;
 
@@ -470,6 +518,16 @@ class BlockMenu extends React.Component<Props, State> {
  />
  </VisuallyHidden>
  )}
+ {uploadFile && (
+ <VisuallyHidden>
+ <input
+ type="file"
+ ref={this.fileInputRef}
+ onChange={this.handleFilePicked}
+ accept="*"
+ />
+ </VisuallyHidden>
+ )}
  </Wrapper>
  </Portal>
  );

src/index.tsx

@@ -94,11 +94,14 @@ export type Props = {
  [name: string]: (view: EditorView, event: Event) => boolean;
  };
  uploadImage?: (file: File) => Promise<string>;
+ uploadFile?: (file: File) => Promise<string>;
  onSave?: ({ done: boolean }) => void;
  onCancel?: () => void;
  onChange: (value: () => string) => void;
  onImageUploadStart?: () => void;
  onImageUploadStop?: () => void;
+ onFileUploadStart?: () => void;
+ onFileUploadStop?: () => void;
  onCreateLink?: (title: string) => Promise<string>;
  onSearchLink?: (term: string) => Promise<SearchResult[]>;
  onClickLink: (href: string, event: MouseEvent) => void;
@@ -132,6 +135,12 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
  onImageUploadStop: () => {
  // no default behavior
  },
+ onFileUploadStart: () => {
+ // no default behavior
+ },
+ onFileUploadStop: () => {
+ // no default behavior
+ },
  onClickLink: href => {
  window.open(href, "_blank");
  },
@@ -628,9 +637,12 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
  search={this.state.blockMenuSearch}
  onClose={this.handleCloseBlockMenu}
  uploadImage={this.props.uploadImage}
+ uploadFile={this.props.uploadFile}
  onLinkToolbarOpen={this.handleOpenLinkMenu}
  onImageUploadStart={this.props.onImageUploadStart}
  onImageUploadStop={this.props.onImageUploadStop}
+ onFileUploadStart={this.props.onFileUploadStart}
+ onFileUploadStop={this.props.onFileUploadStop}
  onShowToast={this.props.onShowToast}
  embeds={this.props.embeds}
  />

src/menus/block.ts

@@ -107,6 +107,12 @@ export default function blockMenuItems(
  icon: ImageIcon,
  keywords: "picture photo",
  },
+ {
+ name: "file",
+ title: "File",
+ icon: ImageIcon,
+ keywords: "doc pdf",
+ },
  {
  name: "link",
  title: dictionary.link,