@seafile/seafile-editor 0.4.8 → 1.0.0

package/src/extension/commons/element-popover/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+
+class ElementPopover extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.el = document.createElement('div');
+    if (props.className) {
+      this.el.className = props.className;
+    }
+    if (props.style) {
+      this.el.style = props.style;
+    }
+  }
+
+  state = {
+    isMounted: false
+  };
+
+  componentDidMount() {
+    document.body.appendChild(this.el);
+  }
+
+  componentDidUpdate() {
+    const { className, style } = this.props;
+    if (className) {
+      this.el.className = className;
+    }
+    if (style) {
+      this.el.style = style;
+    }
+  }
+
+  componentWillUnmount() {
+    document.body.removeChild(this.el);
+  }
+
+  render() {
+    return ReactDOM.createPortal(
+      this.props.children,
+      this.el,
+    );
+  }
+}
+
+ElementPopover.propTypes = {
+  className: PropTypes.string,
+};
+
+export default ElementPopover;

package/src/extension/commons/index.js

@@ -0,0 +1,10 @@
+import ElementPopover from './element-popover';
+import { MenuGroup, MenuItem } from './menu';
+
+export {
+  ElementPopover,
+  MenuGroup,
+  MenuItem,
+};
+
+

package/src/extension/commons/menu/index.js

@@ -0,0 +1,9 @@
+import MenuGroup from './menu-group';
+import MenuItem from './menu-item';
+
+import './menu.css';
+
+export {
+  MenuGroup,
+  MenuItem,
+};

package/src/extension/commons/menu/menu-drop-down.js

@@ -0,0 +1,110 @@
+import React, { useRef, useState, Fragment, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Tooltip from '../tooltip';
+
+const MenuDropDown = (props) => {
+  const {
+    readonly,
+    className,
+    isDisabled,
+    dropDownList,
+    id,
+    text,
+    iconClass,
+    isShowMenuItemTooltip = false,
+    isShowListItemIcon = false,
+  } = props;
+
+  const [isShowDropDown, setIsShowDropDown] = useState(false);
+  const menuItemRef = useRef();
+  const menuDropdownRef = useRef();
+  const { t } = useTranslation();
+
+  const containerId = useMemo(() => `menu-dropdown-${id}`, [id]);
+
+  const handleHideDropDownList = useCallback((e) => {
+    const isClickOnMenuItem = menuItemRef.current.contains(e.target);
+    const isClickOnMenuDropdown = menuDropdownRef?.current?.contains(e.target);
+    // If click on menu item, menu dropdown will show, and click on menu dropdown, menu dropdown will hide
+    if (!isShowDropDown && isClickOnMenuItem && !isClickOnMenuDropdown) return;
+    document.removeEventListener('click', handleHideDropDownList);
+    setIsShowDropDown(false);
+  }, [isShowDropDown]);
+
+  const registerClickEvent = useCallback((e) => {
+    setIsShowDropDown(true);
+    document.addEventListener('click', handleHideDropDownList);
+  }, [handleHideDropDownList]);
+
+  const handleClickDropDownItem = useCallback((event, item, callback) => {
+    event.stopPropagation();
+    handleHideDropDownList(event);
+    callback && callback(item);
+  }, [handleHideDropDownList]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div
+        ref={menuItemRef}
+        id={containerId}
+        className={classnames(className, 'menu-group-item sf-menu-with-dropdown', { 'header-popover-showed': isShowDropDown, 'header-toggle-disabled': isDisabled })}
+        onClick={!readonly && !isDisabled && registerClickEvent}
+      >
+        <span className={`sf-menu-with-dropdown-icon active ${iconClass}`}></span>
+        <div className='sf-menu-with-dropdown-triangle'>
+          <i className={`sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowDropDown ? 'caret-up' : 'drop-down'}`}></i>
+        </div>
+        {
+          !!isShowDropDown && (
+            <div ref={menuDropdownRef} className='sf-dropdown-list '>
+              {dropDownList.map((item, index) => {
+                const { id, iconClass, handleClick, text } = item;
+                return (
+                  <Fragment key={index}>
+                    <div
+                      id={id}
+                      className={classnames('sf-dropdown-list-item')}
+                      onClick={(event) => handleClickDropDownItem(event, item, handleClick)}
+                    >
+                      {isShowListItemIcon && iconClass && <i className={`sf-dropdown-menu-item-icon ${iconClass}`}></i>}
+                      <span className='sf-dropdown-menu-item-text'>{t(text)}</span>
+                    </div>
+                  </Fragment>
+                );
+              })}
+            </div>
+          )
+        }
+        {!!isShowMenuItemTooltip && <Tooltip target={containerId} >{t(text)}</Tooltip>}
+      </div>
+    </div>
+  );
+};
+
+MenuDropDown.defaultProps = {
+  className: '',
+  dropDownList: [],
+  isShowMenuItemTooltip: false,
+  isShowListItemIcon: false,
+};
+
+MenuDropDown.propTypes = {
+  readonly: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  isDisabled: PropTypes.bool.isRequired,
+  dropDownList: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    iconClass: PropTypes.string,
+    handleClick: PropTypes.func,
+  })),
+  id: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  iconClass: PropTypes.string.isRequired,
+  isShowMenuItemTooltip: PropTypes.bool,
+  isShowListItemIcon: PropTypes.bool,
+};
+
+export default MenuDropDown;

package/src/extension/commons/menu/menu-group.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MenuGroup = (props) => {
+  return (
+    <div className={'btn-group ' + props.className} role={'group'}>
+      {props.children}
+    </div>
+  );
+};
+
+MenuGroup.defaultProps = {
+  className: 'menu-group'
+};
+
+MenuGroup.propTypes = {
+  className: PropTypes.string,
+};
+
+export default MenuGroup;

package/src/extension/commons/menu/menu-item.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import Tooltip from '../tooltip';
+
+const MenuItem = ({ disabled, isActive, isRichEditor, type, onMouseDown, className, iconClass, id, text }) => {
+
+  const { t } = useTranslation();
+  const onClick = useCallback((event) => {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type, onMouseDown]);
+
+  const validClassName = classnames(className, {
+    'sf-rich-editor': isRichEditor,
+    'sf-icon-btn': true,
+    'sf-icon-btn-disabled': disabled,
+    'sf-icon-btn-hover': !disabled,
+  });
+
+  return (
+    <>
+      <button
+        id={id}
+        type="button"
+        className={validClassName}
+        disabled={disabled}
+        data-active={isActive}
+        onClick={onClick}
+      >
+        <i className={iconClass} />
+      </button>
+      <Tooltip target={id}>
+        {t(text)}
+      </Tooltip>
+    </>
+  );
+
+};
+
+MenuItem.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item',
+};
+
+MenuItem.propTypes = {
+  isRichEditor: PropTypes.bool,
+  disabled: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  iconClass: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  onMouseDown: PropTypes.func,
+};
+
+export default MenuItem;

package/src/extension/commons/menu/menu.css

@@ -0,0 +1,120 @@
+.menu-group {
+  height: 100%;
+  padding: 6px 0 6px 8px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e6e8;
+  color: #444;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .menu-group-item {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
+  border: none !important;
+  color: #444;
+  background-color: #fff;
+}
+
+.menu-group .menu-group-item:disabled {
+  color: #BDBDBD;
+}
+
+.menu-group .menu-group-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.menu-group .menu-group-item .iconfont,
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .iconfont {
+  font-size: 13px;
+}
+
+/* sdoc-menu-with-dropdown */
+.menu-group .menu-group-item.sf-menu-with-dropdown {
+  width: 36px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0 !important;
+  padding: 0 !important;
+  margin-right: 10px;
+  overflow: hidden;
+}
+
+.menu-group .menu-group-item.sf-menu-with-dropdown.disabled {
+  color: #999;
+  width: 24px !important;
+}
+
+.sf-menu-with-dropdown:not(.disabled):hover {
+  background: #F2F2F2;
+  border-radius: 2px;
+}
+
+.sf-menu-with-dropdown .sf-menu-with-dropdown-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sf-menu-with-dropdown .sf-menu-with-dropdown-triangle {
+  width: 12px;
+  height: 24px;
+  padding-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sf-menu-with-dropdown .sf-menu-with-dropdown-triangle .sf-menu-with-dropdown-triangle-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.sf-dropdown-list {
+  top: 30px;
+  left: 5px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1000;
+  align-items: center;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+}
+
+.sf-dropdown-list .sf-dropdown-menu-item-icon {
+  margin-right: 8px;
+}
+
+.sf-dropdown-list .sf-dropdown-menu-item-text {
+  white-space: nowrap;
+}
+
+.sf-dropdown-list .sf-dropdown-list-item {
+  display: flex;
+  padding: 9px 16px 9px 28px;
+  height: auto;
+  width: 100%;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.sf-dropdown-list .sf-dropdown-list-item:hover {
+  background-color: #F2F2F2;
+}

package/src/extension/commons/tooltip/index.css

@@ -0,0 +1,21 @@
+.sdoc-tooltip .tooltip-inner {
+  font-weight: lighter;
+  text-align: start;
+  background-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  border-bottom-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+  border-right-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  border-left-color: #303133;
+}

package/src/extension/commons/tooltip/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+import classnames from 'classnames';
+
+import './index.css';
+
+const Tooltip = ({ target, children, className, placement }) => {
+
+  const popperClassName = classnames('sdoc-tooltip', className);
+
+  return (
+    <UncontrolledTooltip popperClassName={popperClassName} target={target} fade={false} placement={placement || 'bottom'} delay={0}>
+      {children}
+    </UncontrolledTooltip>
+  );
+};
+
+Tooltip.propTypes = {
+  target: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  placement: PropTypes.string,
+  children: PropTypes.any,
+};
+
+export default Tooltip;

package/src/extension/constants/element-types.js

@@ -0,0 +1,23 @@
+export const BLOCKQUOTE = 'blockquote';
+export const HEADER = 'header';
+// each header type should be start with HEADER, all of justices should based on HEADER
+export const HEADER1 = `${HEADER}1`;
+export const HEADER2 = `${HEADER}2`;
+export const HEADER3 = `${HEADER}3`;
+export const HEADER4 = `${HEADER}4`;
+export const HEADER5 = `${HEADER}5`;
+export const HEADER6 = `${HEADER}6`;
+export const ORDERED_LIST = 'ordered_list'; // <ol>
+export const UNORDERED_LIST = 'unordered_list'; // <ul> // unordered_list can not work
+export const LIST_ITEM = 'list_item'; // <li>
+export const CHECK_LIST_ITEM = 'check_list_item';
+export const PARAGRAPH = 'paragraph';
+export const CODE_BLOCK = 'code_block';
+export const CODE_LINE = 'code_line';
+export const TABLE = 'table';
+export const TABLE_ROW = 'table_row';
+export const TABLE_CELL = 'table_cell';
+export const IMAGE = 'image';
+export const LINK = 'link';
+export const FORMULA = 'formula';
+export const COLUMN = 'column';

package/src/extension/constants/index.js

@@ -0,0 +1,37 @@
+import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH } from './element-types';
+
+export * as ELementTypes from './element-types';
+export * from './menus-config';
+
+export const HEADERS = [
+  HEADER1,
+  HEADER2,
+  HEADER3,
+  HEADER4,
+  HEADER5,
+  HEADER6,
+];
+
+export const HEADER_TITLE_MAP = {
+  [HEADER1]: 'header_one',
+  [HEADER2]: 'header_two',
+  [HEADER3]: 'header_three',
+  [HEADER4]: 'header_four',
+  [HEADER5]: 'header_five',
+  [HEADER6]: 'header_six',
+  [PARAGRAPH]: 'paragraph',
+};
+
+export const LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
+
+export const INSERT_POSITION = {
+  BEFORE: 'before',
+  CURRENT: 'current',
+  AFTER: 'after',
+};
+
+export const TEXT_ALIGN = {
+  LEFT: 'left',
+  CENTER: 'center',
+  RIGHT: 'right',
+};

package/src/extension/constants/keyboard.js

@@ -0,0 +1,29 @@
+export const MAC_HOTKEYS_TIP_HEADER = {
+  paragraph: '⌘+⌥+0',
+  header1: '⌘+⌥+1',
+  header2: '⌘+⌥+2',
+  header3: '⌘+⌥+3',
+  header4: '⌘+⌥+4',
+  header5: '⌘+⌥+5',
+  header6: '⌘+⌥+6',
+};
+
+export const WIN_HOTKEYS_EVENT_HEADER = {
+  paragraph: 'ctrl+alt+0',
+  header1: 'ctrl+alt+1',
+  header2: 'ctrl+alt+2',
+  header3: 'ctrl+alt+3',
+  header4: 'ctrl+alt+4',
+  header5: 'ctrl+alt+5',
+  header6: 'ctrl+alt+6',
+};
+
+export const MAC_HOTKEYS_EVENT_HEADER = {
+  paragraph: 'cmd+opt+0',
+  header1: 'cmd+opt+1',
+  header2: 'cmd+opt+2',
+  header3: 'cmd+opt+3',
+  header4: 'cmd+opt+4',
+  header5: 'cmd+opt+5',
+  header6: 'cmd+opt+6',
+};

package/src/extension/constants/menus-config.js

@@ -0,0 +1,149 @@
+import {
+  BLOCKQUOTE,
+  ORDERED_LIST,
+  UNORDERED_LIST,
+  CHECK_LIST_ITEM,
+  CODE_BLOCK,
+  TABLE,
+  LINK,
+  IMAGE,
+  FORMULA,
+} from './element-types';
+
+const BOLD = 'bold';
+const ITALIC = 'italic';
+const UNDERLINE = 'underline';
+const CODE = 'code';
+const DELETE = 'delete';
+const ADD = 'add';
+
+export const CLEAR_FORMAT = 'clear_format';
+
+export const TEXT_STYLE_MAP = {
+  BOLD: BOLD,
+  ITALIC: ITALIC,
+  UNDERLINE: UNDERLINE,
+  CODE: CODE,
+  DELETE: DELETE,
+  ADD: ADD,
+};
+
+export const TABLE_SUBMENU_MAP = {
+  TABLE_ALIGN_LEFT: 'table_align_left',
+  TABLE_ALIGN_CENTER: 'table_align_center',
+  TABLE_ALIGN_RIGHT: 'table_align_right',
+  TABLE_INSERT_COLUMN: 'table_insert_column',
+  TABLE_REMOVE_COLUMN: 'table_remove_column',
+  TABLE_INSERT_ROW: 'table_insert_row',
+  TABLE_REMOVE_ROW: 'table_remove_row',
+  TABLE_DELETE_TABLE: 'table_delete_table',
+};
+
+export const MENUS_CONFIG_MAP = {
+  [BLOCKQUOTE]: {
+    id: `seafile_${BLOCKQUOTE}`,
+    iconClass: 'iconfont icon-quote-left',
+    text: 'Quote'
+  },
+  [ORDERED_LIST]: {
+    id: `seafile_${ORDERED_LIST}`,
+    iconClass: 'iconfont icon-list-ol',
+    text: 'Ordered_list'
+  },
+  [UNORDERED_LIST]: {
+    id: `seafile_${UNORDERED_LIST}`,
+    iconClass: 'iconfont icon-list-ul',
+    text: 'Unordered_list'
+  },
+  [CHECK_LIST_ITEM]: {
+    id: `seafle_${CHECK_LIST_ITEM}`,
+    iconClass: 'iconfont icon-check-square',
+    text: 'Check_list_item'
+  },
+  [CODE_BLOCK]: {
+    id: `seafile_${CODE_BLOCK}`,
+    iconClass: 'iconfont icon-code-block',
+    text: 'Code_block'
+  },
+  [LINK]: {
+    id: `seafile_${LINK}`,
+    iconClass: 'iconfont icon-link',
+    text: 'Insert_link'
+  },
+  [IMAGE]: {
+    id: `seafile_${IMAGE}`,
+    iconClass: 'iconfont icon-image',
+    text: 'Insert_image'
+  },
+  [TABLE]: {
+    id: `seafile_${TABLE}`,
+    iconClass: 'iconfont icon-table',
+    text: 'Insert_table'
+  },
+  [ITALIC]: {
+    id: `seafile_${ITALIC}`,
+    iconClass: 'iconfont icon-italic',
+    text: 'Italic',
+    type: ITALIC
+  },
+  [BOLD]: {
+    id: `seafile_${BOLD}`,
+    iconClass: 'iconfont icon-bold',
+    text: 'Bold',
+    type: BOLD
+  },
+  [CODE]: {
+    id: `seafile_${CODE}`,
+    iconClass: 'iconfont icon-code',
+    text: 'Code',
+    type: CODE,
+  },
+  [TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT}`,
+    iconClass: 'iconfont icon-left-alignment',
+    text: 'Left',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_ALIGN_CENTER]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_ALIGN_CENTER}`,
+    iconClass: 'iconfont icon-center-horizontally',
+    text: 'Center',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_ALIGN_RIGHT]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_ALIGN_RIGHT}`,
+    iconClass: 'iconfont icon-align-right',
+    text: 'Right',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN}`,
+    iconClass: 'iconfont icon-column',
+    text: 'Insert_column',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_REMOVE_COLUMN]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_REMOVE_COLUMN}`,
+    text: 'Remove_column',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_INSERT_ROW]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_INSERT_ROW}`,
+    iconClass: 'iconfont icon-row',
+    text: 'Insert_row',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_REMOVE_ROW]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_REMOVE_ROW}`,
+    text: 'Remove_row',
+  },
+  [TABLE_SUBMENU_MAP.TABLE_DELETE_TABLE]: {
+    id: `seafile_${TABLE_SUBMENU_MAP.TABLE_DELETE_TABLE}`,
+    iconClass: 'iconfont icon-delete-table',
+    text: 'Remove_table',
+  },
+  [FORMULA]: {
+    id: `seafile_${FORMULA}`,
+    iconClass: 'iconfont icon-formula',
+    text: 'Insert_formula'
+  },
+  [CLEAR_FORMAT]: {
+    id: `seafile_${CLEAR_FORMAT}`,
+    iconClass: 'iconfont icon-clear-format',
+    text: 'Clear_format'
+  },
+};

package/src/extension/core/index.js

@@ -0,0 +1,3 @@
+export * from './queries/index';
+export * from './transforms/index';
+export * from './utils/index';