@seafile/seafile-editor 1.0.0 → 1.0.2

package/src/extension/plugins/header/menu/index.js

@@ -1,114 +0,0 @@
-import React, { useState, useRef, Fragment, useMemo, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { getHeaderType, isMenuDisabled, setHeaderType } from '../helper';
-import Tooltip from '../../../commons/tooltip';
-import { MAC_HOTKEYS_TIP_HEADER, WIN_HOTKEYS_EVENT_HEADER } from '../../../constants/keyboard';
-import { ELementTypes, HEADERS, HEADER_TITLE_MAP } from '../../../constants';
-
-import './style.css';
-
-const propTypes = {
-  editor: PropTypes.object.isRequired,
-  readonly: PropTypes.bool.isRequired,
-  className: PropTypes.string,
-};
-
-const headerPopoverShowerList = [ELementTypes.PARAGRAPH, ...HEADERS];
-
-const HeaderMenu = ({ editor, readonly, isRichEditor }) => {
-  const [isShowHeaderPopover, setIsShowHeaderPopover] = useState(false);
-  const headerPopoverRef = useRef();
-  const { t } = useTranslation();
-
-  const currentHeaderType = getHeaderType(editor);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isDisabled = useMemo(() => isMenuDisabled(editor, readonly), [editor.selection, readonly]);
-
-  const onHideHeaderMenu = useCallback((e) => {
-    const menu = headerPopoverRef.current;
-    const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-
-    if (clickIsInMenu) return;
-    setIsShowHeaderPopover(false);
-    unregisterEventHandler();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const registerEventHandler = useCallback(() => {
-    document.addEventListener('click', onHideHeaderMenu, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const unregisterEventHandler = useCallback(() => {
-    document.removeEventListener('click', onHideHeaderMenu, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-
-  const onToggleClick = useCallback((event) => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    setIsShowHeaderPopover((isShowHeaderPopover) => {
-      const newIsShowHeaderPopover = !isShowHeaderPopover;
-      newIsShowHeaderPopover ? registerEventHandler() : unregisterEventHandler();
-      return newIsShowHeaderPopover;
-    });
-  }, [registerEventHandler, unregisterEventHandler]);
-
-  const onMouseDown = useCallback((type) => {
-    setHeaderType(editor, type);
-    setIsShowHeaderPopover(false);
-    unregisterEventHandler();
-  }, [editor, unregisterEventHandler]);
-
-  const getToolTip = (type) => {
-    // chrome in Mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
-    const isMac = window.navigator.userAgent.indexOf('Macintosh') !== -1;
-    return isMac ? MAC_HOTKEYS_TIP_HEADER[type] : WIN_HOTKEYS_EVENT_HEADER[type];
-  };
-  return (
-    <div className={classnames('header-menu', { 'header-popover-showed': isShowHeaderPopover, 'header-toggle-disabled': isDisabled })}>
-      <div
-        className={classnames('header-toggle', { 'header-toggle-disabled': isDisabled, 'header-popover-showed': isShowHeaderPopover })}
-        onClick={isDisabled ? void 0 : onToggleClick}
-      >
-        <span className='active'>{t(HEADER_TITLE_MAP[currentHeaderType ?? ELementTypes.PARAGRAPH])}</span>
-        {!isDisabled && (<span className={`sf-font sdoc-${isShowHeaderPopover ? 'caret-up' : 'drop-down'}`}></span>)}
-      </div>
-      {
-        isShowHeaderPopover && (
-          <div ref={headerPopoverRef} className='header-popover '>
-            {headerPopoverShowerList.map((item, index) => {
-              const id = `${item}-${index}`;
-              const isSelected = currentHeaderType === item;
-              return (
-                <Fragment key={index}>
-                  <div
-                    id={id}
-                    className={classnames('sf-dropdown-menu-item', { 'position-relative': isSelected })}
-                    onClick={() => onMouseDown(item)}
-                  >
-                    {isSelected && (<i className="sf-font sf-check-mark"></i>)}
-                    <span>{t(HEADER_TITLE_MAP[item])}</span>
-                  </div>
-                  <Tooltip
-                    target={id}
-                    placement="right"
-                  >
-                    {getToolTip(item)}
-                  </Tooltip>
-                </Fragment>
-              );
-            })}
-          </div>
-        )
-      }
-    </div >
-  );
-};
-
-HeaderMenu.propTypes = propTypes;
-
-export default HeaderMenu;

package/src/extension/plugins/header/plugin.js

@@ -1,134 +0,0 @@
-import { Editor, Element, Transforms, Node } from 'slate';
-import isHotkey from 'is-hotkey';
-import { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
-import { getHeaderType, isMenuDisabled, setHeaderType } from './helper';
-import { MAC_HOTKEYS_EVENT_HEADER, WIN_HOTKEYS_EVENT_HEADER } from '../../constants/keyboard';
-import { isMac } from '../../../utils/common';
-import { HEADERS, LIST_TYPE_ARRAY, ELementTypes } from '../../constants';
-
-const isSelectionAtLineEnd = (editor, path) => {
-  const { selection } = editor;
-
-  if (!selection) return false;
-  const isAtLineEnd = Editor.isEnd(editor, selection.anchor, path) || Editor.isEnd(editor, selection.focus, path);
-  return isAtLineEnd;
-};
-
-const isSelectionAtLineStart = (editor, path) => {
-  const { selection } = editor;
-
-  if (!selection) return false;
-  const isAtLineEnd = Editor.isStart(editor, selection.anchor, path) || Editor.isStart(editor, selection.focus, path);
-  return isAtLineEnd;
-};
-
-const withHeader = (editor) => {
-  const { insertBreak, insertFragment, insertText, deleteBackward, onHotKeyDown } = editor;
-  const newEditor = editor;
-
-  // Rewrite insertBreak - insert paragraph when carriage return at the end of header
-  newEditor.insertBreak = () => {
-    const [match] = Editor.nodes(newEditor, {
-      match: n => {
-        if (!Element.isElement(n)) return false;
-        if (n.type.startsWith(ELementTypes.HEADER)) return true;
-        return false;
-      }, // Matches nodes whose node.type starts with header
-      universal: true,
-    });
-
-    if (!match) {
-      insertBreak();
-      return;
-    }
-
-    const isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
-
-    const nextNode = Editor.next(editor, { at: match[1] });
-    if (isAtLineEnd && nextNode && editor.children.length === 2) {
-      const [node, path] = nextNode;
-      if (node && node.children[0].text === '') {
-        Transforms.select(editor, path);
-        return;
-      }
-    }
-
-    // If an empty p is inserted at the end of the line, otherwise wrap normally
-    if (isAtLineEnd) {
-      const p = generateEmptyElement(ELementTypes.PARAGRAPH);
-      Transforms.insertNodes(newEditor, p, { mode: 'highest' });
-    } else {
-      insertBreak();
-    }
-  };
-
-  newEditor.deleteBackward = (data) => {
-    const [match] = Editor.nodes(newEditor, {
-      match: n => {
-        if (!Element.isElement(n)) return false;
-        if (n.type.startsWith(ELementTypes.HEADER)) return true;
-        return false;
-      }, // Matches nodes whose node.type starts with header
-      universal: true,
-    });
-
-    if (!match) {
-      deleteBackward(data);
-      return false;
-    }
-
-    const isAtLineStart = isSelectionAtLineStart(editor, match[1]);
-    if (isAtLineStart) {
-      setHeaderType(editor, ELementTypes.PARAGRAPH);
-      return true;
-    }
-
-    return deleteBackward(data);
-  };
-
-  newEditor.insertFragment = (data) => {
-    const headerNode = getSelectedNodeByTypes(editor, HEADERS);
-    const headerText = Node.string(headerNode || { children: [] });
-    const isSingleListItem = data.length === 1 && data[0]?.children?.length === 1 && LIST_TYPE_ARRAY.includes(data[0].type);
-    // Insert a list item when the header is empty, insert only the text
-    if ((headerNode && headerText.length === 0) && isSingleListItem) {
-      const text = Node.string(data[0]);
-      insertText(text);
-      return;
-    }
-    return insertFragment(data);
-  };
-
-  newEditor.onHotKeyDown = (event) => {
-    const HOT_KEYS = isMac() ? MAC_HOTKEYS_EVENT_HEADER : WIN_HOTKEYS_EVENT_HEADER;
-    const hotEntries = Object.entries(HOT_KEYS);
-    let isHeaderEvent = false;
-    let headerType = '';
-
-    for (const element of hotEntries) {
-      const [key, value] = element;
-      isHeaderEvent = isHotkey(value, event);
-      if (isHeaderEvent) {
-        headerType = key;
-        break;
-      }
-    }
-    if (!isHeaderEvent) {
-      return onHotKeyDown && onHotKeyDown(event);
-    }
-
-    event.preventDefault();
-    if (isMenuDisabled(newEditor)) return true;
-    const currentHeaderType = getHeaderType(editor);
-    if (currentHeaderType === headerType) {
-      setHeaderType(newEditor, ELementTypes.PARAGRAPH);
-    } else {
-      setHeaderType(newEditor, headerType);
-    }
-    return true;
-  };
-
-  return newEditor;
-};
-
-export default withHeader;

package/src/extension/plugins/header/render-elem.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { getNodeType } from '../../core';
-import { ELementTypes } from '../../constants';
-
-export const renderHeader = (props, editor) => {
-  const { element, attributes, children } = props;
-  const HeaderTagName = `h${getHeaderTagName(element)}`;
-  const style = {
-    textAlign: element.align,
-  };
-
-  function getHeaderTagName(element) {
-    const currentNodeType = getNodeType(element);
-    if (currentNodeType.indexOf(ELementTypes.HEADER) > -1) {
-      return currentNodeType.split(ELementTypes.HEADER)[1];
-    }
-    return 'p';
-  }
-
-  return (
-    <HeaderTagName
-      data-id={element.id}
-      id={element.id} // used for click left outline item, page scroll this element
-      data-root='true'
-      {...attributes}
-      style={style}
-    >
-      {children}
-    </HeaderTagName>
-  );
-};

package/src/extension/plugins/image/helper.js

@@ -1,50 +0,0 @@
-import { Transforms } from 'slate';
-import slugid from 'slugid';
-import { getHeaderType } from '../header/helper';
-import { IMAGE } from '../../constants/element-types';
-import { generateDefaultText, getNodeType } from '../../core';
-import { isInCodeBlock } from '../code-block/helpers';
-
-export const isMenuDisabled = (editor, readonly) => {
-  if (readonly) return true;
-  const isHeader = getHeaderType(editor);
-  if (isHeader) return true;
-  if (isInCodeBlock(editor)) return true;
-  return false;
-};
-
-export const insertImage = (editor, url) => {
-  const imageNode = {
-    type: IMAGE,
-    id: slugid.nice(),
-    data: {
-      src: url,
-    },
-    children: [generateDefaultText()]
-  };
-  Transforms.insertNodes(editor, imageNode, { at: editor.selection, select: true });
-};
-
-export const updateImage = (editor, data) => {
-  Transforms.setNodes(editor, { data }, {
-    match: (n) => getNodeType(n) === IMAGE,
-    at: editor.selection,
-    voids: true
-  });
-};
-
-export const getImagesUrlList = (nodes) => {
-  let nodeIndex = 0;
-  const list = [];
-  while (nodes && nodeIndex <= nodes.length - 1) {
-    const currentNode = nodes[nodeIndex];
-    if (currentNode.type === IMAGE) {
-      const { data = {} } = currentNode;
-      data.src && list.push(data.src);
-    } else {
-      list.push(...getImagesUrlList(currentNode.children));
-    }
-    nodeIndex++;
-  }
-  return list;
-};

package/src/extension/plugins/image/index.js

@@ -1,14 +0,0 @@
-import withImages from './plugin';
-import { IMAGE } from '../../constants/element-types';
-import ImageMenu from './menu';
-import renderImage from './render-element';
-
-const ImagePlugin = {
-  type: IMAGE,
-  nodeType: 'element',
-  editorMenus: [ImageMenu],
-  editorPlugin: withImages,
-  renderElements: [renderImage],
-};
-
-export default ImagePlugin;

package/src/extension/plugins/image/menu/image-menu-dialog.js

@@ -1,68 +0,0 @@
-import React, { useState, useRef, useMemo } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import isUrl from 'is-url';
-import { insertImage } from '../helper';
-
-const ImageMenuInsertInternetDialog = ({ editor, onToggleImageDialog, className }) => {
-  const [imageUrl, setSetImageUrl] = useState('');
-  const imgUrlInputRef = useRef(null);
-  const { t } = useTranslation();
-
-  const isCommitBtnDisabled = useMemo(() => {
-    if (imageUrl.length === 0) return true;
-    if (!isUrl(imageUrl)) return true;
-    return false;
-  }, [imageUrl]);
-
-  const onModalOpened = () => {
-    imgUrlInputRef?.current?.focus();
-  };
-
-  const handleSubmit = (e) => {
-    if (!isUrl(imageUrl)) return false;
-    if (imageUrl.length === 0) return;
-    insertImage(editor, imageUrl);
-    onToggleImageDialog();
-  };
-
-  const handleInputKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      handleSubmit(e);
-    }
-  };
-
-  return (
-    <Modal isOpen={true} toggle={onToggleImageDialog} className={className} zIndex={1071} onOpened={onModalOpened} onClosed={onToggleImageDialog}>
-      <ModalHeader toggle={onToggleImageDialog}>{t('Insert_image')}</ModalHeader>
-      <ModalBody>
-        <Form>
-          <FormGroup>
-            <Label for="imageUrlInput" >{t('Image_address')}</Label>
-            <Input invalid={imageUrl && isCommitBtnDisabled} type='url' onKeyDown={handleInputKeyDown} id="imageUrlInput" innerRef={imgUrlInputRef} value={imageUrl} onChange={e => setSetImageUrl(e.target.value.trim())} />
-            <FormFeedback>
-              {t('Image_address_invalid')}
-            </FormFeedback>
-          </FormGroup>
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button color="secondary" onClick={onToggleImageDialog}>{t('Cancel')}</Button>
-        <Button color="primary" disabled={isCommitBtnDisabled} onClick={handleSubmit}>{t('Submit')}</Button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-ImageMenuInsertInternetDialog.defaultProps = {
-  classname: '',
-};
-
-ImageMenuInsertInternetDialog.propTypes = {
-  editor: PropTypes.object.isRequired,
-  onToggleImageDialog: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-
-export default ImageMenuInsertInternetDialog;

package/src/extension/plugins/image/menu/image-menu-popover.js

@@ -1,76 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import propTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Label } from 'reactstrap';
-import ImageMenuInsertInternetDialog from './image-menu-dialog';
-import { insertImage } from '../helper';
-
-import './style.css';
-
-const ImageMenuPopover = ({ editor, handelClosePopover }) => {
-  const [isShowInternetImageModal, setIsShowInternetImageModal] = useState(false);
-  const { t } = useTranslation();
-
-  const handleInsertNextworkImage = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    e.stopPropagation();
-    setIsShowInternetImageModal(true);
-  };
-
-  const handleClickFileInput = useCallback((e) => {
-    e.stopPropagation();
-    e.target.value = null;
-    e.nativeEvent.stopImmediatePropagation();
-  }, []);
-
-  const handleUploadLocalImage = useCallback(async (e) => {
-    if (editor.api.uploadLocalImage) {
-      const file = e.target.files[0];
-      try {
-        const imgUrl = await editor.api.uploadLocalImage(file);
-        insertImage(editor, imgUrl);
-      } catch (error) {
-        console.log('error', error);
-      }
-    }
-    handelClosePopover();
-  }, [editor, handelClosePopover]);
-
-  const onToggleImageDialog = useCallback(() => {
-    setIsShowInternetImageModal(false);
-    handelClosePopover();
-  }, [handelClosePopover]);
-
-  return (
-    <div className='image-popover'>
-      <div className='image-popover-item' onClick={handleInsertNextworkImage}>{t('Insert_network_image')}</div>
-      <Label className='image-popover-item' for='image-uploader' onClick={handleClickFileInput} >
-        {t('Upload_local_image')}
-      </Label>
-      <input
-        onClick={handleClickFileInput}
-        onChange={handleUploadLocalImage}
-        type="file"
-        accept='image/*'
-        className='image-uploader'
-        id='image-uploader'
-      />
-      {isShowInternetImageModal && (
-        <ImageMenuInsertInternetDialog
-          editor={editor}
-          onToggleImageDialog={onToggleImageDialog}
-        />)
-      }
-    </div>
-  );
-};
-
-ImageMenuPopover.defaultProps = {
-};
-
-ImageMenuPopover.propTypes = {
-  editor: propTypes.object.isRequired,
-  handelClosePopover: propTypes.func.isRequired,
-};
-
-export default ImageMenuPopover;

package/src/extension/plugins/image/menu/index.js

@@ -1,61 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { IMAGE } from '../../../constants/element-types';
-import { MENUS_CONFIG_MAP } from '../../../constants/menus-config';
-import { isMenuDisabled } from '../helper';
-import { MenuItem } from '../../../commons';
-import ImageMenuPopover from './image-menu-popover';
-
-const menuConfig = MENUS_CONFIG_MAP[IMAGE];
-
-const ImageMenu = ({ isRichEditor, className, readonly, editor }) => {
-  const [isShowImagePopover, setIsShowImagePopover] = useState(false);
-
-  useEffect(() => {
-    isShowImagePopover ? registerEventHandler() : unregisterEventHandler();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isShowImagePopover]);
-
-  const onMousedown = useCallback((e) => {
-    e.stopPropagation();
-    handleChangePopoverDisplayed();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const registerEventHandler = () => {
-    return document.addEventListener('click', handleChangePopoverDisplayed);
-  };
-
-  const unregisterEventHandler = () => {
-    return document.removeEventListener('click', handleChangePopoverDisplayed);
-  };
-
-  const handleChangePopoverDisplayed = useCallback(() => {
-    setIsShowImagePopover(!isShowImagePopover);
-  }, [isShowImagePopover]);
-
-  return (
-    <>
-      <MenuItem
-        type={Image}
-        isRichEditor={isRichEditor}
-        className={className}
-        disabled={isMenuDisabled(editor, readonly)}
-        isActive={isShowImagePopover}
-        onMouseDown={onMousedown}
-
-        {...menuConfig}
-      />
-
-      {isShowImagePopover && (
-        <ImageMenuPopover
-          editor={editor}
-          setIsShowImagePopover={setIsShowImagePopover}
-          unregisterEventHandler={unregisterEventHandler}
-          handelClosePopover={handleChangePopoverDisplayed}
-        />)
-      }
-    </>
-  );
-};
-
-export default ImageMenu;

package/src/extension/plugins/image/plugin.js

@@ -1,23 +0,0 @@
-import { ELementTypes } from '../../constants';
-
-const withImages = (editor) => {
-  const { isInline, isVoid } = editor;
-  const newEditor = editor;
-
-  newEditor.isInline = (element) => {
-    const { type } = element;
-    if (type === ELementTypes.IMAGE) return true;
-    return isInline(element);
-  };
-
-  newEditor.isVoid = (element) => {
-    const { type } = element;
-
-    if (type === ELementTypes.IMAGE) return true;
-    return isVoid(element);
-  };
-
-  return newEditor;
-};
-
-export default withImages;

package/src/extension/plugins/image/render-element/image-previewer.js

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { useSlateStatic } from 'slate-react';
-import PropTypes from 'prop-types';
-import Lightbox from '@seafile/react-image-lightbox';
-import { getImagesUrlList } from '../helper';
-
-import '@seafile/react-image-lightbox/style.css';
-import './style.css';
-
-const ImagePreviewer = ({ imgUrl, toggleImagePreviewer }) => {
-  const editor = useSlateStatic();
-  let images = getImagesUrlList(editor.children);
-  const [imageIndex, setImageIndex] = useState(images.findIndex((item) => item === imgUrl));
-  const mainSrc = images[imageIndex];
-
-  const moveToPrevImage = () => {
-    const currentImageIndex = (imageIndex + images.length - 1) % images.length;
-    setImageIndex(currentImageIndex);
-  };
-
-  const moveToNextImage = () => {
-    const newImageIndex =  (imageIndex + 1) % images.length;
-    setImageIndex(newImageIndex);
-  };
-
-  return (
-    <Lightbox
-      wrapperClassName="sf-editor-image-previewer"
-      imageTitle={<ImageTitleElement mainSrc={mainSrc} imageIndex={imageIndex} images={images} />}
-      mainSrc={mainSrc}
-      toolbarButtons={[]}
-      nextSrc={images[(imageIndex + 1) % images.length]}
-      prevSrc={images[(imageIndex + images.length - 1) % images.length]}
-      onCloseRequest={toggleImagePreviewer}
-      onMovePrevRequest={moveToPrevImage}
-      onMoveNextRequest={moveToNextImage}
-      imagePadding={70}
-      reactModalStyle={{
-        overlay: {
-          zIndex: 1071
-        }
-      }}
-    />
-  );
-};
-
-ImagePreviewer.propTypes = {
-  imgUrl: PropTypes.string.isRequired,
-};
-
-export default ImagePreviewer;
-
-const ImageTitleElement = (props) => {
-  const { mainSrc, imageIndex, images, } = props;
-  const getImgTitle = () => {
-    try {
-      return mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
-    } catch (error) {
-      console.log('error', error);
-      return '';
-    }
-  };
-  return (
-    <>
-      <span className="d-flex">
-        <span className="text-truncate">{getImgTitle()}</span>
-        <span className="flex-shrink-0">({imageIndex + 1}/{images.length})</span>
-      </span>
-    </>
-  );
-};