@os-design/editor 1.0.204 → 1.0.206

package/src/Editor/hooks/usePastedTextHandler.ts

@@ -0,0 +1,47 @@
+import {
+  EditorProps as DraftEditorProps,
+  DraftHandleValue,
+  EditorState,
+  Modifier,
+  RichUtils,
+} from 'draft-js';
+import { useCallback } from 'react';
+
+type UsePastedTextHandlerRes = Exclude<
+  DraftEditorProps['handlePastedText'],
+  undefined
+>;
+
+/**
+ * Pastes only text if the current block is atomic.
+ */
+const usePastedTextHandler = (
+  onChange: (value: EditorState) => void,
+  handler: UsePastedTextHandlerRes
+): UsePastedTextHandlerRes =>
+  useCallback<UsePastedTextHandlerRes>(
+    (text, html, editorState): DraftHandleValue => {
+      const currentBlockType = RichUtils.getCurrentBlockType(editorState);
+
+      if (currentBlockType.startsWith('atomic')) {
+        const contentState = editorState.getCurrentContent();
+        const nextContentState = Modifier.insertText(
+          contentState,
+          editorState.getSelection(),
+          text
+        );
+        const nextEditorState = EditorState.push(
+          editorState,
+          nextContentState,
+          'insert-characters'
+        );
+        onChange(nextEditorState);
+        return 'handled';
+      }
+
+      return handler(text, html, editorState);
+    },
+    [onChange, handler]
+  );
+
+export default usePastedTextHandler;

package/src/Editor/hooks/useReturnHandler.ts

@@ -0,0 +1,37 @@
+import { EditorProps as DraftEditorProps, EditorState } from 'draft-js';
+import { useCallback } from 'react';
+import addNewBlockAt from '../utils/addNewBlockAt';
+import getCurrentBlock from '../utils/getCurrentBlock';
+
+type UseReturnHandlerRes = NonNullable<DraftEditorProps['handleReturn']>;
+
+/**
+ * Adds a new unstyled block if the user presses the return key.
+ */
+const useReturnHandler = (
+  onChange: (value: EditorState) => void,
+  handler: UseReturnHandlerRes
+): UseReturnHandlerRes =>
+  useCallback<UseReturnHandlerRes>(
+    (e, editorState) => {
+      const currentBlock = getCurrentBlock(editorState);
+      const currentBlockType = currentBlock.getType();
+
+      if (
+        currentBlockType.startsWith('atomic') ||
+        currentBlockType.startsWith('header')
+      ) {
+        const nextEditorState = addNewBlockAt(
+          editorState,
+          currentBlock.getKey()
+        );
+        onChange(nextEditorState);
+        return 'handled';
+      }
+
+      return handler(e, editorState);
+    },
+    [onChange, handler]
+  );
+
+export default useReturnHandler;

package/src/Editor/hooks/useStyleToolbarProps.ts

@@ -0,0 +1,53 @@
+import { EditorState, RichUtils } from 'draft-js';
+import { useEffect, useState } from 'react';
+import getSelectionRange from '../utils/getSelectionRange';
+
+interface Rect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface UseStyleToolbarPropsRes {
+  trigger: Rect;
+  visible: boolean;
+}
+
+/**
+ * Updates the visibility of the style toolbar
+ */
+const useStyleToolbarProps = (value: EditorState): UseStyleToolbarPropsRes => {
+  const [trigger, setTrigger] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!value) return;
+    const selectionRange = getSelectionRange();
+
+    // Do not show the panel if either there is no selected text,
+    // or the selection range is collapsed,
+    // or the selected text is in an atomic block.
+    if (
+      !selectionRange ||
+      value.getSelection().isCollapsed() ||
+      RichUtils.getCurrentBlockType(value).startsWith('atomic')
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    // Otherwise, set the rect of the selection range
+    setTrigger(selectionRange.getBoundingClientRect());
+    setVisible(true);
+  }, [value]);
+
+  return { trigger, visible };
+};
+
+export default useStyleToolbarProps;

package/src/Editor/index.tsx

@@ -0,0 +1,203 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { InputContainer } from '@os-design/core';
+import { WithSize } from '@os-design/styles';
+import { useForwardedRef, useForwardedState } from '@os-design/utils';
+
+import {
+  Editor as DraftEditor,
+  EditorProps as DraftEditorProps,
+  EditorState,
+} from 'draft-js';
+import React, { forwardRef, useCallback, useState } from 'react';
+import BlockToolbar from './BlockToolbar';
+import StyleToolbar from './StyleToolbar';
+import { BlockToolbarItem } from './blocks/types';
+import useBlockToolbarProps from './hooks/useBlockToolbarProps';
+import usePastedTextHandler from './hooks/usePastedTextHandler';
+import useReturnHandler from './hooks/useReturnHandler';
+import useStyleToolbarProps from './hooks/useStyleToolbarProps';
+
+import defaultDraftJsStyles from './styles/defaultDraftJsStyles';
+import overrideDraftJsStyles from './styles/overrideDraftJsStyles';
+import createEmptyEditorState from './utils/createEmptyEditorState';
+
+import defaultStyleToolbarItems, {
+  StyleToolbarItem,
+} from './utils/defaultStyleToolbarItems';
+
+export interface EditorProps
+  extends Omit<DraftEditorProps, 'editorState' | 'onChange'>,
+    WithSize {
+  /**
+   * Whether the editor is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Available styles in the toolbar.
+   * @default undefined
+   */
+  styleToolbarItems?: StyleToolbarItem[];
+  /**
+   * Available blocks in the toolbar.
+   * @default undefined
+   */
+  blockToolbarItems?: BlockToolbarItem[];
+  /**
+   * The editor state.
+   * @default undefined
+   */
+  value?: EditorState;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: EditorState;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: EditorState) => void;
+}
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+  `;
+
+const Container = styled(InputContainer)`
+  height: unset;
+  cursor: text;
+
+  padding: ${(p) => p.theme.editorPaddingVertical}em
+    ${(p) => p.theme.inputPaddingHorizontal}em;
+  min-height: ${(p) => p.theme.editorMinHeight}em;
+
+  ${defaultDraftJsStyles};
+  ${overrideDraftJsStyles};
+  ${disabledStyles};
+`;
+
+/**
+ * Rich text editor based on the Draft.js.
+ */
+const Editor = forwardRef<DraftEditor, EditorProps>(
+  (
+    {
+      disabled = false,
+      styleToolbarItems = defaultStyleToolbarItems,
+      blockToolbarItems = [],
+      value,
+      defaultValue = createEmptyEditorState(),
+      onChange,
+      size,
+      readOnly,
+      handleReturn = () => 'not-handled',
+      handlePastedText = () => 'not-handled',
+      ...rest
+    },
+    ref
+  ) => {
+    const [editorRef, mergedEditorRef] = useForwardedRef(ref);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    // Used by ImageBlock to make the editor read-only
+    // while an image is being uploaded
+    const [innerReadOnly, setInnerReadOnly] = useState(false);
+
+    // Get the trigger and visible props for the toolbars
+    const styleToolbarProps = useStyleToolbarProps(
+      forwardedValue || defaultValue
+    );
+    const blockToolbarProps = useBlockToolbarProps(
+      forwardedValue || defaultValue,
+      (blockToolbarItems || []).length > 0
+    );
+
+    // Move the caret to the end of the content when the focus event was fired
+    const setEditorState = useCallback(
+      (editorState: EditorState) => {
+        if (!editorState.getSelection().getHasFocus()) {
+          setForwardedValue(EditorState.moveSelectionToEnd(editorState));
+          return;
+        }
+        setForwardedValue(editorState);
+      },
+      [setForwardedValue]
+    );
+
+    const blockRenderer = useCallback(
+      (block) => {
+        const blockConfig = blockToolbarItems.find(
+          (item) => item.type === block.getType()
+        );
+        if (!blockConfig) return null;
+        return { component: blockConfig.component };
+      },
+      [blockToolbarItems]
+    );
+
+    // Custom handlers
+    const returnHandler = useReturnHandler(setForwardedValue, handleReturn);
+    const pastedTextHandler = usePastedTextHandler(
+      setForwardedValue,
+      handlePastedText
+    );
+
+    return (
+      <>
+        <Container
+          disabled={disabled}
+          size={size}
+          tabIndex={!disabled ? 0 : -1}
+          role={!disabled ? 'textbox' : undefined}
+          onFocus={() => {
+            if (disabled || !editorRef.current) return;
+            editorRef.current.focus();
+          }}
+        >
+          <DraftEditor
+            onChange={setEditorState}
+            blockRendererFn={blockRenderer}
+            handleReturn={returnHandler}
+            handlePastedText={pastedTextHandler}
+            readOnly={readOnly || innerReadOnly || disabled}
+            stripPastedStyles
+            {...rest}
+            editorState={forwardedValue || defaultValue}
+            ref={mergedEditorRef}
+          />
+        </Container>
+
+        <StyleToolbar
+          {...styleToolbarProps}
+          size={size}
+          items={styleToolbarItems}
+          value={forwardedValue || defaultValue}
+          onChange={setForwardedValue}
+        />
+
+        <BlockToolbar
+          {...blockToolbarProps}
+          placement='right'
+          gap={2.5}
+          size={size}
+          items={blockToolbarItems}
+          value={forwardedValue || defaultValue}
+          onChange={setForwardedValue}
+          setReadOnly={setInnerReadOnly}
+        />
+      </>
+    );
+  }
+);
+
+Editor.displayName = 'Editor';
+
+export default Editor;

package/src/Editor/styles/defaultDraftJsStyles.ts

@@ -0,0 +1,179 @@
+import { css } from '@emotion/react';
+
+/**
+ * Default Draft.js styles.
+ * The original styles located in `node_modules/draft-js/dist/Draft.css`.
+ */
+const defaultDraftJsStyles = css`
+  .DraftEditor-editorContainer,
+  .DraftEditor-root,
+  .public-DraftEditor-content {
+    height: inherit;
+    text-align: initial;
+  }
+  .public-DraftEditor-content[contenteditable='true'] {
+    -webkit-user-modify: read-write-plaintext-only;
+  }
+  .DraftEditor-root {
+    position: relative;
+  }
+  .DraftEditor-editorContainer {
+    background-color: rgba(255, 255, 255, 0);
+    border-left: 0.1px solid transparent;
+    position: relative;
+    z-index: 1;
+  }
+  .public-DraftEditor-block {
+    position: relative;
+  }
+  .DraftEditor-alignLeft .public-DraftStyleDefault-block {
+    text-align: left;
+  }
+  .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {
+    left: 0;
+    text-align: left;
+  }
+  .DraftEditor-alignCenter .public-DraftStyleDefault-block {
+    text-align: center;
+  }
+  .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {
+    margin: 0 auto;
+    text-align: center;
+    width: 100%;
+  }
+  .DraftEditor-alignRight .public-DraftStyleDefault-block {
+    text-align: right;
+  }
+  .DraftEditor-alignRight .public-DraftEditorPlaceholder-root {
+    right: 0;
+    text-align: right;
+  }
+  .public-DraftEditorPlaceholder-root {
+    color: #9197a3;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+  }
+  .public-DraftEditorPlaceholder-hasFocus {
+    color: #bdc1c9;
+  }
+  .DraftEditorPlaceholder-hidden {
+    display: none;
+  }
+  .public-DraftStyleDefault-block {
+    position: relative;
+    white-space: pre-wrap;
+  }
+  .public-DraftStyleDefault-ltr {
+    direction: ltr;
+    text-align: left;
+  }
+  .public-DraftStyleDefault-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+  .public-DraftStyleDefault-listLTR {
+    direction: ltr;
+  }
+  .public-DraftStyleDefault-listRTL {
+    direction: rtl;
+  }
+  .public-DraftStyleDefault-ol,
+  .public-DraftStyleDefault-ul {
+    margin: 16px 0;
+    padding: 0;
+  }
+  .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
+    margin-left: 1.5em;
+  }
+  .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL {
+    margin-right: 1.5em;
+  }
+  .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR {
+    margin-left: 3em;
+  }
+  .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL {
+    margin-right: 3em;
+  }
+  .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR {
+    margin-left: 4.5em;
+  }
+  .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL {
+    margin-right: 4.5em;
+  }
+  .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR {
+    margin-left: 6em;
+  }
+  .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL {
+    margin-right: 6em;
+  }
+  .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR {
+    margin-left: 7.5em;
+  }
+  .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL {
+    margin-right: 7.5em;
+  }
+  .public-DraftStyleDefault-unorderedListItem {
+    list-style-type: square;
+    position: relative;
+  }
+  .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
+    list-style-type: disc;
+  }
+  .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 {
+    list-style-type: circle;
+  }
+  .public-DraftStyleDefault-orderedListItem {
+    list-style-type: none;
+    position: relative;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
+    left: -36px;
+    position: absolute;
+    text-align: right;
+    width: 30px;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before {
+    position: absolute;
+    right: -36px;
+    text-align: left;
+    width: 30px;
+  }
+  .public-DraftStyleDefault-orderedListItem:before {
+    content: counter(ol0) '. ';
+    counter-increment: ol0;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before {
+    content: counter(ol1, lower-alpha) '. ';
+    counter-increment: ol1;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before {
+    content: counter(ol2, lower-roman) '. ';
+    counter-increment: ol2;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before {
+    content: counter(ol3) '. ';
+    counter-increment: ol3;
+  }
+  .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before {
+    content: counter(ol4, lower-alpha) '. ';
+    counter-increment: ol4;
+  }
+  .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
+    counter-reset: ol0;
+  }
+  .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
+    counter-reset: ol1;
+  }
+  .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
+    counter-reset: ol2;
+  }
+  .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
+    counter-reset: ol3;
+  }
+  .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
+    counter-reset: ol4;
+  }
+`;
+
+export default defaultDraftJsStyles;

package/src/Editor/styles/overrideDraftJsStyles.ts

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { clr } from '@os-design/theming';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const overrideDraftJsStyles = (p) => css`
+  .DraftEditor-root {
+    width: 100%;
+    overflow: hidden;
+    line-height: ${p.theme.lineHeight};
+    color: ${clr(p.theme.colorText)};
+  }
+  .public-DraftEditorPlaceholder-root {
+    color: ${clr(p.theme.inputColorPlaceholder)};
+  }
+  .public-DraftStyleDefault-block {
+    margin: 0 0 ${p.theme.paragraphMarginBottom}em;
+  }
+`;
+
+export default overrideDraftJsStyles;

package/src/Editor/utils/addNewBlockAt.ts

@@ -0,0 +1,59 @@
+import { ContentBlock, ContentState, EditorState, genKey } from 'draft-js';
+import Immutable from 'immutable';
+
+const addNewBlockAt = (
+  editorState: EditorState,
+  pivotBlockKey: string,
+  type = 'unstyled',
+  data: Record<string, any> = {} // eslint-disable-line @typescript-eslint/no-explicit-any
+): EditorState => {
+  const contentState = editorState.getCurrentContent();
+  const blockMap = contentState.getBlockMap();
+  const pivotBlock = blockMap.get(pivotBlockKey);
+  if (!pivotBlock)
+    throw new Error(
+      `The pivot key - ${pivotBlockKey} is not present in blockMap`
+    );
+  const blocksBefore = blockMap.toSeq().takeUntil((v) => v === pivotBlock);
+  const blocksAfter = blockMap
+    .toSeq()
+    .skipUntil((v) => v === pivotBlock)
+    .rest();
+  const key = genKey();
+
+  const block = new ContentBlock({
+    key,
+    type,
+    text: '',
+    characterList: Immutable.List(),
+    depth: 0,
+    data: Immutable.Map(data),
+  });
+
+  const selectionState = editorState.getSelection();
+  const nextBlockMap = blocksBefore
+    .concat(
+      [
+        [pivotBlockKey, pivotBlock],
+        [key, block],
+      ],
+      blocksAfter
+    )
+    .toOrderedMap();
+
+  const nextContentState = contentState.merge({
+    blockMap: nextBlockMap,
+    selectionBefore: selectionState,
+    selectionAfter: selectionState.merge({
+      anchorKey: key,
+      anchorOffset: 0,
+      focusKey: key,
+      focusOffset: 0,
+      isBackward: false,
+    }),
+  }) as ContentState;
+
+  return EditorState.push(editorState, nextContentState, 'split-block');
+};
+
+export default addNewBlockAt;

package/src/Editor/utils/changeBlock.ts

@@ -0,0 +1,20 @@
+import { ContentBlock, ContentState, EditorState } from 'draft-js';
+
+const changeBlock = (
+  editorState: EditorState,
+  block: ContentBlock,
+  type: string,
+  data: Record<string, any> = {} // eslint-disable-line @typescript-eslint/no-explicit-any
+): EditorState => {
+  const contentState = editorState.getCurrentContent();
+
+  const nextCurrentBlock = block.merge({ type, data }) as ContentBlock;
+  const nextContentState = contentState.merge({
+    blockMap: contentState.getBlockMap().set(block.getKey(), nextCurrentBlock),
+    selectionAfter: editorState.getSelection(),
+  }) as ContentState;
+
+  return EditorState.push(editorState, nextContentState, 'change-block-type');
+};
+
+export default changeBlock;

package/src/Editor/utils/createContentEditorState.ts

@@ -0,0 +1,7 @@
+import { ContentState, EditorState } from 'draft-js';
+import createDecorator from './createDecorator';
+
+const createContentEditorState = (contentState: ContentState): EditorState =>
+  EditorState.createWithContent(contentState, createDecorator());
+
+export default createContentEditorState;

package/src/Editor/utils/createDecorator.ts

@@ -0,0 +1,7 @@
+import { CompositeDecorator } from 'draft-js';
+import linkDecorator from '../decorators/linkDecorator';
+
+const createDecorator = (): CompositeDecorator =>
+  new CompositeDecorator([linkDecorator]);
+
+export default createDecorator;

package/src/Editor/utils/createEmptyEditorState.ts

@@ -0,0 +1,7 @@
+import { EditorState } from 'draft-js';
+import createDecorator from './createDecorator';
+
+const createEmptyEditorState = (): EditorState =>
+  EditorState.createEmpty(createDecorator());
+
+export default createEmptyEditorState;

package/src/Editor/utils/defaultStyleToolbarItems.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import {
+  Bold,
+  FontSize,
+  Link as LinkIcon,
+  OrderedList,
+  UnorderedList,
+} from '@os-design/icons';
+import React from 'react';
+
+export interface StyleToolbarItem {
+  name: string;
+  type: 'block' | 'inline';
+  icon: React.ReactNode;
+}
+
+const FontSizeSmall = styled(FontSize)`
+  transform: scale(0.7);
+`;
+
+const defaultStyleToolbarItems: StyleToolbarItem[] = [
+  { name: 'header-two', type: 'block', icon: <FontSize /> },
+  { name: 'header-three', type: 'block', icon: <FontSizeSmall /> },
+  { name: 'BOLD', type: 'inline', icon: <Bold /> },
+  { name: 'unordered-list-item', type: 'block', icon: <UnorderedList /> },
+  { name: 'ordered-list-item', type: 'block', icon: <OrderedList /> },
+  { name: 'LINK', type: 'inline', icon: <LinkIcon /> },
+];
+
+export default defaultStyleToolbarItems;

package/src/Editor/utils/getCurrentBlock.ts

@@ -0,0 +1,9 @@
+import { ContentBlock, EditorState } from 'draft-js';
+
+const getCurrentBlock = (editorState: EditorState): ContentBlock => {
+  const selectionState = editorState.getSelection();
+  const contentState = editorState.getCurrentContent();
+  return contentState.getBlockForKey(selectionState.getStartKey());
+};
+
+export default getCurrentBlock;