@modusoperandi/licit 0.13.1 → 0.13.2

package/src/ImageUploadPlaceholderPlugin.js

@@ -1,192 +1,192 @@
-// @flow
-
-import nullthrows from 'nullthrows';
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { EditorState, TextSelection } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { EditorView } from 'prosemirror-view';
-
-import { IMAGE } from './NodeNames';
-import uuid from './ui/uuid';
-
-import './ui/czi-image-upload-placeholder.css';
-
-const IMAGE_FILE_TYLES = new Set([
-  'image/jpeg',
-  'image/gif',
-  'image/png',
-  'image/jpg',
-]);
-
-const TITLE = 'Uploading...';
-
-const INNER_HTML = new Array(4).join(
-  '<div class="czi-image-upload-placeholder-child"></div>'
-);
-
-function isImageUploadPlaceholderPlugin(plugin: Plugin): boolean {
-  return plugin instanceof ImageUploadPlaceholderPlugin;
-}
-
-function isImageFileType(file: File): boolean {
-  return file && IMAGE_FILE_TYLES.has(file.type);
-}
-
-function findImageUploadPlaceholder(
-  placeholderPlugin: ImageUploadPlaceholderPlugin,
-  state: EditorState,
-  id: Object
-): ?Decoration {
-  const decos = placeholderPlugin.getState(state);
-  const found = decos.find(null, null, (spec) => spec.id === id);
-  return found.length ? found[0].from : null;
-}
-
-function defer(fn: Function): Function {
-  return () => {
-    setTimeout(fn, 0);
-  };
-}
-
-export function uploadImageFiles(
-  view: EditorView,
-  files: Array<File>,
-  coords: ?{ x: number, y: number }
-): boolean {
-  const { runtime, state, readOnly, disabled } = view;
-  const { schema, plugins } = state;
-  if (readOnly || disabled || !runtime || !runtime.canUploadImage) {
-    return false;
-  }
-
-  const imageType = schema.nodes[IMAGE];
-  if (!imageType) {
-    return false;
-  }
-
-  const { uploadImage, canUploadImage } = runtime;
-  if (!uploadImage || !canUploadImage) {
-    return false;
-  }
-
-  const imageFiles = Array.from(files).filter(isImageFileType);
-  if (!imageFiles.length) {
-    return false;
-  }
-
-  const placeholderPlugin = plugins.find(isImageUploadPlaceholderPlugin);
-  if (!placeholderPlugin) {
-    return false;
-  }
-
-  // A fresh object to act as the ID for this upload.
-  const id = {
-    debugId: 'image_upload_' + uuid(),
-  };
-
-  const uploadNext = defer(() => {
-    const done = (imageInfo: { src: ?string }) => {
-      const pos = findImageUploadPlaceholder(placeholderPlugin, view.state, id);
-      let trNext = view.state.tr;
-      if (pos && !view.readOnly && !view.disabled) {
-        const imageNode = imageType.create(imageInfo);
-        trNext = trNext.replaceWith(pos, pos, imageNode);
-      } else {
-        // Upload was cancelled.
-        imageFiles.length = 0;
-      }
-      if (imageFiles.length) {
-        uploadNext();
-      } else {
-        // Remove the placeholder.
-        trNext = trNext.setMeta(placeholderPlugin, { remove: { id } });
-      }
-      view.dispatch(trNext);
-    };
-    const ff = nullthrows(imageFiles.shift());
-    uploadImage(ff)
-      .then(done)
-      .catch(done.bind(null, { src: null }));
-  });
-
-  uploadNext();
-
-  let { tr } = state;
-
-  // Replace the selection with a placeholder
-  let from = 0;
-
-  // Adjust the cursor to the dropped position.
-  if (coords) {
-    const dropPos = view.posAtCoords({
-      left: coords.x,
-      top: coords.y,
-    });
-
-    if (!dropPos) {
-      return false;
-    }
-
-    from = dropPos.pos;
-    tr = tr.setSelection(TextSelection.create(tr.doc, from, from));
-  } else {
-    from = tr.selection.to;
-    tr = tr.setSelection(TextSelection.create(tr.doc, from, from));
-  }
-  const meta = {
-    add: {
-      id,
-      pos: from,
-    },
-  };
-
-  tr = tr.setMeta(placeholderPlugin, meta);
-  view.dispatch(tr);
-  return true;
-}
-
-// https://prosemirror.net/examples/upload/
-class ImageUploadPlaceholderPlugin extends Plugin {
-  constructor() {
-    super({
-      // [FS] IRAD-1005 2020-07-07
-      // Upgrade outdated packages.
-      key: new PluginKey('ImageUploadPlaceholderPlugin'),
-      state: {
-        init() {
-          return DecorationSet.empty;
-        },
-        apply(tr: Transform, set: DecorationSet): DecorationSet {
-          // Adjust decoration positions to changes made by the transaction
-          set = set.map(tr.mapping, tr.doc);
-          // See if the transaction adds or removes any placeholders
-          const action = tr.getMeta(this);
-          if (action && action.add) {
-            const el = document.createElement('div');
-            el.title = TITLE;
-            el.className = 'czi-image-upload-placeholder';
-            el.innerHTML = INNER_HTML;
-
-            const deco = Decoration.widget(action.add.pos, el, {
-              id: action.add.id,
-            });
-
-            set = set.add(tr.doc, [deco]);
-          } else if (action && action.remove) {
-            const finder = (spec) => spec.id == action.remove.id;
-            set = set.remove(set.find(null, null, finder));
-          }
-          return set;
-        },
-      },
-      props: {
-        decorations(state: EditorState): DecorationSet {
-          return this.getState(state);
-        },
-      },
-    });
-  }
-}
-
-export default ImageUploadPlaceholderPlugin;
+// @flow
+
+import nullthrows from 'nullthrows';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorState, TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { EditorView } from 'prosemirror-view';
+
+import { IMAGE } from './NodeNames';
+import uuid from './ui/uuid';
+
+import './ui/czi-image-upload-placeholder.css';
+
+const IMAGE_FILE_TYLES = new Set([
+  'image/jpeg',
+  'image/gif',
+  'image/png',
+  'image/jpg',
+]);
+
+const TITLE = 'Uploading...';
+
+const INNER_HTML = new Array(4).join(
+  '<div class="czi-image-upload-placeholder-child"></div>'
+);
+
+function isImageUploadPlaceholderPlugin(plugin: Plugin): boolean {
+  return plugin instanceof ImageUploadPlaceholderPlugin;
+}
+
+function isImageFileType(file: File): boolean {
+  return file && IMAGE_FILE_TYLES.has(file.type);
+}
+
+function findImageUploadPlaceholder(
+  placeholderPlugin: ImageUploadPlaceholderPlugin,
+  state: EditorState,
+  id: Object
+): ?Decoration {
+  const decos = placeholderPlugin.getState(state);
+  const found = decos.find(null, null, (spec) => spec.id === id);
+  return found.length ? found[0].from : null;
+}
+
+function defer(fn: Function): Function {
+  return () => {
+    setTimeout(fn, 0);
+  };
+}
+
+export function uploadImageFiles(
+  view: EditorView,
+  files: Array<File>,
+  coords: ?{ x: number, y: number }
+): boolean {
+  const { runtime, state, readOnly, disabled } = view;
+  const { schema, plugins } = state;
+  if (readOnly || disabled || !runtime || !runtime.canUploadImage) {
+    return false;
+  }
+
+  const imageType = schema.nodes[IMAGE];
+  if (!imageType) {
+    return false;
+  }
+
+  const { uploadImage, canUploadImage } = runtime;
+  if (!uploadImage || !canUploadImage) {
+    return false;
+  }
+
+  const imageFiles = Array.from(files).filter(isImageFileType);
+  if (!imageFiles.length) {
+    return false;
+  }
+
+  const placeholderPlugin = plugins.find(isImageUploadPlaceholderPlugin);
+  if (!placeholderPlugin) {
+    return false;
+  }
+
+  // A fresh object to act as the ID for this upload.
+  const id = {
+    debugId: 'image_upload_' + uuid(),
+  };
+
+  const uploadNext = defer(() => {
+    const done = (imageInfo: { src: ?string }) => {
+      const pos = findImageUploadPlaceholder(placeholderPlugin, view.state, id);
+      let trNext = view.state.tr;
+      if (pos && !view.readOnly && !view.disabled) {
+        const imageNode = imageType.create(imageInfo);
+        trNext = trNext.replaceWith(pos, pos, imageNode);
+      } else {
+        // Upload was cancelled.
+        imageFiles.length = 0;
+      }
+      if (imageFiles.length) {
+        uploadNext();
+      } else {
+        // Remove the placeholder.
+        trNext = trNext.setMeta(placeholderPlugin, { remove: { id } });
+      }
+      view.dispatch(trNext);
+    };
+    const ff = nullthrows(imageFiles.shift());
+    uploadImage(ff)
+      .then(done)
+      .catch(done.bind(null, { src: null }));
+  });
+
+  uploadNext();
+
+  let { tr } = state;
+
+  // Replace the selection with a placeholder
+  let from = 0;
+
+  // Adjust the cursor to the dropped position.
+  if (coords) {
+    const dropPos = view.posAtCoords({
+      left: coords.x,
+      top: coords.y,
+    });
+
+    if (!dropPos) {
+      return false;
+    }
+
+    from = dropPos.pos;
+    tr = tr.setSelection(TextSelection.create(tr.doc, from, from));
+  } else {
+    from = tr.selection.to;
+    tr = tr.setSelection(TextSelection.create(tr.doc, from, from));
+  }
+  const meta = {
+    add: {
+      id,
+      pos: from,
+    },
+  };
+
+  tr = tr.setMeta(placeholderPlugin, meta);
+  view.dispatch(tr);
+  return true;
+}
+
+// https://prosemirror.net/examples/upload/
+class ImageUploadPlaceholderPlugin extends Plugin {
+  constructor() {
+    super({
+      // [FS] IRAD-1005 2020-07-07
+      // Upgrade outdated packages.
+      key: new PluginKey('ImageUploadPlaceholderPlugin'),
+      state: {
+        init() {
+          return DecorationSet.empty;
+        },
+        apply(tr: Transform, set: DecorationSet): DecorationSet {
+          // Adjust decoration positions to changes made by the transaction
+          set = set.map(tr.mapping, tr.doc);
+          // See if the transaction adds or removes any placeholders
+          const action = tr.getMeta(this);
+          if (action && action.add) {
+            const el = document.createElement('div');
+            el.title = TITLE;
+            el.className = 'czi-image-upload-placeholder';
+            el.innerHTML = INNER_HTML;
+
+            const deco = Decoration.widget(action.add.pos, el, {
+              id: action.add.id,
+            });
+
+            set = set.add(tr.doc, [deco]);
+          } else if (action && action.remove) {
+            const finder = (spec) => spec.id == action.remove.id;
+            set = set.remove(set.find(null, null, finder));
+          }
+          return set;
+        },
+      },
+      props: {
+        decorations(state: EditorState): DecorationSet {
+          return this.getState(state);
+        },
+      },
+    });
+  }
+}
+
+export default ImageUploadPlaceholderPlugin;

package/src/LinkMarkSpec.js

@@ -1,32 +1,32 @@
-// @flow
-
-import type { MarkSpec } from './Types';
-
-const LinkMarkSpec: MarkSpec = {
-  attrs: {
-    href: { default: null },
-    rel: { default: 'noopener noreferrer nofollow' },
-    target: { default: 'blank' },
-    title: { default: null },
-  },
-  inclusive: false,
-  parseDOM: [
-    {
-      tag: 'a[href]',
-      getAttrs: (dom) => {
-        const href = dom.getAttribute('href');
-        const target = href && href.indexOf('#') === 0 ? '' : 'blank';
-        return {
-          href: dom.getAttribute('href'),
-          title: dom.getAttribute('title'),
-          target,
-        };
-      },
-    },
-  ],
-  toDOM(node) {
-    return ['a', node.attrs, 0];
-  },
-};
-
-export default LinkMarkSpec;
+// @flow
+
+import type { MarkSpec } from './Types';
+
+const LinkMarkSpec: MarkSpec = {
+  attrs: {
+    href: { default: null },
+    rel: { default: 'noopener noreferrer nofollow' },
+    target: { default: 'blank' },
+    title: { default: null },
+  },
+  inclusive: false,
+  parseDOM: [
+    {
+      tag: 'a[href]',
+      getAttrs: (dom) => {
+        const href = dom.getAttribute('href');
+        const target = href && href.indexOf('#') === 0 ? '' : 'blank';
+        return {
+          href: dom.getAttribute('href'),
+          title: dom.getAttribute('title'),
+          target,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    return ['a', node.attrs, 0];
+  },
+};
+
+export default LinkMarkSpec;

package/src/LinkSetURLCommand.js

@@ -1,103 +1,103 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { TextSelection } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-
-import { MARK_LINK } from './MarkNames';
-import {
-  hideSelectionPlaceholder,
-  showSelectionPlaceholder,
-} from './SelectionPlaceholderPlugin';
-import applyMark from './applyMark';
-import findNodesWithSameMark from './findNodesWithSameMark';
-import LinkURLEditor from './ui/LinkURLEditor';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import createPopUp from './ui/createPopUp';
-
-class LinkSetURLCommand extends UICommand {
-  _popUp = null;
-
-  isEnabled = (state: EditorState): boolean => {
-    if (!(state.selection instanceof TextSelection)) {
-      // Could be a NodeSelection or CellSelection.
-      return false;
-    }
-
-    const markType = state.schema.marks[MARK_LINK];
-    if (!markType) {
-      return false;
-    }
-    const { from, to } = state.selection;
-    return from < to;
-  };
-
-  waitForUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    event: ?SyntheticEvent<>
-  ): Promise<any> => {
-    if (this._popUp) {
-      return Promise.resolve(undefined);
-    }
-
-    if (dispatch) {
-      dispatch(showSelectionPlaceholder(state));
-    }
-
-    const { doc, schema, selection } = state;
-    const markType = schema.marks[MARK_LINK];
-    if (!markType) {
-      return Promise.resolve(undefined);
-    }
-    const { from, to } = selection;
-    const result = findNodesWithSameMark(doc, from, to, markType);
-    const href = result ? result.mark.attrs.href : null;
-    return new Promise((resolve) => {
-      this._popUp = createPopUp(
-        LinkURLEditor,
-        { href },
-        {
-          modal: true,
-          onClose: (val) => {
-            if (this._popUp) {
-              this._popUp = null;
-              resolve(val);
-            }
-          },
-        }
-      );
-    });
-  };
-
-  executeWithUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    href: ?string
-  ): boolean => {
-    if (dispatch) {
-      const { selection, schema } = state;
-      let { tr } = state;
-      tr = view ? hideSelectionPlaceholder(view.state) : tr;
-      tr = tr.setSelection(selection);
-      if (href !== undefined) {
-        const markType = schema.marks[MARK_LINK];
-        const attrs = href ? { href } : null;
-        tr = applyMark(
-          tr.setSelection(state.selection),
-          schema,
-          markType,
-          attrs
-        );
-      }
-      dispatch(tr);
-    }
-    view && view.focus();
-    return true;
-  };
-}
-
-export default LinkSetURLCommand;
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+
+import { MARK_LINK } from './MarkNames';
+import {
+  hideSelectionPlaceholder,
+  showSelectionPlaceholder,
+} from './SelectionPlaceholderPlugin';
+import { applyMark } from '@modusoperandi/licit-ui-commands';
+import { findNodesWithSameMark } from '@modusoperandi/licit-ui-commands';
+import LinkURLEditor from './ui/LinkURLEditor';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import { createPopUp } from '@modusoperandi/licit-ui-commands';
+
+class LinkSetURLCommand extends UICommand {
+  _popUp = null;
+
+  isEnabled = (state: EditorState): boolean => {
+    if (!(state.selection instanceof TextSelection)) {
+      // Could be a NodeSelection or CellSelection.
+      return false;
+    }
+
+    const markType = state.schema.marks[MARK_LINK];
+    if (!markType) {
+      return false;
+    }
+    const { from, to } = state.selection;
+    return from < to;
+  };
+
+  waitForUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    event: ?SyntheticEvent<>
+  ): Promise<any> => {
+    if (this._popUp) {
+      return Promise.resolve(undefined);
+    }
+
+    if (dispatch) {
+      dispatch(showSelectionPlaceholder(state));
+    }
+
+    const { doc, schema, selection } = state;
+    const markType = schema.marks[MARK_LINK];
+    if (!markType) {
+      return Promise.resolve(undefined);
+    }
+    const { from, to } = selection;
+    const result = findNodesWithSameMark(doc, from, to, markType);
+    const href = result ? result.mark.attrs.href : null;
+    return new Promise((resolve) => {
+      this._popUp = createPopUp(
+        LinkURLEditor,
+        { href },
+        {
+          modal: true,
+          onClose: (val) => {
+            if (this._popUp) {
+              this._popUp = null;
+              resolve(val);
+            }
+          },
+        }
+      );
+    });
+  };
+
+  executeWithUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    href: ?string
+  ): boolean => {
+    if (dispatch) {
+      const { selection, schema } = state;
+      let { tr } = state;
+      tr = view ? hideSelectionPlaceholder(view.state) : tr;
+      tr = tr.setSelection(selection);
+      if (href !== undefined) {
+        const markType = schema.marks[MARK_LINK];
+        const attrs = href ? { href } : null;
+        tr = applyMark(
+          tr.setSelection(state.selection),
+          schema,
+          markType,
+          attrs
+        );
+      }
+      dispatch(tr);
+    }
+    view && view.focus();
+    return true;
+  };
+}
+
+export default LinkSetURLCommand;