@seafile/sdoc-editor 0.1.88-beta → 0.1.89

package/dist/basic-sdk/assets/css/layout.css

@@ -14,6 +14,8 @@
   background-color: #fff;
   user-select: none;
   border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
 }
 
 .sdoc-editor-container .sdoc-editor-content {

package/dist/basic-sdk/editor.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
-import defaultEditor, { renderLeaf, renderElement, Toolbar } from './extension';
+import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextToolbar } from './extension';
 import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
@@ -232,7 +232,7 @@ var SDocEditor = function SDocEditor(_ref) {
     editor: editor,
     value: slateValue,
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement("div", {
     className: "article",
     ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {

package/dist/basic-sdk/extension/index.js

@@ -5,6 +5,7 @@ import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import Toolbar from './toolbar';
+import ContextToolbar from './toolbar/context-toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -14,4 +15,4 @@ var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   return editor;
 }, baseEditor);
 export default defaultEditor;
-export { renderLeaf, renderElement, Toolbar };
+export { renderLeaf, renderElement, Toolbar, ContextToolbar };

package/dist/basic-sdk/extension/plugins/link/render-elem.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
+import { Range } from '@seafile/slate';
 import { unWrapLinkNode } from './helpers';
 import AddLinkDialog from './menu/add-link-dialog';
 import LinkHoverComponent from './menu/hover-link-dialog';
@@ -96,7 +97,7 @@ var LinkHoverMenuComponent = /*#__PURE__*/function (_React$Component) {
         url: element.href,
         title: element.title,
         onLinkDialogToggle: this.onLinkDialogToggle
-      }), isShowLinkMenu && /*#__PURE__*/React.createElement(LinkHoverComponent, {
+      }), isShowLinkMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(LinkHoverComponent, {
         menuPosition: menuPosition,
         editor: editor,
         href: element.href,

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -12,7 +12,8 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
-    className = _ref.className;
+    className = _ref.className,
+    idPrefix = _ref.idPrefix;
   var isActive = useCallback(function (type) {
     var isMark = getValue(editor, type);
     return !!isMark;
@@ -59,7 +60,9 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
         };
         itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
       }
-      return _objectSpread(_objectSpread({}, itemProps), item);
+      return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
+        id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id
+      });
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.css

@@ -0,0 +1,10 @@
+.sdoc-context-toolbar {
+  position: absolute;
+  width: auto;
+  height: 42px;
+  z-index: 101;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px #0000001f;
+}

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.js

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useFocused, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { Editor, Range } from '@seafile/slate';
+import { MenuGroup } from '../../menu';
+import TextStyleMenuList from '../../plugins/text-style/menu';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { getSelectedNodeByType } from '../../core';
+import { CODE_BLOCK } from '../../constants';
+import './index.css';
+var ContextToolbar = function ContextToolbar() {
+  var ref = useRef(null);
+  var editor = useSlateStatic();
+  var scrollRef = useScrollContext();
+  var inFocus = useFocused();
+  var readOnly = useReadOnly();
+  var setContextToolbarPosition = useCallback(function () {
+    var el = ref.current;
+    var domSelection = window.getSelection();
+    var domRange = domSelection.getRangeAt(0);
+    var rect = domRange.getBoundingClientRect();
+    el.style.top = "".concat(rect.top - el.offsetHeight, "px");
+    el.style.left = "".concat(rect.left, "px");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = useCallback(function (e) {
+    setContextToolbarPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var el = ref.current;
+    var selection = editor.selection;
+    if (!el) {
+      return;
+    }
+    if (readOnly || !selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === '' || getSelectedNodeByType(editor, CODE_BLOCK)) {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+      el.removeAttribute('style');
+      return;
+    }
+    scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+    setContextToolbarPosition();
+  });
+  return createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "sdoc-context-toolbar",
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault(); // prevent toolbar from taking focus away from editor
+    }
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+    editor: editor,
+    idPrefix: 'sdoc_context_toolar'
+  }))), document.body);
+};
+export default ContextToolbar;

package/dist/layout/layout.css

@@ -20,6 +20,9 @@ html, body {
   border-bottom: 1px solid #e5e6e8;
   flex-shrink: 0;
   height: 56px;
+  position: relative;
+  z-index: 102;
+  background-color: #fff;
 }
 
 .sdoc-editor-page-wrapper .sdoc-editor-page-content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.88beta",
+  "version": "0.1.89",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",