@seafile/seafile-editor 1.0.6 → 1.0.8

package/dist/containers/article-info/index.js

@@ -20,7 +20,6 @@ export default function ArticleInfo(_ref) {
     if (activeTab === TAB_TYPES.FILE_DETAIL) return;
     setActiveTab(TAB_TYPES.FILE_DETAIL);
   }, [activeTab]);
-  console.log(children);
   return /*#__PURE__*/React.createElement("div", {
     className: "sf-article-info-container"
   }, /*#__PURE__*/React.createElement("ul", {

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

@@ -1,12 +1,14 @@
 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';
 import { focusEditor } from '../../extension/core';
+import { isMac } from '../../utils/common';
 import './style.css';
+const isMacOS = isMac();
 export default function SimpleSlateEditor(_ref) {
   let {
     value,
@@ -23,6 +25,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;
@@ -74,12 +77,13 @@ export default function SimpleSlateEditor(_ref) {
     initialValue: slateValue,
     onChange: onChange
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sf-slate-scroll-container"
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/React.createElement("div", {
     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/simple-slate-editor /style.css

@@ -28,13 +28,26 @@
   min-height: 0;
 }
 
-.sf-simple-slate-editor-container .sf-slate-scroll-container,
-  .sf-simple-slate-editor-container .sf-slate-article-container {
+.sf-simple-slate-editor-container .sf-slate-scroll-container {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
 
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
 /* .sf-simple-slate-editor-container .sf-slate-article-container {
   flex: 1;
   position: relative;
@@ -45,10 +58,15 @@
   padding-bottom: 20px;
 } */
 
+.sf-simple-slate-editor-container .sf-slate-article-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
 .sf-simple-slate-editor-container .sf-slate-editor-content .article {
   margin: 0;
   padding: 10px;
-  height: 100%;
   border: none;
   background-color: #fff;
 }
@@ -56,17 +74,3 @@
 .sf-simple-slate-editor-container .sf-slate-editor-content .article div:first-child {
   outline: none;
 }
-
-.sf-simple-slate-editor-container ::-webkit-scrollbar{
-  width: 8px;
-  height: 8px;
-}
-
-.sf-simple-slate-editor-container ::-webkit-scrollbar-button {
-  display: none;
-}
-
-.sf-simple-slate-editor-container ::-webkit-scrollbar-thumb {
-  background-color: rgb(206, 206, 212);
-  border-radius: 10px;
-}

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

@@ -1,15 +1,17 @@
 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';
 import EditorHelp from './editor-help';
 import { focusEditor } from '../../extension/core';
 import { ScrollContext } from '../../hooks/use-scroll-context';
-import './style.css';
 import useSeafileUtils from '../../hooks/use-insert-image';
+import { isMac } from '../../utils/common';
+import './style.css';
+const isMacOS = isMac();
 export default function SlateEditor(_ref) {
   let {
     value,
@@ -30,6 +32,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;
@@ -88,12 +91,13 @@ export default function SlateEditor(_ref) {
     onChange: onChange
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sf-slate-scroll-container"
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/React.createElement("div", {
     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/style.css

@@ -34,6 +34,20 @@
   overflow: auto;
 }
 
+.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
 .sf-slate-editor-container .sf-slate-article-container {
   flex: 1;
   position: relative;
@@ -57,20 +71,6 @@
   outline: none;
 }
 
-.sf-slate-editor-container ::-webkit-scrollbar{
-  width: 8px;
-  height: 8px;
-}
-
-.sf-slate-editor-container ::-webkit-scrollbar-button {
-  display: none;
-}
-
-.sf-slate-editor-container ::-webkit-scrollbar-thumb {
-  background-color: rgb(206, 206, 212);
-  border-radius: 10px;
-}
-
 @media (max-width: 991.8px) {
   .sf-slate-editor-toolbar {
     overflow-x: auto;

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

@@ -1,9 +1,11 @@
 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';
+import { isMac } from '../../utils/common';
 import './style.css';
+const isMacOS = isMac();
 export default function SlateViewer(_ref) {
   let {
     value,
@@ -12,6 +14,7 @@ export default function SlateViewer(_ref) {
   } = _ref;
   const scrollRef = useRef(null);
   const containerScrollRef = externalScrollRef ? externalScrollRef : scrollRef;
+  const decorate = useHighlight(baseEditor);
 
   // willUnmount
   useEffect(() => {
@@ -28,13 +31,14 @@ export default function SlateViewer(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sf-slate-viewer-scroll-container ".concat(isShowOutline ? 'outline' : '')
+    className: "sf-slate-viewer-scroll-container ".concat(isMacOS ? '' : 'isWin', " ").concat(isShowOutline ? 'outline' : '')
   }, /*#__PURE__*/React.createElement("div", {
     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/editors/slate-viewer/style.css

@@ -8,6 +8,20 @@
   padding: 30px 0 15px;
 }
 
+.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
 .sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
   flex: 1;
   margin: 0 auto 15px;

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,19 @@
+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';
+import 'prismjs/components/prism-json';
+export default Prism;

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

@@ -0,0 +1,74 @@
+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';
+import { LANGUAGE_MAP } from '../plugins/code-block/render-elem/constant';
+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');
+  const language = LANGUAGE_MAP[block.lang] ? block.lang : 'text';
+  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/toolbar/header-toolbar/style.css

@@ -36,5 +36,5 @@
 }
 
 .sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
-  font-size: 14px;
+  font-size: 13px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -43,6 +43,7 @@
     "i18next-xhr-backend": "3.2.2",
     "ignore-loader": "0.1.2",
     "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "koa": "2.14.2",
     "koa-router": "7.3.0",
     "koa-send": "5.0.1",
@@ -50,7 +51,7 @@
     "less": "4.2.0",
     "less-loader": "11.1.3",
     "mini-css-extract-plugin": "2.7.6",
-    "postcss": "8.4.29",
+    "postcss": "8.4.32",
     "postcss-loader": "7.3.3",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
@@ -59,6 +60,7 @@
     "react-i18next": "12.1.4",
     "react-router": "6.16.0",
     "react-router-dom": "6.16.0",
+    "seafile-js": "0.2.222",
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "url-loader": "4.1.1",
@@ -87,10 +89,8 @@
     "codemirror": "6.0.1",
     "deep-copy": "1.4.2",
     "deepmerge": "4.3.1",
-    "install": "0.13.0",
     "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",
@@ -104,7 +104,6 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.0.0",
     "remark-stringify": "11.0.0",
-    "seafile-js": "0.2.210",
     "slate": "0.94.1",
     "slate-history": "0.93.0",
     "slate-hyperscript": "^0.81.3",