init

d6882d28 · Proca · b0bdaec1 · d6882d28 · d6882d28 · d6882d28
Commit d6882d28 authored 1 year ago by Proca
Hide whitespace changes
Inline Side-by-side

Showing

with 227 additions and 14 deletions
+227 -14
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,11 @@
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "prosemirror": "^0.11.1",
+        "prosemirror-commands": "^1.5.1",
+        "prosemirror-schema-basic": "^1.2.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.31.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
@@ -11669,6 +11674,11 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/orderedmap": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/orderedmap/-/orderedmap-2.1.0.tgz",
+      "integrity": "sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA=="
+    },
    "node_modules/p-limit": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz",
@@ -13116,6 +13126,66 @@
      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/prosemirror": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror/-/prosemirror-0.11.1.tgz",
+      "integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw==",
+      "deprecated": "This library has been split up into separate modules. This is the old monolithic package, which is no longer maintained. Use prosemirror-view, prosemirror-model, etc instead."
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-commands/-/prosemirror-commands-1.5.1.tgz",
+      "integrity": "sha512-ga1ga/RkbzxfAvb6iEXYmrEpekn5NCwTb8w1dr/gmhSoaGcQ0VPuCzOn5qDEpC45ql2oDkKoKQbRxLJwKLpMTQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-model/-/prosemirror-model-1.19.0.tgz",
+      "integrity": "sha512-/CvFGJnwc41EJSfDkQLly1cAJJJmBpZwwUJtwZPTjY2RqZJfM8HVbCreOY/jti8wTRbVyjagcylyGoeJH/g/3w==",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.1.tgz",
+      "integrity": "sha512-vYBdIHsYKSDIqYmPBC7lnwk9DsKn8PnVqK97pMYP5MLEDFqWIX75JiaJTzndBii4bRuNqhC2UfDOfM3FKhlBHg==",
+      "dependencies": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-state/-/prosemirror-state-1.4.2.tgz",
+      "integrity": "sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-transform/-/prosemirror-transform-1.7.1.tgz",
+      "integrity": "sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.31.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-view/-/prosemirror-view-1.31.2.tgz",
+      "integrity": "sha512-d/HKgUsaKzMQnr5tGRdZq+8GSixOTyYI69hoNV417VlciTvUDFSr4SWsRNUzhMRwvT6xVLI8yrVWERHjNWI6uw==",
+      "dependencies": {
+        "prosemirror-model": "^1.16.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -25072,6 +25142,11 @@
        "word-wrap": "^1.2.3"
      }
    },
+    "orderedmap": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/orderedmap/-/orderedmap-2.1.0.tgz",
+      "integrity": "sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA=="
+    },
    "p-limit": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz",
@@ -26031,6 +26106,65 @@
        }
      }
    },
+    "prosemirror": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror/-/prosemirror-0.11.1.tgz",
+      "integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw=="
+    },
+    "prosemirror-commands": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-commands/-/prosemirror-commands-1.5.1.tgz",
+      "integrity": "sha512-ga1ga/RkbzxfAvb6iEXYmrEpekn5NCwTb8w1dr/gmhSoaGcQ0VPuCzOn5qDEpC45ql2oDkKoKQbRxLJwKLpMTQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmmirror.com/prosemirror-model/-/prosemirror-model-1.19.0.tgz",
+      "integrity": "sha512-/CvFGJnwc41EJSfDkQLly1cAJJJmBpZwwUJtwZPTjY2RqZJfM8HVbCreOY/jti8wTRbVyjagcylyGoeJH/g/3w==",
+      "requires": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "prosemirror-schema-basic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.1.tgz",
+      "integrity": "sha512-vYBdIHsYKSDIqYmPBC7lnwk9DsKn8PnVqK97pMYP5MLEDFqWIX75JiaJTzndBii4bRuNqhC2UfDOfM3FKhlBHg==",
+      "requires": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-state/-/prosemirror-state-1.4.2.tgz",
+      "integrity": "sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/prosemirror-transform/-/prosemirror-transform-1.7.1.tgz",
+      "integrity": "sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.31.2",
+      "resolved": "https://registry.npmmirror.com/prosemirror-view/-/prosemirror-view-1.31.2.tgz",
+      "integrity": "sha512-d/HKgUsaKzMQnr5tGRdZq+8GSixOTyYI69hoNV417VlciTvUDFSr4SWsRNUzhMRwvT6xVLI8yrVWERHjNWI6uw==",
+      "requires": {
+        "prosemirror-model": "^1.16.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
    "proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
--- a/package.json
+++ b/package.json
@@ -6,6 +6,11 @@
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "prosemirror": "^0.11.1",
+    "prosemirror-commands": "^1.5.1",
+    "prosemirror-schema-basic": "^1.2.1",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-view": "^1.31.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",

--- a/src/App.js
+++ b/src/App.js
-import logo from './logo.svg';
 import './App.css';
-
+import Test from './test';
 function App() {
  return (
    <div className="App">
      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <Test/>
      </header>
    </div>
  );

--- a/src/test.js
+++ b/src/test.js
+import React from "react";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "prosemirror-schema-basic";
+import { Plugin } from "prosemirror-state";
+import { toggleMark } from "prosemirror-commands"; // 引入toggleMark命令
+
+const wordLimit = 10; // 设置字数限制
+
+// 创建一个自定义插件，用于监听文档内容的变化
+const wordLimitPlugin = new Plugin({
+  // 定义一个状态属性，用于存储当前文档的字数
+  state: {
+    init(config, state) {
+      return state.doc.textContent.length;
+    },
+    // 每次文档变化时，更新字数
+    apply(tr, value) {
+      return tr.doc.textContent.length;
+    },
+  },
+  // 定义一个视图属性，用于在视图中执行逻辑
+  view(editorView) {
+    return {
+      // 每次更新视图时，检查字数是否超过限制
+      update(view, prevState) {
+        // 获取当前文档的字数
+        const wordCount = view.state.doc.textContent.length;
+        // 如果字数超过限制，截取多余的部分，并创建一个新的事务
+        if (wordCount > wordLimit) {
+          // 使用cut方法截取文档中前wordLimit个字符，并保留原来的标记信息
+          const newDoc = view.state.doc.cut(0, wordLimit + 1);
+          // 使用新的文档替换整个文档内容，并创建一个新的事务
+          const tr = view.state.tr.replaceWith(
+            0,
+            view.state.doc.content.size,
+            newDoc
+          );
+          // 应用新的事务，并更新视图
+          view.dispatch(tr);
+        }
+      },
+    };
+  },
+});
+
+export default function Test() {
+  // 使用React的useRef钩子，创建一个引用对象，用于存储编辑器视图实例
+  const editorViewRef = React.useRef();
+
+  // 使用React的useEffect钩子，在组件挂载时，创建一个编辑器视图实例，并存储在引用对象中
+  React.useEffect(() => {
+    // 创建一个编辑器状态实例，并添加自定义插件
+    const editorState = EditorState.create({
+      schema,
+      plugins: [wordLimitPlugin],
+    });
+    // 创建一个编辑器视图实例，并渲染到DOM元素中
+    const editorView = new EditorView(
+      document.getElementById("editor"),
+      { state: editorState }
+    );
+    // 将编辑器视图实例存储在引用对象中
+    editorViewRef.current = editorView;
+  }, []);
+
+  // 定义一个处理粗体按钮点击事件的函数
+  const handleBoldClick = () => {
+    // 获取编辑器视图实例
+    const editorView = editorViewRef.current;
+    // 如果存在编辑器视图实例，执行toggleMark命令，切换粗体标记
+    if (editorView) {
+      toggleMark(schema.marks.strong)(editorView.state, editorView.dispatch);
+      // 让编辑器视图重新获取焦点
+      editorView.focus();
+    }
+  };
+
+  return (
+    <div className="App">
+      <h1>示例（bug版）</h1>
+      <div id="editor"></div>
+      <button onClick={handleBoldClick}>Bold</button>
+    </div>
+  );
+}
\ No newline at end of file