@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/utils/keyboard.js

@@ -0,0 +1,793 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/MarkdownEditor/editor/utils/keyboard.ts
+import { message } from "antd";
+import copy from "copy-to-clipboard";
+import isHotkey from "is-hotkey";
+import { useCallback, useEffect, useMemo } from "react";
+import { Editor, Element, Node, Path, Range, Text, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { useSubject } from "../../hooks/subscribe";
+import { NativeTableEditor } from "../../utils/native-table";
+import { EditorUtils } from "./editorUtils";
+var KeyboardTask = class {
+  constructor(store, props) {
+    this.store = store;
+    this.editor = store == null ? void 0 : store.editor;
+    this.props = props;
+  }
+  /**
+   * 获取当前编辑器中的最低层级元素节点
+   *
+   * @returns 编辑器中所有匹配的元素节点及其路径
+   */
+  get curNodes() {
+    return Editor.nodes(this.editor, {
+      mode: "lowest",
+      match: (m) => {
+        return Element.isElement(m);
+      }
+    });
+  }
+  /**
+   * 全选编辑器内容
+   *
+   * 如果当前位于表格单元格内，则选中整个表格；
+   * 否则选中编辑器中的所有内容
+   */
+  selectAll() {
+    Transforms.select(this.editor, {
+      anchor: Editor.start(this.editor, []),
+      focus: Editor.end(this.editor, [])
+    });
+  }
+  /**
+   * 选择当前行的文本。
+   *
+   * 如果编辑器中有选区，则选择当前行的文本，并打开浮动工具栏。
+   *
+   * @remarks
+   * 该方法首先检查编辑器中是否有选区。如果有选区，则选择当前行的文本路径。
+   * 然后获取当前行的文本内容，如果文本内容存在，则打开浮动工具栏。
+   */
+  selectLine() {
+    if (this.editor.selection) {
+      Transforms.select(
+        this.editor,
+        Path.parent(this.editor.selection.anchor.path)
+      );
+    }
+  }
+  /**
+   * 将选中文本转换为行内代码
+   *
+   * 如果编辑器存在选区，将选中的文本转换为行内代码格式
+   */
+  selectFormatToCode() {
+    if (this.editor.selection) {
+      EditorUtils.toggleFormat(this.editor, "code");
+    }
+  }
+  /**
+   * 选择当前光标所在的单词或汉字。
+   *
+   * 如果当前选区是折叠的（即光标没有选中任何文本），则会尝试选择光标所在位置的整个单词或汉字。
+   *
+   * 具体步骤如下：
+   * 1. 获取当前选区，如果选区是折叠的，则继续。
+   * 2. 获取光标所在位置的文本内容。
+   * 3. 根据光标位置，向前和向后查找单词或汉字的边界。
+   * 4. 更新选区，使其包含整个单词或汉字。
+   * 5. 如果选区不再是折叠的，则打开浮动工具栏。
+   *
+   * @remarks
+   * 该方法支持英文单词和中文汉字的选择。
+   */
+  selectWord() {
+    const sel = this.editor.selection;
+    if (sel && Range.isCollapsed(sel)) {
+      const text = Node.leaf(this.editor, sel.anchor.path).text || "";
+      let start = sel.anchor.offset;
+      let end = start;
+      const next = text.slice(start);
+      const pre = text.slice(0, start);
+      let m1 = next.match(/^(\w+)/);
+      if (m1) {
+        end += m1[1].length;
+        let m2 = pre.match(/(\w+)$/);
+        if (m2)
+          start = start - m2[1].length;
+      } else {
+        m1 = next.match(/^([\u4e00-\u9fa5]+)/);
+        if (m1) {
+          end += m1[1].length;
+          let m2 = pre.match(/([\u4e00-\u9fa5]+)$/);
+          if (m2)
+            start = start - m2[1].length;
+        } else {
+          let m2 = pre.match(/(\w+)$/);
+          if (!m2)
+            m2 = pre.match(/([\u4e00-\u9fa5]+)$/);
+          if (m2)
+            start -= m2[1].length;
+        }
+      }
+      if (start === sel.anchor.offset && end === sel.anchor.offset && next) {
+        end = start + 1;
+      }
+      Transforms.select(this.editor, {
+        anchor: { path: sel.anchor.path, offset: start },
+        focus: { path: sel.anchor.path, offset: end }
+      });
+    }
+  }
+  /**
+   * 从剪贴板粘贴纯文本内容到编辑器中。
+   *
+   * 该方法首先从剪贴板读取文本内容，然后根据当前节点的类型决定如何插入文本。
+   * 如果当前节点是表格单元格类型，则将换行符替换为空格后插入文本；
+   * 否则，直接插入文本。
+   *
+   * @returns {Promise<void>} 一个表示异步操作的 Promise 对象。
+   */
+  pastePlainText() {
+    return __async(this, null, function* () {
+      var _a;
+      const text = yield navigator.clipboard.readText();
+      if (text) {
+        const [node] = this.curNodes;
+        if (((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type) === "table-cell") {
+          Editor.insertText(this.editor, text.replace(/\n/g, " "));
+        } else {
+          Editor.insertText(this.editor, text);
+        }
+      }
+    });
+  }
+  /**
+   * 上传图片
+   *
+   * 创建文件上传输入框，允许用户选择图片文件上传，
+   * 然后根据当前节点位置将图片插入到编辑器中适当的位置。
+   * 支持列单元格、普通节点和空编辑器的不同插入逻辑。
+   */
+  uploadImage() {
+    const input = document.createElement("input");
+    const [node] = this.curNodes;
+    input.id = "uploadImage_" + Math.random();
+    input.type = "file";
+    input.accept = "image/*";
+    const insertMedia = (url) => __async(this, null, function* () {
+      if (node && ["column-cell"].includes(node[0].type)) {
+        Transforms.insertNodes(
+          this.editor,
+          [EditorUtils.createMediaNode(url, "image", {})],
+          {
+            at: [...node[1], 0]
+          }
+        );
+        return;
+      }
+      if (node) {
+        Transforms.insertNodes(
+          this.editor,
+          [EditorUtils.createMediaNode(url, "image", {})],
+          {
+            at: Path.next(node[1])
+          }
+        );
+      } else {
+        Transforms.insertNodes(
+          this.editor,
+          [EditorUtils.createMediaNode(url, "image", {})],
+          {
+            select: true
+          }
+        );
+      }
+    });
+    input.onchange = (e) => __async(this, null, function* () {
+      var _a, _b;
+      if (input.dataset.readonly) {
+        return;
+      }
+      input.dataset.readonly = "true";
+      const hideLoading = message.loading("上传中...");
+      try {
+        if (!((_b = (_a = this.props) == null ? void 0 : _a.image) == null ? void 0 : _b.upload)) {
+          message.error("图片上传功能未配置");
+          return;
+        }
+        const url = (yield this.props.image.upload(
+          Array.from(e.target.files) || []
+        )) || [];
+        [url].flat().forEach((u) => {
+          if (u) {
+            insertMedia(u);
+          }
+        });
+        message.success("上传成功");
+      } catch (error) {
+        console.error("图片上传失败:", error);
+        message.error("图片上传失败");
+      } finally {
+        hideLoading();
+        input.value = "";
+      }
+    });
+    if (input.dataset.readonly) {
+      return;
+    }
+    input.click();
+    input.remove();
+  }
+  /**
+   * 设置标题级别
+   *
+   * 将当前段落或标题节点转换为指定级别的标题。
+   * 如果级别为4，则转换为普通段落。
+   *
+   * @param level 标题级别（1-3）或4（表示普通段落）
+   */
+  head(level) {
+    var _a;
+    const [node] = this.curNodes;
+    if (level === 4) {
+      this.paragraph();
+      return;
+    }
+    if (node && ["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type) && EditorUtils.isTop(this.editor, node[1])) {
+      Transforms.setNodes(
+        this.editor,
+        { type: "head", level },
+        { at: node[1] }
+      );
+    }
+  }
+  /**
+   * 将标题转换为普通段落
+   *
+   * 如果当前节点是标题类型，将其转换为普通段落
+   */
+  paragraph() {
+    var _a;
+    const [node] = this.curNodes;
+    if (node && ["head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type)) {
+      Transforms.setNodes(this.editor, { type: "paragraph" }, { at: node[1] });
+    }
+  }
+  /**
+   * 增加标题级别（使标题变小）
+   *
+   * 将段落转换为4级标题，
+   * 或将标题级别从1级改为普通段落，
+   * 或将其他级别标题升级一级（数字变小）
+   */
+  increaseHead() {
+    var _a, _b;
+    const [node] = this.curNodes;
+    if (node && ["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type) && EditorUtils.isTop(this.editor, node[1])) {
+      if (((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "paragraph") {
+        Transforms.setNodes(
+          this.editor,
+          { type: "head", level: 4 },
+          { at: node[1] }
+        );
+      } else if (node[0].level === 1) {
+        Transforms.setNodes(
+          this.editor,
+          { type: "paragraph" },
+          { at: node[1] }
+        );
+      } else {
+        Transforms.setNodes(
+          this.editor,
+          { level: node[0].level - 1 },
+          { at: node[1] }
+        );
+      }
+    }
+  }
+  /**
+   * 降低标题级别（使标题变大）
+   *
+   * 将段落转换为1级标题，
+   * 或将4级标题改为普通段落，
+   * 或将其他级别标题降级一级（数字变大）
+   */
+  decreaseHead() {
+    var _a, _b;
+    const [node] = this.curNodes;
+    if (node && ["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type) && EditorUtils.isTop(this.editor, node[1])) {
+      if (((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "paragraph") {
+        Transforms.setNodes(
+          this.editor,
+          { type: "head", level: 1 },
+          { at: node[1] }
+        );
+      } else if (node[0].level === 4) {
+        Transforms.setNodes(
+          this.editor,
+          { type: "paragraph" },
+          { at: node[1] }
+        );
+      } else {
+        Transforms.setNodes(
+          this.editor,
+          { level: node[0].level + 1 },
+          { at: node[1] }
+        );
+      }
+    }
+  }
+  /**
+   * 插入或移除引用块
+   *
+   * 如果当前节点已在引用块中，则移除引用块；
+   * 否则，将当前节点转换为引用块。
+   * 如果当前节点是标题，先将其转换为普通段落。
+   */
+  insertQuote() {
+    var _a, _b;
+    const [node] = this.curNodes;
+    if (!["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type))
+      return;
+    if (Node.parent(this.editor, node[1]).type === "blockquote") {
+      Transforms.unwrapNodes(this.editor, { at: Path.parent(node[1]) });
+      return;
+    }
+    if (((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "head") {
+      Transforms.setNodes(
+        this.editor,
+        {
+          type: "paragraph"
+        },
+        { at: node[1] }
+      );
+    }
+    Transforms.wrapNodes(this.editor, {
+      type: "blockquote",
+      children: []
+    });
+  }
+  /**
+   * 插入表格
+   *
+   * 在当前位置插入一个3x3的表格（包含表头行）。
+   * 根据当前节点类型（段落、标题或列单元格）
+   * 决定在何处插入表格及如何处理现有内容。
+   */
+  insertTable() {
+    var _a, _b, _c, _d;
+    const [node] = this.curNodes;
+    if (node && ["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type)) {
+      const path = ((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "paragraph" && !Node.string(node[0]) ? node[1] : Path.next(node[1]);
+      NativeTableEditor.insertTable(this.editor, {
+        rows: 3,
+        cols: 3,
+        at: path
+      });
+      if (((_c = node == null ? void 0 : node[0]) == null ? void 0 : _c.type) === "paragraph" && !Node.string(node[0])) {
+        Transforms.delete(this.editor, { at: Path.next(path) });
+      }
+      Transforms.select(this.editor, Editor.start(this.editor, path));
+    }
+    if (node && ["column-cell"].includes((_d = node == null ? void 0 : node[0]) == null ? void 0 : _d.type)) {
+      NativeTableEditor.insertTable(this.editor, {
+        rows: 3,
+        cols: 3,
+        at: [...node[1], 0]
+      });
+    }
+  }
+  /**
+   * 插入分栏组
+   *
+   * 在当前位置插入一个两列的分栏布局。
+   * 如果当前节点是空段落，会被删除。
+   */
+  /**
+   * 插入代码块
+   *
+   * 在当前位置插入代码块，并根据传入的类型设置语言和渲染模式。
+   * 支持在列单元格内或普通段落/标题后插入代码块。
+   *
+   * @param type 可选的代码块类型，'mermaid'表示流程图，'html'表示HTML渲染
+   */
+  insertCode(type) {
+    const [node] = this.curNodes;
+    if (node && node[0] && ["paragraph", "head"].includes(node[0].type)) {
+      const path = node[0].type === "paragraph" && !Node.string(node[0]) ? node[1] : Path.next(node[1]);
+      let lang = "";
+      if (type === "mermaid") {
+        lang = "mermaid";
+      }
+      Transforms.insertNodes(
+        this.editor,
+        {
+          type: "code",
+          language: lang ? lang : void 0,
+          children: [
+            {
+              text: `flowchart TD
+    Start --> Stop`
+            }
+          ],
+          render: type === "html" ? true : void 0
+        },
+        { at: path }
+      );
+      Transforms.select(this.editor, Editor.end(this.editor, path));
+    }
+  }
+  /**
+   * 插入水平分割线
+   *
+   * 在当前位置插入水平分割线，并将光标定位到分割线后的位置。
+   * 如果分割线后没有内容，则自动插入一个空段落并将光标定位到该段落。
+   */
+  horizontalLine() {
+    var _a, _b;
+    const [node] = this.curNodes;
+    if (node && ["paragraph", "head"].includes((_a = node == null ? void 0 : node[0]) == null ? void 0 : _a.type)) {
+      const path = ((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "paragraph" && !Node.string(node[0]) ? node[1] : Path.next(node[1]);
+      Transforms.insertNodes(
+        this.editor,
+        {
+          type: "hr",
+          children: [{ text: "" }]
+        },
+        { at: path }
+      );
+      if (Editor.hasPath(this.editor, Path.next(path))) {
+        Transforms.select(
+          this.editor,
+          Editor.start(this.editor, Path.next(path))
+        );
+      } else {
+        Transforms.insertNodes(
+          this.editor,
+          {
+            type: "paragraph",
+            children: [{ text: "" }]
+          },
+          { at: Path.next(path), select: true }
+        );
+      }
+    }
+  }
+  /**
+   * 创建或转换列表
+   *
+   * 将当前段落或标题转换为指定类型的列表。
+   * 如果已经是列表项，则更改列表类型。
+   *
+   * @param mode 列表类型 'ordered'(有序列表), 'unordered'(无序列表), 'task'(任务列表)
+   */
+  list(mode) {
+    const [curNode] = this.curNodes;
+    if (curNode && ["paragraph", "head"].includes(curNode[0].type)) {
+      const parent = Editor.parent(this.editor, curNode[1]);
+      if (parent[0].type === "list-item" && !Path.hasPrevious(curNode[1])) {
+        Transforms.setNodes(
+          this.editor,
+          {
+            order: mode === "ordered",
+            task: mode === "task"
+          },
+          { at: Path.parent(parent[1]) }
+        );
+        const listItems = Array.from(
+          Editor.nodes(this.editor, {
+            match: (n) => n.type === "list-item",
+            at: Path.parent(parent[1]),
+            reverse: true,
+            mode: "lowest"
+          })
+        );
+        Transforms.setNodes(
+          this.editor,
+          { start: void 0 },
+          { at: Path.parent(parent[1]) }
+        );
+        for (let l of listItems) {
+          Transforms.setNodes(
+            this.editor,
+            { checked: mode === "task" ? l[0].checked || false : void 0 },
+            { at: l[1] }
+          );
+        }
+      } else {
+        const childrenList = [];
+        const selection = this.editor.selection;
+        if (!selection || Range.isCollapsed(selection)) {
+          const textNodes = curNode[0].type === "paragraph" ? curNode[0].children : [{ text: Node.string(curNode[0]) }];
+          const item = {
+            type: "list-item",
+            checked: mode === "task" ? false : void 0,
+            children: [
+              {
+                type: "paragraph",
+                children: textNodes
+              }
+            ]
+          };
+          childrenList.push(item);
+          Transforms.delete(this.editor, { at: curNode[1] });
+        } else {
+          const selectedNodes = Array.from(
+            Editor.nodes(this.editor, {
+              at: selection,
+              match: (n) => Element.isElement(n) && ["paragraph", "head"].includes(n.type)
+            })
+          );
+          if (selectedNodes.length === 0) {
+            const textNodes = Array.from(
+              Editor.nodes(this.editor, {
+                at: selection,
+                match: (n) => Text.isText(n)
+              })
+            );
+            if (textNodes.length > 0) {
+              const parentPath = Path.parent(textNodes[0][1]);
+              const [parentNode] = Editor.node(this.editor, parentPath);
+              if (Element.isElement(parentNode) && ["paragraph", "head"].includes(parentNode.type)) {
+                selectedNodes.push([
+                  parentNode,
+                  parentPath
+                ]);
+              }
+            }
+          }
+          for (const [node, path] of selectedNodes) {
+            const nodeRange = Editor.range(this.editor, path);
+            const isFullySelected = Range.equals(selection, nodeRange) || Range.includes(selection, nodeRange) && Range.includes(nodeRange, selection);
+            if (isFullySelected) {
+              const textNodes = node.type === "paragraph" ? node.children : [{ text: Node.string(node) }];
+              const item = {
+                type: "list-item",
+                checked: mode === "task" ? false : void 0,
+                children: [
+                  {
+                    type: "paragraph",
+                    children: textNodes
+                  }
+                ]
+              };
+              childrenList.push(item);
+              Transforms.delete(this.editor, { at: path });
+            } else {
+              const selectedText = Editor.string(this.editor, selection);
+              if (selectedText.trim()) {
+                const item = {
+                  type: "list-item",
+                  checked: mode === "task" ? false : void 0,
+                  children: [
+                    {
+                      type: "paragraph",
+                      children: [{ text: selectedText }]
+                    }
+                  ]
+                };
+                childrenList.push(item);
+                Transforms.delete(this.editor, { at: selection });
+              }
+            }
+          }
+        }
+        Transforms.insertNodes(
+          this.editor,
+          {
+            type: "list",
+            order: mode === "ordered",
+            task: mode === "task",
+            children: childrenList
+          },
+          { at: this.editor.selection || curNode[1], select: true }
+        );
+      }
+    } else if (curNode && curNode[0].type === "list-item") {
+      Transforms.setNodes(
+        this.editor,
+        { order: mode === "ordered", task: mode === "task" },
+        { at: curNode[1] }
+      );
+    }
+  }
+  /**
+   * 切换文本格式
+   *
+   * 在当前选区上应用或取消指定的文本格式（如加粗、斜体等）
+   *
+   * @param type 要应用的格式类型（'bold'、'italic'、'strikethrough'等）
+   */
+  format(type) {
+    EditorUtils.toggleFormat(this.editor, type);
+  }
+  /**
+   * 清除文本格式
+   *
+   * 移除当前选区中的所有格式标记。
+   * 如果选区是折叠的（只有光标），则清除光标所在位置的所有标记
+   */
+  clear() {
+    if (this.editor.selection)
+      EditorUtils.clearMarks(
+        this.editor,
+        !Range.isCollapsed(this.editor.selection)
+      );
+  }
+  /**
+   * 撤销上一步操作
+   *
+   * 调用编辑器的undo方法，回退到上一个历史状态
+   */
+  undo() {
+    var _a;
+    try {
+      (_a = this.store) == null ? void 0 : _a.editor.undo();
+    } catch (e) {
+    }
+  }
+  /**
+   * 重做上一步被撤销的操作
+   *
+   * 调用编辑器的redo方法，前进到下一个历史状态
+   */
+  redo() {
+    var _a;
+    try {
+      (_a = this.store) == null ? void 0 : _a.editor.redo();
+    } catch (e) {
+    }
+  }
+};
+var keyMap = [
+  ["mod+shift+l", "selectLine"],
+  ["mod+e", "selectFormatToCode"],
+  ["mod+d", "selectWord"],
+  ["mod+a", "selectAll"],
+  ["mod+shift+v", "pastePlainText"],
+  ["mod+1", "head", [1]],
+  ["mod+2", "head", [2]],
+  ["mod+3", "head", [3]],
+  ["mod+4", "head", [4]],
+  ["mod+0", "paragraph"],
+  ["mod+]", "increaseHead"],
+  ["mod+[", "decreaseHead"],
+  ["option+q", "insertQuote"],
+  ["mod+option+t", "insertTable"],
+  ["mod+option+c", "insertCode"],
+  ["mod+option+/", "horizontalLine"],
+  ["mod+option+o", "list", ["ordered"]],
+  ["mod+option+u", "list", ["unordered"]],
+  ["mod+option+s", "list", ["task"]],
+  ["mod+b", "format", ["bold"]],
+  ["mod+i", "format", ["italic"]],
+  ["mod+shift+s", "format", ["strikethrough"]],
+  ["option+`", "format", ["code"]],
+  ["mod+\\", "clear"],
+  ["mod+option+m", "insertCode", ["mermaid"]]
+];
+var useSystemKeyboard = (keyTask$, store, props, markdownContainerRef) => {
+  const task = useMemo(() => {
+    return new KeyboardTask(store, props);
+  }, [props.readonly]);
+  useSubject(keyTask$, ({ key, args }) => {
+    task[key](...args || []);
+  });
+  const keydown = useCallback((e) => {
+    var _a, _b, _c, _d;
+    if (!store)
+      return;
+    if (isHotkey("mod+c", e) || isHotkey("mod+x", e)) {
+      const [node] = Editor.nodes(store == null ? void 0 : store.editor, {
+        mode: "lowest",
+        match: (m) => Element.isElement(m) && (m.type === "media" || m.type === "attach")
+      });
+      if (!node)
+        return;
+      let readlUrl = (_a = node[0]) == null ? void 0 : _a.url;
+      if (((_b = node == null ? void 0 : node[0]) == null ? void 0 : _b.type) === "media") {
+        const url = `media://file?url=${readlUrl}&height=${node[0].height || ""}`;
+        try {
+          copy(url);
+        } catch (error) {
+        }
+        if (isHotkey("mod+x", e)) {
+          Transforms.delete(store == null ? void 0 : store.editor, { at: node[1] });
+          ReactEditor.focus(store == null ? void 0 : store.editor);
+        }
+      }
+      if (((_c = node == null ? void 0 : node[0]) == null ? void 0 : _c.type) === "attach") {
+        const url = `attach://file?size=${node[0].size}&name=${node[0].name}&url=${(_d = node[0]) == null ? void 0 : _d.url}`;
+        try {
+          copy(url);
+        } catch (error) {
+        }
+        if (isHotkey("mod+x", e)) {
+          Transforms.delete(store == null ? void 0 : store.editor, { at: node[1] });
+          ReactEditor.focus(store == null ? void 0 : store.editor);
+        }
+      }
+    }
+    if (isHotkey("backspace", e)) {
+      const [node] = task.curNodes;
+      if ((node == null ? void 0 : node[0].type) === "media") {
+        e.preventDefault();
+        Transforms.removeNodes(task.editor, { at: node[1] });
+        Transforms.insertNodes(task.editor, EditorUtils.p, {
+          at: node[1],
+          select: true
+        });
+        ReactEditor.focus(task.editor);
+      }
+    }
+    if (isHotkey("arrowUp", e) || isHotkey("arrowDown", e)) {
+      const [node] = task.curNodes;
+      if ((node == null ? void 0 : node[0].type) === "media") {
+        e.preventDefault();
+        if (isHotkey("arrowUp", e)) {
+          Transforms.select(
+            task.editor,
+            Editor.end(task.editor, EditorUtils.findPrev(task.editor, node[1]))
+          );
+        } else if (EditorUtils.findNext(task.editor, node[1])) {
+          Transforms.select(
+            task.editor,
+            Editor.start(
+              task.editor,
+              EditorUtils.findNext(task.editor, node[1])
+            )
+          );
+        }
+        ReactEditor.focus(task.editor);
+      }
+    }
+    for (let key of keyMap) {
+      if (isHotkey(key[0], e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        task[key[1]](...key[2] || []);
+        break;
+      }
+    }
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (props.readonly)
+      return;
+    if (!store)
+      return;
+    if (typeof window === "undefined")
+      return;
+    (_a = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a.addEventListener("keydown", keydown);
+    return () => {
+      var _a2;
+      (_a2 = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a2.removeEventListener("keydown", keydown);
+    };
+  }, []);
+};
+export {
+  KeyboardTask,
+  useSystemKeyboard
+};