diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index a7a68f23822ebe5d707393762a86823cdee53a9a..d344074aa10e53047fd213df54295c4b351e3944 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -44,6 +44,13 @@ class ContainerEditor extends SubstanceContainerEditor {
if (this.isEmpty()) this.createText()
this.el.focus() // TODO notworking
+ let editorSession = this.getEditorSession()
+ editorSession.onUpdate('document', this._onContainerChanged, this, {
+ path: [this.getContainerId(), 'nodes']
+ })
+
+ editorSession.onUpdate('document', this.rerender, this, {})
+
// if (this.isReadOnlyMode()) {
// const documentSession = this.getDocumentSession()
// documentSession.on('didUpdate', this.disableToolbar, this)
@@ -173,7 +180,6 @@ class ContainerEditor extends SubstanceContainerEditor {
endOffset: 0
})
}.bind(this))
- console.log(newSel)
this.rerender()
this.editorSession.setSelection(newSel)
}
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 0fec6f1563458f1525e2761f093d8c58d3cd42f6..266f67986d21ad20c9f54979d6ea1718f3713b19 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -27,7 +27,7 @@ class Editor extends ProseEditor {
domSelectionRendered () {
// TODO what to handle here????
- console.log('rendered')
+ // console.log('rendered')
}
updateTrackChange () {
@@ -43,6 +43,8 @@ class Editor extends ProseEditor {
willUpdateState () {}
didMount () {
+ console.log(this.editorSession)
+ this.editorSession.onUpdate('document', this.rerender, this, {})
// this.documentSession.on('didUpdate', this.documentSessionUpdated, this)
// this.documentSession.on('fileUploadTrigger', this.handleUpload, this)
this.extendState({ editorReady: true })
@@ -84,16 +86,16 @@ class Editor extends ProseEditor {
footerNotes
)
- // var commentsPane = this.state.editorReady
- // ? $$(Comments, {
- // // TODO -- should probably remove the || {}
- // comments: this.props.fragment.comments || {},
- // fragment: this.props.fragment,
- // update: this.props.update,
- // user: this.props.user
- // }).addClass('sc-comments-pane')
- // : $$('div')
- const commentsPane = $$('div')
+ var commentsPane = this.state.editorReady
+ ? $$(Comments, {
+ // TODO -- should probably remove the || {}
+ comments: this.props.fragment.comments || {},
+ fragment: this.props.fragment,
+ update: this.props.update,
+ user: this.props.user
+ }).addClass('sc-comments-pane')
+ : $$('div')
+
var editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
.append(
editorWithFooter,
@@ -103,7 +105,7 @@ class Editor extends ProseEditor {
var contentPanel = $$(ScrollPane, {
name: 'contentPanel',
// contextMenu: 'custom',
- scrollbarPosition: 'right',
+ scrollbarPosition: 'right'
})
.append(editorWithComments,
$$(Overlay),
@@ -206,18 +208,18 @@ class Editor extends ProseEditor {
// notes provider
const notesProvider = new NotesProvider(doc)
- // // comments provider
- // const commentsProvider = new CommentsProvider(doc, {
- // commandManager: this.commandManager,
- // comments: this.props.fragment.comments,
- // containerId: this.props.containerId,
- // controller: this,
- // documentSession: this.documentSession,
- // fragment: this.props.fragment,
- // surfaceManager: this.surfaceManager,
- // toggleCommentsArea: this.toggleCommentsArea,
- // update: this.props.update
- // })
+ // comments provider
+ const commentsProvider = new CommentsProvider(doc, {
+ commandManager: this.commandManager,
+ comments: this.props.fragment.comments,
+ containerId: this.props.containerId,
+ controller: this,
+ editorSession: this.editorSession,
+ fragment: this.props.fragment,
+ surfaceManager: this.surfaceManager,
+ toggleCommentsArea: this.toggleCommentsArea,
+ update: this.props.update
+ })
// TODO -- do I need all of these?
// track changes provider
@@ -234,9 +236,9 @@ class Editor extends ProseEditor {
return {
...oldContext,
tocProvider,
- notesProvider
- // commentsProvider,
- // trackChangesProvider
+ notesProvider,
+ commentsProvider,
+ trackChangesProvider
}
}
}
diff --git a/app/components/SimpleEditor/config.js b/app/components/SimpleEditor/config.js
index 6d724201f1c74682974c1fd1628aefa500fb0e82..dfc01f68b3c31dfd7c72b10e8fc64ad109c409ce 100644
--- a/app/components/SimpleEditor/config.js
+++ b/app/components/SimpleEditor/config.js
@@ -13,12 +13,13 @@ import {
SubscriptPackage,
SuperscriptPackage,
SwitchTextTypePackage,
- SpellCheckPackage
+ SpellCheckPackage,
+ ListPackage
} from 'substance'
// My Elements
// import CodeblockPackage from './elements/codeblock/CodeblockPackage'
-// import CommentPackage from './elements/comment/CommentPackage'
+import CommentPackage from './elements/comment/CommentPackage'
// import ExtractPackage from './elements/extract/ExtractPackage'
import NotePackage from './elements/note/NotePackage'
// import SourceNotePackage from './elements/source_note/SourceNotePackage'
@@ -56,12 +57,13 @@ let config = {
config.import(LinkPackage)
config.import(SpellCheckPackage)
+ config.import(ListPackage)
// config.import(CodeblockPackage)
// // config.import(DialoguePackage)
// config.import(ExtractPackage)
config.import(NotePackage)
// config.import(SourceNotePackage)
- // config.import(CommentPackage)
+ config.import(CommentPackage)
// config.import(ImagePackage)
//
// config.import(TrackChangePackage)
diff --git a/app/components/SimpleEditor/elements/comment/CommentBubble.js b/app/components/SimpleEditor/elements/comment/CommentBubble.js
index 523c590e733e330ba439cd492e098bf1f12ddf86..ab7e1a01fafd155af37db09bc5277e202c9a6f06 100644
--- a/app/components/SimpleEditor/elements/comment/CommentBubble.js
+++ b/app/components/SimpleEditor/elements/comment/CommentBubble.js
@@ -1,5 +1,4 @@
import {
- createAnnotation,
DefaultDOMElement,
FontAwesomeIcon as Icon,
Tool
@@ -52,25 +51,27 @@ class CommentBubble extends Tool {
if (!surface) return
const documentElement = document.querySelector('.se-content')
- const overlayContainer = document.querySelector('.sc-overlay-container')
+ const overlayContainer = document.querySelector('.sc-overlay')
setTimeout(() => { // read comment below
const documentElementWidth = documentElement.offsetWidth
const overlayContainerLeft = overlayContainer.offsetLeft
const left = documentElementWidth - overlayContainerLeft - 15
-
+ const selection = this.getSelection()
+ const container = surface.getContainer()
+ const position = container.getPosition(selection.end.path[0])
// unhide it first, as the bubble has no height otherwise
this.el.removeClass('sc-overlay-bubble-hidden')
-
- const hints = surface.getBoundingRectangleForSelection()
- const selectionHeight = hints.height
- const bubbleHeight = this.el.getHeight()
- const cheat = 3
- const moveUp = (selectionHeight / 2) + (bubbleHeight / 2) + cheat
- const top = '-' + moveUp + 'px'
+ console.log('positionposition', position)
+ // const hints = surface.getBoundingRectangleForSelection()
+ // const selectionHeight = hints.height
+ // const bubbleHeight = this.el.getHeight()
+ // const cheat = 3
+ // const moveUp = (selectionHeight / 2) + (bubbleHeight / 2) + cheat
+ // const top = '-' + moveUp + 'px'
this.el.css('left', left)
- this.el.css('top', top)
+ // this.el.css('top', top)
})
/*
@@ -89,8 +90,8 @@ class CommentBubble extends Tool {
return commandStates.comment
}
- getDocumentSession () {
- return this.context.documentSession
+ getEditorSession () {
+ return this.context.editorSession
}
getMode () {
@@ -103,8 +104,8 @@ class CommentBubble extends Tool {
}
getSelection () {
- const documentSession = this.getDocumentSession()
- return documentSession.getSelection()
+ const editorSession = this.getEditorSession()
+ return editorSession.getSelection()
}
// TODO -- get from provider
@@ -137,12 +138,15 @@ class CommentBubble extends Tool {
const newNode = {
selection: selection,
- node: { type: 'comment' }
+ type: 'comment',
+ path: selection.path,
+ start: selection.start,
+ end: selection.end
}
- surface.transaction((tx, args) => {
- const annotation = createAnnotation(tx, newNode)
- provider.focusTextArea(annotation.node.id)
+ surface.editorSession.transaction((tx, args) => {
+ const annotation = tx.create(newNode)
+ provider.focusTextArea(annotation.id)
})
}
}
diff --git a/app/components/SimpleEditor/elements/comment/comment.scss b/app/components/SimpleEditor/elements/comment/comment.scss
index 5bc959d19de9e72a960a8afc9b4f6389f5e99a8f..65df65a2e00f51ed0fc3aac3548158e4b0c4c3ca 100644
--- a/app/components/SimpleEditor/elements/comment/comment.scss
+++ b/app/components/SimpleEditor/elements/comment/comment.scss
@@ -17,7 +17,7 @@ $white: #fff;
background-color: $light-green;
}
-.sc-prose-editor-overlay-tools {
+.sc-overlay {
.se-active-tools {
.sc-overlay-bubble {
background: $white;
diff --git a/app/components/SimpleEditor/panes/Comments/CommentBox.js b/app/components/SimpleEditor/panes/Comments/CommentBox.js
index e9afc3082292d2f02dc321a3700308026595fae2..3728ab05a46f4a0f9618e5204ec4ab9044e75c65 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentBox.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentBox.js
@@ -15,6 +15,7 @@ class CommentBox extends Component {
// TODO -- fix class names
render ($$) {
+ console.log('in comment box')
const active = this.props.active
const entry = this.props.entry
diff --git a/app/components/SimpleEditor/panes/Comments/CommentBoxList.js b/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
index 525d8e260eaba6291680bdf637a8dd5e58d83057..82b174fc26dab2de9918a0a08877ae57f667bd9e 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
@@ -24,14 +24,14 @@ class CommentBoxList extends Component {
render ($$) {
const self = this
-
+ console.log('in render')
const provider = self.getProvider()
const entries = provider.getEntries()
const activeEntry = provider.activeEntry
+ console.log('entries', entries)
const listItems = entries.map(function (entry, i) {
const active = (entry.id === activeEntry)
-
return $$(CommentBox, {
active: active,
comments: self.props.comments[entry.id] || { data: [] },
@@ -66,6 +66,7 @@ class CommentBoxList extends Component {
setTops () {
const provider = this.getProvider()
const entries = provider.getEntries()
+
const activeEntry = provider.activeEntry
this.calculateTops(entries, activeEntry)
diff --git a/app/components/SimpleEditor/panes/Comments/CommentsProvider.js b/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
index e643b9dac49640f11348c48a2dcdd0d8b03c9227..1ac45cf1fc1a46ea9722a3075ab2ce0fc4e61196 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
@@ -6,11 +6,10 @@ class CommentsProvider extends TocProvider {
constructor (document, props) {
super(document, props)
this.activeEntry = null
+ const editorSession = props.editorSession
+ editorSession.onUpdate('document', this.updateActiveEntry, this)
- const documentSession = props.documentSession
- documentSession.on('didUpdate', this.updateActiveEntry, this)
-
- const doc = documentSession.getDocument()
+ const doc = editorSession.getDocument()
doc.on('document:changed', this.update, this)
const editor = props.controller
@@ -65,6 +64,7 @@ class CommentsProvider extends TocProvider {
// runs when document session is updated
updateActiveEntry () {
+ console.log('updateActiveEntry')
const activeEntry = this.getActiveEntry()
const selectionContainsComments = this.selectionContainsComments()
@@ -214,7 +214,7 @@ class CommentsProvider extends TocProvider {
// returns an array of all comments in selection
getSelectionComments () {
- const selectionState = this.config.documentSession.getSelectionState()
+ const selectionState = this.config.editorSession.getSelectionState()
return selectionState.getAnnotationsForType('comment')
}
@@ -246,8 +246,8 @@ class CommentsProvider extends TocProvider {
return doc.get(id)
}
- getDocumentSession () {
- return this.config.documentSession
+ getEditorSession () {
+ return this.config.editorSession
}
// returns the combined borders of all comment annotations in selection
@@ -268,8 +268,8 @@ class CommentsProvider extends TocProvider {
}
getSelection () {
- const documentSession = this.getDocumentSession()
- return documentSession.getSelection()
+ const editorSession = this.getEditorSession()
+ return editorSession.getSelection()
}
getSurface () {