Container annotation example

config.js

@@ -4,6 +4,7 @@ module.exports = {
   examples: [
     'code-editor',
     'collabwriter',
+    'container-annotation',
     'form',
     'focused',
     'images',

container-annotation/ContainerAnnotationExampleConfig.js

@@ -0,0 +1,11 @@
+'use strict';
+var ProseEditorPackage = require('substance/packages/prose-editor/ProseEditorPackage');
+var HighlightPackage = require('./highlight/HighlightPackage');
+
+module.exports = {
+  name: 'container-annotation-example',
+  configure: function(config) {
+    config.import(ProseEditorPackage);
+    config.import(HighlightPackage);
+  }
+};

container-annotation/app.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var DocumentSession = require('substance/model/DocumentSession');
+var Component = require('substance/ui/Component');
+var Configurator = require('substance/util/Configurator');
+var ProseEditor = require('substance/packages/prose-editor/ProseEditor');
+var fixture = require('./fixture');
+var configurator = new Configurator(require('./ContainerAnnotationExampleConfig'));
+
+function App() {
+  App.super.apply(this, arguments);
+  var doc = configurator.createArticle(fixture);
+  window.doc = doc;
+  var documentSession = new DocumentSession(doc);
+  this.documentSession = documentSession;
+}
+
+App.Prototype = function() {
+  this.render = function($$) {
+    var el = $$('div').addClass('app');
+    var editor = $$(ProseEditor, {
+      configurator: configurator,
+      documentSession: this.documentSession
+    });
+    el.append(editor);
+    return el;
+  };
+};
+
+Component.extend(App);
+
+window.onload = function() {
+  Component.mount(App, 'body');
+};

container-annotation/app.scss

@@ -0,0 +1,16 @@
+$fa-font-path:  "../fonts" !default;
+@import '../node_modules/font-awesome/scss/font-awesome';
+@import '../node_modules/substance/styles/base/index';
+
+// Substance modules
+@import '../node_modules/substance/styles/components/_all';
+@import '../node_modules/substance/packages/_all';
+@import './highlight/_highlight';
+
+body {
+  overflow: hidden;
+}
+
+.sc-editor .sc-surface.body {
+  padding: 40px;
+}

container-annotation/fixture.js

@@ -0,0 +1,44 @@
+'use strict';
+/* eslint-disable indent */
+
+module.exports = function(tx) {
+  var body = tx.get('body');
+
+  tx.create({
+    id: 'title',
+    type: 'heading',
+    level: 1,
+    content: 'Container Annotations'
+  });
+  body.show('title');
+
+  tx.create({
+    id: 'p1',
+    type: 'paragraph',
+    content: [
+      "Container Annotations are special in that they"
+    ].join(' ')
+  });
+  body.show('p1');
+
+  tx.create({
+    id: 'p2',
+    type: 'paragraph',
+    content: [
+      "can span over multiple paragraphs."
+    ].join(' ')
+  });
+  body.show('p2');
+
+  tx.create({
+    "id": "h1",
+    "type": "highlight",
+    "containerId": "body",
+    "startPath": ["p1", "content"],
+    "startOffset": 10,
+    "endPath": ["p2", "content"],
+    "endOffset": 20
+  });
+
+
+};

container-annotation/highlight/Highlight.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var ContainerAnnotation = require('substance/model/ContainerAnnotation');
+var Fragmenter = require('substance/model/Fragmenter');
+
+function Highlight() {
+  Highlight.super.apply(this, arguments);
+}
+
+ContainerAnnotation.extend(Highlight);
+
+Highlight.static.name = 'highlight';
+
+Highlight.static.fragmentation = Fragmenter.SHOULD_NOT_SPLIT;
+
+module.exports = Highlight;

container-annotation/highlight/HighlightCommand.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var AnnotationCommand = require('substance/ui/AnnotationCommand');
+
+function HighlightCommand() {
+  HighlightCommand.super.apply(this, arguments);
+}
+
+AnnotationCommand.extend(HighlightCommand);
+
+HighlightCommand.static.name = 'highlight';
+
+module.exports = HighlightCommand;

container-annotation/highlight/HighlightPackage.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var Highlight = require('./Highlight');
+var HighlightCommand = require('./HighlightCommand');
+var HighlightTool = require('./HighlightTool');
+
+module.exports = {
+  name: 'highlight',
+  configure: function(config) {
+    config.addNode(Highlight);
+    config.addCommand(HighlightCommand);
+    config.addTool(HighlightTool);
+    config.addIcon(HighlightCommand.static.name, { 'fontawesome': 'fa-pencil' });
+  }
+};

container-annotation/highlight/HighlightTool.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var AnnotationTool = require('substance/ui/AnnotationTool');
+
+function HighlightTool() {
+  HighlightTool.super.apply(this, arguments);
+}
+AnnotationTool.extend(HighlightTool);
+
+HighlightTool.static.name = 'highlight';
+
+module.exports = HighlightTool;

container-annotation/highlight/_highlight.scss

@@ -0,0 +1,3 @@
+.sc-highlight {
+  background: yellow;
+}

container-annotation/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Container Annotation</title>
+    <meta charset="UTF-8">
+    <link href='app.css' rel='stylesheet' type='text/css'/>
+    <script src='app.js'></script>
+  </head>
+  <body>
+  </body>
+</html>

index.html

@@ -12,4 +12,5 @@ <h3>Substance Examples</h3>
   <li><a href="./inline-property">Inline Property Editor</a></li>
   <li><a href="./inception">Inception</a></li>
   <li><a href="./collabwriter">Collabwriter</a></li>
+  <li><a href="./container-annotation">Container Annotation</a></li>
 </ul>