feat: added colors from uikit, added nore exports (#216)

Author: smsochneg

src/bundle/MarkupEditorView.scss

@@ -88,7 +88,7 @@ $toolbar-height: 28px;
         // override default theme
         // TODO: use own theme
         &.cm-s-default {
-            background-color: var(--g-color-base-background);
+            background-color: transparent;
 
             .CodeMirror-placeholder {
                 color: var(--g-color-text-secondary);
@@ -117,11 +117,9 @@ $toolbar-height: 28px;
 
 .ye-markup-preview {
     &__outer {
-        overflow-y: scroll;
+        overflow-y: auto;
         flex: 1 0 0;
 
-        height: 100%;
-
         &_vertical {
             box-sizing: border-box;
             margin-top: 6px;

src/bundle/WysiwygEditorView.scss

@@ -7,7 +7,7 @@
     }
 
     &__editor {
-        overflow-y: scroll;
+        overflow-y: auto;
         flex-grow: 1;
 
         .g-root_theme_dark & .pm-iframe-container {

src/bundle/YfmEditorView.scss

@@ -25,7 +25,7 @@
     }
 
     &__preview-wrapper {
-        overflow-y: scroll;
+        overflow-y: auto;
 
         width: 100%;
     }

src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx

@@ -12,19 +12,22 @@ import {ToolbarBaseProps, ToolbarIconData, ToolbarTooltipDelay} from '../../tool
 import './ToolbarButtonWithPopupMenu.scss';
 const b = cn('toolbar-button-with-popup-menu');
 
+export type MenuItem = {
+    id: string;
+    action: Action;
+    icon: IconProps['data'];
+    text: string;
+    iconSize?: IconProps['size'];
+    iconClassname?: string;
+    group?: string;
+    ignoreActive?: boolean;
+};
+
 export type ToolbarButtonWithPopupMenuProps = Omit<
     ToolbarBaseProps<ActionStorage> & {
         icon: ToolbarIconData;
         title: string | (() => string);
-        menuItems: {
-            id: string;
-            action: Action;
-            icon: IconProps['data'];
-            text: string;
-            iconSize?: number;
-            iconClassname?: string;
-            group?: string;
-        }[];
+        menuItems: MenuItem[];
     },
     'editor'
 >;
@@ -48,7 +51,9 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
         [menuItems, groupBy],
     );
 
-    const someActive = menuItems.some((item) => item.action.isActive() === true);
+    const someActive = menuItems.some(
+        (item) => !item.ignoreActive && item.action.isActive() === true,
+    );
     const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
 
     const popupOpen = everyDisabled ? false : open;

src/bundle/toolbar/custom/ToolbarColors.scss

@@ -1,9 +1,12 @@
-$colors: ('black', 'gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
+$colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
 
 .ye-toolbar-colors {
     @each $name in $colors {
         &__item-icon_color_#{$name} {
             color: var(--yfm-colorify-#{$name});
         }
     }
+    &__item-icon_color_default {
+        color: var(--g-color-text-primary);
+    }
 }

src/bundle/toolbar/custom/ToolbarColors.tsx

@@ -5,7 +5,7 @@ import {Colors} from '../../../extensions';
 import {i18n} from '../../../i18n/menubar';
 import {ToolbarBaseProps} from '../../../toolbar';
 import {icons} from '../../config/icons';
-import {ToolbarButtonWithPopupMenu} from '../ToolbarButtonWithPopupMenu';
+import {MenuItem, ToolbarButtonWithPopupMenu} from '../ToolbarButtonWithPopupMenu';
 
 import './ToolbarColors.scss';
 
@@ -16,29 +16,32 @@ export type ToolbarColorsProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     active?: boolean;
     enable?: boolean;
     currentColor?: string;
+    withDefault?: boolean;
     exec(color: string): void;
 };
 
 export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
-    const {exec, onClick, enable, currentColor} = props;
+    const {exec, onClick, enable, currentColor, withDefault} = props;
+    const isDefault = currentColor === undefined;
+
     const onItemClick = (color: string) => () => {
-        exec(color);
-        onClick?.('colorify', {color});
+        // do not exec when current color is default and clicked to default item
+        if (!(isDefault && color === '')) exec(color);
+        onClick?.('colorify', {color: color === '' ? 'default' : color});
     };
 
     const items = [
-        Colors.Black,
         Colors.Gray,
         Colors.Yellow,
         Colors.Orange,
         Colors.Red,
         Colors.Green,
         Colors.Blue,
         Colors.Violet,
-    ].map((color) => ({
+    ].map<MenuItem>((color) => ({
         id: color,
         icon: textColorIcon.data,
-        size: textColorIcon.size ?? 16,
+        iconSize: textColorIcon.size ?? 16,
         text: i18n(`colorify__color_${color}`),
         iconClassname: b('item-icon', {color}),
         action: {
@@ -50,6 +53,24 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
         group: i18n(`colorify__group_text`),
     }));
 
+    if (withDefault) {
+        items.unshift({
+            id: 'default',
+            icon: textColorIcon.data,
+            iconSize: textColorIcon.size ?? 16,
+            text: i18n(`colorify__color_default`),
+            iconClassname: b('item-icon', {color: 'default'}),
+            group: i18n(`colorify__group_text`),
+            ignoreActive: true,
+            action: {
+                run: onItemClick(''),
+                isEnable: () => Boolean(enable),
+                isActive: () => isDefault,
+                meta() {},
+            },
+        });
+    }
+
     return (
         <ToolbarButtonWithPopupMenu
             {...props}

src/bundle/toolbar/wysiwyg/WToolbarColors.tsx

@@ -26,6 +26,7 @@ export const WToolbarColors: React.FC<WToolbarColorsProps> = ({
             className={className}
             focus={focus}
             onClick={onClick}
+            withDefault
         />
     );
 };

src/extensions/yfm/Color/const.ts

@@ -3,7 +3,6 @@ export * from './ColorSpecs/const';
 export const colorAction = 'colorify';
 
 export enum Colors {
-    Black = 'black',
     Gray = 'gray',
     Yellow = 'yellow',
     Orange = 'orange',

src/extensions/yfm/Color/utils.ts

@@ -44,7 +44,6 @@ export const chainAND = (...commands: Command[]): Command => {
 
 // see styles
 const COLORS: readonly string[] = [
-    Colors.Black,
     Colors.Gray,
     Colors.Yellow,
     Colors.Orange,
@@ -59,9 +58,6 @@ export const validateClassNameColorName = (color: string) => COLORS.includes(col
 // eslint-disable-next-line complexity
 export const parseStyleColorValue = (color: string) => {
     switch (color) {
-        case 'black':
-            return Colors.Black;
-
         case 'gray':
         case 'grey':
         case 'lightgray':

src/i18n/menubar/en.json

@@ -39,7 +39,7 @@
   "math_block": "Math block",
   "colorify": "Text color",
   "colorify__group_text": "Text",
-  "colorify__color_black": "Black",
+  "colorify__color_default": "Default",
   "colorify__color_gray": "Gray",
   "colorify__color_yellow": "Yellow",
   "colorify__color_orange": "Orange",