@plone/volto 18.0.0-alpha.17 → 18.0.0-alpha.19

package/src/config/RichTextEditor/Plugins.jsx

@@ -1,59 +0,0 @@
-import createLinkPlugin from '@plone/volto/components/manage/AnchorPlugin';
-
-import Styles from './Styles';
-
-const breakOutOptions = {
-  doubleBreakoutBlocks: [
-    'unordered-list-item',
-    'ordered-list-item',
-    'code-block',
-  ],
-  breakoutBlocks: [
-    'header-one',
-    'header-two',
-    'header-three',
-    'highlight',
-    'blockquote',
-    'callout',
-  ],
-};
-
-//const linkDetectionPlugin = createLinkDetectionPlugin();
-
-const plugins = (props) => {
-  const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props;
-  const { Separator } = draftJsInlineToolbarPlugin;
-  const blockBreakoutPlugin =
-    draftJsBlockBreakoutPlugin.default(breakOutOptions);
-
-  const linkPlugin = createLinkPlugin({ libraries: props });
-
-  const buttons = Styles(props);
-  const {
-    BoldButton,
-    ItalicButton,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    UnorderedListButton,
-    OrderedListButton,
-    BlockquoteButton,
-    CalloutButton,
-  } = buttons;
-
-  const inlineToolbarButtons = [
-    BoldButton,
-    ItalicButton,
-    linkPlugin.LinkButton,
-    Separator,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    UnorderedListButton,
-    OrderedListButton,
-    BlockquoteButton,
-    CalloutButton,
-  ];
-
-  return { inlineToolbarButtons, plugins: [linkPlugin, blockBreakoutPlugin] }; //linkDetectionPlugin
-};
-
-export default plugins;

package/src/config/RichTextEditor/Styles.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-// import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
-// import createBlockStyleButton from 'draft-js-buttons/lib/utils/createBlockStyleButton';
-
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-
-import boldSVG from '@plone/volto/icons/bold.svg';
-import italicSVG from '@plone/volto/icons/italic.svg';
-import textSVG from '@plone/volto/icons/text.svg';
-import subtextSVG from '@plone/volto/icons/subtext.svg';
-import unorderedListSVG from '@plone/volto/icons/list-bullet.svg';
-import orderedListSVG from '@plone/volto/icons/list-numbered.svg';
-import blockquoteSVG from '@plone/volto/icons/quote.svg';
-import calloutSVG from '@plone/volto/icons/megaphone.svg';
-
-export default function Styles(props) {
-  const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
-  const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
-
-  const BoldButton = createInlineStyleButton({
-    style: 'BOLD',
-    children: <Icon name={boldSVG} size="24px" />,
-  });
-
-  const ItalicButton = createInlineStyleButton({
-    style: 'ITALIC',
-    children: <Icon name={italicSVG} size="24px" />,
-  });
-
-  const HeadlineTwoButton = createBlockStyleButton({
-    blockType: 'header-two',
-    children: <Icon name={textSVG} size="24px" />,
-  });
-
-  const HeadlineThreeButton = createBlockStyleButton({
-    blockType: 'header-three',
-    children: <Icon name={subtextSVG} size="24px" />,
-  });
-
-  const UnorderedListButton = createBlockStyleButton({
-    blockType: 'unordered-list-item',
-    children: <Icon name={unorderedListSVG} size="24px" />,
-  });
-
-  const OrderedListButton = createBlockStyleButton({
-    blockType: 'ordered-list-item',
-    children: <Icon name={orderedListSVG} size="24px" />,
-  });
-
-  const BlockquoteButton = createBlockStyleButton({
-    blockType: 'blockquote',
-    children: <Icon name={blockquoteSVG} size="24px" />,
-  });
-
-  const CalloutButton = createBlockStyleButton({
-    blockType: 'callout',
-    children: <Icon name={calloutSVG} size="24px" />,
-  });
-  return {
-    BlockquoteButton,
-    BoldButton,
-    CalloutButton,
-    ItalicButton,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    OrderedListButton,
-    UnorderedListButton,
-  };
-}

package/src/config/RichTextEditor/ToHTML.jsx

@@ -1,262 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { isEmpty } from 'lodash';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-
-const styles = {
-  code: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
-    fontSize: 16,
-    padding: 2,
-  },
-  codeBlock: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
-    fontSize: 16,
-    padding: 20,
-  },
-};
-
-const addBreaklinesInline = (children) => {
-  if (typeof children[0] == 'string') {
-    const s = children[0];
-
-    if (s.split('\n').length > 1) {
-      return s.split('\n').map((child, index) => (
-        <React.Fragment key={child + index}>
-          {child}
-          {child?.length > 0 && <br />}
-        </React.Fragment>
-      ));
-    }
-  }
-  return children;
-};
-
-// Inline (not block) styles
-const inline = {
-  BOLD: (children, { key }) => (
-    <strong key={key}>{addBreaklinesInline(children)}</strong>
-  ),
-  ITALIC: (children, { key }) => (
-    <em key={key}>{addBreaklinesInline(children)}</em>
-  ),
-  UNDERLINE: (children, { key }) => (
-    <u key={key}>{addBreaklinesInline(children)}</u>
-  ),
-  CODE: (children, { key }) => (
-    <span key={key} style={styles.code}>
-      {children}
-    </span>
-  ),
-};
-
-const addBreaklines = (children) =>
-  children.map((child) => {
-    return child[1].map((child) => [
-      <React.Fragment key={child}>
-        {child}
-        <br />
-      </React.Fragment>,
-    ]);
-  });
-
-const splitBySoftLines = (children) =>
-  children.map((child) => {
-    return child.map((item) => {
-      if (Array.isArray(item)) {
-        return item[0].split('\n');
-      }
-      return item;
-    });
-  });
-
-// splitSoftLines for <li> tag
-const splitSoftLinesOfLists = (children) =>
-  children.map((child, index) => {
-    return (
-      <li key={index}>
-        {child.map((subchild) => {
-          if (Array.isArray(subchild)) {
-            return subchild.map((subchildren) => {
-              if (typeof subchildren === 'string') {
-                const last = subchildren.split('\n').length - 1;
-                return subchildren.split('\n').map((item, index) => (
-                  <React.Fragment key={index}>
-                    {item}
-                    {index !== last && <br />}
-                  </React.Fragment>
-                ));
-              } else {
-                return subchildren;
-              }
-            });
-          } else {
-            return subchild;
-          }
-        })}
-      </li>
-    );
-  });
-
-// Returns how the default lists should be rendered
-const getList =
-  (ordered) =>
-  (children, { depth, keys }) =>
-    ordered ? (
-      <ol key={keys[0]} keys={keys} depth={depth}>
-        {splitSoftLinesOfLists(children)}
-      </ol>
-    ) : (
-      <ul key={keys[0]} keys={keys} depth={depth}>
-        {splitSoftLinesOfLists(children)}
-      </ul>
-    );
-
-// Special function to deal with list clones
-/*const getSpecialList = type => (children, { depth, keys }) => (
-  <ul key={keys[0]} keys={keys} depth={depth} className={type}>
-    {children.map((child, i) => (
-      <li key={keys[i]} className={`${type}-item`}>
-        {child}
-      </li>
-    ))}
-  </ul>
-);
-*/
-
-// Original recommended way to deal with atomics, this does not work with IMAGE
-// const getAtomic = (children, { data, keys }) =>
-//   data.map((item, i) => <div key={keys[i]} {...data[i]} />);
-
-const processChildren = (children, keys) => {
-  const processedChildren = children.map((chunks) =>
-    chunks.map((child, index) => {
-      if (Array.isArray(child)) {
-        // If it's empty is a blank paragraph, we want to add a <br /> in it
-        if (isEmpty(child)) {
-          return <br key={index} />;
-        }
-        return child.map((subchild, index) => {
-          if (typeof subchild === 'string') {
-            const last = subchild.split('\n').length - 1;
-            return subchild.split('\n').map((item, index) => (
-              <React.Fragment key={index}>
-                {item}
-                {index !== last && <br />}
-              </React.Fragment>
-            ));
-          } else {
-            return subchild;
-          }
-        });
-      } else {
-        return child;
-      }
-    }),
-  );
-  return processedChildren.map(
-    (chunk, index) => chunk && <p key={keys[index]}>{chunk}</p>,
-  );
-};
-/**
- * Note that children can be maped to render a list or do other cool stuff
- */
-const blocks = {
-  unstyled: (children, { keys }) => {
-    return processChildren(children, keys);
-  },
-  atomic: (children) => children[0],
-  blockquote: (children, { keys }) => (
-    <blockquote key={keys[0]}>
-      {addBreaklines(splitBySoftLines(children))}
-    </blockquote>
-  ),
-  'header-one': (children, { keys }) =>
-    children.map((child, i) => <h1 key={keys[i]}>{child}</h1>),
-  'header-two': (children, { keys }) =>
-    children.map((child, i) => (
-      <h2 id={keys[i]} key={keys[i]}>
-        {child}
-      </h2>
-    )),
-  'header-three': (children, { keys }) =>
-    children.map((child, i) => (
-      <h3 id={keys[i]} key={keys[i]}>
-        {child}
-      </h3>
-    )),
-  'header-four': (children, { keys }) =>
-    children.map((child, i) => (
-      <h4 id={keys[i]} key={keys[i]}>
-        {child}
-      </h4>
-    )),
-  'header-five': (children, { keys }) =>
-    children.map((child, i) => (
-      <h5 id={keys[i]} key={keys[i]}>
-        {child}
-      </h5>
-    )),
-  'header-six': (children, { keys }) =>
-    children.map((child, i) => (
-      <h6 id={keys[i]} key={keys[i]}>
-        {child}
-      </h6>
-    )),
-  'code-block': (children, { keys }) => (
-    <pre key={keys[0]} style={styles.codeBlock}>
-      {addBreaklines(children)}
-    </pre>
-  ),
-  'unordered-list-item': getList(),
-  'ordered-list-item': getList(true),
-  callout: (children, { keys }) =>
-    children.map((child, i) => (
-      <p key={keys[i]} className="callout">
-        {child}
-      </p>
-    )),
-};
-
-const LinkEntity = connect((state) => ({
-  token: state.userSession.token,
-}))(({ token, key, url, target, targetUrl, download, children }) => {
-  const to = token ? url : targetUrl || url;
-
-  return (
-    <UniversalLink
-      href={to}
-      openLinkInNewTab={target === '_blank' || undefined}
-      download={download}
-    >
-      {children}
-    </UniversalLink>
-  );
-});
-
-const entities = {
-  LINK: (children, props, { key }) => (
-    <LinkEntity key={key} {...props}>
-      {children}
-    </LinkEntity>
-  ),
-
-  IMAGE: (children, entity, { key }) => (
-    <img key={key} src={entity.src} alt={entity.alt} />
-  ),
-};
-
-export const options = {
-  cleanup: false,
-  // joinOutput: true,
-};
-
-const renderers = {
-  inline,
-  blocks,
-  entities,
-};
-
-export default renderers;

package/src/config/RichTextEditor/index.js

@@ -1,25 +0,0 @@
-import ToHTMLRenderers, { options as ToHTMLOptions } from './ToHTML';
-import Blocks from './Blocks';
-import Plugins from './Plugins';
-import FromHTMLCustomBlockFn from './FromHTML';
-
-export const richtextEditorSettings = (props) => {
-  const { plugins, inlineToolbarButtons } = Plugins(props);
-  const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } =
-    Blocks(props);
-
-  return {
-    extendedBlockRenderMap,
-    blockStyleFn: blockStyleFn,
-    listBlockTypes: listBlockTypes,
-    richTextEditorPlugins: plugins,
-    richTextEditorInlineToolbarButtons: inlineToolbarButtons,
-    FromHTMLCustomBlockFn,
-    customStyleMap: null,
-  };
-};
-
-export const richtextViewSettings = {
-  ToHTMLRenderers,
-  ToHTMLOptions,
-};