diff --git a/app/components/BookBuilder/BookBuilderModal.jsx b/app/components/BookBuilder/BookBuilderModal.jsx
index 67bb4cb7bec11cd5ab2d95531b2e3a217262f47b..dbf04de81605caf315bfa6c61c5a1e918cb56cb9 100644
--- a/app/components/BookBuilder/BookBuilderModal.jsx
+++ b/app/components/BookBuilder/BookBuilderModal.jsx
@@ -10,7 +10,7 @@ export class BookBuilderModal extends React.Component {
toggle,
successText,
successAction,
- container,
+ // container,
chapter,
type,
action,
@@ -23,7 +23,7 @@ export class BookBuilderModal extends React.Component {
const modalSize = size || null
let modalBodyText = ''
- const success = successAction ? <a className="modal-button add-chapter bb-modal-act"
+ const success = successAction ? <a className='modal-button add-chapter bb-modal-act'
onClick={successAction}>
{ successText }
</a> : null
@@ -66,8 +66,8 @@ export class BookBuilderModal extends React.Component {
<Modal
show={show}
onHide={toggle}
- container={container}
- className="modal"
+ // container={container}
+ className='modal'
bsSize={modalSize}
>
@@ -82,9 +82,9 @@ export class BookBuilderModal extends React.Component {
</Modal.Body>
<Modal.Footer>
- <div className="buttons-container">
+ <div className='buttons-container'>
- <a className="modal-button discard-chapter bb-modal-cancel"
+ <a className='modal-button discard-chapter bb-modal-cancel'
onClick={toggle}>
Cancel
</a>
diff --git a/app/components/BookBuilder/BookList.jsx b/app/components/BookBuilder/BookList.jsx
index ed9cc752b6e5fbad0468bf44fbb443619631fa29..5428bbbf7e3e348ced7360974f59111784facbfe 100644
--- a/app/components/BookBuilder/BookList.jsx
+++ b/app/components/BookBuilder/BookList.jsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux'
import { Modal } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import * as Actions from 'pubsweet-frontend/src/actions'
-
import styles from './styles/bookList.local.scss'
export class BookList extends React.Component {
@@ -25,7 +24,6 @@ export class BookList extends React.Component {
}
render () {
- console.log('render')
const { book } = this.props
const { showModal } = this.state
let bookTitle = book ? book.title : 'Fetching...'
diff --git a/app/components/BookBuilder/Chapter.jsx b/app/components/BookBuilder/Chapter.jsx
index 790009c181a661c8d1c81cac84c1db653c852935..5202f5a8fd7d9d82ad3e93e267e945f1bf326189 100644
--- a/app/components/BookBuilder/Chapter.jsx
+++ b/app/components/BookBuilder/Chapter.jsx
@@ -292,8 +292,8 @@ export class Chapter extends React.Component {
const input = (
<TextInput
- className='edit'
- ref='chapterInput'
+ className="edit"
+ ref="chapterInput"
onSave={this._onSaveRename}
value={title}
/>
@@ -313,7 +313,7 @@ export class Chapter extends React.Component {
// could do with refs, but that would mean mounting instead of
// shallow rendering to access enzyme's refs() api method
renameButton = (
- <a id='bb-rename'
+ <a id="bb-rename"
onClick={renameButtonFunction}>
{ renameButtonText }
</a>
@@ -393,7 +393,7 @@ export class Chapter extends React.Component {
titleArea = (
<DropdownButton
title={title}
- id='dropbutton'
+ id="dropbutton"
className={styles.dropDown}
open={this.state.open}
onClick={this._toggleList}
@@ -401,10 +401,10 @@ export class Chapter extends React.Component {
<div style={{ width: width }}>
<div className={styles.dropDownInputContairer}>
<TextInput
- ref='dropDownInput'
+ ref="dropDownInput"
className={styles.dropDownInput}
onSave={this._onClickCustomTitle}
- placeholder='Type a custom title'
+ placeholder="Type a custom title"
/>
</div>
@@ -422,12 +422,12 @@ export class Chapter extends React.Component {
{ renameButton }
<LinkContainer
to={`/books/${book.id}/fragments/${chapter.id}`}
- id='bb-edit'
+ id="bb-edit"
>
<a>{ editOrView } </a>
</LinkContainer>
- <a id='bb-delete'
+ <a id="bb-delete"
onClick={this._toggleDelete}>
Delete
</a>
@@ -442,14 +442,14 @@ export class Chapter extends React.Component {
}
editorArea = (
- <a id='bb-unlock'
+ <a id="bb-unlock"
className={styles.lEditing}
onClick={this._toggleUnlock}>
<i
className={styles.lockIcon + ' fa fa-lock'}
- aria-hidden='true'
- alt='unlock'
+ aria-hidden="true"
+ alt="unlock"
/>
<span className={styles.lockMessage}>
{ chapter.lock.editor.username + message}
@@ -469,7 +469,7 @@ export class Chapter extends React.Component {
className={styles.chapterContainer + ' col-lg-12 bb-chapter ' + (chapter.subCategory === 'chapter' ? styles.isChapter : styles.isPart)}
style={{ opacity: opacity }}>
<div className={styles.grabIcon + ' ' + (chapter.division === 'body' ? styles.grabIconBody : '')}>
- <i className='fa fa-circle' />
+ <i className="fa fa-circle" />
<div className={styles.tooltip}>
Grab to sort
</div>
@@ -490,19 +490,19 @@ export class Chapter extends React.Component {
<div className={styles.secondLineContainer}>
<div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
- <div id='bb-upload' className={styles.btnFile}>
+ <div id="bb-upload" className={styles.btnFile}>
Upload Word
<input
- type='file'
- accept='.docx'
- title=' '
+ type="file"
+ accept=".docx"
+ title=" "
/>
</div>
</div>
<ul className={styles.secondActions + ' col-lg-7 col-md-12 col-sm-12 col-xs-12'}>
<ProgressIndicator
- type='style'
+ type="style"
book={book}
chapter={chapter}
update={update}
@@ -513,7 +513,7 @@ export class Chapter extends React.Component {
/>
<ProgressIndicator
- type='edit'
+ type="edit"
book={book}
chapter={chapter}
update={update}
@@ -524,7 +524,7 @@ export class Chapter extends React.Component {
/>
<ProgressIndicator
- type='review'
+ type="review"
book={book}
chapter={chapter}
update={update}
@@ -535,7 +535,7 @@ export class Chapter extends React.Component {
/>
<ProgressIndicator
- type='clean'
+ type="clean"
book={book}
chapter={chapter}
roles={roles}
@@ -576,8 +576,8 @@ export class Chapter extends React.Component {
<BookBuilderModal
title={'Delete ' + type}
chapter={chapter}
- action='delete'
- successText='Delete'
+ action="delete"
+ successText="Delete"
type={type}
successAction={this._onClickDelete}
show={this.state.showDeleteModal}
@@ -588,8 +588,8 @@ export class Chapter extends React.Component {
<BookBuilderModal
title={'Unlock ' + type}
chapter={chapter}
- action='unlock'
- successText='Unlock'
+ action="unlock"
+ successText="Unlock"
type={type}
successAction={this._onClickUnlock}
show={this.state.showUnlockModal}
diff --git a/app/components/BookBuilder/styles/bookBuilder.local.scss b/app/components/BookBuilder/styles/bookBuilder.local.scss
index e7357f269b41cb03828788923d908fe3b1335c29..fc424cd44ef6d57c477410b3510298b33a02d6ce 100644
--- a/app/components/BookBuilder/styles/bookBuilder.local.scss
+++ b/app/components/BookBuilder/styles/bookBuilder.local.scss
@@ -104,6 +104,7 @@ $white: #fff;
border-right: none !important;
border-top: none !important;
width: 100% !important;
+ outline: none;
}
}
diff --git a/app/components/Navigation/Navigation.jsx b/app/components/Navigation/Navigation.jsx
index f3689d384c90ceb3e170a4ac75cb5e68fac79a34..a44495637b757552a08804116d5fbf4ae6c87d34 100644
--- a/app/components/Navigation/Navigation.jsx
+++ b/app/components/Navigation/Navigation.jsx
@@ -28,12 +28,12 @@ export default class Navigation extends React.Component {
<NavItem>Books</NavItem>
</LinkContainer>
<Authorize operation='read' object={currentUser.user}>
- <LinkContainer to='/manage/users'>
+ <LinkContainer to='/users'>
<NavItem>Users</NavItem>
</LinkContainer>
</Authorize>
<Authorize operation='read'>
- <LinkContainer to='/manage/teams'>
+ <LinkContainer to='/teams'>
<NavItem>Teams</NavItem>
</LinkContainer>
</Authorize>
diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index 92eb3e135afa1763595cb8cade9283948dd6a31d..da29425090e0d53ee44781d3c0a3696c4ccb2d32 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -1,15 +1,12 @@
-'use strict'
-
-var SubstanceContainerEditor = require('substance/ui/ContainerEditor')
-var Surface = require('substance/ui/Surface')
-var uuid = require('substance/util/uuid')
-
-function ContainerEditor () {
- ContainerEditor.super.apply(this, arguments)
-}
-
-ContainerEditor.Prototype = function () {
- this.render = function ($$) {
+import {
+ ContainerEditor as SubstanceContainerEditor,
+ Surface,
+ uuid
+} from 'substance'
+
+class ContainerEditor extends SubstanceContainerEditor {
+ render ($$) {
+ // TODO -- better ways to write this in es6
var el = Surface.prototype.render.call(this, $$)
var doc = this.getDocument()
@@ -41,7 +38,7 @@ ContainerEditor.Prototype = function () {
return el
}
- this.didMount = function () {
+ didMount () {
Surface.prototype.didMount.apply(this, arguments)
this.container.on('nodes:changed', this.onContainerChange, this)
if (this.isEmpty()) this.createText()
@@ -49,7 +46,7 @@ ContainerEditor.Prototype = function () {
// create an empty paragraph with an empty node
// then select it for cursor focus
- this.createText = function () {
+ createText () {
var newSel
this.transaction(function (tx) {
@@ -77,6 +74,4 @@ ContainerEditor.Prototype = function () {
}
}
-SubstanceContainerEditor.extend(ContainerEditor)
-
-module.exports = ContainerEditor
+export default ContainerEditor
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index aca6abc30232893bbf6f30b054c1bd5e2f2dbc92..1fa89756e3b71789fdcea08db645bfc8e7b07f2b 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -1,48 +1,47 @@
-'use strict'
-
-// import _ from 'lodash'
-
-var ProseEditor = require('substance/packages/prose-editor/ProseEditor')
-var ScrollPane = require('substance/ui/ScrollPane')
-var SplitPane = require('substance/ui/SplitPane')
-// var TabbedPane = require('substance/ui/TabbedPane')
-var TocProvider = require('substance/ui/TOCProvider')
-
-var Comments = require('./panes/Comments/CommentBoxList')
-var CommentsProvider = require('./panes/Comments/CommentsProvider')
-var ContainerEditor = require('./ContainerEditor')
-var Notes = require('./panes/Notes/Notes')
-var NotesProvider = require('./panes/Notes/NotesProvider')
-var Overlay = require('./Overlay')
-var TableOfContents = require('./panes/TableOfContents/TableOfContents')
-
-function Editor () {
- Editor.super.apply(this, arguments)
-
- this.handleActions({
- 'showComments': function () { this.toggleCommentsArea(true) },
- 'hideComments': function () { this.toggleCommentsArea(false) }
- })
-}
+import {
+ ProseEditor,
+ ProseEditorOverlayTools,
+ ScrollPane,
+ SplitPane,
+ TOCProvider
+} from 'substance'
+
+import Comments from './panes/Comments/CommentBoxList'
+import CommentsProvider from './panes/Comments/CommentsProvider'
+import ContainerEditor from './ContainerEditor'
+import Notes from './panes/Notes/Notes'
+import NotesProvider from './panes/Notes/NotesProvider'
+import TableOfContents from './panes/TableOfContents/TableOfContents'
+
+class Editor extends ProseEditor {
+ constructor (parent, props) {
+ super(parent, props)
+
+ this.handleActions({
+ 'showComments': function () { this.toggleCommentsArea(true) },
+ 'hideComments': function () { this.toggleCommentsArea(false) }
+ })
+ }
-Editor.Prototype = function () {
- this.willUpdateState = function () {}
+ willUpdateState () {}
- this.didMount = function () {
- this.documentSession.on('didUpdate', this._documentSessionUpdated, this)
+ didMount () {
+ this.documentSession.on('didUpdate', this.documentSessionUpdated, this)
this.extendState({ editorReady: true })
}
- this.render = function ($$) {
+ render ($$) {
var el = $$('div').addClass('sc-prose-editor')
// left side: editor and toolbar
var toolbar = this._renderToolbar($$)
var editor = this._renderEditor($$)
+
var footerNotes = $$(Notes)
var props = {
book: this.props.book,
- fragment: this.props.fragment
+ fragment: this.props.fragment,
+ history: this.props.history
}
var toc = $$(TableOfContents, props)
@@ -55,6 +54,7 @@ Editor.Prototype = function () {
var commentsPane = this.state.editorReady
? $$(Comments, {
+ // TODO -- should probably remove the || {}
comments: this.props.fragment.comments || {},
update: this.props.updateComments,
user: this.props.user
@@ -68,31 +68,31 @@ Editor.Prototype = function () {
)
var contentPanel = $$(ScrollPane, {
- scrollbarType: 'substance',
scrollbarPosition: 'right',
- overlay: Overlay
+ overlay: ProseEditorOverlayTools
})
.append(editorWithComments)
.attr('id', 'content-panel')
.ref('contentPanel')
var contentPanelWithSplitPane = $$(SplitPane, { sizeA: '75%', splitType: 'vertical' })
- .append(
- contentPanel,
- toc
- )
+ .append(
+ contentPanel,
+ toc
+ )
el.append(
- $$(SplitPane, { splitType: 'horizontal' })
- .append(toolbar, contentPanelWithSplitPane)
+ $$(SplitPane, { splitType: 'horizontal' })
+ .append(
+ toolbar,
+ contentPanelWithSplitPane
)
-
- // wrap both sides into one split pane
+ )
return el
}
- this._renderEditor = function ($$) {
+ _renderEditor ($$) {
var configurator = this.props.configurator
return $$(ContainerEditor, {
disabled: this.props.disabled,
@@ -103,17 +103,17 @@ Editor.Prototype = function () {
}).ref('body')
}
- this.getInitialState = function () {
+ getInitialState () {
return {
editorReady: false
}
}
- this.scrollTo = function (nodeId) {
+ scrollTo (nodeId) {
this.refs.contentPanel.scrollTo(nodeId)
}
- this.toggleCommentsArea = function (show) {
+ toggleCommentsArea (show) {
var self = this
setTimeout(function () {
@@ -126,25 +126,29 @@ Editor.Prototype = function () {
if (!show && el.hasClass('sc-has-comments')) {
el.removeClass('sc-has-comments')
}
- }, 0)
+ })
}
- this.getChildContext = function () {
+ getChildContext () {
var doc = this.doc
- var _super = Editor.super.prototype
- var oldContext = _super.getChildContext.apply(this, arguments)
+ // TODO -- check whether this is correct
+ var oldContext = Object.assign({}, super.getChildContext(), { Editor })
// toc provider
- var tocConfig = { 'containerId': 'body' }
- var tocProvider = new TocProvider(doc, tocConfig)
+ var tocProvider = new TOCProvider(doc, {
+ containerId: 'body'
+ })
- // notes provider
+ // // notes provider
var notesProvider = new NotesProvider(doc)
- // comments provider
+ // // comments provider
var commentsProvider = new CommentsProvider(doc, {
+ commandManager: this.commandManager,
comments: this.props.fragment.comments,
+ containerId: this.props.containerId,
documentSession: this.documentSession,
+ surfaceManager: this.surfaceManager,
toggleCommentsArea: this.toggleCommentsArea,
updateComments: this.props.updateComments
})
@@ -158,6 +162,4 @@ Editor.Prototype = function () {
}
}
-ProseEditor.extend(Editor)
-
-module.exports = Editor
+export default Editor
diff --git a/app/components/SimpleEditor/Overlay.js b/app/components/SimpleEditor/Overlay.js
deleted file mode 100644
index 9c760dc59d339b447f531c18962c52db9156525e..0000000000000000000000000000000000000000
--- a/app/components/SimpleEditor/Overlay.js
+++ /dev/null
@@ -1,100 +0,0 @@
-'use strict'
-
-var SubstanceOverlay = require('substance/ui/Overlay')
-
-var CommentTooltip = require('./elements/comment/CommentBubble')
-var NoteTooltip = require('./elements/note/EditNoteTool')
-var LinkOverlay = require('./elements/link/LinkOverlay')
-
-function Overlay () {
- Overlay.super.apply(this, arguments)
-
- this.left = 0
- this.top = 0
-
- this.bubble = {
- left: 0,
- top: 0
- }
-}
-
-Overlay.Prototype = function () {
- this.render = function ($$) {
- var top = this.top + 'px'
-
- var NoteTooltipEl = $$(NoteTooltip)
- .css('left', this.left.note)
- .css('top', top)
-
- var CommentTooltipEl = $$(CommentTooltip)
- .css('left', this.bubble.left)
- .css('top', this.bubble.top)
-
- var LinkOverlayEl = $$(LinkOverlay)
- .css('left', this.left.link)
- .css('top', top)
-
- return $$('div')
- .addClass('sm-hidden')
- .ref('overlayContent')
- .append(
- NoteTooltipEl,
- CommentTooltipEl,
- LinkOverlayEl
- )
- }
-
- this.position = function (hints) {
- if (!hints) return
-
- var top = hints.rectangle.top + hints.rectangle.height
-
- var link = document.querySelector('.sc-edit-link-tool')
- var note = document.querySelector('.sc-edit-note-tool')
-
- var left = {
- link: this.calculateLeft(link, hints),
- note: this.calculateLeft(note, hints)
- }
-
- this.left = left
- this.top = top
- this.bubble = this.getBubblePosition()
-
- this.rerender()
- this.el.removeClass('sm-hidden')
- }
-
- this.calculateLeft = function (el, hints) {
- var contentWidth = el.offsetWidth
- var left = hints.rectangle.left + hints.rectangle.width / 2 - contentWidth / 2
-
- left = Math.max(left, 0)
- // console.log(contentWidth)
- var maxLeftPos = hints.rectangle.left + hints.rectangle.width + hints.rectangle.right - contentWidth - 60
- left = Math.min(left, maxLeftPos)
-
- return left + 'px'
- }
-
- this.getBubblePosition = function () {
- var body = this.context.surfaceManager.getFocusedSurface()
- if (!body) return
- var containerWidth = body.el.htmlProp('offsetWidth')
-
- // get the computed percentage padding of the content container
- var contentComputedStyles = window.getComputedStyle(document.querySelector('.se-content'))
- var contentMarginRight = Number(contentComputedStyles['padding-right'].slice(0, -2))
-
- var bubblePosition = {
- top: (this.top - 30) + 'px',
- left: (containerWidth + contentMarginRight + 20) + 'px'
- }
-
- return bubblePosition
- }
-}
-
-SubstanceOverlay.extend(Overlay)
-
-module.exports = Overlay
diff --git a/app/components/SimpleEditor/SimpleArticle.js b/app/components/SimpleEditor/SimpleArticle.js
index 40f73feccc33ffea8af8d1a5e91e98057f9ca342..4cd6233ec53c3215908ce354c0039cde826a41c5 100644
--- a/app/components/SimpleEditor/SimpleArticle.js
+++ b/app/components/SimpleEditor/SimpleArticle.js
@@ -1,17 +1,10 @@
-'use strict'
+import { ProseArticle } from 'substance'
-var ProseArticle = require('substance/packages/prose-editor/ProseArticle')
-
-function SimpleArticle (schema) {
- ProseArticle.call(this, schema)
-}
-
-SimpleArticle.Prototype = function () {
- this.getDocument = function () {
+class SimpleArticle extends ProseArticle {
+ // TODO -- how do we get rid of this
+ getDocument () {
return this
}
}
-ProseArticle.extend(SimpleArticle)
-
-module.exports = SimpleArticle
+export default SimpleArticle
diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx
index 22d96a397215d6962a19362aa937cc5f6c5562d4..86548150e1ba882398685e950c25af4432d35690 100644
--- a/app/components/SimpleEditor/SimpleEditor.jsx
+++ b/app/components/SimpleEditor/SimpleEditor.jsx
@@ -2,16 +2,16 @@ import React from 'react'
import ReactDOM from 'react-dom'
import { Alert } from 'react-bootstrap'
-var Component = require('substance/ui/Component')
-var Configurator = require('substance/packages/prose-editor/ProseEditorConfigurator')
-var DocumentSession = require('substance/model/DocumentSession')
+import {
+ ProseEditorConfigurator as Configurator,
+ DocumentSession
+} from 'substance'
-var Editor = require('./Editor')
-var Importer = require('./SimpleEditorImporter')
-var SimpleExporter = require('./SimpleEditorExporter')
+import config from './config'
+import Editor from './Editor'
+import Importer from './SimpleEditorImporter'
+import SimpleExporter from './SimpleEditorExporter'
-import config from './config.js'
-// import fixture from './fixture'
import './SimpleEditor.scss'
export default class SimpleEditor extends React.Component {
@@ -21,45 +21,59 @@ export default class SimpleEditor extends React.Component {
}
createSession () {
- var configurator = new Configurator().import(config)
- configurator.setSaveHandler({
- saveDocument: this.save
- })
- configurator.addImporter('prose-article', Importer)
const { fragment } = this.props
let source
if (fragment) { source = fragment.source }
- var importer = configurator.createImporter('prose-article')
- var doc = importer.importDocument(source)
- var documentSession = new DocumentSession(doc)
+ const configurator = new Configurator().import(config)
+ configurator.addImporter('html', Importer)
+
+ const importer = configurator.createImporter('html')
+ const doc = importer.importDocument(source)
+ const documentSession = new DocumentSession(doc)
+
+ documentSession.setSaveHandler({
+ saveDocument: this.save
+ })
return {
- documentSession: documentSession,
- configurator: configurator
+ configurator: configurator,
+ documentSession: documentSession
}
}
save (source, changes, callback) {
const { onSave } = this.props
- var exporter = new SimpleExporter()
- onSave(exporter.exportDocument(source), callback)
+ const config = this.state.config
+
+ const exporter = new SimpleExporter(config)
+ const convertedSource = exporter.exportDocument(source)
+
+ onSave(convertedSource, callback)
}
componentDidMount () {
const { canEdit } = this.props
- var el = ReactDOM.findDOMNode(this)
+ const { onSave } = this.props
+ const el = ReactDOM.findDOMNode(this)
+
+ const session = this.createSession()
+ const documentSession = session.documentSession
+ const configurator = session.configurator
+
+ this.setState({
+ config: configurator.config
+ })
- var session = this.createSession()
- var documentSession = session.documentSession
- var configurator = session.configurator
- this.writer = Component.mount(Editor, {
+ Editor.mount({
book: this.props.book,
configurator: configurator,
containerId: 'body',
disabled: !canEdit, // set to true read only mode
documentSession: documentSession,
fragment: this.props.fragment,
+ history: this.props.history,
+ onSave: onSave,
updateComments: this.props.updateComments,
user: this.props.user
}, el)
@@ -107,6 +121,7 @@ SimpleEditor.propTypes = {
book: React.PropTypes.object.isRequired,
canEdit: React.PropTypes.bool,
fragment: React.PropTypes.object.isRequired,
+ history: React.PropTypes.object.isRequired,
onSave: React.PropTypes.func.isRequired,
updateComments: React.PropTypes.func.isRequired,
user: React.PropTypes.object.isRequired
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index b0d79c5d75c637c733494814dfbdd5e80ec2b580..f7aa75614f423f306ecd69057da117ab1d6301e9 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -2,17 +2,22 @@
$fa-font-path: './font-awesome/fonts';
@import './font-awesome/scss/font-awesome';
-@import './substance';
+@import '../../../node_modules/substance/substance.css';
@import './elements/elements';
@import './panes/panes';
+// grays
$border: #ccc;
$dark-gray: #999;
$light-gray: #ddd;
$primary: #eee;
$ultra-light-gray: #fafafa;
-$white: #fff;
+
+$black: #000;
$teal: #46b9ba;
+$toolbar-active-bg: rgba(204, 204, 204, .75);
+$transparent-black: rgba(0, 0, 0, .75);
+$white: #fff;
.editor-wrapper {
height: 90vh;
@@ -43,19 +48,89 @@ $teal: #46b9ba;
right: 0;
top: 0;
- .sc-prose-editor-toolbar {
+ .sc-toolbar {
background-color: $primary;
border: 1px solid $border;
border-right: 0;
- padding: 1px;
+ // padding: 1px;
+ padding-left: 0;
+
+ button {
+ color: $transparent-black;
+ }
+
+ .sm-target-text {
+ border-right: 1px solid $border;
+ padding: 0;
+ }
+
+ .sm-target-document {
+ border-right: 1px solid $border;
+ padding-right: 9px;
+ }
+
+ .sm-target-annotations {
+ border-right: 1px solid $border;
+ padding: 0 9px;
+ }
+
+ .sc-tool-group {
+ .sc-button {
+ background: transparent;
+ border: 0;
+ border-radius: 0;
+ font-size: 14px;
+ outline: none;
+ padding: 0 12px;
+
+ &:hover {
+ background: $toolbar-active-bg;
+
+ &:disabled {
+ background: transparent;
+ }
+ }
+ }
+
+ .sm-active {
+ background: $toolbar-active-bg;
+ color: $black;
+ margin: 0;
+ outline: none;
+ padding: 0;
+
+ &:after {
+ bottom: 17px;
+ color: $black;
+ content: 'x';
+ font-size: 8px;
+ left: 21px;
+ position: absolute;
+ }
+ }
+ }
}
.sc-switch-text-type {
- border-right: 1px solid $border;
+ margin-left: 1px;
width: 150px !important;
.se-toggle {
background: transparent;
+ border: 0;
+ font-family: 'Fira Sans';
+ font-size: 14px;
+ outline: none;
+ }
+
+ .se-options {
+ top: 36px;
+ }
+
+ .se-option {
+ background-color: $white;
+ border: 0;
+ font-family: 'Fira Sans';
}
}
@@ -67,7 +142,9 @@ $teal: #46b9ba;
.se-content {
+ color: $transparent-black;
font-family: 'Fira Sans';
+ word-wrap: break-word;
::selection {
background: $light-gray;
@@ -77,6 +154,10 @@ $teal: #46b9ba;
background: $light-gray;
}
+ .se-selection-fragment {
+ background: none;
+ }
+
&:first-child {
background-color: $white;
box-shadow: 0 0 8px $dark-gray;
@@ -89,13 +170,29 @@ $teal: #46b9ba;
.sc-split-pane {
position: relative;
}
- }
+ .sc-surface {
+ outline: none;
+ }
+
+ .sc-prose-editor-overlay-tools {
+ .se-active-tools {
+ background: transparent;
+ border: 0;
+ padding: 0;
+ }
+ }
+
+ .sc-prose-editor-overlay-tools::before {
+ border-style: none;
+ border-width: 0;
+ }
+}
.sc-has-comments {
.se-content {
&:first-child {
- margin: 1.5% 29% 7% 1%;
+ margin: 1.5% 27% 5% 1%;
transition: .3s;
}
}
diff --git a/app/components/SimpleEditor/SimpleEditorExporter.js b/app/components/SimpleEditor/SimpleEditorExporter.js
index d0d89f4a219e34dea39a9339f9d7e7501c05fb35..3264721fc9ef869e570eebeac39572b31f1bcde4 100644
--- a/app/components/SimpleEditor/SimpleEditorExporter.js
+++ b/app/components/SimpleEditor/SimpleEditorExporter.js
@@ -1,51 +1,35 @@
-'use strict'
+import { keys, map } from 'lodash'
-var HTMLExporter = require('substance/model/HTMLExporter')
-var ProseArticle = require('substance/packages/prose-editor/ProseArticle')
-var SimpleArticle = require('./SimpleArticle')
-var schema = ProseArticle.schema
+import { HTMLExporter } from 'substance'
-var converters = [
- require('substance/packages/paragraph/ParagraphHTMLConverter'),
- require('substance/packages/heading/HeadingHTMLConverter'),
- require('substance/packages/codeblock/CodeblockHTMLConverter'),
- require('substance/packages/blockquote/BlockquoteHTMLConverter'),
- require('substance/packages/strong/StrongHTMLConverter'),
- require('substance/packages/emphasis/EmphasisHTMLConverter'),
- require('substance/packages/link/LinkHTMLConverter'),
- require('substance/packages/subscript/SubscriptHTMLConverter'),
- require('substance/packages/superscript/SuperscriptHTMLConverter'),
- require('substance/packages/code/CodeHTMLConverter'),
+// import SimpleArticle from './SimpleArticle'
+// var ProseArticle = require('substance/packages/prose-editor/ProseArticle')
+// var schema = ProseArticle.schema
- require('./elements/source_note/SourceNoteHTMLConverter'),
- require('./elements/extract/ExtractHTMLConverter'),
- require('./elements/note/NoteHTMLConverter'),
- require('./elements/comment/CommentHTMLConverter'),
- require('./elements/comment/ResolvedCommentHTMLConverter')
-]
+class SimpleExporter extends HTMLExporter {
+ constructor (config) {
+ let converters = map(keys(config.converters.html), function (key) {
+ return config.converters.html[key]
+ })
-function SimpleExporter () {
- SimpleExporter.super.call(this, {
- schema: schema,
- converters: converters,
- DocumentClass: SimpleArticle
- })
-}
+ super({
+ // schema: schema,
+ converters: converters
+ // DocumentClass: SimpleArticle
+ })
+ }
-SimpleExporter.Prototype = function () {
- this.convertDocument = function (doc, htmlEl) {
+ convertDocument (doc, htmlEl) {
// TODO delete second arg
var elements = this.convertContainer(doc, this.state.containerId)
var out = elements.map(function (el) {
- // console.log('element', el)
- // console.log('outer html', el.outerHTML)
return el.outerHTML
})
return out.join('')
}
- this.convertContainer = function (container) {
- // console.log('convert container')
+ // TODO -- fix this so that this fn is not needed
+ convertContainer (container) {
if (!container) {
throw new Error('Illegal arguments: container is mandatory.')
}
@@ -56,7 +40,6 @@ SimpleExporter.Prototype = function () {
container.data.nodes.body.nodes.forEach(function (id) {
var node = doc.get(id)
- // console.log('node', node)
var nodeEl = this.convertNode(node)
elements.push(nodeEl)
}.bind(this))
@@ -64,8 +47,4 @@ SimpleExporter.Prototype = function () {
}
}
-HTMLExporter.extend(SimpleExporter)
-
-SimpleExporter.converters = converters
-
-module.exports = SimpleExporter
+export default SimpleExporter
diff --git a/app/components/SimpleEditor/SimpleEditorImporter.js b/app/components/SimpleEditor/SimpleEditorImporter.js
index 35ccbe4071835ce0f95a3628ec6a44f347af04b1..76aceb3c0069744f8e4bb161216795b9d8699244 100644
--- a/app/components/SimpleEditor/SimpleEditorImporter.js
+++ b/app/components/SimpleEditor/SimpleEditorImporter.js
@@ -1,48 +1,22 @@
-'use strict'
+import { HTMLImporter } from 'substance'
-var HTMLImporter = require('substance/model/HTMLImporter')
-var SimpleArticle = require('./SimpleArticle')
+import SimpleArticle from './SimpleArticle'
-var converters = [
- require('substance/packages/paragraph/ParagraphHTMLConverter'),
- require('substance/packages/heading/HeadingHTMLConverter'),
- require('substance/packages/codeblock/CodeblockHTMLConverter'),
- require('substance/packages/blockquote/BlockquoteHTMLConverter'),
- require('substance/packages/strong/StrongHTMLConverter'),
- require('substance/packages/emphasis/EmphasisHTMLConverter'),
- require('substance/packages/link/LinkHTMLConverter'),
- require('substance/packages/subscript/SubscriptHTMLConverter'),
- require('substance/packages/superscript/SuperscriptHTMLConverter'),
- require('substance/packages/code/CodeHTMLConverter'),
-
- require('./elements/source_note/SourceNoteHTMLConverter'),
- require('./elements/extract/ExtractHTMLConverter'),
- require('./elements/note/NoteHTMLConverter'),
- require('./elements/comment/CommentHTMLConverter'),
- require('./elements/comment/ResolvedCommentHTMLConverter')
-]
-
-function SimpleImporter (config) {
- SimpleImporter.super.call(this, {
- schema: config.schema,
- converters: converters,
- DocumentClass: SimpleArticle
- })
-}
+class SimpleImporter extends HTMLImporter {
+ constructor (config) {
+ super({
+ schema: config.schema,
+ converters: config.converters,
+ DocumentClass: SimpleArticle
+ })
+ }
-SimpleImporter.Prototype = function () {
- /*
- Takes an HTML string.
- */
- this.convertDocument = function (bodyEls) {
+ // Takes an HTML string.
+ convertDocument (bodyEls) {
// Just to make sure we always get an array of elements
if (!bodyEls.length) bodyEls = [bodyEls]
this.convertContainer(bodyEls, 'body')
}
}
-HTMLImporter.extend(SimpleImporter)
-
-SimpleImporter.converters = converters
-
-module.exports = SimpleImporter
+export default SimpleImporter
diff --git a/app/components/SimpleEditor/SimpleEditorWrapper.jsx b/app/components/SimpleEditor/SimpleEditorWrapper.jsx
index 71caf7e2abc7ffdabb94712722bf77ad8aa214a7..e9d2c0ffdde473f72a6f6a0e9afe00743e808112 100644
--- a/app/components/SimpleEditor/SimpleEditorWrapper.jsx
+++ b/app/components/SimpleEditor/SimpleEditorWrapper.jsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as Actions from 'pubsweet-frontend/src/actions'
-// import { fragmentsOfCollection } from 'pubsweet-core/app/helpers/Utils'
import SimpleEditor from './SimpleEditor'
@@ -23,9 +22,11 @@ export class SimpleEditorWrapper extends React.Component {
componentWillMount () {
const { getCollections, getFragments } = this.props.actions
+
getCollections().then(result => {
getFragments(result.collections[0])
})
+
this._checkRights()
}
@@ -64,13 +65,14 @@ export class SimpleEditorWrapper extends React.Component {
}
render () {
- const { book, fragment, user } = this.props
+ const { book, fragment, history, user } = this.props
return (
<SimpleEditor
book={book}
canEdit={this.state.canEdit}
fragment={fragment}
+ history={history}
onSave={this.save}
updateComments={this.updateComments}
user={user}
@@ -80,14 +82,16 @@ export class SimpleEditorWrapper extends React.Component {
}
SimpleEditorWrapper.propTypes = {
+ actions: React.PropTypes.object.isRequired,
book: React.PropTypes.object.isRequired,
fragment: React.PropTypes.object.isRequired,
- actions: React.PropTypes.object.isRequired,
+ history: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired
}
function mapStateToProps (state, ownProps) {
const bookId = ownProps.params.bookId
+
let book = find(state.collections, function (c) {
return c.id === bookId
})
diff --git a/app/components/SimpleEditor/config.js b/app/components/SimpleEditor/config.js
index b7d4dcca8ff4e76f07b609985747ab99cdc5464b..1b4a52a19ed16bbe922f23ca3dad6f9abb9e77ff 100644
--- a/app/components/SimpleEditor/config.js
+++ b/app/components/SimpleEditor/config.js
@@ -1,70 +1,67 @@
-'use strict'
+import {
+ BasePackage,
+ BlockquotePackage,
+ CodePackage,
+ EmphasisPackage,
+ HeadingPackage,
+ // LinkPackage,
+ ParagraphPackage,
+ PersistencePackage,
+ ProseArticle,
+ LinkPackage,
+ StrongPackage,
+ SubscriptPackage,
+ SuperscriptPackage
+} from 'substance'
-// Substance packages
-var BasePackage = require('substance/packages/base/BasePackage')
-var ParagraphPackage = require('substance/packages/paragraph/ParagraphPackage')
-var HeadingPackage = require('substance/packages/heading/HeadingPackage')
-var CodeblockPackage = require('substance/packages/codeblock/CodeblockPackage')
-var BlockquotePackage = require('substance/packages/blockquote/BlockquotePackage')
-var ListPackage = require('substance/packages/list/ListPackage')
-var EmphasisPackage = require('substance/packages/emphasis/EmphasisPackage')
-var StrongPackage = require('substance/packages/strong/StrongPackage')
-var CodePackage = require('substance/packages/code/CodePackage')
-var SubscriptPackage = require('substance/packages/subscript/SubscriptPackage')
-var SuperscriptPackage = require('substance/packages/superscript/SuperscriptPackage')
-var PersistancePackage = require('substance/packages/persistence/PersistencePackage')
-var ProseArticle = require('substance/packages/prose-editor/ProseArticle')
-var ProseEditorToolbar = require('substance/packages/prose-editor/ProseEditorToolbar')
+import CodeblockPackage from 'substance/packages/codeblock/CodeblockPackage'
// My Elements
-var LinkPackage = require('./elements/link/LinkPackage')
-var CommentPackage = require('./elements/comment/CommentPackage')
-var DialoguePackage = require('./elements/dialogue/DialoguePackage')
-var SourceNotePackage = require('./elements/source_note/SourceNotePackage')
-var ExtractPackage = require('./elements/extract/ExtractPackage')
-var NumberedListPackage = require('./elements/numbered_list/NumberedListPackage')
-var NotePackage = require('./elements/note/NotePackage')
-var NoStyleListPackage = require('./elements/no_style_list/NoStyleListPackage')
+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'
-// My Overlay
-var Overlay = require('./Overlay')
+// var DialoguePackage = require('./elements/dialogue/DialoguePackage')
+// var NumberedListPackage = require('./elements/numbered_list/NumberedListPackage')
+// var NoStyleListPackage = require('./elements/no_style_list/NoStyleListPackage')
-module.exports = {
+let config = {
name: 'simple-editor',
- configure: function (config, options) {
+ configure: (config, options) => {
config.defineSchema({
name: 'prose-article',
ArticleClass: ProseArticle,
defaultTextType: 'paragraph'
})
- config.setToolbarClass(ProseEditorToolbar)
- // Now import base packages
config.import(BasePackage, {
noBaseStyles: options.noBaseStyles
})
config.import(ParagraphPackage)
config.import(HeadingPackage)
- config.import(CodeblockPackage)
config.import(BlockquotePackage)
- config.import(ListPackage)
+ config.import(CodeblockPackage)
config.import(EmphasisPackage)
config.import(StrongPackage)
config.import(SubscriptPackage)
config.import(SuperscriptPackage)
config.import(CodePackage)
- config.import(LinkPackage)
- config.import(PersistancePackage)
+ // config.import(LinkPackage)
+ config.import(PersistencePackage)
- config.import(DialoguePackage)
+ config.import(LinkPackage)
+ // config.import(DialoguePackage)
config.import(ExtractPackage)
- config.import(NoStyleListPackage)
config.import(NotePackage)
- config.import(NumberedListPackage)
config.import(SourceNotePackage)
config.import(CommentPackage)
- config.addComponent('overlay', Overlay)
+ // config.import(DialoguePackage)
+ // config.import(NoStyleListPackage)
+ // config.import(NumberedListPackage)
}
}
+
+export default config
diff --git a/app/components/SimpleEditor/elements/comment/Comment.js b/app/components/SimpleEditor/elements/comment/Comment.js
index 5f975467b69b923c74918769f54d9eef182e92ea..c3b99dc0e8ac71489a0d0e4e5c3dadba71bb8b76 100644
--- a/app/components/SimpleEditor/elements/comment/Comment.js
+++ b/app/components/SimpleEditor/elements/comment/Comment.js
@@ -1,13 +1,7 @@
-'use strict'
+import { PropertyAnnotation } from 'substance'
-var PropertyAnnotation = require('substance/model/PropertyAnnotation')
+class Comment extends PropertyAnnotation {}
-function Comment () {
- Comment.super.apply(this, arguments)
-}
+Comment.type = 'comment'
-PropertyAnnotation.extend(Comment)
-
-Comment.static.name = 'comment'
-
-module.exports = Comment
+export default Comment
diff --git a/app/components/SimpleEditor/elements/comment/CommentBubble.js b/app/components/SimpleEditor/elements/comment/CommentBubble.js
index cc82360071b9aae57ba6cfe2e5eac4e43ec9f3e0..dbf73165f2e83e32f4b7c0bd6e70f9a0adc81906 100644
--- a/app/components/SimpleEditor/elements/comment/CommentBubble.js
+++ b/app/components/SimpleEditor/elements/comment/CommentBubble.js
@@ -1,92 +1,132 @@
-'use strict'
+import {
+ createAnnotation,
+ DefaultDOMElement,
+ FontAwesomeIcon as Icon,
+ Tool
+} from 'substance'
+
+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()
+ const icon = $$(Icon, { icon: 'fa-comment' })
+ .addClass('sc-comment-icon')
+
+ const bubble = $$('div')
+ .attr('title', title)
+ .addClass('sc-overlay-bubble')
+ .addClass('sc-overlay-bubble-hidden')
+ .on('click', this.createComment)
+ .append(icon)
-var Component = require('substance/ui/Component')
-var createAnnotation = require('substance/model/transform/createAnnotation')
-var documentHelpers = require('substance/model/documentHelpers')
-var Icon = require('substance/ui/FontAwesomeIcon')
+ return bubble
+ }
-function CommentBubble () {
- CommentBubble.super.apply(this, arguments)
-}
+ // reset bubble position on window resize
+ // only works on the horizontal level, as the vertical position gets
+ // calculated relative to the overlay container, which gets positioned
+ // wrong on resize (substance bug -- TODO)
+ didMount () {
+ DefaultDOMElement.getBrowserWindow().on('resize', this.didUpdate, this)
+ }
-CommentBubble.Prototype = function () {
- this.render = function ($$) {
- var commandStates = this.context.commandManager.getCommandStates()
- var commentState = commandStates.comment
-
- var title = ''
- // var title = 'Create a new comment'
-
- // /////////////////////////////////////////////////////////
- // SET ACTIVE COMMENT //////////////////////////////////////
-
- var commentsProvider = this.context.commentsProvider
- var activeComment = commentsProvider.getActiveEntry()
- var isComment = commandStates['comment'].active
-
- if (isComment) {
- var selectionState = this.context.documentSession.getSelectionState()
- var commentAnnotations = selectionState.getAnnotationsForType('comment')
- // TODO what happens with multiple comments on the same cursor position?
- var comment = commentAnnotations[0]
-
- if (activeComment !== comment.id) {
- commentsProvider.setActiveEntry(comment.id)
- }
- } else {
- if (activeComment) {
- // HACK -- pass the surface, as I cannot get it from the editor on start
- var surface = this.context.surfaceManager.getFocusedSurface()
- commentsProvider.removeEmptyComments(surface)
- commentsProvider.removeActiveEntry()
- }
- }
- // /////////////////////////////////////////////////////////
+ didUpdate () {
+ if (this.el.getChildCount() === 0) return
+ this.setBubblePosition()
+ }
- var icon = $$(Icon, { icon: 'fa-comment' })
- .addClass('sc-comment-icon')
+ dispose () {
+ DefaultDOMElement.getBrowserWindow().off(this)
+ }
- if (commentState.mode !== 'create') return $$('div')
+ setBubblePosition () {
+ // without this check, the editor will break on first load
+ const surface = this.getSurface()
+ if (!surface) return
+
+ const documentElement = document.querySelector('.se-content')
+ const overlayContainer = document.querySelector('.sc-overlay-container')
+
+ setTimeout(() => { // read comment below
+ const documentElementWidth = documentElement.offsetWidth
+ const overlayContainerLeft = overlayContainer.offsetLeft
+ const left = documentElementWidth - overlayContainerLeft - 15
+
+ // 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'
+
+ this.el.css('left', left)
+ this.el.css('top', top)
+ })
+
+ /*
+ There is a race condition with overlayContainer's position.
+ If it gets rendered fast enough, this is fine.
+ Otherwise, the overlayContainerLeft variable won't have been updated by
+ substance for us to get the correct value.
+ There is no event letting us know that this has been updated,
+ and it's probably not worth creating a listener.
+ */
+ }
- return $$('div')
- .attr('title', title)
- .addClass('circle')
- .on('click', this.setCommentState)
- .append(icon)
+ getCommentState () {
+ const { commandManager } = this.context
+ const commandStates = commandManager.getCommandStates()
+ return commandStates.comment
}
- this.getActiveComment = function () {
- var session = this.context.documentSession
- var sel = session.getSelection()
- var comment = documentHelpers.getPropertyAnnotationsForSelection(
- session.getDocument(),
- sel,
- { type: 'comment' }
- )
+ getDocumentSession () {
+ return this.context.documentSession
+ }
+
+ getMode () {
+ const commentState = this.getCommentState()
+ return commentState.mode
+ }
- return comment[0]
+ getProvider () {
+ return this.context.commentsProvider
}
- this.setCommentState = function () {
- var commandStates = this.context.commandManager.getCommandStates()
- var session = this.context.documentSession
- var surface = this.context.surfaceManager.getFocusedSurface()
-
- var sel = session.getSelection()
-
- if (commandStates['comment'].mode === 'create') {
- surface.transaction(function (tx, args) {
- createAnnotation(tx, {
- selection: sel,
- node: {
- type: 'comment'
- }
- })
- })
+ getSelection () {
+ const documentSession = this.getDocumentSession()
+ return documentSession.getSelection()
+ }
+
+ getSurface () {
+ const surfaceManager = this.context.surfaceManager
+ return surfaceManager.getFocusedSurface()
+ }
+
+ createComment () {
+ const mode = this.getMode()
+ const provider = this.getProvider()
+ const selection = this.getSelection()
+ const surface = this.getSurface()
+
+ if (mode !== 'create') return
+
+ const newNode = {
+ selection: selection,
+ node: { type: 'comment' }
}
+
+ surface.transaction((tx, args) => {
+ const annotation = createAnnotation(tx, newNode)
+ provider.focusTextArea(annotation.node.id)
+ })
}
}
-Component.extend(CommentBubble)
-
-module.exports = CommentBubble
+export default CommentBubble
diff --git a/app/components/SimpleEditor/elements/comment/CommentCommand.js b/app/components/SimpleEditor/elements/comment/CommentCommand.js
index cf4944f4e819e5cec1f93d1187225c4c8dd93d61..6e8aebfbad57f375439ebfd006459658b4e84540 100644
--- a/app/components/SimpleEditor/elements/comment/CommentCommand.js
+++ b/app/components/SimpleEditor/elements/comment/CommentCommand.js
@@ -1,9 +1,7 @@
-'use strict'
+import {AnnotationCommand} from 'substance'
-var AnnotationCommand = require('substance/ui/AnnotationCommand')
+class CommentCommand extends AnnotationCommand {}
-var CommentCommand = AnnotationCommand.extend()
+CommentCommand.type = 'comment'
-CommentCommand.static.name = 'comment'
-
-module.exports = CommentCommand
+export default CommentCommand
diff --git a/app/components/SimpleEditor/elements/comment/CommentComponent.js b/app/components/SimpleEditor/elements/comment/CommentComponent.js
index ab3b1e06e28a5d207603c50661dd5d335b2f876d..52d59562324e84439062af13da4cf568ea63604d 100644
--- a/app/components/SimpleEditor/elements/comment/CommentComponent.js
+++ b/app/components/SimpleEditor/elements/comment/CommentComponent.js
@@ -1,13 +1,7 @@
-'use strict'
+import { AnnotationComponent } from 'substance'
-var AnnotationComponent = require('substance/ui/AnnotationComponent')
-
-function CommentComponent () {
- CommentComponent.super.apply(this, arguments)
-}
-
-CommentComponent.Prototype = function () {
- this.render = function ($$) {
+class CommentComponent extends AnnotationComponent {
+ render ($$) {
var el = $$('span')
.attr('data-id', this.props.node.id)
.addClass(this.getClassNames())
@@ -22,7 +16,7 @@ CommentComponent.Prototype = function () {
return el
}
- this.focus = function () {
+ focus () {
var id = this.props.node.id
var provider = this.context.commentsProvider
@@ -30,6 +24,4 @@ CommentComponent.Prototype = function () {
}
}
-AnnotationComponent.extend(CommentComponent)
-
-module.exports = CommentComponent
+export default CommentComponent
diff --git a/app/components/SimpleEditor/elements/comment/CommentHTMLConverter.js b/app/components/SimpleEditor/elements/comment/CommentHTMLConverter.js
index bf6ad1e650ff25ae832bb01efbe291aefbb7443d..2d7c7f4e547fd2ea4fcd5cdc663d0377fbceea80 100644
--- a/app/components/SimpleEditor/elements/comment/CommentHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/comment/CommentHTMLConverter.js
@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export default {
type: 'comment',
tagName: 'comment'
}
diff --git a/app/components/SimpleEditor/elements/comment/CommentPackage.js b/app/components/SimpleEditor/elements/comment/CommentPackage.js
index 357b40175f85181d85f48fc63e63cbcac3ca370c..da822a5edf5cd56c119436b1fac78f097f739ed3 100644
--- a/app/components/SimpleEditor/elements/comment/CommentPackage.js
+++ b/app/components/SimpleEditor/elements/comment/CommentPackage.js
@@ -1,22 +1,27 @@
-'use strict'
+import Comment from './Comment'
+import CommentBubble from './CommentBubble'
+import CommentCommand from './CommentCommand'
+import CommentComponent from './CommentComponent'
+import CommentHTMLConverter from './CommentHTMLConverter'
+import ResolvedCommentPackage from './ResolvedCommentPackage'
-var Comment = require('./Comment')
-var CommentCommand = require('./CommentCommand')
-var CommentComponent = require('./CommentComponent')
-
-var ResolvedCommentPackage = require('./ResolvedCommentPackage')
-
-module.exports = {
+export default {
name: 'comment',
configure: function (config) {
config.import(ResolvedCommentPackage)
config.addNode(Comment)
- config.addComponent(Comment.static.name, CommentComponent)
- config.addCommand(CommentCommand)
- config.addIcon('comment', { 'fontawesome': 'fa-comment' })
+ config.addComponent(Comment.type, CommentComponent)
+ config.addConverter('html', CommentHTMLConverter)
+ config.addCommand(Comment.type, CommentCommand, { nodeType: Comment.type })
+ config.addTool('comment', CommentBubble, {
+ target: 'overlay',
+ triggerOnCursorMove: true
+ })
+
+ config.addIcon('comment', { 'fontawesome': 'fa-comment' })
config.addLabel('comment', {
en: 'Comment'
})
diff --git a/app/components/SimpleEditor/elements/comment/ResolvedComment.js b/app/components/SimpleEditor/elements/comment/ResolvedComment.js
index 1b7f5837cb2b5f67cd579ec6ffd1a9f09bc9ac58..c4a310cf30d931ab404d04f6b2e9f918fdc40735 100644
--- a/app/components/SimpleEditor/elements/comment/ResolvedComment.js
+++ b/app/components/SimpleEditor/elements/comment/ResolvedComment.js
@@ -1,13 +1,7 @@
-'use strict'
+import { PropertyAnnotation } from 'substance'
-var PropertyAnnotation = require('substance/model/PropertyAnnotation')
+class ResolvedComment extends PropertyAnnotation {}
-function ResolvedComment () {
- ResolvedComment.super.apply(this, arguments)
-}
+ResolvedComment.type = 'resolved-comment'
-PropertyAnnotation.extend(ResolvedComment)
-
-ResolvedComment.static.name = 'resolved-comment'
-
-module.exports = ResolvedComment
+export default ResolvedComment
diff --git a/app/components/SimpleEditor/elements/comment/ResolvedCommentCommand.js b/app/components/SimpleEditor/elements/comment/ResolvedCommentCommand.js
index 2250d7a54c1cccc2fb5077ba514752e1bf76c0fa..dc58dfd82c8220501d726abadad2125f31b34d4d 100644
--- a/app/components/SimpleEditor/elements/comment/ResolvedCommentCommand.js
+++ b/app/components/SimpleEditor/elements/comment/ResolvedCommentCommand.js
@@ -1,9 +1,7 @@
-'use strict'
+import { AnnotationCommand } from 'substance'
-var AnnotationCommand = require('substance/ui/AnnotationCommand')
+class ResolvedCommentCommand extends AnnotationCommand {}
-var ResolvedCommentCommand = AnnotationCommand.extend()
+ResolvedCommentCommand.type = 'resolved-comment'
-ResolvedCommentCommand.static.name = 'resolved-comment'
-
-module.exports = ResolvedCommentCommand
+export default ResolvedCommentCommand
diff --git a/app/components/SimpleEditor/elements/comment/ResolvedCommentHTMLConverter.js b/app/components/SimpleEditor/elements/comment/ResolvedCommentHTMLConverter.js
index 8be1f30fda4d6dfc94830199c47409739e2bf9c5..2a4e231d205548f6665ed7aec8069ee6872f508e 100644
--- a/app/components/SimpleEditor/elements/comment/ResolvedCommentHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/comment/ResolvedCommentHTMLConverter.js
@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export default {
type: 'resolved-comment',
tagName: 'resolved-comment'
}
diff --git a/app/components/SimpleEditor/elements/comment/ResolvedCommentPackage.js b/app/components/SimpleEditor/elements/comment/ResolvedCommentPackage.js
index b4b1a3272c48d0ef7679384c91ee09eae5f80792..43688237bf76728372f3635482ccd73d6704027d 100644
--- a/app/components/SimpleEditor/elements/comment/ResolvedCommentPackage.js
+++ b/app/components/SimpleEditor/elements/comment/ResolvedCommentPackage.js
@@ -1,24 +1,13 @@
-'use strict'
+import ResolvedComment from './ResolvedComment'
+import ResolvedCommentCommand from './ResolvedCommentCommand'
+import ResolvedCommentHTMLConverter from './ResolvedCommentHTMLConverter'
-// var Comment = require('./Comment')
-// var CommentCommand = require('./CommentCommand')
-// var CommentComponent = require('./CommentComponent')
-
-var ResolvedComment = require('./ResolvedComment')
-var ResolvedCommentCommand = require('./ResolvedCommentCommand')
-
-module.exports = {
+export default {
name: 'resolved-comment',
configure: function (config) {
config.addNode(ResolvedComment)
- config.addCommand(ResolvedCommentCommand)
-
- // config.addComponent(Comment.static.name, CommentComponent)
- // config.addIcon('comment', { 'fontawesome': 'fa-comment' })
- //
- // config.addLabel('comment', {
- // en: 'Comment'
- // })
+ config.addCommand(ResolvedComment.type, ResolvedCommentCommand, { nodeType: ResolvedComment.type })
+ config.addConverter('html', ResolvedCommentHTMLConverter)
}
}
diff --git a/app/components/SimpleEditor/elements/comment/comment.scss b/app/components/SimpleEditor/elements/comment/comment.scss
index 69a2323179b0b6c8c1b60abf794fd74b65ae980c..df4bab2d2ebde8823b4d32be1ca4b42c74028de6 100644
--- a/app/components/SimpleEditor/elements/comment/comment.scss
+++ b/app/components/SimpleEditor/elements/comment/comment.scss
@@ -1,47 +1,47 @@
+// 3 shades of gray
$light-gray: #d3d3d3;
$mid-gray: #b0b0b0;
$dark-gray: #868686;
-$pale-teal: #ceeced;
-// $teal: #46b9ba;
-$teal: #228b46;
+$green: #228b46;
$white: #fff;
.sc-comment {
- border-bottom: 2px solid $teal;
+ border-bottom: 2px solid $green;
}
-.sc-resolved-comment {
- // background-color: #ffc0cb;
-}
+.sc-prose-editor-overlay-tools {
+ .se-active-tools {
+ .sc-overlay-bubble {
+ background: $white;
+ border: 1px solid $mid-gray;
+ border-radius: 50px;
+ box-shadow: 0 2px 3px $mid-gray;
+ cursor: pointer;
+ height: 35px;
+ position: absolute;
+ width: 35px;
+ z-index: 200;
+ }
-// TODO -- more specific names for these
-.circle {
- background: $white;
- // -moz-border-radius: 50px;
- // -webkit-border-radius: 50px;
- border: 1px solid $mid-gray;
- border-radius: 50px;
- box-shadow: 0 2px 3px $mid-gray;
- cursor: pointer;
- height: 35px;
- position: absolute;
- width: 35px;
- z-index: 200;
-}
+ .sc-overlay-bubble-hidden {
+ display: none;
+ }
-.sc-comment-icon {
- color: $dark-gray;
- font-size: 20px;
- left: 7px;
- position: relative;
- top: 6px;
-}
+ .sc-comment-icon {
+ color: $dark-gray;
+ font-size: 20px;
+ left: 8px;
+ position: relative;
+ top: 6.7px;
+ }
-.action-icon {
- bottom: 2px;
- color: $teal;
- font-size: 9px;
- position: relative;
- right: 10px;
+ .action-icon {
+ bottom: 2px;
+ color: $green;
+ font-size: 9px;
+ position: relative;
+ right: 10px;
+ }
+ }
}
diff --git a/app/components/SimpleEditor/elements/dialogue/DialogueEditing.js b/app/components/SimpleEditor/elements/dialogue/DialogueEditing.js
index 74682bf6d6f02d4d0b4603c926473af1225f6231..9c22cf9f20903c8fc8de6d359be112ff0e72dfd0 100644
--- a/app/components/SimpleEditor/elements/dialogue/DialogueEditing.js
+++ b/app/components/SimpleEditor/elements/dialogue/DialogueEditing.js
@@ -1,9 +1,7 @@
-'use strict'
-
-var breakList = require('substance/packages/list/breakList')
-
-module.exports = {
- register: function (behavior) {
- behavior.defineBreak('dialogue-item', breakList)
- }
-}
+// var breakList = require('substance/packages/list/breakList')
+//
+// module.exports = {
+// register: function (behavior) {
+// behavior.defineBreak('dialogue-item', breakList)
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/dialogue/DialogueHTMLConverter.js b/app/components/SimpleEditor/elements/dialogue/DialogueHTMLConverter.js
index 3fd600fe2b5acbc3af67c71c205eab0d346fe131..fd54f1e3138f23d14da028d5ded3063613095edb 100644
--- a/app/components/SimpleEditor/elements/dialogue/DialogueHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/dialogue/DialogueHTMLConverter.js
@@ -1,12 +1,10 @@
-'use strict'
-
-module.exports = {
- type: 'codeblock',
- tagName: 'pre',
-
- import: function (el, node, converter) {
- },
-
- export: function (node, el, converter) {
- }
-}
+// module.exports = {
+// type: 'codeblock',
+// tagName: 'pre',
+//
+// import: function (el, node, converter) {
+// },
+//
+// export: function (node, el, converter) {
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/dialogue/DialogueItem.js b/app/components/SimpleEditor/elements/dialogue/DialogueItem.js
index 53770f529bad63801b0f802ce3e3197f1cc475e0..feefd29358e575bab3a18b072772152a97e6e3df 100644
--- a/app/components/SimpleEditor/elements/dialogue/DialogueItem.js
+++ b/app/components/SimpleEditor/elements/dialogue/DialogueItem.js
@@ -1,18 +1,16 @@
-'use strict'
-
-var TextBlock = require('substance/model/TextBlock')
-
-function DialogueItem () {
- DialogueItem.super.apply(this, arguments)
-}
-
-TextBlock.extend(DialogueItem)
-
-DialogueItem.static.name = 'dialogue-item'
-
-DialogueItem.static.defineSchema({
- listType: { type: 'string', default: 'definition' },
- level: { type: 'number', default: 1 }
-})
-
-module.exports = DialogueItem
+// var TextBlock = require('substance/model/TextBlock')
+//
+// function DialogueItem () {
+// DialogueItem.super.apply(this, arguments)
+// }
+//
+// TextBlock.extend(DialogueItem)
+//
+// DialogueItem.static.name = 'dialogue-item'
+//
+// DialogueItem.static.defineSchema({
+// listType: { type: 'string', default: 'definition' },
+// level: { type: 'number', default: 1 }
+// })
+//
+// module.exports = DialogueItem
diff --git a/app/components/SimpleEditor/elements/dialogue/DialogueItemComponent.js b/app/components/SimpleEditor/elements/dialogue/DialogueItemComponent.js
index 04c18c93aaa5406174589c2cb5ab9947eeb274d9..9694b4c38449f84008efa30493e35a8c46fe15e1 100644
--- a/app/components/SimpleEditor/elements/dialogue/DialogueItemComponent.js
+++ b/app/components/SimpleEditor/elements/dialogue/DialogueItemComponent.js
@@ -1,46 +1,44 @@
-'use strict'
-
-import { includes } from 'lodash'
-
-var Component = require('substance/ui/Component')
-var TextProperty = require('substance/ui/TextPropertyComponent')
-
-function DialogueItemComponent () {
- DialogueItemComponent.super.apply(this, arguments)
-}
-
-DialogueItemComponent.Prototype = function () {
- this.render = function ($$) {
- var node = this.props.node
-
- var el = $$('div')
- .addClass('sc-dialogue-item')
- .addClass('sm-' + node.listType)
- .attr('data-id', this.props.node.id)
- .append($$(TextProperty, {
- path: [this.props.node.id, 'content']
- })
- )
-
- return el
- }
-
- this.didMount = function () {
- // HACK if the items were wrapped in a dl list then I could maybe
- // achieve the same thing with css rules only
- var el = this.el
- var previous = el.el.previousSibling
-
- var className = 'sc-dialogue-item-q'
-
- if (previous && includes(previous.classList, 'sc-dialogue-item-q')) {
- className = 'sc-dialogue-item-a'
- }
-
- el.addClass(className)
- }
-}
-
-Component.extend(DialogueItemComponent)
-
-module.exports = DialogueItemComponent
+// import { includes } from 'lodash'
+//
+// var Component = require('substance/ui/Component')
+// var TextProperty = require('substance/ui/TextPropertyComponent')
+//
+// function DialogueItemComponent () {
+// DialogueItemComponent.super.apply(this, arguments)
+// }
+//
+// DialogueItemComponent.Prototype = function () {
+// this.render = function ($$) {
+// var node = this.props.node
+//
+// var el = $$('div')
+// .addClass('sc-dialogue-item')
+// .addClass('sm-' + node.listType)
+// .attr('data-id', this.props.node.id)
+// .append($$(TextProperty, {
+// path: [this.props.node.id, 'content']
+// })
+// )
+//
+// return el
+// }
+//
+// this.didMount = function () {
+// // HACK if the items were wrapped in a dl list then I could maybe
+// // achieve the same thing with css rules only
+// var el = this.el
+// var previous = el.el.previousSibling
+//
+// var className = 'sc-dialogue-item-q'
+//
+// if (previous && includes(previous.classList, 'sc-dialogue-item-q')) {
+// className = 'sc-dialogue-item-a'
+// }
+//
+// el.addClass(className)
+// }
+// }
+//
+// Component.extend(DialogueItemComponent)
+//
+// module.exports = DialogueItemComponent
diff --git a/app/components/SimpleEditor/elements/dialogue/DialoguePackage.js b/app/components/SimpleEditor/elements/dialogue/DialoguePackage.js
index 9fbb42e6c110629f4ed57aa5ed682b0dc1f0a6e4..c46f60f47d7c0d476984735acc4f4bee2fb9292c 100644
--- a/app/components/SimpleEditor/elements/dialogue/DialoguePackage.js
+++ b/app/components/SimpleEditor/elements/dialogue/DialoguePackage.js
@@ -1,35 +1,33 @@
-'use strict'
-
-var DialogueItem = require('./DialogueItem')
-var DialogueItemComponent = require('./DialogueItemComponent')
-var DialogueEditing = require('./DialogueEditing')
-
-var ListMacro = require('substance/packages/list/ListMacro')
-
-module.exports = {
- name: 'dialogue-item',
- configure: function (config, options) {
- config.addNode(DialogueItem)
- config.addComponent(DialogueItem.static.name, DialogueItemComponent)
-
- config.addTextType({
- name: 'dialogue-item',
- data: { type: 'dialogue-item' }
- })
-
- config.addStyle(__dirname, '_dialogue.scss')
- config.addEditingBehavior(DialogueEditing)
-
- if (options.enableMacro) {
- config.addMacro(ListMacro)
- }
-
- config.addLabel('dialogue', {
- en: 'Dialogue'
- })
-
- config.addLabel('dialogue-item', {
- en: 'Dialogue'
- })
- }
-}
+// var DialogueItem = require('./DialogueItem')
+// var DialogueItemComponent = require('./DialogueItemComponent')
+// var DialogueEditing = require('./DialogueEditing')
+//
+// var ListMacro = require('substance/packages/list/ListMacro')
+//
+// module.exports = {
+// name: 'dialogue-item',
+// configure: function (config, options) {
+// config.addNode(DialogueItem)
+// config.addComponent(DialogueItem.static.name, DialogueItemComponent)
+//
+// config.addTextType({
+// name: 'dialogue-item',
+// data: { type: 'dialogue-item' }
+// })
+//
+// config.addStyle(__dirname, '_dialogue.scss')
+// config.addEditingBehavior(DialogueEditing)
+//
+// if (options.enableMacro) {
+// config.addMacro(ListMacro)
+// }
+//
+// config.addLabel('dialogue', {
+// en: 'Dialogue'
+// })
+//
+// config.addLabel('dialogue-item', {
+// en: 'Dialogue'
+// })
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/dialogue/dialogue.scss b/app/components/SimpleEditor/elements/dialogue/dialogue.scss
index caafb897e143680ce2f8ff0a55253fab0b6fcf66..6dd30bb65b492b264096c08cf36d0e5c7d46b906 100644
--- a/app/components/SimpleEditor/elements/dialogue/dialogue.scss
+++ b/app/components/SimpleEditor/elements/dialogue/dialogue.scss
@@ -1,5 +1,5 @@
-.sc-dialogue {
-}
+// .sc-dialogue {
+// }
.sc-dialogue-item {
margin: 0 0 0 25px;
diff --git a/app/components/SimpleEditor/elements/elements.scss b/app/components/SimpleEditor/elements/elements.scss
index 5a830405ba98fb69d062d897615a6d810e9fa5bd..5e5005c84099d5ce8adfea12f05fc40d01788f80 100644
--- a/app/components/SimpleEditor/elements/elements.scss
+++ b/app/components/SimpleEditor/elements/elements.scss
@@ -1,8 +1,8 @@
@import './comment/comment';
-@import './dialogue/dialogue';
+// @import './dialogue/dialogue';
@import './extract/extract';
@import './link/link';
@import './note/note';
-@import './no_style_list/noStyleList';
-@import './numbered_list/numberedList';
+// @import './no_style_list/noStyleList';
+// @import './numbered_list/numberedList';
@import './source_note/sourceNote';
diff --git a/app/components/SimpleEditor/elements/extract/Extract.js b/app/components/SimpleEditor/elements/extract/Extract.js
index 9fa3350d0adc08f34da9ab715bce3b61fbc5d2ee..b073ffa2e1557734ce36721a63c87b37705b4d6e 100644
--- a/app/components/SimpleEditor/elements/extract/Extract.js
+++ b/app/components/SimpleEditor/elements/extract/Extract.js
@@ -1,13 +1,7 @@
-'use strict'
+import { TextBlock } from 'substance'
-var TextBlock = require('substance/model/TextBlock')
+class Extract extends TextBlock {}
-function Extract () {
- Extract.super.apply(this, arguments)
-}
+Extract.type = 'extract'
-TextBlock.extend(Extract)
-
-Extract.static.name = 'extract'
-
-module.exports = Extract
+export default Extract
diff --git a/app/components/SimpleEditor/elements/extract/ExtractComponent.js b/app/components/SimpleEditor/elements/extract/ExtractComponent.js
index 8268a4666cfd9e17f1e67b1c81d1b5eb8ca7f9d8..486d05e512b1dc4c914582448d2f63575542495d 100644
--- a/app/components/SimpleEditor/elements/extract/ExtractComponent.js
+++ b/app/components/SimpleEditor/elements/extract/ExtractComponent.js
@@ -1,18 +1,9 @@
-'use strict'
+import { TextBlockComponent } from 'substance'
-var TextBlockComponent = require('substance/ui/TextBlockComponent')
-// var SourceNote = require('../source_note/SourceNote.js')
-
-function ExtractComponent () {
- ExtractComponent.super.apply(this, arguments)
-}
-
-ExtractComponent.Prototype = function () {
- this.didMount = function () {
+class ExtractComponent extends TextBlockComponent {
+ didMount () {
this.addClass('sc-extract')
}
}
-TextBlockComponent.extend(ExtractComponent)
-
-module.exports = ExtractComponent
+export default ExtractComponent
diff --git a/app/components/SimpleEditor/elements/extract/ExtractHTMLConverter.js b/app/components/SimpleEditor/elements/extract/ExtractHTMLConverter.js
index aa2b8ac04a1be6017ca9173821a86845b86e738e..4441621c4a6f9928bee2a2e1138fbe20cfef4435 100644
--- a/app/components/SimpleEditor/elements/extract/ExtractHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/extract/ExtractHTMLConverter.js
@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export default {
type: 'extract',
tagName: 'extract',
diff --git a/app/components/SimpleEditor/elements/extract/ExtractPackage.js b/app/components/SimpleEditor/elements/extract/ExtractPackage.js
index c27415d7dc87855850dd49aeb312d0b29913fdf8..5e66020a899de1c0532dc28445d7e0123817dc97 100644
--- a/app/components/SimpleEditor/elements/extract/ExtractPackage.js
+++ b/app/components/SimpleEditor/elements/extract/ExtractPackage.js
@@ -1,14 +1,13 @@
-'use strict'
+import Extract from './Extract'
+import ExtractComponent from './ExtractComponent'
+import ExtractHTMLConverter from './ExtractHTMLConverter'
-var Extract = require('./Extract')
-var ExtractComponent = require('./ExtractComponent')
-var ExtractHTMLConverter = require('./ExtractHTMLConverter')
-
-module.exports = {
+export default {
name: 'extract',
configure: function (config) {
config.addNode(Extract)
- config.addComponent(Extract.static.name, ExtractComponent)
+
+ config.addComponent(Extract.type, ExtractComponent)
config.addConverter('html', ExtractHTMLConverter)
config.addTextType({
diff --git a/app/components/SimpleEditor/elements/link/LinkOverlay.js b/app/components/SimpleEditor/elements/link/LinkOverlay.js
deleted file mode 100644
index b8cbce9c0928fb8c1b5b26eee578a4a876eeb760..0000000000000000000000000000000000000000
--- a/app/components/SimpleEditor/elements/link/LinkOverlay.js
+++ /dev/null
@@ -1,64 +0,0 @@
-'use strict'
-
-var EditLinkTool = require('substance/packages/link/EditLinkTool')
-var Prompt = require('substance/ui/Prompt')
-
-function LinkOverlay () {
- LinkOverlay.super.apply(this, arguments)
-}
-
-LinkOverlay.Prototype = function () {
- this.render = function ($$) {
- var el = $$('div').addClass('sc-edit-link-tool')
-
- var commandStates = this.context.commandManager.getCommandStates()
- var isLink = commandStates.link.active
- if (!isLink) return el
-
- var node = commandStates.link.node
- var doc = node.getDocument()
- var urlPath = this.getUrlPath(node.id)
-
- el.append(
- $$(Prompt).append(
- $$(Prompt.Input, {
- type: 'url',
- path: urlPath,
- placeholder: 'Paste or type a link url'
- }),
- $$(Prompt.Separator),
- $$(Prompt.Link, {
- name: 'open-link',
- href: doc.get(urlPath),
- title: this.getLabel('open-link')
- }),
- $$(Prompt.Action, {name: 'delete', title: this.getLabel('delete')})
- .on('click', this.onDelete)
- )
- )
-
- return el
- }
-
- this.getUrlPath = function (id) {
- var propPath = this.constructor.static.urlPropertyPath
- return [id].concat(propPath)
- }
-
- this.onDelete = function (e) {
- e.preventDefault()
- var surface = this.context.surfaceManager.getFocusedSurface()
-
- var commandStates = this.context.commandManager.getCommandStates()
- var node = commandStates.link.node
-
- surface.transaction(function (tx, args) {
- tx.delete(node.id)
- return args
- })
- }
-}
-
-EditLinkTool.extend(LinkOverlay)
-
-module.exports = LinkOverlay
diff --git a/app/components/SimpleEditor/elements/link/LinkPackage.js b/app/components/SimpleEditor/elements/link/LinkPackage.js
deleted file mode 100644
index afe9044ee56c1658849c1e3b105aa41afc285153..0000000000000000000000000000000000000000
--- a/app/components/SimpleEditor/elements/link/LinkPackage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict'
-
-var Link = require('substance/packages/link/Link')
-var LinkComponent = require('substance/packages/link/LinkComponent')
-var LinkCommand = require('substance/packages/link/LinkCommand')
-var LinkHTMLConverter = require('substance/packages/link/LinkHTMLConverter')
-var LinkTool = require('substance/packages/link/LinkTool')
-
-module.exports = {
- name: 'link',
- configure: function (config) {
- config.addNode(Link)
-
- config.addComponent(Link.static.name, LinkComponent)
- config.addConverter('html', LinkHTMLConverter)
- config.addCommand(LinkCommand)
- config.addTool(LinkTool)
-
- config.addIcon(LinkCommand.static.name, { 'fontawesome': 'fa-link' })
- config.addIcon('open-link', { 'fontawesome': 'fa-external-link' })
-
- config.addLabel('link', {
- en: 'Link'
- })
- }
-}
diff --git a/app/components/SimpleEditor/elements/link/link.scss b/app/components/SimpleEditor/elements/link/link.scss
index 1818b4fb482dbd24d96787954d0d6cb4d6c17967..aaa9f5ad5de9e0331531068b0dd35f6762848854 100644
--- a/app/components/SimpleEditor/elements/link/link.scss
+++ b/app/components/SimpleEditor/elements/link/link.scss
@@ -1,4 +1,26 @@
+$gray: #eee;
+$dark-gray: #999;
+$darker-gray: #5e5c5c;
+
.sc-edit-link-tool {
- position: absolute;
- z-index: 200;
+ background-color: $gray;
+ border: 1px solid $darker-gray;
+ display: inline-block;
+ padding: 5px;
+
+ input {
+ background-color: $gray;
+ border-radius: 0;
+ outline: none;
+ }
+
+ .sc-button {
+ border: 0;
+ color: $dark-gray;
+
+ &:hover {
+ color: $darker-gray;
+ cursor: pointer;
+ }
+ }
}
diff --git a/app/components/SimpleEditor/elements/no_style_list/NoStyleListEditing.js b/app/components/SimpleEditor/elements/no_style_list/NoStyleListEditing.js
index 3366a4e468d90980bcb37154922a56a2e7c2a388..d5a76ed0c1c12154dd3a407c27de66d7bdcef8e1 100644
--- a/app/components/SimpleEditor/elements/no_style_list/NoStyleListEditing.js
+++ b/app/components/SimpleEditor/elements/no_style_list/NoStyleListEditing.js
@@ -1,9 +1,7 @@
-'use strict'
-
-var breakList = require('substance/packages/list/breakList')
-
-module.exports = {
- register: function (behavior) {
- behavior.defineBreak('no-style-list-item', breakList)
- }
-}
+// var breakList = require('substance/packages/list/breakList')
+//
+// module.exports = {
+// register: function (behavior) {
+// behavior.defineBreak('no-style-list-item', breakList)
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/no_style_list/NoStyleListHTMLConverter.js b/app/components/SimpleEditor/elements/no_style_list/NoStyleListHTMLConverter.js
index 3fd600fe2b5acbc3af67c71c205eab0d346fe131..fd54f1e3138f23d14da028d5ded3063613095edb 100644
--- a/app/components/SimpleEditor/elements/no_style_list/NoStyleListHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/no_style_list/NoStyleListHTMLConverter.js
@@ -1,12 +1,10 @@
-'use strict'
-
-module.exports = {
- type: 'codeblock',
- tagName: 'pre',
-
- import: function (el, node, converter) {
- },
-
- export: function (node, el, converter) {
- }
-}
+// module.exports = {
+// type: 'codeblock',
+// tagName: 'pre',
+//
+// import: function (el, node, converter) {
+// },
+//
+// export: function (node, el, converter) {
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/no_style_list/NoStyleListItem.js b/app/components/SimpleEditor/elements/no_style_list/NoStyleListItem.js
index 636047fad7503fd4e62bb0eabe9f83f498362fe4..4661dc35125c8ce12a1f2f80a0ce228eb37c5a81 100644
--- a/app/components/SimpleEditor/elements/no_style_list/NoStyleListItem.js
+++ b/app/components/SimpleEditor/elements/no_style_list/NoStyleListItem.js
@@ -1,18 +1,16 @@
-'use strict'
-
-var TextBlock = require('substance/model/TextBlock')
-
-function NoStyleListItem () {
- NoStyleListItem.super.apply(this, arguments)
-}
-
-TextBlock.extend(NoStyleListItem)
-
-NoStyleListItem.static.name = 'no-style-list-item'
-
-NoStyleListItem.static.defineSchema({
- listType: { type: 'string', default: '' },
- level: { type: 'number', default: 1 }
-})
-
-module.exports = NoStyleListItem
+// var TextBlock = require('substance/model/TextBlock')
+//
+// function NoStyleListItem () {
+// NoStyleListItem.super.apply(this, arguments)
+// }
+//
+// TextBlock.extend(NoStyleListItem)
+//
+// NoStyleListItem.static.name = 'no-style-list-item'
+//
+// NoStyleListItem.static.defineSchema({
+// listType: { type: 'string', default: '' },
+// level: { type: 'number', default: 1 }
+// })
+//
+// module.exports = NoStyleListItem
diff --git a/app/components/SimpleEditor/elements/no_style_list/NoStyleListItemComponent.js b/app/components/SimpleEditor/elements/no_style_list/NoStyleListItemComponent.js
index 9bd71ce98e96c2be981608a7d19c85193f744d01..18962f55a2815dceb1d3bf5c67b4c1844ab783a6 100644
--- a/app/components/SimpleEditor/elements/no_style_list/NoStyleListItemComponent.js
+++ b/app/components/SimpleEditor/elements/no_style_list/NoStyleListItemComponent.js
@@ -1,28 +1,26 @@
-'use strict'
-
-var Component = require('substance/ui/Component')
-var TextProperty = require('substance/ui/TextPropertyComponent')
-
-function NoStyleListItemComponent () {
- NoStyleListItemComponent.super.apply(this, arguments)
-}
-
-NoStyleListItemComponent.Prototype = function () {
- this.render = function ($$) {
- // var node = this.props.node
- var el = $$('div')
- .addClass('sc-no-style-list-item')
- // .addClass('sm-' + node.listType)
- .attr('data-id', this.props.node.id)
- .append($$(TextProperty, {
- path: [this.props.node.id, 'content']
- })
- )
-
- return el
- }
-}
-
-Component.extend(NoStyleListItemComponent)
-
-module.exports = NoStyleListItemComponent
+// var Component = require('substance/ui/Component')
+// var TextProperty = require('substance/ui/TextPropertyComponent')
+//
+// function NoStyleListItemComponent () {
+// NoStyleListItemComponent.super.apply(this, arguments)
+// }
+//
+// NoStyleListItemComponent.Prototype = function () {
+// this.render = function ($$) {
+// // var node = this.props.node
+// var el = $$('div')
+// .addClass('sc-no-style-list-item')
+// // .addClass('sm-' + node.listType)
+// .attr('data-id', this.props.node.id)
+// .append($$(TextProperty, {
+// path: [this.props.node.id, 'content']
+// })
+// )
+//
+// return el
+// }
+// }
+//
+// Component.extend(NoStyleListItemComponent)
+//
+// module.exports = NoStyleListItemComponent
diff --git a/app/components/SimpleEditor/elements/no_style_list/NoStyleListPackage.js b/app/components/SimpleEditor/elements/no_style_list/NoStyleListPackage.js
index 7ab9a19483126d60d1632507b30370b218dce68b..ad6ffa4be7db96645c9dff3377515db2c7c02909 100644
--- a/app/components/SimpleEditor/elements/no_style_list/NoStyleListPackage.js
+++ b/app/components/SimpleEditor/elements/no_style_list/NoStyleListPackage.js
@@ -1,35 +1,33 @@
-'use strict'
-
-var NoStyleListItem = require('./NoStyleListItem')
-var NoStyleListItemComponent = require('./NoStyleListItemComponent')
-var NoStyleListEditing = require('./NoStyleListEditing')
-
-var ListMacro = require('substance/packages/list/ListMacro')
-
-module.exports = {
- name: 'no-style-list-item',
- configure: function (config, options) {
- config.addNode(NoStyleListItem)
- config.addComponent(NoStyleListItem.static.name, NoStyleListItemComponent)
-
- config.addTextType({
- name: 'no-style-list-item',
- data: { type: 'no-style-list-item' }
- })
-
- config.addStyle(__dirname, '_noStyleList.scss')
- config.addEditingBehavior(NoStyleListEditing)
-
- if (options.enableMacro) {
- config.addMacro(ListMacro)
- }
-
- config.addLabel('no-style-list', {
- en: 'No Style List'
- })
-
- config.addLabel('no-style-list-item', {
- en: 'Undecorated List'
- })
- }
-}
+// var NoStyleListItem = require('./NoStyleListItem')
+// var NoStyleListItemComponent = require('./NoStyleListItemComponent')
+// var NoStyleListEditing = require('./NoStyleListEditing')
+//
+// var ListMacro = require('substance/packages/list/ListMacro')
+//
+// module.exports = {
+// name: 'no-style-list-item',
+// configure: function (config, options) {
+// config.addNode(NoStyleListItem)
+// config.addComponent(NoStyleListItem.static.name, NoStyleListItemComponent)
+//
+// config.addTextType({
+// name: 'no-style-list-item',
+// data: { type: 'no-style-list-item' }
+// })
+//
+// config.addStyle(__dirname, '_noStyleList.scss')
+// config.addEditingBehavior(NoStyleListEditing)
+//
+// if (options.enableMacro) {
+// config.addMacro(ListMacro)
+// }
+//
+// config.addLabel('no-style-list', {
+// en: 'No Style List'
+// })
+//
+// config.addLabel('no-style-list-item', {
+// en: 'Undecorated List'
+// })
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/no_style_list/noStyleList.scss b/app/components/SimpleEditor/elements/no_style_list/noStyleList.scss
index 61768ead442bfdf318fd860d44dc2ae30de5b859..59de95e799b93b859fffe8d2c1f19615449c917a 100644
--- a/app/components/SimpleEditor/elements/no_style_list/noStyleList.scss
+++ b/app/components/SimpleEditor/elements/no_style_list/noStyleList.scss
@@ -1,5 +1,5 @@
.sc-no-style-list-item {
- position: relative;
margin: 0 0 0 25px;
padding-top: 5px !important;
+ position: relative;
}
diff --git a/app/components/SimpleEditor/elements/note/EditNoteTool.js b/app/components/SimpleEditor/elements/note/EditNoteTool.js
index 72b92824dc26dea5ac22b118c89bd5cff1990a69..31db2ddcb1ad209240f526833e740716a1c9e8eb 100644
--- a/app/components/SimpleEditor/elements/note/EditNoteTool.js
+++ b/app/components/SimpleEditor/elements/note/EditNoteTool.js
@@ -1,63 +1,73 @@
-'use strict'
+import { each, includes, keys } from 'lodash'
+import { documentHelpers, FontAwesomeIcon as Icon, Tool } from 'substance'
+import PromptTextArea from './PromptTextArea'
-import { clone } from 'lodash'
+class EditNoteTool extends Tool {
+ render ($$) {
+ let el = $$('div').addClass('sc-edit-note-tool')
-var Component = require('substance/ui/Component')
-var Prompt = require('substance/ui/Prompt')
-
-var PromptTextArea = require('./PromptTextArea')
-
-function EditNoteTool () {
- EditNoteTool.super.apply(this, arguments)
-}
-
-EditNoteTool.Prototype = function () {
- this.saveNote = function (event) {
- var selected = this.getSelection()
- var noteContent = this.el.find('textarea').val()
- var documentSession = this.context.documentSession
-
- documentSession.transaction(function (tx, args) {
- var path = [selected.node.id, 'note-content']
- tx.set(path, noteContent)
- })
- }
-
- this.render = function ($$) {
- var el = $$('div').addClass('sc-edit-note-tool')
-
- var selected = this.getSelection()
+ const selected = this.getSelection()
if (!selected.node) return el
// TODO -- on this.getLabel add a label to package and call it save note
+ const icon = $$(Icon, { icon: 'fa-save' })
+ .addClass('sc-save-icon')
+ const save = $$('div').addClass('sc-save-area').append(icon).on('click', this.saveNote)
el.append(
- $$(Prompt).append(
+ $$('div').addClass('sc-edit-note-tool-container').append(
$$(PromptTextArea, {
path: [selected.node.id, 'note-content'],
placeholder: 'Type your note here'
}),
- $$(Prompt.Separator),
- $$(Prompt.Action, { name: 'save' })
- .on('click', this.saveNote)
+ save
)
)
- this.setTextAreaHeight() // to properly adjust text area height depending on text
+ // to properly adjust text area height depending on text
+ this.setTextAreaHeight()
return el
}
- this.getSelection = function () {
- var surface = this.context.surfaceManager.getFocusedSurface()
+ saveNote (event) {
+ const selected = this.getSelection()
+ const noteContent = this.el.find('textarea').val()
+ const documentSession = this.context.documentSession
+
+ documentSession.transaction(function (tx, args) {
+ const path = [selected.node.id, 'note-content']
+ tx.set(path, noteContent)
+ })
+ }
+
+ getSelection () {
+ // TODO -- write cleaner
+ const surface = this.context.surfaceManager.getFocusedSurface()
if (!surface) return {}
- var commandStates = this.context.commandManager.getCommandStates()
- if (commandStates['note'].active) {
- var note = commandStates['note']
- commandStates['note'].disabled = true // disable note so you can't click it when already active
+ const commandStates = this.context.commandManager.getCommandStates()
+ const session = this.context.documentSession
+ const sel = session.getSelection()
+
+ const note = documentHelpers.getPropertyAnnotationsForSelection(
+ session.getDocument(),
+ sel,
+ { type: 'note' }
+ )
+
+ // disable when larger selection that just includes a note as well
+ const selectionLength = (sel.endOffset - sel.startOffset === 1)
+
+ if (typeof note[0] !== 'undefined' && selectionLength) {
+ // disable commands that don't make sense on a note
+ each(keys(commandStates), (key) => {
+ const allowed = ['comment', 'redo', 'save', 'switch-text-type', 'undo']
+ if (!includes(allowed, key)) commandStates[key].disabled = true
+ })
+
return {
- node: note.node
+ node: note[0]
}
} else {
return {
@@ -66,24 +76,18 @@ EditNoteTool.Prototype = function () {
}
}
- this.setTextAreaHeight = function () {
+ // TODO -- duplicate code from propmt text area file in same folder??
+ setTextAreaHeight () {
setTimeout(function () {
- var textarea = document.querySelector('.se-note-textarea')
- textarea.style.height = (textarea.scrollHeight) + 'px'
- }, 0)
- }
-}
+ let textarea = document.querySelector('.se-note-textarea')
-Component.extend(EditNoteTool)
-
-EditNoteTool.static.getProps = function (commandStates) {
- if (commandStates['note'].active) {
- return clone(commandStates['note'])
- } else {
- return undefined
+ if (textarea) {
+ textarea.style.height = (textarea.scrollHeight) + 'px'
+ }
+ })
}
}
-EditNoteTool.static.name = 'edit-note'
+EditNoteTool.type = 'edit-note'
-module.exports = EditNoteTool
+export default EditNoteTool
diff --git a/app/components/SimpleEditor/elements/note/Note.js b/app/components/SimpleEditor/elements/note/Note.js
index 5d6002b8b231ca90df7d7e606aef2be4a77c12c1..51af949caa2935a9170c7553d515fa98642330d7 100644
--- a/app/components/SimpleEditor/elements/note/Note.js
+++ b/app/components/SimpleEditor/elements/note/Note.js
@@ -1,20 +1,13 @@
-'use strict'
+import {InlineNode} from 'substance'
-var InlineNode = require('substance/model/InlineNode')
+class Note extends InlineNode {}
-function Note () {
- Note.super.apply(this, arguments)
-}
-
-InlineNode.extend(Note)
-
-Note.static.name = 'note'
-
-Note.static.defineSchema({
+Note.define({
+ 'type': 'note',
'note-content': {
type: 'string',
default: ''
}
})
-module.exports = Note
+export default Note
diff --git a/app/components/SimpleEditor/elements/note/NoteCommand.js b/app/components/SimpleEditor/elements/note/NoteCommand.js
index 149570e30b00e3b8955480ad9c30684ead39a9f6..198e7d5c5e303112eec192cef0af09f1332e1f03 100644
--- a/app/components/SimpleEditor/elements/note/NoteCommand.js
+++ b/app/components/SimpleEditor/elements/note/NoteCommand.js
@@ -1,21 +1,13 @@
-'use strict'
+import { InsertInlineNodeCommand } from 'substance'
-var InlineNodeCommand = require('substance/ui/InlineNodeCommand')
-
-function NoteCommand () {
- NoteCommand.super.apply(this, arguments)
-}
-
-NoteCommand.Prototype = function () {
- this.createNodeData = function () {
+class NoteCommand extends InsertInlineNodeCommand {
+ createNodeData () {
return {
type: 'note'
}
}
}
-InlineNodeCommand.extend(NoteCommand)
-
-NoteCommand.static.name = 'note'
+NoteCommand.type = 'note'
-module.exports = NoteCommand
+export default NoteCommand
diff --git a/app/components/SimpleEditor/elements/note/NoteComponent.js b/app/components/SimpleEditor/elements/note/NoteComponent.js
index 5f2550203a6dea14d05616a133578ead5abc8058..2fc73d9246b2869d6dc86eff4f11bcf68b1109cb 100644
--- a/app/components/SimpleEditor/elements/note/NoteComponent.js
+++ b/app/components/SimpleEditor/elements/note/NoteComponent.js
@@ -1,26 +1,19 @@
-'use strict'
+/* eslint react/prop-types: 0 */
-var Component = require('substance/ui/Component')
+import { Component } from 'substance'
-function Note () {
- Note.super.apply(this, arguments)
-}
-
-Note.Prototype = function () {
- this.render = function ($$) {
- var el = $$('note')
+class NoteComponent extends Component {
+ render ($$) {
+ const el = $$('note')
.attr('note-content', this.props.node['note-content'])
.addClass('sc-note')
- // .append('')
return el
}
- this.dispose = function () {
+ dispose () {
this.props.node.off(this)
}
}
-Component.extend(Note)
-
-module.exports = Note
+export default NoteComponent
diff --git a/app/components/SimpleEditor/elements/note/NoteFooter.js b/app/components/SimpleEditor/elements/note/NoteFooter.js
index 0f54401dc90a1da7892ecc4011431d967678b32f..65f1467d7f5c9a67335f4d4d736635b61f690e96 100644
--- a/app/components/SimpleEditor/elements/note/NoteFooter.js
+++ b/app/components/SimpleEditor/elements/note/NoteFooter.js
@@ -1,18 +1,7 @@
-'use strict'
-
-var DocumentNode = require('substance/model/DocumentNode')
-
-function NoteFooter () {
- NoteFooter.super.apply(this, arguments)
-}
-
-DocumentNode.extend(NoteFooter)
-
-NoteFooter.static.name = 'note-footer'
-
-// NoteFooter.static.defineSchema({
-// name: 'text',
-// description: 'text'
-// })
-
-module.exports = NoteFooter
+// import { DocumentNode } from 'substance'
+//
+// class NoteFooter extends DocumentNode {}
+//
+// NoteFooter.type = 'note-footer'
+//
+// export default NoteFooter
diff --git a/app/components/SimpleEditor/elements/note/NoteFooterComponent.js b/app/components/SimpleEditor/elements/note/NoteFooterComponent.js
index bd8780dd400725a0d0c8be52e2d51719a0e31929..c3e9c999fdcb52e1b41859b3a33cba711ca7f2d4 100644
--- a/app/components/SimpleEditor/elements/note/NoteFooterComponent.js
+++ b/app/components/SimpleEditor/elements/note/NoteFooterComponent.js
@@ -1,60 +1,16 @@
-'use strict'
-
-var BlockNodeComponent = require('substance/ui/BlockNodeComponent')
-// var TextPropertyEditor = require('substance/ui/TextPropertyEditor');
-
-function NoteFooterComponent () {
- NoteFooterComponent.super.apply(this, arguments)
-}
-
-NoteFooterComponent.Prototype = function () {
- this.render = function ($$) {
- var el = $$('div').addClass('sc-note-footer')
-
- el.append(
- 'this is something I guess'
- )
-
- // el.append(
- // $$('div').ref('title').addClass('se-title').append('Entity')
- // );
-
- // var table = $$('table');
- // table.append(
- // $$('colgroup').append(
- // $$('col').addClass('se-label-col'),
- // $$('col').addClass('se-value-col')
- // )
- // );
-
- // var nameRow = $$('tr');
- // nameRow.append($$('td').addClass('se-label').append('Name:'));
- // nameRow.append($$('td').addClass('se-value').append(
- // $$(TextPropertyEditor, {
- // path: [this.props.node.id, 'name'],
- // disabled: this.props.disabled
- // }).ref('nameEditor')
- // ));
- // table.append(nameRow);
-
- // table.append($$('tr').addClass('se-separator'))
-
- // var descriptionRow = $$('tr');
- // descriptionRow.append($$('td').addClass('se-label').append('Description:'));
- // descriptionRow.append($$('td').addClass('se-value').append(
- // $$(TextPropertyEditor, {
- // path: [this.props.node.id, 'description'],
- // disabled: this.props.disabled
- // }).ref('descriptionEditor')
- // ));
- // table.append(descriptionRow);
-
- // el.append(table);
-
- return el
- }
-}
-
-BlockNodeComponent.extend(NoteFooterComponent)
-
-module.exports = NoteFooterComponent
+// import { BlockNodeComponent } from 'substance'
+//
+// class NoteFooterComponent extends BlockNodeComponent {
+// render ($$) {
+// let el = $$('div')
+// .addClass('sc-note-footer')
+//
+// el.append(
+// 'this is something I guess'
+// )
+//
+// return el
+// }
+// }
+//
+// export default NoteFooterComponent
diff --git a/app/components/SimpleEditor/elements/note/NoteHTMLConverter.js b/app/components/SimpleEditor/elements/note/NoteHTMLConverter.js
index a0e9813b1c3554afbb736f48cadd5f2afeefd798..2ce72eab5137194ebf425db8035f10fe59f465df 100644
--- a/app/components/SimpleEditor/elements/note/NoteHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/note/NoteHTMLConverter.js
@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export default {
type: 'note',
tagName: 'note',
diff --git a/app/components/SimpleEditor/elements/note/NotePackage.js b/app/components/SimpleEditor/elements/note/NotePackage.js
index 31c64b5dda25ea2be279f218d0347e1d2e70a8d0..548d304f1c2ef59a63f300e1edbd02f9cd61bebb 100644
--- a/app/components/SimpleEditor/elements/note/NotePackage.js
+++ b/app/components/SimpleEditor/elements/note/NotePackage.js
@@ -1,33 +1,25 @@
-'use strict'
-
-var Note = require('./Note')
-var NoteComponent = require('./NoteComponent')
-var NoteTool = require('./NoteTool')
-var NoteCommand = require('./NoteCommand')
-var EditNoteTool = require('./EditNoteTool')
-
-// var NoteFooter = require('./NoteFooter')
-// var NoteFooterComponent = require('./NoteFooterComponent')
-
-module.exports = {
+import EditNoteTool from './EditNoteTool'
+import Note from './Note'
+import NoteCommand from './NoteCommand'
+import NoteComponent from './NoteComponent'
+import NoteHTMLConverter from './NoteHTMLConverter'
+import NoteTool from './NoteTool'
+
+export default {
name: 'note',
configure: function (config) {
config.addNode(Note)
- config.addComponent(Note.static.name, NoteComponent)
- config.addCommand(NoteCommand)
- config.addTool(NoteTool)
+ config.addComponent(Note.type, NoteComponent)
+ config.addConverter('html', NoteHTMLConverter)
- config.addIcon('note', { 'fontawesome': 'fa-bookmark' })
- // config.addIcon('instagram', { 'fontawesome': 'fa-instagram' })
-
- // config.addNode(NoteFooter)
- // config.addComponent(NoteFooter.static.name, NoteFooterComponent)
+ config.addCommand(Note.type, NoteCommand, { nodeType: Note.type })
+ config.addTool('note', NoteTool, { target: 'insert' })
+ config.addTool('note', EditNoteTool, { target: 'overlay' })
+ config.addIcon('note', { 'fontawesome': 'fa-bookmark' })
config.addLabel('note', {
en: 'Note'
})
-
- config.addTool(EditNoteTool, { overlay: true })
}
}
diff --git a/app/components/SimpleEditor/elements/note/NoteTool.js b/app/components/SimpleEditor/elements/note/NoteTool.js
index b692f44a2ba88fadd48ad1e23c8de3d696e7e774..d27d83f51dfd204e25e2db88cf8cc743f4a983f0 100644
--- a/app/components/SimpleEditor/elements/note/NoteTool.js
+++ b/app/components/SimpleEditor/elements/note/NoteTool.js
@@ -1,13 +1,7 @@
-'use strict'
+import { AnnotationTool } from 'substance'
-var AnnotationTool = require('substance/ui/AnnotationTool')
+class NoteTool extends AnnotationTool {}
-function NoteTool () {
- NoteTool.super.apply(this, arguments)
-}
+NoteTool.type = 'note'
-AnnotationTool.extend(NoteTool)
-
-NoteTool.static.name = 'note'
-
-module.exports = NoteTool
+export default NoteTool
diff --git a/app/components/SimpleEditor/elements/note/PromptTextArea.js b/app/components/SimpleEditor/elements/note/PromptTextArea.js
index 45b4e60a9225d2bd58c5aa9849014670d96af5be..ce4d2d6cec3cae64aaca298aa0a06ab08ba3cd86 100644
--- a/app/components/SimpleEditor/elements/note/PromptTextArea.js
+++ b/app/components/SimpleEditor/elements/note/PromptTextArea.js
@@ -1,21 +1,17 @@
-'use strict'
+/* eslint react/prop-types: 0 */
-var Component = require('substance/ui/Component')
+import { Component } from 'substance'
-function TextArea () {
- Component.apply(this, arguments)
-}
-
-TextArea.Prototype = function () {
- this.render = function ($$) {
- var documentSession = this.context.documentSession
- var doc = documentSession.getDocument()
- var val = doc.get(this.props.path)
+class TextArea extends Component {
+ render ($$) {
+ const documentSession = this.context.documentSession
+ const doc = documentSession.getDocument()
+ const val = doc.get(this.props.path)
- var el = $$('textarea')
+ const el = $$('textarea')
.attr({
rows: this.props.rows || '1',
- cols: this.props.columns || '40',
+ // cols: this.props.columns || '40',
placeholder: this.props.placeholder || 'Type your text here'
})
.addClass('se-note-textarea')
@@ -25,13 +21,12 @@ TextArea.Prototype = function () {
return el
}
- this.textAreaAdjust = function (event) {
- var textArea = event.path[0]
+ textAreaAdjust (event) {
+ let textArea = event.path[0]
+
textArea.style.height = '1px'
textArea.style.height = (textArea.scrollHeight) + 'px'
}
}
-Component.extend(TextArea)
-
-module.exports = TextArea
+export default TextArea
diff --git a/app/components/SimpleEditor/elements/note/note.scss b/app/components/SimpleEditor/elements/note/note.scss
index 8cedc4402da1e4093bd23ff96d93b78c9a67e4a2..cd7a9841aab3974654ff371dade50cb2e783e3df 100644
--- a/app/components/SimpleEditor/elements/note/note.scss
+++ b/app/components/SimpleEditor/elements/note/note.scss
@@ -10,33 +10,32 @@ $red: #591818;
}
.sc-note::after {
- content: ' [' counter(note) '] ';
+ content: '['counter(note)']';
counter-increment: note;
font-size: 11px;
font-style: italic;
font-weight: 400;
- position: relative;
}
}
-.sc-edit-note-tool {
- position: absolute;
- z-index: 200;
+.sc-edit-note-tool-container {
+ background-color: $gray;
+ border: 1px solid $red;
+ display: inline-block;
- .sc-prompt {
- .se-arrow {
- display: none;
- }
-
- .se-content {
- background-color: $gray;
- border: 2px solid $red;
- margin-left: 3px;
- margin-top: 5px;
- }
+ .sc-save-area {
+ display: inline;
+ float: left;
+ height: 100%;
+ padding: 5px 5px 0;
+ width: 40px;
- .se-action {
+ .sc-save-icon {
color: $red;
+ cursor: pointer;
+ position: absolute;
+ right: 19px;
+ top: 17px;
&:hover {
color: $red;
@@ -47,18 +46,15 @@ $red: #591818;
textarea {
background-color: $gray;
border: transparent;
+ border-right: 1px dashed $red;
color: $red;
float: left;
font-family: 'Fira Sans';
font-size: 15px;
+ min-height: 39px;
+ outline: none;
overflow: hidden;
resize: none;
- border-right: 1px dashed $red;
- min-height: 39px;
- }
-
- .sc-prompt .se-content .se-separator {
- height: 39px;
- margin: 0;
+ width: 310px;
}
}
diff --git a/app/components/SimpleEditor/elements/numbered_list/NumberedListEditing.js b/app/components/SimpleEditor/elements/numbered_list/NumberedListEditing.js
index 240abbe44aacffe05f1efe17931224a9f37ec08f..83fb61c19368817ffc8ecf67f0b33a5a26d35b32 100644
--- a/app/components/SimpleEditor/elements/numbered_list/NumberedListEditing.js
+++ b/app/components/SimpleEditor/elements/numbered_list/NumberedListEditing.js
@@ -1,9 +1,7 @@
-'use strict'
-
-var breakList = require('substance/packages/list/breakList')
-
-module.exports = {
- register: function (behavior) {
- behavior.defineBreak('numbered-list-item', breakList)
- }
-}
+// var breakList = require('substance/packages/list/breakList')
+//
+// module.exports = {
+// register: function (behavior) {
+// behavior.defineBreak('numbered-list-item', breakList)
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/numbered_list/NumberedListHTMLConverter.js b/app/components/SimpleEditor/elements/numbered_list/NumberedListHTMLConverter.js
index 3fd600fe2b5acbc3af67c71c205eab0d346fe131..fd54f1e3138f23d14da028d5ded3063613095edb 100644
--- a/app/components/SimpleEditor/elements/numbered_list/NumberedListHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/numbered_list/NumberedListHTMLConverter.js
@@ -1,12 +1,10 @@
-'use strict'
-
-module.exports = {
- type: 'codeblock',
- tagName: 'pre',
-
- import: function (el, node, converter) {
- },
-
- export: function (node, el, converter) {
- }
-}
+// module.exports = {
+// type: 'codeblock',
+// tagName: 'pre',
+//
+// import: function (el, node, converter) {
+// },
+//
+// export: function (node, el, converter) {
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/numbered_list/NumberedListItem.js b/app/components/SimpleEditor/elements/numbered_list/NumberedListItem.js
index 8047fda733256d99840a9beac9219d5392e9c5ed..708b604208f87d4352a33ef2f0cf7eff5281838d 100644
--- a/app/components/SimpleEditor/elements/numbered_list/NumberedListItem.js
+++ b/app/components/SimpleEditor/elements/numbered_list/NumberedListItem.js
@@ -1,18 +1,16 @@
-'use strict'
-
-var TextBlock = require('substance/model/TextBlock')
-
-function NumberedListItem () {
- NumberedListItem.super.apply(this, arguments)
-}
-
-TextBlock.extend(NumberedListItem)
-
-NumberedListItem.static.name = 'numbered-list-item'
-
-NumberedListItem.static.defineSchema({
- listType: { type: 'string', default: '' },
- level: { type: 'number', default: 1 }
-})
-
-module.exports = NumberedListItem
+// var TextBlock = require('substance/model/TextBlock')
+//
+// function NumberedListItem () {
+// NumberedListItem.super.apply(this, arguments)
+// }
+//
+// TextBlock.extend(NumberedListItem)
+//
+// NumberedListItem.static.name = 'numbered-list-item'
+//
+// NumberedListItem.static.defineSchema({
+// listType: { type: 'string', default: '' },
+// level: { type: 'number', default: 1 }
+// })
+//
+// module.exports = NumberedListItem
diff --git a/app/components/SimpleEditor/elements/numbered_list/NumberedListItemComponent.js b/app/components/SimpleEditor/elements/numbered_list/NumberedListItemComponent.js
index e674ff0a2b10856e7f506a11abd39fa793402e58..b89467cce008cc37c607aa91b7581564afa7f9e8 100644
--- a/app/components/SimpleEditor/elements/numbered_list/NumberedListItemComponent.js
+++ b/app/components/SimpleEditor/elements/numbered_list/NumberedListItemComponent.js
@@ -1,39 +1,37 @@
-'use strict'
-
-import { includes } from 'lodash'
-
-var Component = require('substance/ui/Component')
-var TextProperty = require('substance/ui/TextPropertyComponent')
-
-function NumberedListItemComponent () {
- NumberedListItemComponent.super.apply(this, arguments)
-}
-
-NumberedListItemComponent.Prototype = function () {
- this.render = function ($$) {
- // var node = this.props.node
- var el = $$('div')
- .addClass('sc-numbered-list-item')
- // .addClass('sm-' + node.listType)
- .attr('data-id', this.props.node.id)
- .append($$(TextProperty, {
- path: [this.props.node.id, 'content']
- })
- )
-
- return el
- }
-
- this.didMount = function () {
- var el = this.el
- var previous = el.el.previousSibling
-
- if (previous && !includes(previous.classList, 'sc-numbered-list-item')) {
- el.el.style.counterReset = 'item'
- }
- }
-}
-
-Component.extend(NumberedListItemComponent)
-
-module.exports = NumberedListItemComponent
+// import { includes } from 'lodash'
+//
+// var Component = require('substance/ui/Component')
+// var TextProperty = require('substance/ui/TextPropertyComponent')
+//
+// function NumberedListItemComponent () {
+// NumberedListItemComponent.super.apply(this, arguments)
+// }
+//
+// NumberedListItemComponent.Prototype = function () {
+// this.render = function ($$) {
+// // var node = this.props.node
+// var el = $$('div')
+// .addClass('sc-numbered-list-item')
+// // .addClass('sm-' + node.listType)
+// .attr('data-id', this.props.node.id)
+// .append($$(TextProperty, {
+// path: [this.props.node.id, 'content']
+// })
+// )
+//
+// return el
+// }
+//
+// this.didMount = function () {
+// var el = this.el
+// var previous = el.el.previousSibling
+//
+// if (previous && !includes(previous.classList, 'sc-numbered-list-item')) {
+// el.el.style.counterReset = 'item'
+// }
+// }
+// }
+//
+// Component.extend(NumberedListItemComponent)
+//
+// module.exports = NumberedListItemComponent
diff --git a/app/components/SimpleEditor/elements/numbered_list/NumberedListPackage.js b/app/components/SimpleEditor/elements/numbered_list/NumberedListPackage.js
index 698d208882141696b4f3e969e759b16f2e082065..95374a2f481e87b7c39c9d236c4e90eea6797e03 100644
--- a/app/components/SimpleEditor/elements/numbered_list/NumberedListPackage.js
+++ b/app/components/SimpleEditor/elements/numbered_list/NumberedListPackage.js
@@ -1,35 +1,33 @@
-'use strict'
-
-var NumberedListItem = require('./NumberedListItem')
-var NumberedListItemComponent = require('./NumberedListItemComponent')
-var NumberedListEditing = require('./NumberedListEditing')
-
-var ListMacro = require('substance/packages/list/ListMacro')
-
-module.exports = {
- name: 'numbered-list-item',
- configure: function (config, options) {
- config.addNode(NumberedListItem)
- config.addComponent(NumberedListItem.static.name, NumberedListItemComponent)
-
- config.addTextType({
- name: 'numbered-list-item',
- data: { type: 'numbered-list-item' }
- })
-
- config.addStyle(__dirname, '_numberedList.scss')
- config.addEditingBehavior(NumberedListEditing)
-
- if (options.enableMacro) {
- config.addMacro(ListMacro)
- }
-
- config.addLabel('numbered-list', {
- en: 'Numbered List'
- })
-
- config.addLabel('numbered-list-item', {
- en: 'Numbered List'
- })
- }
-}
+// var NumberedListItem = require('./NumberedListItem')
+// var NumberedListItemComponent = require('./NumberedListItemComponent')
+// var NumberedListEditing = require('./NumberedListEditing')
+//
+// var ListMacro = require('substance/packages/list/ListMacro')
+//
+// module.exports = {
+// name: 'numbered-list-item',
+// configure: function (config, options) {
+// config.addNode(NumberedListItem)
+// config.addComponent(NumberedListItem.static.name, NumberedListItemComponent)
+//
+// config.addTextType({
+// name: 'numbered-list-item',
+// data: { type: 'numbered-list-item' }
+// })
+//
+// config.addStyle(__dirname, '_numberedList.scss')
+// config.addEditingBehavior(NumberedListEditing)
+//
+// if (options.enableMacro) {
+// config.addMacro(ListMacro)
+// }
+//
+// config.addLabel('numbered-list', {
+// en: 'Numbered List'
+// })
+//
+// config.addLabel('numbered-list-item', {
+// en: 'Numbered List'
+// })
+// }
+// }
diff --git a/app/components/SimpleEditor/elements/numbered_list/numberedList.scss b/app/components/SimpleEditor/elements/numbered_list/numberedList.scss
index 4473e204ade818b447eaf890140f33ac7469cd17..0733558d5a601895489dc11826b9909c0d5c4ec7 100644
--- a/app/components/SimpleEditor/elements/numbered_list/numberedList.scss
+++ b/app/components/SimpleEditor/elements/numbered_list/numberedList.scss
@@ -3,20 +3,17 @@
}
.sc-numbered-list-item {
- position: relative;
margin: 0 0 0 25px;
padding-top: 5px !important;
-}
-
-.sc-numbered-list-item span::before {
- font-size: 14px;
- font-style: italic;
- position: absolute;
- left: -25px;
- top: 7px;
+ position: relative;
- counter-increment: item;
- content: "" counter(item) ". ";
+ span::before {
+ content: '' counter(item) '. ';
+ counter-increment: item;
+ font-size: 14px;
+ font-style: italic;
+ left: -25px;
+ position: absolute;
+ top: 7px;
+ }
}
-
-
diff --git a/app/components/SimpleEditor/elements/source_note/SourceNote.js b/app/components/SimpleEditor/elements/source_note/SourceNote.js
index 7cfe60e9260c45793fe4995043e0de8a79075166..32e12bc7159162e39092c216fe3d5bae7fb97a99 100644
--- a/app/components/SimpleEditor/elements/source_note/SourceNote.js
+++ b/app/components/SimpleEditor/elements/source_note/SourceNote.js
@@ -1,13 +1,7 @@
-'use strict'
+import { PropertyAnnotation } from 'substance'
-var PropertyAnnotation = require('substance/model/PropertyAnnotation')
+class SourceNote extends PropertyAnnotation {}
-function SourceNote () {
- SourceNote.super.apply(this, arguments)
-}
+SourceNote.type = 'source-note'
-PropertyAnnotation.extend(SourceNote)
-
-SourceNote.static.name = 'source-note'
-
-module.exports = SourceNote
+export default SourceNote
diff --git a/app/components/SimpleEditor/elements/source_note/SourceNoteCommand.js b/app/components/SimpleEditor/elements/source_note/SourceNoteCommand.js
index aaf26b35c9d696deac7b5e8744c1efc9a607c9ce..592df16c1a4606f9a00808126ed9e81db743fc9a 100644
--- a/app/components/SimpleEditor/elements/source_note/SourceNoteCommand.js
+++ b/app/components/SimpleEditor/elements/source_note/SourceNoteCommand.js
@@ -1,9 +1,7 @@
-'use strict'
+import { AnnotationCommand } from 'substance'
-var AnnotationCommand = require('substance/ui/AnnotationCommand')
+class SourceNoteCommand extends AnnotationCommand {}
-var SourceNoteCommand = AnnotationCommand.extend()
+SourceNoteCommand.type = 'source-note'
-SourceNoteCommand.static.name = 'source-note'
-
-module.exports = SourceNoteCommand
+export default SourceNoteCommand
diff --git a/app/components/SimpleEditor/elements/source_note/SourceNoteHTMLConverter.js b/app/components/SimpleEditor/elements/source_note/SourceNoteHTMLConverter.js
index cca56b12c4ab84960f7cf76803b30671b247b311..89b8d618bd1ef99bc28efab75a06f3c07ab4e08c 100644
--- a/app/components/SimpleEditor/elements/source_note/SourceNoteHTMLConverter.js
+++ b/app/components/SimpleEditor/elements/source_note/SourceNoteHTMLConverter.js
@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export default {
type: 'source-note',
tagName: 'cite'
}
diff --git a/app/components/SimpleEditor/elements/source_note/SourceNotePackage.js b/app/components/SimpleEditor/elements/source_note/SourceNotePackage.js
index 22681ee1c826ec8419744e76ce897f6f50a89612..828b545929eee99ee760c9f943b19cea80997e7a 100644
--- a/app/components/SimpleEditor/elements/source_note/SourceNotePackage.js
+++ b/app/components/SimpleEditor/elements/source_note/SourceNotePackage.js
@@ -1,18 +1,19 @@
-'use strict'
+import SourceNote from './SourceNote'
+import SourceNoteCommand from './SourceNoteCommand'
+import SourceNoteHTMLConverter from './SourceNoteHTMLConverter'
+import SourceNoteTool from './SourceNoteTool'
-var SourceNote = require('./SourceNote')
-var SourceNoteTool = require('./SourceNoteTool')
-var SourceNoteCommand = require('./SourceNoteCommand')
-
-module.exports = {
+export default {
name: 'source-note',
configure: function (config) {
config.addNode(SourceNote)
- config.addCommand(SourceNoteCommand)
- config.addTool(SourceNoteTool)
- config.addIcon('source-note', { 'fontawesome': 'fa-book' })
- // config.addStyle(__dirname, '_sourceNote.scss')
+ config.addConverter('html', SourceNoteHTMLConverter)
+
+ config.addCommand(SourceNote.type, SourceNoteCommand, { nodeType: SourceNote.type })
+ config.addTool('source-note', SourceNoteTool, { target: 'annotations' })
+
+ config.addIcon('source-note', { 'fontawesome': 'fa-book' })
config.addLabel('source-note', {
en: 'Source Note'
})
diff --git a/app/components/SimpleEditor/elements/source_note/SourceNoteTool.js b/app/components/SimpleEditor/elements/source_note/SourceNoteTool.js
index 1c7d3ed89e28b8b4a4b8281732444ece41cbfb2c..db0e4b57339ef82d1b8cbf7e85738abf80c71e02 100644
--- a/app/components/SimpleEditor/elements/source_note/SourceNoteTool.js
+++ b/app/components/SimpleEditor/elements/source_note/SourceNoteTool.js
@@ -1,13 +1,7 @@
-'use strict'
+import { AnnotationTool } from 'substance'
-var AnnotationTool = require('substance/ui/AnnotationTool')
+class SourceNoteTool extends AnnotationTool {}
-function SourceNoteTool () {
- AnnotationTool.apply(this, arguments)
-}
+SourceNoteTool.type = 'source-note'
-AnnotationTool.extend(SourceNoteTool)
-
-SourceNoteTool.static.name = 'source-note'
-
-module.exports = SourceNoteTool
+export default SourceNoteTool
diff --git a/app/components/SimpleEditor/elements/source_note/sourceNote.scss b/app/components/SimpleEditor/elements/source_note/sourceNote.scss
index 7162efa45cb048ca08a0084e31cd9c47fbaa925c..3c03b3387e75f9427a6c4f07e31fa384a96ad866 100644
--- a/app/components/SimpleEditor/elements/source_note/sourceNote.scss
+++ b/app/components/SimpleEditor/elements/source_note/sourceNote.scss
@@ -1,13 +1,15 @@
+$gray: #939393;
+
.sc-source-note {
- color: #939393;
+ color: $gray;
font-size: 14px;
font-style: italic;
}
.sc-source-note::before {
- content: ' [ '
+ content: ' [ ';
}
.sc-source-note::after {
- content: ' ]'
+ content: ' ]';
}
diff --git a/app/components/SimpleEditor/panes/Comments/Comment.js b/app/components/SimpleEditor/panes/Comments/Comment.js
index bca9af536c1a0b8d04ad07fb847fdcf1895a3632..ff9e7c6738074c04286426ea775e0dc4776e9738 100644
--- a/app/components/SimpleEditor/panes/Comments/Comment.js
+++ b/app/components/SimpleEditor/panes/Comments/Comment.js
@@ -1,39 +1,38 @@
-'use strict'
+/* eslint react/prop-types: 0 */
-var Icon = require('substance/ui/FontAwesomeIcon')
-var Component = require('substance/ui/Component')
+import {
+ Component,
+ FontAwesomeIcon as Icon
+} from 'substance'
-function Comment () {
- Comment.super.apply(this, arguments)
-}
-
-Comment.Prototype = function () {
- this.render = function ($$) {
- var active = this.props.active
- var name = this.props.user
- var text = this.props.text
+class Comment extends Component {
+ render ($$) {
+ const active = this.props.active
+ let name = this.props.user
+ let text = this.props.text
+ let resolveIconEl = $$('div')
- // preview
if (!active) {
+ // preview
if (text.length > 100) {
text = text.substring(0, 100) + '...'
}
- var resolveIcon = $$(Icon, { icon: 'fa-check' })
- var iconCircle = $$('div').addClass('sc-comment-resolve-icon-circle')
+ const resolveIcon = $$(Icon, { icon: 'fa-check' })
+ const iconCircle = $$('div').addClass('sc-comment-resolve-icon-circle')
.append(resolveIcon)
- var resolveIconEl = $$('div')
+ resolveIconEl = $$('div')
.addClass('sc-comment-resolve-icon')
.attr('title', 'Resolve comment')
.append(iconCircle)
.on('click', this.resolve)
}
- var nameEl = $$('span').addClass('comment-user-name').append(name, ' - ')
- var textEl = $$('span').addClass('comment-text').append(text)
+ const nameEl = $$('span').addClass('comment-user-name').append(name, ' - ')
+ const textEl = $$('span').addClass('comment-text').append(text)
- var entry = $$('div')
+ const entry = $$('div')
.addClass('sc-comment-entry')
.append(
nameEl,
@@ -47,13 +46,11 @@ Comment.Prototype = function () {
)
}
- this.resolve = function (e) {
+ resolve (e) {
e.stopPropagation()
- var box = this.props.box
+ const box = this.props.box
box.resolve()
}
}
-Component.extend(Comment)
-
-module.exports = Comment
+export default Comment
diff --git a/app/components/SimpleEditor/panes/Comments/CommentBox.js b/app/components/SimpleEditor/panes/Comments/CommentBox.js
index f33b7db4db558ccfdbb2076b461c2311fbeb635c..437d90b82c1378e4df8c878b907550d73936a609 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentBox.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentBox.js
@@ -1,59 +1,67 @@
-'use strict'
+/* eslint react/prop-types: 0 */
-var Component = require('substance/ui/Component')
-var Icon = require('substance/ui/FontAwesomeIcon')
+import {
+ Component,
+ FontAwesomeIcon as Icon
+} from 'substance'
-// var CommentBoxList = require('./CommentBoxList')
-var CommentList = require('./CommentList')
+import CommentList from './CommentList'
-function CommentBox () {
- CommentBox.super.apply(this, arguments)
- this.inputHeight = 0
-}
+class CommentBox extends Component {
+ constructor (props) {
+ super(props)
+ this.inputHeight = 0
+ }
-CommentBox.Prototype = function () {
// TODO -- fix class names
- this.render = function ($$) {
- var active = this.props.active
- var comments = this.props.comments.data
- var entry = this.props.entry
+ render ($$) {
+ const active = this.props.active
+ const entry = this.props.entry
+
+ let comments = this.props.comments.data
+
+ if (!active) {
+ comments = comments.slice(0, 1) // preview
+ if (comments.length === 0) return $$('div')
+ }
- if (!active) { comments = comments.slice(0, 1) } // preview
- var commentList = $$(CommentList, {
+ const commentList = $$(CommentList, {
active: active,
box: this,
comments: comments
})
- var box = $$('li')
+ const box = $$('li')
.attr('data-comment', entry.id)
.addClass('sc-comment-pane-item')
.addClass('animation')
.append(commentList)
.on('click', this.makeActive)
+ let resolve = $$('div')
+
if (active) {
if (comments.length > 0) {
- var resolveIcon = $$(Icon, { icon: 'fa-check' })
+ const resolveIcon = $$(Icon, { icon: 'fa-check' })
- var resolve = $$('button')
+ resolve = $$('button')
.append(resolveIcon)
.attr('title', 'Resolve')
.addClass('comment-resolve')
.on('click', this.resolve)
}
- var textarea = $$('textarea')
+ const textarea = $$('textarea')
.attr('rows', '1')
.ref('commentReply')
.attr('id', entry.id)
.on('keydown', this.onKeyDown)
.on('input', this.textAreaAdjust)
- var replyIcon = $$(Icon, { icon: 'fa-plus' })
+ const replyIcon = $$(Icon, { icon: 'fa-plus' })
// TODO -- refactor classes!!!
- var reply = $$('button')
+ const reply = $$('button')
.attr('disabled', true)
.attr('title', 'Reply')
.addClass('comment-reply')
@@ -61,7 +69,7 @@ CommentBox.Prototype = function () {
.ref('commentReplyButton')
.on('click', this.reply)
- var inputBox = $$('div')
+ const inputBox = $$('div')
.append(textarea, reply, resolve)
box.addClass('sc-comment-active')
@@ -71,9 +79,9 @@ CommentBox.Prototype = function () {
return box
}
- this.textAreaAdjust = function (event) {
- var value = this.refs.commentReply.getValue()
- var replyBtn = this.refs.commentReplyButton
+ textAreaAdjust (event) {
+ const value = this.refs.commentReply.getValue()
+ let replyBtn = this.refs.commentReplyButton
if (value.trim().length > 0) {
replyBtn.removeAttr('disabled')
@@ -89,13 +97,14 @@ CommentBox.Prototype = function () {
parent.setTops()
}
- this.reply = function () {
- var comments = this.props.comments
- var id = this.props.entry.id
- var provider = this.getProvider()
- var textarea = this.refs.commentReply
- var text = textarea.getValue()
- var user = this.props.user.username
+ reply () {
+ const comments = this.props.comments
+ const id = this.props.entry.id
+ const provider = this.getProvider()
+ const user = this.props.user.username
+
+ let textarea = this.refs.commentReply
+ const text = textarea.getValue()
comments.data.push({
user: user,
@@ -109,58 +118,53 @@ CommentBox.Prototype = function () {
provider.focusTextArea(id)
}
- this.update = function (comments) {
- var id = this.props.entry.id
- var parent = this.props.parent
+ update (comments) {
+ const id = this.props.entry.id
+ const parent = this.props.parent
parent.update(id, comments)
}
- this.makeActive = function () {
- var id = this.props.entry.id
- var provider = this.getProvider()
+ makeActive () {
+ const id = this.props.entry.id
+ const provider = this.getProvider()
- var activeEntry = provider.getActiveEntry()
+ const activeEntry = provider.getActiveEntry()
if (activeEntry === id) return
provider.setActiveEntry(id)
provider.focusTextArea(id)
}
- this.resolve = function () {
- var id = this.props.entry.id
- var provider = this.getProvider()
+ resolve () {
+ const id = this.props.entry.id
+ const provider = this.getProvider()
- var surfaceManager = this.context.surfaceManager
- // TODO -- get container id dynamically
- var body = surfaceManager.getSurface('body')
-
- provider.resolveComment(body, id)
+ provider.resolveComment(id)
}
- this.getProvider = function () {
+ getProvider () {
return this.context.commentsProvider
}
// sends the event to trigger a rerender of the whole box list
// cannot simply rerender this box, as its height might have changed
// and the boxes underneath might need to move
- this.rerenderBoxList = function () {
- var provider = this.getProvider()
+ rerenderBoxList () {
+ const provider = this.getProvider()
provider.emit('comments:updated')
}
- this.onKeyDown = function (e) {
- if (e.keyCode === 27) {
- var provider = this.getProvider()
- var surface = this.context.surfaceManager.getSurface('body')
+ onKeyDown (e) {
+ if (e.keyCode === 27) { // escape
+ const provider = this.getProvider()
provider.removeActiveEntry()
- provider.removeEmptyComments(surface)
+ provider.removeEmptyComments()
}
- if (e.keyCode === 13) {
- var textAreaValue = this.refs.commentReply.getValue()
+ if (e.keyCode === 13) { // enter
+ const textAreaValue = this.refs.commentReply.getValue()
if (textAreaValue.trim().length > 0) {
this.reply()
}
@@ -168,6 +172,4 @@ CommentBox.Prototype = function () {
}
}
-Component.extend(CommentBox)
-
-module.exports = CommentBox
+export default CommentBox
diff --git a/app/components/SimpleEditor/panes/Comments/CommentBoxList.js b/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
index 4679fdf3c16ac71f38206aa88790f4a01bca01e8..e56c35558f6b57a12c4e90893e6babee27fd0834 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentBoxList.js
@@ -1,37 +1,36 @@
-'use strict'
+/* eslint react/prop-types: 0 */
import _ from 'lodash'
+import { Component } from 'substance'
-var Component = require('substance/ui/Component')
+import CommentBox from './CommentBox'
-var CommentBox = require('./CommentBox')
-
-function CommentBoxList () {
- CommentBoxList.super.apply(this, arguments)
- this.tops = []
-}
+class CommentBoxList extends Component {
+ constructor (props) {
+ super(props)
+ this.tops = []
+ }
-CommentBoxList.Prototype = function () {
- this.didMount = function () {
- var provider = this.getProvider()
+ didMount () {
+ const provider = this.getProvider()
provider.on('comments:updated', this.onCommentsUpdated, this)
this.setTops()
}
- this.didUpdate = function () {
+ didUpdate () {
this.setTops()
}
- this.render = function ($$) {
- var self = this
+ render ($$) {
+ const self = this
- var provider = self.getProvider()
- var entries = provider.getEntries()
- var activeEntry = provider.activeEntry
+ const provider = self.getProvider()
+ const entries = provider.getEntries()
+ const activeEntry = provider.activeEntry
- var listItems = entries.map(function (entry, i) {
- var active = (entry.id === activeEntry)
+ const listItems = entries.map(function (entry, i) {
+ const active = (entry.id === activeEntry)
return $$(CommentBox, {
active: active,
@@ -42,6 +41,7 @@ CommentBoxList.Prototype = function () {
})
})
+ // toggle comments pane
if (listItems.length > 0) {
this.send('showComments')
} else {
@@ -53,44 +53,44 @@ CommentBoxList.Prototype = function () {
.append(listItems)
}
- this.update = function (id, newComments) {
- var comments = this.props.comments
- var update = this.props.update
+ update (id, newComments) {
+ const comments = this.props.comments
+ const update = this.props.update
if (!comments[id]) comments[id] = { data: [] }
comments[id] = newComments
update(comments)
}
- this.setTops = function () {
- var provider = this.getProvider()
- var entries = provider.getEntries()
- var activeEntry = provider.activeEntry
+ setTops () {
+ const provider = this.getProvider()
+ const entries = provider.getEntries()
+ const activeEntry = provider.activeEntry
+
this.calculateTops(entries, activeEntry)
}
- this.calculateTops = function (entries, active) {
- // var activePos
- var result = []
- var boxes = []
+ calculateTops (entries, active) {
+ let result = []
+ let boxes = []
_.each(entries, function (entry, pos) {
// initialize annotationTop and boxHeight, as there is a chance that
// annotation and box elements are not found by the selector
// (as in when creating a new comment)
- var annotationTop = 0
- var boxHeight = 0
- var top = 0
+ let annotationTop = 0
+ let boxHeight = 0
+ let top = 0
- var isActive = false
+ let isActive = false
if (entry.id === active) isActive = true
// get position of annotation in editor
- var annotationEl = document.querySelector('span[data-id="' + entry.id + '"]')
+ const annotationEl = document.querySelector('span[data-id="' + entry.id + '"]')
if (annotationEl) annotationTop = parseInt(annotationEl.offsetTop)
// get height of this comment box
- var boxEl = document.querySelector('li[data-comment="' + entry.id + '"]')
+ const boxEl = document.querySelector('li[data-comment="' + entry.id + '"]')
if (boxEl) boxHeight = parseInt(boxEl.offsetHeight)
// keep the elements to add the tops to at the end
@@ -101,8 +101,8 @@ CommentBoxList.Prototype = function () {
// if the above comment box has already taken up the height, move down
if (pos > 0) {
- var previousBox = entries[pos - 1]
- var previousEndHeight = previousBox.endHeight
+ let previousBox = entries[pos - 1]
+ let previousEndHeight = previousBox.endHeight
if (annotationTop < previousEndHeight) {
top = previousEndHeight + 2
}
@@ -114,22 +114,21 @@ CommentBoxList.Prototype = function () {
// if active, move as many boxes above as needed to bring it to the annotation's height
if (isActive) {
- // activePos = pos
entry.endHeight = annotationTop + boxHeight + 2
result[pos] = annotationTop
- var b = true
- var i = pos
+ let b = true
+ let i = pos
// first one active, none above
if (i === 0) b = false
while (b) {
- var boxAbove = entries[i - 1]
- var boxAboveEnds = boxAbove.endHeight
- var currentTop = result[i]
+ let boxAbove = entries[i - 1]
+ let boxAboveEnds = boxAbove.endHeight
+ let currentTop = result[i]
- var doesOverlap = boxAboveEnds > currentTop
+ let doesOverlap = boxAboveEnds > currentTop
if (doesOverlap) {
var overlap = boxAboveEnds - currentTop
result[i - 1] -= overlap
@@ -142,44 +141,25 @@ CommentBoxList.Prototype = function () {
}
})
- // var previousTops = this.tops
- // this.tops = result
-
// give each box the correct top
_.each(boxes, function (box, i) {
- var val = result[i] + 'px'
- box.style.top = val
-
- // var previousVal = previousTops[i] + 'px'
- // if (previousVal < entries[activePos].endHeight) {
- // previousVal = entries[activePos].endHeight
- // }
- //
- // box.style.top = previousVal
-
- // setTimeout(function () {
- // box.style.top = val
- // }, 0)
-
- // TODO better name!!!
- // box.classList.add('animation')
+ let val = result[i] + 'px'
+ if (box) box.style.top = val
})
}
- this.getProvider = function () {
+ getProvider () {
return this.context.commentsProvider
}
- this.onCommentsUpdated = function () {
+ onCommentsUpdated () {
this.rerender()
}
- this.dispose = function () {
+ dispose () {
var provider = this.getProvider()
provider.off(this)
}
}
-Component.extend(CommentBoxList)
-
-module.exports = CommentBoxList
+export default CommentBoxList
diff --git a/app/components/SimpleEditor/panes/Comments/CommentList.js b/app/components/SimpleEditor/panes/Comments/CommentList.js
index e26a67e7ea41b39392e9d14869adb8b4e02b5d8e..3b8008476f56a69fbd0db8764a16906806aae6a6 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentList.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentList.js
@@ -1,18 +1,14 @@
-'use strict'
+/* eslint react/prop-types: 0 */
-var Component = require('substance/ui/Component')
+import { Component } from 'substance'
-var Comment = require('./Comment')
+import Comment from './Comment'
-function CommentList () {
- CommentList.super.apply(this, arguments)
-}
-
-CommentList.Prototype = function () {
- this.render = function ($$) {
- var active = this.props.active
- var box = this.props.box
- var comments = this.props.comments
+class CommentList extends Component {
+ render ($$) {
+ const active = this.props.active
+ const box = this.props.box
+ const comments = this.props.comments
var commentsEl = comments.map(function (comment) {
return $$(Comment, {
@@ -29,6 +25,4 @@ CommentList.Prototype = function () {
}
}
-Component.extend(CommentList)
-
-module.exports = CommentList
+export default CommentList
diff --git a/app/components/SimpleEditor/panes/Comments/CommentsProvider.js b/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
index 589308b1a96bcad9a975a889540d58990a39b8b8..15beea7f59c279fb25385036f15a3718b4191f5c 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentsProvider.js
@@ -1,114 +1,177 @@
import _ from 'lodash'
+import { createAnnotation, deleteNode, TOCProvider as TocProvider } from 'substance'
-var createAnnotation = require('substance/model/transform/createAnnotation')
-var deleteNode = require('substance/model/transform/deleteNode')
-var TocProvider = require('substance/ui/TOCProvider')
+class CommentsProvider extends TocProvider {
+ constructor (document, props) {
+ super(document, props)
+ const self = this
-function CommentsProvider () {
- CommentsProvider.super.apply(this, arguments)
- this.activeEntry = null
-}
+ self.activeEntry = null
+ props.documentSession.on('didUpdate', this.updateActiveEntry, this)
+ }
-CommentsProvider.Prototype = function () {
- this.computeEntries = function () {
- var comments = this.getComments()
- var entries = this.sortNodes(comments)
+ //
+ // entries
+ computeEntries () {
+ const comments = this.getComments()
+ const entries = this.sortNodes(comments)
return entries
}
- this.reComputeEntries = function () {
+ reComputeEntries () {
this.entries = this.computeEntries()
this.emit('comments:updated')
}
- this.resolveComment = function (surface, id) {
- var self = this
- var ds = this.config.documentSession
- var doc = ds.getDocument()
+ //
+ // active entry
+
+ getActiveEntry () {
+ return this.activeEntry
+ }
+
+ setActiveEntry (id) {
+ this.activeEntry = id
+ this.emit('comments:updated')
+ }
+
+ removeActiveEntry () {
+ this.activeEntry = null
+ this.emit('comments:updated')
+ }
+
+ updateActiveEntry () {
+ // if the new selection is not a comment, remove the active entry (if one)
+ // if the new selection is a comment, make it activeEntry
+ const activeEntry = this.getActiveEntry()
+ const commentState = this.getCommentState()
+ const onComment = commentState.active // is current selection on a comment
+
+ if (!onComment && !activeEntry) return
+
+ if (!onComment && activeEntry) {
+ this.removeEmptyComments()
+ this.removeActiveEntry()
+ return
+ }
+
+ const activeComment = this.getActiveComment()
+ if (activeEntry === activeComment.id) return
+ this.setActiveEntry(activeComment.id)
+ }
+
+ //
+ // resolved comments
- var commentNode = doc.get(id)
+ resolveComment (id) {
+ const self = this
- var path = commentNode.path
- var startOffset = commentNode.startOffset
- var endOffset = commentNode.endOffset
+ const ds = this.config.documentSession
+ const doc = ds.getDocument()
+ const commentNode = doc.get(id)
- var sel = ds.createSelection(path, startOffset, endOffset)
+ const path = commentNode.path
+ const startOffset = commentNode.startOffset
+ const endOffset = commentNode.endOffset
- var resolvedNodeData = {
+ const sel = ds.createSelection(path, startOffset, endOffset)
+
+ const resolvedNodeData = {
selection: sel,
- node: {
- type: 'resolved-comment'
- }
+ node: { type: 'resolved-comment' }
}
- // create resolved comment annotation on the same selection the comment was on
+ // create resolved comment annotation on the same selection the
+ // comment was on and remove existing comment
ds.transaction(function (tx, args) {
- var annotation = createAnnotation(doc, resolvedNodeData)
- var resolvedCommentId = annotation.node.id
+ const annotation = createAnnotation(doc, resolvedNodeData)
+ const resolvedCommentId = annotation.node.id
self.markCommentAsResolved(id, resolvedCommentId)
})
- // and remove existing comment
- this.deleteCommentNode(surface, id)
-
+ this.deleteCommentNode(id)
this.reComputeEntries()
}
- this.removeEmptyComments = function (surface) {
- var self = this
+ //
+ // focus text area for a comment reply
- var comments = self.getComments()
- var commentsContent = self.config.comments
+ focusTextArea (id) {
+ setTimeout(function () {
+ var textarea = document.getElementById(id)
+ if (textarea) {
+ textarea.focus()
+ }
+ }, 10)
+ }
+
+ //
+ // remove comments from pane if the user wrote nothing in them
+
+ removeEmptyComments () {
+ const self = this
+
+ const comments = self.getComments()
+ const commentsContent = self.config.comments
_.each(comments, function (value, key) {
if (commentsContent && !commentsContent[key]) {
- setTimeout(function () {
- self.deleteCommentNode(surface, key)
- }, 0)
+ self.deleteCommentNode(key)
}
})
}
- this.deleteCommentNode = function (surface, id) {
+ //
+ //
+ // helpers
+ //
+ //
+
+ deleteCommentNode (id) {
+ const surface = this.getSurface()
+
surface.transaction(function (tx, args) {
deleteNode(tx, { nodeId: id })
})
}
- // When a comment gets resolved the comment on the fragment gets a resolved property.
- // The resolved property is the id of the new resolved comment annotation.
- // If the user does not save the document after resolving, the id for the comment is still there, so it will display correctly.
- // If the user resolves the comment, does not save and then resolves the same comment again, the resolve property will simply be overwritten.
- // If the document is saved, the comment id will not exist in the document any more, so it will not be rendered.
- // If the now resolved comment needs to be unresolved, the original contents can easily be found by looking for the object with the resolved comment's id in the resolved property.
- this.markCommentAsResolved = function (commentId, resolvedId) {
- var comments = this.config.comments
- var update = this.config.updateComments
- var id = commentId
+ getActiveComment () {
+ const selectionState = this.config.documentSession.getSelectionState()
+ const commentAnnotations = selectionState.getAnnotationsForType('comment')
- if (!comments[id]) return
- comments[id].resolved = resolvedId
- update(comments)
+ // TODO -- what happens with multiple comments on the same cursor position?
+ return commentAnnotations[0]
}
- this.getComments = function () {
- var doc = this.getDocument()
- var nodes = doc.getNodes()
+ getComments () {
+ const doc = this.getDocument()
+ const nodes = doc.getNodes()
// get all notes from the document
- var comments = _.pickBy(nodes, function (value, key) {
+ const comments = _.pickBy(nodes, function (value, key) {
return value.type === 'comment'
})
return comments
}
+ getCommentState () {
+ const { commandManager } = this.config
+ const commandStates = commandManager.getCommandStates()
+ return commandStates.comment
+ }
+
+ getSurface () {
+ const { containerId, surfaceManager } = this.config
+ return surfaceManager.getSurface(containerId)
+ }
+
// TODO -- do I need to override this?
- this.handleDocumentChange = function (change) {
+ handleDocumentChange (change) {
var doc = this.getDocument()
var needsUpdate = false
- var tocTypes = this.constructor.static.tocTypes
+ var tocTypes = this.constructor.tocTypes
for (var i = 0; i < change.ops.length; i++) {
var op = change.ops[i]
@@ -133,14 +196,32 @@ CommentsProvider.Prototype = function () {
if (needsUpdate) {
// need a timeout here, to make sure that the updated doc has rendered
// the annotations, so that the comment box list can be aligned with them
- var self = this
+ const self = this
setTimeout(function () {
self.reComputeEntries()
})
}
}
- this.sortNodes = function (nodes) {
+ /*
+ When a comment gets resolved the comment on the fragment gets a resolved property.
+ The resolved property is the id of the new resolved comment annotation.
+ If the user does not save the document after resolving, the id for the comment is still there, so it will display correctly.
+ If the user resolves the comment, does not save and then resolves the same comment again, the resolve property will simply be overwritten.
+ If the document is saved, the comment id will not exist in the document any more, so it will not be rendered.
+ If the now resolved comment needs to be unresolved, the original contents can easily be found by looking for the object with the resolved comment's id in the resolved property.
+ */
+ markCommentAsResolved (commentId, resolvedId) {
+ const comments = this.config.comments
+ const update = this.config.updateComments
+ const id = commentId
+
+ if (!comments[id]) return
+ comments[id].resolved = resolvedId
+ update(comments)
+ }
+
+ sortNodes (nodes) {
var comments = _.clone(nodes)
var doc = this.getDocument()
var container = doc.get('body')
@@ -148,11 +229,10 @@ CommentsProvider.Prototype = function () {
// sort notes by
// the index of the containing block
// their position within that block
-
comments = _.map(comments, function (comment) {
- var blockId = comment.path[0]
- var blockPosition = container.getPosition(blockId)
- var nodePosition = comment.startOffset
+ const blockId = comment.path[0]
+ const blockPosition = container.getPosition(blockId)
+ const nodePosition = comment.startOffset
return {
id: comment.id,
@@ -164,33 +244,8 @@ CommentsProvider.Prototype = function () {
return _.sortBy(comments, ['blockPosition', 'nodePosition'])
}
-
- this.getActiveEntry = function () {
- return this.activeEntry
- }
-
- this.setActiveEntry = function (id) {
- this.activeEntry = id
- this.emit('comments:updated')
- }
-
- this.removeActiveEntry = function () {
- this.activeEntry = null
- this.emit('comments:updated')
- }
-
- this.focusTextArea = function (id) {
- setTimeout(function () {
- var textarea = document.getElementById(id)
- if (textarea) {
- textarea.focus()
- }
- }, 0)
- }
}
-TocProvider.extend(CommentsProvider)
-
-CommentsProvider.static.tocTypes = ['comment']
+CommentsProvider.tocTypes = ['comment']
-module.exports = CommentsProvider
+export default CommentsProvider
diff --git a/app/components/SimpleEditor/panes/Comments/commentsPane.scss b/app/components/SimpleEditor/panes/Comments/commentsPane.scss
index 716d9e26acc0848154719fb4cb7d490162a67d5f..8dd780a075e9c0fab69786c9bfe08c873cbc8cc0 100644
--- a/app/components/SimpleEditor/panes/Comments/commentsPane.scss
+++ b/app/components/SimpleEditor/panes/Comments/commentsPane.scss
@@ -1,8 +1,9 @@
$gray: #eee;
$dark-gray: #a2a2a2;
-$green: #228b46;
+$light-gray: #868686;
$shadow-gray: #ccc;
-// $teal: #46b9ba;
+
+$green: #228b46;
$teal: #3e644b;
$white: #fff;
@@ -34,13 +35,15 @@ $white: #fff;
font-family: 'Fira Sans';
font-size: 14px;
margin: 5px;
+ outline: none;
overflow: hidden;
resize: none;
- width: 96%;
+ width: 95%;
}
.comment-reply {
background-color: $teal;
+ border: 0;
border-radius: 50%;
color: $white;
float: right;
@@ -58,6 +61,7 @@ $white: #fff;
.comment-resolve {
background-color: $teal;
+ border: 0;
border-radius: 50%;
color: $white;
float: right;
@@ -117,7 +121,7 @@ $white: #fff;
.sc-comment-resolve-icon-circle {
align-items: center;
- border: 1px solid #868686;
+ border: 1px solid $light-gray;
border-radius: 50%;
display: flex;
height: 25px;
@@ -134,7 +138,7 @@ $white: #fff;
}
i {
- color: #868686;
+ color: $light-gray;
transition: .3s;
}
}
@@ -143,17 +147,16 @@ $white: #fff;
.commnets-bubble {
bottom: 0;
color: $white;
- // color: $teal;
font-size: 19px;
left: 208px;
position: absolute;
top: -21.4px;
}
- .animation {
- // -webkit-transition: all .2s ease-in-out;
- // -moz-transition: all .2s ease-in-out;
- transition: all .5s ease-in-out;
- // -o-transition: all .2s ease-in-out;
- }
+ // .animation {
+ // // -webkit-transition: all .2s ease-in-out;
+ // // -moz-transition: all .2s ease-in-out;
+ // transition: all .5s ease-in-out;
+ // // -o-transition: all .2s ease-in-out;
+ // }
}
diff --git a/app/components/SimpleEditor/panes/Notes/Notes.js b/app/components/SimpleEditor/panes/Notes/Notes.js
index 5209b5a6869183bfa1a8db78ee3068aca9f84f3e..398674c4eb5ebdfc31755fa2f145e0253aac366f 100644
--- a/app/components/SimpleEditor/panes/Notes/Notes.js
+++ b/app/components/SimpleEditor/panes/Notes/Notes.js
@@ -1,28 +1,23 @@
-'use strict'
+import { Component } from 'substance'
-var Component = require('substance/ui/Component')
-
-function Notes () {
- Component.apply(this, arguments)
-}
-
-Notes.Prototype = function () {
+class Notes extends Component {
// use toc:updated to avoid rewriting TOCProvider's this.handleDocumentChange
- this.didMount = function () {
- var provider = this.getProvider()
+ didMount () {
+ const provider = this.getProvider()
provider.on('toc:updated', this.onNotesUpdated, this)
}
- this.render = function ($$) {
- var provider = this.getProvider()
- var entries = provider.getEntries()
+ render ($$) {
+ const provider = this.getProvider()
+ const entries = provider.getEntries()
- var listItems = entries.map(function (entry, i) {
+ const listItems = entries.map(function (entry, i) {
return $$('li')
.attr('data-id', entry.id)
.addClass('sc-notes-footer-item')
.append(entry.content)
})
+
if (listItems.length === 0) return $$('div')
return $$('ol')
@@ -30,20 +25,18 @@ Notes.Prototype = function () {
.append(listItems)
}
- this.getProvider = function () {
+ getProvider () {
return this.context.notesProvider
}
- this.onNotesUpdated = function () {
+ onNotesUpdated () {
this.rerender()
}
- this.dispose = function () {
- var provider = this.getProvider()
+ dispose () {
+ const provider = this.getProvider()
provider.off(this)
}
}
-Component.extend(Notes)
-
-module.exports = Notes
+export default Notes
diff --git a/app/components/SimpleEditor/panes/Notes/NotesProvider.js b/app/components/SimpleEditor/panes/Notes/NotesProvider.js
index f0b349ed07ee6949abbe74b55689677da61935d9..31ecabd126d4a2077097f12409bb38a3ad62e34b 100644
--- a/app/components/SimpleEditor/panes/Notes/NotesProvider.js
+++ b/app/components/SimpleEditor/panes/Notes/NotesProvider.js
@@ -1,38 +1,34 @@
import _ from 'lodash'
-var TocProvider = require('substance/ui/TOCProvider')
+import { TOCProvider } from 'substance'
-function NotesProvider () {
- NotesProvider.super.apply(this, arguments)
-}
-
-NotesProvider.Prototype = function () {
- this.computeEntries = function () {
- var doc = this.getDocument()
- var nodes = doc.getNodes()
+class NotesProvider extends TOCProvider {
+ computeEntries () {
+ const doc = this.getDocument()
+ const nodes = doc.getNodes()
// get all notes from the document
- var notes = _.pickBy(nodes, function (value, key) {
+ const notes = _.pickBy(nodes, function (value, key) {
return value.type === 'note'
})
- var entries = this.sortNodes(notes)
+ const entries = this.sortNodes(notes)
return entries
}
- this.sortNodes = function (nodes) {
- var notes = _.clone(nodes)
- var doc = this.getDocument()
- var container = doc.get('body')
+ sortNodes (nodes) {
+ let notes = _.clone(nodes)
+ const doc = this.getDocument()
+ const container = doc.get('body')
// sort notes by
// the index of the containing block
// their position within that block
notes = _.map(notes, function (note) {
- var blockId = note.path[0]
- var blockPosition = container.getPosition(blockId)
- var nodePosition = note.startOffset
+ const blockId = note.path[0]
+ const blockPosition = container.getPosition(blockId)
+ const nodePosition = note.startOffset
return {
id: note.id,
@@ -47,8 +43,6 @@ NotesProvider.Prototype = function () {
}
}
-TocProvider.extend(NotesProvider)
-
-NotesProvider.static.tocTypes = ['note']
+NotesProvider.tocTypes = ['note']
-module.exports = NotesProvider
+export default NotesProvider
diff --git a/app/components/SimpleEditor/panes/TableOfContents/TableOfContents.js b/app/components/SimpleEditor/panes/TableOfContents/TableOfContents.js
index 88d661d7b2ccf5e77526e09d8f66f798ac2c8e52..5ab4a84c34cec40a4bbd95efeb4d883e41666978 100644
--- a/app/components/SimpleEditor/panes/TableOfContents/TableOfContents.js
+++ b/app/components/SimpleEditor/panes/TableOfContents/TableOfContents.js
@@ -1,48 +1,44 @@
-'use strict'
+import { FontAwesomeIcon as Icon, TOC as Toc } from 'substance'
-// import React from 'react'
-// import { LinkContainer } from 'react-router-bootstrap'
+class TableOfContents extends Toc {
+ constructor (props) {
+ super(props)
-var Icon = require('substance/ui/FontAwesomeIcon')
-var Toc = require('substance/ui/TOC')
+ this.handleAction('tocEntrySelected', (nodeId) => {
+ const editor = this.getEditor()
+ editor.scrollTo(nodeId)
-function TableOfContents () {
- TableOfContents.super.apply(this, arguments)
+ const provider = this.getProvider()
+ provider.activeEntry = nodeId
- // TODO is this ever called?
- this.handleAction('tocEntrySelected', function (nodeId) {
- var editor = this.context.controller
- editor.scrollTo(nodeId)
-
- var provider = this.context.tocProvider
- provider.activeEntry = nodeId
-
- this.rerender()
- })
+ this.rerender()
+ })
+ }
- this.render = function ($$) {
- var book = this.props.book
- var fragment = this.props.fragment
+ render ($$) {
+ const book = this.props.book
+ const fragment = this.props.fragment
- var tocProvider = this.context.tocProvider
- var activeEntry = tocProvider.activeEntry
+ const tocProvider = this.getProvider()
+ const activeEntry = tocProvider.activeEntry
- var latinLevel = {
+ const latinLevel = {
'1': 'I',
'2': 'II',
'3': 'III'
}
- var tocEntries = $$('div')
+ const tocEntries = $$('div')
.addClass('se-toc-entries')
.ref('tocEntries')
- var entries = tocProvider.getEntries()
- for (var i = 0; i < entries.length; i++) {
- var entry = entries[i]
- var level = entry.level
+ const entries = tocProvider.getEntries()
+
+ for (let i = 0; i < entries.length; i++) {
+ const entry = entries[i]
+ const level = entry.level
- var tocEntryEl = $$('a')
+ const tocEntryEl = $$('a')
.addClass('se-toc-entry')
.addClass('sm-level-' + level)
.attr({
@@ -56,31 +52,30 @@ function TableOfContents () {
latinLevel[entry.level] + '. ',
entry.name
)
+
if (activeEntry === entry.id) {
tocEntryEl.addClass('sm-active')
}
+
tocEntries.append(tocEntryEl)
}
- var location = window.location
- var bookBuilderUrl = location.origin + '/manage/books/' + book.id + '/book-builder'
- var bookLink = $$('a')
+ const bookLink = $$('a')
.attr({
- title: 'Back to book builder for ' + book.title,
- href: bookBuilderUrl
+ title: 'Back to book builder for ' + book.title
})
.append('Book: ' + book.title)
+ .on('click', this.goToBookBuilder)
- var info = $$('div')
+ const info = $$('div')
.addClass('sc-toc-panel-info')
.append(
bookLink,
$$('br'),
- 'Chapter name: ' + fragment.title,
- $$('hr')
+ 'Chapter name: ' + fragment.title
)
- var el = $$('div')
+ const el = $$('div')
.addClass('sc-toc-panel')
.ref('panelEl')
.append(
@@ -88,11 +83,11 @@ function TableOfContents () {
tocEntries
)
- var headerElement = $$('div')
+ const headerElement = $$('div')
.addClass('sc-toc-panel-header')
.append('Chapter Structure')
- var tocContent = $$('div')
+ const tocContent = $$('div')
.addClass('sc-toc-wrapper')
.append(
headerElement,
@@ -103,10 +98,21 @@ function TableOfContents () {
.addClass('sc-toc-container')
.append(tocContent)
}
-}
-// TableOfContents.Prototype = function () {}
+ getEditor () {
+ return this.context.controller
+ }
+
+ getProvider () {
+ return this.context.tocProvider
+ }
-Toc.extend(TableOfContents)
+ goToBookBuilder () {
+ const { book, history } = this.props
+ const url = '/books/' + book.id + '/book-builder'
+
+ history.push(url)
+ }
+}
-module.exports = TableOfContents
+export default TableOfContents
diff --git a/app/components/SimpleEditor/panes/TableOfContents/tableOfContents.scss b/app/components/SimpleEditor/panes/TableOfContents/tableOfContents.scss
index 9d0f720c9c328bea0109ad780432ca16a620b544..ac74cefefff39bbb6840ead141c1b15f68c28474 100644
--- a/app/components/SimpleEditor/panes/TableOfContents/tableOfContents.scss
+++ b/app/components/SimpleEditor/panes/TableOfContents/tableOfContents.scss
@@ -1,20 +1,22 @@
$darker-gray: #444;
$lighter-gray: #555;
+$separator-gray: #a1a1a1;
+$inactive-entry-gray: #777;
$very-light-gray: #eee;
+
$header-background: #d8d8d8;
$shadow: #999;
$white: #fff;
.sc-toc-container {
- background-color: $very-light-gray;
- padding: 1.2%;
+ background-color: $very-light-gray;
+ padding: 1.2%;
}
.sc-toc-wrapper {
- box-shadow: 0 0 8px $shadow;
+ box-shadow: 0 0 9px $shadow;
font-style: italic;
-
.toc-separator {
clear: both;
height: 1px;
@@ -24,38 +26,52 @@ $white: #fff;
background-color: $header-background;
color: $darker-gray;
font-weight: 500;
- height: 48px;
- padding: 14px 0 0 20px;
+ height: 31px;
+ padding: 17px 0 0 20px;
position: relative;
}
.sc-toc-panel-info {
+ border-bottom: 1px solid $separator-gray;
+ color: $darker-gray;
+ cursor: default;
font-size: 14px;
font-weight: 500;
margin: 10px 20px;
+ padding-bottom: 7px;
a {
color: $darker-gray;
- }
-
- hr {
- color: $darker-gray;
- height: 1px;
+ cursor: pointer;
+ text-decoration: none;
}
}
}
.sc-toc-panel {
background-color: $white;
+ line-height: 1.5;
max-height: 65vh;
overflow-y: auto;
.se-toc-entries {
- padding-top: 13px;
+ margin: 25px 0 13px 20px;
+
+ .sm-level-2 {
+ margin-left: 20px;
+ }
+
+ .sm-level-3 {
+ margin-left: 40px;
+ }
.se-toc-entry {
+ color: $inactive-entry-gray;
+ display: table;
font-weight: normal;
letter-spacing: 0;
+ padding-bottom: 4px;
+ text-decoration: none;
&[class^='sm-level-'],
&[class*=' sm-level-'] {
@@ -77,6 +93,10 @@ $white: #fff;
}
}
+ .fa-caret-right {
+ padding-right: 4px;
+ }
+
.fa-caret-right::after {
font-family: 'Fira Sans';
font-size: 14px;
diff --git a/app/components/SimpleEditor/substance.scss b/app/components/SimpleEditor/substance.scss
deleted file mode 100644
index 612be4036fc97533560e9d9ffb3637353d9d5dd7..0000000000000000000000000000000000000000
--- a/app/components/SimpleEditor/substance.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Substance base styles
-@import '../../../node_modules/substance/styles/base/_all';
-@import '../../../node_modules/substance/styles/components/_all';
-@import '../../../node_modules/substance/packages/base/_base';
-@import '../../../node_modules/substance/packages/prose-editor/_prose-editor';
-
-// Substance packages
-@import '../../../node_modules/substance/packages/emphasis/_emphasis';
-@import '../../../node_modules/substance/packages/strong/_strong';
-@import '../../../node_modules/substance/packages/heading/_heading';
-@import '../../../node_modules/substance/packages/list/_list';
-@import '../../../node_modules/substance/packages/subscript/_subscript';
-@import '../../../node_modules/substance/packages/superscript/_superscript';
-@import '../../../node_modules/substance/packages/codeblock/_codeblock';
-@import '../../../node_modules/substance/packages/code/_code';
-@import '../../../node_modules/substance/packages/blockquote/_blockquote';
diff --git a/package.json b/package.json
index e02f530cc6fab1b425f449376d802b6c8df5c5e2..c65df5342f946a84102d6e7294d039e68c6282e1 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
"script-loader": "^0.7.0",
"string-replace-loader": "^1.0.5",
"style-loader": "^0.13.1",
- "substance": "git+https://github.com/substance/substance.git#965c121bd6e4273315b1969ff106b85db774d678",
+ "substance": "^1.0.0-beta.5.7",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.25",
"webpack-dev-middleware": "^1.8.4",