decap-cms-widget-markdown 2.16.0-beta.0

package/src/MarkdownControl/RawEditor.js

@@ -0,0 +1,100 @@
+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 'decap-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';
+import defaultEmptyBlock from './plugins/blocks/defaultEmptyBlock';
+
+function rawEditorStyles({ minimal }) {
+  return `
+  position: relative;
+  overflow: hidden;
+  overflow-x: auto;
+  min-height: ${minimal ? 'auto' : lengths.richTextEditorMinHeight};
+  font-family: ${fonts.mono};
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: 0;
+  margin-top: -${editorStyleVars.stickyDistanceBottom};
+`;
+}
+
+const RawEditorContainer = styled.div`
+  position: relative;
+`;
+function RawEditor(props) {
+  const { className, field, isShowModeToggle, t, onChange } = props;
+
+  const editor = useMemo(() => withReact(withHistory(createEditor())), []);
+
+  const [value, setValue] = useState(
+    props.value
+      ? props.value.split('\n').map(line => defaultEmptyBlock(line))
+      : [defaultEmptyBlock()],
+  );
+
+  useEffect(() => {
+    if (props.pendingFocus) {
+      ReactEditor.focus(editor);
+    }
+  }, []);
+
+  function handleToggleMode() {
+    props.onMode('rich_text');
+  }
+
+  function handleChange(value) {
+    onChange(value.map(line => line.children[0].text).join('\n'));
+    setValue(value);
+  }
+
+  return (
+    <Slate editor={editor} value={value} onChange={handleChange}>
+      <RawEditorContainer>
+        <EditorControlBar>
+          <Toolbar
+            onToggleMode={handleToggleMode}
+            buttons={field.get('buttons')}
+            disabled
+            rawMode
+            isShowModeToggle={isShowModeToggle}
+            t={t}
+          />
+        </EditorControlBar>
+        <ClassNames>
+          {({ css, cx }) => (
+            <Editable
+              className={cx(
+                className,
+                css`
+                  ${rawEditorStyles({ minimal: field.get('minimal') })}
+                `,
+              )}
+              value={value}
+              onChange={handleChange}
+            />
+          )}
+        </ClassNames>
+      </RawEditorContainer>
+    </Slate>
+  );
+}
+
+RawEditor.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onMode: PropTypes.func.isRequired,
+  className: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  field: ImmutablePropTypes.map.isRequired,
+  isShowModeToggle: PropTypes.bool.isRequired,
+  t: PropTypes.func.isRequired,
+};
+
+export default RawEditor;

package/src/MarkdownControl/Toolbar.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { List } from 'immutable';
+import {
+  Toggle,
+  Dropdown,
+  DropdownItem,
+  DropdownButton,
+  colors,
+  transitions,
+  lengths,
+} from 'decap-cms-ui-default';
+
+import ToolbarButton from './ToolbarButton';
+
+const ToolbarContainer = styled.div`
+  background-color: ${colors.textFieldBorder};
+  border-top-right-radius: ${lengths.borderRadius};
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 11px 14px;
+  min-height: 58px;
+  transition: background-color ${transitions.main}, color ${transitions.main};
+  color: ${colors.text};
+`;
+
+const ToolbarDropdownWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const ToolbarToggle = styled.div`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  margin: 0 10px;
+`;
+
+const StyledToggle = ToolbarToggle.withComponent(Toggle);
+
+const ToolbarToggleLabel = styled.span`
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 20px;
+  min-width: ${props => (props.offPosition ? '62px' : '70px')};
+
+  ${props =>
+    props.isActive &&
+    css`
+      font-weight: 600;
+      color: ${colors.active};
+    `};
+`;
+
+export default class Toolbar extends React.Component {
+  static propTypes = {
+    buttons: ImmutablePropTypes.list,
+    editorComponents: ImmutablePropTypes.list,
+    onToggleMode: PropTypes.func.isRequired,
+    rawMode: PropTypes.bool,
+    isShowModeToggle: PropTypes.bool.isRequired,
+    plugins: ImmutablePropTypes.map,
+    onSubmit: PropTypes.func,
+    onAddAsset: PropTypes.func,
+    getAsset: PropTypes.func,
+    disabled: PropTypes.bool,
+    onMarkClick: PropTypes.func,
+    onBlockClick: PropTypes.func,
+    onLinkClick: PropTypes.func,
+    hasMark: PropTypes.func,
+    hasInline: PropTypes.func,
+    hasBlock: PropTypes.func,
+    t: PropTypes.func.isRequired,
+  };
+
+  isVisible = button => {
+    const { buttons } = this.props;
+    return !List.isList(buttons) || buttons.includes(button);
+  };
+
+  handleBlockClick = (event, type) => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.props.onBlockClick(type);
+  };
+
+  handleMarkClick = (event, type) => {
+    event.preventDefault();
+    this.props.onMarkClick(type);
+  };
+
+  render() {
+    const {
+      onLinkClick,
+      onToggleMode,
+      rawMode,
+      isShowModeToggle,
+      plugins,
+      disabled,
+      onSubmit,
+      hasMark = () => {},
+      hasInline = () => {},
+      hasBlock = () => {},
+      hasQuote = () => {},
+      hasListItems = () => {},
+      editorComponents,
+      t,
+    } = this.props;
+    const isVisible = this.isVisible;
+    const showEditorComponents = !editorComponents || editorComponents.size >= 1;
+
+    function showPlugin({ id }) {
+      return editorComponents ? editorComponents.includes(id) : true;
+    }
+
+    const pluginsList = plugins ? plugins.toList().filter(showPlugin) : List();
+
+    const headingOptions = {
+      'heading-one': t('editor.editorWidgets.headingOptions.headingOne'),
+      'heading-two': t('editor.editorWidgets.headingOptions.headingTwo'),
+      'heading-three': t('editor.editorWidgets.headingOptions.headingThree'),
+      'heading-four': t('editor.editorWidgets.headingOptions.headingFour'),
+      'heading-five': t('editor.editorWidgets.headingOptions.headingFive'),
+      'heading-six': t('editor.editorWidgets.headingOptions.headingSix'),
+    };
+
+    return (
+      <ToolbarContainer>
+        <div>
+          {isVisible('bold') && (
+            <ToolbarButton
+              type="bold"
+              label={t('editor.editorWidgets.markdown.bold')}
+              icon="bold"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('bold')}
+              disabled={disabled}
+            />
+          )}
+          {isVisible('italic') && (
+            <ToolbarButton
+              type="italic"
+              label={t('editor.editorWidgets.markdown.italic')}
+              icon="italic"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('italic')}
+              disabled={disabled}
+            />
+          )}
+          {isVisible('code') && (
+            <ToolbarButton
+              type="code"
+              label={t('editor.editorWidgets.markdown.code')}
+              icon="code"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('code')}
+              disabled={disabled}
+            />
+          )}
+          {isVisible('link') && (
+            <ToolbarButton
+              type="link"
+              label={t('editor.editorWidgets.markdown.link')}
+              icon="link"
+              onClick={onLinkClick}
+              isActive={hasInline('link')}
+              disabled={disabled}
+            />
+          )}
+          {/* Show dropdown if at least one heading is not hidden */}
+          {Object.keys(headingOptions).some(isVisible) && (
+            <ToolbarDropdownWrapper>
+              <Dropdown
+                dropdownWidth="max-content"
+                dropdownTopOverlap="36px"
+                renderButton={() => (
+                  <DropdownButton>
+                    <ToolbarButton
+                      type="headings"
+                      label={t('editor.editorWidgets.markdown.headings')}
+                      icon="hOptions"
+                      disabled={disabled}
+                      isActive={!disabled && Object.keys(headingOptions).some(hasBlock)}
+                    />
+                  </DropdownButton>
+                )}
+              >
+                {!disabled &&
+                  Object.keys(headingOptions).map(
+                    (optionKey, idx) =>
+                      isVisible(optionKey) && (
+                        <DropdownItem
+                          key={idx}
+                          label={headingOptions[optionKey]}
+                          className={hasBlock(optionKey) ? 'active' : ''}
+                          onClick={() => this.handleBlockClick(null, optionKey)}
+                        />
+                      ),
+                  )}
+              </Dropdown>
+            </ToolbarDropdownWrapper>
+          )}
+          {isVisible('quote') && (
+            <ToolbarButton
+              type="quote"
+              label={t('editor.editorWidgets.markdown.quote')}
+              icon="quote"
+              onClick={this.handleBlockClick}
+              isActive={hasQuote('quote')}
+              disabled={disabled}
+            />
+          )}
+          {isVisible('bulleted-list') && (
+            <ToolbarButton
+              type="bulleted-list"
+              label={t('editor.editorWidgets.markdown.bulletedList')}
+              icon="list-bulleted"
+              onClick={this.handleBlockClick}
+              isActive={hasListItems('bulleted-list')}
+              disabled={disabled}
+            />
+          )}
+          {isVisible('numbered-list') && (
+            <ToolbarButton
+              type="numbered-list"
+              label={t('editor.editorWidgets.markdown.numberedList')}
+              icon="list-numbered"
+              onClick={this.handleBlockClick}
+              isActive={hasListItems('numbered-list')}
+              disabled={disabled}
+            />
+          )}
+          {showEditorComponents && (
+            <ToolbarDropdownWrapper>
+              <Dropdown
+                dropdownTopOverlap="36px"
+                dropdownWidth="max-content"
+                renderButton={() => (
+                  <DropdownButton>
+                    <ToolbarButton
+                      label={t('editor.editorWidgets.markdown.addComponent')}
+                      icon="add-with"
+                      onClick={this.handleComponentsMenuToggle}
+                      disabled={disabled}
+                    />
+                  </DropdownButton>
+                )}
+              >
+                {pluginsList.map((plugin, idx) => (
+                  <DropdownItem key={idx} label={plugin.label} onClick={() => onSubmit(plugin)} />
+                ))}
+              </Dropdown>
+            </ToolbarDropdownWrapper>
+          )}
+        </div>
+        {isShowModeToggle && (
+          <ToolbarToggle>
+            <ToolbarToggleLabel isActive={!rawMode} offPosition>
+              {t('editor.editorWidgets.markdown.richText')}
+            </ToolbarToggleLabel>
+            <StyledToggle active={rawMode} onChange={onToggleMode} />
+            <ToolbarToggleLabel isActive={rawMode}>
+              {t('editor.editorWidgets.markdown.markdown')}
+            </ToolbarToggleLabel>
+          </ToolbarToggle>
+        )}
+      </ToolbarContainer>
+    );
+  }
+}

package/src/MarkdownControl/ToolbarButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Icon, buttons } from 'decap-cms-ui-default';
+
+const StyledToolbarButton = styled.button`
+  ${buttons.button};
+  display: inline-block;
+  padding: 6px;
+  border: none;
+  background-color: transparent;
+  font-size: 16px;
+  color: ${props => (props.isActive ? '#1e2532' : 'inherit')};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: auto;
+    opacity: 0.5;
+  }
+
+  ${Icon} {
+    display: block;
+  }
+`;
+
+function ToolbarButton({ type, label, icon, onClick, isActive, disabled }) {
+  return (
+    <StyledToolbarButton
+      isActive={isActive}
+      onClick={e => onClick && onClick(e, type)}
+      title={label}
+      disabled={disabled}
+    >
+      {icon ? <Icon type={icon} /> : label}
+    </StyledToolbarButton>
+  );
+}
+
+ToolbarButton.propTypes = {
+  type: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  onClick: PropTypes.func,
+  isActive: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default ToolbarButton;