dragon-editor 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/utils/keyboardEvent.mjs +161 -37
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -127,7 +127,7 @@ Done!
127
127
  const $editor = ref<any>();
128
128
 
129
129
  function setData() {
130
- $editor.value.getContentData([...]);
130
+ $editor.value.setContentData([...]);
131
131
  }
132
132
  </script>
133
133
  ```
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
3
  "configKey": "dragon-editor",
4
- "version": "3.0.0"
4
+ "version": "3.0.1"
5
5
  }
package/dist/runtime/utils/keyboardEvent.mjs CHANGED
@@ -82,10 +82,21 @@ function elementBackspaceEvent(e, store) {
82
82
  case "heading":
83
83
  defaultBlockBackspaceEvent(e, store, $element);
84
84
  break;
85
+ case "list":
86
+ listBlockBackspaceEvent(e, store, $element);
87
+ break;
85
88
  default:
86
89
  console.log("// TODO : \uB2E4\uB978 \uD0C0\uC785 \uBE14\uB7ED \uBC31\uC2A4\uD398\uC774\uC2A4 \uC774\uBCA4\uD2B8", type);
87
90
  }
88
91
  }
92
+ function elementTabEvent(e, store) {
93
+ const { $element, type } = _getBlockType(e.target);
94
+ switch (type) {
95
+ case "text":
96
+ defaultTabEvent(e.shiftKey, $element);
97
+ break;
98
+ }
99
+ }
89
100
  function defaultBlockEnterEvent(store, $element) {
90
101
  const $textBlock = $element;
91
102
  if (store.cursorData.type === "Caret") {
@@ -579,21 +590,12 @@ function defaultBlockShiftEnterEvent(store, $element) {
579
590
  _setCursor($textBlock.childNodes[startNodeIdx + 2], 0);
580
591
  }
581
592
  }
582
- function elementTabEvent(e, store) {
583
- const { $element, type } = _getBlockType(e.target);
584
- switch (type) {
585
- case "text":
586
- defaultTabEvent(e.shiftKey, $element);
587
- break;
588
- }
589
- }
590
593
  function defaultBlockBackspaceEvent(e, store, $element) {
591
594
  const $textBlock = $element;
592
- const childList = store.wrap.querySelectorAll(".de-block");
593
- const childLength = childList.length;
595
+ const childList = store.$content.querySelectorAll(".de-block");
594
596
  const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $textBlock);
595
597
  let elementIdx = -1;
596
- for (let i = 0; childLength > i; i += 1) {
598
+ for (let i = 0; childList.length > i; i += 1) {
597
599
  if (childList[i] === $element) {
598
600
  elementIdx = i;
599
601
  break;
@@ -618,39 +620,35 @@ function defaultBlockBackspaceEvent(e, store, $element) {
618
620
  if ($textBlock.hasChildNodes() === false) {
619
621
  e.preventDefault();
620
622
  const $preBlock = $textBlock.previousElementSibling;
621
- if ($preBlock !== null) {
622
- const { type: preBlockType } = _getBlockType($textBlock);
623
- $textBlock.remove();
624
- if (preBlockType === "text") {
625
- if ($preBlock.hasChildNodes() === true) {
626
- const textBlockChildList = $preBlock.childNodes;
627
- const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
628
- _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
629
- } else {
630
- _setCursor($preBlock, 0);
631
- }
623
+ const { type: preBlockType } = _getBlockType($preBlock);
624
+ $textBlock.remove();
625
+ if (preBlockType === "text" || preBlockType === "heading") {
626
+ if ($preBlock.hasChildNodes() === true) {
627
+ const textBlockChildList = $preBlock.childNodes;
628
+ const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
629
+ _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
630
+ } else {
631
+ _setCursor($preBlock, 0);
632
632
  }
633
633
  }
634
634
  } else {
635
635
  if (store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) {
636
636
  e.preventDefault();
637
637
  const $preBlock = $textBlock.previousElementSibling;
638
- if ($preBlock !== null) {
639
- const { type: preBlockType } = _getBlockType($preBlock);
640
- if (preBlockType === "text") {
641
- if ($preBlock.hasChildNodes() === true) {
642
- const textBlockChildList = $preBlock.childNodes;
643
- const textBlockTargetChildIdx = textBlockChildList.length - 1;
644
- const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
645
- const thisBlockHTML = $textBlock.innerHTML;
646
- $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
647
- _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
648
- } else {
649
- $preBlock.innerHTML = $textBlock.innerHTML;
650
- _setCursor($preBlock, 0);
651
- }
652
- $textBlock.remove();
638
+ const { type: preBlockType } = _getBlockType($preBlock);
639
+ if (preBlockType === "text" || preBlockType === "heading") {
640
+ if ($preBlock.hasChildNodes() === true) {
641
+ const textBlockChildList = $preBlock.childNodes;
642
+ const textBlockTargetChildIdx = textBlockChildList.length - 1;
643
+ const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
644
+ const thisBlockHTML = $textBlock.innerHTML;
645
+ $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
646
+ _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
647
+ } else {
648
+ $preBlock.innerHTML = $textBlock.innerHTML;
649
+ _setCursor($preBlock, 0);
653
650
  }
651
+ $textBlock.remove();
654
652
  }
655
653
  }
656
654
  }
@@ -675,6 +673,132 @@ function defaultBlockBackspaceEvent(e, store, $element) {
675
673
  }
676
674
  _setCursorData(store);
677
675
  }
676
+ function listBlockBackspaceEvent(e, store, $element) {
677
+ const $listBlock = $element;
678
+ const $targetItem = _findContentEditableElement(store.cursorData.startNode);
679
+ const childList = store.$content.querySelectorAll(".de-block");
680
+ const liList = $listBlock.querySelectorAll(".de-item");
681
+ const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $targetItem);
682
+ let elementIdx = -1;
683
+ let liIdx = -1;
684
+ for (let i = 0; childList.length > i; i += 1) {
685
+ if (childList[i] === $element) {
686
+ elementIdx = i;
687
+ break;
688
+ }
689
+ }
690
+ for (let i = 0; liList.length > i; i += 1) {
691
+ if (liList[i] === $targetItem) {
692
+ liIdx = i;
693
+ break;
694
+ }
695
+ }
696
+ if (liList.length === 1) {
697
+ if ($targetItem.textContent === "") {
698
+ e.preventDefault();
699
+ const $preBlock = $listBlock.previousElementSibling;
700
+ const { type: preBlockType } = _getBlockType($preBlock);
701
+ $listBlock.remove();
702
+ if (preBlockType === "text" || preBlockType === "heading") {
703
+ if ($preBlock.hasChildNodes() === true) {
704
+ const textBlockChildList = $preBlock.childNodes;
705
+ const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
706
+ _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
707
+ } else {
708
+ _setCursor($preBlock, 0);
709
+ }
710
+ }
711
+ } else {
712
+ if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
713
+ e.preventDefault();
714
+ const $preBlock = $listBlock.previousElementSibling;
715
+ const { type: preBlockType } = _getBlockType($preBlock);
716
+ if (preBlockType === "text" || preBlockType === "heading") {
717
+ if ($preBlock.hasChildNodes() === true) {
718
+ const textBlockChildList = $preBlock.childNodes;
719
+ const textBlockTargetChildIdx = textBlockChildList.length - 1;
720
+ const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
721
+ const thisBlockHTML = $targetItem.innerHTML;
722
+ $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
723
+ _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
724
+ } else {
725
+ $preBlock.innerHTML = $targetItem.innerHTML;
726
+ _setCursor($preBlock, 0);
727
+ }
728
+ $targetItem.remove();
729
+ }
730
+ }
731
+ }
732
+ } else {
733
+ if (liIdx === 0) {
734
+ if ($targetItem.textContent === "") {
735
+ e.preventDefault();
736
+ const $preBlock = $listBlock.previousElementSibling;
737
+ const { type: preBlockType } = _getBlockType($preBlock);
738
+ $targetItem.remove();
739
+ if (preBlockType === "text" || preBlockType === "heading") {
740
+ if ($preBlock.hasChildNodes() === true) {
741
+ const textBlockChildList = $preBlock.childNodes;
742
+ const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
743
+ _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
744
+ } else {
745
+ _setCursor($preBlock, 0);
746
+ }
747
+ }
748
+ } else {
749
+ if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
750
+ e.preventDefault();
751
+ const $preBlock = $listBlock.previousElementSibling;
752
+ const { type: preBlockType } = _getBlockType($preBlock);
753
+ if (preBlockType === "text" || preBlockType === "heading") {
754
+ if ($preBlock.hasChildNodes() === true) {
755
+ const textBlockChildList = $preBlock.childNodes;
756
+ const textBlockTargetChildIdx = textBlockChildList.length - 1;
757
+ const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
758
+ const thisBlockHTML = $targetItem.innerHTML;
759
+ $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
760
+ _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
761
+ } else {
762
+ $preBlock.innerHTML = $targetItem.innerHTML;
763
+ _setCursor($preBlock, 0);
764
+ }
765
+ $targetItem.remove();
766
+ }
767
+ }
768
+ }
769
+ } else {
770
+ if ($targetItem.textContent === "") {
771
+ e.preventDefault();
772
+ const $preBlock = liList[liIdx - 1];
773
+ $targetItem.remove();
774
+ if ($preBlock.hasChildNodes() === true) {
775
+ const textBlockChildList = $preBlock.childNodes;
776
+ const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
777
+ _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
778
+ } else {
779
+ _setCursor($preBlock, 0);
780
+ }
781
+ } else {
782
+ if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
783
+ e.preventDefault();
784
+ const $preBlock = liList[liIdx - 1];
785
+ if ($preBlock.hasChildNodes() === true) {
786
+ const textBlockChildList = $preBlock.childNodes;
787
+ const textBlockTargetChildIdx = textBlockChildList.length - 1;
788
+ const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
789
+ const thisBlockHTML = $targetItem.innerHTML;
790
+ $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
791
+ _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
792
+ } else {
793
+ $preBlock.innerHTML = $targetItem.innerHTML;
794
+ _setCursor($preBlock, 0);
795
+ }
796
+ $targetItem.remove();
797
+ }
798
+ }
799
+ }
800
+ }
801
+ }
678
802
  function defaultTabEvent(useShiftKey, $element) {
679
803
  const $target = $element;
680
804
  let value = $target.dataset["depth"] === void 0 ? 0 : parseInt($target.dataset["depth"]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "Javascript WYSIWYG editor in Nuxt3!",
5
5
  "repository": {
6
6
  "type": "git",