wip

app/app/components/document/edit-tools.js

@@ -10,16 +10,18 @@
 // https://documize.com
 
 import Ember from 'ember';
+import TooltipMixin from '../../mixins/tooltip';
 
 const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(TooltipMixin, {
 	link: service(),
 	hasSections: false,
 	hasAttachments: false,
 	linkName: '',
+	keywords: '',
 	selection: null,
 
 	init() {
@@ -36,24 +38,37 @@ export default Ember.Component.extend({
 		});
 	},
 
-	didReceiveAttrs() {},
+	didRender() {
+		this.addTooltip(document.getElementById("content-linker-button"));
+	},
 
-	didInsertElement() {},
+	willDestroyElement() {
-
+		this.destroyTooltips();
-	willDestroyElement() {},
+	},
 
 	actions: {
+		setSelection(i) {
+			this.set('selection', i);
+
+			let candidates = this.get('candidates');
+
+			candidates.pages.forEach(c => {
+				Ember.set(c, 'selected', c.id === i.id);
+			});
+
+			candidates.attachments.forEach(c => {
+				Ember.set(c, 'selected', c.id === i.id);
+			});
+		},
+
 		onInsertLink() {
 			let selection = this.get('selection');
-			let linkName = this.get('linkName');
 
-			if (linkName.length) {
+			if (is.null(selection)) {
-				selection.title = linkName;
+				return;
 			}
 
-			if (is.not.null(selection)) {
+			return this.get('onInsertLink')(selection);
-				this.get('onInsertLink')(selection);
-			}
 		}
 	}
 });

app/app/components/folder/folder-toolbar.js

@@ -63,10 +63,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		this.setupImport();
 	},
 
-	didInsertElement() {
-		// this.setupImport();
-	},
-
 	willDestroyElement() {
 		if (is.not.null(this.get('drop'))) {
 			this.get('drop').destroy();

app/app/components/section/wysiwyg/type-editor.js

@@ -19,25 +19,23 @@ export default Ember.Component.extend({
 	appMeta: Ember.inject.service(),
 	link: service(),
 	pageBody: "",
-	drop: null,
-	showSidebar: false,
 
 	didReceiveAttrs() {
 		this.set('pageBody', this.get('meta.rawBody'));
 	},
 
 	didInsertElement() {
-		let self = this;
+		let maxHeight = $(document).height() - $(".document-editor > .toolbar").height() - 200;
 
 		let options = {
 			selector: "#rich-text-editor",
 			relative_urls: false,
-			cache_suffix: "?v=430",
+			cache_suffix: "?v=443",
 			browser_spellcheck: false,
 			gecko_spellcheck: false,
 			theme: "modern",
 			statusbar: false,
-			height: $(document).height() - $(".document-editor > .toolbar").height() - 200,
+			height: maxHeight,
 			entity_encoding: "raw",
 			paste_data_images: true,
 			image_advtab: true,
@@ -62,24 +60,9 @@ export default Ember.Component.extend({
 			menu: {},
 			menubar: false,
 			toolbar1: "bold italic underline strikethrough superscript subscript | outdent indent bullist numlist forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink | table image media | hr codesample",
-			toolbar2: "formatselect fontselect fontsizeselect | documizeLinkButton",
+			toolbar2: "formatselect fontselect fontsizeselect",
 			save_onsavecallback: function () {
 				Mousetrap.trigger('ctrl+s');
-			},
-			setup: function (editor) {
-				editor.addButton('documizeLinkButton', {
-					title: 'Insert Link',
-					icon: false,
-					image: '/favicon.ico',
-					onclick: function () {
-						let showSidebar = !self.get('showSidebar');
-						self.set('showSidebar', showSidebar);
-
-						if (showSidebar) {
-							self.send('showSidebar');
-						}
-					}
-				});
 			}
 		};
 
@@ -100,14 +83,17 @@ export default Ember.Component.extend({
 	},
 
 	actions: {
-		showSidebar() {
-			this.set('linkName', tinymce.activeEditor.selection.getContent());
-		},
-
 		onInsertLink(link) {
+			let userSelection = tinymce.activeEditor.selection.getContent();
+
+			if (is.not.empty(userSelection)) {
+				Ember.set(link, 'title', userSelection);
+			}
+
 			let linkHTML = this.get('link').buildLink(link);
 			tinymce.activeEditor.insertContent(linkHTML);
-			this.set('showSidebar', false);
+
+			return true;
 		},
 
 		isDirty() {

app/app/components/ui/ui-checkbox.js

@@ -0,0 +1,16 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+	tagName: 'span'
+});

app/app/services/link.js

@@ -52,3 +52,21 @@ export default Ember.Service.extend({
 		return result;
 	}
 });
+
+/*
+
+we should not redirect to a link that is in the same document!
+
+what happens if we delete attachment?
+
+UpdatePage(): find and persist links from saved content
+
+
+
+
+1. We need to deal with links server-side
+2. We need to click on links in the browser and 'navigate' to linked content
+
+
+
+*/

app/app/styles/app.scss

@@ -8,14 +8,12 @@
 // by contacting <sales@documize.com>.
 //
 // https://documize.com
-
 @import "color.scss";
 @import "font.scss";
 @import "functions.scss";
 @import "base.scss";
 @import "widget/widget.scss";
 @import "view/layout.scss";
-@import "view/content-linker.scss";
 @import "view/page-search.scss";
 @import "view/page-documents.scss";
 @import "view/page-settings.scss";
@@ -27,11 +25,11 @@
 @import "view/document/wysiwyg.scss";
 @import "view/document/editor.scss";
 @import "view/document/wizard.scss";
+@import "view/document/edit-tools.scss";
 @import "view/common.scss";
 @import "vendor.scss";
 @import "responsive.scss";
 @import "print.scss";
-
 @import "section/trello.scss";
 @import "section/gemini.scss";
 @import "section/github.scss";

app/app/styles/base.scss

@@ -196,7 +196,7 @@ $i: 100;
 	.width-#{$i} {
 		width: #{$i}#{"%"};
 	}
-	$i: $i - 5;
+	$i: $i - 2;
 }
 
 .no-outline {

app/app/styles/view/content-linker.scss

@@ -1,16 +0,0 @@
-.content-linker {
-	margin: 0 10px;
-	padding: 20px;
-	@include border(1px);
-
-	.input-control > .page-list {
-		margin: 0;
-		padding: 0;
-
-		> .item {
-			margin: 0;
-			padding: 0;
-			font-size: 0.9rem;
-		}
-	}
-}

app/app/styles/view/document/edit-tools.scss

@@ -0,0 +1,29 @@
+.edit-tools {
+	margin: 15px 0 0 20px;
+	min-height: 500px;
+}
+
+.content-linker-dialog {
+	width: 300px;
+	height: 400px;
+	overflow-y: auto;
+
+	.link-list {
+		margin: 0;
+		padding: 0;
+
+		.link-item {
+			margin: 0;
+			padding: 5px 0;
+			font-size: 0.9rem;
+			color: $color-gray;
+			cursor: pointer;
+
+			.icon {
+				margin-right: 5px;
+				height: 15px;
+				width: 15px;
+			}
+		}
+	}
+}

app/app/styles/widget/widget-checkbox.scss

@@ -0,0 +1,21 @@
+.checkbox-option {
+	vertical-align: bottom;
+	cursor: pointer;
+	font-size: 0.9rem;
+	overflow: hidden;
+	white-space: nowrap;
+
+	> .material-icons {
+		font-size: 0.9rem;
+		vertical-align: top;
+		margin-right: 5px;
+	}
+
+	&:hover {
+		color: $color-link;
+	}
+}
+
+.checkbox-option-selected {
+	color: $color-link;
+}

app/app/styles/widget/widget.scss

@@ -17,11 +17,11 @@
 }
 
 .transition-shadow {
-    transition: box-shadow .25s;
+	transition: box-shadow 0.25s;
 }
 
 .transition-all {
-    transition: all .25s;
+	transition: all 0.25s;
 }
 
 .z-depth-0 {
@@ -40,7 +40,8 @@
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-.z-depth-1-half { /* used on hover states */
+.z-depth-1-half {
+	/* used on hover states */
 	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 
@@ -59,7 +60,6 @@
 .z-depth-5 {
 	box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
-
 @import "widget-avatar";
 @import "widget-button";
 @import "widget-card";
@@ -70,3 +70,4 @@
 @import "widget-sidebar-menu";
 @import "widget-table";
 @import "widget-tooltip";
+@import "widget-checkbox";

app/app/templates/components/document/edit-tools.hbs

@@ -0,0 +1,44 @@
+<div class="edit-tools">
+
+	<div class="square-button-mono button-gray" id="content-linker-button" data-tooltip="Insert content link" data-tooltip-position="left middle">
+		<i class="material-icons color-white">link</i>
+	</div>
+
+	{{#dropdown-dialog target="content-linker-button" focusOn="content-linker-search" position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
+		<div class="content-linker-dialog">
+			<form>
+				<div class="input-control">
+					<label>Insert Link</label>
+					<div class="tip">Choose content below or search</div>
+					{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search"}}
+				</div>
+				{{#if hasSections}}
+					<ul class="link-list">
+						{{#each candidates.pages as |p|}}
+							<li class="link-item" {{ action 'setSelection' p }}>
+								{{#ui/ui-checkbox selected=p.selected}}
+									{{p.title}}
+								{{/ui/ui-checkbox}}
+							</li>
+						{{/each}}
+					</ul>
+				{{/if}}
+				{{#if hasAttachments}}
+					<ul class="link-list">
+						{{#each candidates.attachments as |a|}}
+							<li class="link-item" {{ action 'setSelection' a }}>
+								{{#ui/ui-checkbox selected=a.selected}}
+									<img class="icon" src="/assets/img/attachments/{{document/file-icon a.attachmentExtension}}" />
+									{{ a.title }}
+								{{/ui/ui-checkbox}}
+							</li>
+						{{/each}}
+					</ul>
+				{{/if}}
+				<div class="hide regular-button button-blue pull-right" {{ action 'onInsertLink' }}>Insert</div>
+				<div class="hide clearfix" />
+			</form>
+		</div>
+	{{/dropdown-dialog}}
+
+</div>

app/app/templates/components/folder/folders-list.hbs

@@ -4,12 +4,7 @@
 			<i class="material-icons color-gray">close</i>
 		</div>
 
-		{{folder/start-document
+		{{folder/start-document savedTemplates=savedTemplates folder=folder editor=folderService.canEditCurrentFolder onEditTemplate=(action 'onEditTemplate') onDocumentTemplate=(action 'onDocumentTemplate')}}
-			savedTemplates=savedTemplates
-			folder=folder
-			editor=folderService.canEditCurrentFolder
-			onEditTemplate=(action 'onEditTemplate')
-			onDocumentTemplate=(action 'onDocumentTemplate')}}
 	{{/if}}
 
 	{{#if showScrollTool}}
@@ -92,8 +87,6 @@
 	{{/if}}
 </div>
 
-
-
 <div class="copyright hidden-xs hidden-sm">
 	<a href="https://documize.com?ref=app-footer" target="_blank">Copyright&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
 </div>

app/app/templates/components/link/content-linker.hbs

@@ -1,21 +0,0 @@
-<div class="content-linker">
-	<form>
-		<div class="input-control">
-			<label>Insert Link</label>
-			<div class="tip">Give the link a clickable name</div>
-			{{focus-input type="input" value=linkName}}
-		</div>
-		{{#if hasSections}}
-			<div class="input-control">
-				{{ui-select id="content-linker-section-list" content=candidates.pages action=(action (mut selection)) prompt="Link to existing section" optionValuePath="id" optionLabelPath="title" }}
-			</div>
-		{{/if}}
-		{{#if hasAttachments}}
-			<div class="input-control">
-				{{ui-select id="content-linker-attachment-list" content=candidates.attachments action=(action (mut selection)) prompt="Link to file attachment" optionValuePath="id" optionLabelPath="title" }}
-			</div>
-		{{/if}}
-		<div class="regular-button button-blue pull-right" {{ action 'onInsertLink' }}>Insert</div>
-		<div class="clearfix" />
-	</form>
-</div>

app/app/templates/components/section/wysiwyg/type-editor.hbs

@@ -1,10 +1,11 @@
 {{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
-	<div class="{{if showSidebar 'width-70' 'width-100'}} pull-left">
+
+	<div class="pull-left width-96">
 		{{focus-textarea value=pageBody id="rich-text-editor" class="mousetrap"}}
 	</div>
 
-	<div class="{{if showSidebar 'width-30' 'no-display'}} pull-left">
+	<div class="pull-left">
-		{{link/content-linker document=document folder=folder page=page linkName=linkName onInsertLink=(action 'onInsertLink')}}
+		{{document/edit-tools document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
 	</div>
 
 {{/section/base-editor}}

app/app/templates/components/ui/ui-checkbox.hbs

@@ -0,0 +1,8 @@
+<div class="checkbox-option {{if selected 'checkbox-option-selected'}}">
+	{{#if selected}}
+		<i class="material-icons checkbox-option-selected">radio_button_checked</i>
+	{{else}}
+		<i class="material-icons">radio_button_unchecked</i>
+	{{/if}}
+	{{yield}}
+</div>

core/api/endpoint/link_endpoint.go

@@ -99,6 +99,7 @@ func GetLinkCandidates(w http.ResponseWriter, r *http.Request) {
 			AttachmentID:        f.RefID,
 			LinkType:            "file",
 			Title:               f.Filename,
+			AttachmentExtension: f.Extension,
 		}
 
 		fc = append(fc, c)

core/api/entity/objects.go

@@ -348,10 +348,11 @@ type Link struct {
 	BaseEntity
 	OrgID        string `json:"orgId"`
 	UserID       string `json:"userId"`
+	LinkType     string `json:"linkType"`
 	SourceID     string `json:"sourceId"`
 	DocumentID   string `json:"documentId"`
 	PageID       string `json:"pageId"`
-	LinkType   string `json:"linkType"`
+	AttachmentID string `json:"attachmentId"`
 	Orphan       bool   `json:"orphan"`
 }
 
@@ -359,10 +360,11 @@ type Link struct {
 type LinkCandidate struct {
 	RefID               string `json:"id"`
 	OrgID               string `json:"orgId"`
+	LinkType            string `json:"linkType"`
 	DocumentID          string `json:"documentId"`
 	PageID              string `json:"pageId"`
 	AttachmentID        string `json:"attachmentId"`
-	LinkType     string `json:"linkType"`
+	AttachmentExtension string `json:"attachmentExtension"`
 	Title               string `json:"title"`   // what we label the link
 	Context             string `json:"context"` // additional context (e.g. excerpt, parent)
 }

core/api/request/link.go

@@ -136,3 +136,30 @@ func (p *Persister) DeleteLink(id string) (rows int64, err error) {
 //
 // 	return
 // }
+//
+// package main
+//
+// import (
+// 	"fmt"
+// 	"regexp"
+// )
+//
+// var imgRE = regexp.MustCompile(`<a[^>]+\bhref=["']([^"']+)["']`)
+//
+// func findImages(htm string) []string {
+// 	imgs := imgRE.FindAllStringSubmatch(htm, -1)
+// 	out := make([]string, len(imgs))
+// 	for i := range out {
+// 		out[i] = imgs[i][1]
+// 	}
+// 	return out
+// }
+//
+// func main() {
+// 	fmt.Printf("%q", findImages(data))
+// }
+//
+// const data = `
+// <p>dfdfdf</p><a href="/link/section/34354"><x><z?>
+// <a czx zcxz href='/link/file/file.exe'><x><z?>
+// `