insert image as inline, add shortcuts #185

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

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;

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) => {