gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Shawn Erquhart
2019-12-16 12:17:37 -05:00
committed by Erez Rokah
parent be46293f82
commit 18c579d0e9
110 changed files with 12693 additions and 8516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
packages/netlify-cms-widget-code/src/SettingsPane.js Normal file
View File

@ -0,0 +1,109 @@
import React from 'react';
import styled from '@emotion/styled';
import Select from 'react-select';
import isHotkey from 'is-hotkey';
import { text, shadows } from 'netlify-cms-ui-default';
import SettingsButton from './SettingsButton';
import languageSelectStyles from './languageSelectStyles';
const SettingsPaneContainer = styled.div`
position: absolute;
right: 0;
width: 200px;
z-index: 10;
height: 100%;
background-color: #fff;
overflow-y: scroll;
padding: 12px;
${shadows.drop};
`;
const SettingsFieldLabel = styled.label`
${text.fieldLabel};
font-size: 11px;
display: block;
margin-top: 8px;
margin-bottom: 2px;
`;
const SettingsSectionTitle = styled.h3`
font-size: 14px;
margin-top: 14px;
margin-bottom: 0;
&:first-of-type {
margin-top: 4px;
}
`;
const SettingsSelect = ({ value, options, onChange, forID, type, autoFocus }) => (
<Select
inputId={`${forID}-select-${type}`}
styles={languageSelectStyles}
value={value}
options={options}
onChange={opt => onChange(opt.value)}
menuPlacement="auto"
captureMenuScroll={false}
autoFocus={autoFocus}
/>
);
const SettingsPane = ({
hideSettings,
forID,
modes,
mode,
theme,
themes,
keyMap,
keyMaps,
allowLanguageSelection,
onChangeLang,
onChangeTheme,
onChangeKeyMap,
}) => (
<SettingsPaneContainer onKeyDown={e => isHotkey('esc', e) && hideSettings()}>
<SettingsButton onClick={hideSettings} showClose={true} />
{allowLanguageSelection && (
<>
<SettingsSectionTitle>Field Settings</SettingsSectionTitle>
<SettingsFieldLabel htmlFor={`${forID}-select-mode`}>Mode</SettingsFieldLabel>
<SettingsSelect
type="mode"
forID={forID}
value={mode}
options={modes}
onChange={onChangeLang}
autoFocus
/>
</>
)}
<>
<SettingsSectionTitle>Global Settings</SettingsSectionTitle>
{themes && (
<>
<SettingsFieldLabel htmlFor={`${forID}-select-theme`}>Theme</SettingsFieldLabel>
<SettingsSelect
type="theme"
forID={forID}
value={{ value: theme, label: theme }}
options={themes.map(t => ({ value: t, label: t }))}
onChange={onChangeTheme}
autoFocus={!allowLanguageSelection}
/>
</>
)}
<SettingsFieldLabel htmlFor={`${forID}-select-keymap`}>KeyMap</SettingsFieldLabel>
<SettingsSelect
type="keymap"
forID={forID}
value={keyMap}
options={keyMaps}
onChange={onChangeKeyMap}
/>
</>
</SettingsPaneContainer>
);
export default SettingsPane;