--- a/client/src/components/SlateEditor/index.js Thu Nov 08 16:03:28 2018 +0100
+++ b/client/src/components/SlateEditor/index.js Tue Nov 13 16:46:15 2018 +0100
@@ -2,7 +2,7 @@
import Plain from 'slate-plain-serializer';
import { Editor } from 'slate-react';
import React from 'react';
-import { Portal } from 'react-portal';
+import { PortalWithState } from 'react-portal';
import { Trans, withNamespaces } from 'react-i18next';
import * as R from 'ramda';
import HtmlSerializer from './HtmlSerializer';
@@ -40,7 +40,7 @@
},
category: props => {
const data = props.mark.data;
- return <span style={{ backgroundColor: data.color }}>{props.children}</span>
+ return <span style={{ backgroundColor: data.color }} {...props.attributes}>{props.children}</span>
},
italic: {
fontStyle: 'italic'
@@ -75,7 +75,6 @@
/**
- * The rich text example.
*
* @type {Component}
*/
@@ -100,7 +99,7 @@
}
});
- plugins.push(annotationPlugin);
+ // plugins.push(annotationPlugin);
this.state = {
@@ -117,7 +116,15 @@
enterKeyValue: 0,
};
- this.editor = React.createRef();
+ this.editorRef = React.createRef();
+ this.hoveringMenuRef = React.createRef();
+ }
+
+ get editor() {
+ if(this.editorRef) {
+ return this.editorRef.current;
+ }
+ return null;
}
componentDidMount = () => {
@@ -129,20 +136,28 @@
this.updateMenu();
}
+ getDocumentLength = (document) => {
+ return document.getBlocks().reduce((l, b) => l + b.text.length, 0)
+ }
+
/**
* On change, save the new state.
*
* @param {Change} change
*/
- onChange = ({value}) => {
+ onChange = (change) => {
+
+ const operationTypes = (change && change.operations) ? change.operations.map((o) => o.type).toArray() : [];
+ console.log("CHANGE", change, operationTypes);
+ const { value } = change;
let newState = {
value: value,
startedAt: this.state.startedAt
};
- const isEmpty = value.document.length === 0;
+ const isEmpty = this.getDocumentLength(value.document) === 0;
// Reset timers when the text is empty
if (isEmpty) {
@@ -160,11 +175,35 @@
}
const oldState = R.clone(this.state);
- this.setState(newState)
- if (typeof this.props.onChange === 'function') {
- this.props.onChange(R.clone(this.state), oldState, newState);
- }
+ const categories = value.marks.reduce((acc, mark) => {
+ if(mark.type === 'category') {
+ acc.push({
+ key: mark.data.get('key'),
+ name: mark.data.get('name'),
+ color: mark.data.get('color'),
+ text: mark.data.get('text'),
+ selection: {
+ start: mark.data.get('selection').start,
+ end: mark.data.get('selection').end,
+ },
+ comment: mark.data.get('comment')
+ })
+ }
+ return acc;
+ },
+ []);
+
+ console.log("ON CHANGE categorie", categories);
+
+ newState['categories'] = categories;
+
+ this.setState(newState, () => {
+ if (typeof this.props.onChange === 'function') {
+ this.props.onChange(R.clone(this.state), oldState, newState);
+ }
+ })
+
}
/**
@@ -175,8 +214,8 @@
*/
hasMark = type => {
- const { value } = this.state
- return value.activeMarks.some(mark => mark.type === type)
+ const { value } = this.state;
+ return value.activeMarks.some(mark => mark.type === type);
}
/**
@@ -214,15 +253,47 @@
clear = () => {
const value = Plain.deserialize('');
- this.onChange({value});
+ this.onChange({
+ value,
+ });
}
focus = () => {
- if(this.editor.current) {
- this.editor.current.focus();
+ if(this.editor) {
+ this.editor.focus();
}
}
+ onClickCategoryButton = (openPortal, closePortal, isOpen, e) => {
+ e.preventDefault();
+ const { categories, value } = this.state
+
+ let newCategories = categories.slice(0);
+
+ // 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.get('key');
+ const text = mark.data.get('text');
+
+ newCategories = R.reject(category => category.key === key && category.text === text, newCategories);
+ this.editor.removeMark(mark)
+ })
+ this.setState({
+ value: this.editor.value,
+ categories: newCategories
+ });
+ closePortal();
+ } else {
+ openPortal();
+ }
+ // } else {
+ // isOpen ? closePortal() : openPortal();
+ // }
+ }
+
/**
* When a mark button is clicked, toggle the current mark.
*
@@ -231,40 +302,7 @@
*/
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
- })
+ this.editor.toggleMark(type)
}
/**
@@ -276,9 +314,10 @@
onClickBlock = (e, type) => {
e.preventDefault()
- const { value } = this.state
- const change = value.change()
- const { document } = value
+
+ const { editor } = this;
+ const { value } = editor;
+ const { document } = value;
// Handle everything but list buttons.
if (type !== 'bulleted-list' && type !== 'numbered-list') {
@@ -286,14 +325,14 @@
const isList = this.hasBlock('list-item')
if (isList) {
- change
+ editor
.setBlocks(isActive ? DEFAULT_NODE : type)
.unwrapBlock('bulleted-list')
.unwrapBlock('numbered-list')
}
else {
- change
+ editor
.setBlocks(isActive ? DEFAULT_NODE : type)
}
}
@@ -306,52 +345,103 @@
})
if (isList && isType) {
- change
+ editor
.setBlocks(DEFAULT_NODE)
.unwrapBlock('bulleted-list')
.unwrapBlock('numbered-list')
} else if (isList) {
- change
+ editor
.unwrapBlock(type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list')
.wrapBlock(type)
} else {
- change
+ editor
.setBlocks('list-item')
.wrapBlock(type)
}
}
-
-
- this.onChange(change)
+ // this.onChange(change)
}
- onPortalOpen = (portal) => {
+ onPortalOpen = () => {
+ console.log("onPORTAL OPEN", this);
+ this.updateMenu();
// When the portal opens, cache the menu element.
- this.setState({ hoveringMenu: portal.firstChild })
+ // this.setState({ hoveringMenu: this.portal.firstChild })
}
onPortalClose = (portal) => {
- let { value } = this.state
+ console.log("onPORTAL CLOSE", this);
+ // let { value } = this.state
- this.setState({
- value: value.change,
- isPortalOpen: false
- })
+ // this.setState({
+ // value: value.change,
+ // isPortalOpen: false
+ // })
}
- onCategoryClick = (category) => {
+ getSelectionParams = () => {
+
+ const { value } = this.editor
+ const { selection } = value
+ const { start, end} = selection
+
+ if (selection.isCollapsed) {
+ return {};
+ }
+
+ const nodes = [];
+ let hasStarted = false;
+ let hasEnded = false;
- const { value, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
- const change = value.change()
+ // Keep only the relevant nodes,
+ // i.e. nodes which are contained within selection
+ value.document.nodes.forEach((node) => {
+ if (start.isInNode(node)) {
+ hasStarted = true;
+ }
+ if (hasStarted && !hasEnded) {
+ nodes.push(node);
+ }
+ if (end.isAtEndOfNode(node)) {
+ hasEnded = true;
+ }
+ });
+
+ // Concatenate the nodes text
+ const text = nodes.map((node) => {
+ let textStart = start.isInNode(node) ? start.offset : 0;
+ let textEnd = end.isInNode(node) ? end.offset : node.text.length;
+ return node.text.substring(textStart,textEnd);
+ }).join('\n');
+
+ return {
+ currentSelectionText: text,
+ currentSelectionStart: start.offset,
+ currentSelectionEnd: end.offset
+ };
+ }
+
+ onCategoryClick = (closePortal, category) => {
+
+ console.log("ON CATEGORY CLICK");
+ const { value } = this.state;
let { categories } = this.state;
+ const { currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.getSelectionParams();
+
+ if(!currentSelectionText) {
+ closePortal();
+ return;
+ }
+ console.log("ACTIVE MARKS", category, currentSelectionText, currentSelectionStart, currentSelectionEnd)
+
const categoryMarks = value.activeMarks.filter(mark => mark.type === 'category')
- categoryMarks.forEach(mark => change.removeMark(mark));
+ categoryMarks.forEach(mark => this.editor.removeMark(mark));
- change.addMark({
+ this.editor.addMark({
type: 'category',
data: {
text: currentSelectionText,
@@ -360,7 +450,9 @@
end: currentSelectionEnd,
},
color: category.color,
- key: category.key
+ key: category.key,
+ name: category.name,
+ comment: category.comment
}
})
@@ -371,15 +463,14 @@
end: currentSelectionEnd,
},
});
- categories = categories.push(category);
+ categories.push(category);
- this.onChange(change)
+ console.log("CATEGORIES", categories)
this.setState({
- value: value,
- isPortalOpen: false,
- categories: categories
- });
+ categories: categories,
+ value: this.editor.value
+ }, closePortal);
}
onButtonClick = () => {
@@ -508,8 +599,7 @@
{this.renderMarkButton('bold', 'format_bold')}
{this.renderMarkButton('italic', 'format_italic')}
{this.renderMarkButton('underlined', 'format_underlined')}
- {this.renderMarkButton('category', 'label')}
-
+ {this.renderCategoryButton()}
{this.renderBlockButton('numbered-list', 'format_list_numbered')}
{this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
@@ -563,23 +653,70 @@
)
}
- // Add a `renderMark` method to render marks.
+ /**
+ * Render a mark-toggling toolbar button.
+ *
+ * @param {String} type
+ * @param {String} icon
+ * @return {Element}
+ */
- renderMark = props => {
- const { children, mark, attributes } = props
+ renderCategoryButton = () => {
+ const isActive = this.hasMark('category');
+ //const onMouseDown = e => this.onClickMark(e, type)
+ const markActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
- 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};
- }
+ return (
+ <PortalWithState
+ // closeOnOutsideClick
+ closeOnEsc
+ onOpen={this.onPortalOpen}
+ onClose={this.onPortalClose}
+ >
+ {({ openPortal, closePortal, isOpen, portal }) => {
+ console.log("PORTAL", isOpen);
+ const onMouseDown = R.partial(this.onClickCategoryButton, [openPortal, closePortal, isOpen]);
+ const onCategoryClick = R.partial(this.onCategoryClick, [closePortal,]);
+ return (
+ <React.Fragment>
+ <span className={markActivation} onMouseDown={onMouseDown} data-active={isActive}>
+ <span className="material-icons">label</span>
+ </span>
+ {portal(
+ <div className="hovering-menu" ref={this.hoveringMenuRef}>
+ <CategoriesTooltip categories={this.props.annotationCategories || defaultAnnotationsCategories} onCategoryClick={onCategoryClick} />
+ </div>
+ )}
+ </React.Fragment>
+ )}
+ }
+ </PortalWithState>
+ )
+ }
+
+ // Add a `renderMark` method to render marks.
+
+ renderMark = (props, editor, next) => {
+ const { children, mark, attributes } = props
+
+ console.log("renderMark", mark, mark.type, mark.data.color);
+ 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>
+ case 'category':
+ let spanStyle = {
+ backgroundColor: mark.data.get('color')
+ };
+ return <span {...attributes} style={ spanStyle } >{children}</span>
+ default:
+ return next();
+ }
}
/**
* Render a block-toggling toolbar button.
@@ -593,9 +730,12 @@
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 { value } = this.state;
+ const firstBlock = value.blocks.first();
+ if(firstBlock) {
+ const parent = value.document.getParent(firstBlock.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");
@@ -607,7 +747,7 @@
)
}
- renderNode = props => {
+ renderNode = (props, editor, next) => {
const { attributes, children, node } = props
switch (node.type) {
@@ -624,7 +764,7 @@
case 'numbered-list':
return <ol {...attributes}>{children}</ol>
default:
- return null;
+ return next();
}
}
@@ -638,16 +778,16 @@
const t = this.props.t;
return (
<div className="editor-slatejs p-2">
- {this.renderHoveringMenu()}
+ {/* {this.renderHoveringMenu()} */}
<Editor
- ref={this.editor}
+ ref={this.editorRef}
spellCheck
placeholder={t('slate_editor.placeholder')}
- schema={schema}
+ // schema={schema}
plugins={plugins}
value={this.state.value}
onChange={this.onChange}
- onKeyDown={this.onKeyDown}
+ // onKeyDown={this.onKeyDown}
renderMark={this.renderMark}
renderNode = {this.renderNode}
/>
@@ -655,23 +795,24 @@
)
}
- 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>
- )
- }
+ // 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
+ // const { hoveringMenu } = this.state
+ const hoveringMenu = this.hoveringMenuRef.current;
if (!hoveringMenu) return
@@ -690,7 +831,7 @@
const rect = range.getBoundingClientRect()
hoveringMenu.style.opacity = 1
- hoveringMenu.style.top = `${rect.top + window.scrollY + hoveringMenu.offsetHeight}px`
+ hoveringMenu.style.top = `${rect.top + rect.height + window.scrollY + hoveringMenu.offsetHeight}px`
hoveringMenu.style.left = `${rect.left + window.scrollX - hoveringMenu.offsetWidth / 2 + rect.width / 2}px`
}