Tools configuration of RichTextToolBar

[simoco0781]

Discussed in #260

^{Originally posted by simoco0781 March 6, 2023}
Hi, is there any way to add/remove tools from the toolbar.
Or may it be possible to just add "superscript" and "subscript" pending the replacement by Slate.js?

[m-Ryan]

At present, it is not straightforward to use Slate.js for extension, but it is indeed feasible through Slate.js. The JSON of easy-email and Slate.js are very similar. However, it requires a lot of effort to achieve compatibility, and it cannot be done quickly.

[simoco0781]

Thank you @m-Ryan for your quick response.
Could it be possible to just add supscript and subscript excCommand to your RichTextEditor ?

[m-Ryan]

If you are willing to provide a PR, we would be happy to accept it.

Perhaps it just needs to add more parameters, such as

toolbar?: {
prefix?: React.ReactNode;
list?: Array<'bold'|'italic'...>;
subfix?: React.ReactNode;
};

[simoco0781]

It should be in the Tools components :

<Sup
    currentRange={selectionRange}
    onChange={() => execCommandWithRange('superscript')}
  />
  <Sub
    currentRange={selectionRange}
    onChange={() => execCommandWithRange('subscript')}
  />

with these new Tools :

<Sup
          currentRange={selectionRange}
          onChange={() => execCommandWithRange('superscript')}
        />
        <Sub
          currentRange={selectionRange}
          onChange={() => execCommandWithRange('subscript')}
        />

and

import { PopoverProps, Tooltip } from '@arco-design/web-react';
import React, { useCallback, useMemo } from 'react';
import { IconFont } from 'easy-email-editor';
import { ToolItem } from '../ToolItem';
import { EMAIL_BLOCK_CLASS_NAME } from 'easy-email-core';
import { useSelectionRange } from '@extensions/AttributePanel/hooks/useSelectionRange';

export interface LinkProps extends PopoverProps {
  currentRange: Range | null | undefined;
  onChange: () => void;
}

function getSubNode(
  node: Node | null | undefined,
): Element | null {
  if (!node) return null;
  if (node instanceof Element && node.classList.contains(EMAIL_BLOCK_CLASS_NAME)) return null;
  if (node instanceof Element && node.tagName.toLocaleLowerCase() === 'sub') return node;
  return getSubNode(node.parentNode);
}

export function Sub(props: LinkProps) {
  const { onChange } = props;
  const { setRangeByElement } = useSelectionRange();
  const node = useMemo(() => {
    return getSubNode(props.currentRange?.commonAncestorContainer);

  }, [props.currentRange]);

  const onClick = useCallback(() => {
    if (node) {
      setRangeByElement(node);
    }
    onChange();
  }, [node, onChange, setRangeByElement]);

  return (
    <Tooltip
      color='#fff'
      position='tl'
      content="Sub"
    >
      <ToolItem title='Sub' isActive={Boolean(node)}
      icon={
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M32 64C14.3 64 0 78.3 0 96s14.3 32 32 32H47.3l89.6 128L47.3 384H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H64c10.4 0 20.2-5.1 26.2-13.6L176 311.8l85.8 122.6c6 8.6 15.8 13.6 26.2 13.6h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H304.7L215.1 256l89.6-128H320c17.7 0 32-14.3 32-32s-14.3-32-32-32H288c-10.4 0-20.2 5.1-26.2 13.6L176 200.2 90.2 77.6C84.2 69.1 74.4 64 64 64H32zM480 320c0-11.1-5.7-21.4-15.2-27.2s-21.2-6.4-31.1-1.4l-32 16c-15.8 7.9-22.2 27.1-14.3 42.9C393 361.5 404.3 368 416 368v80c-17.7 0-32 14.3-32 32s14.3 32 32 32h32 32c17.7 0 32-14.3 32-32s-14.3-32-32-32V320z" /></svg>
      } onClick={onClick}
      />
    </Tooltip>
  );
}

Notice there is no icons for super and sub. (The reason why there are ..)

[m-Ryan]

You can try it, I'm not sure if it works

[simoco0781]

I tried and it's functionnal.