irinotes: comparison client/src/components/SlateEditor/index.js

Mercurial Mercurial > irinotes / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/src/components/SlateEditor/index.js

changeset 172	4b780ebbedc6
parent 171	03334a31130a
child 173	0e6703cd0968

equal deleted inserted replaced

-:03334a31130a
+:4b780ebbedc6
 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 { PortalWithState } from 'react-portal';
 import { Trans, withNamespaces } from 'react-i18next';
 import * as R from 'ramda';
 import HtmlSerializer from './HtmlSerializer';
 import AnnotationPlugin from './AnnotationPlugin';
 import CategoriesTooltip from './CategoriesTooltip';
 bold: {
 fontWeight: 'bold'
 },
 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'
 },
 underlined: {
 },
 })
 /**
-* The rich text example.
 *
 * @type {Component}
 */
 class SlateEditor extends React.Component {
 currentSelectionEnd: end,
 });
 }
 });
-plugins.push(annotationPlugin);
+// plugins.push(annotationPlugin);
 this.state = {
 value: props.note ? Value.fromJSON(initialValue) : Plain.deserialize(''),
 startedAt: null,
 categories: [],
 isCheckboxChecked: false,
 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 = () => {
 this.updateMenu();
 this.focus();
 componentDidUpdate = () => {
 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) {
 Object.assign(newState, {
 startedAt: null,
 if (!isEmpty && this.state.startedAt === null) {
 Object.assign(newState, { startedAt: now() });
 }
 const oldState = R.clone(this.state);
-this.setState(newState)
+const categories = value.marks.reduce((acc, mark) => {
-if (typeof this.props.onChange === 'function') {
+if(mark.type === 'category') {
-this.props.onChange(R.clone(this.state), oldState, newState);
+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);
+}
+})
 }
 /**
 * Check if the current selection has a mark with `type` in it.
 *
 * @param {String} type
 * @return {Boolean}
 */
 hasMark = type => {
-const { value } = this.state
+const { value } = this.state;
-return value.activeMarks.some(mark => mark.type === type)
+return value.activeMarks.some(mark => mark.type === type);
 }
 /**
 * Check if the any of the currently selected blocks are of `type`.
 *
 return categories.delete(categoryIndex)
 }
 clear = () => {
 const value = Plain.deserialize('');
-this.onChange({value});
+this.onChange({
+value,
+});
 }
 focus = () => {
-if(this.editor.current) {
+if(this.editor) {
-this.editor.current.focus();
+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.
 *
 * @param {Event} e
 * @param {String} type
 */
 onClickMark = (e, type) => {
+this.editor.toggleMark(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 {String} type
 */
 onClickBlock = (e, type) => {
 e.preventDefault()
-const { value } = this.state
-const change = value.change()
+const { editor } = this;
-const { document } = value
+const { value } = editor;
+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
+editor
 .setBlocks(isActive ? DEFAULT_NODE : type)
 .unwrapBlock('bulleted-list')
 .unwrapBlock('numbered-list')
 }
 else {
-change
+editor
 .setBlocks(isActive ? DEFAULT_NODE : type)
 }
 }
 // Handle the extra wrapping required for list buttons.
 const isType = value.blocks.some((block) => {
 return !!document.getClosest(block.key, parent => parent.type === type)
 })
 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 = () => {
+console.log("onPORTAL OPEN", this);
-onPortalOpen = (portal) => {
+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,
+// this.setState({
-isPortalOpen: false
+//   value: value.change,
-})
+//   isPortalOpen: false
-}
+// })
+}
-onCategoryClick = (category) => {
+getSelectionParams = () => {
-const { value, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
-const change = value.change()
+const { value } = this.editor
+const { selection } = value
+const { start, end} = selection
+if (selection.isCollapsed) {
+return {};
+}
+const nodes = [];
+let hasStarted = false;
+let hasEnded = false;
+// 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,
 selection: {
 start: currentSelectionStart,
 end: currentSelectionEnd,
 },
 color: category.color,
-key: category.key
+key: category.key,
+name: category.name,
+comment: category.comment
 }
 })
 Object.assign(category, {
 text: currentSelectionText,
 selection: {
 start: currentSelectionStart,
 end: currentSelectionEnd,
 },
 });
-categories = categories.push(category);
+categories.push(category);
-this.onChange(change)
+console.log("CATEGORIES", categories)
 this.setState({
-value: value,
+categories: categories,
-isPortalOpen: false,
+value: this.editor.value
-categories: categories
+}, closePortal);
-});
 }
 onButtonClick = () => {
 if (typeof this.props.onButtonClick === 'function') {
 this.props.onButtonClick();
 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.renderCategoryButton()}
 {this.renderBlockButton('numbered-list', 'format_list_numbered')}
 {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
 {this.renderToolbarButtons()}
 <span className="material-icons">{icon}</span>
 </span>
 )
 }
-// Add a `renderMark` method to render marks.
+/**
+* Render a mark-toggling toolbar button.
-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}
 */
+renderCategoryButton = () => {
+const isActive = this.hasMark('category');
+//const onMouseDown = e => this.onClickMark(e, type)
+const markActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
+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.
+*
+* @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 { value } = this.state;
-const parent = value.document.getParent(value.blocks.first().key)
+const firstBlock = value.blocks.first();
-isActive = this.hasBlock('list-item') && parent && parent.type === type
+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");
 return (
 <span className="material-icons">{icon}</span>
 </span>
 )
 }
-renderNode = props => {
+renderNode = (props, editor, next) => {
 const { attributes, children, node } = props
 switch (node.type) {
 case 'block-quote':
 return <blockquote {...attributes}>{children}</blockquote>
 case 'list-item':
 return <li {...attributes}>{children}</li>
 case 'numbered-list':
 return <ol {...attributes}>{children}</ol>
 default:
-return null;
+return next();
 }
 }
 /**
 * Render the Slate editor.
 renderEditor = () => {
 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}
 />
 </div>
 )
 }
-renderHoveringMenu = () => {
+// renderHoveringMenu = () => {
-return (
+//   return (
-<Portal ref="portal"
+//     <Portal ref="portal"
-isOpened={this.state.isPortalOpen} isOpen={this.state.isPortalOpen}
+//       isOpened={this.state.isPortalOpen} isOpen={this.state.isPortalOpen}
-onOpen={this.onPortalOpen}
+//       onOpen={this.onPortalOpen}
-onClose={this.onPortalClose}
+//       onClose={this.onPortalClose}
-closeOnOutsideClick={false} closeOnEsc={true}>
+//       closeOnOutsideClick={false} closeOnEsc={true}>
-<div className="hovering-menu">
+//       <div className="hovering-menu">
-<CategoriesTooltip categories={this.props.annotationCategories || defaultAnnotationsCategories} onCategoryClick={this.onCategoryClick} />
+//         <CategoriesTooltip categories={this.props.annotationCategories || defaultAnnotationsCategories} onCategoryClick={this.onCategoryClick} />
-</div>
+//       </div>
-</Portal>
+//     </Portal>
-)
+//   )
-}
+// }
 updateMenu = () => {
-const { hoveringMenu } = this.state
+// const { hoveringMenu } = this.state
+const hoveringMenu = this.hoveringMenuRef.current;
 if (!hoveringMenu) return
 // if (state.isBlurred || state.isCollapsed) {
 //   hoveringMenu.removeAttribute('style')
 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.top = `${rect.top + rect.height + window.scrollY + hoveringMenu.offsetHeight}px`
 hoveringMenu.style.left = `${rect.left + window.scrollX - hoveringMenu.offsetWidth / 2 + rect.width / 2}px`
 }
 }

irinotes