Slate editor (#38)

* WIP: Slate editor * WIP * Focus at start / end working * ah ha * Super basic floating toolbar * Nested list editing * Pulling more logic into plugins * inline code markdown * Backspace at end of code block should remove mark * Ensure there is always an empty line at editor end * Add keyboard shortcuts for bold, italic, underline * Add strikethrough shortcode and toolbar * Toolbar to declarative Fixed paragraph styling Removed unused stuffs * Super basic link editing * Split Toolbar, now possible to edit and remove links * Add new link to selection from toolbar working * Ensure toolbar doesn't extend off screen * Fix minor js issues, disable formatting of document title * Boom, icons * Remove codemirror, fix MD parsing issues * CMD+S now saves inplace * Add --- shortcut for horizontal rule * Improved styling for link editor * Add header anchors in readOnly * More readable core text color * Restored image file uploading 🎉 * Add support for inline md syntax, ** __ etc * Centered * Flooooow * Checklist support * Upgrade edit list plugin * Finally. Allow keydown within rich textarea * Update Markdown serializer * Cleanup, remove async editor loading * Editor > MarkdownEditor Fixed unsaved changes warning triggered when all changes are saved * MOAR typing * Combine edit and view * Fixed checkboxes still editable in readOnly * wip * Breadcrumb Restored scroll * Move document scene actions to menu * Added: Support for code blocks, syntax highlighting * Cleanup * > styled component * Prevent CMD+Enter from adding linebreak * Show image uploading in layout activity indicator * Upgrade editor deps * Improve link toolbar. Only one scenario where it's not working now
2017-05-17 19:36:31 -07:00
parent 7b16d3e5e2
commit ff17047791
84 changed files with 2531 additions and 1659 deletions
--- a/frontend/scenes/Document/components/Editor/plugins.js
+++ b/frontend/scenes/Document/components/Editor/plugins.js
@ -0,0 +1,67 @@
+// @flow
+import DropOrPasteImages from 'slate-drop-or-paste-images';
+import PasteLinkify from 'slate-paste-linkify';
+import EditList from 'slate-edit-list';
+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 uploadFile from 'utils/uploadFile';
+import KeyboardShortcuts from './plugins/KeyboardShortcuts';
+import MarkdownShortcuts from './plugins/MarkdownShortcuts';
+
+const onlyInCode = node => node.type === 'code';
+
+const createPlugins = ({
+  onImageUploadStart,
+  onImageUploadStop,
+}: { onImageUploadStart: Function, onImageUploadStop: Function }) => {
+  return [
+    PasteLinkify({
+      type: 'link',
+      collapseTo: 'end',
+    }),
+    DropOrPasteImages({
+      extensions: ['png', 'jpg', 'gif'],
+      applyTransform: async (transform, file) => {
+        try {
+          onImageUploadStart();
+          const asset = await uploadFile(file);
+          const alt = file.name;
+          const src = asset.url;
+
+          return transform.insertBlock({
+            type: 'image',
+            isVoid: true,
+            data: { src, alt },
+          });
+        } catch (err) {
+          // TODO: Show a failure alert
+        } finally {
+          onImageUploadStop();
+        }
+      },
+    }),
+    EditList({
+      types: ['ordered-list', 'bulleted-list', 'todo-list'],
+      typeItem: 'list-item',
+    }),
+    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;