diff --git a/app/components/elements/SlateEditor.jsx b/app/components/elements/SlateEditor.jsx index b2a968459a4a53b1f5a0f2835fbe6d31506745f6..aa3816763d93765b019bd95fae499a66227dc79b 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 e8ffdd07e77ddfb0136dee8181c80844200f71bc..7a548a45d68dcf4c1d141564b64e85e75b866b91 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 e7d47c25f3aa7aa9b67d4cc7c6ed73c42e9d0691..393e9a44dc73bff552f1dcbfc21d842a1e50d39f 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 80dca3f1e0fa0be8fef4bf30ae308883b2fa498c..a716d33486e89e104ab535d1fde15ac28339e2c1 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",