dragon-editor 2.1.2 → 3.0.0

package/dist/runtime/scss/editor.css

@@ -0,0 +1,261 @@
+@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;
+  line-height: 1.6;
+}
+.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 {
+  min-height: 1.6em;
+  outline: 0;
+}
+.dragon-editor .de-heading-block[data-level="1"] {
+  font-size: 2em;
+}
+.dragon-editor .de-heading-block[data-level="2"] {
+  font-size: 1.5em;
+}
+.dragon-editor .de-heading-block[data-level="3"] {
+  font-size: 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,198 @@
+@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-viewer {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  line-height: 1.6;
+}
+.dragon-editor-viewer .de-text-block {
+  min-height: 1.6em;
+  outline: 0;
+}
+.dragon-editor-viewer .de-heading-block {
+  min-height: 1.6em;
+  outline: 0;
+}
+.dragon-editor-viewer .de-heading-block[data-level="1"] {
+  font-size: 2em;
+}
+.dragon-editor-viewer .de-heading-block[data-level="2"] {
+  font-size: 1.5em;
+}
+.dragon-editor-viewer .de-heading-block[data-level="3"] {
+  font-size: 1.17em;
+}
+.dragon-editor-viewer .de-list-block {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  padding-left: 24px;
+  list-style: disc;
+}
+.dragon-editor-viewer .de-list-block .de-item {
+  min-height: 1.6em;
+  outline: 0;
+  list-style: inherit;
+}
+.dragon-editor-viewer ol.de-list-block {
+  list-style: decimal;
+}
+.dragon-editor-viewer .de-bold {
+  font-weight: 700;
+}
+.dragon-editor-viewer .de-italic {
+  font-style: italic;
+}
+.dragon-editor-viewer .de-underline {
+  text-decoration: underline;
+}
+.dragon-editor-viewer .de-underline.de-strikethrough {
+  text-decoration: underline line-through;
+}
+.dragon-editor-viewer .de-strikethrough {
+  text-decoration: line-through;
+}
+.dragon-editor-viewer .de-strikethrough.de-underline {
+  text-decoration: line-through underline;
+}
+.dragon-editor-viewer .de-code {
+  padding: 2px 4px;
+  background: #f1f1f1;
+  color: #ff0000;
+  border-radius: 5px;
+}

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): HTMLParagraphElement;
+export declare function _createHeadingBlock(type: string, content?: string): HTMLElement;
+export declare function _createListBlock(type: string, content?: string[], pattern?: string): HTMLElement;
+export declare function _createListItemBlock(content?: string): 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 = "") {
+  const $paragraph = document.createElement("p");
+  $paragraph.classList.add("de-block", "de-text-block");
+  $paragraph.setAttribute("contenteditable", "true");
+  if (content !== "") {
+    $paragraph.innerHTML = content;
+  }
+  return $paragraph;
+}
+export function _createHeadingBlock(type, content = "") {
+  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);
+  $headingBlock.setAttribute("contenteditable", "true");
+  if (content !== "") {
+    $headingBlock.innerHTML = content;
+  }
+  return $headingBlock;
+}
+export function _createListBlock(type, content = [""], pattern) {
+  const $block = document.createElement(type);
+  $block.classList.add("de-block", "de-list-block");
+  if (type === "ol") {
+    $block.type = pattern ?? "1";
+  }
+  content.forEach((text) => {
+    $block.appendChild(_createListItemBlock(text));
+  });
+  return $block;
+}
+export function _createListItemBlock(content = "") {
+  const $li = document.createElement("li");
+  $li.classList.add("de-item");
+  $li.setAttribute("contenteditable", "true");
+  if (content !== "") {
+    $li.innerHTML = content;
+  }
+  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/convertor.d.ts

@@ -0,0 +1,2 @@
+export declare function _getContentData($content: HTMLDivElement): any[];
+export declare function _setContentData(data: any[], store: any): void;

package/dist/runtime/utils/convertor.mjs

@@ -0,0 +1,86 @@
+import { _createTextBlock, _createHeadingBlock, _createListBlock } from "./block.mjs";
+export function _getContentData($content) {
+  const childList = $content.children;
+  const data = [];
+  [...childList].forEach(($child) => {
+    const tagName = $child.tagName;
+    switch (tagName) {
+      case "P":
+        data.push(converteParagraphToData($child));
+        break;
+      case "H1":
+        data.push(converteHeadingToData($child, 1));
+        break;
+      case "H2":
+        data.push(converteHeadingToData($child, 2));
+        break;
+      case "H3":
+        data.push(converteHeadingToData($child, 3));
+        break;
+      case "UL":
+        data.push(converteUListToData($child));
+        break;
+      case "OL":
+        data.push(converteOListToData($child));
+        break;
+      case "PRE":
+        break;
+      case "DIV":
+        break;
+    }
+  });
+  return data;
+}
+export function _setContentData(data, store) {
+  const childList = [];
+  data.forEach((item) => {
+    switch (item.type) {
+      case "text":
+        childList.push(_createTextBlock(item.textContent));
+        break;
+      case "heading":
+        childList.push(_createHeadingBlock(`heading${item.level}`, item.textContent));
+        break;
+      case "ul":
+        childList.push(_createListBlock("ul", item.child));
+        break;
+      case "ol":
+        childList.push(_createListBlock("ol", item.child, item.pattern));
+        break;
+      case "":
+        break;
+    }
+  });
+  store.$content.replaceChildren(...childList);
+}
+function converteParagraphToData($child) {
+  return {
+    type: "text",
+    textContent: $child.innerHTML
+  };
+}
+function converteHeadingToData($child, level) {
+  return {
+    type: "heading",
+    level,
+    id: $child.id,
+    textContent: $child.innerHTML
+  };
+}
+function converteUListToData($child) {
+  return {
+    type: "ul",
+    child: [...$child.children].map(($li) => {
+      return $li.innerHTML;
+    })
+  };
+}
+function converteOListToData($child) {
+  return {
+    type: "ol",
+    pattern: $child.type,
+    child: [...$child.children].map(($li) => {
+      return $li.innerHTML;
+    })
+  };
+}

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;