@os-design/editor 1.0.204 → 1.0.206

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/editor",
-  "version": "1.0.204",
+  "version": "1.0.206",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,14 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,11 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.199",
-    "@os-design/icons": "^1.0.47",
-    "@os-design/styles": "^1.0.44",
-    "@os-design/theming": "^1.0.42",
-    "@os-design/utils": "^1.0.61",
+    "@os-design/core": "^1.0.201",
+    "@os-design/icons": "^1.0.49",
+    "@os-design/styles": "^1.0.46",
+    "@os-design/theming": "^1.0.44",
+    "@os-design/utils": "^1.0.63",
     "draft-js": "^0.11.7"
   },
   "devDependencies": {
@@ -49,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "bbd193f118a3128033d4d99ffcb4e96fe06f0dba"
+  "gitHead": "e5d8409760608145d2c738aa5789d0465ae5416f"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/Editor/BlockToolbar.tsx

@@ -0,0 +1,49 @@
+import { PopoverProps } from '@os-design/core';
+import { EditorState } from 'draft-js';
+import React, { useCallback } from 'react';
+
+import Toolbar from './Toolbar';
+import ToolbarButton from './ToolbarButton';
+import { BlockToolbarItem } from './blocks/types';
+import getCurrentBlock from './utils/getCurrentBlock';
+
+interface BlockToolbarProps extends Omit<PopoverProps, 'onChange'> {
+  items: BlockToolbarItem[];
+  value: EditorState;
+  onChange: (value: EditorState) => void;
+  setReadOnly: (readOnly: boolean) => void;
+}
+
+const BlockToolbar: React.FC<BlockToolbarProps> = ({
+  items,
+  value,
+  onChange,
+  setReadOnly,
+  ...rest
+}) => {
+  const clickHandler = useCallback<(item: BlockToolbarItem) => void>(
+    ({ onClick }) => {
+      const currentBlock = getCurrentBlock(value);
+      if (currentBlock.getType() !== 'unstyled' || currentBlock.getLength() > 0)
+        return;
+      onClick({
+        value,
+        onChange,
+        setReadOnly,
+      });
+    },
+    [value, onChange, setReadOnly]
+  );
+
+  return (
+    <Toolbar {...rest}>
+      {items.map((item) => (
+        <ToolbarButton key={item.type} onClick={() => clickHandler(item)}>
+          {item.icon}
+        </ToolbarButton>
+      ))}
+    </Toolbar>
+  );
+};
+
+export default BlockToolbar;

package/src/Editor/StyleToolbar.tsx

@@ -0,0 +1,80 @@
+import { PopoverProps } from '@os-design/core';
+import { EditorState, RichUtils } from 'draft-js';
+
+import React, { useCallback, useMemo } from 'react';
+import Toolbar from './Toolbar';
+import ToolbarButton from './ToolbarButton';
+
+import { StyleToolbarItem } from './utils/defaultStyleToolbarItems';
+import setLink from './utils/setLink';
+import unsetLink from './utils/unsetLink';
+
+interface StyleToolbarProps extends Omit<PopoverProps, 'onChange'> {
+  items: StyleToolbarItem[];
+  value: EditorState;
+  onChange: (value: EditorState) => void;
+}
+
+const StyleToolbar: React.FC<StyleToolbarProps> = ({
+  items,
+  value,
+  onChange = () => {},
+  ...rest
+}) => {
+  const currentBlockType = useMemo(
+    () => RichUtils.getCurrentBlockType(value),
+    [value]
+  );
+  const currentBlockContainsLink = useMemo(
+    () => RichUtils.currentBlockContainsLink(value),
+    [value]
+  );
+
+  const toggleLink = useCallback(() => {
+    if (currentBlockContainsLink) {
+      onChange(unsetLink(value));
+      return;
+    }
+    // eslint-disable-next-line no-alert
+    const url = prompt('Paste or type a link');
+    if (!url) return;
+    onChange(setLink(value, url));
+  }, [currentBlockContainsLink, value, onChange]);
+
+  const clickHandler = useCallback<(item: StyleToolbarItem) => void>(
+    (item) => {
+      if (item.type === 'inline') {
+        onChange(RichUtils.toggleInlineStyle(value, item.name));
+      } else if (item.type === 'block') {
+        onChange(RichUtils.toggleBlockType(value, item.name));
+      }
+    },
+    [value, onChange]
+  );
+
+  if (items.length === 0) return null;
+
+  return (
+    <Toolbar {...rest}>
+      {items.map((item) => {
+        const isLink = item.name === 'LINK' && item.type === 'inline';
+
+        const active = isLink
+          ? currentBlockContainsLink
+          : value.getCurrentInlineStyle().has(item.name) ||
+            currentBlockType === item.name;
+        const onClick = isLink ? toggleLink : () => clickHandler(item);
+
+        return (
+          <ToolbarButton key={item.name} active={active} onClick={onClick}>
+            {item.icon}
+          </ToolbarButton>
+        );
+      })}
+    </Toolbar>
+  );
+};
+
+StyleToolbar.displayName = 'StyleToolbar';
+
+export default StyleToolbar;

package/src/Editor/Toolbar.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { Popover } from '@os-design/core';
+import { clr } from '@os-design/theming';
+
+const Toolbar = styled(Popover)`
+  // Reset popover styles
+  border: 0;
+
+  display: flex;
+  flex-direction: row;
+  overflow: hidden; // For border-radius
+
+  background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};
+`;
+
+Toolbar.displayName = 'Toolbar';
+
+export default Toolbar;

package/src/Editor/ToolbarButton.tsx

@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { resetButtonStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+
+type JsxButtonProps = JSX.IntrinsicElements['button'];
+interface ToolbarButtonProps extends JsxButtonProps {
+  active?: boolean;
+}
+
+const activeStyles = (p) =>
+  p.active &&
+  css`
+    background-color: ${clr(p.theme.editorToolbarButtonColorBgActive)};
+  `;
+
+type StyledToolbarButtonProps = Pick<ToolbarButtonProps, 'active'>;
+const StyledToolbarButton = styled(
+  'button',
+  omitEmotionProps('active')
+)<StyledToolbarButtonProps>`
+  ${resetButtonStyles};
+  cursor: pointer;
+  font-size: 1.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: ${(p) => p.theme.editorToolbarButtonSize}em;
+  height: ${(p) => p.theme.editorToolbarButtonSize}em;
+  background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};
+  color: ${(p) => clr(p.theme.editorToolbarButtonColorText)};
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBgHover)};
+    }
+  }
+
+  ${activeStyles};
+  ${transitionStyles('background-color')};
+`;
+
+const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+  onMouseDown = () => {},
+  ...rest
+}) => (
+  <StyledToolbarButton
+    onMouseDown={(e) => {
+      onMouseDown(e);
+      e.preventDefault();
+    }}
+    {...rest}
+  />
+);
+
+ToolbarButton.displayName = 'ToolbarButton';
+
+export default ToolbarButton;

package/src/Editor/blocks/Figure.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const Figure = styled.figure`
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  overflow: hidden;
+`;
+
+Figure.displayName = 'Figure';
+
+export default Figure;

package/src/Editor/blocks/FigureCaption.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+
+const FigureCaption = styled.figcaption`
+  font-size: ${(p) => p.theme.sizes.small}em;
+  padding: 0.4em 0.8em;
+
+  background-color: ${(p) => clr(p.theme.editorFigureCaptionColorBg)};
+  color: ${(p) => clr(p.theme.editorFigureCaptionColorText)};
+
+  & > div {
+    text-align: center !important;
+    margin: 0 !important;
+  }
+`;
+
+FigureCaption.displayName = 'FigureCaption';
+
+export default FigureCaption;

package/src/Editor/blocks/imageBlock.tsx

@@ -0,0 +1,162 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { message } from '@os-design/core';
+
+import { Loading, Picture } from '@os-design/icons';
+
+import { omitEmotionProps, useEvent } from '@os-design/utils';
+import { EditorBlock } from 'draft-js';
+import React, { useCallback, useRef, useState } from 'react';
+
+import changeBlock from '../utils/changeBlock';
+import getCurrentBlock from '../utils/getCurrentBlock';
+import Figure from './Figure';
+import FigureCaption from './FigureCaption';
+
+import { BlockProps, BlockToolbarItem } from './types';
+
+const widthStyles = (p) =>
+  p.width &&
+  css`
+    width: ${p.width}px;
+  `;
+
+interface ImageFigureProps {
+  width: number;
+}
+const ImageFigure = styled(Figure, omitEmotionProps('width'))<ImageFigureProps>`
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  ${widthStyles};
+`;
+
+const Mask = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: hsla(
+    0,
+    0%,
+    0%,
+    ${(p) => p.theme.editorBlockImageMaskOpacity}
+  );
+  color: hsl(0, 0%, 100%);
+`;
+
+const LoadingIcon = styled(Loading)`
+  font-size: ${(p) => p.theme.editorBlockImageLoadingFontSize}em;
+`;
+
+const Image = styled.img`
+  max-width: 100%;
+  max-height: ${(p) => p.theme.editorBlockImageMaxHeight}em;
+  vertical-align: bottom;
+`;
+
+const ImageBlock: React.FC<BlockProps> = (props) => {
+  const { block } = props;
+  const data = block.getData();
+  const src = data.get('src') as string;
+  const loading = data.get('loading') as boolean;
+
+  // Update the width of the image
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [width, setWidth] = useState(0);
+  const updateWidth = useCallback(() => {
+    if (!imageRef.current) return;
+    setWidth(imageRef.current.width);
+  }, []);
+  useEvent(
+    (typeof window !== 'undefined' ? window : undefined) as EventTarget,
+    'resize',
+    updateWidth
+  );
+
+  if (!src) return null;
+
+  return (
+    <ImageFigure width={width}>
+      {loading && (
+        <Mask>
+          <LoadingIcon />
+        </Mask>
+      )}
+      <Image
+        src={src.startsWith('blob:') ? src : `${src}-1024`}
+        alt={block.getText()}
+        onLoad={updateWidth}
+        ref={imageRef}
+      />
+      {!loading && (
+        <FigureCaption>
+          <EditorBlock {...props} />
+        </FigureCaption>
+      )}
+    </ImageFigure>
+  );
+};
+
+export const IMAGE_BLOCK = 'atomic:image';
+
+const imageBlock = (
+  onImageUpload: (file: File) => Promise<string>
+): BlockToolbarItem => ({
+  type: IMAGE_BLOCK,
+  component: ImageBlock,
+  icon: <Picture />,
+  onClick: ({ value, onChange, setReadOnly }) => {
+    if (!onImageUpload) throw new Error('Specify the onImageUpload method');
+
+    // Not working in mobile Safari.
+    // The input must be actually appended to the DOM.
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/jpeg,image/png,image/webp';
+    input.onchange = async (e) => {
+      const target = e.target as HTMLInputElement | null;
+      if (!target) return;
+      const { files } = target;
+      if (!files) return;
+
+      setReadOnly(true);
+      const file = files[0];
+      let src = URL.createObjectURL(file);
+
+      // Add the local image
+      const currentBlock = getCurrentBlock(value);
+      let nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {
+        src,
+        loading: true,
+      });
+      onChange(nextEditorState);
+
+      // Replace the local image with the remote one
+      try {
+        src = await onImageUpload(file);
+        nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {
+          src,
+        });
+      } catch (err) {
+        if (err instanceof Error) {
+          message.error(err.message);
+        }
+        nextEditorState = changeBlock(value, currentBlock, 'unstyled');
+      }
+
+      setReadOnly(false);
+      onChange(nextEditorState);
+    };
+    input.click();
+  },
+});
+
+export default imageBlock;

package/src/Editor/blocks/types.ts

@@ -0,0 +1,21 @@
+import { ContentBlock, EditorState } from 'draft-js';
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface BlockProps extends Record<string, any> {
+  block: ContentBlock;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface BlockToolbarItemOnClickProps extends Record<string, any> {
+  value: EditorState;
+  onChange: (value: EditorState) => void;
+  setReadOnly: (readOnly: boolean) => void;
+}
+
+export interface BlockToolbarItem {
+  type: string;
+  component: React.FC<BlockProps>;
+  icon: React.ReactElement;
+  onClick: (props: BlockToolbarItemOnClickProps) => void;
+}

package/src/Editor/blocks/videoBlock.tsx

@@ -0,0 +1,83 @@
+import { Video } from '@os-design/core';
+import { Video as VideoIcon } from '@os-design/icons';
+import { EditorBlock } from 'draft-js';
+import React from 'react';
+
+import changeBlock from '../utils/changeBlock';
+import getCurrentBlock from '../utils/getCurrentBlock';
+import Figure from './Figure';
+import FigureCaption from './FigureCaption';
+import { BlockProps, BlockToolbarItem } from './types';
+
+const VideoBlock: React.FC<BlockProps> = (props) => {
+  const { block } = props;
+  const data = block.getData();
+  const src = data.get('src');
+
+  if (!src) return null;
+
+  return (
+    <Figure>
+      <Video src={src} title={block.getText()} />
+      <FigureCaption>
+        <EditorBlock {...props} />
+      </FigureCaption>
+    </Figure>
+  );
+};
+
+const videoTypes = [
+  /**
+   * YouTube. Supported formats:
+   * https://www.youtube.com/watch?v=FJIhWbUt600&ab_channel=IlyaOrdin
+   * https://www.youtube.com/embed/FJIhWbUt600
+   * https://youtu.be/FJIhWbUt600
+   */
+  {
+    re: /^https:\/\/(?:www\.youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([A-z0-9-_]*).*$/,
+    getUrl: (id: string) => `https://www.youtube.com/embed/${id}`,
+  },
+  /**
+   * RuTube. Supported formats:
+   * https://rutube.ru/video/d00526135b2b96d272f6d89b486036c1/
+   * https://rutube.ru/play/embed/d00526135b2b96d272f6d89b486036c1
+   */
+  {
+    re: /^https:\/\/rutube\.ru\/(?:video|play\/embed)\/([a-z0-9]*)\/?$/,
+    getUrl: (id: string) => `https://rutube.ru/play/embed/${id}`,
+  },
+];
+
+const detectVideo = (url: string) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const { re, getUrl } of videoTypes) {
+    const groups = url.match(re);
+    if (groups && groups[1]) return getUrl(groups[1]);
+  }
+  return null;
+};
+
+export const VIDEO_BLOCK = 'atomic:video';
+
+const videoBlock: BlockToolbarItem = {
+  type: VIDEO_BLOCK,
+  component: VideoBlock,
+  icon: <VideoIcon />,
+  onClick: ({ value, onChange }) => {
+    // eslint-disable-next-line no-alert
+    const url = prompt('Insert a link to YouTube or RuTube');
+    if (!url) return;
+
+    const src = detectVideo(url);
+    if (!src) return;
+
+    const currentBlock = getCurrentBlock(value);
+    const nextEditorState = changeBlock(value, currentBlock, VIDEO_BLOCK, {
+      src,
+    });
+
+    onChange(nextEditorState);
+  },
+};
+
+export default videoBlock;

package/src/Editor/decorators/linkDecorator.tsx

@@ -0,0 +1,23 @@
+import { Link } from '@os-design/core';
+
+import { DraftDecorator } from 'draft-js';
+
+import React from 'react';
+
+const linkDecorator: DraftDecorator = {
+  strategy: (contentBlock, callback, contentState) =>
+    contentBlock.findEntityRanges((character) => {
+      const entityKey = character.getEntity();
+      return (
+        entityKey !== null &&
+        contentState.getEntity(entityKey).getType() === 'LINK'
+      );
+    }, callback),
+
+  component: ({ contentState, entityKey, children }) => {
+    const { url } = contentState.getEntity(entityKey).getData();
+    return <Link href={url}>{children}</Link>;
+  },
+};
+
+export default linkDecorator;

package/src/Editor/hooks/useBlockToolbarProps.ts

@@ -0,0 +1,72 @@
+import { EditorState } from 'draft-js';
+import { useEffect, useState } from 'react';
+import getSelectedBlockElement from '../utils/getSelectedBlockElement';
+
+interface Rect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface UseBlockToolbarPropsRes {
+  trigger: Rect;
+  visible: boolean;
+}
+
+/**
+ * Updates the visibility of the block toolbar.
+ */
+const useBlockToolbarProps = (
+  value: EditorState,
+  show: boolean
+): UseBlockToolbarPropsRes => {
+  const [trigger, setTrigger] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!show || !value) return;
+
+    const selectedBlockElement = getSelectedBlockElement();
+    if (!selectedBlockElement) {
+      setVisible(false);
+      return;
+    }
+
+    const selectionState = value.getSelection();
+    const currentBlockKey = selectionState.getStartKey();
+    const contentState = value.getCurrentContent();
+    const currentBlock = contentState.getBlockForKey(currentBlockKey);
+    const lineNumber = contentState
+      .getBlockMap()
+      .keySeq()
+      .findIndex((k) => k === currentBlockKey);
+
+    if (
+      currentBlock.getType() !== 'unstyled' ||
+      currentBlock.getLength() > 0 ||
+      lineNumber === 0
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const { top, left, height } = selectedBlockElement.getBoundingClientRect();
+    setTrigger({
+      top,
+      left,
+      width: 0,
+      height,
+    });
+    setVisible(true);
+  }, [show, value]);
+
+  return { trigger, visible };
+};
+
+export default useBlockToolbarProps;