# HG changeset patch # User Alexandre Segura # Date 1496335594 -7200 # Node ID 877d8796b86def5b054c7ee68f419caee7f05696 # Parent e67cd18cc594cc3f2ca38932667467bdf9f9744a Store serialized HTML in note. diff -r e67cd18cc594 -r 877d8796b86d client/src/HtmlSerializer.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/HtmlSerializer.js Thu Jun 01 18:46:34 2017 +0200 @@ -0,0 +1,63 @@ +import React from 'react' +import { Html } from 'slate' + +const BLOCK_TAGS = { + blockquote: 'quote', + p: 'paragraph', + pre: 'code' +} + +// Add a dictionary of mark tags. +const MARK_TAGS = { + em: 'italic', + strong: 'bold', + u: 'underline', +} + +const rules = [ + // Block rules + { + deserialize(el, next) { + const type = BLOCK_TAGS[el.tagName] + if (!type) return + return { + kind: 'block', + type: type, + nodes: next(el.children) + } + }, + serialize(object, children) { + if (object.kind != 'block') return + switch (object.type) { + case 'code': return
{children}
+ case 'paragraph': + case 'line': return

{children}

+ case 'quote': return
{children}
+ } + } + }, + // Mark rules + { + deserialize(el, next) { + const type = MARK_TAGS[el.tagName] + if (!type) return + return { + kind: 'mark', + type: type, + nodes: next(el.children) + } + }, + serialize(object, children) { + if (object.kind != 'mark') return + switch (object.type) { + case 'bold': return {children} + case 'italic': return {children} + case 'underline': return {children} + } + } + } +] + +const serializer = new Html({ rules }) + +export default serializer diff -r e67cd18cc594 -r 877d8796b86d client/src/actions/notesActions.js --- a/client/src/actions/notesActions.js Thu Jun 01 17:32:07 2017 +0200 +++ b/client/src/actions/notesActions.js Thu Jun 01 18:46:34 2017 +0200 @@ -10,6 +10,7 @@ session: session.id, raw: data.raw, plain: data.plain, + html: data.html, startedAt: data.startedAt, finishedAt: data.finishedAt } diff -r e67cd18cc594 -r 877d8796b86d client/src/components/Note.js --- a/client/src/components/Note.js Thu Jun 01 17:32:07 2017 +0200 +++ b/client/src/components/Note.js Thu Jun 01 18:46:34 2017 +0200 @@ -4,7 +4,8 @@ const Note = ({note}) => { return (
- {note.startedAt} ⇒ {note.finishedAt} {note.plain} +
{note.startedAt} ⇒ {note.finishedAt}
+
); }; diff -r e67cd18cc594 -r 877d8796b86d client/src/components/NoteInput.js --- a/client/src/components/NoteInput.js Thu Jun 01 17:32:07 2017 +0200 +++ b/client/src/components/NoteInput.js Thu Jun 01 18:46:34 2017 +0200 @@ -25,10 +25,13 @@ onAddNoteClick = () => { const plain = this.refs.editor.asPlain(); const raw = this.refs.editor.asRaw(); + const html = this.refs.editor.asHtml(); this.props.addNote(this.props.session, { plain: plain, raw: raw, + html: html, + startedAt: this.state.startedAt, finishedAt: moment().format('H:mm:ss') }); diff -r e67cd18cc594 -r 877d8796b86d client/src/components/SlateEditor.js --- a/client/src/components/SlateEditor.js Thu Jun 01 17:32:07 2017 +0200 +++ b/client/src/components/SlateEditor.js Thu Jun 01 18:46:34 2017 +0200 @@ -1,6 +1,7 @@ import { Editor, Plain, Raw } from 'slate' import React from 'react' import moment from 'moment'; +import HtmlSerializer from '../HtmlSerializer' /** * Define the default node type. @@ -137,6 +138,10 @@ return Raw.serialize(this.state.state); } + asHtml = () => { + return HtmlSerializer.serialize(this.state.state); + } + clear = () => { const state = Plain.deserialize(''); this.onChange(state); diff -r e67cd18cc594 -r 877d8796b86d client/src/store/noteRecord.js --- a/client/src/store/noteRecord.js Thu Jun 01 17:32:07 2017 +0200 +++ b/client/src/store/noteRecord.js Thu Jun 01 18:46:34 2017 +0200 @@ -3,8 +3,11 @@ export default Immutable.Record({ id: '', session: '', + plain: '', raw: {}, + html: '', + startedAt: '', finishedAt: '', });