Release/5.1.1

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,14 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Do you want to request a feature or report a bug?**
+
+**What's the current behavior?**
+
+**What's the expected behavior?**

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.7.1",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [
@@ -10,7 +10,8 @@
     "publish": {
       "allowBranch": [
         "master",
-        "feature/*"
+        "feature/*",
+        "release/*"
       ]
     }
   }

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "license": "MIT",
   "scripts": {
     "dev": "yarn install && node -r dotenv/config ./node_modules/.bin/lerna run start --parallel",
     "start": "yarn install && ./node_modules/.bin/lerna run start --parallel",

packages/slate-editor-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-editor-example",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "A complete rich text editor based on SlateJS framework",
   "private": true,
   "main": "lib/index.js",
@@ -26,7 +26,7 @@
     "@slate-editor/font-family-plugin": "^5.1.0",
     "@slate-editor/font-size-plugin": "^5.1.0",
     "@slate-editor/grid-plugin": "^5.1.0",
-    "@slate-editor/image-plugin": "^5.1.0",
+    "@slate-editor/image-plugin": "^5.1.1",
     "@slate-editor/italic-plugin": "^5.0.0",
     "@slate-editor/link-plugin": "^5.1.0",
     "@slate-editor/list-plugin": "^5.1.0",
@@ -38,7 +38,7 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-scripts": "^1.1.4",
-    "slate-editor": "^5.1.0"
+    "slate-editor": "^5.1.1"
   },
   "files": [
     "README.md",

packages/slate-editor-image-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slate-editor/image-plugin",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "SlateJS image node plugin.",
   "main": "dist/index.js",
   "repository": "https://github.com/nossas/slate-editor",
@@ -25,7 +25,8 @@
     "url": "https://github.com/nossas/slate-editor/issues"
   },
   "scripts": {
-    "prepare": "babel src --out-dir dist --copy-files"
+    "prepare": "babel src --out-dir dist --copy-files",
+    "start": "yarn prepare --watch"
   },
   "dependencies": {
     "@slate-editor/components": "^5.0.0",

packages/slate-editor-image-plugin/src/ImageEditLayer.css

@@ -30,6 +30,15 @@
   z-index: 11;
   line-height: 1;
 }
+.image-node--container .image-node--image-edit-layer .image-node--image-edit-text {
+  color: #000;
+  font-size: 14px;
+  padding: 7px 10px;
+  text-align: center;
+  position: relative;
+  line-height: 1;
+  font-weight: 600;
+}
 
 .image-node--container:not(.readonly):hover .image-node--image-edit-layer,
 .image-node--container:not(.readonly):hover .image-node--image-edit-button {

packages/slate-editor-image-plugin/src/ImageEditLayer.js

@@ -4,12 +4,18 @@ import { Button } from '@slate-editor/components'
 // FIXME: Needs to handle assets files to work with SSR
 if (require('exenv').canUseDOM) require('./ImageEditLayer.css')
 
-const ImageEditLayer = ({ changeModalState, text }) => (
-  <div className="image-node--image-edit-layer" onClick={() => changeModalState(true)}>
-    <Button className="image-node--image-edit-button" onClick={() => changeModalState(true)}>
-      {text}
-    </Button>
-  </div>
-)
+const ImageEditLayer = ({ changeModalState, text }) => {
+  return changeModalState ? (
+    <div className="image-node--image-edit-layer" onClick={() => changeModalState(true)}>
+      <Button className="image-node--image-edit-button" onClick={() => changeModalState(true)}>
+        {text}
+      </Button>
+    </div>
+  ) : (
+    <div className="image-node--image-edit-layer" style={{backgroundColor: 'rgba(255,255,255,.9)'}}>
+      <p className="image-node--image-edit-text">{text}</p>
+    </div>
+  )
+}
 
 export default ImageEditLayer

packages/slate-editor-image-plugin/src/ImageLinkNode.js

@@ -20,6 +20,7 @@ class ImageLinkNode extends Component {
       node,
       attributes,
       readOnly,
+      isSelected,
       editor: {
         onChange,
         props: { value }
@@ -38,18 +39,26 @@ class ImageLinkNode extends Component {
         )}
 
         <div className={classnames('image-node--container', { readonly: readOnly })}>
-          <ImageEditLayer
-            changeModalState={this.modal.bind(this)}
-            text="Editar"
-          />
+          {this.props.children}
+          {isSelected && (
+            <ImageEditLayer
+              changeModalState={this.modal.bind(this)}
+              text="Editar"
+            />
+          )}
+          {!readOnly && !isSelected && (
+            <ImageEditLayer
+              text="Selecione a imagem para editar"
+            />
+          )}
           <a
             href={node.data.get('href')}
             target={node.data.get('openExternal') ? '_blank' : '_self'}
           >
             <img
               {...attributes}
               role="presentation"
-              className="image-node"
+              className={`image-node ${!readOnly && isSelected && 'selected'}`}
               src={node.data.get('src')}
               title={node.data.get('title')}
               alt={node.data.get('title')}

packages/slate-editor-image-plugin/src/ImageNode.css

@@ -13,3 +13,7 @@
   max-width: 100%;
   position: relative;
 }
+
+.image-node.selected {
+  border: 3px dotted blue;
+}

packages/slate-editor-image-plugin/src/ImageNode.js

@@ -14,6 +14,11 @@ class ImageNode extends Component {
   }
 
   modal(isModalActive) {
+    if (isModalActive) {
+      const { editor: { onChange, props: { value } } } = this.props
+      onChange(value.change().select())
+    }
+
     this.setState({ isModalActive })
   }
 
@@ -23,6 +28,7 @@ class ImageNode extends Component {
       node,
       attributes,
       readOnly,
+      isSelected,
       editor: {
         onChange,
         props: { value }
@@ -41,14 +47,22 @@ class ImageNode extends Component {
         )}
 
         <div className={classnames('image-node--container', { readonly: readOnly })}>
-          <ImageEditLayer
-            changeModalState={this.modal.bind(this)}
-            text="Editar"
-          />
+          {this.props.children}
+          {isSelected && (
+            <ImageEditLayer
+              changeModalState={this.modal.bind(this)}
+              text="Editar"
+            />
+          )}
+          {!readOnly && !isSelected && (
+            <ImageEditLayer
+              text="Selecione a imagem para editar"
+            />
+          )}
           <img
             {...attributes}
             role="presentation"
-            className="image-node"
+            className={`image-node ${!readOnly && isSelected && 'selected'}`}
             src={node.data.get('src')}
             title={node.data.get('title')}
             alt={node.data.get('title')}

packages/slate-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-editor",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "A complete rich text editor based on SlateJS framework",
   "main": "dist/index.js",
   "repository": {
@@ -30,7 +30,7 @@
     "@slate-editor/font-family-plugin": "^5.1.0",
     "@slate-editor/font-size-plugin": "^5.1.0",
     "@slate-editor/grid-plugin": "^5.1.0",
-    "@slate-editor/image-plugin": "^5.1.0",
+    "@slate-editor/image-plugin": "^5.1.1",
     "@slate-editor/italic-plugin": "^5.0.0",
     "@slate-editor/link-plugin": "^5.1.0",
     "@slate-editor/list-plugin": "^5.1.0",