From 014c4fbfebb38ac0d4d3f9092430e8c76850b73e Mon Sep 17 00:00:00 2001
From: Tim <roadscape@users.noreply.github.com>
Date: Thu, 13 Oct 2016 11:41:26 -0400
Subject: [PATCH] insert image as inline, add shortcuts #185
---
app/components/elements/SlateEditor.jsx | 34 +++++++++++++++++++++---
app/components/elements/SlateEditor.scss | 1 +
app/utils/SlateEditor/Schema.js | 7 ++++-
3 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/app/components/elements/SlateEditor.jsx b/app/components/elements/SlateEditor.jsx
index ec861b236..e462302d8 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 9a7345f30..9f616277d 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 5297653aa..e7d47c25f 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) => {
--
GitLab