Merge pull request #104 from CuBoulder/issue/103

10.5 Icon Fix

Author: jcsparks

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### 10.5 Icon Fix
+  Needed to add the core ckeditor 5 icons to our plugin as ckeditor remove them in 10.5
+  
+  Sister PR: https://github.com/CuBoulder/ucb_ckeditor_icons/pull/1
+  
+  Resolves #103 
+---
+
 - ### D11 version bump
   D11 version bump
 ---

ckeditor5_plugins/box/src/boxconfig.js

@@ -7,14 +7,16 @@
  * @property {string} className
  */
 
-import { icons } from 'ckeditor5/src/core';
 import boxTitleLeft from '../../../icons/box-title-left.svg';
 import boxTitleCenter from '../../../icons/box-title-center.svg';
 import boxTitleRight from '../../../icons/box-title-right.svg';
 import boxTitleHidden from '../../../icons/box-title-hidden.svg';
 import boxStyleFill from '../../../icons/box-style-fill.svg';
 import boxStyleOutline from '../../../icons/box-style-outline.svg';
 import boxStyleNone from '../../../icons/box-style-none.svg';
+import objectLeft from '../../../icons/object-left.svg';
+import objectFullWidth from '../../../icons/object-full-width.svg';
+import objectRight from '../../../icons/object-right.svg';
 
 /** @type {Object<string, SelectableOption>} */
 export const titleOptions = {
@@ -46,17 +48,17 @@ export const titleDefault = 'left';
 export const alignmentOptions = {
   left: {
     label: 'Float left',
-    icon: icons.objectLeft,
+    icon: objectLeft,
     className: 'ucb-box-alignment-left'
   },
   none: {
     label: 'Fill width',
-    icon: icons.objectFullWidth,
+    icon: objectFullWidth,
     className: 'ucb-box-alignment-none'
   },
   right: {
     label: 'Float right',
-    icon: icons.objectRight,
+    icon: objectRight,
     className: 'ucb-box-alignment-right'
   }
 };

ckeditor5_plugins/button/src/buttonconfig.js

@@ -1,19 +1,17 @@
-import { icons } from 'ckeditor5/src/core';
+import objectCenter from '../../../icons/object-center.svg';
+import objectFullWidth from '../../../icons/object-full-width.svg';
 
 export const sizeOptions = {
   large: {
     label: 'Large',
-    icon: icons.large,
     className: 'ucb-link-button-large'
   },
   regular: {
     label: 'Regular',
-    icon: icons.regular,
     className: 'ucb-link-button-regular'
   },
   small: {
     label: 'Small',
-    icon: icons.small,
     className: 'ucb-link-button-small'
   },
 };
@@ -48,12 +46,12 @@ export const defaultColor = 'blue';
 export const styleOptions = {
   default: {
     label: 'Default',
-    icon: icons.objectCenter,
+    icon: objectCenter,
     className: 'ucb-link-button-default'
   },
   full: {
     label: 'Full',
-    icon: icons.objectFullWidth,
+    icon: objectFullWidth,
     className: 'ucb-link-button-full'
   },
 };

ckeditor5_plugins/button/src/buttonview.js

@@ -9,8 +9,9 @@ import {
   addToolbarToDropdown
 } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import { icons } from 'ckeditor5/src/core';
 import colorIcon from '../../../icons/paint.svg'
+import checkIcon from '../../../icons/check.svg'
+import cancelIcon from '../../../icons/cancel.svg'
 import { sizeOptions, styleOptions, colorOptions, defaultColor,defaultStyle,defaultSize} from './buttonconfig';
 
 export default class FormView extends View {
@@ -36,13 +37,13 @@ export default class FormView extends View {
     this.set('href', '')
 
 
-    this.saveButtonView = this._createButton( 'Save', icons.check, 'ck-button-save' );
+    this.saveButtonView = this._createButton( 'Save', checkIcon, 'ck-button-save' );
 
     // Submit type of the button will trigger the submit event on entire form when clicked 
     //(see submitHandler() in render() below).
     this.saveButtonView.type = 'submit';
 
-    this.cancelButtonView = this._createButton( 'Cancel', icons.cancel, 'ck-button-cancel' );
+    this.cancelButtonView = this._createButton( 'Cancel', cancelIcon, 'ck-button-cancel' );
 
     // Delegate ButtonView#execute to FormView#cancel.
     this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );

ckeditor5_plugins/buttongroup/src/buttongroupconfig.js

@@ -1,19 +1,21 @@
-import { icons } from 'ckeditor5/src/core';
+import objectSizeLarge from '../../../icons/object-size-large.svg';
+import objectSizeMedium from '../../../icons/object-size-medium.svg';
+import objectSizeSmall from '../../../icons/object-size-small.svg';
 
 export const sizeOptions = {
   large: {
     label: 'Large',
-    icon: icons.objectSizeLarge,
+    icon: objectSizeLarge,
     className: 'ucb-link-button-large'
   },
   regular: {
     label: 'Regular',
-    icon: icons.objectSizeMedium,
+    icon: objectSizeMedium,
     className: 'ucb-link-button-regular'
   },
   small: {
     label: 'Small',
-    icon: icons.objectSizeSmall,
+    icon: objectSizeSmall,
     className: 'ucb-link-button-small'
   },
 };

ckeditor5_plugins/buttongroup/src/buttongroupui.js

@@ -4,7 +4,7 @@ import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
 import { ButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui';
 import {sizeOptions, defaultSize, colorOptions, defaultColor} from './buttongroupconfig'
 import icon from '../../../icons/arrows-turn-right-solid.svg';
-import { icons } from 'ckeditor5/src/core';
+import plusIcon from '../../../icons/plus.svg';
 
 
 
@@ -44,7 +44,7 @@ export default class ButtonGroupUI extends Plugin {
     componentFactory.add('buttonGroupColor', locale =>
       this._createDropdown(locale, 'Color', colorOptions[defaultColor].icon, commands.get('buttonGroupColor'), colorOptions, defaultColor));
     componentFactory.add('addNewButtonBG', locale =>
-      this._createButton(locale, 'Add Button', icons.plus, commands.get('addNewButtonBG'), null))
+      this._createButton(locale, 'Add Button', plusIcon, commands.get('addNewButtonBG'), null))
   }
 
     /**

ckeditor5_plugins/buttongroup/src/buttongroupview.js

@@ -9,8 +9,9 @@ import {
   addToolbarToDropdown
 } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import { icons } from 'ckeditor5/src/core';
 import colorIcon from '../../../icons/paint.svg'
+import checkIcon from '../../../icons/check.svg'
+import cancelIcon from '../../../icons/cancel.svg'
 import { sizeOptions, colorOptions, defaultColor,defaultStyle,defaultSize} from './buttongroupconfig';
 
 export default class BGFormView extends View {
@@ -27,13 +28,13 @@ export default class BGFormView extends View {
     this.set('size', defaultSize)
     this.set('color', defaultColor)
 
-    this.saveButtonView = this._createButton( 'Save', icons.check, 'ck-button-save' );
+    this.saveButtonView = this._createButton( 'Save', checkIcon, 'ck-button-save' );
 
     // Submit type of the button will trigger the submit event on entire form when clicked 
     //(see submitHandler() in render() below).
     this.saveButtonView.type = 'submit';
 
-    this.cancelButtonView = this._createButton( 'Cancel', icons.cancel, 'ck-button-cancel' );
+    this.cancelButtonView = this._createButton( 'Cancel', cancelIcon, 'ck-button-cancel' );
 
     // Delegate ButtonView#execute to FormView#cancel.
     this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );

ckeditor5_plugins/calendar/src/calendarformview.js

@@ -9,7 +9,8 @@
 
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 import { ButtonView, createLabeledInputText, FocusCycler, LabeledFieldView, submitHandler, View } from 'ckeditor5/src/ui';
-import { icons } from 'ckeditor5/src/core';
+import checkIcon from '../../../icons/check.svg';
+import cancelIcon from '../../../icons/cancel.svg';
 
 export default class CalendarFormView extends View {
   /**
@@ -27,8 +28,8 @@ export default class CalendarFormView extends View {
     this.valueInputView.fieldView.bind('value').to(this, 'value');
 
     // Creates the save and cancel buttons.
-    this.saveButtonView = this._createActionButton(locale, 'Save', icons.check, 'ck-button-save');
-    this.cancelButtonView = this._createActionButton(locale, 'Cancel', icons.cancel, 'ck-button-cancel');
+    this.saveButtonView = this._createActionButton(locale, 'Save', checkIcon, 'ck-button-save');
+    this.cancelButtonView = this._createActionButton(locale, 'Cancel', cancelIcon, 'ck-button-cancel');
 
     this.saveButtonView.type = 'submit'; // Set the type to 'submit', which will trigger the submit event on entire form when clicked.
     this.cancelButtonView.delegate('execute').to(this, 'cancel'); // Delegate ButtonView#execute to CalendarFormView#cancel.

ckeditor5_plugins/callout/src/calloutconfig.js

@@ -7,23 +7,20 @@
  * @property {string} className
  */
 
-import { icons } from 'ckeditor5/src/core';
+
 
 /** @type {Object<string, SelectableOption>} */
 export const sizeOptions = {
   medium: {
     label: "Medium",
-    icon: icons.small,
     className: "feature-layout-callout-medium",
   },
   large: {
     label: "Large",
-    icon: icons.regular,
     className: "feature-layout-callout-large",
   },
   xlarge: {
     label: "Extra Large",
-    icon: icons.large,
     className: "feature-layout-callout-xlarge",
   },
 };

ckeditor5_plugins/column/src/columnui.js

@@ -4,7 +4,8 @@ import { ButtonView } from 'ckeditor5/src/ui';
 import icon from '../../../icons/table-columns-solid.svg';
 import leftIcon from '../../../icons/arrow-left-solid.svg';
 import rightIcon from '../../../icons/arrow-right-solid.svg';
-import { icons } from 'ckeditor5/src/core';
+import plusIcon from '../../../icons/plus.svg';
+import eraserIcon from '../../../icons/eraser.svg';
 import AddColumnPositionCommand from './addcolumnpositioncommand';
 
 export default class ColumnUI extends Plugin {
@@ -36,9 +37,9 @@ export default class ColumnUI extends Plugin {
     });
 
     componentFactory.add('addColumn', locale =>
-      this._createButton(locale, 'Add Column', icons.plus, commands.get('addColumn')));
+      this._createButton(locale, 'Add Column', plusIcon, commands.get('addColumn')));
     componentFactory.add('removeColumn', locale =>
-      this._createButton(locale, 'Remove Column', icons.eraser, commands.get('removeColumn')));
+      this._createButton(locale, 'Remove Column', eraserIcon, commands.get('removeColumn')));
     componentFactory.add('addColumnLeft', locale =>
       this._createButton(locale, 'Add Column Left', leftIcon, commands.get('addColumnPosition'), 'left'));
     componentFactory.add('addColumnRight', locale =>