@seafile/seafile-editor 1.0.5 → 1.0.6-1

package/dist/editors/simple-slate-editor /index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import { Editable, Slate } from 'slate-react';
 import { Editor } from 'slate';
-import { baseEditor, Toolbar, renderElement, renderLeaf } from '../../extension';
+import { baseEditor, Toolbar, renderElement, renderLeaf, useHighlight, SetNodeToDecorations } from '../../extension';
 import EventBus from '../../utils/event-bus';
 import EventProxy from '../../utils/event-handler';
 import withPropsEditor from './with-props-editor';
@@ -23,6 +23,7 @@ export default function SimpleSlateEditor(_ref) {
   const eventProxy = useMemo(() => {
     return new EventProxy(editor);
   }, [editor]);
+  const decorate = useHighlight(editor);
   const onChange = useCallback(value => {
     setSlateValue(value);
     const operations = editor.operations;
@@ -79,7 +80,8 @@ export default function SimpleSlateEditor(_ref) {
     className: "sf-slate-article-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "article"
-  }, /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+    decorate: decorate,
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,

package/dist/editors/slate-editor/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { Editable, Slate } from 'slate-react';
 import { Editor } from 'slate';
-import { baseEditor, Toolbar, renderElement, renderLeaf } from '../../extension';
+import { baseEditor, Toolbar, renderElement, renderLeaf, useHighlight, SetNodeToDecorations } from '../../extension';
 import EventBus from '../../utils/event-bus';
 import EventProxy from '../../utils/event-handler';
 import withPropsEditor from './with-props-editor';
@@ -30,6 +30,7 @@ export default function SlateEditor(_ref) {
     return new EventProxy(editor);
   }, [editor]);
   useSeafileUtils(editor);
+  const decorate = useHighlight(editor);
   const onChange = useCallback(value => {
     setSlateValue(value);
     const operations = editor.operations;
@@ -93,7 +94,8 @@ export default function SlateEditor(_ref) {
     className: "sf-slate-article-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "article"
-  }, /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+    decorate: decorate,
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,

package/dist/editors/slate-viewer/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { baseEditor, renderElement, renderLeaf } from '../../extension';
+import { SetNodeToDecorations, baseEditor, renderElement, renderLeaf, useHighlight } from '../../extension';
 import { Editable, Slate } from 'slate-react';
 import Outline from '../../containers/outline';
 import { ScrollContext } from '../../hooks/use-scroll-context';
@@ -12,6 +12,7 @@ export default function SlateViewer(_ref) {
   } = _ref;
   const scrollRef = useRef(null);
   const containerScrollRef = externalScrollRef ? externalScrollRef : scrollRef;
+  const decorate = useHighlight(baseEditor);
 
   // willUnmount
   useEffect(() => {
@@ -33,8 +34,9 @@ export default function SlateViewer(_ref) {
     className: "sf-slate-viewer-article-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "article"
-  }, /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     readOnly: true,
+    decorate: decorate,
     renderElement: renderElement,
     renderLeaf: renderLeaf
   }))), isShowOutline && /*#__PURE__*/React.createElement("div", {

package/dist/extension/highlight/index.js

@@ -0,0 +1,3 @@
+import SetNodeToDecorations from './set-node-decorations';
+import useHighlight from './use-highlight';
+export { useHighlight, SetNodeToDecorations };

package/dist/extension/highlight/normalize-tokens.js

@@ -0,0 +1,87 @@
+const newlineRe = /\r\n|\r|\n/;
+const normalizeEmptyLines = line => {
+  if (line.length === 0) {
+    line.push({
+      types: ['plain'],
+      content: '\n',
+      empty: true
+    });
+  } else if (line.length === 1 && line[0].content === '') {
+    line[0].content = '\n';
+    line[0].empty = true;
+  }
+};
+const appendTypes = (types, add) => {
+  const typesSize = types.length;
+  if (typesSize > 0 && types[typesSize - 1] === add) {
+    return types;
+  }
+  return types.concat(add);
+};
+export const normalizeTokens = tokens => {
+  const typeArrStack = [[]];
+  const tokenArrStack = [tokens];
+  const tokenArrIndexStack = [0];
+  const tokenArrSizeStack = [tokens.length];
+  let i = 0;
+  let stackIndex = 0;
+  let currentLine = [];
+  const acc = [currentLine];
+  while (stackIndex > -1) {
+    while ((i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]) {
+      let content;
+      let types = typeArrStack[stackIndex];
+      const tokenArr = tokenArrStack[stackIndex];
+      const token = tokenArr[i];
+
+      // Determine content and append type to types if necessary
+      if (typeof token === 'string') {
+        types = stackIndex > 0 ? types : ['plain'];
+        content = token;
+      } else {
+        types = appendTypes(types, token.type);
+        if (token.alias) {
+          types = appendTypes(types, token.alias);
+        }
+        content = token.content;
+      }
+
+      // If token.content is an array, increase the stack depth and repeat this while-loop
+      if (typeof content !== 'string') {
+        stackIndex++;
+        typeArrStack.push(types);
+        tokenArrStack.push(content);
+        tokenArrIndexStack.push(0);
+        tokenArrSizeStack.push(content.length);
+        continue;
+      }
+
+      // Split by newlines
+      const splitByNewlines = content.split(newlineRe);
+      const newlineCount = splitByNewlines.length;
+      currentLine.push({
+        types,
+        content: splitByNewlines[0]
+      });
+
+      // Create a new line for each string on a new line
+      for (let i = 1; i < newlineCount; i++) {
+        normalizeEmptyLines(currentLine);
+        acc.push(currentLine = []);
+        currentLine.push({
+          types,
+          content: splitByNewlines[i]
+        });
+      }
+    }
+
+    // Decreate the stack depth
+    stackIndex--;
+    typeArrStack.pop();
+    tokenArrStack.pop();
+    tokenArrIndexStack.pop();
+    tokenArrSizeStack.pop();
+  }
+  normalizeEmptyLines(currentLine);
+  return acc;
+};

package/dist/extension/highlight/prismjs.js

@@ -0,0 +1,18 @@
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-lua';
+export default Prism;

package/dist/extension/highlight/set-node-decorations.js

@@ -0,0 +1,77 @@
+import { Editor, Node, Element } from 'slate';
+import { useSlate } from 'slate-react';
+import { CODE_BLOCK } from '../constants/element-types';
+import Prism from './prismjs';
+import { normalizeTokens } from './normalize-tokens';
+const mergeMaps = function () {
+  const map = new Map();
+  for (var _len = arguments.length, maps = new Array(_len), _key = 0; _key < _len; _key++) {
+    maps[_key] = arguments[_key];
+  }
+  for (const m of maps) {
+    for (const item of m) {
+      map.set(...item);
+    }
+  }
+  return map;
+};
+const getChildNodeToDecorations = _ref => {
+  let [block, blockPath] = _ref;
+  const nodeToDecorations = new Map();
+  const text = block.children.map(line => Node.string(line)).join('\n');
+  console.log(block);
+  const language = block.lang || 'text';
+  console.log(text);
+  console.log(language);
+  console.log(Prism.languages);
+  const tokens = Prism.tokenize(text, Prism.languages[language]);
+  const normalizedTokens = normalizeTokens(tokens); // make tokens flat and grouped by line
+  const blockChildren = block.children;
+  for (let index = 0; index < normalizedTokens.length; index++) {
+    const tokens = normalizedTokens[index];
+    const element = blockChildren[index];
+    if (element) {
+      if (!nodeToDecorations.has(element)) {
+        nodeToDecorations.set(element, []);
+      }
+    }
+    let start = 0;
+    for (const token of tokens) {
+      const length = token.content.length;
+      if (!length) {
+        continue;
+      }
+      const end = start + length;
+      const path = [...blockPath, index, 0];
+      const range = {
+        anchor: {
+          path,
+          offset: start
+        },
+        focus: {
+          path,
+          offset: end
+        },
+        token: true,
+        ...Object.fromEntries(token.types.map(type => [type, true]))
+      };
+      if (nodeToDecorations.get(element)) {
+        nodeToDecorations.get(element).push(range);
+      }
+      start = end;
+    }
+  }
+  return nodeToDecorations;
+};
+const SetNodeToDecorations = () => {
+  const editor = useSlate();
+  const blockEntries = Array.from(Editor.nodes(editor, {
+    at: [],
+    mode: 'highest',
+    match: n => Element.isElement(n) && n.type === CODE_BLOCK
+  }));
+  const nodeToDecorations = mergeMaps(...blockEntries.map(getChildNodeToDecorations));
+  editor.nodeToDecorations = nodeToDecorations;
+  return null;
+};
+export default SetNodeToDecorations;

package/dist/extension/highlight/use-highlight.js

@@ -0,0 +1,13 @@
+import { Element } from 'slate';
+import { CODE_LINE } from '../constants/element-types';
+export const useHighlight = editor => _ref => {
+  let [node, path] = _ref;
+  let ranges = [];
+  if (Element.isElement(node) && node.type === CODE_LINE) {
+    var _editor$nodeToDecorat;
+    ranges = (editor === null || editor === void 0 ? void 0 : (_editor$nodeToDecorat = editor.nodeToDecorations) === null || _editor$nodeToDecorat === void 0 ? void 0 : _editor$nodeToDecorat.get(node)) || [];
+    return ranges;
+  }
+  return ranges;
+};
+export default useHighlight;

package/dist/extension/index.js

@@ -1,7 +1,8 @@
 import { ELementTypes } from './constants';
 import { isEmptyParagraph } from './core';
+import { useHighlight, SetNodeToDecorations } from './highlight';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import { Toolbar } from './toolbar';
 import baseEditor from './editor';
-export { ELementTypes, isEmptyParagraph, renderElement, renderLeaf, Toolbar, baseEditor };
+export { ELementTypes, isEmptyParagraph, renderElement, renderLeaf, Toolbar, baseEditor, useHighlight, SetNodeToDecorations };

package/dist/extension/plugins/code-block/render-elem/constant.js

@@ -1,16 +1,16 @@
 // Default language key name
-export const EXPLAIN_TEXT = 'none';
+export const EXPLAIN_TEXT = 'text';
 export const LANGUAGE_MAP = {
-  [EXPLAIN_TEXT]: ' Text',
-  html: ' HTML',
-  css: ' CSS',
-  javascript: ' Javascript',
-  c: ' C',
-  cpp: ' C++',
-  csharp: ' C#',
-  java: ' Java',
-  python: ' Python',
-  sql: ' Sql',
-  swift: ' Swift',
-  json: ' JSON'
+  [EXPLAIN_TEXT]: 'Text',
+  html: 'HTML',
+  css: 'CSS',
+  javascript: 'Javascript',
+  c: 'C',
+  cpp: 'C++',
+  csharp: 'C#',
+  java: 'Java',
+  python: 'Python',
+  sql: 'SQL',
+  swift: 'Swift',
+  json: 'JSON'
 };

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

@@ -76,4 +76,14 @@ export const getImagesUrlList = nodes => {
     nodeIndex++;
   }
   return list;
+};
+export const handleUpdateImage = async (editor, file) => {
+  if (editor.api.uploadLocalImage) {
+    try {
+      const imgUrl = await editor.api.uploadLocalImage(file);
+      insertImage(editor, imgUrl);
+    } catch (error) {
+      console.log('error', error);
+    }
+  }
 };

package/dist/extension/plugins/image/menu/image-menu-popover.js

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import ImageMenuInsertInternetDialog from './image-menu-dialog';
 import EventBus from '../../../../utils/event-bus';
 import { EXTERNAL_EVENTS } from '../../../../constants/event-types';
-import { insertImage } from '../helper';
+import { handleUpdateImage } from '../helper';
+import { focusEditor } from '../../../core';
 import './style.css';
 const ImageMenuPopover = _ref => {
   let {
@@ -26,16 +27,10 @@ const ImageMenuPopover = _ref => {
     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);
-      }
-    }
+    const file = e.target.files[0];
+    handleUpdateImage(editor, file);
     handelClosePopover();
+    focusEditor(editor);
   }, [editor, handelClosePopover]);
   const onToggleImageDialog = useCallback(() => {
     setIsShowInternetImageModal(false);

package/dist/extension/plugins/image/plugin.js

@@ -1,8 +1,12 @@
 import { ELementTypes } from '../../constants';
+import { IMAGE } from '../../constants/element-types';
+import { focusEditor } from '../../core';
+import { handleUpdateImage } from './helper';
 const withImages = editor => {
   const {
     isInline,
-    isVoid
+    isVoid,
+    insertData
   } = editor;
   const newEditor = editor;
   newEditor.isInline = element => {
@@ -19,6 +23,15 @@ const withImages = editor => {
     if (type === ELementTypes.IMAGE) return true;
     return isVoid(element);
   };
+  newEditor.insertData = data => {
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes(IMAGE)) {
+      const file = data.files[0];
+      handleUpdateImage(newEditor, file);
+      focusEditor(newEditor);
+      return;
+    }
+    return insertData(data);
+  };
   return newEditor;
 };
 export default withImages;

package/dist/extension/plugins/list/helpers.js

@@ -1,6 +1,7 @@
 import { Editor, Element, Node, Range, Text } from 'slate';
 import { CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, LIST_ITEM, TABLE } from '../../constants/element-types';
 import { LIST_TYPES } from './constant';
+import { transformsToList } from './transforms';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly || !editor.selection) return true;
   // Match disable node
@@ -61,4 +62,31 @@ export const getActiveListType = editor => {
     }
   }
   return selectedListNodeEntry && selectedListNodeEntry[0].type;
+};
+export const setListType = (editor, type) => {
+  transformsToList(editor, type);
+};
+export const getBeforeText = editor => {
+  const {
+    selection
+  } = editor;
+  if (selection == null) return {
+    beforeText: '',
+    range: null
+  };
+  const {
+    anchor
+  } = selection;
+  // Find the near text node above the current text
+  const [, aboveNodePath] = Editor.above(editor);
+  const aboveNodeStartPoint = Editor.start(editor, aboveNodePath); // The starting position of the text node
+  const range = {
+    anchor,
+    focus: aboveNodeStartPoint
+  };
+  const beforeText = Editor.string(editor, range) || '';
+  return {
+    beforeText,
+    range
+  };
 };

package/dist/extension/plugins/list/plugin/index.js

@@ -5,11 +5,13 @@ import { insertBreakList } from './insert-break-list';
 import { insertFragmentList } from './insert-fragment-list';
 import { normalizeList } from './normalize-list';
 import { LIST_TYPES } from '../constant';
+import { handleShortcut } from './shortcut';
 const withList = editor => {
   const {
     insertBreak,
     onHotKeyDown,
-    deleteBackWord
+    deleteBackWord,
+    insertText
   } = editor;
   const newEditor = editor;
   newEditor.insertBreak = () => {
@@ -28,6 +30,11 @@ const withList = editor => {
     // nothing todo
     deleteBackWord(unit);
   };
+  newEditor.insertText = text => {
+    const isPreventInsert = handleShortcut(newEditor, text);
+    if (isPreventInsert) return;
+    return insertText(text);
+  };
   newEditor.onHotKeyDown = event => {
     const activeListType = getActiveListType(editor);
     const isListActive = LIST_TYPES.includes(activeListType);

package/dist/extension/plugins/list/plugin/shortcut.js

@@ -0,0 +1,44 @@
+import { Editor, Range, Transforms } from 'slate';
+import { getBeforeText, setListType } from '../helpers';
+import { ORDERED_LIST, PARAGRAPH } from '../../../constants/element-types';
+import { focusEditor, getPreviousPath } from '../../../core';
+
+/**
+ * @param {Editor} editor
+ * @param {String} text
+ * @returns {Boolean} isPreventInsert
+ */
+export const handleShortcut = (editor, text) => {
+  if (text !== ' ') return false;
+  const {
+    selection
+  } = editor;
+  if (!Range.isCollapsed(selection)) return false;
+  let [aboveNode, aboveNodePath] = Editor.above(editor);
+  if (aboveNode.type !== PARAGRAPH) return false;
+  // Match ordered list shortcut
+  const regShortcut = /^\s*[1]+\.\s*$/;
+  const {
+    beforeText,
+    range
+  } = getBeforeText(editor);
+  const matchResult = beforeText.match(regShortcut);
+  const matchedText = matchResult && matchResult[0];
+  // If the match fails or the match is not at the beginning of the line, it is not a shortcut
+  if (!matchResult || matchResult.index !== 0) return false;
+  const previousNodePath = getPreviousPath(aboveNodePath);
+  const [previousNode] = Editor.node(editor, previousNodePath);
+  // If the previous node is not an ordered list and is not start with `1.`,it is not a shortcut
+  if (previousNode.type !== ORDERED_LIST && matchedText !== '1.') return false;
+  // If the previous node is not an ordered list and is start with `1.`,transforms to ordered list
+  if (previousNode.type !== ORDERED_LIST && matchedText === '1.') {
+    // Delete shortcut key text
+    Transforms.delete(editor, {
+      at: range
+    });
+    setListType(editor, ORDERED_LIST);
+    focusEditor(editor);
+    return true;
+  }
+  return false;
+};

package/dist/slate-convert/md-to-slate/transform.js

@@ -152,7 +152,9 @@ export const transformListItem = node => {
     children: children.map(child => {
       if (child.type === PARAGRAPH) {
         return transformListContent(child);
-      } else {
+      } else if (child.type === 'code') {
+        return transformCodeBlock(child);
+      } else if (child.type === 'list') {
         return transformList(child);
       }
     })
@@ -254,7 +256,7 @@ export const transformCodeBlock = node => {
     lang,
     value
   } = node;
-  const children = value.split('\n');
+  const children = value.split('\n').filter(Boolean);
   return {
     id: slugid.nice(),
     type: CODE_BLOCK,

package/dist/slate-convert/slate-to-md/transform.js

@@ -140,6 +140,9 @@ const transformListItem = node => {
     if (child.type === 'paragraph') {
       return transformListContent(child);
     }
+    if (child.type === 'code_block') {
+      return transformCodeBlock(child);
+    }
     if (child.type === 'unordered_list' || child.type === 'ordered_list') {
       return transformList(child);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.5",
+  "version": "1.0.6-1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -91,6 +91,7 @@
     "is-url": "^1.2.4",
     "jest-environment-jsdom": "29.7.0",
     "npm": "10.2.4",
+    "prismjs": "1.29.0",
     "reactstrap": "8.9.0",
     "rehype-format": "5.0.0",
     "rehype-mathjax": "5.0.0",