feat: introduce additional CKEditor theming (#5)

.storybook/main.js

@@ -21,7 +21,7 @@ function isSvgRule(rule) {
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
   webpackFinal: config => {
     config.module.rules.forEach(rule => {
       if (isCssRule(rule)) {

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@zendeskgarden/stylelint-config"
+  "extends": "@zendeskgarden/stylelint-config",
+  "rules": {
+    "selector-max-specificity": null
+  }
 }

package.json

@@ -39,6 +39,7 @@
     "@ckeditor/ckeditor5-react": "3.0.0",
     "@ckeditor/ckeditor5-theme-lark": "24.0.0",
     "@ckeditor/ckeditor5-widget": "24.0.0",
+    "@storybook/addon-a11y": "6.1.15",
     "@storybook/addon-actions": "6.1.10",
     "@storybook/addon-essentials": "6.1.10",
     "@storybook/addon-links": "6.1.10",

src/stories/GardenEditor.stories.js

@@ -16,7 +16,7 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import CodeBlockEditing from '@ckeditor/ckeditor5-code-block/src/codeblockediting';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
@@ -31,8 +31,8 @@ import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import { add } from '@ckeditor/ckeditor5-utils/src/translation-service';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
-// import GardenEditor from '../gardeneditor';
 import './theme/styles.css';
+import { CodeBlockUI } from './plugins/CodeBlockUI';
 import { INITIAL_DATA } from './initialData';
 
 const EDITOR_LOCAL_STORAGE_KEY = 'ckeditor5-demo-1';
@@ -84,22 +84,23 @@ export const Default = () => {
           List,
           BlockQuote,
           Heading,
-          CodeBlock,
+          CodeBlockEditing,
+          CodeBlockUI,
           Widget
         ],
         toolbar: [
           'heading',
           'bold',
           'italic',
           'underline',
+          'code',
           '|',
           'bulletedList',
           'numberedList',
           'outdent',
           'indent',
           '|',
           'blockquote',
-          'code',
           'codeBlock',
           'link',
           'horizontalLine'

src/stories/plugins/CodeBlockUI.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import codeBlockIcon from '@zendeskgarden/svg-icons/src/16/terminal-window-stroke.svg';
+import { getNormalizedAndLocalizedLanguageDefinitions } from '@ckeditor/ckeditor5-code-block/src/utils';
+
+export class CodeBlockUI extends Plugin {
+  init() {
+    const editor = this.editor;
+    const t = editor.t;
+    const componentFactory = editor.ui.componentFactory;
+    const normalizedLanguageDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
+    const defaultLanguageDefinition = normalizedLanguageDefs[0];
+
+    componentFactory.add('codeBlock', locale => {
+      const command = editor.commands.get('codeBlock');
+
+      const buttonView = new ButtonView(locale);
+
+      buttonView.set({
+        label: t('Insert code block'),
+        tooltip: true,
+        keystroke: 'CTRL+SHIFT+6',
+        icon: codeBlockIcon,
+        isToggleable: true
+      });
+
+      buttonView.bind('isEnabled').to(command);
+
+      buttonView.on('execute', () => {
+        editor.execute('codeBlock', {
+          language: defaultLanguageDefinition.language
+        });
+
+        editor.editing.view.focus();
+      });
+
+      return buttonView;
+    });
+  }
+}

src/stories/theme/_button.css

@@ -1,8 +1,35 @@
-/* stylelint-disable-next-line selector-max-specificity */
-.ck.ck-button:not(.ck-disabled):hover .ck-button__icon {
-  color: #49545c; /* GREY-700 */
-}
+.ck.ck-button {
+  &:focus {
+    /* stylelint-disable-next-line color-function-notation */
+    box-shadow: rgba(31, 115, 183, .35) 0 0 0 3px; /* BLUE-600 */
+  }
+
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+
+  &:not(.ck-disabled) {
+    cursor: pointer;
+  }
+
+  & .ck-button__icon {
+    color: #68737d; /* GREY-600 */
+  }
+
+  &:hover:not(.ck-disabled,.ck-on) {
+    & .ck-button__icon {
+      color: #49545c; /* GREY-700 */
+    }
+  }
+
+  &.ck-on {
+    & .ck-button__icon {
+      color: #2f3941; /* GREY-800 */
+    }
+  }
 
-.ck.ck-button:not(.ck-disabled) {
-  cursor: pointer;
+  &.ck-disabled:active {
+    box-shadow: none;
+  }
 }

src/stories/theme/_code-block.css

@@ -0,0 +1,15 @@
+.ck-content pre {
+  margin: 0;
+  margin-top: var(--ck-spacing-large);
+  margin-bottom: var(--ck-spacing-large);
+  border-radius: var(--ck-border-radius-small);
+  background-color: #f8f9f9; /* GREY-100 */
+  padding: var(--ck-spacing-large);
+  overflow: auto;
+  white-space: pre;
+  color: var(--ck-color-base-text);
+
+  & code {
+    background-color: inherit;
+  }
+}

src/stories/theme/_dropdown.css

@@ -0,0 +1,94 @@
+/* stylelint-disable declaration-no-important,
+  max-nesting-depth, selector-max-compound-selectors */
+
+@keyframes zd-menu--top-open {
+  0% {
+    transform: translateY(var(--ck-spacing-extra-large));
+  }
+}
+
+@keyframes zd-menu--bottom-open {
+  0% {
+    transform: translateY(calc(var(--ck-spacing-extra-large) * -1));
+  }
+}
+
+.ck.ck-dropdown {
+  & .ck-button.ck-dropdown__button {
+    & .ck-dropdown__arrow {
+      transition: transform .25s ease-in-out 0s, color .25s ease-in-out 0s;
+    }
+
+    &.ck-on {
+      border-radius: var(--ck-border-radius);
+
+      & .ck-dropdown__arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  & .ck-dropdown__panel {
+    animation: .2s cubic-bezier(.15, .85, .35, 1.2);
+    border-radius: var(--ck-border-radius) !important;
+
+    &:not(.ck-dropdown__panel-visible) {
+      display: inline-block;
+      transition: opacity .2s ease-in-out, .2s visibility 0s linear;
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    &.ck-dropdown__panel-visible {
+      visibility: visible;
+      opacity: 1;
+
+      &.ck-dropdown__panel_ne,
+      &.ck-dropdown__panel_nw {
+        animation-name: zd-menu--top-open;
+      }
+
+      &.ck-dropdown__panel_se,
+      &.ck-dropdown__panel_sw {
+        animation-name: zd-menu--bottom-open;
+      }
+    }
+
+    & > :first-child {
+      margin-top: var(--ck-spacing-standard);
+    }
+
+    & > :last-child {
+      margin-bottom: var(--ck-spacing-standard);
+    }
+
+    &.ck-dropdown__panel_ne,
+    &.ck-dropdown__panel_nw {
+      bottom: calc(100% + 4px);
+    }
+
+    &.ck-dropdown__panel_se,
+    &.ck-dropdown__panel_sw {
+      top: calc(100% + 4px);
+      bottom: auto;
+    }
+
+    & .ck-list .ck-list__item .ck-button {
+      border-radius: 0 !important;
+    }
+  }
+}
+
+.ck[dir='rtl'].ck-dropdown {
+  & .ck-button.ck-dropdown__button {
+    & .ck-dropdown__arrow {
+      transition: transform .25s ease-in-out 0s, color .25s ease-in-out 0s;
+    }
+
+    &.ck-on {
+      & .ck-dropdown__arrow {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+}

src/stories/theme/_editor.css

@@ -1,9 +1,8 @@
-.ck.ck-editor__editable_inline {
+.ck.ck-editor__editable {
   padding: 0 var(--ck-spacing-large);
-}
 
-/* Hide widget mobile type-around feature */
-/* stylelint-disable-next-line selector-max-specificity */
-.ck.ck-editor__editable .ck-widget .ck-widget__type-around__button {
-  display: none;
+  /* Hide widget mobile type-around feature */
+  & .ck-widget .ck-widget__type-around__button {
+    display: none;
+  }
 }

src/stories/theme/_horizontal-line.css

@@ -1,3 +1,22 @@
+/* stylelint-disable selector-max-compound-selectors,
+   selector-combinator-space-before, indentation,
+   declaration-no-important */
+
 .ck-content hr {
-  margin: var(--ck-spacing-unit) 0;
+  margin: var(--ck-spacing-standard) 0;
+  background-color: #d8dcde; /* GREY-300 */
+  height: 1px;
+}
+
+.ck .ck-widget.ck-horizontal-line {
+  &.ck-widget_selected:not(.ck-widget_type-around_show-fake-caret_before,
+    .ck-widget_type-around_show-fake-caret_after) {
+    outline-color: transparent !important;
+    border-radius: var(--ck-border-radius) !important;
+    box-shadow: var(--ck-focus-outer-shadow), 0 0;
+
+    & hr {
+      background-color: var(--ck-color-base-focus);
+    }
+  }
 }

src/stories/theme/_link.css

@@ -1,3 +1,3 @@
 .ck .ck-link_selected {
-  border-radius: 2px;
+  background: none;
 }

src/stories/theme/_list.css

@@ -1,3 +1,41 @@
+/**
+ * [1] - Due to PostCSS limitations in CKEditor we must include our icon
+ *       directly.
+ */
+.ck.ck-list__item {
+  & .ck-button {
+    position: relative;
+    padding: 10px 32px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: opacity .1s ease-in-out;
+      opacity: 0;
+      background: no-repeat 50% / 16px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' focusable='false' viewBox='0 0 16 16' color='%231f73b7'%3E %3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M1 9l4 4L15 3'/%3E %3C/svg%3E"); /* [1] */
+      width: 32px;
+      height: 100%;
+      content: '';
+    }
+
+    &:focus {
+      outline: none;
+      border-color: transparent;
+      box-shadow: none;
+      background-color: var(--ck-color-list-button-hover-background);
+    }
+
+    & .ck-button__label {
+      line-height: 20px;
+    }
+
+    &.ck-on::before {
+      opacity: 1;
+    }
+  }
+}
+
 .ck-content ul {
   margin: 16px 0 16px 20px;
   padding: 0;