dragon-editor 2.1.2 → 3.0.0-beta

package/dist/runtime/scss/editor.css

@@ -0,0 +1,262 @@
+@charset "UTF-8";
+.dragon-editor,
+.dragon-editor-viewer {
+  /**
+  * Reset style start
+  */
+}
+.dragon-editor h1,
+.dragon-editor h2,
+.dragon-editor h3,
+.dragon-editor h4,
+.dragon-editor h5,
+.dragon-editor h6,
+.dragon-editor p,
+.dragon-editor blockquote,
+.dragon-editor pre,
+.dragon-editor dl,
+.dragon-editor dd,
+.dragon-editor ol,
+.dragon-editor ul,
+.dragon-editor fieldset,
+.dragon-editor legend,
+.dragon-editor figure,
+.dragon-editor menu,
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6,
+.dragon-editor-viewer p,
+.dragon-editor-viewer blockquote,
+.dragon-editor-viewer pre,
+.dragon-editor-viewer dl,
+.dragon-editor-viewer dd,
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer fieldset,
+.dragon-editor-viewer legend,
+.dragon-editor-viewer figure,
+.dragon-editor-viewer menu {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.dragon-editor table,
+.dragon-editor th,
+.dragon-editor td,
+.dragon-editor-viewer table,
+.dragon-editor-viewer th,
+.dragon-editor-viewer td {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.dragon-editor ol,
+.dragon-editor ul,
+.dragon-editor li,
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer li {
+  list-style: none;
+}
+.dragon-editor h1,
+.dragon-editor h2,
+.dragon-editor h3,
+.dragon-editor h4,
+.dragon-editor h5,
+.dragon-editor h6,
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6 {
+  font-size: 1em;
+  font-weight: normal;
+}
+.dragon-editor input,
+.dragon-editor textarea,
+.dragon-editor select,
+.dragon-editor button,
+.dragon-editor-viewer input,
+.dragon-editor-viewer textarea,
+.dragon-editor-viewer select,
+.dragon-editor-viewer button {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  outline: 0;
+  vertical-align: middle;
+}
+.dragon-editor a,
+.dragon-editor button,
+.dragon-editor input[type=submit],
+.dragon-editor input[type=button],
+.dragon-editor input[type=reset],
+.dragon-editor-viewer a,
+.dragon-editor-viewer button,
+.dragon-editor-viewer input[type=submit],
+.dragon-editor-viewer input[type=button],
+.dragon-editor-viewer input[type=reset] {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.dragon-editor img,
+.dragon-editor-viewer img {
+  border: 0;
+  vertical-align: top;
+}
+.dragon-editor .de-block[data-depth="1"],
+.dragon-editor-viewer .de-block[data-depth="1"] {
+  padding-left: 30px;
+}
+.dragon-editor .de-block[data-depth="2"],
+.dragon-editor-viewer .de-block[data-depth="2"] {
+  padding-left: 60px;
+}
+.dragon-editor .de-block[data-depth="3"],
+.dragon-editor-viewer .de-block[data-depth="3"] {
+  padding-left: 90px;
+}
+.dragon-editor .de-block[data-depth="4"],
+.dragon-editor-viewer .de-block[data-depth="4"] {
+  padding-left: 120px;
+}
+.dragon-editor .de-block[data-depth="5"],
+.dragon-editor-viewer .de-block[data-depth="5"] {
+  padding-left: 150px;
+}
+
+/**
+* 노드 스타일
+*/
+.dragon-editor {
+  position: relative;
+  border: 1px solid #ccc;
+}
+.dragon-editor.--hasMenu {
+  padding-top: 38px;
+}
+.dragon-editor .de-body {
+  display: grid;
+  gap: 4px;
+  padding: 20px;
+}
+.dragon-editor .de-control-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 38px;
+  border-bottom: 1px solid #ccc;
+}
+.dragon-editor .de-control-bar .de-menu {
+  min-width: 38px;
+  height: 38px;
+  padding: 0 8px;
+  border-right: 1px solid #ccc;
+  box-sizing: border-box;
+}
+.dragon-editor .de-control-bar .de-menu.--lastchild {
+  border-right: 0;
+}
+.dragon-editor .de-control-bar .de-block-menu-area {
+  display: none;
+  position: absolute;
+  top: 39px;
+  left: 0;
+  width: 120px;
+  background: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+}
+.dragon-editor .de-control-bar .de-block-menu-area.--active {
+  display: block;
+}
+.dragon-editor .de-control-bar .de-block-menu-area .de-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px;
+}
+.dragon-editor .de-control-bar .de-block-menu-area .de-add-block {
+  line-height: 1.6;
+}
+.dragon-editor .de-text-block {
+  min-height: 1.6em;
+  outline: 0;
+}
+.dragon-editor .de-text-block:empty:hover::before, .dragon-editor .de-text-block:empty:focus::before {
+  display: inline;
+  content: "Type a paragraph";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor .de-heading-block {
+  outline: 0;
+}
+.dragon-editor .de-heading-block[data-level="1"] {
+  font-size: 2em;
+  min-height: 2em;
+}
+.dragon-editor .de-heading-block[data-level="2"] {
+  font-size: 1.5em;
+  min-height: 1.5em;
+}
+.dragon-editor .de-heading-block[data-level="3"] {
+  font-size: 1.17em;
+  min-height: 1.17em;
+}
+.dragon-editor .de-heading-block:empty:hover::before, .dragon-editor .de-heading-block:empty:focus::before {
+  display: inline;
+  content: "Type a Heading";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor .de-list-block {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  padding-left: 24px;
+  list-style: disc;
+}
+.dragon-editor .de-list-block .de-item {
+  min-height: 1.6em;
+  outline: 0;
+  list-style: inherit;
+}
+.dragon-editor .de-list-block .de-item:empty:hover::before, .dragon-editor .de-list-block .de-item:empty:focus::before {
+  display: inline;
+  content: "Type a list item";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor ol.de-list-block {
+  list-style: decimal;
+}
+.dragon-editor .de-bold {
+  font-weight: 700;
+}
+.dragon-editor .de-italic {
+  font-style: italic;
+}
+.dragon-editor .de-underline {
+  text-decoration: underline;
+}
+.dragon-editor .de-underline.de-strikethrough {
+  text-decoration: underline line-through;
+}
+.dragon-editor .de-strikethrough {
+  text-decoration: line-through;
+}
+.dragon-editor .de-strikethrough.de-underline {
+  text-decoration: line-through underline;
+}
+.dragon-editor .de-code {
+  padding: 2px 4px;
+  background: #f1f1f1;
+  color: #ff0000;
+  border-radius: 5px;
+}

package/dist/runtime/scss/viewer.css

@@ -0,0 +1,129 @@
+.dragon-editor,
+.dragon-editor-viewer {
+  /**
+  * Reset style start
+  */
+}
+.dragon-editor h1,
+.dragon-editor h2,
+.dragon-editor h3,
+.dragon-editor h4,
+.dragon-editor h5,
+.dragon-editor h6,
+.dragon-editor p,
+.dragon-editor blockquote,
+.dragon-editor pre,
+.dragon-editor dl,
+.dragon-editor dd,
+.dragon-editor ol,
+.dragon-editor ul,
+.dragon-editor fieldset,
+.dragon-editor legend,
+.dragon-editor figure,
+.dragon-editor menu,
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6,
+.dragon-editor-viewer p,
+.dragon-editor-viewer blockquote,
+.dragon-editor-viewer pre,
+.dragon-editor-viewer dl,
+.dragon-editor-viewer dd,
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer fieldset,
+.dragon-editor-viewer legend,
+.dragon-editor-viewer figure,
+.dragon-editor-viewer menu {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.dragon-editor table,
+.dragon-editor th,
+.dragon-editor td,
+.dragon-editor-viewer table,
+.dragon-editor-viewer th,
+.dragon-editor-viewer td {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.dragon-editor ol,
+.dragon-editor ul,
+.dragon-editor li,
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer li {
+  list-style: none;
+}
+.dragon-editor h1,
+.dragon-editor h2,
+.dragon-editor h3,
+.dragon-editor h4,
+.dragon-editor h5,
+.dragon-editor h6,
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6 {
+  font-size: 1em;
+  font-weight: normal;
+}
+.dragon-editor input,
+.dragon-editor textarea,
+.dragon-editor select,
+.dragon-editor button,
+.dragon-editor-viewer input,
+.dragon-editor-viewer textarea,
+.dragon-editor-viewer select,
+.dragon-editor-viewer button {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  outline: 0;
+  vertical-align: middle;
+}
+.dragon-editor a,
+.dragon-editor button,
+.dragon-editor input[type=submit],
+.dragon-editor input[type=button],
+.dragon-editor input[type=reset],
+.dragon-editor-viewer a,
+.dragon-editor-viewer button,
+.dragon-editor-viewer input[type=submit],
+.dragon-editor-viewer input[type=button],
+.dragon-editor-viewer input[type=reset] {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.dragon-editor img,
+.dragon-editor-viewer img {
+  border: 0;
+  vertical-align: top;
+}
+.dragon-editor .de-block[data-depth="1"],
+.dragon-editor-viewer .de-block[data-depth="1"] {
+  padding-left: 30px;
+}
+.dragon-editor .de-block[data-depth="2"],
+.dragon-editor-viewer .de-block[data-depth="2"] {
+  padding-left: 60px;
+}
+.dragon-editor .de-block[data-depth="3"],
+.dragon-editor-viewer .de-block[data-depth="3"] {
+  padding-left: 90px;
+}
+.dragon-editor .de-block[data-depth="4"],
+.dragon-editor-viewer .de-block[data-depth="4"] {
+  padding-left: 120px;
+}
+.dragon-editor .de-block[data-depth="5"],
+.dragon-editor-viewer .de-block[data-depth="5"] {
+  padding-left: 150px;
+}

package/dist/runtime/store.d.ts

@@ -0,0 +1,7 @@
+import "./type.d.ts";
+export declare const useEditorStore: import("pinia").StoreDefinition<"editorStore", EditorStore, {}, {
+    setWrapElement(value: HTMLDivElement): void;
+    setContentElement(value: HTMLDivElement): void;
+    setParentWrapElement(value: HTMLElement | Window): void;
+    setCursorData(data: DEditorCursor): void;
+}>;

package/dist/runtime/store.mjs

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+import "./type.d.ts";
+export const useEditorStore = defineStore("editorStore", {
+  state: () => ({
+    cursorData: null,
+    message: {
+      linkTextNoStyle: "Link text can't set any style."
+    },
+    $editor: null,
+    $content: null,
+    $parentWrap: null
+  }),
+  actions: {
+    setWrapElement(value) {
+      this.$editor = value;
+    },
+    setContentElement(value) {
+      this.$content = value;
+    },
+    setParentWrapElement(value) {
+      this.$parentWrap = value;
+    },
+    setCursorData(data) {
+      this.cursorData = data;
+    }
+  }
+});

package/dist/runtime/type.d.ts

@@ -0,0 +1,24 @@
+interface EditorStore {
+    cursorData: DEditorCursor | null;
+    message: { [key: string]: string };
+    $editor: HTMLDivElement | null;
+    $content: HTMLDivElement | null;
+    $parentWrap: HTMLElement | Window | null;
+}
+
+interface DEditorCursor {
+    type: "Range" | "Caret" | "None";
+    startNode: Node;
+    startOffset: number;
+    endNode: Node;
+    endOffset: number;
+}
+
+interface DEArrangeCursorData {
+    startNode: Node;
+    startNodeIdx: number;
+    startOffset: number;
+    endNode: Node;
+    endNodeIdx: number;
+    endOffset: number;
+}

package/dist/runtime/utils/block.d.ts

@@ -0,0 +1,9 @@
+export declare function _getBlockType(element: HTMLElement): {
+    $element: Element;
+    type: string;
+};
+export declare function _createTextBlock(content?: string, isEdit?: boolean): HTMLParagraphElement;
+export declare function _createHeadingBlock(type: string, content?: string, isEdit?: boolean): HTMLElement;
+export declare function _createListBlock(type: string, content?: string[], isEdit?: boolean): HTMLElement;
+export declare function _createListItemBlock(content?: string, isEdit?: boolean): HTMLLIElement;
+export declare function generateId(): string;

package/dist/runtime/utils/block.mjs

@@ -0,0 +1,70 @@
+export function _getBlockType(element) {
+  const $block = element.closest(".de-block");
+  let typeName;
+  switch (true) {
+    case $block.classList.contains("de-text-block"):
+      typeName = "text";
+      break;
+    case $block.classList.contains("de-heading-block"):
+      typeName = "heading";
+      break;
+    case $block.classList.contains("de-list-block"):
+      typeName = "list";
+      break;
+    default:
+      typeName = "other";
+  }
+  return {
+    $element: $block,
+    type: typeName
+  };
+}
+export function _createTextBlock(content = "", isEdit = true) {
+  const $paragraph = document.createElement("p");
+  $paragraph.classList.add("de-block", "de-text-block");
+  if (isEdit === true) {
+    $paragraph.setAttribute("contenteditable", "true");
+  }
+  if (content !== "") {
+    $paragraph.innerHTML = content;
+  }
+  return $paragraph;
+}
+export function _createHeadingBlock(type, content = "", isEdit = true) {
+  const level = parseInt(type.replace("heading", ""));
+  const $headingBlock = document.createElement(`h${level}`);
+  $headingBlock.classList.add("de-block", "de-heading-block");
+  $headingBlock.id = generateId();
+  $headingBlock.dataset["level"] = String(level);
+  if (isEdit === true) {
+    $headingBlock.setAttribute("contenteditable", "true");
+  }
+  if (content !== "") {
+    $headingBlock.innerHTML = content;
+  }
+  return $headingBlock;
+}
+export function _createListBlock(type, content = [""], isEdit = true) {
+  const $block = document.createElement(type);
+  $block.classList.add("de-block", "de-list-block");
+  content.forEach((text) => {
+    $block.appendChild(_createListItemBlock(text, isEdit));
+  });
+  return $block;
+}
+export function _createListItemBlock(content = "", isEdit = true) {
+  const $li = document.createElement("li");
+  $li.classList.add("de-item");
+  if (isEdit === true) {
+    $li.setAttribute("contenteditable", "true");
+  }
+  return $li;
+}
+export function generateId() {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let str = "";
+  for (let i = 0; i < 6; i++) {
+    str += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return str;
+}

package/dist/runtime/utils/cursor.d.ts

@@ -0,0 +1,6 @@
+import "../type.d.ts";
+export declare function _setCursorData(store: any): void;
+export declare function _setCursor($target: Node, startIdx: number): void;
+export declare function _setRangeCursor($startTarget: Element, $endTarget: Element, startIdx: number, endIdx: number): void;
+export declare function _clenupCursor(store: any): void;
+export declare function _soltingCursorDataOnElement(cursorData: DEditorCursor, $element: HTMLElement): DEArrangeCursorData;

package/dist/runtime/utils/cursor.mjs

@@ -0,0 +1,132 @@
+import "../type.d.ts";
+export function _setCursorData(store) {
+  const selection = window.getSelection();
+  if (selection.type !== "None") {
+    store.setCursorData({
+      type: selection.type,
+      startNode: selection.anchorNode,
+      startOffset: selection.anchorOffset,
+      endNode: selection.focusNode,
+      endOffset: selection.focusOffset
+    });
+  }
+}
+export function _setCursor($target, startIdx) {
+  const range = document.createRange();
+  const selection = window.getSelection();
+  if ($target.constructor.name === "Text") {
+    range.setStart($target, startIdx);
+  } else {
+    if ($target.hasChildNodes() === true) {
+      if ($target.textContent === "") {
+        range.setStart($target.childNodes[startIdx], 0);
+      } else {
+        range.setStart($target.childNodes[0], startIdx);
+      }
+    } else {
+      range.setStart($target, startIdx);
+    }
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+export function _setRangeCursor($startTarget, $endTarget, startIdx, endIdx) {
+  const range = document.createRange();
+  const selection = window.getSelection();
+  if ($startTarget.constructor.name === "Text") {
+    range.setStart($startTarget, startIdx);
+  } else {
+    if ($startTarget.hasChildNodes() === true) {
+      if ($startTarget.textContent === "") {
+        range.setStart($startTarget.childNodes[startIdx], 0);
+      } else {
+        range.setStart($startTarget.childNodes[0], startIdx);
+      }
+    } else {
+      range.setStart($startTarget, startIdx);
+    }
+  }
+  if ($endTarget.constructor.name === "Text") {
+    range.setEnd($endTarget, endIdx);
+  } else {
+    if ($endTarget.hasChildNodes() === true) {
+      if ($endTarget.textContent === "") {
+        range.setEnd($endTarget.childNodes[endIdx], 0);
+      } else {
+        range.setEnd($endTarget.childNodes[0], endIdx);
+      }
+    } else {
+      range.setEnd($endTarget, endIdx);
+    }
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+export function _clenupCursor(store) {
+  _setCursorData(store);
+  if (store.cursorData.startNode !== store.cursorData.endNode || store.cursorData.startOffset !== store.cursorData.endOffset) {
+  } else {
+    if (store.cursorData.startNode.hasChildNodes() === true) {
+      _setCursor(store.cursorData.startNode.childNodes[store.cursorData.startOffset], 0);
+    } else {
+      _setCursor(store.cursorData.startNode, store.cursorData.startOffset);
+    }
+  }
+}
+export function _soltingCursorDataOnElement(cursorData, $element) {
+  const childList = $element.childNodes;
+  let startNode = cursorData.startNode;
+  let startIdx = -1;
+  let startOffset = cursorData.startOffset;
+  let endNode = cursorData.endNode;
+  let endIdx = -1;
+  let endOffset = cursorData.endOffset;
+  if (startNode.constructor.name === "Text") {
+    if (startNode.parentElement !== $element) {
+      startNode = startNode.parentElement;
+    }
+  }
+  if (endNode.constructor.name === "Text") {
+    if (endNode.parentElement !== $element) {
+      endNode = endNode.parentElement;
+    }
+  }
+  for (let i = 0; childList.length > i; i += 1) {
+    if (startIdx !== -1 && endIdx !== -1) {
+      break;
+    }
+    if (startNode === childList[i]) {
+      startIdx = i;
+    }
+    if (endNode === childList[i]) {
+      endIdx = i;
+    }
+  }
+  if (startIdx === endIdx) {
+    if (cursorData.startOffset > cursorData.endOffset) {
+      startOffset = cursorData.endOffset;
+      endOffset = cursorData.startOffset;
+    }
+  } else {
+    if (startIdx > endIdx) {
+      const originStartNode = startNode;
+      const originStartIdx = startIdx;
+      const originEndNode = endNode;
+      const originEndIdx = endIdx;
+      startNode = originEndNode;
+      startIdx = originEndIdx;
+      startOffset = cursorData.endOffset;
+      endNode = originStartNode;
+      endIdx = originStartIdx;
+      endOffset = cursorData.startOffset;
+    }
+  }
+  return {
+    startNode,
+    startNodeIdx: startIdx,
+    startOffset,
+    endNode,
+    endNodeIdx: endIdx,
+    endOffset
+  };
+}

package/dist/runtime/utils/element.d.ts

@@ -0,0 +1,3 @@
+export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
+export declare function _getParentElementIfNodeIsText($target: Node, $block: HTMLElement): Node;
+export declare function _findContentEditableElement($target: Node): HTMLElement | null;