This repository has been archived on 2022-08-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
outline/frontend/scenes/Document/components/Editor/plugins.js
Jori Lallo ff17047791 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

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;