@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.css

@@ -0,0 +1,148 @@
+.sdoc-code-block-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: fit-content;
+  max-width: 250px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container {
+  height: 36px;
+  width: 100%;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .active {
+  color: #212529;
+  text-decoration: none;
+  background: #f2f2f2;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-size: 12px;
+  color: #212529;
+  border-radius: 2px;
+  text-align: center;
+  line-height: 20px;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item.sdoc-code-block-hover-operation-lang .op-item {
+  padding: 0 5px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .sdoc-code-block-hover-operation-lang .icon-font {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item {
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  justify-content: center;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item.sdoc-code-block-hover-operation-lang {
+  width: fit-content;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-lang .icon-font {
+  color: #999;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-divider {
+  height: 20px;
+  width: 1px;
+  background-color: #e5e5e5;
+  margin: 0 8px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f2f2f2;
+}
+
+.sdoc-code-block-hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #444;
+}
+
+.sdoc-langs-list-container {
+  position: absolute;
+  top: 38px;
+  left: 0px;
+  width: 200px;
+  overflow-y: hidden;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 5px #ccc;
+  border: 1px solid #dedede;
+}
+
+.sdoc-langs-list-container .sdoc-search-langs {
+  padding: 10px 10px 0;
+}
+
+.sdoc-langs-list-container .sdoc-search-langs input {
+  max-height: 30px;
+  font-size: 14px;
+}
+
+.langs-list-empty {
+  padding: 10px;
+  width: 100%;
+  font-size: 13px;
+  text-align: center;
+  line-height: 30px;
+  vertical-align: middle;
+}
+
+.sdoc-langs-list-container .langs-list-ul {
+  list-style: none;
+  overflow-y: auto;
+  max-height: 280px;
+  min-height: 100px;
+  padding: 10px;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li {
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  font-size: 13px;
+  padding-left: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.active {
+  background-color: #f5f5f5;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li .li-check-mark {
+  opacity: 0;
+  padding: 0 10px;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li .li-checked {
+  opacity: 1;
+}

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -0,0 +1,257 @@
+"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 _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commons = require("../../../commons/");
+var _helpers = require("../helpers");
+var _prismjs = require("../prismjs");
+require("./index.css");
+const LangList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    langsData,
+    onSelectLang,
+    selectedLanguageText,
+    selectedIndex
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  if (!langsData.length) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "langs-list-empty"
+    }, /*#__PURE__*/_react.default.createElement("span", null, t('Search_not_found')));
+  }
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: "langs-list-ul"
+  }, langsData.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      ref: el => ref.current[index] = el,
+      className: `langs-list-li ${selectedLanguageText === item.text ? 'active' : ''} ${selectedIndex === index ? 'hover' : ''}`,
+      id: item.value,
+      key: item.value,
+      onClick: () => {
+        onSelectLang(item, index);
+      }
+    }, item.text, /*#__PURE__*/_react.default.createElement("span", {
+      className: `li-check-mark ${selectedLanguageText === item.text ? 'li-checked' : ''}`
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-check-mark icon-font"
+    })));
+  }));
+});
+const CodeBlockHoverMenu = _ref2 => {
+  let {
+    style,
+    language,
+    menuPosition,
+    onChangeLanguage,
+    onChangeAutoLineWrap,
+    onCopyCodeBlock,
+    onDeleteCodeBlock,
+    t
+  } = _ref2;
+  const {
+    white_space = 'nowrap'
+  } = style;
+  const [isShowlangsList, setIsShowlangsList] = (0, _react.useState)(false);
+  const [selectedLanguageText, setSelectedLanguageText] = (0, _react.useState)('');
+  const [langsData, setLangsData] = (0, _react.useState)((0, _prismjs.genCodeLangs)());
+  const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(0);
+  const langRefs = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    langRefs.current = Array(langsData.length).fill().map((_, i) => langRefs.current[i] || /*#__PURE__*/_react.default.createRef());
+  }, [langsData]);
+  const onHiddenLangsList = (0, _react.useCallback)(e => {
+    if (!e.target.parentNode.className.includes('sdoc-search-langs')) {
+      setIsShowlangsList(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    setIsShowTooltip(true);
+    window.addEventListener('click', onHiddenLangsList);
+    return () => {
+      window.removeEventListener('click', onHiddenLangsList);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onShowLangs = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    setSelectedIndex(langsData.findIndex(lang => lang.text === selectedLanguageText));
+    setIsShowlangsList(!isShowlangsList);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowlangsList, selectedLanguageText]);
+  const onAutoLineWrap = (0, _react.useCallback)(() => {
+    if (white_space === 'normal') {
+      onChangeAutoLineWrap('nowrap');
+    } else {
+      onChangeAutoLineWrap('normal');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [white_space]);
+  const onDelete = (0, _react.useCallback)(() => {
+    onDeleteCodeBlock();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSelectLang = (0, _react.useCallback)((lang, index) => {
+    const {
+      text
+    } = lang;
+    setSelectedLanguageText(text);
+    setSelectedIndex(index);
+    onChangeLanguage(lang);
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onChangeLanguage]);
+  (0, _react.useEffect)(() => {
+    // Compatible with legacy code
+    let selectedLanguage = language;
+    if (language === 'text') {
+      selectedLanguage = 'plaintext';
+    }
+    const selectedLanguageOption = (0, _helpers.getSelectedLangOption)(selectedLanguage);
+    setSelectedLanguageText(selectedLanguageOption.text);
+  }, [language]);
+  const onChange = (0, _react.useCallback)(e => {
+    // Escapes all special characters in a string for safe use in regular expressions.
+    const escapeRegExp = string => string.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const filterData = [];
+    const value = e.currentTarget.value.toLowerCase().trim();
+    // Generate a RegExp object and perform case-insensitive matching thereafter.
+    const regex = new RegExp(escapeRegExp(value), 'i');
+    (0, _prismjs.genCodeLangs)().forEach(item => {
+      if (regex.test(item.value)) {
+        filterData.push(item);
+      }
+    });
+    setLangsData(filterData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeyDown = (0, _react.useCallback)(e => {
+    const {
+      key
+    } = e;
+    switch (key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.max(prevIndex - 1, 0);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.min(prevIndex + 1, langsData.length - 1);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'Enter':
+        onSelectLang(langsData[selectedIndex], selectedIndex);
+        break;
+      default:
+        break;
+    }
+  }, [langsData, selectedIndex, onSelectLang]);
+  const scrollToLang = index => {
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-code-block-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-code-block-hover-operation-item sdoc-code-block-hover-operation-lang"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    className: `op-item ${isShowlangsList ? 'active' : ''}`,
+    onClick: onShowLangs
+  }, /*#__PURE__*/_react.default.createElement("span", null, selectedLanguageText), /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "sdoc_code_block_auto_wrap",
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    className: `op-item ${white_space === 'normal' ? 'active' : ''}`,
+    onClick: onAutoLineWrap
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-auto-linefeed icon-font"
+  })), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_code_block_auto_wrap",
+    placement: "top",
+    fade: true
+  }, t('Auto_wrap'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "sdoc_code_block_copy",
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onCopyCodeBlock
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-copy icon-font"
+  })), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_code_block_copy",
+    placement: "top",
+    fade: true
+  }, t('Copy'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "sdoc_code_block_delete",
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onDelete
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-delete icon-font"
+  })), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_code_block_delete",
+    placement: "top",
+    fade: true
+  }, t('Delete'))), isShowlangsList && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-langs-list-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-langs"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    autoFocus: true,
+    placeholder: t('Search_language'),
+    onChange: onChange,
+    onKeyDown: onKeyDown
+  })), /*#__PURE__*/_react.default.createElement(LangList, {
+    langsData: langsData,
+    onSelectLang: onSelectLang,
+    selectedLanguageText: selectedLanguageText,
+    selectedIndex: selectedIndex,
+    ref: langRefs
+  })))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CodeBlockHoverMenu);

package/dist/basic-sdk/extension/plugins/code-block/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 _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+const CodeBlockPlugin = {
+  type: _constants.CODE_BLOCK,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderCodeBlock, _renderElem.renderCodeLine]
+};
+var _default = exports.default = CodeBlockPlugin;

package/dist/basic-sdk/extension/plugins/code-block/menu/index.js

@@ -0,0 +1,35 @@
+"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 _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+const CodeBlockMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle
+  } = _ref;
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.ELEMENT_TYPE.CODE_BLOCK];
+  const insertCodeBlock = (0, _react.useCallback)(() => {
+    (0, _helpers.changeToCodeBlock)(editor, 'plaintext', _constants.INSERT_POSITION.CURRENT);
+    toggle && toggle();
+    (0, _core.focusEditor)(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, toggle]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: insertCodeBlock
+  });
+};
+var _default = exports.default = CodeBlockMenu;

package/dist/basic-sdk/extension/plugins/code-block/model.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+class Blockquote {
+  constructor(options) {
+    this.type = options.type || _constants.BLOCKQUOTE;
+    this.children = options.children || [{
+      text: ''
+    }];
+  }
+}
+var _default = exports.default = Blockquote;