From 9126b628a69b8ce87800c53653007a0b5fca0a6b Mon Sep 17 00:00:00 2001
From: Tim <roadscape@users.noreply.github.com>
Date: Tue, 18 Oct 2016 14:09:13 -0400
Subject: [PATCH] change images back to block elements, use slate fork
---
app/components/elements/SlateEditor.jsx | 8 ++++----
app/components/elements/SlateEditor.scss | 13 +++++++++----
app/utils/SlateEditor/Schema.js | 4 ++--
package.json | 2 +-
4 files changed, 16 insertions(+), 11 deletions(-)
diff --git a/app/components/elements/SlateEditor.jsx b/app/components/elements/SlateEditor.jsx
index b2a968459..aa3816763 100644
--- a/app/components/elements/SlateEditor.jsx
+++ b/app/components/elements/SlateEditor.jsx
@@ -28,7 +28,7 @@ if(process.env.BROWSER) {
InsertImages({
extensions: ['jpeg', 'png', 'gif'],
applyTransform: (transform, file) => {
- return transform.insertInline({
+ return transform.insertBlock({
type: 'image',
isVoid: true,
data: { file }
@@ -179,7 +179,7 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false}), null, 2))
}
else if (state.isExpanded) {
- const href = window.prompt('Enter the URL of the link:')
+ const href = window.prompt('Enter the URL of the link:', 'http://steemit.com')
if(href) {
state = state
.transform()
@@ -380,8 +380,8 @@ console.log(JSON.stringify(Raw.serialize(state, {terse: false}), null, 2))
state = state
.transform()
//.insertBlock({type: 'paragraph', isVoid: false})
- .insertInline({type: 'image', isVoid: true, data: {src}})
- .collapseToStartOfNextBlock()
+ .insertBlock({type: 'image', isVoid: true, data: {src}})
+ //.collapseToStartOfNextBlock()
.apply()
this.setState({ state })
diff --git a/app/components/elements/SlateEditor.scss b/app/components/elements/SlateEditor.scss
index e8ffdd07e..7a548a45d 100644
--- a/app/components/elements/SlateEditor.scss
+++ b/app/components/elements/SlateEditor.scss
@@ -4,22 +4,27 @@
position: relative;
img {border: 1px dotted #00f}
}
- .active {box-shadow: 0 0 0 2px blue;}
+ img.active {box-shadow: 0 0 0 2px blue;}
hr.active {box-shadow: 0 0 0 1px blue;}
a:hover:after{
- border: 1px solid #ccc;
+ font-family: Arial;
+ border-radius: 3px;
padding: 1px 3px;
background: #eee;
content: attr(href);
display: block;
position: absolute;
- left: 0;
+ left: -25%;
top: 110%;
line-height: 1;
white-space: nowrap;
- font-size: 70%;
+ font-size: 60%;
z-index: 99999;
+ padding: 4px 8px;
+ color: #ddd;
+ transition: opacity .75s;
+ background-image: linear-gradient(180deg,#464646,#151515);
}
}
diff --git a/app/utils/SlateEditor/Schema.js b/app/utils/SlateEditor/Schema.js
index e7d47c25f..393e9a44d 100644
--- a/app/utils/SlateEditor/Schema.js
+++ b/app/utils/SlateEditor/Schema.js
@@ -112,7 +112,7 @@ export const HtmlRules = [
switch(el.tagName) {
case 'img':
return {
- kind: 'inline',
+ kind: 'block',
type: 'image',
isVoid: true,
data: {src: el.attribs.src},
@@ -155,7 +155,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 == 'inline' && object.type == 'image') {
+ if(object.kind == 'block' && 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} />
diff --git a/package.json b/package.json
index 80dca3f1e..a716d3348 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
"sendgrid": "^4.0.1",
"sequelize": "^3.21.0",
"sequelize-cli": "^2.3.1",
- "slate": "^0.14.15",
+ "slate": "git+https://github.com/SamyPesse/slate.git",
"slate-drop-or-paste-images": "^0.2.0",
"slate-insert-block-on-enter": "0.0.1",
"speakingurl": "^9.0.0",
--
GitLab