From 64c26244795ad43ec42318e0e8cedc00c75ab24c Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Wed, 6 Dec 2017 08:15:06 -0800 Subject: [PATCH] Fixes: Image upload. Back to using our own plugin to show progress --- app/components/Editor/Editor.js | 7 +++++-- app/components/Editor/changes.js | 26 ++++++++++++++++++++------ app/components/Editor/plugins.js | 5 +++-- package.json | 2 +- yarn.lock | 24 ++++++++++++------------ 5 files changed, 41 insertions(+), 23 deletions(-) diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js index d767e602f..a95079ff7 100644 --- a/app/components/Editor/Editor.js +++ b/app/components/Editor/Editor.js @@ -75,9 +75,11 @@ class MarkdownEditor extends Component { } onChange = (change: Change) => { - // TODO: Lets avoid constantly serializing to Markdown if (this.editorValue !== change.value) { - this.props.onChange(Markdown.serialize(change.value)); + const text = Markdown.serialize(change.value); + if (text !== this.props.text) { + this.props.onChange(text); + } this.editorValue = change.value; } }; @@ -104,6 +106,7 @@ class MarkdownEditor extends Component { change.call( insertImageFile, file, + this.editor, this.props.onImageUploadStart, this.props.onImageUploadStop ) diff --git a/app/components/Editor/changes.js b/app/components/Editor/changes.js index c08e2cbf7..8e96d78ff 100644 --- a/app/components/Editor/changes.js +++ b/app/components/Editor/changes.js @@ -1,5 +1,6 @@ // @flow import { Change } from 'slate'; +import { Editor } from 'slate-react'; import uuid from 'uuid'; import EditList from './plugins/EditList'; import uploadFile from 'utils/uploadFile'; @@ -36,6 +37,7 @@ export function splitAndInsertBlock(change: Change, options: Options) { export async function insertImageFile( change: Change, file: window.File, + editor: Editor, onImageUploadStart: () => void, onImageUploadStop: () => void ) { @@ -47,13 +49,24 @@ export async function insertImageFile( const reader = new FileReader(); reader.addEventListener('load', () => { const src = reader.result; - - // insert into document as uploading placeholder - change.insertBlock({ + const node = { type: 'image', isVoid: true, data: { src, id, alt, loading: true }, - }); + }; + + // insert / replace into document as uploading placeholder replacing + // empty paragraphs if available. + if ( + !change.value.startBlock.text && + change.value.startBlock.type === 'paragraph' + ) { + change.setBlock(node); + } else { + change.insertBlock(node); + } + + editor.onChange(change); }); reader.readAsDataURL(file); @@ -64,13 +77,14 @@ export async function insertImageFile( // we dont use the original change provided to the callback here // as the state may have changed significantly in the time it took to // upload the file. - const placeholder = change.value.document.findDescendant( + const placeholder = editor.value.document.findDescendant( node => node.data && node.data.get('id') === id ); - return change.setNodeByKey(placeholder.key, { + change.setNodeByKey(placeholder.key, { data: { src, alt, loading: false }, }); + editor.onChange(change); } catch (err) { throw err; } finally { diff --git a/app/components/Editor/plugins.js b/app/components/Editor/plugins.js index 499b8b1b4..2362d07cb 100644 --- a/app/components/Editor/plugins.js +++ b/app/components/Editor/plugins.js @@ -1,5 +1,5 @@ // @flow -import InsertImages from 'slate-drop-or-paste-images'; +import InsertImages 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'; @@ -25,10 +25,11 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => { }), InsertImages({ extensions: ['png', 'jpg', 'gif', 'webp'], - insertImage: (change, file) => { + insertImage: async (change, file, editor) => { return change.call( insertImageFile, file, + editor, onImageUploadStart, onImageUploadStop ); diff --git a/package.json b/package.json index 5e50210c0..cdbc5b00e 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "url": "git+ssh://git@github.com/outline/outline.git" }, "dependencies": { + "@tommoor/slate-drop-or-paste-images": "^0.8.1", "aws-sdk": "^2.135.0", "babel-core": "^6.24.1", "babel-eslint": "^7.2.3", @@ -162,7 +163,6 @@ "sequelize-encrypted": "0.1.0", "slate": "^0.29.0", "slate-collapse-on-escape": "^0.6.0", - "slate-drop-or-paste-images": "^0.8.0", "slate-edit-code": "^0.13.2", "slate-edit-list": "^0.10.1", "slate-md-serializer": "^1.0.4", diff --git a/yarn.lock b/yarn.lock index 46907ed0c..00bbdb2f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,18 @@ # yarn lockfile v1 +"@tommoor/slate-drop-or-paste-images@^0.8.1": + version "0.8.1" + resolved "https://registry.npmjs.org/@tommoor/slate-drop-or-paste-images/-/slate-drop-or-paste-images-0.8.1.tgz#4d94b5c1dd2de109546ee1f38a1e4a18df078c1e" + dependencies: + es6-promise "^4.0.5" + image-to-data-uri "^1.0.0" + is-data-uri "^0.1.0" + is-image "^1.0.1" + is-url "^1.2.2" + mime-types "^2.1.11" + slate-dev-logger "^0.1.0" + "@types/geojson@^1.0.0": version "1.0.3" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.3.tgz#fbcf7fa5eb6dd108d51385cc6987ec1f24214523" @@ -8205,18 +8217,6 @@ slate-dev-logger@^0.1.0, slate-dev-logger@^0.1.25, slate-dev-logger@^0.1.36: version "0.1.36" resolved "https://registry.npmjs.org/slate-dev-logger/-/slate-dev-logger-0.1.36.tgz#ecdb37dbf944dfc742bab23b6a20d5a0472db95e" -slate-drop-or-paste-images@^0.8.0: - version "0.8.0" - resolved "https://registry.npmjs.org/slate-drop-or-paste-images/-/slate-drop-or-paste-images-0.8.0.tgz#2c363a117688c1b57517ab9cd468c4060e09824e" - dependencies: - es6-promise "^4.0.5" - image-to-data-uri "^1.0.0" - is-data-uri "^0.1.0" - is-image "^1.0.1" - is-url "^1.2.2" - mime-types "^2.1.11" - slate-dev-logger "^0.1.0" - slate-edit-code@^0.13.2: version "0.13.2" resolved "https://registry.npmjs.org/slate-edit-code/-/slate-edit-code-0.13.2.tgz#682a7640da076906e5b4a4c73ec0e46d31d92c62"