Merge branch 'release/4.3.1'

Minor maintenance release containing some bug fixes and minor feature improvements.

Summary
- Significant cleanup of the CKEditor plugin used for the `HtmlViewComponent` (acecc86)
- Fixes a major bug which prevented topics with an empty `TopicListViewComponent` from being saved (d12e3d4)
- Addresses a confusing user interface decision where a removed attribute value would continue to be displayed as placeholder text (752f9da)

CKEditor
- Removed extraneous toolbars (110a9ac, 619360e), and tidied up the formatting and layout of the default toolbar (6fdf1a3, 37d06d3, 168b6ce)
- Removed features that shouldn't be used in most cases, such as underline (2e60363), custom fonts (6056f01), and duplicate buttons (33f88a0)
- Removed all customer-oriented customizations and styles (74712c0); these can now be overwritten on a per client basis
- Removed out-of-the-box Spell Check As You Type (SCAYT), in favor of browser default spell check (a4790fe, 3bb9de4)
- Removed commented out items that weren't being actively used (f997f5e, 8ad4bb3)
- Cleaned up formatting of files and introduced modern commenting and indentation standards (99c9eb9, 9ee289e, 452fd19)
- Fixed some issues with the default stylesheet (3175936, 2c02393, b3966c5)

Bug Fixes
- Fixed but where removing an empty `TopicListViewComponent` from the interface would break ASP.NET Core data binding (af5e765)
- Updated `InheritedAttributes` to use values from the `DerivedTopic` so that when a value is deleted, it doesn't reappear as a placheolder (15ea21f)
- Updated the `::placeholder` pseudoclass so it's clearer what is an explicitly defined value and what is an inherited value (c56c188)

OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/TopicList/Default.cshtml

@@ -8,11 +8,15 @@
 
 @if (Model.TopicList.Count > 1) {
   <select
-    asp-for                       ="Value"
-    asp-items                     ="Model.TopicList"
-    class                         ="@Model.AttributeDescriptor.CssClass form-control form-inline"
-    disabled                      =@(!Model.AttributeDescriptor.IsEnabled)
-    required                      =@Model.AttributeDescriptor.IsRequired
-    >
+    asp-for                     ="Value"
+    asp-items                   ="Model.TopicList"
+    class                       ="@Model.AttributeDescriptor.CssClass form-control form-inline"
+    disabled                    =@(!Model.AttributeDescriptor.IsEnabled)
+    required                    =@Model.AttributeDescriptor.IsRequired>
   </select>
+}
+else {
+  <input type="hidden" asp-for="AttributeDescriptor.Key" />
+  <input type="hidden" asp-for="AttributeDescriptor.ContentType" />
+  <input type="hidden" asp-for="Value" />
 }

OnTopic.Editor.AspNetCore/Controllers/EditorController.cs

@@ -176,7 +176,10 @@ bool isModal
         }
 
         //Set inherited attribute value, if available
-        topicViewModel.InheritedAttributes.Add(attribute.Key, isNew? null : CurrentTopic.Attributes.GetValue(attribute.Key));
+        topicViewModel.InheritedAttributes.Add(
+          attribute.Key,
+          isNew? null : CurrentTopic.DerivedTopic?.Attributes.GetValue(attribute.Key)
+        );
 
       }
 

OnTopic.Editor.AspNetCore/OnTopic.Editor.AspNetCore.csproj

@@ -26,7 +26,7 @@
 
   <ItemGroup>
     <FrameworkReference Include="Microsoft.AspNetCore.App" />
-    <PackageReference Include="GitVersionTask" Version="5.3.5">
+    <PackageReference Include="GitVersionTask" Version="5.3.7">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>

OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/CustomConfig.js

@@ -1,81 +1,82 @@
+/*==============================================================================================================================
+| Author        Ignia, LLC
+| Client        Ignia, LLC
+| Project       OnTopic Editor
+\=============================================================================================================================*/
 /*
 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
+/*==============================================================================================================================
+| METHOD: EDITOR CONFIG
+\-----------------------------------------------------------------------------------------------------------------------------*/
+/**
+ * Provides configuration settings for CKEditor.
+ */
 CKEDITOR.editorConfig = function( config ) {
-//Define changes to default configuration here. For example:
-//config.language = 'fr';
-//config.uiColor = '#AADC6E';
-//config.extraPlugins           = 'a11ychecker';
-  config.removePlugins          = 'autosave';
+  config.removePlugins          = 'autosave,scayt';
   config.allowedContent         = true;
   config.baseHref               = '/';
   config.skin                   = 'moono-lisa';
-//config.uiColor                = '#CFCFCF';
-//config.height                 = '515px';
-//config.resize_maxHeight       = '800';
   config.resize_maxWidth        = '800';
   config.fillEmptyBlocks        = false;
   config.shiftEnterMode         = CKEDITOR.ENTER_BR;
   config.contentsCss            = '/_content/OnTopic.Editor.AspNetCore/Shared/Styles/CKEditor.css';
+  config.disableNativeSpellChecker = false;
   config.toolbar                = [
-    { name: 'document', items: [ 'Source' ] },
-    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste',  '-', 'Undo', 'Redo' ] },
-    { name: 'blocks', items: [ 'ShowBlocks', 'RemoveFormat' ] },
-    { name: 'editing', items: [ 'Scayt' ] },
-    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
-    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
+    {
+      name                      : 'document',
+      items                     : ['Source']
+    },
+    {
+      name                      : 'clipboard',
+      items                     : ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste']
+    },
+    {
+      name                      : 'blocks',
+      items                     : ['ShowBlocks', 'RemoveFormat']
+    },
+    {
+      name                      : 'links',
+      items                     : ['Link', 'Unlink', 'Anchor']
+    },
+    {
+      name                      : 'insert',
+      items                     : ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
+    },
     '/',
-    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
-    { name: 'position', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'Outdent', 'Indent' ] },
-    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
-    '/',
-    { name: 'styles', items: ['Styles', 'Format'] },
-    { name: 'tools', items: [ 'Find', 'Replace', 'SelectAll', 'Maximize' ] }
+    {
+      name                      : 'styles',
+      items                     : ['Format']
+    },
+    {
+      name                      : 'basicstyles',
+      items                     : ['Bold', 'Italic', 'Strike', 'Subscript', 'Superscript']
+    },
+    {
+      name                      : 'position',
+      items                     : ['JustifyLeft', 'JustifyCenter', 'JustifyRight']
+    },
+    {
+      name                      : 'paragraph',
+      items                     : ['NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', 'Blockquote']
+    },
+    {
+      name                      : 'tools',
+      items                     : ['Find', 'Replace', 'SelectAll', 'Maximize']
+    }
   ];
   config.toolbarCanCollapse     = true;
-  config.toolbar_Full           = [
-    ['Source','-','Save','NewPage','Preview','-','Templates'],
-    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
-    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
-    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
-    '/',
-    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
-    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
-    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
-    ['Link','Unlink','Anchor'],
-    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
-    '/',
-    ['Styles','Format','Font','FontSize'],
-    ['TextColor','BGColor'],
-    ['Maximize', 'ShowBlocks','-','About']
-    ];
-  config.toolbar_Basic          = [
-    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
-    ];
-  config.toolbar_OnTopic        = [
-    ['Preview','Source','Undo','Redo','ShowBlocks','RemoveFormat'],
-    ['Bold','Italic','Cut','Copy','Paste','PasteText','Scayt'],
-    ['Styles'], //,'Format'
-    '/',
-    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Outdent','Indent'],
-    ['NumberedList','BulletedList','Link','Unlink','Anchor'],
-    ['CreateDiv','Image','Table','HorizontalRule','SpecialChar'],
-    ['Find','Replace','SelectAll','Maximize'],
-    ];
-//Set font names
-  config.font_names             =
-    'Tahoma/Tahoma, Arial/Arial, sans-serif;'           +
-    'Times New Roman/Times New Roman, Times, serif;'    +
-    'Verdana';
-//Call external styles set definition for Styles dropdown menu
-  config.stylesCombo_stylesSet  = 'OnTopicStyleSet:/_content/OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/StylesSet.js';
-//Set classes for styles defined in styles set
   config.bodyClass              = 'CKEPanel';
-
 };
 
+/*==============================================================================================================================
+| METHOD: INSTANCE READY
+\-----------------------------------------------------------------------------------------------------------------------------*/
+/**
+ * Provides late binding rules to initialize once the editor instance is ready.
+ */
 CKEDITOR.on('instanceReady', function (ev) {
   var blockTags = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'ul', 'ol', 'li', 'br'];
   var rules = {

OnTopic.Editor.AspNetCore/Shared/Styles/Base/_forms.scss

@@ -156,11 +156,18 @@ section.attribute input.error {
 // SUPPORTING STYLES
 //----------------------------------------------------------------------------------------------
 .instructions {
-  font-size: rem-calc(16);
-  font-style: italic;
-  color: $grey-medium;
-
+  font-size                     : rem-calc(16);
+  font-style                    : italic;
+  color                         : $grey-medium;
   &.error {
-    color: $red;
+    color                       : $red;
   }
+}
+
+//----------------------------------------------------------------------------------------------
+// PLACEHOLDERS
+//----------------------------------------------------------------------------------------------
+::placeholder,
+::-webkit-input-placeholder {
+  color                         : $grey-lighter !important;
 }

OnTopic.Editor.AspNetCore/Shared/Styles/CKEditor.scss

@@ -1,33 +1,50 @@
-@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
+//==============================================================================================
+// CKEDITOR
+//----------------------------------------------------------------------------------------------
+// Custom stylesheet to be used within the CKEditor. As this implementation should be
+// implementation agnostic, this defines a very basic set of style preferences. In practice, we
+// expect most implementions will want to establish a custom configuration, style set, and style
+// sheet for CKEditor, thus overriding this implementation.
+//==============================================================================================
+
+//----------------------------------------------------------------------------------------------
+// FONTS
+//----------------------------------------------------------------------------------------------
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
+
+//----------------------------------------------------------------------------------------------
+// BODY
+//----------------------------------------------------------------------------------------------
 body {
-  background-color: #FFF;
-  font-family: "Lato", Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  color: #333;
-}
+  background-color              : #FFF;
+  font-family                   : "Lato", Helvetica, Arial, sans-serif;
+  font-size                     : 16px;
+  color                         : #333;
+}
+
+//----------------------------------------------------------------------------------------------
+// HEADINGS
+//----------------------------------------------------------------------------------------------
 h1,
 h2,
 h3 {
-  font-family: "Lato Light", Helvetica, Arial, sans-serif;
+  font-weight                   : 300;
 }
 h1 {
-  font-size: 32px;
+  font-size                     : 32px;
 }
 h2 {
-  font-size: 28px;
+  font-size                     : 28px;
 }
 h3 {
-  font-size: 24px;
+  font-size                     : 24px;
 }
 h4 {
-  font-size: 18px;
+  font-size                     : 18px;
 }
 h5 {
-  font-size: 16px;
+  font-size                     : 16px;
 }
 h6 {
-  font-size: 14px;
-}
-.Heading {
-  font-family: "Lato", Helvetica, Arial, sans-serif;
+  font-size                     : 14px;
 }