irinotes: comparison client/src/components/SlateEditor.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.js

changeset 157	5c3af4f10e92
parent 143	cfcbf4bc66f1
child 159	a4705c2b4544

equal deleted inserted replaced

-:384f4539b76a
+:5c3af4f10e92
-import { Editor, Plain, Raw } from 'slate'
+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 Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
 },
 italic: {
 fontStyle: 'italic'
 },
 underlined: {
-textDecoration: 'underline'
+textDecoration: 'underlined'
 }
 }
 }
+const initialValue = Value.fromJSON({
+document: {
+nodes: [
+{
+object: 'block',
+type: 'paragraph',
+nodes: [
+{
+object: 'text',
+leaves: [
+{
+text: '',
+},
+],
+},
+],
+},
+],
+},
+})
 /**
 * The rich text example.
 *
 * @type {Component}
 }
 });
 plugins.push(annotationPlugin);
 this.state = {
-state: props.note ? Raw.deserialize(props.note.raw) : Plain.deserialize(''),
+value: props.note ? initialValue : Plain.deserialize(''),
 startedAt: null,
 finishedAt: null,
 currentSelectionText: '',
 currentSelectionStart: 0,
 currentSelectionEnd: 0,
 componentDidUpdate = () => {
 this.updateMenu();
 }
 /**
-* Check if the current selection has a mark with `type` in it.
-*
-* @param {String} type
-* @return {Boolean}
-*/
-hasMark = (type) => {
-const { state } = this.state
-return state.marks.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 { state } = this.state
-return state.blocks.some(node => node.type === type)
-}
-/**
 * On change, save the new state.
 *
-* @param {State} state
+* @param {Change} change
 */
-onChange = (state) => {
+onChange = ({value}) => {
 let newState = {
-state: state,
+value: value,
 startedAt: this.state.startedAt
 };
-const isEmpty = state.document.length === 0;
+const isEmpty = value.document.length === 0;
 // Reset timers when the text is empty
 if (isEmpty) {
 Object.assign(newState, {
 startedAt: null,
 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.state);
+return Plain.serialize(this.state.value);
 }
 asRaw = () => {
-return Raw.serialize(this.state.state);
+return JSON.stringify(this.state.value.toJSON());
 }
 asHtml = () => {
-return HtmlSerializer.serialize(this.state.state);
+return HtmlSerializer.serialize(this.state.value);
 }
 asCategories = () => {
 return this.state.categories
 }
 const categoryIndex = categories.findIndex(category => category.key === key && category.text === text)
 return categories.delete(categoryIndex)
 }
 clear = () => {
-const state = Plain.deserialize('');
+const value = Plain.deserialize('');
-this.onChange(state);
+this.onChange({value});
 }
 focus = () => {
 this.refs.editor.focus();
 }
 /**
 * On key down, if it's a formatting command toggle a mark.
 *
 * @param {Event} e
 * @param {Object} data
-* @param {State} state
+* @param {Change} change
-* @return {State}
+* @return {Change}
 */
-onKeyDown = (e, data, state) => {
+onKeyDown = (e, change) => {
+//   if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
-if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
-e.preventDefault();
+//   e.preventDefault();
-this.props.onEnterKeyDown();
+//   this.props.onEnterKeyDown();
-return state;
+//   return change;
-}
+// }
-if (!data.isMod) return
+// if (!data.isMod) return
-let mark
+if (!e.ctrlKey) return
+// Decide what to do based on the key code...
-switch (data.key) {
+switch (e.key) {
-case 'b':
+// When "B" is pressed, add a "bold" mark to the text.
-mark = 'bold'
+case 'b': {
-break
+e.preventDefault()
-case 'i':
+change.toggleMark('bold')
-mark = 'italic'
-break
+return true
-case 'u':
+}
-mark = 'underlined'
+case 'i': {
-break
+// When "U" is pressed, add an "italic" mark to the text.
-default:
+e.preventDefault()
-return
+change.toggleMark('italic')
-}
+return true
-state = state
+}
-.transform()
+case 'u': {
-.toggleMark(mark)
+// When "U" is pressed, add an "underline" mark to the text.
-.apply()
+e.preventDefault()
+change.toggleMark('underlined')
-e.preventDefault()
-return state
+return true
 }
+}
-/**
+}
+/**
 * When a mark button is clicked, toggle the current mark.
 *
 * @param {Event} e
 * @param {String} type
 */
 onClickMark = (e, type) => {
-e.preventDefault()
-const { state } = this.state
+e.preventDefault()
+const { value } = this.state
 let { categories } = this.state
-const transform = state.transform()
 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 = state.marks.filter(mark => mark.type === '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');
 categories = this.removeCategory(categories, key, text)
-transform.removeMark(mark)
+const change = value.change().removeMark(mark)
+this.onChange(change)
 })
 } else {
 isPortalOpen = !this.state.isPortalOpen;
 }
 } else {
-transform.toggleMark(type)
+const change = value.change().toggleMark(type)
+this.onChange(change)
 }
 this.setState({
-state: transform.apply(),
+state: value.change,
 isPortalOpen: isPortalOpen,
 categories: categories
 })
 }
 * @param {String} type
 */
 onClickBlock = (e, type) => {
 e.preventDefault()
-let { state } = this.state
+const { value } = this.state
-const transform = state.transform()
+const change = value.change()
-const { document } = state
+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) {
-transform
+change
-.setBlock(isActive ? DEFAULT_NODE : type)
+.setBlocks(isActive ? DEFAULT_NODE : type)
 .unwrapBlock('bulleted-list')
 .unwrapBlock('numbered-list')
 }
 else {
-transform
+change
-.setBlock(isActive ? DEFAULT_NODE : type)
+.setBlocks(isActive ? DEFAULT_NODE : type)
 }
 }
 // Handle the extra wrapping required for list buttons.
 else {
 const isList = this.hasBlock('list-item')
-const isType = state.blocks.some((block) => {
+const isType = value.blocks.some((block) => {
 return !!document.getClosest(block.key, parent => parent.type === type)
 })
 if (isList && isType) {
-transform
+change
-.setBlock(DEFAULT_NODE)
+.setBlocks(DEFAULT_NODE)
 .unwrapBlock('bulleted-list')
 .unwrapBlock('numbered-list')
 } else if (isList) {
-transform
+change
 .unwrapBlock(type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list')
 .wrapBlock(type)
 } else {
-transform
+change
-.setBlock('list-item')
+.setBlocks('list-item')
 .wrapBlock(type)
 }
 }
-state = transform.apply()
-this.setState({ state })
+this.onChange(change)
 }
 onPortalOpen = (portal) => {
 // When the portal opens, cache the menu element.
 this.setState({ hoveringMenu: portal.firstChild })
 }
 onPortalClose = (portal) => {
-let { state } = this.state
+let { value } = this.state
-const transform = state.transform();
 this.setState({
-state: transform.apply(),
+value: value.change,
 isPortalOpen: false
 })
 }
 onCategoryClick = (category) => {
-const { state, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
+const { value, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
+const change = value.change()
 let { categories } = this.state;
-const transform = state.transform();
+const categoryMarks = value.activeMarks.filter(mark => mark.type === 'category')
-const categoryMarks = state.marks.filter(mark => mark.type === 'category')
+categoryMarks.forEach(mark => change.removeMark(mark));
-categoryMarks.forEach(mark => transform.removeMark(mark));
+change.addMark({
-transform.addMark({
 type: 'category',
 data: {
 text: currentSelectionText,
 selection: {
 start: currentSelectionStart,
 },
 color: category.color,
 key: category.key
 }
 })
+this.onChange(change)
 Object.assign(category, {
 text: currentSelectionText,
 selection: {
 start: currentSelectionStart,
 },
 });
 categories = categories.push(category);
 this.setState({
-state: transform.apply(),
+value: value,
 isPortalOpen: false,
 categories: categories
 });
 }
 * @return {Element}
 */
 render = () => {
 return (
-<div>
+<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 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>
 )
 }
-/**
-* Render the toolbar.
-*
-* @return {Element}
-*/
-renderToolbar = () => {
-return (
-<div className="menu toolbar-menu">
-{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">
+<div className="checkbox float-right">
-<label>
+<label className="mr-2">
-<input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Entrée</kbd>= Ajouter une note
+<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>
-{ !this.props.note && this.renderToolbarCheckbox() }
+<button type="button" className="btn btn-primary btn-sm text-secondary float-right mr-5" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
-<button type="button" className="btn btn-primary btn-lg" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
 { this.props.note ? 'Save note' : 'Ajouter' }
 </button>
+{ !this.props.note && this.renderToolbarCheckbox() }
 </div>
 );
 }
 /**
 renderMarkButton = (type, icon) => {
 const isActive = this.hasMark(type)
 const onMouseDown = e => this.onClickMark(e, type)
-return (
-<span className="button" onMouseDown={onMouseDown} data-active={isActive}>
+return (
+<span className="button text-primary" 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>
+}
+}
 /**
 * Render a block-toggling toolbar button.
 *
 * @param {String} type
 * @param {String} icon
 * @return {Element}
 */
 renderBlockButton = (type, icon) => {
-const isActive = this.hasBlock(type)
+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)
 return (
-<span className="button" onMouseDown={onMouseDown} data-active={isActive}>
+<span className="button text-primary" 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>
+}
+}
 /**
 * Render the Slate editor.
 *
 * @return {Element}
 */
 renderEditor = () => {
 return (
+<div className="editor-wrapper sticky-bottom p-2">
 <div className="editor-slatejs">
 {this.renderHoveringMenu()}
 <Editor
 ref="editor"
 spellCheck
-placeholder={'Enter some rich text...'}
+autoFocus
+placeholder={'Votre espace de prise de note...'}
 schema={schema}
 plugins={plugins}
-state={this.state.state}
+value={this.state.value}
 onChange={this.onChange}
 onKeyDown={this.onKeyDown}
+renderMark={this.renderMark}
+renderNode = {this.renderNode}
 />
+</div>
 </div>
 )
 }
 renderHoveringMenu = () => {

irinotes