diff --git a/app/components/elements/SlateEditor.jsx b/app/components/elements/SlateEditor.jsx index ec861b236b0367ebdb49f4b5b5f16be5886cd3a8..e462302d8a137c24e0dc0745b1e9f5ab6a166576 100644 --- a/app/components/elements/SlateEditor.jsx +++ b/app/components/elements/SlateEditor.jsx @@ -28,7 +28,7 @@ if(process.env.BROWSER) { InsertImages({ extensions: ['jpeg'], applyTransform: (transform, file) => { - return transform.insertBlock({ + return transform.insertInline({ type: 'image', isVoid: true, data: { file } @@ -160,7 +160,7 @@ export default class SlateEditor extends React.Component { const hasLinks = this.hasInline('link') if (hasLinks) { -console.log(JSON.stringify(Raw.serialize(state, {terse: false}))) +console.log(JSON.stringify(Raw.serialize(state, {terse: false}), null, 2)) state = state .transform() .unwrapInline('link') @@ -195,13 +195,14 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false}))) .collapseToEnd() .apply() } -console.log(JSON.stringify(Raw.serialize(state, {terse: false}))) +console.log(JSON.stringify(Raw.serialize(state, {terse: false}), null, 2)) this.setState({ state }) } // Markdown-style quick formatting onKeyDown = (e, data, state) => { + if(data.isMod) return this.onModKeyDown(e, data, state); switch (data.key) { case 'space': return this.onSpace(e, state) case 'backspace': return this.onBackspace(e, state) @@ -209,6 +210,33 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false}))) } } + onModKeyDown = (e, data, state) => { + let mark + switch (data.key) { + case 'b': + mark = 'bold' + break + case 'i': + mark = 'italic' + break + case 'u': + mark = 'underline' + break + case 'k': + return this.onClickLink(e); + } + + if(!mark) return; + + state = state + .transform() + .toggleMark(mark) + .apply() + + e.preventDefault() + return state + } + // If space was entered, check if it was a markdown sequence onSpace = (e, state) => { if (state.isExpanded) return diff --git a/app/components/elements/SlateEditor.scss b/app/components/elements/SlateEditor.scss index 9a7345f308cf0c74bed7fe539069c1e0ada68be0..9f616277d4d42a448bb50bb55f6a8d128fdfa787 100644 --- a/app/components/elements/SlateEditor.scss +++ b/app/components/elements/SlateEditor.scss @@ -8,6 +8,7 @@ a { border-bottom: 1px dotted #00f; position: relative; + img {border: 1px dotted #00f} } .active { box-shadow: 0 0 0 2px blue; diff --git a/app/utils/SlateEditor/Schema.js b/app/utils/SlateEditor/Schema.js index 5297653aacea5360cbf9c93e9f679b5ab42d493c..e7d47c25f3aa7aa9b67d4cc7c6ed73c42e9d0691 100644 --- a/app/utils/SlateEditor/Schema.js +++ b/app/utils/SlateEditor/Schema.js @@ -51,11 +51,16 @@ export const HtmlRules = [ deserialize: (el, next) => { const type = BLOCK_TAGS[el.tagName] if (!type) return + + // Special case for <pre>: ignore its inner <code> element. + const code = el.tagName == 'pre' ? el.children[0] : null + const children = code && code.tagName == 'code' ? code.children : el.children + return { kind: 'block', type: type, isVoid: (type == 'hr'), - nodes: next(el.children) + nodes: next(children) } }, serialize: (object, children) => {