Skip to content

Commit

Permalink
Merge branch 'rc-slate' into rc
Browse files Browse the repository at this point in the history
  • Loading branch information
@demshy
demshy committed Jul 26, 2023
2 parents c2b0563 + c4e0c0b commit 916de66
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 142 deletions.
1 change: 1 addition & 0 deletions packages/netlify-cms-widget-markdown/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"remark-stringify": "^6.0.4",
"slate": "^0.91.1",
"slate-base64-serializer": "^0.2.107",
"slate-history": "^0.93.0",
"slate-plain-serializer": "^0.7.1",
"slate-react": "^0.91.2",
"slate-soft-break": "^0.9.0",
Expand Down
8 changes: 3 additions & 5 deletions packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { ClassNames } from '@emotion/core';
import styled from '@emotion/styled';
import { lengths, fonts } from 'netlify-cms-ui-default';
import { createEditor } from 'slate';
import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
import { withHistory } from 'slate-history';

import { editorStyleVars, EditorControlBar } from '../styles';
import Toolbar from './Toolbar';
Expand All @@ -31,7 +32,7 @@ const RawEditorContainer = styled.div`
function RawEditor(props) {
const { className, field, isShowModeToggle, t, onChange } = props;

const [editor] = useState(() => withReact(createEditor()));
const editor = useMemo(() => withReact(withHistory(createEditor())), []);

const [value, setValue] = useState(
props.value
Expand Down Expand Up @@ -78,9 +79,6 @@ function RawEditor(props) {
)}
value={value}
onChange={handleChange}
// onPaste={this.handlePaste}
// onCut={this.handleCut}
// onCopy={this.handleCopy}
/>
)}
</ClassNames>
Expand Down
16 changes: 3 additions & 13 deletions packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
import styled from '@emotion/styled';
import { createEditor, Transforms, Editor as SlateEditor } from 'slate';
import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
import { withHistory } from 'slate-history';
import { fromJS } from 'immutable';
import { isEqual } from 'lodash';

Expand Down Expand Up @@ -95,7 +96,8 @@ function Editor(props) {
} = props;

const editor = useMemo(
() => withReact(withShortcodes(withBlocks(withLists(withInlines(createEditor()))))),
() =>
withReact(withHistory(withShortcodes(withBlocks(withLists(withInlines(createEditor())))))),
[],
);

Expand Down Expand Up @@ -176,20 +178,8 @@ function Editor(props) {
}
const [toolbarKey, setToolbarKey] = useState(0);

// const handleDocumentChange = debounce(newValue => {
// setEditorValue(() => newValue);
// onChange(
// slateToMarkdown(newValue, {
// voidCodeBlock: !!codeBlockComponent,
// remarkPlugins: getRemarkPlugins(),
// }),
// );
// }, 150);

function handleChange(newValue) {
if (!isEqual(newValue, editorValue)) {
// debounce makes rerendering quite unpredictible
// handleDocumentChange(newValue);
setEditorValue(() => newValue);
onChange(
slateToMarkdown(newValue, {
Expand Down
5 changes: 3 additions & 2 deletions packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/inlines/withInlines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ function withInlines(editor) {
const { isInline, isVoid } = editor;

editor.isInline = element =>
['link', 'button', 'break'].includes(element.type) || isInline(element);
['link', 'button', 'break', 'image'].includes(element.type) || isInline(element);

editor.isVoid = element => ['break'].includes(element.type) || isVoid(element);
editor.isVoid = element =>
['break', 'image', 'thematic-break'].includes(element.type) || isVoid(element);

if (editor.keyDownHandlers === undefined) {
editor.keyDownHandlers = [];
Expand Down
173 changes: 51 additions & 122 deletions packages/netlify-cms-widget-markdown/src/MarkdownControl/renderers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { colors, lengths } from 'netlify-cms-ui-default';
import { useSelected } from 'slate-react';

import VoidBlock from './components/VoidBlock';
import Shortcode from './components/Shortcode';
Expand Down Expand Up @@ -57,21 +58,6 @@ const StyledBlockQuote = styled.blockquote`
margin-bottom: ${bottomMargin};
`;

const StyledPre = styled.pre`
margin-bottom: ${bottomMargin};
white-space: pre-wrap;
& > code {
display: block;
width: 100%;
overflow-y: auto;
background-color: #000;
color: #ccc;
border-radius: ${lengths.borderRadius};
padding: 10px;
}
`;

const StyledCode = styled.code`
background-color: ${colors.background};
border-radius: ${lengths.borderRadius};
Expand Down Expand Up @@ -156,14 +142,6 @@ function Quote(props) {
return <StyledBlockQuote {...props.attributes}>{props.children}</StyledBlockQuote>;
}

function CodeBlock(props) {
return (
<StyledPre>
<StyledCode {...props.attributes}>{props.children}</StyledCode>
</StyledPre>
);
}

function HeadingOne(props) {
return <StyledH1 {...props.attributes}>{props.children}</StyledH1>;
}
Expand Down Expand Up @@ -205,18 +183,24 @@ function TableCell(props) {
}

function ThematicBreak(props) {
const isSelected = useSelected();
return (
<StyledHr
{...props.attributes}
css={
props.editor.isSelected(props.node) &&
css`
box-shadow: 0 0 0 2px ${colors.active};
border-radius: 8px;
color: ${colors.active};
`
}
/>
<div {...props.attributes}>
{props.children}
<div contentEditable={false}>
<StyledHr
{...props.attributes}
css={
isSelected &&
css`
box-shadow: 0 0 0 2px ${colors.active};
border-radius: 8px;
color: ${colors.active};
`
}
/>
</div>
</div>
);
}

Expand Down Expand Up @@ -248,33 +232,25 @@ function Link(props) {
}

function Image(props) {
const data = props.node.get('data');
const marks = data.get('marks');
const url = data.get('url');
const title = data.get('title');
const alt = data.get('alt');
const image = <img src={url} title={title} alt={alt} {...props.attributes} />;
const result = !marks
? image
: marks.reduce((acc, mark) => {
return renderMark__DEPRECATED({ mark, children: acc });
}, image);
return result;
}

export function renderMark__DEPRECATED() {
return props => {
switch (props.mark.type) {
case 'bold':
return <Bold {...props} />;
case 'italic':
return <Italic {...props} />;
case 'strikethrough':
return <Strikethrough {...props} />;
case 'code':
return <Code {...props} />;
}
};
const { url, title, alt } = props.element.data;
const isSelected = useSelected();
return (
<span {...props.attributes}>
{props.children}
<img
src={url}
title={title}
alt={alt}
{...props.attributes}
css={
isSelected &&
css`
box-shadow: 0 0 0 2px ${colors.active};
`
}
/>
</span>
);
}

export function Leaf({ attributes, children, leaf }) {
Expand Down Expand Up @@ -339,8 +315,22 @@ export function Element(props) {
return <ListItem>{children}</ListItem>;
case 'numbered-list':
return <NumberedList>{children}</NumberedList>;
case 'table':
return <Table {...props} />;
case 'table-row':
return <TableRow {...props} />;
case 'table-cell':
return <TableCell {...props} />;
case 'thematic-break':
return (
<VoidBlock {...props}>
<ThematicBreak {...props} />
</VoidBlock>
);
case 'link':
return <Link {...props} />;
case 'image':
return <Image {...props} />;
case 'break':
return <Break {...props} />;
case 'shortcode':
Expand All @@ -360,64 +350,3 @@ export function Element(props) {
return <Paragraph style={style}>{children}</Paragraph>;
}
}

export function renderBlock__DEPRECATED({ classNameWrapper, codeBlockComponent }) {
return props => {
switch (props.node.type) {
case 'paragraph':
return <Paragraph {...props} />;
case 'list-item':
return <ListItem {...props} />;
case 'quote':
return <Quote {...props} />;
case 'code-block':
if (codeBlockComponent) {
return (
<VoidBlock {...props}>
<Shortcode
classNameWrapper={classNameWrapper}
typeOverload="code-block"
dataKey={false}
{...props}
/>
</VoidBlock>
);
}
return <CodeBlock {...props} />;
case 'heading-one':
return <HeadingOne {...props} />;
case 'heading-two':
return <HeadingTwo {...props} />;
case 'heading-three':
return <HeadingThree {...props} />;
case 'heading-four':
return <HeadingFour {...props} />;
case 'heading-five':
return <HeadingFive {...props} />;
case 'heading-six':
return <HeadingSix {...props} />;
case 'table':
return <Table {...props} />;
case 'table-row':
return <TableRow {...props} />;
case 'table-cell':
return <TableCell {...props} />;
case 'thematic-break':
return (
<VoidBlock {...props}>
<ThematicBreak editor={props.editor} node={props.node} />
</VoidBlock>
);
case 'bulleted-list':
return <BulletedList {...props} />;
case 'numbered-list':
return <NumberedList {...props} />;
case 'shortcode':
return (
<VoidBlock {...props} node={props.node}>
<Shortcode classNameWrapper={classNameWrapper} {...props} />
</VoidBlock>
);
}
};
}
3 changes: 3 additions & 0 deletions packages/netlify-cms-widget-markdown/src/serializers/slateRemark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ const blockTypes = [
'numbered-list',
'list-item',
'shortcode',
'table',
'table-row',
'table-cell',
];

const inlineTypes = ['link', 'image', 'break'];
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17295,6 +17295,13 @@ slate-base64-serializer@^0.2.107:
dependencies:
isomorphic-base64 "^1.0.2"

slate-history@^0.93.0:
version "0.93.0"
resolved "https://registry.yarnpkg.com/slate-history/-/slate-history-0.93.0.tgz#d2fad47e4e8b262ab7c86b653f5dd6d9b6d85277"
integrity sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==
dependencies:
is-plain-object "^5.0.0"

slate-hyperscript@^0.77.0:
version "0.77.0"
resolved "https://registry.yarnpkg.com/slate-hyperscript/-/slate-hyperscript-0.77.0.tgz#72c1c0fbd54dc6b6210ecd81d020c8d3d0ab8eae"
Expand Down

0 comments on commit 916de66

Please sign in to comment.