dragon-editor 3.1.0 → 3.2.0

package/dist/runtime/utils/keyboardEvent.mjs

@@ -1,14 +1,20 @@
 import { _setCursor, _setCursorData, _clenupCursor, _soltingCursorDataOnElement } from "./cursor.mjs";
 import { _getParentElementIfNodeIsText, _findContentEditableElement } from "./element.mjs";
-import { _getBlockType, _createTextBlock, _createListItemBlock } from "./block.mjs";
+import { _getBlockType, _createTextBlock, _createListItemBlock, _generateId } from "./block.mjs";
 import { _setNodeStyle } from "./style.mjs";
 let keyEventCount = 0;
 let keyEventFn;
 export function _elementKeyEvent(event, store) {
   _setCursorData(store);
+  const { type: blockType } = _getBlockType(event.target);
   switch (event.code) {
     case "Enter":
-      event.preventDefault();
+      if (blockType !== "code") {
+        event.preventDefault();
+      }
+      if (blockType === "code" && event.shiftKey === true) {
+        event.preventDefault();
+      }
       if (keyEventCount === 0) {
         _clenupCursor(store);
         setTimeout(() => {
@@ -43,10 +49,22 @@ export function _elementKeyEvent(event, store) {
     case "Space":
       break;
     case "ArrowUp":
-      moveToBlockEvent(event, store, "up");
+      if (keyEventCount === 0) {
+        moveToBlockEvent(event, store, "up");
+      }
+      keyEventCount += 1;
+      setTimeout(() => {
+        keyEventCount = 0;
+      }, 250);
       break;
     case "ArrowDown":
-      moveToBlockEvent(event, store, "down");
+      if (keyEventCount === 0) {
+        moveToBlockEvent(event, store, "down");
+      }
+      keyEventCount += 1;
+      setTimeout(() => {
+        keyEventCount = 0;
+      }, 250);
       break;
   }
   clearTimeout(keyEventFn);
@@ -68,7 +86,8 @@ function elementEnterEvent(event, store) {
     case "list":
       listBlockEnterEvent(event, store, $element);
       break;
-    default:
+    case "code":
+      break;
   }
 }
 function elementShiftEnterEvent(event, store) {
@@ -81,7 +100,9 @@ function elementShiftEnterEvent(event, store) {
     case "list":
       listBlockEnterEvent(event, store, $element);
       break;
-    default:
+    case "code":
+      codeBlockShiftEnterEvent($element);
+      break;
   }
 }
 function elementBackspaceEvent(e, store) {
@@ -601,6 +622,11 @@ function defaultBlockShiftEnterEvent(store, $element) {
     _setCursor($textBlock.childNodes[startNodeIdx + 2], 0);
   }
 }
+function codeBlockShiftEnterEvent($element) {
+  const $newTextBlock = _createTextBlock();
+  $element.insertAdjacentElement("afterend", $newTextBlock);
+  $newTextBlock.focus();
+}
 function defaultBlockBackspaceEvent(e, store, $element) {
   const $textBlock = $element;
   const childList = store.$content.querySelectorAll(".de-block");
@@ -650,7 +676,7 @@ function defaultBlockBackspaceEvent(e, store, $element) {
         }
       }
     } else {
-      if (store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) {
+      if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) {
         e.preventDefault();
         const $preBlock = $textBlock.previousElementSibling;
         const { type: preBlockType } = _getBlockType($preBlock);
@@ -719,7 +745,7 @@ function listBlockBackspaceEvent(e, store, $element) {
         }
       }
     } else {
-      if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+      if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
         e.preventDefault();
         const $preBlock = $listBlock.previousElementSibling;
         const { type: preBlockType } = _getBlockType($preBlock);
@@ -757,7 +783,7 @@ function listBlockBackspaceEvent(e, store, $element) {
           }
         }
       } else {
-        if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+        if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
           e.preventDefault();
           const $preBlock = $listBlock.previousElementSibling;
           const { type: preBlockType } = _getBlockType($preBlock);
@@ -790,7 +816,7 @@ function listBlockBackspaceEvent(e, store, $element) {
           _setCursor($preBlock, 0);
         }
       } else {
-        if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+        if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
           e.preventDefault();
           const $preBlock = liList[liIdx - 1];
           if ($preBlock.hasChildNodes() === true) {
@@ -833,8 +859,14 @@ function moveToBlockEvent(e, store, keyType) {
   if ($editableElement !== null) {
     const { $element, type } = _getBlockType($editableElement);
     let $target;
+    if (store.cursorData.startIdx > store.cursorData.endIdx) {
+      _setCursor(store.cursorData.startNode, store.cursorData.endIdx);
+    } else {
+      _setCursor(store.cursorData.startNode, store.cursorData.startIdx);
+    }
     switch (type) {
       case "list":
+        e.preventDefault();
         if (keyType === "up") {
           $target = $editableElement.previousElementSibling;
         } else {
@@ -848,7 +880,11 @@ function moveToBlockEvent(e, store, keyType) {
           }
         }
         break;
+      case "code":
+        $target = null;
+        break;
       default:
+        e.preventDefault();
         if (keyType === "up") {
           $target = $element.previousElementSibling;
         } else {
@@ -856,25 +892,28 @@ function moveToBlockEvent(e, store, keyType) {
         }
     }
     if ($target !== null) {
-      if ($target.classList.contains("de-block") == true) {
-        const { $element: $element2, type: targetType } = _getBlockType($target);
-        switch (targetType) {
-          case "list":
-            const $targetItem = $element2.querySelectorAll(".de-item");
-            let $item;
-            if (keyType === "up") {
-              $item = $targetItem[$targetItem.length - 1];
-            } else {
-              $item = $targetItem[0];
-            }
-            _setCursor($item, 0);
-            break;
-          default:
-            _setCursor($element2, 0);
+      _clenupCursor(store);
+      setTimeout(() => {
+        if ($target.classList.contains("de-block") == true) {
+          const { $element: $element2, type: targetType } = _getBlockType($target);
+          switch (targetType) {
+            case "list":
+              const $targetItem = $element2.querySelectorAll(".de-item");
+              let $item;
+              if (keyType === "up") {
+                $item = $targetItem[$targetItem.length - 1];
+              } else {
+                $item = $targetItem[0];
+              }
+              _setCursor($item, 0);
+              break;
+            default:
+              _setCursor($element2, 0);
+          }
+        } else {
+          _setCursor($target, 0);
         }
-      } else {
-        _setCursor($target, 0);
-      }
+      });
     }
   }
 }
@@ -910,7 +949,27 @@ export function _hotKeyEvent(event, store) {
     }
   }
 }
-export function copyEvent(event, store) {
+export function _copyEvent(event, store) {
 }
-export function pasteEvent(event, store) {
+export async function _pasteEvent(event, store, emit) {
+  event.preventDefault();
+  const text = await navigator.clipboard.readText();
+  const $block = event.target.closest(".de-block");
+  if ($block !== null) {
+    if (text === "") {
+      const clipboardItems = await navigator.clipboard.read();
+      const imageItem = clipboardItems[0].types.find((type) => type.startsWith("image/"));
+      if (imageItem !== void 0) {
+        const blob = await clipboardItems[0].getType(imageItem);
+        const file = new File([blob], `${_generateId()}.${imageItem.split("/")[1]}`);
+        emit("addPasteImage", file);
+      }
+    } else {
+      const selection = window.getSelection();
+      const textNode = document.createTextNode(text);
+      selection.deleteFromDocument();
+      selection.getRangeAt(0).insertNode(textNode);
+      _setCursor(textNode, textNode.length);
+    }
+  }
 }