feat: Code Widget + Markdown Widget Internal Overhaul (#2828)

* wip - upgrade to slate 0.43

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* finish list handling logic

* add plugins directory

* tests wip

* setup testing

* wip

* add selection commands

* finish list testing

* stuff

* add codemirror

* abstract codemirror from slate

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* codemirror mostly working, some bugs

* upgrade to slate 46

* upgrade to slate 47

* wip

* wip

* progress

* wip

* mostly working links with surrounding marks

* wip

* tests passing

* add test

* fix formatting

* update snapshots

* close self closing tag in markdown html output

* wip - commonmark

* hold on commonmark work

* all tests passing

* fix e2e specs

* ignore tests in esm builds

* break/backspace plugins wip

* finish enter/backspace spec

* fix soft break handling

* wip - editor component deletion

* add insertion points

* make insertion points invisible

* fix empty mark nodes output to markdown

* fix pasting

* improve insertion points

* add static bottom insertion point

* improve click handling at insertion points

* restore current table functionality

* add paste support for Slate fragments

* support cut/copy markdown, paste between rich/raw editor

* fix copy paste

* wip - paste/select bug fixing

* fixed known slate issues

* split plugins

* fix editor toggles

* force text cursor in code widget

* wip - reorg plugins

* finish markdown control reorg

* configure plugin types

* quote block adjacent handling with tests

* wip

* finish quote logic and tests

* fix copy paste plugin migration regressions

* fix force insert before node

* fix trailing insertion point

* remove empty headers

* codemirror working properly in markdown widget

* return focus to codemirror on lang select enter

* fix state issues for widgets with local state

* wip - vim working, just need to work out distribution

* add settings pane

* wip - default modes

* fix deps

* add programming language data

* implement linguist langs in code widget

* everything built in

* remove old registration code, fix focus styling

* fix/update linting setup

* fix js lint errors

* remove stylelint from format script

* fix remaining linting errors

* fix reducer test failures

* chore: update commitlint for worktree support

* chore: fix remaining tests

* chore: drop unused monaco plugin

* chore: remove extraneous global styles rendering

* chore: fix failing tests

* fix: tests

* fix: quote/list nesting (tests still broken)

* fix: update quote tests

* chore: bring back code widget test config

* fix: autofocus

* fix: code blocks without the code widget

* fix: code editor component state issues

* fix: error

* fix: add code block test, few fixes

* chore: remove notes

* fix: [wip] update stateful shortcodes on undo/redo

* fix: support code styled links, handle unknown langs

* fix: few fixes

* fix: autofocus on insert, focus on all clicks

* fix: linting

* fix: autofocus

* fix: update code block fixture

* fix: remove unused cypress snapshot plugin

* fix: drop node 8 test, add node 12

* fix: use lodash.flatten instead of Array.flat

* fix: remove console logs

packages/netlify-cms-ui-default/src/FieldLabel.js

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { colors, colorsRaw, transitions, text } from './styles';
+
+const stateColors = {
+  default: {
+    background: colors.textFieldBorder,
+    text: colors.controlLabel,
+  },
+  active: {
+    background: colors.active,
+    text: colors.textLight,
+  },
+  error: {
+    background: colors.errorText,
+    text: colorsRaw.white,
+  },
+};
+
+const getStateColors = ({ isActive, hasErrors }) => {
+  if (hasErrors) return stateColors.error;
+  if (isActive) return stateColors.active;
+  return stateColors.default;
+};
+
+const FieldLabel = styled.label`
+  ${text.fieldLabel};
+  color: ${props => getStateColors(props).text};
+  background-color: ${props => getStateColors(props).background};
+  display: inline-block;
+  border: 0;
+  border-radius: 3px 3px 0 0;
+  padding: 3px 6px 2px;
+  margin: 0;
+  transition: all ${transitions.main};
+  position: relative;
+
+  /**
+   * Faux outside curve into top of input
+   */
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -4px;
+    height: 100%;
+    width: 4px;
+    background-color: inherit;
+  }
+
+  &:after {
+    border-bottom-left-radius: 3px;
+    background-color: #fff;
+  }
+`;
+
+export default FieldLabel;

packages/netlify-cms-ui-default/src/IconButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Icon from './Icon';
+import { buttons, colors, colorsRaw, shadows } from './styles';
+
+const sizes = {
+  small: '28px',
+  large: '40px',
+};
+
+const ButtonRound = styled.button`
+  ${buttons.button};
+  ${shadows.dropMiddle};
+  background-color: ${colorsRaw.white};
+  color: ${props => colors[props.isActive ? `active` : `inactive`]};
+  border-radius: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${props => sizes[props.size]};
+  height: ${props => sizes[props.size]};
+  padding: 0;
+`;
+
+const IconButton = ({ size, isActive, type, onClick, className, title }) => (
+  <ButtonRound
+    size={size}
+    isActive={isActive}
+    className={className}
+    onClick={onClick}
+    title={title}
+  >
+    <Icon type={type} size={size} />
+  </ButtonRound>
+);
+
+export default IconButton;

packages/netlify-cms-ui-default/src/index.js

@@ -2,6 +2,8 @@ import Dropdown, { DropdownItem, DropdownButton, StyledDropdownButton } from './
 import Icon from './Icon';
 import ListItemTopBar from './ListItemTopBar';
 import Loader from './Loader';
+import FieldLabel from './FieldLabel';
+import IconButton from './IconButton';
 import Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
 import AuthenticationPage from './AuthenticationPage';
 import WidgetPreviewContainer from './WidgetPreviewContainer';
@@ -14,6 +16,7 @@ import {
   lengths,
   components,
   buttons,
+  text,
   shadows,
   borders,
   transitions,
@@ -28,7 +31,9 @@ export const NetlifyCmsUiDefault = {
   DropdownButton,
   StyledDropdownButton,
   ListItemTopBar,
+  FieldLabel,
   Icon,
+  IconButton,
   Loader,
   Toggle,
   ToggleContainer,
@@ -44,6 +49,7 @@ export const NetlifyCmsUiDefault = {
   components,
   buttons,
   shadows,
+  text,
   borders,
   transitions,
   effects,
@@ -56,7 +62,9 @@ export {
   DropdownButton,
   StyledDropdownButton,
   ListItemTopBar,
+  FieldLabel,
   Icon,
+  IconButton,
   Loader,
   Toggle,
   ToggleContainer,
@@ -72,6 +80,7 @@ export {
   components,
   buttons,
   shadows,
+  text,
   borders,
   transitions,
   effects,

packages/netlify-cms-ui-default/src/styles.js

@@ -120,6 +120,15 @@ const shadows = {
   `,
 };
 
+const text = {
+  fieldLabel: css`
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: ${colors.controlLabel};
+  `,
+};
+
 const gradients = {
   checkerboard: `
     linear-gradient(
@@ -465,6 +474,7 @@ export {
   lengths,
   components,
   buttons,
+  text,
   shadows,
   borders,
   transitions,