@stratusjs/angular 0.4.5 → 0.4.7

package/src/editor/link-dialog.component.ts

@@ -93,9 +93,11 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
     // TODO: Move this to its own AutoComplete Component
     // AutoComplete Data
     apiBase = '/Api/Content'
-    contentEntities: any[] = []
+    contentEntities: ContentEntity[] = []
+    contentEntity: ContentEntity
     dialogContentForm: FormGroup
     isContentLoading = true
+    isSingleContentLoading = false
     lastContentQuery: string
 
     // Pagination Data
@@ -119,10 +121,10 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
 
     // User Input
     content: ContentEntity
-    linkType: string = ''
-    linkText: string = ''
-    linkURL: string = ''
-    linkTarget: boolean = false
+    linkType = ''
+    linkText = ''
+    linkURL = ''
+    linkTarget = false
 
     // Icon Localization
     svgIcons: {
@@ -234,7 +236,9 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
 
         // Populate Data from Froala Element
         this.linkType = this.element && this.element.hasAttribute('data-content-id') ? 'content' : 'url'
-        this.dialogContentForm.get('linkTypeRadio').patchValue(this.linkType)
+        this.dialogContentForm
+            .get('linkTypeRadio')
+            .patchValue(this.linkType)
 
         // Subscribe to Link Text Input Field
         this.dialogContentForm
@@ -247,7 +251,9 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
 
         // Populate Data from Froala Element
         this.linkText = this.element ? this.element.textContent : ''
-        this.dialogContentForm.get('linkTextInput').patchValue(this.linkText)
+        this.dialogContentForm
+            .get('linkTextInput')
+            .patchValue(this.linkText)
 
         // Subscribe to Link Text Input Field
         this.dialogContentForm
@@ -260,7 +266,9 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
 
         // Populate Data from Froala Element
         this.linkURL = this.element && this.element.hasAttribute('href') ? this.element.getAttribute('href') : ''
-        this.dialogContentForm.get('linkURLInput').patchValue(this.linkURL)
+        this.dialogContentForm
+            .get('linkURLInput')
+            .patchValue(this.linkURL)
 
         // Subscribe to Link Target Checkbox Field
         this.dialogContentForm
@@ -273,7 +281,41 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
 
         // Populate Data from Froala Element
         this.linkTarget = this.element ? this.element.hasAttribute('target') : false
-        this.dialogContentForm.get('linkTargetCheckbox').patchValue(this.linkTarget)
+        this.dialogContentForm
+            .get('linkTargetCheckbox')
+            .patchValue(this.linkTarget)
+
+        // Hydrate Selected Content
+        if (this.element && this.element.hasAttribute('data-content-id')) {
+            this.isSingleContentLoading = true
+            this.backend
+                .get(
+                    this.getQueryUrl(
+                        null,
+                        this.element.getAttribute('data-content-id')
+                    )
+                )
+                .pipe(
+                    finalize(() => this.isSingleContentLoading = false),
+                )
+                .subscribe((response: HttpResponse<Convoy<ContentEntity>>) => {
+                    if (!response.ok || response.status !== 200 || _.isEmpty(response.body)) {
+                        return null
+                    }
+                    const payload = _.get(response.body, 'payload') || response.body
+                    if (_.isEmpty(payload) || Array.isArray(payload) || !_.isObject(payload)) {
+                        return null
+                    }
+                    // @ts-ignore
+                    this.contentEntity = payload
+                    this.isSingleContentLoading = false
+                    this.dialogContentForm
+                        .get('contentSelectorInput')
+                        .patchValue(this.contentEntity)
+                    this.refresh()
+                    return this.contentEntity
+                })
+        }
 
         // Mark as complete
         this.isInitialized = true
@@ -306,9 +348,10 @@ export class LinkDialogComponent extends ResponsiveComponent implements OnInit,
         )
     }
 
-    getQueryUrl(query?: string): string {
+    getQueryUrl(query?: string, id?: string|number): string {
         query = (!_.isString(query) || _.isEmpty(query)) ? '' : `"${query}"`
-        return `${this.apiBase}?limit=${this.limit}&options[isContent]=null&options[isCollection]=null&options[showRoutable]=true&options[showRouting]=true&q=${query}`
+        id = _.isEmpty(id) ? '' : `/${id}`
+        return `${this.apiBase}${id}?limit=${this.limit}&options[isContent]=null&options[isCollection]=null&options[showRoutable]=true&options[showRouting]=true&q=${query}`
     }
 
     getQuery(query?: string): Observable<HttpResponse<any>> {

package/src/froala/plugins/citationManager.css

@@ -4,20 +4,31 @@
 .editor-component stratus-citation {
   position: relative;
   display: inline-block;
-  counter-increment: stratus-citation-counter;
-  color: transparent;
   border-style: dotted;
   border-color: cornflowerblue;
+  border-width: 2px;
+  color: #f85b3b; /* handle generic color better */
   cursor: pointer;
-  height: 20px;
-  width: 20px;
-  overflow: hidden;
+  min-height: 17px;
+  min-width: 20px;
+}
+.editor-component stratus-citation stratus-citation-content {
+  display: none;
+}
+.editor-component stratus-citation stratus-citation-title {
+  display: block;
+  position: relative;
+  top: -4px;
+  margin-bottom: -6px;
+  padding-top: 4px;
+  padding-right: 1px;
+  font-size: 0.75em;
 }
-.editor-component stratus-citation::before {
+.editor-component stratus-citation stratus-citation-notitle::before {
+  counter-increment: stratus-citation-counter;
   content: counter(stratus-citation-counter);
   position: absolute;
   left: 2px;
   font-size: 0.75em;
-  color: #f85b3b; /* handle generic color better */
 }
 /*# sourceMappingURL=citationManager.css.map */

package/src/froala/plugins/citationManager.css.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/angular/src/froala/plugins/citationManager.scss"],"names":[],"mappings":"AAAA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA","file":"citationManager.css","sourcesContent":[".editor-component {\n  counter-reset: stratus-citation-counter;\n  stratus-citation {\n    position: relative;\n    display: inline-block;\n    counter-increment: stratus-citation-counter;\n    color: transparent;\n    border-style: dotted;\n    border-color: cornflowerblue;\n    cursor: pointer;\n    height: 20px;\n    width: 20px;\n    overflow: hidden;\n    &::before {\n      content: counter(stratus-citation-counter);\n      position: absolute;\n      left: 2px;\n      font-size: 0.75em;\n      color: #f85b3b; /* handle generic color better */\n    }\n  }\n}\n"]}
+{"version":3,"sources":["packages/angular/src/froala/plugins/citationManager.scss"],"names":[],"mappings":"AAAA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"citationManager.css","sourcesContent":[".editor-component {\n  counter-reset: stratus-citation-counter;\n  stratus-citation {\n    position: relative;\n    display: inline-block;\n    border-style: dotted;\n    border-color: cornflowerblue;\n    border-width: 2px;\n    color: #f85b3b; /* handle generic color better */\n    cursor: pointer;\n    min-height: 17px;\n    min-width: 20px;\n    stratus-citation-content {\n      display: none;\n    }\n    stratus-citation-title {\n      display: block;\n      position: relative;\n      top: -4px;\n      margin-bottom: -6px;\n      padding-top: 4px;\n      padding-right: 1px;\n      font-size: 0.75em;\n    }\n    stratus-citation-notitle::before {\n      counter-increment: stratus-citation-counter;\n      content: counter(stratus-citation-counter);\n      position: absolute;\n      left: 2px;\n      font-size: 0.75em;\n    }\n  }\n}\n"]}

package/src/froala/plugins/citationManager.js

@@ -1,6 +1,6 @@
-System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@stratusjs/angular/froala/plugins/inputButton", "froala-editor"], function (exports_1, context_1) {
+System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "lodash", "@stratusjs/angular/froala/plugins/inputButton", "froala-editor"], function (exports_1, context_1) {
     "use strict";
-    var environment_1, stratus_1, inputButton_1, froala_editor_1, systemDir, moduleName, parentModuleName, min, localDir;
+    var environment_1, stratus_1, lodash_1, inputButton_1, froala_editor_1, systemDir, moduleName, parentModuleName, min, localDir;
     var __moduleName = context_1 && context_1.id;
     return {
         setters: [
@@ -10,6 +10,9 @@ System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@
             function (stratus_1_1) {
                 stratus_1 = stratus_1_1;
             },
+            function (lodash_1_1) {
+                lodash_1 = lodash_1_1;
+            },
             function (inputButton_1_1) {
                 inputButton_1 = inputButton_1_1;
             },
@@ -23,12 +26,15 @@ System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@
             parentModuleName = 'froala/plugins';
             min = !environment_1.cookie('env') ? '.min' : '';
             localDir = `${stratus_1.Stratus.BaseUrl}${boot.configuration.paths[`${systemDir}/*`].replace(/[^/]*$/, '')}`;
-            froala_editor_1.default.DEFAULTS = Object.assign(froala_editor_1.default.DEFAULTS, {
-                endpoint: '/Api/Content'
+            lodash_1.extend(froala_editor_1.default.POPUP_TEMPLATES, {
+                'citationManager.toolbar': '[_BUTTONS_]'
+            });
+            lodash_1.extend(froala_editor_1.default.DEFAULTS, {
+                citationToolbarButtons: ['citationEdit', 'citationDelete']
             });
             froala_editor_1.default.PLUGINS.citationManager = function citationManager(editor) {
                 let inputButton;
-                const debug = true;
+                const debug = false;
                 function _init() {
                     stratus_1.Stratus.Internals.CssLoader(`${localDir}${parentModuleName}/${moduleName}${min}.css`);
                     inputButton = new inputButton_1.InputButtonPlugin({
@@ -41,10 +47,19 @@ System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@
                     });
                     if (debug) {
                         console.log('initialized:', {
-                            options: editor.opts.endpoint,
                             instance: this
                         });
                     }
+                    editor.events.on('click', (clickEvent) => {
+                        if (clickEvent.hasOwnProperty('target') &&
+                            (clickEvent.target.nodeName === 'STRATUS-CITATION' ||
+                                clickEvent.target.nodeName === 'STRATUS-CITATION-TITLE')) {
+                            const citation = getSelectedCitation();
+                            if (citation) {
+                                editor.citationManager.showToolbar(clickEvent, citation);
+                            }
+                        }
+                    });
                 }
                 function onClick() {
                     if (!editor.el) {
@@ -53,12 +68,80 @@ System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@
                     }
                     inputButton.onClick(editor.el);
                 }
+                function getSelectedCitation() {
+                    let containedElement = editor.selection.endElement();
+                    if (containedElement.tagName === 'STRATUS-CITATION') {
+                        return containedElement;
+                    }
+                    containedElement = editor.selection.element();
+                    if (containedElement.tagName === 'STRATUS-CITATION') {
+                        return containedElement;
+                    }
+                    containedElement = containedElement.parentElement;
+                    if (containedElement.tagName === 'STRATUS-CITATION') {
+                        return containedElement;
+                    }
+                    return null;
+                }
+                function getLastKnownCitation() {
+                    return editor.citationManager.lastCitation || null;
+                }
+                function setLastKnownCitation(el) {
+                    editor.citationManager.lastCitation = el;
+                }
+                function initToolbar() {
+                    let citationToolbarButtons = '';
+                    if (editor.opts.citationToolbarButtons.length > 1) {
+                        citationToolbarButtons += '<div class="fr-buttons">';
+                        citationToolbarButtons += editor.button.buildList(editor.opts.citationToolbarButtons);
+                        citationToolbarButtons += '</div>';
+                    }
+                    const template = {
+                        buttons: citationToolbarButtons
+                    };
+                    return editor.popups.create('citationManager.toolbar', template);
+                }
+                function showToolbar(clickEvent, citation) {
+                    const popup = editor.popups.get('citationManager.toolbar');
+                    if (!popup)
+                        initToolbar();
+                    editor.popups.setContainer('citationManager.toolbar', editor.$tb);
+                    const btn = editor.$tb.find('.fr-command[data-cmd="myButton"]');
+                    const left = clickEvent.pageX;
+                    const top = clickEvent.pageY;
+                    editor.popups.show('citationManager.toolbar', left, top, btn.outerHeight());
+                    editor.citationManager.setLastKnownCitation(citation);
+                }
+                function hideToolbar() {
+                    editor.citationManager.setLastKnownCitation(null);
+                    editor.popups.hide('citationManager.toolbar');
+                }
                 return {
                     _init,
-                    onClick
+                    onClick,
+                    showToolbar,
+                    hideToolbar,
+                    getSelectedCitation,
+                    getLastKnownCitation,
+                    setLastKnownCitation
                 };
             };
-            froala_editor_1.default.RegisterCommand('citationManager', {
+            froala_editor_1.default.DefineIcon('citationDelete', { NAME: 'citationDelete', SVG_KEY: 'remove' });
+            froala_editor_1.default.RegisterCommand('citationDelete', {
+                title: 'Delete Citation',
+                undo: false,
+                focus: false,
+                callback() {
+                    const containedElement = this.citationManager.getSelectedCitation();
+                    if (containedElement) {
+                        containedElement.remove();
+                    }
+                    this.citationManager.hideToolbar();
+                }
+            });
+            froala_editor_1.default.DefineIcon('citationManager', { NAME: 'citationManager', SVG_KEY: 'imageCaption' });
+            froala_editor_1.default.RegisterCommand('citationInsert', {
+                icon: 'citationManager',
                 title: 'Insert Citation',
                 undo: false,
                 focus: false,
@@ -72,7 +155,21 @@ System.register(["@stratusjs/core/environment", "@stratusjs/runtime/stratus", "@
                 },
                 plugin: 'citationManager',
             });
-            froala_editor_1.default.DefineIcon('citationManager', { NAME: 'folder', SVG_KEY: 'imageCaption' });
+            froala_editor_1.default.RegisterCommand('citationEdit', {
+                icon: 'citationManager',
+                title: 'Edit Citation',
+                undo: false,
+                focus: false,
+                modal: true,
+                callback(cmd, _val, _params) {
+                    const debug = false;
+                    if (debug) {
+                        console.log('clicked:', this.citationManager);
+                    }
+                    this.citationManager.onClick();
+                },
+                plugin: 'citationManager',
+            });
             froala_editor_1.default.RegisterQuickInsertButton('citation', {
                 icon: 'citationManager',
                 title: 'Insert Citation',

package/src/froala/plugins/citationManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["citationManager.ts"],"names":[],"mappings":"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","file":"citationManager.js"}
+{"version":3,"sources":["citationManager.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;YAaM,SAAS,GAAG,oBAAoB,CAAA;YAChC,UAAU,GAAG,iBAAiB,CAAA;YAC9B,gBAAgB,GAAG,gBAAgB,CAAA;YAGnC,GAAG,GAAG,CAAC,oBAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;YAClC,QAAQ,GAAG,GAAG,iBAAO,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAA;YAGxG,eAAM,CAAC,uBAAY,CAAC,eAAe,EAAC;gBAChC,yBAAyB,EAAE,aAAa;aAC3C,CAAC,CAAA;YAGF,eAAM,CAAC,uBAAY,CAAC,QAAQ,EAAC;gBACzB,sBAAsB,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC;aAC7D,CAAC,CAAA;YAKF,uBAAY,CAAC,OAAO,CAAC,eAAe,GAAG,SAAS,eAAe,CAAC,MAAW;gBACvE,IAAI,WAA8B,CAAA;gBAElC,MAAM,KAAK,GAAG,KAAK,CAAA;gBAGnB,SAAS,KAAK;oBACV,iBAAO,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,QAAQ,GAAG,gBAAgB,IAAI,UAAU,GAAG,GAAG,MAAM,CAAC,CAAA;oBACrF,WAAW,GAAG,IAAI,+BAAiB,CAAC;wBAChC,IAAI,EAAE,kBAAkB;wBACxB,SAAS,EAAE,gBAAgB;wBAC3B,MAAM;wBACN,iBAAiB,EAAE,IAAI;wBACvB,oBAAoB,EAAE,IAAI;wBAC1B,KAAK;qBACR,CAAC,CAAA;oBAEF,IAAI,KAAK,EAAE;wBACP,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;4BACxB,QAAQ,EAAE,IAAI;yBACjB,CAAC,CAAA;qBACL;oBAMD,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,UAAsB,EAAE,EAAE;wBACjD,IACI,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC;4BAEnC,CACK,UAAU,CAAC,MAAkB,CAAC,QAAQ,KAAK,kBAAkB;gCAC7D,UAAU,CAAC,MAAkB,CAAC,QAAQ,KAAK,wBAAwB,CACvE,EACH;4BACE,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAA;4BACtC,IAAI,QAAQ,EAAE;gCACV,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;6BAC3D;yBACJ;oBACL,CAAC,CAAC,CAAA;gBACN,CAAC;gBAED,SAAS,OAAO;oBACZ,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;wBACZ,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAA;wBACjE,OAAM;qBACT;oBACD,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;gBAClC,CAAC;gBAED,SAAS,mBAAmB;oBACxB,IAAI,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC,UAAU,EAAE,CAAA;oBACpD,IAAI,gBAAgB,CAAC,OAAO,KAAK,kBAAkB,EAAE;wBAEjD,OAAO,gBAAgB,CAAA;qBAC1B;oBAGD,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;oBAC7C,IAAI,gBAAgB,CAAC,OAAO,KAAK,kBAAkB,EAAE;wBAEjD,OAAO,gBAAgB,CAAA;qBAC1B;oBAID,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAA;oBACjD,IAAI,gBAAgB,CAAC,OAAO,KAAK,kBAAkB,EAAE;wBAEjD,OAAO,gBAAgB,CAAA;qBAC1B;oBAGD,OAAO,IAAI,CAAA;gBACf,CAAC;gBAED,SAAS,oBAAoB;oBAEzB,OAAO,MAAM,CAAC,eAAe,CAAC,YAAY,IAAI,IAAI,CAAA;gBACtD,CAAC;gBAED,SAAS,oBAAoB,CAAC,EAAkB;oBAE5C,MAAM,CAAC,eAAe,CAAC,YAAY,GAAG,EAAE,CAAA;gBAC5C,CAAC;gBAGD,SAAS,WAAW;oBAEhB,IAAI,sBAAsB,GAAG,EAAE,CAAA;oBAE/B,IAAI,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC/C,sBAAsB,IAAI,0BAA0B,CAAA;wBACpD,sBAAsB,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;wBACrF,sBAAsB,IAAI,QAAQ,CAAA;qBACrC;oBAED,MAAM,QAAQ,GAAG;wBACb,OAAO,EAAE,sBAAsB;qBAClC,CAAA;oBAED,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,yBAAyB,EAAE,QAAQ,CAAC,CAAA;gBACpE,CAAC;gBAGD,SAAS,WAAW,CAAC,UAAsB,EAAE,QAAiB;oBAE1D,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;oBAI1D,IAAI,CAAC,KAAK;wBAAE,WAAW,EAAE,CAAA;oBAGzB,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,yBAAyB,EAAE,MAAM,CAAC,GAAG,CAAC,CAAA;oBAKjE,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAA;oBAE/D,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAA;oBAC7B,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAA;oBAG5B,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,WAAW,EAAE,CAAC,CAAA;oBAE3E,MAAM,CAAC,eAAe,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAA;gBACzD,CAAC;gBAGD,SAAS,WAAW;oBAChB,MAAM,CAAC,eAAe,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAA;oBACjD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA;gBACjD,CAAC;gBAKD,OAAO;oBAEH,KAAK;oBACL,OAAO;oBACP,WAAW;oBACX,WAAW;oBACX,mBAAmB;oBACnB,oBAAoB;oBACpB,oBAAoB;iBACvB,CAAA;YACL,CAAC,CAAA;YASD,uBAAY,CAAC,UAAU,CAAC,gBAAgB,EAAC,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,EAAC,CAAC,CAAA;YACrF,uBAAY,CAAC,eAAe,CAAC,gBAAgB,EAAE;gBAC3C,KAAK,EAAE,iBAAiB;gBACxB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,QAAQ;oBAEJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAA;oBACnE,IAAI,gBAAgB,EAAE;wBACjB,gBAA4B,CAAC,MAAM,EAAE,CAAA;qBACzC;oBACD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAA;gBACtC,CAAC;aACJ,CAAC,CAAA;YAGF,uBAAY,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAC,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,cAAc,EAAC,CAAC,CAAA;YAI9F,uBAAY,CAAC,eAAe,CAAC,gBAAgB,EAAE;gBAC3C,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,iBAAiB;gBACxB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,IAAI;gBACX,QAAQ,CAAC,GAAY,EAAE,IAAa,EAAE,OAAgB;oBAIlD,MAAM,KAAK,GAAG,KAAK,CAAA;oBACnB,IAAI,KAAK,EAAE;wBACP,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;qBAChD;oBACD,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAA;gBAClC,CAAC;gBACD,MAAM,EAAE,iBAAiB;aAC5B,CAAC,CAAA;YAGF,uBAAY,CAAC,eAAe,CAAC,cAAc,EAAE;gBACzC,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,IAAI;gBACX,QAAQ,CAAC,GAAY,EAAE,IAAa,EAAE,OAAgB;oBAClD,MAAM,KAAK,GAAG,KAAK,CAAA;oBACnB,IAAI,KAAK,EAAE;wBACP,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;qBAChD;oBACD,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAA;gBAClC,CAAC;gBACD,MAAM,EAAE,iBAAiB;aAC5B,CAAC,CAAA;YAKF,uBAAY,CAAC,yBAAyB,CAAC,UAAU,EAAE;gBAE/C,IAAI,EAAE,iBAAiB;gBAGvB,KAAK,EAAE,iBAAiB;gBAGxB,QAAQ,EAAE,SAAS,uBAAuB;oBAEtC,MAAM,KAAK,GAAG,KAAK,CAAA;oBACnB,MAAM,WAAW,GAAG,IAAI,+BAAiB,CAAC;wBACtC,IAAI,EAAE,kBAAkB;wBACxB,SAAS,EAAE,gBAAgB;wBAE3B,MAAM,EAAE,IAAI;wBACZ,iBAAiB,EAAE,IAAI;wBACvB,oBAAoB,EAAE,IAAI;wBAC1B,KAAK;qBACR,CAAC,CAAA;oBACF,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;wBACV,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAA;wBACjE,OAAM;qBACT;oBACD,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAChC,CAAC;gBAGD,IAAI,EAAE,IAAI;aACb,CAAC,CAAA;QACF,CAAC","file":"citationManager.js"}

package/src/froala/plugins/citationManager.min.css

@@ -1 +1 @@
-.editor-component{counter-reset:stratus-citation-counter}.editor-component stratus-citation{position:relative;display:inline-block;counter-increment:stratus-citation-counter;color:transparent;border-style:dotted;border-color:#6495ed;cursor:pointer;height:20px;width:20px;overflow:hidden}.editor-component stratus-citation::before{content:counter(stratus-citation-counter);position:absolute;left:2px;font-size:.75em;color:#f85b3b}
+.editor-component{counter-reset:stratus-citation-counter}.editor-component stratus-citation{position:relative;display:inline-block;border-style:dotted;border-color:#6495ed;border-width:2px;color:#f85b3b;cursor:pointer;min-height:17px;min-width:20px}.editor-component stratus-citation stratus-citation-content{display:none}.editor-component stratus-citation stratus-citation-title{display:block;position:relative;top:-4px;margin-bottom:-6px;padding-top:4px;padding-right:1px;font-size:.75em}.editor-component stratus-citation stratus-citation-notitle::before{counter-increment:stratus-citation-counter;content:counter(stratus-citation-counter);position:absolute;left:2px;font-size:.75em}

package/src/froala/plugins/citationManager.min.js

@@ -1 +1 @@
-System.register(["@stratusjs/core/environment","@stratusjs/runtime/stratus","@stratusjs/angular/froala/plugins/inputButton","froala-editor"],function(t,n){"use strict";var e,i,a,o,u,r;n&&n.id;return{setters:[function(t){e=t},function(t){i=t},function(t){a=t},function(t){o=t}],execute:function(){"@stratusjs/angular","citationManager","froala/plugins",u=e.cookie("env")?"":".min",r=`${i.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^/]*$/,"")}`,o.default.DEFAULTS=Object.assign(o.default.DEFAULTS,{endpoint:"/Api/Content"}),o.default.PLUGINS.citationManager=function(t){let n;return{_init:function(){i.Stratus.Internals.CssLoader(`${r}froala/plugins/citationManager${u}.css`),n=new a.InputButtonPlugin({name:"Citation Manager",eventName:"citation-input",editor:t,autoSaveSelection:!0,autoRestoreSelection:!0,debug:true}),console.log("initialized:",{options:t.opts.endpoint,instance:this})},onClick:function(){t.el?n.onClick(t.el):console.warn("citationManager.onClick(): unable to find element")}}},o.default.RegisterCommand("citationManager",{title:"Insert Citation",undo:!1,focus:!1,modal:!0,callback(t,n,e){this.citationManager.onClick()},plugin:"citationManager"}),o.default.DefineIcon("citationManager",{NAME:"folder",SVG_KEY:"imageCaption"}),o.default.RegisterQuickInsertButton("citation",{icon:"citationManager",title:"Insert Citation",callback:function(){const t=new a.InputButtonPlugin({name:"Citation Manager",eventName:"citation-input",editor:this,autoSaveSelection:!0,autoRestoreSelection:!0,debug:!1});this.el?t.onClick(this.el):console.warn("citationManager.onClick(): unable to find element")},undo:!0})}}});
+System.register(["@stratusjs/core/environment","@stratusjs/runtime/stratus","lodash","@stratusjs/angular/froala/plugins/inputButton","froala-editor"],function(t,n){"use strict";var a,e,i,o,c,r,l;n&&n.id;return{setters:[function(t){a=t},function(t){e=t},function(t){i=t},function(t){o=t},function(t){c=t}],execute:function(){"@stratusjs/angular","citationManager","froala/plugins",r=a.cookie("env")?"":".min",l=`${e.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^/]*$/,"")}`,i.extend(c.default.POPUP_TEMPLATES,{"citationManager.toolbar":"[_BUTTONS_]"}),i.extend(c.default.DEFAULTS,{citationToolbarButtons:["citationEdit","citationDelete"]}),c.default.PLUGINS.citationManager=function(t){let n;function a(){let n=t.selection.endElement();return"STRATUS-CITATION"===n.tagName?n:(n=t.selection.element(),"STRATUS-CITATION"===n.tagName?n:(n=n.parentElement,"STRATUS-CITATION"===n.tagName?n:null))}return{_init:function(){e.Stratus.Internals.CssLoader(`${l}froala/plugins/citationManager${r}.css`),n=new o.InputButtonPlugin({name:"Citation Manager",eventName:"citation-input",editor:t,autoSaveSelection:!0,autoRestoreSelection:!0,debug:false}),t.events.on("click",n=>{if(n.hasOwnProperty("target")&&("STRATUS-CITATION"===n.target.nodeName||"STRATUS-CITATION-TITLE"===n.target.nodeName)){const e=a();e&&t.citationManager.showToolbar(n,e)}})},onClick:function(){t.el?n.onClick(t.el):console.warn("citationManager.onClick(): unable to find element")},showToolbar:function(n,a){t.popups.get("citationManager.toolbar")||function(){let n="";t.opts.citationToolbarButtons.length>1&&(n+='<div class="fr-buttons">',n+=t.button.buildList(t.opts.citationToolbarButtons),n+="</div>");const a={buttons:n};t.popups.create("citationManager.toolbar",a)}(),t.popups.setContainer("citationManager.toolbar",t.$tb);const e=t.$tb.find('.fr-command[data-cmd="myButton"]'),i=n.pageX,o=n.pageY;t.popups.show("citationManager.toolbar",i,o,e.outerHeight()),t.citationManager.setLastKnownCitation(a)},hideToolbar:function(){t.citationManager.setLastKnownCitation(null),t.popups.hide("citationManager.toolbar")},getSelectedCitation:a,getLastKnownCitation:function(){return t.citationManager.lastCitation||null},setLastKnownCitation:function(n){t.citationManager.lastCitation=n}}},c.default.DefineIcon("citationDelete",{NAME:"citationDelete",SVG_KEY:"remove"}),c.default.RegisterCommand("citationDelete",{title:"Delete Citation",undo:!1,focus:!1,callback(){const t=this.citationManager.getSelectedCitation();t&&t.remove(),this.citationManager.hideToolbar()}}),c.default.DefineIcon("citationManager",{NAME:"citationManager",SVG_KEY:"imageCaption"}),c.default.RegisterCommand("citationInsert",{icon:"citationManager",title:"Insert Citation",undo:!1,focus:!1,modal:!0,callback(t,n,a){this.citationManager.onClick()},plugin:"citationManager"}),c.default.RegisterCommand("citationEdit",{icon:"citationManager",title:"Edit Citation",undo:!1,focus:!1,modal:!0,callback(t,n,a){this.citationManager.onClick()},plugin:"citationManager"}),c.default.RegisterQuickInsertButton("citation",{icon:"citationManager",title:"Insert Citation",callback:function(){const t=new o.InputButtonPlugin({name:"Citation Manager",eventName:"citation-input",editor:this,autoSaveSelection:!0,autoRestoreSelection:!0,debug:!1});this.el?t.onClick(this.el):console.warn("citationManager.onClick(): unable to find element")},undo:!0})}}});

package/src/froala/plugins/citationManager.scss

@@ -3,20 +3,31 @@
   stratus-citation {
     position: relative;
     display: inline-block;
-    counter-increment: stratus-citation-counter;
-    color: transparent;
     border-style: dotted;
     border-color: cornflowerblue;
+    border-width: 2px;
+    color: #f85b3b; /* handle generic color better */
     cursor: pointer;
-    height: 20px;
-    width: 20px;
-    overflow: hidden;
-    &::before {
+    min-height: 17px;
+    min-width: 20px;
+    stratus-citation-content {
+      display: none;
+    }
+    stratus-citation-title {
+      display: block;
+      position: relative;
+      top: -4px;
+      margin-bottom: -6px;
+      padding-top: 4px;
+      padding-right: 1px;
+      font-size: 0.75em;
+    }
+    stratus-citation-notitle::before {
+      counter-increment: stratus-citation-counter;
       content: counter(stratus-citation-counter);
       position: absolute;
       left: 2px;
       font-size: 0.75em;
-      color: #f85b3b; /* handle generic color better */
     }
   }
 }

package/src/froala/plugins/citationManager.ts

@@ -1,5 +1,6 @@
 import {cookie} from '@stratusjs/core/environment'
 import {Stratus} from '@stratusjs/runtime/stratus'
+import {extend} from 'lodash'
 // Universal Button
 import {
     InputButtonPlugin
@@ -18,18 +19,23 @@ const parentModuleName = 'froala/plugins'
 const min = !cookie('env') ? '.min' : ''
 const localDir = `${Stratus.BaseUrl}${boot.configuration.paths[`${systemDir}/*`].replace(/[^/]*$/, '')}`
 
-// Plugin Options
-FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {
-    endpoint: '/Api/Content'
+// Define toolbar template.
+extend(FroalaEditor.POPUP_TEMPLATES,{
+    'citationManager.toolbar': '[_BUTTONS_]'
 })
 
-/**
+// Define toolbar buttons.
+extend(FroalaEditor.DEFAULTS,{
+    citationToolbarButtons: ['citationEdit', 'citationDelete']
+})
+
+/*
  * @param editor The Froala instance
  */
-FroalaEditor.PLUGINS.citationManager = function citationManager (editor: any) {
+FroalaEditor.PLUGINS.citationManager = function citationManager(editor: any) {
     let inputButton: InputButtonPlugin
 
-    const debug = true // needs false
+    const debug = false
 
     // When the plugin is initialized,this will be called.
     function _init() {
@@ -45,7 +51,6 @@ FroalaEditor.PLUGINS.citationManager = function citationManager (editor: any) {
 
         if (debug) {
             console.log('initialized:', {
-                options: editor.opts.endpoint,
                 instance: this
             })
         }
@@ -54,7 +59,21 @@ FroalaEditor.PLUGINS.citationManager = function citationManager (editor: any) {
         // editor.methodName(params);
 
         // Event listeners
-        // editor.events.add('contentChanged', function (params) {});
+        editor.events.on('click', (clickEvent: MouseEvent) => {
+            if (
+                clickEvent.hasOwnProperty('target') &&
+                // clickEvent.target.hasOwnProperty('nodeName') &&
+                (
+                    (clickEvent.target as Element).nodeName === 'STRATUS-CITATION' ||
+                    (clickEvent.target as Element).nodeName === 'STRATUS-CITATION-TITLE'
+                )
+            ) {
+                const citation = getSelectedCitation() // If citation isn't fully grabbed, will not attempt
+                if (citation) {
+                    editor.citationManager.showToolbar(clickEvent, citation)
+                }
+            }
+        })
     }
 
     function onClick() {
@@ -65,17 +84,136 @@ FroalaEditor.PLUGINS.citationManager = function citationManager (editor: any) {
         inputButton.onClick(editor.el)
     }
 
+    function getSelectedCitation(): Element | null {
+        let containedElement = editor.selection.endElement()
+        if (containedElement.tagName === 'STRATUS-CITATION') {
+            // console.log('returning endElement', containedElement.tagName)
+            return containedElement
+        }
+
+        // console.log('endElement was a ', containedElement.tagName, containedElement)
+        containedElement = editor.selection.element()
+        if (containedElement.tagName === 'STRATUS-CITATION') {
+            // console.log('returning element', containedElement.tagName)
+            return containedElement
+        }
+
+        // console.log('element was a ', containedElement.tagName, containedElement)
+        // Check the parent just to be sure
+        containedElement = containedElement.parentElement
+        if (containedElement.tagName === 'STRATUS-CITATION') {
+            // console.log('returning parent element', containedElement.tagName)
+            return containedElement
+        }
+        // console.log('parent element was a ', containedElement.tagName, containedElement, 'returning nothing')
+
+        return null
+    }
+
+    function getLastKnownCitation() {
+        // console.log('returning last citation', editor.citationManager.lastCitation)
+        return editor.citationManager.lastCitation || null
+    }
+
+    function setLastKnownCitation(el: Element | null) {
+        // console.log('setting last citation to', el)
+        editor.citationManager.lastCitation = el
+    }
+
+    // Create custom inline toolbar.
+    function initToolbar() {
+        // Toolbar buttons.
+        let citationToolbarButtons = ''
+        // Create the list of buttons.
+        if (editor.opts.citationToolbarButtons.length > 1) {
+            citationToolbarButtons += '<div class="fr-buttons">'
+            citationToolbarButtons += editor.button.buildList(editor.opts.citationToolbarButtons)
+            citationToolbarButtons += '</div>'
+        }
+        // Load popup template.
+        const template = {
+            buttons: citationToolbarButtons
+        }
+        // Create popup.
+        return editor.popups.create('citationManager.toolbar', template)
+    }
+
+    // Show the toolbar
+    function showToolbar(clickEvent: MouseEvent, citation: Element) {
+        // Get the popup object defined above.
+        const popup = editor.popups.get('citationManager.toolbar')
+        // If popup doesn't exist then create it.
+        // To improve performance it is best to create the popup when it is first needed
+        // and not when the editor is initialized.
+        if (!popup) initToolbar()
+
+        // Set the editor toolbar as the popup's container.
+        editor.popups.setContainer('citationManager.toolbar', editor.$tb)
+        // This will trigger the refresh event assigned to the popup.
+        // editor.popups.refresh('citationManager.toolbar');
+        // This custom popup is opened by pressing a button from the editor's toolbar.
+        // Get the button's object in order to place the popup relative to it.
+        const btn = editor.$tb.find('.fr-command[data-cmd="myButton"]')
+        // Set the popup's position.
+        const left = clickEvent.pageX
+        const top = clickEvent.pageY
+        // Show the custom toolbar.
+        // The button's outerHeight is required in case the popup needs to be displayed above it.
+        editor.popups.show('citationManager.toolbar', left, top, btn.outerHeight())
+        // Hold onto this lastKnown for the dialog to use -this- element
+        editor.citationManager.setLastKnownCitation(citation)
+    }
+
+    // Hide the custom popup.
+    function hideToolbar() {
+        editor.citationManager.setLastKnownCitation(null)
+        editor.popups.hide('citationManager.toolbar')
+    }
+
     // Expose public methods.
     // Public methods can be accessed through the editor API:
     // editor.myPlugin.publicMethod();
     return {
         // If _init is not public then the plugin won't be initialized.
         _init,
-        onClick
+        onClick,
+        showToolbar,
+        hideToolbar,
+        getSelectedCitation,
+        getLastKnownCitation,
+        setLastKnownCitation
     }
 }
+export type CitationManager = {
+    hideToolbar(): void
+    showToolbar(): void
+    getSelectedCitation(): Element | null
+    getLastKnownCitation(): Element | null
+    setLastKnownCitation(el: Element | null): void
+}
+
+FroalaEditor.DefineIcon('citationDelete',{NAME: 'citationDelete', SVG_KEY: 'remove'})
+FroalaEditor.RegisterCommand('citationDelete', {
+    title: 'Delete Citation',
+    undo: false,
+    focus: false,
+    callback() {
+        /// only grab the selectedCitation
+        const containedElement = this.citationManager.getSelectedCitation()
+        if (containedElement) {
+            (containedElement as Element).remove()
+        }
+        this.citationManager.hideToolbar()
+    }
+})
 
-FroalaEditor.RegisterCommand('citationManager', {
+// Define button icons
+FroalaEditor.DefineIcon('citationManager', {NAME: 'citationManager', SVG_KEY: 'imageCaption'})
+// See https://froala.com/wysiwyg-editor/docs/concepts/custom/icon/ for making new icons
+
+// Define a insert button
+FroalaEditor.RegisterCommand('citationInsert', {
+    icon: 'citationManager',
     title: 'Insert Citation',
     undo: false,
     focus: false,
@@ -93,9 +231,24 @@ FroalaEditor.RegisterCommand('citationManager', {
     plugin: 'citationManager',
 })
 
-// Define button icons
-FroalaEditor.DefineIcon('citationManager', {NAME: 'folder', SVG_KEY: 'imageCaption'})
-// See https://froala.com/wysiwyg-editor/docs/concepts/custom/icon/ for making new icons
+// Define a edit button
+FroalaEditor.RegisterCommand('citationEdit', {
+    icon: 'citationManager',
+    title: 'Edit Citation',
+    undo: false,
+    focus: false,
+    modal: true,
+    callback(cmd: unknown, _val: unknown, _params: unknown) {
+        const debug = false
+        if (debug) {
+            console.log('clicked:', this.citationManager)
+        }
+        this.citationManager.onClick()
+    },
+    plugin: 'citationManager',
+})
+
+
 
 // Define a quick insert button
 FroalaEditor.RegisterQuickInsertButton('citation', {

package/src/tree/tree-dialog.component.html

@@ -56,7 +56,7 @@
                               #auto="matAutocomplete"
                               [displayWith]="displayContentText">
                 <mat-option *ngIf="isContentLoading" class="is-loading">
-                    <mat-spinner diameter="50"></mat-spinner>
+                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                 </mat-option>
                 <ng-container *ngIf="!isContentLoading">
                     <!-- TODO: Modify to filteredContentModels|async which should improve responsiveness -->