From af1e026dbda499bdec827f6c589f15ae6fcb1191 Mon Sep 17 00:00:00 2001
From: Tim <roadscape@users.noreply.github.com>
Date: Wed, 12 Oct 2016 13:52:45 -0400
Subject: [PATCH] add paste html functionality, test images as inline #185
---
app/components/elements/ReplyEditor.scss | 2 +-
app/components/elements/SlateEditor.jsx | 13 +++++++++++++
app/components/elements/SlateEditor.scss | 6 +++---
app/utils/SlateEditor/Schema.js | 10 ++--------
4 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/app/components/elements/ReplyEditor.scss b/app/components/elements/ReplyEditor.scss
index 4ec9796b7..e3560e157 100644
--- a/app/components/elements/ReplyEditor.scss
+++ b/app/components/elements/ReplyEditor.scss
@@ -4,7 +4,7 @@
}
.PostFull .ReplyEditor__body {
- margin: 1rem -1rem 0;
+ margin: 1rem 0 0;
}
.ReplyEditor form {
diff --git a/app/components/elements/SlateEditor.jsx b/app/components/elements/SlateEditor.jsx
index b50e4ebe9..ec861b236 100644
--- a/app/components/elements/SlateEditor.jsx
+++ b/app/components/elements/SlateEditor.jsx
@@ -72,6 +72,7 @@ export default class SlateEditor extends React.Component {
// Check if the current selection has a mark with `type` in it.
hasMark = (type) => {
const { state } = this.state
+ if (!state.isExpanded) return
return state.marks.some(mark => mark.type == type)
}
@@ -295,6 +296,17 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false})))
.apply()
}
+ onPaste = (e, data, state) => {
+ console.log("** onPaste:", data.type, data.html)
+ if (data.type != 'html') return
+ const { document } = serializer.deserialize(data.html)
+
+ return state
+ .transform()
+ .insertFragment(document)
+ .apply()
+ }
+
render = () => {
const { state } = this.state
return (
@@ -370,6 +382,7 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false})))
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
+ onPaste={this.onPaste}
/>
</div>
)
diff --git a/app/components/elements/SlateEditor.scss b/app/components/elements/SlateEditor.scss
index ef0c456f2..9a7345f30 100644
--- a/app/components/elements/SlateEditor.scss
+++ b/app/components/elements/SlateEditor.scss
@@ -1,7 +1,7 @@
.SlateEditor {
- padding: 1rem;
- border: 1px solid $medium-gray;
- border-radius: 8px;
+ //padding: 1rem;
+ //border: 1px solid $medium-gray;
+ //border-radius: 8px;
}
.SlateEditor.Markdown {
diff --git a/app/utils/SlateEditor/Schema.js b/app/utils/SlateEditor/Schema.js
index 8382c64db..5297653aa 100644
--- a/app/utils/SlateEditor/Schema.js
+++ b/app/utils/SlateEditor/Schema.js
@@ -105,15 +105,9 @@ export const HtmlRules = [
{
deserialize: (el, next) => {
switch(el.tagName) {
- case 'iframe':
- return {
- kind: 'block',
- type: 'paragraph',
- nodes: next(el.children)
- }
case 'img':
return {
- kind: 'block',
+ kind: 'inline',
type: 'image',
isVoid: true,
data: {src: el.attribs.src},
@@ -156,7 +150,7 @@ export const HtmlRules = [
if(!href) console.log("** ERR: serializing <a> with no href", JSON.stringify(object.data, null, 2))
return <a href={href}>{children}</a>
}
- if(object.kind == 'block' && object.type == 'image') {
+ if(object.kind == 'inline' && object.type == 'image') {
const src = object.data.get('src')
if(!src) console.log("** ERR: serializing image with no src...", JSON.stringify(object))
return <img src={src} />
--
GitLab