@oat-sa/tao-core-ui 3.13.5 → 3.15.0

package/dist/ckeditor/ckConfigurator.js

@@ -31,6 +31,7 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
     const originalConfig = _.cloneDeep(window.CKEDITOR.config);
     const moduleConfig = module.config();
     const furiganaPluginVisibilityKey = 'ckeditor/TaoFurigana';
+    const decorationsOn = !!(context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS);
     function getUserLanguage() {
       const documentLang = window.document.documentElement.getAttribute('lang');
       const documentLocale = documentLang && documentLang.split('-')[0];
@@ -130,7 +131,7 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
         }],
         htmlField: [{
           name: 'basicstyles',
-          items: ['Bold', 'Italic', 'Strike', 'Underline']
+          items: ['Bold', 'Italic', 'Underline']
         }, {
           name: 'exponent',
           items: ['Subscript', 'Superscript']
@@ -203,6 +204,24 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
             class: 'txt-underline'
           }
         },
+        coreStyles_strike: {
+          element: 'span',
+          attributes: {
+            class: 'txt-strike'
+          }
+        },
+        coreStyles_subscript: {
+          element: 'sub',
+          attributes: {
+            class: decorationsOn ? 'txt-subscript' : ''
+          }
+        },
+        coreStyles_superscript: {
+          element: 'sup',
+          attributes: {
+            class: decorationsOn ? 'txt-superscript' : ''
+          }
+        },
         coreStyles_highlight: {
           element: 'span',
           attributes: {
@@ -241,9 +260,11 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
         ckConfig.extraPlugins = function (positionedPluginArr, extraPlugins) {
           let pluginIndex = positionedPluginArr.length;
           let extraPluginArr = extraPlugins.split(',');
+          const NATIVE_BUTTONS = new Set(['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'numberedlist', 'bulletedlist', 'blockquote', 'justifyleft', 'justifycenter', 'justifyright', 'justifyblock', 'link', 'unlink', 'image', 'specialchar', 'format', 'font', 'fontsize', 'textcolor', 'language']);
           while (pluginIndex--) {
             positionedPluginArr[pluginIndex] = positionedPluginArr[pluginIndex].toLowerCase();
           }
+          positionedPluginArr = positionedPluginArr.filter(p => !NATIVE_BUTTONS.has(p));
           extraPluginArr = _.compact(_.union(extraPluginArr, positionedPluginArr));
           return extraPluginArr.join(',');
         }(_.keys(positionedPlugins), ckConfig.extraPlugins);
@@ -379,22 +400,27 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
               insertAfter: 'SpecialChar'
             };
           }
-          if (options.underline) {
-            positionedPlugins.TaoUnderline = {
+          if (decorationsOn) {
+            positionedPlugins.Strike = {
               insertAfter: 'Italic'
             };
-          }
-          if (options.highlight) {
             if (options.underline) {
-              positionedPlugins.TaoHighlight = {
-                insertAfter: 'TaoUnderline'
+              positionedPlugins.TaoUnderline = {
+                insertAfter: 'Strike'
               };
-            } else {
-              positionedPlugins.TaoHighlight = {
+            }
+          } else {
+            if (options.underline) {
+              positionedPlugins.Underline = {
                 insertAfter: 'Italic'
               };
             }
           }
+          if (options.highlight) {
+            positionedPlugins.TaoHighlight = {
+              insertAfter: decorationsOn && options.underline ? 'TaoUnderline' : options.underline ? 'Underline' : 'Italic'
+            };
+          }
           if (options.mathJax) {
             positionedPlugins.TaoQtiMaths = {
               insertAfter: 'SpecialChar'
@@ -458,7 +484,7 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
         }
 
         // forward the options to ckConfig, exclude local options
-        config = _.assign({}, _.cloneDeep(originalConfig), ckConfig, _.omit(options, ['qtiImage', 'qtiInclude', 'underline', 'highlight', 'mathJax', 'toolbar', 'positionedPlugins']));
+        config = _.assign({}, _.cloneDeep(originalConfig), ckConfig, _.omit(options, ['qtiImage', 'qtiInclude', 'underline', 'strike', 'highlight', 'mathJax', 'toolbar', 'positionedPlugins']));
 
         // debugger: has this config been used?
         //config.aaaConfigurationHasBeenLoadedFromConfigurator = true;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.13.5",
+    "version": "3.15.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/ckeditor/skins/tao/scss/editor.scss

@@ -96,6 +96,18 @@ legend.cke_voice_label {
   font-size : inherit;
 }
 
+.txt-dashed {
+  text-decoration: underline dashed;
+}
+
+.txt-wavy {
+  text-decoration: underline wavy;
+}
+
+.txt-strike {
+  text-decoration: line-through;
+}
+
 .txt-highlight {
   padding: 0 5px;
   background: #FF6416;

package/scss/inc/_base.scss

@@ -499,9 +499,44 @@ body {
         text-decoration: underline;
         font-size: inherit;
     }
-    .writing-mode-vertical-rl .txt-underline {
-        text-underline-position: right;
+    .txt-dashed {
+        text-decoration: underline dashed;
     }
+
+    .txt-wavy {
+        text-decoration: underline wavy;
+    }
+
+    .txt-strike {
+        text-decoration: line-through;
+    }
+
+    .writing-mode-vertical-rl {
+        .txt-dashed,
+        .txt-underline {
+            text-underline-offset: 0.2em;
+        }
+        .txt-underline {
+            text-underline-position: right;
+        }
+        .txt-subscript {
+            inset-block-start: -0.4em;
+            bottom: 0;
+        }
+        .txt-superscript {
+            inset-block-end: -0.4em;
+            top: 0;
+        }
+        .txt-underline,
+        .txt-dashed,
+        .txt-wavy {
+            ruby rt {
+                position: relative;
+                inset-block-start: -0.8em;
+            }
+        }
+    }
+
     .writing-mode-vertical-rl[data-useragent-browser='safari'] .txt-underline {
         // for Safari < 18.2 which doesn't support "text-underline-position: right"
         text-decoration: none;

package/src/ckeditor/ckConfigurator.js

@@ -29,6 +29,7 @@ import featuresService from 'services/features';
 const originalConfig = _.cloneDeep(window.CKEDITOR.config);
 const moduleConfig = module.config();
 const furiganaPluginVisibilityKey = 'ckeditor/TaoFurigana';
+const decorationsOn = !!(context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS);
 
 function getUserLanguage() {
     const documentLang = window.document.documentElement.getAttribute('lang');
@@ -61,7 +62,6 @@ const ckConfigurator = (function () {
             {
                 name: 'language',
                 items: ['Language']
-
             },
             {
                 name: 'styles',
@@ -69,7 +69,16 @@ const ckConfigurator = (function () {
             },
             {
                 name: 'paragraph',
-                items: ['NumberedList', 'BulletedList', '-', 'Blockquote', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
+                items: [
+                    'NumberedList',
+                    'BulletedList',
+                    '-',
+                    'Blockquote',
+                    'JustifyLeft',
+                    'JustifyCenter',
+                    'JustifyRight',
+                    'JustifyBlock'
+                ]
             },
             {
                 name: 'interactionsource',
@@ -174,7 +183,7 @@ const ckConfigurator = (function () {
         htmlField: [
             {
                 name: 'basicstyles',
-                items: ['Bold', 'Italic', 'Strike', 'Underline']
+                items: ['Bold', 'Italic', 'Underline']
             },
             {
                 name: 'exponent',
@@ -262,6 +271,20 @@ const ckConfigurator = (function () {
             element: 'span',
             attributes: { class: 'txt-underline' }
         },
+        coreStyles_strike: {
+            element: 'span',
+            attributes: {
+                class: 'txt-strike'
+            }
+        },
+        coreStyles_subscript: {
+            element: 'sub',
+            attributes: { class: decorationsOn ? 'txt-subscript' : ''}
+        },
+        coreStyles_superscript: {
+            element: 'sup',
+            attributes: { class: decorationsOn ? 'txt-superscript': '' }
+        },
         coreStyles_highlight: {
             element: 'span',
             attributes: { class: 'txt-highlight' }
@@ -515,13 +538,22 @@ const ckConfigurator = (function () {
             let pluginIndex = positionedPluginArr.length;
             let extraPluginArr = extraPlugins.split(',');
 
+            const NATIVE_BUTTONS = new Set([
+                'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript',
+                'numberedlist', 'bulletedlist', 'blockquote',
+                'justifyleft', 'justifycenter', 'justifyright', 'justifyblock',
+                'link', 'unlink', 'image', 'specialchar', 'format', 'font', 'fontsize', 'textcolor', 'language'
+            ]);
+
             while (pluginIndex--) {
                 positionedPluginArr[pluginIndex] = positionedPluginArr[pluginIndex].toLowerCase();
             }
 
+            positionedPluginArr = positionedPluginArr.filter(p => !NATIVE_BUTTONS.has(p));
+
             extraPluginArr = _.compact(_.union(extraPluginArr, positionedPluginArr));
             return extraPluginArr.join(',');
-        })(_.keys(positionedPlugins), ckConfig.extraPlugins);
+        }(_.keys(positionedPlugins), ckConfig.extraPlugins));
 
         // capture line breaks (/) and such
         // and turn them into a objects temporarily
@@ -655,16 +687,21 @@ const ckConfigurator = (function () {
             if (options.qtiInclude) {
                 positionedPlugins.TaoQtiInclude = { insertAfter: 'SpecialChar' };
             }
-            if (options.underline) {
-                positionedPlugins.TaoUnderline = { insertAfter: 'Italic' };
-            }
-            if (options.highlight) {
+            if (decorationsOn) {
+                positionedPlugins.Strike = { insertAfter: 'Italic' };
                 if (options.underline) {
-                    positionedPlugins.TaoHighlight = { insertAfter: 'TaoUnderline' };
-                } else {
-                    positionedPlugins.TaoHighlight = { insertAfter: 'Italic' };
+                    positionedPlugins.TaoUnderline = { insertAfter: 'Strike' };
+                }
+            } else {
+                if (options.underline) {
+                    positionedPlugins.Underline = { insertAfter: 'Italic' };
                 }
             }
+            if (options.highlight) {
+                positionedPlugins.TaoHighlight = {
+                    insertAfter: (decorationsOn && options.underline) ? 'TaoUnderline' : (options.underline ? 'Underline' : 'Italic')
+                };
+            }
             if (options.mathJax) {
                 positionedPlugins.TaoQtiMaths = { insertAfter: 'SpecialChar' };
             }
@@ -725,6 +762,7 @@ const ckConfigurator = (function () {
                 'qtiImage',
                 'qtiInclude',
                 'underline',
+                'strike',
                 'highlight',
                 'mathJax',
                 'toolbar',

package/src/css/basic.css

@@ -1462,9 +1462,38 @@ html .txt-underline {
   text-decoration: underline;
   font-size: inherit;
 }
+html .txt-dashed {
+  -webkit-text-decoration: underline dashed;
+          text-decoration: underline dashed;
+}
+html .txt-wavy {
+  -webkit-text-decoration: underline wavy;
+          text-decoration: underline wavy;
+}
+html .txt-strike {
+  text-decoration: line-through;
+}
+html .writing-mode-vertical-rl .txt-dashed,
+html .writing-mode-vertical-rl .txt-underline {
+  text-underline-offset: 0.2em;
+}
 html .writing-mode-vertical-rl .txt-underline {
   text-underline-position: right;
 }
+html .writing-mode-vertical-rl .txt-subscript {
+  inset-block-start: -0.4em;
+  bottom: 0;
+}
+html .writing-mode-vertical-rl .txt-superscript {
+  inset-block-end: -0.4em;
+  top: 0;
+}
+html .writing-mode-vertical-rl .txt-underline ruby rt,
+html .writing-mode-vertical-rl .txt-dashed ruby rt,
+html .writing-mode-vertical-rl .txt-wavy ruby rt {
+  position: relative;
+  inset-block-start: -0.8em;
+}
 html .writing-mode-vertical-rl[data-useragent-browser=safari] .txt-underline {
   text-decoration: none;
   border-right: 1px solid currentColor;
@@ -5267,6 +5296,20 @@ legend.cke_voice_label {
   font-size: inherit;
 }
 
+.txt-dashed {
+  -webkit-text-decoration: underline dashed;
+          text-decoration: underline dashed;
+}
+
+.txt-wavy {
+  -webkit-text-decoration: underline wavy;
+          text-decoration: underline wavy;
+}
+
+.txt-strike {
+  text-decoration: line-through;
+}
+
 .txt-highlight {
   padding: 0 5px;
   background: #FF6416;