From d07c6e37108524e443b5583aff21190bc9d14b04 Mon Sep 17 00:00:00 2001
From: john <johnbarlas39@gmail.com>
Date: Thu, 8 Dec 2016 20:46:57 +0200
Subject: [PATCH] comments can now be used normally in read-only mode
---
.../SimpleEditor/ContainerEditor.js | 37 +++++++++++++++
app/components/SimpleEditor/Editor.js | 25 +++++-----
app/components/SimpleEditor/Overlay.js | 47 -------------------
app/components/SimpleEditor/SimpleEditor.jsx | 2 +-
app/components/SimpleEditor/SimpleEditor.scss | 9 ++--
.../elements/comment/CommentBubble.js | 16 ++++---
6 files changed, 64 insertions(+), 72 deletions(-)
delete mode 100644 app/components/SimpleEditor/Overlay.js
diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index b0a9045..59b6715 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -1,3 +1,4 @@
+import { each, keys, includes } from 'lodash'
import {
ContainerEditor as SubstanceContainerEditor,
Surface,
@@ -31,11 +32,18 @@ class ContainerEditor extends SubstanceContainerEditor {
}
// open for editing
+ // TODO -- should maybe change to isEditable ?
if (!this.props.disabled) {
el.addClass('sm-enabled')
el.setAttribute('contenteditable', true)
}
+ // editing locked, selection open (for comments)
+ if (this.isReadOnlyMode()) {
+ const documentSession = this.getDocumentSession()
+ documentSession.on('didUpdate', this.disableToolbar, this)
+ }
+
return el
}
@@ -43,6 +51,8 @@ class ContainerEditor extends SubstanceContainerEditor {
Surface.prototype.didMount.apply(this, arguments)
this.container.on('nodes:changed', this.onContainerChange, this)
if (this.isEmpty()) this.createText()
+
+ if (this.isReadOnlyMode()) this.links()
}
// create an empty paragraph with an empty node
@@ -73,6 +83,33 @@ class ContainerEditor extends SubstanceContainerEditor {
this.rerender()
this.setSelection(newSel)
}
+
+ // only runs if editor is in read-only mode
+ // disables all tools, apart from comments
+ disableToolbar () {
+ const commandStates = this.getCommandStates()
+
+ each(keys(commandStates), key => {
+ const allowed = ['comment', 'save', 'undo', 'redo']
+ if (!includes(allowed, key)) commandStates[key].disabled = true
+ })
+ }
+
+ getCommandStates () {
+ const commandManager = this.context.commandManager
+ return commandManager.getCommandStates()
+ }
+
+ isReadOnlyMode () {
+ return !this.isEditable() && this.isSelectable()
+ }
+
+ links () {
+ const allLinks = this.el.findAll('a')
+ each(allLinks, link =>
+ link.attr('target', '_blank')
+ )
+ }
}
export default ContainerEditor
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 2669760..0b1a223 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -1,5 +1,6 @@
import {
ProseEditor,
+ ProseEditorOverlayTools,
ScrollPane,
SplitPane,
TOCProvider
@@ -8,7 +9,7 @@ import {
import Comments from './panes/Comments/CommentBoxList'
import CommentsProvider from './panes/Comments/CommentsProvider'
import ContainerEditor from './ContainerEditor'
-import Overlay from './Overlay'
+// import Overlay from './Overlay'
import Notes from './panes/Notes/Notes'
import NotesProvider from './panes/Notes/NotesProvider'
import TableOfContents from './panes/TableOfContents/TableOfContents'
@@ -69,7 +70,7 @@ class Editor extends ProseEditor {
var contentPanel = $$(ScrollPane, {
scrollbarPosition: 'right',
- overlay: Overlay
+ overlay: ProseEditorOverlayTools
})
.append(editorWithComments)
.attr('id', 'content-panel')
@@ -132,20 +133,19 @@ class Editor extends ProseEditor {
}
getChildContext () {
- var doc = this.doc
- // TODO -- check whether this is correct
- var oldContext = super.getChildContext()
+ const oldContext = super.getChildContext()
+ const doc = this.doc
// toc provider
- var tocProvider = new TOCProvider(doc, {
+ const tocProvider = new TOCProvider(doc, {
containerId: 'body'
})
// // notes provider
- var notesProvider = new NotesProvider(doc)
+ const notesProvider = new NotesProvider(doc)
// // comments provider
- var commentsProvider = new CommentsProvider(doc, {
+ const commentsProvider = new CommentsProvider(doc, {
commandManager: this.commandManager,
comments: this.props.fragment.comments,
containerId: this.props.containerId,
@@ -156,10 +156,11 @@ class Editor extends ProseEditor {
})
// attach all to context
- return { ...oldContext,
- tocProvider: tocProvider,
- notesProvider: notesProvider,
- commentsProvider: commentsProvider
+ return {
+ ...oldContext,
+ tocProvider,
+ notesProvider,
+ commentsProvider
}
}
}
diff --git a/app/components/SimpleEditor/Overlay.js b/app/components/SimpleEditor/Overlay.js
deleted file mode 100644
index c238b54..0000000
--- a/app/components/SimpleEditor/Overlay.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ProseEditorOverlayTools } from 'substance'
-import { each, includes, keys } from 'lodash'
-
-class Overlay extends ProseEditorOverlayTools {
- getActiveTools () {
- const surface = this.getSurface()
- if (!surface) return []
-
- const activeTools = super.getActiveTools()
-
- if (!surface.isEditable() && surface.isSelectable()) {
- const commandStates = this.getCommandStates()
-
- each(keys(commandStates), key => {
- const allowed = ['comment', 'save']
- if (!includes(allowed, key)) commandStates[key].disabled = true
- })
-
- console.log('filter it', activeTools)
- }
-
- return activeTools
- }
-
- getCommandStates () {
- const commandManager = this.context.commandManager
- return commandManager.getCommandStates()
- }
-
- getContainerId () {
- const editor = this.getEditor()
- return editor.props.containerId
- }
-
- getEditor () {
- return this.context.controller
- }
-
- getSurface () {
- const containerId = this.getContainerId()
- const surfaceManager = this.context.surfaceManager
-
- return surfaceManager.getSurface(containerId)
- }
-}
-
-export default Overlay
diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx
index c7e3937..c04ec07 100644
--- a/app/components/SimpleEditor/SimpleEditor.jsx
+++ b/app/components/SimpleEditor/SimpleEditor.jsx
@@ -104,7 +104,7 @@ export default class SimpleEditor extends React.Component {
let viewMode = !canEdit
? (
<Alert bsStyle='warning' className='view-mode'>
- <span>Editor is in View Mode</span>
+ <span>Editor is in Read-Only Mode</span>
</Alert>
)
: null
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index 6787df7..f238082 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -14,6 +14,7 @@ $primary: #eee;
$ultra-light-gray: #fafafa;
$black: #000;
+$shadow: rgba(0, 0, 0, .05);
$teal: #46b9ba;
$toolbar-active-bg: rgba(204, 204, 204, .75);
$transparent-black: rgba(0, 0, 0, .75);
@@ -24,9 +25,6 @@ $white: #fff;
position: relative;
.view-mode {
- // background-color: $primary;
- // border-bottom: 1px solid $border;
- // border-top: 1px solid $border;
height: 44px;
position: fixed;
right: 0;
@@ -53,7 +51,6 @@ $white: #fff;
background-color: $primary;
border: 1px solid $border;
border-right: 0;
- // padding: 1px;
padding-left: 0;
button {
@@ -114,7 +111,7 @@ $white: #fff;
.sc-switch-text-type {
margin-left: 1px;
- width: 150px !important;
+ width: 150px;
.se-toggle {
background: transparent;
@@ -203,7 +200,7 @@ $white: #fff;
.se-context-section {
background-color: $ultra-light-gray;
border-left: 1px solid $light-gray;
- box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
+ box-shadow: inset 0 0 10px $shadow;
}
.sc-comments-pane {
diff --git a/app/components/SimpleEditor/elements/comment/CommentBubble.js b/app/components/SimpleEditor/elements/comment/CommentBubble.js
index b8fefd0..09c9b1a 100644
--- a/app/components/SimpleEditor/elements/comment/CommentBubble.js
+++ b/app/components/SimpleEditor/elements/comment/CommentBubble.js
@@ -7,12 +7,11 @@ import {
class CommentBubble extends Tool {
render ($$) {
+ const mode = this.getMode()
const title = 'Create a new comment'
- let commands = this.getCommentState()
- if (commands.mode !== 'create') return $$('div')
- commands.active = true
- this.setBubblePosition()
+ if (mode !== 'create') return $$('div')
+
const icon = $$(Icon, { icon: 'fa-comment' })
.addClass('sc-comment-icon')
@@ -31,18 +30,23 @@ class CommentBubble extends Tool {
// calculated relative to the overlay container, which gets positioned
// wrong on resize (substance bug -- TODO)
didMount () {
+ this.position()
DefaultDOMElement.getBrowserWindow().on('resize', this.didUpdate, this)
}
didUpdate () {
- if (this.el.getChildCount() === 0) return
- this.setBubblePosition()
+ this.position()
}
dispose () {
DefaultDOMElement.getBrowserWindow().off(this)
}
+ position () {
+ if (this.el.getChildCount() === 0) return
+ this.setBubblePosition()
+ }
+
setBubblePosition () {
// without this check, the editor will break on first load
const surface = this.getSurface()
--
GitLab