@lobehub/editor 1.4.7 → 1.5.1

package/es/plugins/link/react/components/LinkEdit.js

@@ -6,29 +6,39 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { mergeRegister } from '@lexical/utils';
-import { Icon, Input } from '@lobehub/ui';
+import { Block, Button, Hotkey, Icon, Input, Text } from '@lobehub/ui';
 import { COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from 'lexical';
-import { LinkIcon } from 'lucide-react';
+import { BaselineIcon, LinkIcon } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useLexicalComposerContext, useLexicalEditor } from "../../../../editor-kernel/react";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { UPDATE_LINK_TEXT_COMMAND } from "../../command";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EDIT_LINK_COMMAND = createCommand();
-export var LinkEdit = function LinkEdit() {
+var LinkEdit = function LinkEdit() {
   var divRef = useRef(null);
   var linkNodeRef = useRef(null);
   var linkInputRef = useRef(null);
+  var linkTextInputRef = useRef(null);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     linkUrl = _useState2[0],
     setLinkUrl = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    linkDom = _useState4[0],
-    setLinkDom = _useState4[1];
+    linkText = _useState4[0],
+    setLinkText = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    linkDom = _useState6[0],
+    setLinkDom = _useState6[1];
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
+  var t = useTranslation();
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     theme = _useStyles.theme;
@@ -48,39 +58,132 @@ export var LinkEdit = function LinkEdit() {
       }
     });
   }, [linkDom]);
-  var handleKeyDown = useCallback(function (event) {
+
+  // 提取提交逻辑到独立函数
+  var handleSubmit = useCallback(function () {
     var lexicalEditor = editor.getLexicalEditor();
-    if (!linkNodeRef.current || !linkInputRef.current || !lexicalEditor) {
+    if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !lexicalEditor) {
       return;
     }
     var linkNode = linkNodeRef.current;
     var input = linkInputRef.current;
     var inputDOM = input.input;
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      var currentURL = lexicalEditor.read(function () {
-        return linkNode.getURL();
+    var textInput = linkTextInputRef.current;
+    var textInputDOM = textInput.input;
+
+    // 更新链接URL
+    var currentURL = lexicalEditor.read(function () {
+      return linkNode.getURL();
+    });
+    if (currentURL !== inputDOM.value) {
+      lexicalEditor.update(function () {
+        linkNode.setURL(inputDOM.value);
       });
-      if (currentURL !== inputDOM.value) {
-        lexicalEditor.update(function () {
-          linkNode.setURL(inputDOM.value);
-          lexicalEditor.focus();
-        });
-      } else {
-        lexicalEditor.focus();
-      }
-      return;
-    } else if (event.key === 'Escape' || event.key === 'Tab') {
-      event.preventDefault();
-      lexicalEditor.focus();
+    }
+
+    // 更新链接文本
+    var currentText = lexicalEditor.read(function () {
+      return linkNode.getTextContent();
+    });
+    if (currentText !== textInputDOM.value) {
+      lexicalEditor.dispatchCommand(UPDATE_LINK_TEXT_COMMAND, {
+        key: linkNode.getKey(),
+        text: textInputDOM.value
+      });
+    }
+
+    // 关闭编辑器并聚焦到编辑器
+    lexicalEditor.focus();
+
+    // 隐藏编辑面板
+    if (divRef.current) {
+      divRef.current.style.left = '-9999px';
+      divRef.current.style.top = '-9999px';
+    }
+    linkNodeRef.current = null;
+    setLinkUrl('');
+    setLinkText('');
+    setLinkDom(null);
+  }, [editor, linkNodeRef, linkInputRef, linkTextInputRef]);
+
+  // 取消编辑，不保存更改
+  var handleCancel = useCallback(function () {
+    var lexicalEditor = editor.getLexicalEditor();
+    if (!lexicalEditor) return;
+
+    // 将焦点返回到编辑器
+    lexicalEditor.focus();
+
+    // 隐藏编辑面板
+    if (divRef.current) {
+      divRef.current.style.left = '-9999px';
+      divRef.current.style.top = '-9999px';
+    }
+    linkNodeRef.current = null;
+    setLinkUrl('');
+    setLinkText('');
+    setLinkDom(null);
+  }, [editor]);
+  var handleKeyDown = useCallback(function (event) {
+    var lexicalEditor = editor.getLexicalEditor();
+    if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !lexicalEditor) {
       return;
     }
-  }, [linkNodeRef, linkInputRef]);
+    var linkNode = linkNodeRef.current;
+    var input = linkInputRef.current;
+    var inputDOM = input.input;
+    var textInput = linkTextInputRef.current;
+    var textInputDOM = textInput.input;
+    switch (event.key) {
+      case 'Enter':
+        {
+          event.preventDefault();
+          if (event.currentTarget === textInputDOM) {
+            var currentText = lexicalEditor.read(function () {
+              return linkNode.getTextContent();
+            });
+            if (currentText !== textInputDOM.value) {
+              lexicalEditor.dispatchCommand(UPDATE_LINK_TEXT_COMMAND, {
+                key: linkNode.getKey(),
+                text: textInputDOM.value
+              });
+              // 更新文本后跳转到链接输入框
+              inputDOM.focus();
+            } else {
+              // 如果文本没有变化，直接跳转到链接输入框
+              inputDOM.focus();
+            }
+          } else if (event.currentTarget === inputDOM) {
+            // 在链接输入框按回车时提交所有更改
+            handleSubmit();
+          }
+          return;
+        }
+      case 'Tab':
+        {
+          event.preventDefault();
+          if (event.currentTarget === textInputDOM) {
+            inputDOM.focus();
+          } else {
+            lexicalEditor.focus();
+          }
+          return;
+        }
+      case 'Escape':
+        {
+          event.preventDefault();
+          handleCancel();
+          return;
+        }
+      // No default
+    }
+  }, [linkNodeRef, linkInputRef, handleSubmit, handleCancel]);
   useLexicalEditor(function (editor) {
     return mergeRegister(editor.registerCommand(EDIT_LINK_COMMAND, function (payload) {
       if (!payload.linkNode || !payload.linkNodeDOM) {
         setLinkDom(null);
         setLinkUrl('');
+        setLinkText('');
         if (divRef.current) {
           divRef.current.style.left = '-9999px';
           divRef.current.style.top = '-9999px';
@@ -89,6 +192,7 @@ export var LinkEdit = function LinkEdit() {
       }
       linkNodeRef.current = payload.linkNode;
       setLinkUrl(payload.linkNode.getURL());
+      setLinkText(payload.linkNode.getTextContent());
       setLinkDom(payload.linkNodeDOM);
       return true;
     }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ESCAPE_COMMAND, function () {
@@ -98,41 +202,81 @@ export var LinkEdit = function LinkEdit() {
       }
       linkNodeRef.current = null;
       setLinkUrl('');
+      setLinkText('');
       setLinkDom(null);
       return true;
     }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_TAB_COMMAND, function (payload) {
-      if (linkNodeRef.current && linkInputRef.current) {
+      if (linkNodeRef.current && linkTextInputRef.current) {
         payload.stopImmediatePropagation();
         payload.preventDefault();
-        linkInputRef.current.focus();
+        linkTextInputRef.current.focus();
         return true;
       }
       return false;
     }, COMMAND_PRIORITY_NORMAL));
   }, []);
-  return /*#__PURE__*/_jsx("div", {
-    className: styles.editor_linkEdit,
+  return /*#__PURE__*/_jsxs(Block, {
+    className: styles.linkEdit,
     ref: divRef,
-    children: /*#__PURE__*/_jsx(Input, {
-      onChange: function onChange(e) {
-        // Handle link URL change
-        setLinkUrl(e.target.value);
-      },
-      onKeyDown: handleKeyDown,
-      placeholder: "https://enter-link-url",
-      prefix: /*#__PURE__*/_jsx(Icon, {
-        color: theme.colorTextDescription,
-        icon: LinkIcon
-      }),
-      ref: linkInputRef,
-      shadow: true,
-      style: {
-        background: theme.colorBgElevated,
-        maxWidth: '100%',
-        minWidth: 240
-      },
-      value: linkUrl,
-      variant: 'outlined'
-    })
+    shadow: true,
+    variant: 'outlined',
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      padding: 12,
+      children: [/*#__PURE__*/_jsx(Text, {
+        weight: 500,
+        children: t('link.editTextTitle')
+      }), /*#__PURE__*/_jsx(Input, {
+        onChange: function onChange(e) {
+          // Handle link text change
+          setLinkText(e.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        prefix: /*#__PURE__*/_jsx(Icon, {
+          color: theme.colorTextDescription,
+          icon: BaselineIcon
+        }),
+        ref: linkTextInputRef,
+        value: linkText
+      }), /*#__PURE__*/_jsx(Text, {
+        weight: 500,
+        children: t('link.editLinkTitle')
+      }), /*#__PURE__*/_jsx(Input, {
+        onChange: function onChange(e) {
+          // Handle link URL change
+          setLinkUrl(e.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: "https://enter-link-url",
+        prefix: /*#__PURE__*/_jsx(Icon, {
+          color: theme.colorTextDescription,
+          icon: LinkIcon
+        }),
+        ref: linkInputRef,
+        value: linkUrl,
+        variant: 'outlined'
+      })]
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.linkEditFooter,
+      horizontal: true,
+      justify: 'flex-end',
+      padding: 4,
+      width: '100%',
+      children: /*#__PURE__*/_jsxs(Button, {
+        onClick: function onClick(e) {
+          e.preventDefault();
+          handleSubmit();
+        },
+        size: 'small',
+        type: 'text',
+        variant: 'filled',
+        children: [t('confirm'), /*#__PURE__*/_jsx(Hotkey, {
+          compact: true,
+          keys: "enter",
+          variant: 'borderless'
+        })]
+      })
+    })]
   });
-};
+};
+export default LinkEdit;

package/es/plugins/link/react/components/LinkToolbar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type ActionIconGroupProps } from '@lobehub/ui';
+import { LexicalEditor } from 'lexical';
+import { LinkNode } from '../../node/LinkNode';
+interface LinkToolbarProps extends Omit<ActionIconGroupProps, 'items'> {
+    editor: LexicalEditor;
+    linkNode: LinkNode | null;
+}
+declare const LinkToolbar: import("react").NamedExoticComponent<LinkToolbarProps>;
+export default LinkToolbar;

package/es/plugins/link/react/components/LinkToolbar.js

@@ -0,0 +1,73 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["linkNode", "editor"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { ActionIconGroup } from '@lobehub/ui';
+import { EditIcon, ExternalLinkIcon, UnlinkIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { TOGGLE_LINK_COMMAND } from "../../node/LinkNode";
+import { useStyles } from "../style";
+import { EDIT_LINK_COMMAND } from "./LinkEdit";
+import { jsx as _jsx } from "react/jsx-runtime";
+var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
+  var linkNode = _ref.linkNode,
+    editor = _ref.editor,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var t = useTranslation();
+  var handleEdit = function handleEdit() {
+    // Edit link
+    if (linkNode) {
+      editor.dispatchCommand(EDIT_LINK_COMMAND, {
+        linkNode: linkNode,
+        linkNodeDOM: editor.getElementByKey(linkNode.getKey())
+      });
+    }
+  };
+  var handleRemove = function handleRemove() {
+    // Remove link
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+  };
+  var handleOpenLink = function handleOpenLink() {
+    // Open link in new window
+    if (linkNode) {
+      var url = editor.read(function () {
+        return linkNode.getURL();
+      });
+      window.open(url, '_blank');
+    }
+  };
+  return /*#__PURE__*/_jsx(ActionIconGroup, _objectSpread({
+    className: styles.linkToolbar,
+    items: [{
+      icon: EditIcon,
+      key: 'edit',
+      label: t('link.edit'),
+      onClick: handleEdit
+    }, {
+      icon: ExternalLinkIcon,
+      key: 'openLink',
+      label: t('link.open'),
+      onClick: handleOpenLink
+    }, {
+      icon: UnlinkIcon,
+      key: 'unlink',
+      label: t('link.unlink'),
+      onClick: handleRemove
+    }],
+    shadow: true,
+    size: {
+      blockSize: 32,
+      size: 16
+    },
+    variant: 'outlined'
+  }, rest));
+});
+export default LinkToolbar;

package/es/plugins/link/react/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    editor_linkEdit: import("antd-style").SerializedStyles;
-    editor_linkPlugin: import("antd-style").SerializedStyles;
     link: import("antd-style").SerializedStyles;
+    linkEdit: string;
+    linkEditFooter: import("antd-style").SerializedStyles;
+    linkToolbar: string;
 }>;

package/es/plugins/link/react/style.js

@@ -1,12 +1,15 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css;
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token;
   var position = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 999;\n    inset-block-start: -9999px;\n    inset-inline-start: -9999px;\n  "])));
   return {
-    editor_linkEdit: position,
-    editor_linkPlugin: position,
-    link: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      margin-block: 1em;\n      margin-inline: 0;\n      padding: 2px;\n      border: none;\n    "])))
+    link: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      margin-block: 1em;\n      margin-inline: 0;\n      padding: 2px;\n      border: none;\n    "]))),
+    linkEdit: cx(position, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        min-width: 320px;\n        max-width: 100%;\n        background: ", ";\n      "])), token.colorBgElevated)),
+    linkEditFooter: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorFillQuaternary),
+    linkToolbar: cx(position, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorBgElevated))
   };
 });

package/es/plugins/list/command/index.d.ts

@@ -1 +1,2 @@
+export { INSERT_CHECK_LIST_COMMAND } from '../plugin/checkList';
 export { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, UPDATE_LIST_START_COMMAND, } from '@lexical/list';

package/es/plugins/list/command/index.js

@@ -1 +1,2 @@
+export { INSERT_CHECK_LIST_COMMAND } from "../plugin/checkList";
 export { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, UPDATE_LIST_START_COMMAND } from '@lexical/list';

package/es/plugins/list/plugin/checkList.d.ts

@@ -0,0 +1,3 @@
+import type { LexicalCommand, LexicalEditor } from 'lexical';
+export declare const INSERT_CHECK_LIST_COMMAND: LexicalCommand<void>;
+export declare function registerCheckList(editor: LexicalEditor): () => void;

package/es/plugins/list/plugin/checkList.js

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $insertList, $isListItemNode, $isListNode } from '@lexical/list';
+import { $findMatchingParent, calculateZoomLevel, isHTMLElement, mergeRegister } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode, $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, createCommand, getNearestEditorFromDOMNode } from 'lexical';
+export var INSERT_CHECK_LIST_COMMAND = createCommand('INSERT_CHECK_LIST_COMMAND');
+function handleCheckItemEvent(event, callback) {
+  var target = event.target;
+  if (!isHTMLElement(target)) {
+    return;
+  }
+
+  // Ignore clicks on LI that have nested lists
+  var firstChild = target.firstChild;
+  if (isHTMLElement(firstChild) && (firstChild.tagName === 'UL' || firstChild.tagName === 'OL')) {
+    return;
+  }
+  var parentNode = target.parentNode;
+
+  // @ts-ignore internal field
+  if (!parentNode || parentNode.__lexicalListType !== 'check') {
+    return;
+  }
+  var rect = target.getBoundingClientRect();
+  var zoom = calculateZoomLevel(target);
+  var clientX = event.clientX / zoom;
+
+  // Use getComputedStyle if available, otherwise fallback to 0px width
+  var beforeStyles = window.getComputedStyle ? window.getComputedStyle(target, '::before') : {
+    width: '0px'
+  };
+  var beforeWidthInPixels = parseFloat(beforeStyles.width);
+  var beforeMargin = parseFloat(beforeStyles.marginLeft);
+
+  // Make click area slightly larger for touch devices to improve accessibility
+  var isTouchEvent = event.pointerType === 'touch';
+  var clickAreaPadding = isTouchEvent ? 32 : 0; // Add 32px padding for touch events
+
+  if (target.dir === 'rtl' ? clientX < rect.right + clickAreaPadding && clientX > rect.right - beforeWidthInPixels - clickAreaPadding : clientX > rect.left + beforeMargin - clickAreaPadding && clientX < rect.left + beforeMargin + beforeWidthInPixels + clickAreaPadding) {
+    callback();
+  }
+}
+function handleClick(event) {
+  handleCheckItemEvent(event, function () {
+    if (isHTMLElement(event.target)) {
+      var domNode = event.target;
+      var editor = getNearestEditorFromDOMNode(domNode);
+      if (editor && editor.isEditable()) {
+        editor.update(function () {
+          var node = $getNearestNodeFromDOMNode(domNode);
+          if ($isListItemNode(node)) {
+            domNode.focus();
+            node.toggleChecked();
+          }
+        });
+      }
+    }
+  });
+}
+function handlePointerDown(event) {
+  handleCheckItemEvent(event, function () {
+    // Prevents caret moving when clicking on check mark
+    event.preventDefault();
+  });
+}
+function getActiveCheckListItem() {
+  var activeElement = document.activeElement;
+  return isHTMLElement(activeElement) && activeElement.tagName === 'LI' && activeElement.parentNode &&
+  // @ts-ignore internal field
+  activeElement.parentNode.__lexicalListType === 'check' ? activeElement : null;
+}
+function findCheckListItemSibling(node, backward) {
+  var sibling = backward ? node.getPreviousSibling() : node.getNextSibling();
+  var parent = node;
+
+  // Going up in a tree to get non-null sibling
+  while (!sibling && $isListItemNode(parent)) {
+    // Get li -> parent ul/ol -> parent li
+    parent = parent.getParentOrThrow().getParent();
+    if (parent) {
+      sibling = backward ? parent.getPreviousSibling() : parent.getNextSibling();
+    }
+  }
+
+  // Going down in a tree to get first non-nested list item
+  while ($isListItemNode(sibling)) {
+    var firstChild = backward ? sibling.getLastChild() : sibling.getFirstChild();
+    if (!$isListNode(firstChild)) {
+      return sibling;
+    }
+    sibling = backward ? firstChild.getLastChild() : firstChild.getFirstChild();
+  }
+  return null;
+}
+function handleArrowUpOrDown(event, editor, backward) {
+  var activeItem = getActiveCheckListItem();
+  if (activeItem) {
+    editor.update(function () {
+      var listItem = $getNearestNodeFromDOMNode(activeItem);
+      if (!$isListItemNode(listItem)) {
+        return;
+      }
+      var nextListItem = findCheckListItemSibling(listItem, backward);
+      if (nextListItem) {
+        nextListItem.selectStart();
+        var dom = editor.getElementByKey(nextListItem.__key);
+        if (dom) {
+          event.preventDefault();
+          setTimeout(function () {
+            dom.focus();
+          }, 0);
+        }
+      }
+    });
+  }
+  return false;
+}
+export function registerCheckList(editor) {
+  return mergeRegister(editor.registerCommand(INSERT_CHECK_LIST_COMMAND, function () {
+    $insertList('check');
+    return true;
+  }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, function (event) {
+    return handleArrowUpOrDown(event, editor, false);
+  }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, function (event) {
+    return handleArrowUpOrDown(event, editor, true);
+  }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, function (event) {
+    return editor.getEditorState().read(function () {
+      var selection = $getSelection();
+      if ($isRangeSelection(selection) && selection.isCollapsed()) {
+        var anchor = selection.anchor;
+        var isElement = anchor.type === 'element';
+        if (isElement || anchor.offset === 0) {
+          var anchorNode = anchor.getNode();
+          var elementNode = $findMatchingParent(anchorNode, function (node) {
+            return $isElementNode(node) && !node.isInline();
+          });
+          if ($isListItemNode(elementNode)) {
+            var parent = elementNode.getParent();
+            if ($isListNode(parent) && parent.getListType() === 'check' && (isElement || elementNode.getFirstDescendant() === anchorNode)) {
+              var domNode = editor.getElementByKey(elementNode.__key);
+              if (domNode && document.activeElement !== domNode) {
+                domNode.focus();
+                event.preventDefault();
+                return true;
+              }
+            }
+          }
+        }
+      }
+      return false;
+    });
+  }, COMMAND_PRIORITY_LOW), editor.registerRootListener(function (rootElement, prevElement) {
+    if (rootElement !== null) {
+      rootElement.addEventListener('click', handleClick);
+      rootElement.addEventListener('pointerdown', handlePointerDown);
+    }
+    if (prevElement !== null) {
+      prevElement.removeEventListener('click', handleClick);
+      prevElement.removeEventListener('pointerdown', handlePointerDown);
+    }
+  }));
+}

package/es/plugins/list/plugin/index.js

@@ -20,6 +20,7 @@ import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootNode, $i
 import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { IMarkdownShortCutService } from "../../markdown";
 import { $indentOverTab, listReplace } from "../utils";
+import { registerCheckList } from "./checkList";
 var ORDERED_LIST_REGEX = /^(\s*)(\d+)\.\s/;
 var UNORDERED_LIST_REGEX = /^(\s*)[*+-]\s/;
 var CHECK_LIST_REGEX = /^(\s*)(?:-\s)?\s?(\[(\s|x)?])\s/i;
@@ -41,7 +42,10 @@ export var ListPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
     kernel.registerThemes({
       // Define themes for list nodes here
       list: {
+        checklist: 'editor_listItemCheck',
         listitem: 'editor_listItem',
+        listitemChecked: 'editor_listItemChecked',
+        listitemUnchecked: 'editor_listItemUnchecked',
         nested: {
           listitem: 'editor_listItemNested'
         },
@@ -102,7 +106,7 @@ export var ListPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
             }
           case 'check':
             {
-              ctx.wrap("".concat(prefix, "[").concat(node.getChecked() ? 'x' : ' ', "] "), '\n');
+              ctx.wrap("".concat(prefix, "- [").concat(node.getChecked() ? 'x' : ' ', "] "), '\n');
               break;
             }
           default:
@@ -118,6 +122,7 @@ export var ListPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
     key: "onInit",
     value: function onInit(editor) {
       this.register(registerList(editor));
+      this.register(registerCheckList(editor));
       this.register(registerListStrictIndentTransform(editor));
       this.registerClears(editor.registerCommand(KEY_TAB_COMMAND, function (event) {
         var selection = $getSelection();
@@ -139,7 +144,9 @@ export var ListPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         }
         var anchorNode = anchor.getNode();
         var listItemNode;
-        if ($isTextNode(anchorNode)) {
+        if ($isListItemNode(anchorNode)) {
+          listItemNode = anchorNode;
+        } else if ($isTextNode(anchorNode)) {
           // Do not handle non-leading text nodes
           if (anchorNode.getPreviousSibling()) {
             return false;