@seafile/seafile-editor 0.4.7 → 1.0.0

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

@@ -0,0 +1,47 @@
+import { Editor, Transforms } from 'slate';
+import { getNodeType, getParentNode, isTextNode } from '../../core/queries';
+import { ELementTypes } from '../../constants';
+import { focusEditor } from '../../core';
+
+export const isMenuDisabled = (editor, readonly = false) => {
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  const [match] = Editor.nodes(
+    editor,
+    {
+      match(node, path) {
+        let type = getNodeType(node);
+        if (!type && isTextNode(node) && node.id) {
+          const parentNode = getParentNode(node, node.id);
+          type = getNodeType(parentNode);
+        }
+        if (type === ELementTypes.PARAGRAPH) return true;
+        if (type.startsWith(ELementTypes.HEADER)) return true;
+        return false;
+      },
+      universal: true,
+      mode: 'highest',
+    },
+  );
+  return !match;
+};
+
+export const getHeaderType = (editor) => {
+  const [match] = Editor.nodes(editor, {
+    match: node => {
+      const nodeType = getNodeType(node);
+      if (nodeType.includes(ELementTypes.HEADER)) return true;
+      return false;
+    },
+    universal: true,
+  });
+  if (!match) return;
+  const [matchedNode] = match;
+  return getNodeType(matchedNode);
+};
+
+export const setHeaderType = (editor, type) => {
+  if (!type) return;
+  Transforms.setNodes(editor, { type });
+  focusEditor(editor);
+};

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

@@ -0,0 +1,14 @@
+import { ELementTypes } from '../../constants';
+import { renderHeader } from './render-elem';
+import withHeader from './plugin';
+import HeaderMenu from './menu';
+
+const HeaderPlugin = {
+  type: ELementTypes.HEADER,
+  nodeType: 'element',
+  editorMenus: [HeaderMenu],
+  editorPlugin: withHeader,
+  renderElements: [renderHeader],
+};
+
+export default HeaderPlugin;

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

@@ -0,0 +1,114 @@
+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/menu/style.css

@@ -0,0 +1,115 @@
+.header-menu {
+  display: flex;
+  height: 100%;
+  width: 140px;
+  padding: 6px 8px;
+  border-right: 1px solid #e5e6e8;
+  position: relative;
+  align-items: center;
+}
+
+.header-menu::after {
+  content: '';
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-top: 6px solid #222428;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.header-menu.header-toggle-disabled::after {
+  content: '';
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-top: 6px solid #e5e6e8;
+}
+
+.header-menu.header-popover-showed::after {
+  content: '';
+  position: absolute;
+  top: 7px;
+  right: 12px;
+  border-top-color: transparent;
+  border-bottom-color: #222428;
+}
+
+.header-menu .header-toggle {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 5px;
+  height: 24px;
+  cursor: pointer;
+}
+
+
+.header-menu .header-toggle .active {
+  font-size: 14px;
+}
+
+.header-menu .header-toggle-disabled {
+  color: #BDBDBD;
+  cursor: unset;
+}
+
+
+.header-menu .header-toggle.header-popover-showed {
+  background-color: #e5e6e8;
+  border-radius: 2px;
+}
+
+.header-menu .header-toggle:not(.header-toggle-disabled):hover {
+  background-color: #e5e6e8;
+  border-radius: 2px;
+}
+
+.header-menu .header-toggle .sf-font {
+  color: #999;
+  width: 12px;
+  height: 24px;
+  margin-left: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.header-menu .header-popover {
+  position: absolute;
+  top: 42px;
+  left: 8px;
+  padding: 8px 0;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 101;
+}
+
+.header-menu .header-popover .sf-dropdown-menu-item {
+  font-size: 14px;
+  height: auto;
+  padding: 9px 16px 9px 28px;
+  width: 100%;
+  line-height: 1;
+}
+
+.header-menu .header-popover .sf-dropdown-menu-item:hover {
+  background-color: #F2F2F2;
+}
+
+.header-menu .header-popover .sf-dropdown-menu-item .sf-check-mark {
+  position: absolute;
+  left: 8px;
+  transform: scale(.8);
+  color: #798d99;
+}

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,76 @@
+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;