dragon-editor 2.0.0-beta.1.3 → 2.0.0-beta.2

package/dist/runtime/core/style/common.css

@@ -0,0 +1,419 @@
+.dragon-editor {
+  position: relative;
+  width: 100%;
+  padding: 10px 10px 50px;
+  line-height: 1.6;
+}
+.dragon-editor.--comment {
+  padding: 10px;
+}
+.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 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.dragon-editor table,
+.dragon-editor th,
+.dragon-editor td {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.dragon-editor ol,
+.dragon-editor ul,
+.dragon-editor li {
+  list-style: none;
+}
+.dragon-editor h1,
+.dragon-editor h2,
+.dragon-editor h3,
+.dragon-editor h4,
+.dragon-editor h5,
+.dragon-editor h6 {
+  font-size: 1em;
+  font-weight: normal;
+}
+.dragon-editor input,
+.dragon-editor textarea,
+.dragon-editor select,
+.dragon-editor 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] {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.dragon-editor img {
+  border: 0;
+  vertical-align: top;
+}
+.dragon-editor .d-align-left {
+  text-align: left;
+}
+.dragon-editor .d-align-center {
+  text-align: center;
+}
+.dragon-editor .d-align-right {
+  text-align: right;
+}
+.dragon-editor .d-deco-bold {
+  font-weight: bold;
+}
+.dragon-editor .d-deco-italic {
+  font-style: italic;
+}
+.dragon-editor .d-deco-underline {
+  text-decoration: underline;
+}
+.dragon-editor .d-deco-underline.d-deco-through {
+  text-decoration: underline line-through;
+}
+.dragon-editor .d-deco-through {
+  text-decoration: line-through;
+}
+.dragon-editor .d-deco-through.d-deco-underline, .dragon-editor .d-deco-through.d-deco-link {
+  text-decoration: line-through underline;
+}
+.dragon-editor .d-deco-code {
+  padding: 2px 5px;
+  margin: 0 2px;
+  background: #f1f1f1;
+  color: #c52e2e;
+  border-radius: 2px;
+  font-family: Inconsolata, monospace, sans-serif;
+}
+.dragon-editor .d-deco-link {
+  color: inherit;
+}
+.dragon-editor .d-row-block {
+  padding-left: 50px;
+  border-radius: 5px;
+  background: transparent;
+  transition: background 0.25s ease;
+}
+.dragon-editor .d-row-block:hover {
+  background: #fafafa;
+}
+.dragon-editor .d-text-block {
+  cursor: text;
+  outline: 0;
+}
+.dragon-editor .d-text-block:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-text-block:empty::after {
+  display: inline;
+  content: "Write text";
+  color: #ccc;
+}
+.dragon-editor .d-image-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 5px;
+}
+.dragon-editor .d-image-block.d-align-left {
+  align-items: flex-start;
+}
+.dragon-editor .d-image-block.d-align-right {
+  align-items: flex-end;
+}
+.dragon-editor .d-image-block.--1 .d-image-area {
+  width: 5%;
+}
+.dragon-editor .d-image-block.--2 .d-image-area {
+  width: 10%;
+}
+.dragon-editor .d-image-block.--3 .d-image-area {
+  width: 15%;
+}
+.dragon-editor .d-image-block.--4 .d-image-area {
+  width: 20%;
+}
+.dragon-editor .d-image-block.--5 .d-image-area {
+  width: 25%;
+}
+.dragon-editor .d-image-block.--6 .d-image-area {
+  width: 30%;
+}
+.dragon-editor .d-image-block.--7 .d-image-area {
+  width: 35%;
+}
+.dragon-editor .d-image-block.--8 .d-image-area {
+  width: 40%;
+}
+.dragon-editor .d-image-block.--9 .d-image-area {
+  width: 45%;
+}
+.dragon-editor .d-image-block.--10 .d-image-area {
+  width: 50%;
+}
+.dragon-editor .d-image-block.--11 .d-image-area {
+  width: 55%;
+}
+.dragon-editor .d-image-block.--12 .d-image-area {
+  width: 60%;
+}
+.dragon-editor .d-image-block.--13 .d-image-area {
+  width: 65%;
+}
+.dragon-editor .d-image-block.--14 .d-image-area {
+  width: 70%;
+}
+.dragon-editor .d-image-block.--15 .d-image-area {
+  width: 75%;
+}
+.dragon-editor .d-image-block.--16 .d-image-area {
+  width: 80%;
+}
+.dragon-editor .d-image-block.--17 .d-image-area {
+  width: 85%;
+}
+.dragon-editor .d-image-block.--18 .d-image-area {
+  width: 90%;
+}
+.dragon-editor .d-image-block.--19 .d-image-area {
+  width: 95%;
+}
+.dragon-editor .d-image-block.--20 .d-image-area {
+  width: 100%;
+}
+.dragon-editor .d-image-block .d-image-area {
+  position: relative;
+}
+.dragon-editor .d-image-block .d-image-area .d-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor .d-image-block .d-image-area .d-btn-size-left,
+.dragon-editor .d-image-block .d-image-area .d-btn-size-right {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 60px;
+  background: #fff;
+  border: 2px solid #555;
+  border-radius: 6px;
+  cursor: col-resize;
+}
+.dragon-editor .d-image-block .d-image-area .d-btn-size-left {
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+.dragon-editor .d-image-block .d-image-area .d-btn-size-right {
+  right: 0;
+  transform: translate(50%, -50%);
+}
+.dragon-editor .d-image-block .d-caption {
+  width: 100%;
+  color: #ccc;
+  font-size: 1rem;
+  cursor: text;
+  outline: 0;
+}
+.dragon-editor .d-image-block .d-caption:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-image-block .d-caption:empty::after {
+  display: inline;
+  content: "Write caption";
+}
+.dragon-editor .d-block-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100px;
+  padding: 5px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.25s ease;
+}
+.dragon-editor .d-block-list.--active {
+  opacity: 1;
+  visibility: visible;
+}
+.dragon-editor .d-block-list .d-btn-block {
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 14px;
+}
+.dragon-editor .d-block-list .d-btn-block .d-icon {
+  width: 20px;
+}
+.dragon-editor .d-left-menu {
+  display: flex;
+  column-gap: 4px;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.25s ease;
+  z-index: 100;
+}
+.dragon-editor .d-left-menu.--active {
+  opacity: 1;
+  visibility: visible;
+}
+.dragon-editor .d-left-menu .d-add-block,
+.dragon-editor .d-left-menu .d-control-block {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop,
+.dragon-editor .d-left-menu .d-btn-block-pop {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  vertical-align: top;
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop:hover,
+.dragon-editor .d-left-menu .d-btn-block-pop:hover {
+  background: #e9e9e9;
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop:hover::before, .dragon-editor .d-left-menu .d-btn-menu-pop:hover::after,
+.dragon-editor .d-left-menu .d-btn-block-pop:hover::before,
+.dragon-editor .d-left-menu .d-btn-block-pop:hover::after {
+  background: #757575;
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop::before, .dragon-editor .d-left-menu .d-btn-menu-pop::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #837c7c;
+  border-radius: 2px;
+  transform: translate(-50%, -50%);
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop::before {
+  width: 12px;
+  height: 2px;
+}
+.dragon-editor .d-left-menu .d-btn-menu-pop::after {
+  width: 2px;
+  height: 12px;
+}
+.dragon-editor .d-left-menu .d-btn-block-pop::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  width: 3px;
+  height: 3px;
+  background: #837c7c;
+  border-radius: 50%;
+  box-shadow: 0 5px 0 #837c7c, 0 10px 0 #837c7c, 5px 0 0 #837c7c, 5px 5px 0 #837c7c, 5px 10px 0 #837c7c;
+}
+.dragon-editor .d-style-menu {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 30px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(calc(-50% + 25px));
+  transition: all 0.25s ease;
+  z-index: 100;
+}
+.dragon-editor .d-style-menu.--active {
+  opacity: 1;
+  visibility: visible;
+}
+.dragon-editor .d-style-menu .d-column {
+  display: flex;
+  column-gap: 2px;
+  padding: 5px;
+  border-right: 1px solid #eee;
+  box-sizing: border-box;
+}
+.dragon-editor .d-style-menu .d-column:last-child {
+  border-right: 0;
+}
+.dragon-editor .d-style-menu .d-column:empty {
+  display: none;
+}
+.dragon-editor .d-style-menu .d-btn {
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+}
+.dragon-editor .d-style-menu .d-btn.--active {
+  fill: blue;
+}
+.dragon-editor .d-link-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 30px;
+  padding: 0 5px;
+  background: #fff;
+  border-radius: 5px;
+  box-sizing: border-box;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.25s ease;
+}
+.dragon-editor .d-link-box.--active {
+  opacity: 1;
+  visibility: visible;
+}
+.dragon-editor .d-link-box .d-input {
+  flex: 1;
+  border: 0;
+  border-bottom: 2px solid #f1f1f1;
+}
+.dragon-editor .d-link-box .d-btn-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+}
+.dragon-editor .d-link-box .d-btn-link .d-icon {
+  height: 16px;
+}

package/dist/runtime/core/style/viewer.css

@@ -0,0 +1,191 @@
+.dragon-editor-viewer {
+  width: 100%;
+  padding: 10px;
+  line-height: 1.6;
+}
+.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-viewer table,
+.dragon-editor-viewer th,
+.dragon-editor-viewer td {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer li {
+  list-style: none;
+}
+.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-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-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-viewer img {
+  border: 0;
+  vertical-align: top;
+}
+.dragon-editor-viewer .d-align-left {
+  text-align: left;
+}
+.dragon-editor-viewer .d-align-center {
+  text-align: center;
+}
+.dragon-editor-viewer .d-align-right {
+  text-align: right;
+}
+.dragon-editor-viewer .d-deco-bold {
+  font-weight: bold;
+}
+.dragon-editor-viewer .d-deco-italic {
+  font-style: italic;
+}
+.dragon-editor-viewer .d-deco-underline {
+  text-decoration: underline;
+}
+.dragon-editor-viewer .d-deco-underline.d-deco-through {
+  text-decoration: underline line-through;
+}
+.dragon-editor-viewer .d-deco-through {
+  text-decoration: line-through;
+}
+.dragon-editor-viewer .d-deco-through.d-deco-underline, .dragon-editor-viewer .d-deco-through.d-deco-link {
+  text-decoration: line-through underline;
+}
+.dragon-editor-viewer .d-deco-code {
+  padding: 2px 5px;
+  margin: 0 2px;
+  background: #f1f1f1;
+  color: #c52e2e;
+  border-radius: 2px;
+  font-family: Inconsolata, monospace, sans-serif;
+}
+.dragon-editor-viewer .d-deco-link {
+  color: inherit;
+}
+.dragon-editor-viewer .d-text-block:empty {
+  min-height: 1.6em;
+}
+.dragon-editor-viewer .d-image-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 5px;
+}
+.dragon-editor-viewer .d-image-block.d-align-left {
+  align-items: flex-start;
+}
+.dragon-editor-viewer .d-image-block.d-align-right {
+  align-items: flex-end;
+}
+.dragon-editor-viewer .d-image-block.--1 .d-image-area {
+  width: 5%;
+}
+.dragon-editor-viewer .d-image-block.--2 .d-image-area {
+  width: 10%;
+}
+.dragon-editor-viewer .d-image-block.--3 .d-image-area {
+  width: 15%;
+}
+.dragon-editor-viewer .d-image-block.--4 .d-image-area {
+  width: 20%;
+}
+.dragon-editor-viewer .d-image-block.--5 .d-image-area {
+  width: 25%;
+}
+.dragon-editor-viewer .d-image-block.--6 .d-image-area {
+  width: 30%;
+}
+.dragon-editor-viewer .d-image-block.--7 .d-image-area {
+  width: 35%;
+}
+.dragon-editor-viewer .d-image-block.--8 .d-image-area {
+  width: 40%;
+}
+.dragon-editor-viewer .d-image-block.--9 .d-image-area {
+  width: 45%;
+}
+.dragon-editor-viewer .d-image-block.--10 .d-image-area {
+  width: 50%;
+}
+.dragon-editor-viewer .d-image-block.--11 .d-image-area {
+  width: 55%;
+}
+.dragon-editor-viewer .d-image-block.--12 .d-image-area {
+  width: 60%;
+}
+.dragon-editor-viewer .d-image-block.--13 .d-image-area {
+  width: 65%;
+}
+.dragon-editor-viewer .d-image-block.--14 .d-image-area {
+  width: 70%;
+}
+.dragon-editor-viewer .d-image-block.--15 .d-image-area {
+  width: 75%;
+}
+.dragon-editor-viewer .d-image-block.--16 .d-image-area {
+  width: 80%;
+}
+.dragon-editor-viewer .d-image-block.--17 .d-image-area {
+  width: 85%;
+}
+.dragon-editor-viewer .d-image-block.--18 .d-image-area {
+  width: 90%;
+}
+.dragon-editor-viewer .d-image-block.--19 .d-image-area {
+  width: 95%;
+}
+.dragon-editor-viewer .d-image-block.--20 .d-image-area {
+  width: 100%;
+}
+.dragon-editor-viewer .d-image-block .d-image-area .d-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor-viewer .d-image-block .d-caption {
+  width: 100%;
+  color: #ccc;
+  font-size: 1rem;
+}

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

@@ -0,0 +1,4 @@
+import type { cursorSelection, arrangementCursorData } from "../../../types";
+export declare function setCursor(target: Node, idx: number): void;
+export declare function getCursor(): cursorSelection;
+export declare function getArrangementCursorData(parentCursorData: any): arrangementCursorData;

package/dist/runtime/core/utils/cursor.mjs

@@ -0,0 +1,84 @@
+import { findEditableElement } from "./element.mjs";
+export function setCursor(target, idx) {
+  if (target) {
+    let $target;
+    if (target.constructor.name === "Text") {
+      $target = target;
+    } else {
+      $target = target.childNodes.length > 0 ? target.childNodes[0] : target;
+    }
+    const select = window.getSelection();
+    const range = document.createRange();
+    const realLength = $target.textContent?.length;
+    if (realLength < idx) {
+      idx = realLength;
+    }
+    range.setStart($target, idx);
+    range.collapse(true);
+    select.removeAllRanges();
+    select.addRange(range);
+  }
+}
+export function getCursor() {
+  const select = window.getSelection();
+  return {
+    type: select.type,
+    startNode: select.anchorNode,
+    startOffset: select.anchorOffset,
+    endNode: select.focusNode,
+    endOffset: select.focusOffset
+  };
+}
+export function getArrangementCursorData(parentCursorData) {
+  let cursorData = getCursor();
+  if (cursorData.startNode === null) {
+    cursorData = parentCursorData;
+  }
+  let startNode = cursorData.startNode;
+  let editableElement = findEditableElement(startNode);
+  if (editableElement === null) {
+    cursorData = parentCursorData;
+    startNode = cursorData.startNode;
+    editableElement = findEditableElement(startNode);
+  }
+  let childNode;
+  let childIdx = -1;
+  let fixIdx = 0;
+  let preNodeType = "";
+  let childLength = 0;
+  if (startNode.parentNode === editableElement) {
+    childNode = startNode;
+  } else {
+    childNode = startNode.parentNode;
+  }
+  editableElement.childNodes.forEach((child, count) => {
+    if (child === childNode) {
+      childIdx = count;
+    }
+  });
+  editableElement.childNodes.forEach((child, count) => {
+    if (count <= childIdx + fixIdx) {
+      const type = child.constructor.name;
+      if (preNodeType !== type) {
+        childLength = 0;
+      }
+      if (type === "Text") {
+        if (preNodeType === type) {
+          childIdx -= 1;
+          fixIdx += 1;
+          childLength += child.textContent?.length ?? 0;
+        } else {
+          childLength = child.textContent?.length ?? 0;
+        }
+      } else {
+        childLength = child.textContent?.length ?? 0;
+      }
+      preNodeType = type;
+    }
+  });
+  return {
+    editableNode: editableElement,
+    childCount: childIdx,
+    length: childLength
+  };
+}

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

@@ -0,0 +1,2 @@
+export declare function findEditableElement(node: Node): (HTMLElement | null);
+export declare function findChildNumber(parent: HTMLElement, child: Node): number;