frontend > app

app/components/Editor/plugins.js

@@ -0,0 +1,57 @@
+// @flow
+import DropOrPasteImages from '@tommoor/slate-drop-or-paste-images';
+import PasteLinkify from 'slate-paste-linkify';
+import CollapseOnEscape from 'slate-collapse-on-escape';
+import TrailingBlock from 'slate-trailing-block';
+import EditCode from 'slate-edit-code';
+import Prism from 'slate-prism';
+import EditList from './plugins/EditList';
+import KeyboardShortcuts from './plugins/KeyboardShortcuts';
+import MarkdownShortcuts from './plugins/MarkdownShortcuts';
+import insertImage from './insertImage';
+
+const onlyInCode = node => node.type === 'code';
+
+type Options = {
+  onImageUploadStart: Function,
+  onImageUploadStop: Function,
+};
+
+const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
+  return [
+    PasteLinkify({
+      type: 'link',
+      collapseTo: 'end',
+    }),
+    DropOrPasteImages({
+      extensions: ['png', 'jpg', 'gif'],
+      applyTransform: (transform, file, editor) => {
+        return insertImage(
+          transform,
+          file,
+          editor,
+          onImageUploadStart,
+          onImageUploadStop
+        );
+      },
+    }),
+    EditList,
+    EditCode({
+      onlyIn: onlyInCode,
+      containerType: 'code',
+      lineType: 'code-line',
+      exitBlocktype: 'paragraph',
+      selectAll: true,
+    }),
+    Prism({
+      onlyIn: onlyInCode,
+      getSyntax: node => 'javascript',
+    }),
+    CollapseOnEscape({ toEdge: 'end' }),
+    TrailingBlock({ type: 'paragraph' }),
+    KeyboardShortcuts(),
+    MarkdownShortcuts(),
+  ];
+};
+
+export default createPlugins;