* 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
68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
// @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;
|