Add SimpleLink WIP

src/components/ElementEditor/index.js

@@ -1,94 +1,4 @@
-import React from 'react';
-import SidebarEditor from './SidebarEditor';
-import makeContextButtons from './ContextButtons';
-import PluginEditor from './PluginEditor';
-import {
-  _insertElement,
-  _unwrapElement,
-  _isActiveElement,
-  _getActiveElement,
-} from './utils';
-import messages from './messages';
-import ToolbarButton from './ToolbarButton';
-import tagSVG from '@plone/volto/icons/tag.svg';
-import SchemaProvider from './SchemaProvider';
-import { omit } from 'lodash';
-
-export const makeInlineElementPlugin = (options) => {
-  const { elementType, isInlineElement, pluginId, title = 'Element' } = options;
-  const omittedProps = [
-    'pluginEditor',
-    'getActiveElement',
-    'unwrapElement',
-    'schemaProvider',
-    'hasValue',
-    'elementType',
-    'isInlineElement',
-    'editSchema',
-    'element',
-  ];
-  const pluginOptions = {
-    pluginEditor: PluginEditor,
-    insertElement: _insertElement(elementType),
-    getActiveElement: _getActiveElement(elementType),
-    isActiveElement: _isActiveElement(elementType),
-    unwrapElement: _unwrapElement(elementType),
-    messages,
-    toolbarButtonIcon: tagSVG,
-    title,
-    extensions: [],
-
-    // a component that should provide a schema as a render prop
-    schemaProvider: SchemaProvider,
-    // schema that can be used to create the edit form for this component
-    // editSchema,
-
-    // A generic "validation" method, just finds that a "positive" value
-    // exists.  Plugin authors should overwrite it in options
-    // If it returns true, the value is saved in the editor, othwerwise the
-    // element type is removed from the editor
-    hasValue: (data) => Object.values(data).findIndex((v) => !!v) > -1,
-
-    ...options,
-  };
-
-  const ElementContextButtons = makeContextButtons(pluginOptions);
-
-  const PersistentHelper = (props) => (
-    <SidebarEditor {...props} {...pluginOptions} />
-  );
-
-  const install = (config) => {
-    const { slate } = config.settings;
-    if (isInlineElement) {
-      slate.inlineElements[elementType] = true;
-    }
-
-    slate.buttons[pluginId] = (props) => (
-      <ToolbarButton
-        {...props}
-        title={title}
-        {...omit(pluginOptions, omittedProps)}
-      />
-    );
-    slate.contextToolbarButtons.push(ElementContextButtons);
-    slate.persistentHelpers.push(PersistentHelper);
-    slate.extensions = [
-      ...(slate.extensions || []),
-      ...pluginOptions.extensions,
-    ];
-    slate.elements[elementType] = options.element;
-    slate.nodeTypesToHighlight.push(elementType);
-
-    // The plugin authors should manually add the button to the relevant toolbars
-    // slate.toolbarButtons = [...(slate.toolbarButtons || []), pluginId];
-    // slate.expandedToolbarButtons = [...(slate.expandedToolbarButtons || []), pluginId];
-
-    return config;
-  };
-
-  return [install, ElementContextButtons, PersistentHelper];
-};
+export { makeInlineElementPlugin } from './makeInlineElementPlugin';
 
 export const makeBlockElementPlugin = (options) => {
   return [(config) => config];

src/components/ElementEditor/makeInlineElementPlugin.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import SidebarEditor from './SidebarEditor';
+import makeContextButtons from './ContextButtons';
+import PluginEditor from './PluginEditor';
+import {
+  _insertElement,
+  _unwrapElement,
+  _isActiveElement,
+  _getActiveElement,
+} from './utils';
+import messages from './messages';
+import ToolbarButton from './ToolbarButton';
+import tagSVG from '@plone/volto/icons/tag.svg';
+import SchemaProvider from './SchemaProvider';
+import { omit } from 'lodash';
+
+export const makeInlineElementPlugin = (options) => {
+  const { elementType, isInlineElement, pluginId, title = 'Element' } = options;
+  const omittedProps = [
+    'pluginEditor',
+    'getActiveElement',
+    'unwrapElement',
+    'schemaProvider',
+    'hasValue',
+    'elementType',
+    'isInlineElement',
+    'editSchema',
+    'element',
+  ];
+  const pluginOptions = {
+    pluginEditor: PluginEditor,
+    insertElement: _insertElement(elementType),
+    getActiveElement: _getActiveElement(elementType),
+    isActiveElement: _isActiveElement(elementType),
+    unwrapElement: _unwrapElement(elementType),
+    messages,
+    toolbarButtonIcon: tagSVG,
+    title,
+    extensions: [],
+
+    // a component that should provide a schema as a render prop
+    schemaProvider: SchemaProvider,
+    // schema that can be used to create the edit form for this component
+    // editSchema,
+
+    // A generic "validation" method, just finds that a "positive" value
+    // exists.  Plugin authors should overwrite it in options
+    // If it returns true, the value is saved in the editor, othwerwise the
+    // element type is removed from the editor
+    hasValue: (data) => Object.values(data).findIndex((v) => !!v) > -1,
+
+    ...options,
+  };
+
+  const ElementContextButtons = makeContextButtons(pluginOptions);
+
+  const PersistentHelper = (props) => (
+    <SidebarEditor {...props} {...pluginOptions} />
+  );
+
+  const install = (config) => {
+    const { slate } = config.settings;
+    if (isInlineElement) {
+      slate.inlineElements[elementType] = true;
+    }
+
+    slate.buttons[pluginId] = (props) => (
+      <ToolbarButton
+        {...props}
+        title={title}
+        {...omit(pluginOptions, omittedProps)}
+      />
+    );
+    slate.contextToolbarButtons.push(ElementContextButtons);
+    slate.persistentHelpers.push(PersistentHelper);
+    slate.extensions = [
+      ...(slate.extensions || []),
+      ...pluginOptions.extensions,
+    ];
+    slate.elements[elementType] = options.element;
+    slate.nodeTypesToHighlight.push(elementType);
+
+    // The plugin authors should manually add the button to the relevant toolbars
+    // slate.toolbarButtons = [...(slate.toolbarButtons || []), pluginId];
+    // slate.expandedToolbarButtons = [...(slate.expandedToolbarButtons || []), pluginId];
+
+    return config;
+  };
+
+  return [install, ElementContextButtons, PersistentHelper];
+};

src/editor/SlateEditor.jsx

@@ -35,6 +35,7 @@ const Toolbar = (props) => {
 
   return isRangeSelection || hasDomSelection ? (
     <SlateToolbar
+      enableExpando={slate.enableExpandedToolbar}
       className={className}
       selected={true}
       showExpandedToolbar={showExpandedToolbar}

src/editor/index.js

@@ -5,7 +5,8 @@ export SlateEditor from './SlateEditor';
 export default (config) => {
   config.settings.slate = {
     ...slateConfig,
-    showExpandedToolbar: false,
+    // showExpandedToolbar: false,
+    enableExpandedToolbar: false,
   };
   config = installDefaultPlugins(config);
   return config;

src/editor/plugins/SimpleLink/extensions.js

@@ -0,0 +1,30 @@
+import { SIMPLELINK } from 'volto-slate/constants';
+
+export const withSimpleLink = (editor) => {
+  // const { insertData, insertText, isInline } = editor;
+
+  const { isInline } = editor;
+
+  editor.isInline = (element) => {
+    return element.type === SIMPLELINK ? true : isInline(element);
+  };
+
+  // editor.insertText = (text) => {
+  //   if (text && isUrl(text)) {
+  //     wrapLink(editor, text);
+  //   } else {
+  //     insertText(text);
+  //   }
+  // };
+  //
+  // editor.insertData = (data) => {
+  //   const text = data.getData('text/plain');
+  //
+  //   if (text && isUrl(text)) {
+  //     wrapLink(editor, text);
+  //   } else {
+  //     insertData(data);
+  //   }
+  // };
+  return editor;
+};

src/editor/plugins/SimpleLink/index.js

@@ -0,0 +1,51 @@
+import { makeInlineElementPlugin } from 'volto-slate/components/ElementEditor';
+import { SIMPLELINK, LINK } from 'volto-slate/constants';
+import { LinkElement } from './render';
+import { defineMessages } from 'react-intl'; // , defineMessages
+import { withSimpleLink } from './extensions';
+import linkSVG from '@plone/volto/icons/link.svg';
+
+const linkDeserializer = () => {};
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit link',
+    defaultMessage: 'Edit link',
+  },
+  delete: {
+    id: 'Remove link',
+    defaultMessage: 'Remove link',
+  },
+});
+
+export default (config) => {
+  const { slate } = config.settings;
+
+  const PLUGINID = SIMPLELINK;
+
+  slate.toolbarButtons = slate.toolbarButtons.filter((b) => b !== LINK);
+  slate.toolbarButtons = slate.toolbarButtons.slice(0, 2).concat([PLUGINID]);
+  slate.expandedToolbarButtons = slate.expandedToolbarButtons.filter(
+    (b) => b !== LINK,
+  );
+
+  slate.htmlTagsToSlate.A = linkDeserializer;
+
+  const opts = {
+    title: 'SimpleLink',
+    pluginId: PLUGINID,
+    elementType: PLUGINID,
+    element: LinkElement,
+    isInlineElement: true,
+    // editSchema: LinkEditSchema,
+    extensions: [withSimpleLink],
+    hasValue: (formData) => !!formData.link,
+    toolbarButtonIcon: linkSVG,
+    messages,
+  };
+
+  const [installLinkEditor] = makeInlineElementPlugin(opts);
+  config = installLinkEditor(config);
+
+  return config;
+};

src/editor/plugins/SimpleLink/render.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const LinkElement = (props) => {
+  const { attributes, children } = props;
+  return (
+    <span {...attributes} className="slate-editor-link">
+      {children}
+    </span>
+  );
+};

src/editor/ui/SlateToolbar.jsx

@@ -23,6 +23,7 @@ const SlateToolbar = (props) => {
     showExpandedToolbar,
     setShowExpandedToolbar,
     className,
+    enableExpando = false,
   } = props;
   const { slate } = config.settings;
   const { toolbarButtons, expandedToolbarButtons, buttons } = slate;
@@ -38,15 +39,17 @@ const SlateToolbar = (props) => {
       {!showExpandedToolbar && (
         <Toolbar
           toggleButton={
-            <ToolbarButton
-              title="More..."
-              onMouseDown={(event) => {
-                setShowExpandedToolbar(!showExpandedToolbar);
-                event.preventDefault();
-              }}
-              icon={toggleIcon}
-              active={showExpandedToolbar}
-            />
+            enableExpando && (
+              <ToolbarButton
+                title="More..."
+                onMouseDown={(event) => {
+                  setShowExpandedToolbar(!showExpandedToolbar);
+                  event.preventDefault();
+                }}
+                icon={toggleIcon}
+                active={showExpandedToolbar}
+              />
+            )
           }
           className={className}
         >

src/editor/ui/Toolbar.jsx

@@ -5,7 +5,7 @@ import { useSlate } from 'slate-react';
 import Separator from './Separator';
 import BasicToolbar from './BasicToolbar';
 
-const Toolbar = ({ toggleButton, className, children }) => {
+const Toolbar = ({ enableExpando, toggleButton, className, children }) => {
   const ref = useRef();
   const editor = useSlate();
 
@@ -52,7 +52,7 @@ const Toolbar = ({ toggleButton, className, children }) => {
     <Portal>
       <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
         {children}
-        {toggleButton && (
+        {enableExpando && toggleButton && (
           <>
             <Separator />
             {toggleButton}