--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SlateEditor/index.js Mon Oct 08 18:35:47 2018 +0200
@@ -0,0 +1,697 @@
+import { Value } from 'slate'
+import Plain from 'slate-plain-serializer'
+import { Editor } from 'slate-react'
+import React from 'react'
+import { Portal } from 'react-portal'
+import HtmlSerializer from './HtmlSerializer'
+import AnnotationPlugin from './AnnotationPlugin'
+import CategoriesTooltip from './CategoriesTooltip'
+import './SlateEditor.css';
+import { now } from '../../utils';
+import { defaultAnnotationsCategories } from '../../constants';
+
+const plugins = [];
+
+/**
+ * Define the default node type.
+ */
+
+const DEFAULT_NODE = 'paragraph'
+
+/**
+ * Define a schema.
+ *
+ * @type {Object}
+ */
+// TODO Check if we can move this to the plugin using the schema option
+// https://docs.slatejs.org/reference/plugins/plugin.html#schema
+const schema = {
+
+ nodes: {
+ 'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
+ 'list-item': props => <li {...props.attributes}>{props.children}</li>,
+ 'numbered-list': props => <ol {...props.attributes}>{props.children}</ol>,
+ },
+ marks: {
+ bold: {
+ fontWeight: 'bold'
+ },
+ category: props => {
+ const data = props.mark.data;
+ return <span style={{ backgroundColor: data.color }}>{props.children}</span>
+ },
+ italic: {
+ fontStyle: 'italic'
+ },
+ underlined: {
+ textDecoration: 'underlined'
+ }
+ }
+
+}
+
+const initialValue = Value.fromJSON({
+ document: {
+ nodes: [
+ {
+ object: 'block',
+ type: 'paragraph',
+ nodes: [
+ {
+ object: 'text',
+ leaves: [
+ {
+ text: '',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+})
+
+
+/**
+ * The rich text example.
+ *
+ * @type {Component}
+ */
+
+class SlateEditor extends React.Component {
+
+ /**
+ * Deserialize the initial editor state.
+ *
+ * @type {Object}
+ */
+ constructor(props) {
+ super(props);
+
+ const annotationPlugin = AnnotationPlugin({
+ onChange: (text, start, end) => {
+ this.setState({
+ currentSelectionText: text,
+ currentSelectionStart: start,
+ currentSelectionEnd: end,
+ });
+ }
+ });
+
+ plugins.push(annotationPlugin);
+
+
+ this.state = {
+ value: props.note ? Value.fromJSON(initialValue) : Plain.deserialize(''),
+ startedAt: null,
+ finishedAt: null,
+ currentSelectionText: '',
+ currentSelectionStart: 0,
+ currentSelectionEnd: 0,
+ hoveringMenu: null,
+ isPortalOpen: false,
+ categories: [],
+ isCheckboxChecked: false,
+ enterKeyValue: 0,
+ };
+ }
+
+ componentDidMount = () => {
+ this.updateMenu();
+ this.focus();
+ }
+
+ componentDidUpdate = () => {
+ this.updateMenu();
+ }
+
+ /**
+ * On change, save the new state.
+ *
+ * @param {Change} change
+ */
+
+ onChange = ({value}) => {
+
+ let newState = {
+ value: value,
+ startedAt: this.state.startedAt
+ };
+
+ const isEmpty = value.document.length === 0;
+
+ // Reset timers when the text is empty
+ if (isEmpty) {
+ Object.assign(newState, {
+ startedAt: null,
+ finishedAt: null
+ });
+ } else {
+ Object.assign(newState, { finishedAt: now() });
+ }
+
+ // Store start time once when the first character is typed
+ if (!isEmpty && this.state.startedAt === null) {
+ Object.assign(newState, { startedAt: now() });
+ }
+
+ this.setState(newState)
+
+ if (typeof this.props.onChange === 'function') {
+ this.props.onChange(newState);
+ }
+ }
+
+ /**
+ * Check if the current selection has a mark with `type` in it.
+ *
+ * @param {String} type
+ * @return {Boolean}
+ */
+
+ hasMark = type => {
+ const { value } = this.state
+ return value.activeMarks.some(mark => mark.type === type)
+}
+
+ /**
+ * Check if the any of the currently selected blocks are of `type`.
+ *
+ * @param {String} type
+ * @return {Boolean}
+ */
+
+ hasBlock = type => {
+ const { value } = this.state
+ return value.blocks.some(node => node.type === type)
+}
+
+ asPlain = () => {
+ return Plain.serialize(this.state.value);
+ }
+
+ asRaw = () => {
+ return JSON.stringify(this.state.value.toJSON());
+ }
+
+ asHtml = () => {
+ return HtmlSerializer.serialize(this.state.value);
+ }
+
+ asCategories = () => {
+ return this.state.categories
+ }
+
+ removeCategory = (categories, key, text) => {
+ const categoryIndex = categories.findIndex(category => category.key === key && category.text === text)
+ return categories.delete(categoryIndex)
+ }
+
+ clear = () => {
+ const value = Plain.deserialize('');
+ this.onChange({value});
+ }
+
+ focus = () => {
+ this.refs.editor.focus();
+ }
+
+ /**
+ * When a mark button is clicked, toggle the current mark.
+ *
+ * @param {Event} e
+ * @param {String} type
+ */
+
+ onClickMark = (e, type) => {
+
+ e.preventDefault()
+ const { value } = this.state
+ let { categories } = this.state
+
+ let isPortalOpen = false;
+
+ if (type === 'category') {
+ // Can't use toggleMark here, because it expects the same object
+ // @see https://github.com/ianstormtaylor/slate/issues/873
+ if (this.hasMark('category')) {
+ const categoryMarks = value.activeMarks.filter(mark => mark.type === 'category')
+ categoryMarks.forEach(mark => {
+ const key = mark.data.key;
+ const text = mark.data.text;
+
+ categories = this.removeCategory(categories, key, text)
+ const change = value.change().removeMark(mark)
+ this.onChange(change)
+ })
+
+ } else {
+ isPortalOpen = !this.state.isPortalOpen;
+ }
+ } else {
+ const change = value.change().toggleMark(type)
+ this.onChange(change)
+ }
+
+ this.setState({
+ state: value.change,
+ isPortalOpen: isPortalOpen,
+ categories: categories
+ })
+ }
+
+ /**
+ * When a block button is clicked, toggle the block type.
+ *
+ * @param {Event} e
+ * @param {String} type
+ */
+
+ onClickBlock = (e, type) => {
+ e.preventDefault()
+ const { value } = this.state
+ const change = value.change()
+ const { document } = value
+
+ // Handle everything but list buttons.
+ if (type !== 'bulleted-list' && type !== 'numbered-list') {
+ const isActive = this.hasBlock(type)
+ const isList = this.hasBlock('list-item')
+
+ if (isList) {
+ change
+ .setBlocks(isActive ? DEFAULT_NODE : type)
+ .unwrapBlock('bulleted-list')
+ .unwrapBlock('numbered-list')
+ }
+
+ else {
+ change
+ .setBlocks(isActive ? DEFAULT_NODE : type)
+ }
+ }
+
+ // Handle the extra wrapping required for list buttons.
+ else {
+ const isList = this.hasBlock('list-item')
+ const isType = value.blocks.some((block) => {
+ return !!document.getClosest(block.key, parent => parent.type === type)
+ })
+
+ if (isList && isType) {
+ change
+ .setBlocks(DEFAULT_NODE)
+ .unwrapBlock('bulleted-list')
+ .unwrapBlock('numbered-list')
+
+ } else if (isList) {
+ change
+ .unwrapBlock(type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list')
+ .wrapBlock(type)
+
+ } else {
+ change
+ .setBlocks('list-item')
+ .wrapBlock(type)
+
+ }
+ }
+
+
+ this.onChange(change)
+ }
+
+ onPortalOpen = (portal) => {
+ // When the portal opens, cache the menu element.
+ this.setState({ hoveringMenu: portal.firstChild })
+ }
+
+ onPortalClose = (portal) => {
+ let { value } = this.state
+
+ this.setState({
+ value: value.change,
+ isPortalOpen: false
+ })
+ }
+
+ onCategoryClick = (category) => {
+
+ const { value, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
+ const change = value.change()
+ let { categories } = this.state;
+
+ const categoryMarks = value.activeMarks.filter(mark => mark.type === 'category')
+ categoryMarks.forEach(mark => change.removeMark(mark));
+
+ change.addMark({
+ type: 'category',
+ data: {
+ text: currentSelectionText,
+ selection: {
+ start: currentSelectionStart,
+ end: currentSelectionEnd,
+ },
+ color: category.color,
+ key: category.key
+ }
+ })
+
+ Object.assign(category, {
+ text: currentSelectionText,
+ selection: {
+ start: currentSelectionStart,
+ end: currentSelectionEnd,
+ },
+ });
+ categories = categories.push(category);
+
+ this.onChange(change)
+
+ this.setState({
+ value: value,
+ isPortalOpen: false,
+ categories: categories
+ });
+ }
+
+ onButtonClick = () => {
+ if (typeof this.props.onButtonClick === 'function') {
+ this.props.onButtonClick();
+ }
+ }
+
+ onCheckboxChange = (e) => {
+ if (typeof this.props.onCheckboxChange === 'function') {
+ this.props.onCheckboxChange(e);
+ }
+ }
+
+ /**
+ * On key down, if it's a formatting command toggle a mark.
+ *
+ * @param {Event} e
+ * @param {Change} change
+ * @return {Change}
+ */
+
+ onKeyDown = (e, change) => {
+
+ const {value} = this.state;
+
+ // if (e.key === 'Enter' && value.document.text === '') {
+ // change.removeChild()
+ // }
+
+ if (e.key === 'Enter' && value.document.text !== '') {
+ this.setState({enterKeyValue: 1})
+ }
+
+ if (e.key !== 'Enter') {
+ this.setState({
+ enterKeyValue: 0,
+ })
+
+ }
+
+ if (e.key === 'Enter' && !this.props.isChecked && this.state.enterKeyValue === 1 && typeof this.props.onEnterKeyDown === 'function') {
+ e.preventDefault();
+ this.props.onEnterKeyDown();
+ this.setState({
+ enterKeyValue: 0,
+ })
+
+
+ return change
+ }
+
+ else if (e.key === 'Enter' && value.document.text !== '' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
+
+ e.preventDefault();
+ this.props.onEnterKeyDown();
+
+ return change
+ }
+
+ if (!e.ctrlKey) return
+ // Decide what to do based on the key code...
+ switch (e.key) {
+ default: {
+ break;
+ }
+ // When "B" is pressed, add a "bold" mark to the text.
+ case 'b': {
+ e.preventDefault()
+ change.toggleMark('bold')
+
+ return true
+ }
+ case 'i': {
+ // When "U" is pressed, add an "italic" mark to the text.
+ e.preventDefault()
+ change.toggleMark('italic')
+
+ return true
+ }
+ case 'u': {
+ // When "U" is pressed, add an "underline" mark to the text.
+ e.preventDefault()
+ change.toggleMark('underlined')
+
+ return true
+ }
+ case 'Enter': {
+ // When "ENTER" is pressed, autosubmit the note.
+ if (value.document.text !== '' && typeof this.props.onEnterKeyDown === 'function') {
+ e.preventDefault()
+ this.props.onEnterKeyDown();
+ this.setState({
+ enterKeyValue: 0,
+ })
+
+ return true
+ }
+ }
+ }
+ }
+
+ /**
+ * Render.
+ *
+ * @return {Element}
+ */
+
+ render = () => {
+ return (
+ <div className="bg-secondary mb-5">
+ <div className="sticky-top">
+ {this.renderToolbar()}
+ </div>
+ {this.renderEditor()}
+ </div>
+ )
+ }
+
+ /**
+ * Render the toolbar.
+ *
+ * @return {Element}
+ */
+
+ renderToolbar = () => {
+ return (
+ <div className="menu toolbar-menu d-flex sticky-top bg-secondary">
+ {this.renderMarkButton('bold', 'format_bold')}
+ {this.renderMarkButton('italic', 'format_italic')}
+ {this.renderMarkButton('underlined', 'format_underlined')}
+ {this.renderMarkButton('category', 'label')}
+
+
+ {this.renderBlockButton('numbered-list', 'format_list_numbered')}
+ {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
+
+ {this.renderToolbarButtons()}
+ </div>
+ )
+ }
+
+ renderToolbarCheckbox = () => {
+ return (
+ <div className="checkbox float-right">
+ <label className="mr-2">
+ <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /><small className="text-muted ml-1"> Appuyer sur <kbd className="bg-danger text-muted ml-1">Entrée</kbd> pour ajouter une note</small>
+ </label>
+ </div>
+ )
+ }
+
+ renderToolbarButtons = () => {
+ return (
+ <div>
+ <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold float-right" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+ { this.props.note ? 'Sauvegarder' : 'Ajouter' }
+ </button>
+ { !this.props.note && this.renderToolbarCheckbox() }
+ </div>
+ );
+ }
+
+ /**
+ * Render a mark-toggling toolbar button.
+ *
+ * @param {String} type
+ * @param {String} icon
+ * @return {Element}
+ */
+
+ renderMarkButton = (type, icon) => {
+ const isActive = this.hasMark(type)
+ const onMouseDown = e => this.onClickMark(e, type)
+ const markActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
+
+ return (
+ // <span className="button text-primary" onMouseDown={onMouseDown} data-active={isActive}>
+ <span className={markActivation} onMouseDown={onMouseDown} data-active={isActive}>
+
+ <span className="material-icons">{icon}</span>
+ </span>
+ )
+ }
+
+ // Add a `renderMark` method to render marks.
+
+ renderMark = props => {
+ const { children, mark, attributes } = props
+
+ switch (mark.type) {
+ case 'bold':
+ return <strong {...attributes}>{children}</strong>
+ case 'code':
+ return <code {...attributes}>{children}</code>
+ case 'italic':
+ return <em {...attributes}>{children}</em>
+ case 'underlined':
+ return <ins {...attributes}>{children}</ins>
+ default:
+ return {children};
+ }
+ }
+ /**
+ * Render a block-toggling toolbar button.
+ *
+ * @param {String} type
+ * @param {String} icon
+ * @return {Element}
+ */
+
+ renderBlockButton = (type, icon) => {
+ let isActive = this.hasBlock(type)
+
+ if (['numbered-list', 'bulleted-list'].includes(type)) {
+ const { value } = this.state
+ const parent = value.document.getParent(value.blocks.first().key)
+ isActive = this.hasBlock('list-item') && parent && parent.type === type
+ }
+ const onMouseDown = e => this.onClickBlock(e, type)
+ const blockActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
+
+ return (
+ <span className={blockActivation} onMouseDown={onMouseDown} data-active={isActive}>
+ <span className="material-icons">{icon}</span>
+ </span>
+ )
+ }
+
+ renderNode = props => {
+ const { attributes, children, node } = props
+
+ switch (node.type) {
+ case 'block-quote':
+ return <blockquote {...attributes}>{children}</blockquote>
+ case 'bulleted-list':
+ return <ul {...attributes}>{children}</ul>
+ case 'heading-one':
+ return <h1 {...attributes}>{children}</h1>
+ case 'heading-two':
+ return <h2 {...attributes}>{children}</h2>
+ case 'list-item':
+ return <li {...attributes}>{children}</li>
+ case 'numbered-list':
+ return <ol {...attributes}>{children}</ol>
+ default:
+ return null;
+ }
+}
+
+ /**
+ * Render the Slate editor.
+ *
+ * @return {Element}
+ */
+
+ renderEditor = () => {
+ return (
+ <div className="editor-slatejs p-2">
+ {this.renderHoveringMenu()}
+ <Editor
+ ref="editor"
+ spellCheck
+ placeholder={'Votre espace de prise de note...'}
+ schema={schema}
+ plugins={plugins}
+ value={this.state.value}
+ onChange={this.onChange}
+ onKeyDown={this.onKeyDown}
+ renderMark={this.renderMark}
+ renderNode = {this.renderNode}
+ />
+ </div>
+ )
+ }
+
+ renderHoveringMenu = () => {
+ return (
+ <Portal ref="portal"
+ isOpened={this.state.isPortalOpen} isOpen={this.state.isPortalOpen}
+ onOpen={this.onPortalOpen}
+ onClose={this.onPortalClose}
+ closeOnOutsideClick={false} closeOnEsc={true}>
+ <div className="hovering-menu">
+ <CategoriesTooltip categories={this.props.annotationCategories || defaultAnnotationsCategories} onCategoryClick={this.onCategoryClick} />
+ </div>
+ </Portal>
+ )
+ }
+
+ updateMenu = () => {
+
+ const { hoveringMenu } = this.state
+
+ if (!hoveringMenu) return
+
+ // if (state.isBlurred || state.isCollapsed) {
+ // hoveringMenu.removeAttribute('style')
+ // return
+ // }
+
+ const selection = window.getSelection()
+
+ if (selection.isCollapsed) {
+ return
+ }
+
+ const range = selection.getRangeAt(0)
+ const rect = range.getBoundingClientRect()
+
+ hoveringMenu.style.opacity = 1
+ hoveringMenu.style.top = `${rect.top + window.scrollY + hoveringMenu.offsetHeight}px`
+ hoveringMenu.style.left = `${rect.left + window.scrollX - hoveringMenu.offsetWidth / 2 + rect.width / 2}px`
+ }
+
+}
+
+/**
+ * Export.
+ */
+
+export default SlateEditor