Added migration file.

[bookstack] / resources / assets / js / directives.js

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index e5c390ad22074ebc97246ea1b161359ede593b38..8813eb88183383c57f01923ad6d86d9d30276904 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -1,306 +1,513 @@
 "use strict";
 "use strict";

-var DropZone = require('dropzone');
-var markdown = require('marked');
-
-var toggleSwitchTemplate = require('./components/toggle-switch.html');
-var imagePickerTemplate = require('./components/image-picker.html');
-var dropZoneTemplate = require('./components/drop-zone.html');
+const MarkdownIt = require("markdown-it");
+const mdTasksLists = require('markdown-it-task-lists');
+const code = require('./code');

 
 module.exports = function (ngApp, events) {
 
     /**
 
 module.exports = function (ngApp, events) {
 
     /**

-     * Toggle Switches
-     * Has basic on/off functionality.
-     * Use string values of 'true' & 'false' to dictate the current state.
+     * TinyMCE
+     * An angular wrapper around the tinyMCE editor.

      */
      */

-    ngApp.directive('toggleSwitch', function () {
+    ngApp.directive('tinymce', ['$timeout', function ($timeout) {

         return {
         return {

-            restrict: 'E',
-            template: toggleSwitchTemplate,
-            scope: true,
+            restrict: 'A',
+            scope: {
+                tinymce: '=',
+                mceModel: '=',
+                mceChange: '='
+            },

             link: function (scope, element, attrs) {
             link: function (scope, element, attrs) {

-                scope.name = attrs.name;
-                scope.value = attrs.value;
-                scope.isActive = scope.value == true && scope.value != 'false';
-                scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
-
-                scope.switch = function () {
-                    scope.isActive = !scope.isActive;
-                    scope.value = scope.isActive ? 'true' : 'false';
+
+                function tinyMceSetup(editor) {
+                    editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
+                        let content = editor.getContent();
+                        $timeout(() => {
+                            scope.mceModel = content;
+                        });
+                        scope.mceChange(content);
+                    });
+
+                    editor.on('keydown', (event) => {
+                        scope.$emit('editor-keydown', event);
+                    });
+
+                    editor.on('init', (e) => {
+                        scope.mceModel = editor.getContent();
+                    });
+
+                    scope.$on('html-update', (event, value) => {
+                        editor.setContent(value);
+                        editor.selection.select(editor.getBody(), true);
+                        editor.selection.collapse(false);
+                        scope.mceModel = editor.getContent();
+                    });

                 }
 
                 }
 

+                scope.tinymce.extraSetups.push(tinyMceSetup);
+                tinymce.init(scope.tinymce);

             }
             }

-        };
-    });
+        }
+    }]);

 
 

+    const md = new MarkdownIt({html: true});
+    md.use(mdTasksLists, {label: true});

 
     /**
 
     /**

-     * Image Picker
-     * Is a simple front-end interface that connects to an ImageManager if present.
+     * Markdown input
+     * Handles the logic for just the editor input field.

      */
      */

-    ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
+    ngApp.directive('markdownInput', ['$timeout', function ($timeout) {

         return {
         return {

-            restrict: 'E',
-            template: imagePickerTemplate,
+            restrict: 'A',

             scope: {
             scope: {

-                name: '@',
-                resizeHeight: '@',
-                resizeWidth: '@',
-                resizeCrop: '@',
-                showRemove: '=',
-                currentImage: '@',
-                currentId: '@',
-                defaultImage: '@',
-                imageClass: '@'
+                mdModel: '=',
+                mdChange: '='

             },
             link: function (scope, element, attrs) {
             },
             link: function (scope, element, attrs) {

-                var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
-                scope.image = scope.currentImage;
-                scope.value = scope.currentImage || '';
-                if (usingIds) scope.value = scope.currentId;
-
-                function setImage(imageModel, imageUrl) {
-                    scope.image = imageUrl;
-                    scope.value = usingIds ? imageModel.id : imageUrl;
-                }

 
 

-                scope.reset = function () {
-                    setImage({id: 0}, scope.defaultImage);
+                // Codemirror Setup
+                element = element.find('textarea').first();
+                let cm = code.markdownEditor(element[0]);
+
+                // Custom key commands
+                let metaKey = code.getMetaKey();
+                const extraKeys = {};
+                // Insert Image shortcut
+                extraKeys[`${metaKey}-Alt-I`] = function(cm) {
+                    let selectedText = cm.getSelection();
+                    let newText = `![${selectedText}](http://)`;
+                    let cursorPos = cm.getCursor('from');
+                    cm.replaceSelection(newText);
+                    cm.setCursor(cursorPos.line, cursorPos.ch + newText.length -1);

                 };
                 };

+                // Save draft
+                extraKeys[`${metaKey}-S`] = function(cm) {scope.$emit('save-draft');};
+                // Show link selector
+                extraKeys[`Shift-${metaKey}-K`] = function(cm) {showLinkSelector()};
+                // Insert Link
+                extraKeys[`${metaKey}-K`] = function(cm) {insertLink()};
+                // FormatShortcuts
+                extraKeys[`${metaKey}-1`] = function(cm) {replaceLineStart('##');};
+                extraKeys[`${metaKey}-2`] = function(cm) {replaceLineStart('###');};
+                extraKeys[`${metaKey}-3`] = function(cm) {replaceLineStart('####');};
+                extraKeys[`${metaKey}-4`] = function(cm) {replaceLineStart('#####');};
+                extraKeys[`${metaKey}-5`] = function(cm) {replaceLineStart('');};
+                extraKeys[`${metaKey}-d`] = function(cm) {replaceLineStart('');};
+                extraKeys[`${metaKey}-6`] = function(cm) {replaceLineStart('>');};
+                extraKeys[`${metaKey}-q`] = function(cm) {replaceLineStart('>');};
+                extraKeys[`${metaKey}-7`] = function(cm) {wrapSelection('\n```\n', '\n```');};
+                extraKeys[`${metaKey}-8`] = function(cm) {wrapSelection('`', '`');};
+                extraKeys[`Shift-${metaKey}-E`] = function(cm) {wrapSelection('`', '`');};
+                extraKeys[`${metaKey}-9`] = function(cm) {wrapSelection('<p class="callout info">', '</div>');};
+                cm.setOption('extraKeys', extraKeys);
+
+                // Update data on content change
+                cm.on('change', (instance, changeObj) => {
+                    update(instance);
+                });

 
 

-                scope.remove = function () {
-                    scope.image = 'none';
-                    scope.value = 'none';
-                };
+                // Handle scroll to sync display view
+                cm.on('scroll', instance => {
+                    // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
+                    let scroll = instance.getScrollInfo();
+                    let atEnd = scroll.top + scroll.clientHeight === scroll.height;
+                    if (atEnd) {
+                        scope.$emit('markdown-scroll', -1);
+                        return;
+                    }
+                    let lineNum = instance.lineAtHeight(scroll.top, 'local');
+                    let range = instance.getRange({line: 0, ch: null}, {line: lineNum, ch: null});
+                    let parser = new DOMParser();
+                    let doc = parser.parseFromString(md.render(range), 'text/html');
+                    let totalLines = doc.documentElement.querySelectorAll('body > *');
+                    scope.$emit('markdown-scroll', totalLines.length);
+                });

 
 

-                scope.showImageManager = function () {
-                    imageManagerService.show((image) => {
-                        scope.updateImageFromModel(image);
-                    });
-                };
+                // Handle image paste
+                cm.on('paste', (cm, event) => {
+                    if (!event.clipboardData || !event.clipboardData.items) return;
+                    for (let i = 0; i < event.clipboardData.items.length; i++) {
+                        uploadImage(event.clipboardData.items[i].getAsFile());
+                    }
+                });

 
 

-                scope.updateImageFromModel = function (model) {
-                    var isResized = scope.resizeWidth && scope.resizeHeight;
+                // Handle images on drag-drop
+                cm.on('drop', (cm, event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    let cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
+                    cm.setCursor(cursorPos);
+                    if (!event.dataTransfer || !event.dataTransfer.files) return;
+                    for (let i = 0; i < event.dataTransfer.files.length; i++) {
+                        uploadImage(event.dataTransfer.files[i]);
+                    }
+                });

 
 

-                    if (!isResized) {
-                        scope.$apply(() => {
-                            setImage(model, model.url);
-                        });
+                // Helper to replace editor content
+                function replaceContent(search, replace) {
+                    let text = cm.getValue();
+                    let cursor = cm.listSelections();
+                    cm.setValue(text.replace(search, replace));
+                    cm.setSelections(cursor);
+                }
+
+                // Helper to replace the start of the line
+                function replaceLineStart(newStart) {
+                    let cursor = cm.getCursor();
+                    let lineContent = cm.getLine(cursor.line);
+                    let lineLen = lineContent.length;
+                    let lineStart = lineContent.split(' ')[0];
+
+                    // Remove symbol if already set
+                    if (lineStart === newStart) {
+                        lineContent = lineContent.replace(`${newStart} `, '');
+                        cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
+                        cm.setCursor({line: cursor.line, ch: cursor.ch - (newStart.length + 1)});

                         return;
                     }
 
                         return;
                     }
 

-                    var cropped = scope.resizeCrop ? 'true' : 'false';
-                    var requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
-                    $http.get(requestString).then((response) => {
-                        setImage(model, response.data.url);
-                    });
-                };
+                    let alreadySymbol = /^[#>`]/.test(lineStart);
+                    let posDif = 0;
+                    if (alreadySymbol) {
+                        posDif = newStart.length - lineStart.length;
+                        lineContent = lineContent.replace(lineStart, newStart).trim();
+                    } else if (newStart !== '') {
+                        posDif = newStart.length + 1;
+                        lineContent = newStart + ' ' + lineContent;
+                    }
+                    cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
+                    cm.setCursor({line: cursor.line, ch: cursor.ch + posDif});
+                }

 
 

-            }
-        };
-    }]);
+                function wrapLine(start, end) {
+                    let cursor = cm.getCursor();
+                    let lineContent = cm.getLine(cursor.line);
+                    let lineLen = lineContent.length;
+                    let newLineContent = lineContent;

 
 

-    /**
-     * DropZone
-     * Used for uploading images
-     */
-    ngApp.directive('dropZone', [function () {
-        return {
-            restrict: 'E',
-            template: dropZoneTemplate,
-            scope: {
-                uploadUrl: '@',
-                eventSuccess: '=',
-                eventError: '=',
-                uploadedTo: '@'
-            },
-            link: function (scope, element, attrs) {
-                var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
-                    url: scope.uploadUrl,
-                    init: function () {
-                        var dz = this;
-                        dz.on('sending', function (file, xhr, data) {
-                            var token = window.document.querySelector('meta[name=token]').getAttribute('content');
-                            data.append('_token', token);
-                            var uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
-                            data.append('uploaded_to', uploadedTo);
-                        });
-                        if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
-                        dz.on('success', function (file, data) {
-                            $(file.previewElement).fadeOut(400, function () {
-                                dz.removeFile(file);
-                            });
-                        });
-                        if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
-                        dz.on('error', function (file, errorMessage, xhr) {
-                            console.log(errorMessage);
-                            console.log(xhr);
-                            function setMessage(message) {
-                                $(file.previewElement).find('[data-dz-errormessage]').text(message);
-                            }
+                    if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) {
+                        newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
+                    } else {
+                        newLineContent = `${start}${lineContent}${end}`;
+                    }

 
 

-                            if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
-                            if (errorMessage.file) setMessage(errorMessage.file[0]);
+                    cm.replaceRange(newLineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
+                    cm.setCursor({line: cursor.line, ch: cursor.ch + (newLineContent.length - lineLen)});
+                }

 
 

-                        });
+                function wrapSelection(start, end) {
+                    let selection = cm.getSelection();
+                    if (selection === '') return wrapLine(start, end);
+                    let newSelection = selection;
+                    let frontDiff = 0;
+                    let endDiff = 0;
+
+                    if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) {
+                        newSelection = selection.slice(start.length, selection.length - end.length);
+                        endDiff = -(end.length + start.length);
+                    } else {
+                        newSelection = `${start}${selection}${end}`;
+                        endDiff = start.length + end.length;

                     }
                     }

-                });
-            }
-        };
-    }]);
-

 
 

-    ngApp.directive('dropdown', [function () {
-        return {
-            restrict: 'A',
-            link: function (scope, element, attrs) {
-                var menu = element.find('ul');
-                element.find('[dropdown-toggle]').on('click', function () {
-                    menu.show().addClass('anim menuIn');
-                    element.mouseleave(function () {
-                        menu.hide();
-                        menu.removeClass('anim menuIn');
-                    });
-                });
-            }
-        };
-    }]);
+                    let selections = cm.listSelections()[0];
+                    cm.replaceSelection(newSelection);
+                    let headFirst = selections.head.ch <= selections.anchor.ch;
+                    selections.head.ch += headFirst ? frontDiff : endDiff;
+                    selections.anchor.ch += headFirst ? endDiff : frontDiff;
+                    cm.setSelections([selections]);
+                }

 
 

-    ngApp.directive('tinymce', ['$timeout', function($timeout) {
-        return {
-            restrict: 'A',
-            scope: {
-                tinymce: '=',
-                mceModel: '=',
-                mceChange: '='
-            },
-            link: function (scope, element, attrs) {
+                // Handle image upload and add image into markdown content
+                function uploadImage(file) {
+                    if (file === null || file.type.indexOf('image') !== 0) return;
+                    let ext = 'png';

 
 

-                function tinyMceSetup(editor) {
-                    editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
-                        var content = editor.getContent();
-                        $timeout(() => {
-                            scope.mceModel = content;
-                        });
-                        scope.mceChange(content);
-                    });
+                    if (file.name) {
+                        let fileNameMatches = file.name.match(/\.(.+)$/);
+                        if (fileNameMatches.length > 1) ext = fileNameMatches[1];
+                    }

 
 

-                    editor.on('init', (e) => {
-                        scope.mceModel = editor.getContent();
+                    // Insert image into markdown
+                    let id = "image-" + Math.random().toString(16).slice(2);
+                    let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
+                    let selectedText = cm.getSelection();
+                    let placeHolderText = `![${selectedText}](${placeholderImage})`;
+                    cm.replaceSelection(placeHolderText);
+
+                    let remoteFilename = "image-" + Date.now() + "." + ext;
+                    let formData = new FormData();
+                    formData.append('file', file, remoteFilename);
+
+                    window.$http.post('/images/gallery/upload', formData).then(resp => {
+                        replaceContent(placeholderImage, resp.data.thumbs.display);
+                    }).catch(err => {
+                        events.emit('error', trans('errors.image_upload_error'));
+                        replaceContent(placeHolderText, selectedText);
+                        console.log(err);

                     });
                     });

+                }

 
 

-                    scope.$on('html-update', (event, value) => {
-                        editor.setContent(value);
-                        editor.selection.select(editor.getBody(), true);
-                        editor.selection.collapse(false);
-                        scope.mceModel = editor.getContent();
+                // Show the popup link selector and insert a link when finished
+                function showLinkSelector() {
+                    let cursorPos = cm.getCursor('from');
+                    window.EntitySelectorPopup.show(entity => {
+                        let selectedText = cm.getSelection() || entity.name;
+                        let newText = `[${selectedText}](${entity.link})`;
+                        cm.focus();
+                        cm.replaceSelection(newText);
+                        cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);

                     });
                 }
 
                     });
                 }
 

-                scope.tinymce.extraSetups.push(tinyMceSetup);
+                function insertLink() {
+                    let cursorPos = cm.getCursor('from');
+                    let selectedText = cm.getSelection() || '';
+                    let newText = `[${selectedText}]()`;
+                    cm.focus();
+                    cm.replaceSelection(newText);
+                    let cursorPosDiff = (selectedText === '') ? -3 : -1;
+                    cm.setCursor(cursorPos.line, cursorPos.ch + newText.length+cursorPosDiff);
+                }

 
 

-                // Custom tinyMCE plugins
-                tinymce.PluginManager.add('customhr', function(editor) {
-                    editor.addCommand('InsertHorizontalRule', function() {
-                        var hrElem = document.createElement('hr');
-                        var cNode = editor.selection.getNode();
-                        var parentNode = cNode.parentNode;
-                        parentNode.insertBefore(hrElem, cNode);
+                // Show the image manager and handle image insertion
+                function showImageManager() {
+                    let cursorPos = cm.getCursor('from');
+                    window.ImageManager.show(image => {
+                        let selectedText = cm.getSelection();
+                        let newText = "![" + (selectedText || image.name) + "](" + image.thumbs.display + ")";
+                        cm.focus();
+                        cm.replaceSelection(newText);
+                        cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);

                     });
                     });

+                }

 
 

-                    editor.addButton('hr', {
-                        icon: 'hr',
-                        tooltip: 'Horizontal line',
-                        cmd: 'InsertHorizontalRule'
+                // Update the data models and rendered output
+                function update(instance) {
+                    let content = instance.getValue();
+                    element.val(content);
+                    $timeout(() => {
+                        scope.mdModel = content;
+                        scope.mdChange(md.render(content));

                     });
                     });

+                }
+                update(cm);

 
 

-                    editor.addMenuItem('hr', {
-                        icon: 'hr',
-                        text: 'Horizontal line',
-                        cmd: 'InsertHorizontalRule',
-                        context: 'insert'
-                    });
+                // Listen to commands from parent scope
+                scope.$on('md-insert-link', showLinkSelector);
+                scope.$on('md-insert-image', showImageManager);
+                scope.$on('markdown-update', (event, value) => {
+                    cm.setValue(value);
+                    element.val(value);
+                    scope.mdModel = value;
+                    scope.mdChange(md.render(value));

                 });
 
                 });
 

-                tinymce.init(scope.tinymce);

             }
         }
     }]);
 
             }
         }
     }]);
 

-    ngApp.directive('markdownInput', ['$timeout', function($timeout) {
+    /**
+     * Markdown Editor
+     * Handles all functionality of the markdown editor.
+     */
+    ngApp.directive('markdownEditor', ['$timeout', '$rootScope', function ($timeout, $rootScope) {

         return {
             restrict: 'A',
         return {
             restrict: 'A',

-            scope: {
-                mdModel: '=',
-                mdChange: '='
-            },

             link: function (scope, element, attrs) {
 
             link: function (scope, element, attrs) {
 

-                // Set initial model content
-                var content = element.val();
-                scope.mdModel = content;
-                scope.mdChange(markdown(content));
+                // Editor Elements
+                const $display = element.find('.markdown-display').first();
+                const $insertImage = element.find('button[data-action="insertImage"]');
+                const $insertEntityLink = element.find('button[data-action="insertEntityLink"]');

 
 

-                element.on('change input', (e) => {
-                    content = element.val();
-                    $timeout(() => {
-                        scope.mdModel = content;
-                        scope.mdChange(markdown(content));
-                    });
+                // Prevent markdown display link click redirect
+                $display.on('click', 'a', function(event) {
+                    event.preventDefault();
+                    window.open(this.getAttribute('href'));

                 });
 
                 });
 

-                scope.$on('markdown-update', (event, value) => {
-                    element.val(value);
-                    scope.mdModel= value;
-                    scope.mdChange(markdown(value));
+                // Editor UI Actions
+                $insertEntityLink.click(e => {scope.$broadcast('md-insert-link');});
+                $insertImage.click(e => {scope.$broadcast('md-insert-image');});
+
+                // Handle scroll sync event from editor scroll
+                $rootScope.$on('markdown-scroll', (event, lineCount) => {
+                    let elems = $display[0].children[0].children;
+                    if (elems.length > lineCount) {
+                        let topElem = (lineCount === -1) ? elems[elems.length-1] : elems[lineCount];
+                        $display.animate({
+                            scrollTop: topElem.offsetTop
+                        }, {queue: false, duration: 200, easing: 'linear'});
+                    }

                 });
                 });

-

             }
         }
     }]);
 
             }
         }
     }]);
 

-    ngApp.directive('markdownEditor', ['$timeout', function($timeout) {
+    /**
+     * Page Editor Toolbox
+     * Controls all functionality for the sliding toolbox
+     * on the page edit view.
+     */
+    ngApp.directive('toolbox', [function () {

         return {
             restrict: 'A',
         return {
             restrict: 'A',

-            link: function (scope, element, attrs) {
+            link: function (scope, elem, attrs) {
+
+                // Get common elements
+                const $buttons = elem.find('[toolbox-tab-button]');
+                const $content = elem.find('[toolbox-tab-content]');
+                const $toggle = elem.find('[toolbox-toggle]');
+
+                // Handle toolbox toggle click
+                $toggle.click((e) => {
+                    elem.toggleClass('open');
+                });

 
 

-                // Elements
-                var input = element.find('textarea[markdown-input]');
-                var insertImage = element.find('button[data-action="insertImage"]');
+                // Set an active tab/content by name
+                function setActive(tabName, openToolbox) {
+                    $buttons.removeClass('active');
+                    $content.hide();
+                    $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
+                    $content.filter(`[toolbox-tab-content="${tabName}"]`).show();
+                    if (openToolbox) elem.addClass('open');
+                }

 
 

-                var currentCaretPos = 0;
+                // Set the first tab content active on load
+                setActive($content.first().attr('toolbox-tab-content'), false);

 
 

-                input.blur((event) => {
-                    currentCaretPos = input[0].selectionStart;
+                // Handle tab button click
+                $buttons.click(function (e) {
+                    let name = $(this).attr('toolbox-tab-button');
+                    setActive(name, true);

                 });
                 });

+            }
+        }
+    }]);

 
 

-                // Insert image shortcut
-                input.keydown((event) => {
-                    if (event.which === 73 && event.ctrlKey && event.shiftKey) {
-                        event.preventDefault();
-                        var caretPos = input[0].selectionStart;
-                        var currentContent = input.val();
-                        var mdImageText = "![](http://)";
-                        input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
-                        input.focus();
-                        input[0].selectionStart = caretPos + ("![](".length);
-                        input[0].selectionEnd = caretPos + ('![](http://'.length);
-                    }
+    ngApp.directive('commentReply', [function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'comment-reply.html',
+            scope: {
+              pageId: '=',
+              parentId: '=',
+              parent: '='
+            },
+            link: function (scope, element) {
+                scope.isReply = true;
+                element.find('textarea').focus();
+                scope.$on('evt.comment-success', function (event) {
+                    // no need for the event to do anything more.
+                    event.stopPropagation();
+                    event.preventDefault();
+                    scope.closeBox();

                 });
 
                 });
 

-                // Insert image from image manager
-                insertImage.click((event) => {
-                    window.ImageManager.showExternal((image) => {
-                        var caretPos = currentCaretPos;
-                        var currentContent = input.val();
-                        var mdImageText = "![" + image.name + "](" + image.url + ")";
-                        input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
-                        input.change();
-                    });
+                scope.closeBox = function () {
+                    element.remove();
+                    scope.$destroy();
+                };
+            }
+        };
+    }]);
+
+    ngApp.directive('commentEdit', [function () {
+         return {
+            restrict: 'E',
+            templateUrl: 'comment-reply.html',
+            scope: {
+              comment: '='
+            },
+            link: function (scope, element) {
+                scope.isEdit = true;
+                element.find('textarea').focus();
+                scope.$on('evt.comment-success', function (event, commentId) {
+                   // no need for the event to do anything more.
+                   event.stopPropagation();
+                   event.preventDefault();
+                   if (commentId === scope.comment.id && !scope.isNew) {
+                       scope.closeBox();
+                   }
+                });
+
+                scope.closeBox = function () {
+                    element.remove();
+                    scope.$destroy();
+                };
+            }
+        };
+    }]);
+
+
+    ngApp.directive('commentReplyLink', ['$document', '$compile', function ($document, $compile) {
+        return {
+            scope: {
+                comment: '='
+            },
+            link: function (scope, element, attr) {
+                element.on('$destroy', function () {
+                    element.off('click');
+                    scope.$destroy();

                 });
 
                 });
 

+                element.on('click', function (e) {
+                    e.preventDefault();
+                    var $container = element.parents('.comment-actions').first();
+                    if (!$container.length) {
+                        console.error('commentReplyLink directive should be placed inside a container with class comment-box!');
+                        return;
+                    }
+                    if (attr.noCommentReplyDupe) {
+                        removeDupe();
+                    }
+
+                    compileHtml($container, scope, attr.isReply === 'true');
+                });
+            }
+        };
+
+        function compileHtml($container, scope, isReply) {
+            let lnkFunc = null;
+            if (isReply) {
+                lnkFunc = $compile('<comment-reply page-id="comment.pageId" parent-id="comment.id" parent="comment"></comment-reply>');
+            } else {
+                lnkFunc = $compile('<comment-edit comment="comment"></comment-add>');
+            }
+            var compiledHTML = lnkFunc(scope);
+            $container.append(compiledHTML);
+        }
+
+        function removeDupe() {
+            let $existingElement = $document.find('.comments-list comment-reply, .comments-list comment-edit');
+            if (!$existingElement.length) {
+                return;

             }
             }

+
+            $existingElement.remove();

         }
         }

-    }])
+    }]);
+
+    ngApp.directive('commentDeleteLink', ['$window', function ($window) {
+        return {
+            controller: 'CommentDeleteController',
+            scope: {
+                comment: '='
+            },
+            link: function (scope, element, attr, ctrl) {
+
+                element.on('click', function(e) {
+                    e.preventDefault();
+                    var resp = $window.confirm(trans('entities.comment_delete_confirm'));
+                    if (!resp) {
+                        return;
+                    }

 
 

-};
\ No newline at end of file
+                    ctrl.delete(scope.comment);
+                });
+            }
+        };
+    }]);
+};