dragon-editor 2.0.0-beta.1.4 → 2.0.0-beta.2.1

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

@@ -2,35 +2,70 @@
   position: relative;
   width: 100%;
   padding: 10px 10px 50px;
+  background: #fff;
+  border-radius: 10px;
   line-height: 1.6;
+  box-sizing: border-box;
 }
-.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.--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 {
+.dragon-editor table,
+.dragon-editor th,
+.dragon-editor td {
   border-spacing: 0;
   border-collapse: collapse;
 }
-.dragon-editor ol, .dragon-editor ul, .dragon-editor li {
+.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 {
+.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 {
+.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:link, .dragon-editor a:visited, .dragon-editor a:hover, .dragon-editor a:active {
-  text-decoration: none;
-}
-.dragon-editor a, .dragon-editor button, .dragon-editor input[type=submit], .dragon-editor input[type=button], .dragon-editor input[type=reset] {
+.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;
@@ -63,9 +98,217 @@
 .dragon-editor .d-deco-through {
   text-decoration: line-through;
 }
-.dragon-editor .d-deco-through.d-deco-underline {
+.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-h1 {
+  font-size: 2em;
+}
+.dragon-editor .d-h2 {
+  font-size: 1.5em;
+}
+.dragon-editor .d-h3 {
+  font-size: 1.17em;
+}
+.dragon-editor .d-h4 {
+  font-size: 1em;
+}
+.dragon-editor .d-h5 {
+  font-size: 0.83em;
+}
+.dragon-editor .d-h6 {
+  font-size: 0.67em;
+}
+.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-ol-block {
+  padding-left: 30px;
+  cursor: text;
+  list-style: decimal;
+}
+.dragon-editor .d-ol-block .d-li-item {
+  list-style: inherit;
+  outline: 0;
+}
+.dragon-editor .d-ol-block .d-li-item:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-ol-block .d-li-item: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;
@@ -75,6 +318,7 @@
   opacity: 0;
   visibility: hidden;
   transition: all 0.25s ease;
+  z-index: 100;
 }
 .dragon-editor .d-left-menu.--active {
   opacity: 1;
@@ -104,7 +348,7 @@
   background: #757575;
 }
 .dragon-editor .d-left-menu .d-btn-menu-pop::before, .dragon-editor .d-left-menu .d-btn-menu-pop::after {
-  dispaly: bock;
+  display: block;
   content: "";
   position: absolute;
   top: 50%;
@@ -133,38 +377,21 @@
   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-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-block-list {
-  display: none;
-}
 .dragon-editor .d-style-menu {
   display: flex;
   align-items: center;
   position: absolute;
   top: 0;
-  left: 60px;
+  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;
@@ -173,6 +400,7 @@
 .dragon-editor .d-style-menu .d-column {
   display: flex;
   column-gap: 2px;
+  position: relative;
   padding: 5px;
   border-right: 1px solid #eee;
   box-sizing: border-box;
@@ -180,6 +408,9 @@
 .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;
@@ -188,3 +419,61 @@
 .dragon-editor .d-style-menu .d-btn.--active {
   fill: blue;
 }
+.dragon-editor .d-style-menu .d-btn.--hug {
+  width: auto;
+  min-width: 60px;
+}
+.dragon-editor .d-style-menu .d-child-list {
+  display: none;
+  flex-direction: column;
+  row-gap: 4px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #f1f1f1;
+  border-top: 0;
+  border-radius: 0 0 5px 5px;
+}
+.dragon-editor .d-style-menu .d-child-list.--active {
+  display: flex;
+}
+.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

@@ -1,4 +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(): arrangementCursorData;
+export declare function getArrangementCursorData(parentCursorData: any): arrangementCursorData;

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

@@ -9,6 +9,10 @@ export function setCursor(target, idx) {
     }
     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();
@@ -25,10 +29,18 @@ export function getCursor() {
     endOffset: select.focusOffset
   };
 }
-export function getArrangementCursorData() {
-  const cursorData = getCursor();
-  const startNode = cursorData.startNode;
-  const editableElement = findEditableElement(startNode);
+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;

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

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

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

@@ -3,17 +3,32 @@ export function findEditableElement(node) {
     if (node.constructor.name === "Text") {
       return findEditableElement(node.parentNode);
     } else {
-      const hasAttr = node.getAttribute("contenteditable") !== null;
-      if (hasAttr) {
-        return node;
+      if (node.getAttribute) {
+        const hasAttr = node.getAttribute("contenteditable") !== null;
+        if (hasAttr) {
+          return node;
+        } else {
+          return findEditableElement(node.parentNode);
+        }
       } else {
-        return findEditableElement(node.parentNode);
+        return null;
       }
     }
   } else {
     return null;
   }
 }
+export function findLiElement(node) {
+  if (node) {
+    if (node.constructor.name !== "HTMLLIElement") {
+      return findLiElement(node.parentNode);
+    } else {
+      return node;
+    }
+  } else {
+    return null;
+  }
+}
 export function findChildNumber(parent, child) {
   let idx = 0;
   parent.childNodes.forEach((item, count) => {

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

@@ -1,6 +1,5 @@
-import { textBlock } from "../../../types/index";
-export declare function createTextBlock(): textBlock;
-export declare function createBlock(name: string): textBlock;
+import { allBlock } from "../../../types/index";
+export declare function createBlock(name: string, value?: object): allBlock;
 export * from "./keyboard";
 export * from "./cursor";
 export * from "./style";