From a8b4cc660b180f0f188877333b9ea041cd5c93eb Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 20 Dec 2016 17:50:04 +0200
Subject: [PATCH] create track-change annotation on keydown
---
.../SimpleEditor/ContainerEditor.js | 35 +++++++++++++++++--
.../track_change/TrackChangePackage.js | 4 +--
.../elements/track_change/trackChange.scss | 2 +-
3 files changed, 36 insertions(+), 5 deletions(-)
diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index ed1fe2f..5cc6ebd 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -2,7 +2,7 @@ import { each, keys, includes } from 'lodash'
import {
ContainerEditor as SubstanceContainerEditor,
Surface,
- uuid
+ uuid, createAnnotation
} from 'substance'
class ContainerEditor extends SubstanceContainerEditor {
@@ -43,7 +43,38 @@ class ContainerEditor extends SubstanceContainerEditor {
// if (this.isReadOnlyMode()) {
// const documentSession = this.getDocumentSession()
// documentSession.on('didUpdate', this.disableToolbar, this)
- //
+ // }
+
+ // Start
+ if (this.props.trackChanges) {
+ el.addEventListener('keydown', function (e) {
+ const surface = this.context.surfaceManager.getSurface('body')
+ const session = this.context.documentSession
+ const sel = session.getSelection()
+
+ const path = sel.path
+ const startOffset = sel.startOffset - 1
+ const endOffset = sel.endOffset + 1
+
+ const createAnno = session.createSelection(path, startOffset, endOffset)
+
+ const newNode = {
+ selection: createAnno,
+ node: { type: 'track-change' }
+ }
+
+ surface.transaction((tx, args) => {
+ createAnnotation(tx, newNode)
+ })
+ if (e.keyCode === 8) {
+ console.log('newNode', newNode)
+ let elem = document.querySelectorAll('[data-id=' + newNode.node.id + ']')
+ elem[0].style.backgroundColor = 'transparent'
+ elem[0].style.textDecoration = 'line-through'
+ }
+ })
+ }
+ // END
return el
}
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js b/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
index 246cce5..a3f3ac5 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
@@ -2,7 +2,7 @@ import TrackChange from './TrackChange'
import TrackChangeCommand from './TrackChangeCommand'
import TrackChangeComponent from './TrackChangeComponent'
import TrackChangeHTMLConverter from './TrackChangeHTMLConverter'
-import { AnnotationTool } from 'substance'
+// import { AnnotationTool } from 'substance'
export default {
name: 'track-change',
configure: function (config) {
@@ -10,7 +10,7 @@ export default {
config.addComponent(TrackChange.type, TrackChangeComponent)
config.addConverter('html', TrackChangeHTMLConverter)
- config.addTool('track-change', AnnotationTool, { target: 'insert' })
+ // config.addTool('track-change', AnnotationTool, { target: 'insert' })
config.addCommand(TrackChange.type, TrackChangeCommand, { nodeType: TrackChange.type })
config.addIcon('track-change', { 'fontawesome': 'fa-eye' })
config.addLabel('track-change', {
diff --git a/app/components/SimpleEditor/elements/track_change/trackChange.scss b/app/components/SimpleEditor/elements/track_change/trackChange.scss
index d0c9aff..d995404 100644
--- a/app/components/SimpleEditor/elements/track_change/trackChange.scss
+++ b/app/components/SimpleEditor/elements/track_change/trackChange.scss
@@ -1,3 +1,3 @@
.sc-track-change {
- background-color: blue;
+ background-color: #f7f70c;
}
--
GitLab