@pie-lib/editable-html 10.0.0-beta.6 → 10.0.0

package/src/plugins/table/table-toolbar.jsx

@@ -14,7 +14,7 @@ const log = debug('@pie-lib:editable-html:plugins:table-toolbar');
 export class TableToolbar extends React.Component {
   static propTypes = {
     plugins: PropTypes.array.isRequired,
-    editor: PropTypes.object.isRequired,
+    value: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onAddRow: PropTypes.func.isRequired,
     onRemoveRow: PropTypes.func.isRequired,
@@ -29,7 +29,8 @@ export class TableToolbar extends React.Component {
 
   static defaultProps = {
     plugins: [],
-    onChange: () => {}
+    value: {},
+    onChange: () => {},
   };
 
   onDone = (e) => {
@@ -41,7 +42,7 @@ export class TableToolbar extends React.Component {
   render() {
     const {
       plugins,
-      editor,
+      value,
       onChange,
       onAddRow,
       onRemoveRow,
@@ -73,12 +74,7 @@ export class TableToolbar extends React.Component {
             <RemoveTable />
           </Button>
           {plugins.map((p, index) => (
-            <ToolbarButton
-              key={`plugin-${index}`}
-              editor={editor}
-              {...p.toolbar}
-              onChange={onChange}
-            />
+            <ToolbarButton key={`plugin-${index}`} {...p.toolbar} value={value} onChange={onChange} />
           ))}
           <Button onClick={onToggleBorder} active={hasBorder}>
             <BorderAll />

package/src/plugins/toolbar/default-toolbar.jsx

@@ -1,43 +1,26 @@
 import { DoneButton } from './done-button';
 import PropTypes from 'prop-types';
 import React from 'react';
+import SlatePropTypes from 'slate-prop-types';
 
 import { hasBlock, hasMark } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 
 import { Button, MarkButton } from './toolbar-buttons';
 import debug from 'debug';
-import { Editor, Element as SlateElement } from "slate";
+import { is } from 'immutable';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
-const isMarkActive = (editor, format) => {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
-};
-
-const isBlockActive = (editor, format) => {
-  const { selection } = editor;
-  if (!selection) return false;
-
-  const [match] = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
-    })
-  );
-
-  return !!match;
-};
-
 export const ToolbarButton = (props) => {
-  const { editor } = props;
   const onToggle = () => {
-    props.onToggle(editor, props);
+    const c = props.onToggle(props.value.change(), props);
+
+    props.onChange(c);
   };
 
   if (props.isMark) {
-    const isActive = isMarkActive(editor, props.type);
+    const isActive = hasMark(props.value, props.type);
 
     log('[ToolbarButton] mark:isActive: ', isActive);
 
@@ -48,9 +31,7 @@ export const ToolbarButton = (props) => {
     );
   } else {
     const { disabled } = props;
-    const isActive = props.isActive
-      ? props.isActive(editor, props.type)
-      : isBlockActive(editor, props.type);
+    const isActive = props.isActive ? props.isActive(props.value, props.type) : hasBlock(props.value, props.type);
 
     log('[ToolbarButton] block:isActive: ', isActive);
 
@@ -58,7 +39,7 @@ export const ToolbarButton = (props) => {
       <Button
         active={isActive}
         disabled={disabled}
-        onClick={() => props.onClick(editor)}
+        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
         extraStyles={props.buttonStyles}
       >
         {props.icon}
@@ -68,25 +49,26 @@ export const ToolbarButton = (props) => {
 };
 
 ToolbarButton.propTypes = {
+  buttonStyles: PropTypes.object,
   disabled: PropTypes.bool,
-  icon: PropTypes.object,
-  editor: PropTypes.object,
-  isActive: PropTypes.func,
+  icon: PropTypes.any,
+  isActive: PropTypes.bool,
   isMark: PropTypes.bool,
-  onClick: PropTypes.func,
+  getFocusedValue: PropTypes.func,
   onToggle: PropTypes.func,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   type: PropTypes.string,
-  buttonStyles: PropTypes.object,
+  value: PropTypes.object,
 };
 
-const isActiveToolbarPlugin = (props) => plugin => {
+const isActiveToolbarPlugin = (props) => (plugin) => {
   const isDisabled = (props[plugin.name] || {}).disabled;
 
   return plugin && plugin.toolbar && !isDisabled;
 };
 
 export const DefaultToolbar = ({
-  editor,
   plugins,
   pluginProps,
   value,
@@ -96,26 +78,30 @@ export const DefaultToolbar = ({
   classes,
   showDone,
   deletable,
+  isHtmlMode,
 }) => {
-  const filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map((p) => p.toolbar);
+  let filtered;
+
+  if (isHtmlMode) {
+    filtered = plugins
+      .filter((plugin) => {
+        return isActiveToolbarPlugin(pluginProps)(plugin) && (plugin.name === 'characters' || plugin.name === 'html');
+      })
+      .map((p) => p.toolbar);
+  } else {
+    filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map((p) => p.toolbar);
+  }
 
   return (
     <div className={classes.defaultToolbar}>
       <div className={classes.buttonsContainer}>
         {filtered.map((p, index) => {
           return (
-            <ToolbarButton
-              {...p}
-              editor={editor}
-              key={index}
-              value={value}
-              onChange={onChange}
-              getFocusedValue={getFocusedValue}
-            />
+            <ToolbarButton {...p} key={index} value={value} onChange={onChange} getFocusedValue={getFocusedValue} />
           );
         })}
       </div>
-      {showDone && !deletable && <DoneButton onClick={() => onDone(editor)} />}
+      {showDone && !deletable && <DoneButton onClick={onDone} />}
     </div>
   );
 };
@@ -124,13 +110,7 @@ DefaultToolbar.propTypes = {
   classes: PropTypes.object.isRequired,
   plugins: PropTypes.array.isRequired,
   pluginProps: PropTypes.object,
-  value: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.string,
-      children: PropTypes.array,
-      data: PropTypes.object
-    })
-  ),
+  value: SlatePropTypes.value.isRequired,
   onChange: PropTypes.func.isRequired,
   getFocusedValue: PropTypes.func.isRequired,
   onDone: PropTypes.func.isRequired,

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -1,15 +1,128 @@
 import React from 'react';
-
 import Toolbar from './toolbar';
 import classNames from 'classnames';
 import debug from 'debug';
 import { primary } from '../../theme';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
+import SlatePropTypes from 'slate-prop-types';
+import { IS_FIREFOX } from 'slate-dev-environment';
 import { color } from '@pie-lib/render-ui';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');
 
+export class EditorAndToolbar extends React.Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    value: SlatePropTypes.value.isRequired,
+    plugins: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    getFocusedValue: PropTypes.func.isRequired,
+    onDone: PropTypes.func.isRequired,
+    onDataChange: PropTypes.func,
+    toolbarRef: PropTypes.func,
+    focusedNode: SlatePropTypes.node,
+    readOnly: PropTypes.bool,
+    disableScrollbar: PropTypes.bool,
+    disableUnderline: PropTypes.bool,
+    autoWidth: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    pluginProps: PropTypes.object,
+    toolbarOpts: PropTypes.shape({
+      position: PropTypes.oneOf(['bottom', 'top']),
+      alwaysVisible: PropTypes.bool,
+      error: PropTypes.string,
+      noBorder: PropTypes.any,
+    }),
+  };
+
+  /** This is an interim fix until this PR is merged in slate:
+   * https://github.com/ianstormtaylor/slate/pull/2236
+   */
+  componentDidMount() {
+    if (IS_FIREFOX) {
+      this.editorRef.tmp.isUpdatingSelection = true;
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      children,
+      value,
+      plugins,
+      onChange,
+      getFocusedValue,
+      onDone,
+      focusedNode,
+      autoWidth,
+      readOnly,
+      disableScrollbar,
+      disableUnderline,
+      pluginProps,
+      toolbarOpts,
+      onDataChange,
+      toolbarRef,
+    } = this.props;
+
+    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
+    const holderNames = classNames(classes.editorHolder, {
+      [classes.editorInFocus]: inFocus,
+      [classes.readOnly]: readOnly,
+      [classes.disabledUnderline]: disableUnderline,
+      [classes.disabledScrollbar]: disableScrollbar,
+    });
+    let clonedChildren = children;
+
+    if (typeof children !== 'string') {
+      clonedChildren = React.cloneElement(children, {
+        ref: (el) => (this.editorRef = el),
+      });
+    }
+
+    log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
+
+    return (
+      <div
+        className={classNames(
+          {
+            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
+            [classes.error]: toolbarOpts && toolbarOpts.error,
+          },
+          classes.root,
+        )}
+      >
+        <div className={holderNames}>
+          <div
+            className={classNames(
+              {
+                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
+              },
+              classes.children,
+            )}
+          >
+            {clonedChildren}
+          </div>
+        </div>
+        <Toolbar
+          autoWidth={autoWidth}
+          plugins={plugins}
+          focusedNode={focusedNode}
+          value={value}
+          isFocused={inFocus}
+          onChange={onChange}
+          getFocusedValue={getFocusedValue}
+          onDone={onDone}
+          onDataChange={onDataChange}
+          toolbarRef={toolbarRef}
+          pluginProps={pluginProps}
+          toolbarOpts={toolbarOpts}
+        />
+      </div>
+    );
+  }
+}
+
 const style = (theme) => ({
   root: {
     position: 'relative',
@@ -24,10 +137,6 @@ const style = (theme) => ({
       // needed in order to be able to put the focus before a void element when it is the first one in the editor
       padding: '5px',
     },
-    '& [data-slate-void="true"]': {
-      // needed in order to be able to put the focus before a void element when it is the first one in the editor
-      padding: '1px',
-    }
   },
   children: {
     padding: '10px 16px',
@@ -74,9 +183,6 @@ const style = (theme) => ({
         height: '2px',
       },
     },
-    '& :focus-visible': {
-      outline: 'none !important',
-    }
   },
   disabledUnderline: {
     '&::before': {
@@ -143,117 +249,4 @@ const style = (theme) => ({
   },
 });
 
-export const EditorAndToolbar = props => {
-  const {
-    editor,
-    classes,
-    children,
-    value,
-    plugins,
-    onChange,
-    getFocusedValue,
-    onDone,
-    focusedNode,
-    autoWidth,
-    readOnly,
-    disableScrollbar,
-    disableUnderline,
-    pluginProps,
-    toolbarOpts,
-    toolbarRef,
-    isFocused
-  } = props;
-
-  const holderNames = classNames(classes.editorHolder, {
-    [classes.editorInFocus]: isFocused,
-    [classes.readOnly]: readOnly,
-    [classes.disabledUnderline]: disableUnderline,
-    [classes.disabledScrollbar]: disableScrollbar
-  });
-  let clonedChildren = children;
-
-  log(
-    '[render] inFocus: ',
-    isFocused,
-    'value.isFocused:',
-    value.isFocused,
-    'focused node: ',
-    focusedNode
-  );
-
-  return (
-    <div
-      className={classNames(
-        {
-          [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
-          [classes.error]: toolbarOpts && toolbarOpts.error
-        },
-        classes.root
-      )}
-    >
-      <div className={holderNames}>
-        <div
-          className={classNames(
-            {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
-            },
-            classes.children
-          )}
-        >
-          {clonedChildren}
-        </div>
-      </div>
-      <Toolbar
-        editor={editor}
-        autoWidth={autoWidth}
-        plugins={plugins}
-        focusedNode={focusedNode}
-        value={value}
-        isFocused={isFocused}
-        onChange={onChange}
-        getFocusedValue={getFocusedValue}
-        onDone={onDone}
-        toolbarRef={toolbarRef}
-        pluginProps={pluginProps}
-        toolbarOpts={toolbarOpts}
-      />
-    </div>
-  );
-};
-
-EditorAndToolbar.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  value: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.string,
-      children: PropTypes.array,
-      data: PropTypes.object
-    })
-  ),
-  editor: PropTypes.object.isRequired,
-  isFocused: PropTypes.bool,
-  plugins: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-  getFocusedValue: PropTypes.func.isRequired,
-  onDone: PropTypes.func.isRequired,
-  toolbarRef: PropTypes.func,
-  focusedNode: PropTypes.shape({
-    type: PropTypes.string,
-    children: PropTypes.array,
-    data: PropTypes.object
-  }),
-  readOnly: PropTypes.bool,
-  disableScrollbar: PropTypes.bool,
-  disableUnderline: PropTypes.bool,
-  autoWidth: PropTypes.bool,
-  classes: PropTypes.object.isRequired,
-  pluginProps: PropTypes.object,
-  toolbarOpts: PropTypes.shape({
-    alwaysVisible: PropTypes.bool,
-    error: PropTypes.string,
-    noBorder: PropTypes.bool,
-    position: PropTypes.oneOf(['bottom', 'top']),
-  })
-};
-
 export default withStyles(style)(EditorAndToolbar);