@seafile/sea-email-editor 0.0.1

package/dist/extension/plugins/image/render-element/style.css

@@ -0,0 +1,68 @@
+.sea-email-image-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  padding: 1px;
+}
+
+.sea-email-image-wrapper .sea-email-image.error {
+  height: 21px;
+  width: 21px;
+}
+
+.sea-email-image-wrapper .sea-email-image.selected {
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+.sea-email-image-wrapper .resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  background-color: #007bff;
+  border: 1px solid #fff;
+  cursor: se-resize;
+}
+
+.sea-email-image-wrapper .full-screen {
+  position: absolute;
+  height: 26px;
+  display: inline-block;
+  width: 26px;
+  top: 0;
+  right: -32px;
+  text-align: center;
+  line-height: 20px;
+  padding: 2px;
+  box-shadow: 0 2px 5px 0 #0003;
+  border-radius: 3px;
+  border: 1px solid #0028641f;
+  background-color: #fff;
+  user-select: none !important;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.sea-email-image-wrapper .full-screen:hover {
+  display: block;
+  background-color: #efefef;
+}
+
+.sea-email-image-wrapper .image-size-info-tooltip {
+  display: inline-block;
+  padding: 5px;
+  white-space: nowrap;
+  height: 22px;
+  position: absolute;
+  bottom: -25px;
+  left: 100%;
+  z-index: 1;
+  transform: translateX(5px);
+  border-radius: 3px;
+  line-height: 12px;
+  color: #fff;
+  background-color: #4c4c4c;
+  font-size: 12px;
+  user-select: none;
+}

package/dist/extension/plugins/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BlockquotePlugin", {
+  enumerable: true,
+  get: function () {
+    return _blockquote.default;
+  }
+});
+Object.defineProperty(exports, "CheckListPlugin", {
+  enumerable: true,
+  get: function () {
+    return _checkList.default;
+  }
+});
+Object.defineProperty(exports, "CodeBlockPlugin", {
+  enumerable: true,
+  get: function () {
+    return _codeBlock.default;
+  }
+});
+Object.defineProperty(exports, "FormulaPlugin", {
+  enumerable: true,
+  get: function () {
+    return _formula.default;
+  }
+});
+Object.defineProperty(exports, "HeaderPlugin", {
+  enumerable: true,
+  get: function () {
+    return _header.default;
+  }
+});
+Object.defineProperty(exports, "HtmlPlugin", {
+  enumerable: true,
+  get: function () {
+    return _html.default;
+  }
+});
+Object.defineProperty(exports, "ImagePlugin", {
+  enumerable: true,
+  get: function () {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "LinkPlugin", {
+  enumerable: true,
+  get: function () {
+    return _link.default;
+  }
+});
+Object.defineProperty(exports, "ListPlugin", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "MarkDownPlugin", {
+  enumerable: true,
+  get: function () {
+    return _markdown.default;
+  }
+});
+Object.defineProperty(exports, "NodeIdPlugin", {
+  enumerable: true,
+  get: function () {
+    return _nodeId.default;
+  }
+});
+Object.defineProperty(exports, "PPlugin", {
+  enumerable: true,
+  get: function () {
+    return _p.default;
+  }
+});
+Object.defineProperty(exports, "ParagraphPlugin", {
+  enumerable: true,
+  get: function () {
+    return _paragraph.default;
+  }
+});
+Object.defineProperty(exports, "TablePlugin", {
+  enumerable: true,
+  get: function () {
+    return _table.default;
+  }
+});
+Object.defineProperty(exports, "TextPlugin", {
+  enumerable: true,
+  get: function () {
+    return _textStyle.default;
+  }
+});
+exports.default = void 0;
+var _blockquote = _interopRequireDefault(require("./blockquote"));
+var _paragraph = _interopRequireDefault(require("./paragraph"));
+var _textStyle = _interopRequireDefault(require("./text-style"));
+var _header = _interopRequireDefault(require("./header"));
+var _image = _interopRequireDefault(require("./image"));
+var _nodeId = _interopRequireDefault(require("./node-id"));
+var _link = _interopRequireDefault(require("./link"));
+var _codeBlock = _interopRequireDefault(require("./code-block"));
+var _checkList = _interopRequireDefault(require("./check-list"));
+var _list = _interopRequireDefault(require("./list"));
+var _table = _interopRequireDefault(require("./table"));
+var _formula = _interopRequireDefault(require("./formula"));
+var _markdown = _interopRequireDefault(require("./markdown"));
+var _html = _interopRequireDefault(require("./html"));
+var _p = _interopRequireDefault(require("./p"));
+const Plugins = [_paragraph.default, _textStyle.default, _header.default, _image.default, _checkList.default, _list.default, _codeBlock.default, _table.default, _blockquote.default, _link.default, _formula.default, _markdown.default, _html.default, _p.default,
+// put at the end
+_nodeId.default];
+var _default = exports.default = Plugins;

package/dist/extension/plugins/link/helper.js

@@ -0,0 +1,258 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.upsertLinkText = exports.updateLink = exports.unWrapLinkNode = exports.isMenuDisabled = exports.isLinkType = exports.insertSeafileLink = exports.insertLink = exports.getLinkInfo = exports.getElementHref = exports.generateLinkNode = void 0;
+var _slate = require("slate");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _queries = require("../../core/queries");
+var _focusEditor = require("../../core/transforms/focus-editor");
+var _constants = require("../../constants");
+var _utils = require("../../core/utils");
+var _replaceNodeChildren = require("../../core/transforms/replace-node-children");
+const isMenuDisabled = function (editor) {
+  let readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const selectedElems = (0, _queries.getSelectedElems)(editor);
+  // Check if the selected element is illegal
+  const isSelectedIllegalElement = selectedElems.some(elem => {
+    const {
+      type
+    } = elem;
+    if (editor.isVoid(elem)) return true;
+    if ([_constants.ElementTypes.CODE_BLOCK, _constants.ElementTypes.CODE_LINE].includes(type)) return true;
+    return false;
+  });
+  if (isSelectedIllegalElement) return true;
+  return false;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const isLinkType = editor => {
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => (0, _queries.getNodeType)(n) === _constants.ElementTypes.LINK,
+    universal: true
+  });
+  return !!match;
+};
+exports.isLinkType = isLinkType;
+const generateLinkNode = (url, title) => {
+  const linkNode = {
+    type: _constants.ElementTypes.LINK,
+    url: url,
+    title: title,
+    id: _slugid.default.nice(),
+    children: [{
+      id: _slugid.default.nice(),
+      text: title || ''
+    }]
+  };
+  return linkNode;
+};
+
+/**
+ * @param {Object} props
+ * @param {Object} props.editor
+ * @param {String} props.url
+ * @param {String} props.title
+ * @param {InsertPosition} props.insertPosition
+ * @param {Object | undefined} props.slateNode
+ */
+exports.generateLinkNode = generateLinkNode;
+const insertLink = props => {
+  const {
+    editor,
+    url,
+    title,
+    insertPosition = _constants.INSERT_POSITION.CURRENT,
+    slateNode
+  } = props;
+  const {
+    selection
+  } = editor;
+  if (insertPosition === _constants.INSERT_POSITION.CURRENT && isMenuDisabled(editor)) return;
+  // We had validated in modal,here we do it again for safety
+  if (!title || !url) return;
+  if (!selection) return;
+  const linkNode = generateLinkNode(url, title);
+  if (insertPosition === _constants.INSERT_POSITION.AFTER) {
+    let path = _slate.Editor.path(editor, selection);
+    if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === _constants.ElementTypes.LIST_ITEM) {
+      path = (0, _queries.findPath)(editor, slateNode, []);
+      const nextPath = _slate.Path.next(path);
+      _slate.Editor.insertNodes(editor, linkNode, {
+        at: nextPath
+      });
+      return;
+    }
+    const linkNodeWrapper = (0, _utils.generateEmptyElement)(_constants.ElementTypes.PARAGRAPH);
+    // LinkNode should be wrapped by p and within text nodes in order to be editable
+    linkNodeWrapper.children.push(linkNode, (0, _utils.generateDefaultText)());
+    _slate.Transforms.insertNodes(editor, linkNodeWrapper, {
+      at: [path[0] + 1]
+    });
+    (0, _focusEditor.focusEditor)(editor);
+    return;
+  }
+  const isCollapsed = _slate.Range.isCollapsed(selection);
+  if (isCollapsed) {
+    // If selection is collapsed, we insert a space and then insert link node that help operation easier
+    editor.insertText('');
+    _slate.Editor.insertFragment(editor, [linkNode]);
+    // Using insertText directly causes the added Spaces to be added to the linked text, as in the issue above, so replaced by insertFragment
+    _slate.Editor.insertFragment(editor, [{
+      id: _slugid.default.nice(),
+      text: ''
+    }]);
+    (0, _focusEditor.focusEditor)(editor);
+    return;
+  } else {
+    const selectedText = _slate.Editor.string(editor, selection); // Selected text
+    if (selectedText !== title) {
+      // Replace the selected text with the link node if the selected text is different from the entered text
+      editor.deleteFragment();
+      _slate.Transforms.insertNodes(editor, linkNode);
+    } else {
+      // Wrap the selected text with the link node if the selected text is the same as the entered text
+      _slate.Transforms.wrapNodes(editor, linkNode, {
+        split: true,
+        at: selection
+      });
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    }
+  }
+  (0, _focusEditor.focusEditor)(editor);
+};
+exports.insertLink = insertLink;
+const insertSeafileLink = _ref => {
+  let {
+    editor,
+    url,
+    title,
+    selection
+  } = _ref;
+  (0, _focusEditor.focusEditor)(editor, selection);
+  const linkNode = generateLinkNode(url, title);
+  const isCollapsed = _slate.Range.isCollapsed(selection);
+  if (isCollapsed) {
+    // If selection is collapsed, we insert a space and then insert link node that help operation easier
+    editor.insertText('');
+    _slate.Editor.insertFragment(editor, [linkNode]);
+    // Using insertText directly causes the added Spaces to be added to the linked text, as in the issue above, so replaced by insertFragment
+    _slate.Editor.insertFragment(editor, [{
+      id: _slugid.default.nice(),
+      text: ''
+    }]);
+    (0, _focusEditor.focusEditor)(editor);
+    return;
+  } else {
+    const selectedText = _slate.Editor.string(editor, selection); // Selected text
+    if (selectedText !== title) {
+      // Replace the selected text with the link node if the selected text is different from the entered text
+      editor.deleteFragment();
+      _slate.Transforms.insertNodes(editor, linkNode);
+    } else {
+      // Wrap the selected text with the link node if the selected text is the same as the entered text
+      _slate.Transforms.wrapNodes(editor, linkNode, {
+        split: true,
+        at: selection
+      });
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    }
+  }
+};
+exports.insertSeafileLink = insertSeafileLink;
+const getElementHref = element => {
+  if (!element) return '';
+  return element.href || element.url;
+};
+exports.getElementHref = getElementHref;
+const getLinkInfo = editor => {
+  const isLinkNode = isLinkType(editor);
+  if (!isLinkNode) return null;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => (0, _queries.getNodeType)(n) === _constants.ElementTypes.LINK,
+    universal: true
+  });
+  if (!match) return null;
+  const [node, path] = match;
+  const showedText = (0, _queries.getEditorString)(editor, path);
+  return {
+    linkUrl: getElementHref(node),
+    linkTitle: showedText || node.title,
+    path: path
+  };
+};
+exports.getLinkInfo = getLinkInfo;
+const updateLink = (editor, newUrl, newText) => {
+  const linkAbove = (0, _queries.getAboveNode)(editor, {
+    match: {
+      type: _constants.ElementTypes.LINK
+    }
+  });
+  if (!linkAbove) return;
+  const {
+    href: oldUrl,
+    title: oldText
+  } = linkAbove[0] || {};
+  if (oldUrl !== newUrl || oldText !== newText) {
+    _slate.Transforms.setNodes(editor, {
+      url: newUrl,
+      title: newText
+    }, {
+      at: linkAbove[1]
+    });
+  }
+  upsertLinkText(editor, {
+    text: newText
+  });
+};
+exports.updateLink = updateLink;
+const upsertLinkText = (editor, _ref2) => {
+  let {
+    text
+  } = _ref2;
+  const newLink = (0, _queries.getAboveNode)(editor, {
+    match: {
+      type: _constants.ElementTypes.LINK
+    }
+  });
+  if (!newLink) return;
+  const [newLInkNode, newLinkPath] = newLink;
+  if (text && text.length && text !== (0, _queries.getEditorString)(editor, newLinkPath)) {
+    const firstText = newLInkNode.children[0];
+    (0, _replaceNodeChildren.replaceNodeChildren)(editor, {
+      at: newLinkPath,
+      nodes: {
+        ...firstText,
+        text
+      },
+      insertOptions: {
+        select: true
+      }
+    });
+  }
+};
+exports.upsertLinkText = upsertLinkText;
+const unWrapLinkNode = async editor => {
+  if (editor.selection == null) return;
+  const [linkNode] = _slate.Editor.nodes(editor, {
+    match: n => (0, _queries.getNodeType)(n) === _constants.ElementTypes.LINK,
+    universal: true
+  });
+  // Check selection is link node
+  if (!linkNode || !linkNode[0]) return;
+  _slate.Transforms.unwrapNodes(editor, {
+    match: n => (0, _queries.getNodeType)(n) === _constants.ElementTypes.LINK
+  });
+};
+exports.unWrapLinkNode = unWrapLinkNode;

package/dist/extension/plugins/link/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _elementTypes = require("../../constants/element-types");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const LinkPlugin = {
+  type: _elementTypes.LINK,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = LinkPlugin;

package/dist/extension/plugins/link/menu/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("slate");
+var _components = require("../../../../components");
+var _menusConfig = require("../../../constants/menus-config");
+var _elementTypes = require("../../../constants/element-types");
+var _helper = require("../helper");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _linkModal = _interopRequireDefault(require("./link-modal"));
+var _eventTypes = require("../../../../constants/event-types");
+var _jsxRuntime = require("react/jsx-runtime");
+const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.LINK];
+const LinkMenu = _ref => {
+  let {
+    className,
+    readonly,
+    editor
+  } = _ref;
+  const [isOpenLinkModal, setIsOpenLinkModal] = (0, _react.useState)(false);
+  const [linkInfo, setLinkInfo] = (0, _react.useState)({
+    linkTitle: '',
+    linkUrl: ''
+  });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isLinkActive = (0, _react.useMemo)(() => (0, _helper.isLinkType)(editor), [editor.selection]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_OPEN_LINK_MODAL, handleOpenLinkModal);
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    if ((0, _helper.isLinkType)(editor)) {
+      const newTitle = editor.selection && _slate.Editor.string(editor, editor.selection);
+      newTitle && setLinkInfo({
+        ...linkInfo,
+        linkTitle: newTitle
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+  const handleOpenLinkModal = (0, _react.useCallback)(linkInfo => {
+    Reflect.ownKeys.length && setLinkInfo(linkInfo);
+    setIsOpenLinkModal(true);
+  }, [setIsOpenLinkModal, setLinkInfo]);
+  const onClick = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isLinkActive) {
+      isLinkActive && (0, _helper.unWrapLinkNode)(editor);
+      return;
+    }
+    if (editor.selection) {
+      const selectedText = _slate.Editor.string(editor, editor.selection);
+      setLinkInfo({
+        ...linkInfo,
+        linkTitle: selectedText
+      });
+    }
+    setIsOpenLinkModal(true);
+    document.getElementById(`sea_email_${_elementTypes.LINK}`).blur();
+  }, [editor, isLinkActive, linkInfo]);
+  const onCloseModal = (0, _react.useCallback)(() => {
+    setIsOpenLinkModal(false);
+    setLinkInfo({
+      linkTitle: '',
+      linkUrl: ''
+    });
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
+      className: className,
+      disabled: (0, _helper.isMenuDisabled)(editor, readonly),
+      isActive: isLinkActive,
+      onClick: onClick,
+      ...menuConfig
+    }), isOpenLinkModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkModal.default, {
+      onCloseModal: onCloseModal,
+      editor: editor,
+      linkTitle: linkInfo.linkTitle,
+      linkUrl: linkInfo.linkUrl
+    })]
+  });
+};
+var _default = exports.default = LinkMenu;