From b8796d2bbdae613298f1287faa716b8969207dfe Mon Sep 17 00:00:00 2001 From: lovefield Date: Thu, 19 Oct 2023 17:46:29 +0900 Subject: [PATCH 1/5] feat[script]: use h object --- .npmrc | 4 +- README.md | 8 +- playground/pages/index.vue | 4 +- src/module.ts | 7 +- src/runtime/core/components/SvgIcon.ts | 100 ++++++++++ src/runtime/core/components/SvgIcon.vue | 175 ------------------ src/runtime/core/components/icon/Accept.vue | 5 - .../core/components/icon/AlignCenter.vue | 6 - .../core/components/icon/AlignLeft.vue | 6 - .../core/components/icon/AlignRight.vue | 6 - .../core/components/icon/ArrowDown.vue | 3 - src/runtime/core/components/icon/ArrowUp.vue | 3 - src/runtime/core/components/icon/Cancel.vue | 5 - .../core/components/icon/CodeBlock.vue | 6 - .../core/components/icon/DecorationBold.vue | 6 - .../core/components/icon/DecorationItalic.vue | 6 - .../icon/DecorationStrikethrough.vue | 6 - .../components/icon/DecorationUnderline.vue | 6 - src/runtime/core/components/icon/Delete.vue | 3 - .../core/components/icon/ImageBlock.vue | 5 - src/runtime/core/components/icon/LinkPath.vue | 6 - src/runtime/core/components/icon/OlBlock.vue | 6 - .../core/components/icon/QuotationBlock.vue | 6 - .../core/components/icon/TableBlock.vue | 8 - .../core/components/icon/TextBlock.vue | 5 - src/runtime/core/components/icon/UlBlock.vue | 6 - src/runtime/shared/components/DragonEditor.ts | 69 +++++++ 27 files changed, 183 insertions(+), 293 deletions(-) create mode 100644 src/runtime/core/components/SvgIcon.ts delete mode 100644 src/runtime/core/components/SvgIcon.vue delete mode 100644 src/runtime/core/components/icon/Accept.vue delete mode 100644 src/runtime/core/components/icon/AlignCenter.vue delete mode 100644 src/runtime/core/components/icon/AlignLeft.vue delete mode 100644 src/runtime/core/components/icon/AlignRight.vue delete mode 100644 src/runtime/core/components/icon/ArrowDown.vue delete mode 100644 src/runtime/core/components/icon/ArrowUp.vue delete mode 100644 src/runtime/core/components/icon/Cancel.vue delete mode 100644 src/runtime/core/components/icon/CodeBlock.vue delete mode 100644 src/runtime/core/components/icon/DecorationBold.vue delete mode 100644 src/runtime/core/components/icon/DecorationItalic.vue delete mode 100644 src/runtime/core/components/icon/DecorationStrikethrough.vue delete mode 100644 src/runtime/core/components/icon/DecorationUnderline.vue delete mode 100644 src/runtime/core/components/icon/Delete.vue delete mode 100644 src/runtime/core/components/icon/ImageBlock.vue delete mode 100644 src/runtime/core/components/icon/LinkPath.vue delete mode 100644 src/runtime/core/components/icon/OlBlock.vue delete mode 100644 src/runtime/core/components/icon/QuotationBlock.vue delete mode 100644 src/runtime/core/components/icon/TableBlock.vue delete mode 100644 src/runtime/core/components/icon/TextBlock.vue delete mode 100644 src/runtime/core/components/icon/UlBlock.vue create mode 100644 src/runtime/shared/components/DragonEditor.ts diff --git a/.npmrc b/.npmrc index a77f6cc..37bc2ca 100644 --- a/.npmrc +++ b/.npmrc @@ -1,5 +1,5 @@ -//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN} -registry=https://registry.npmjs.org/ +# //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN} +# registry=https://registry.npmjs.org/ always-auth=true shamefully-hoist=true strict-peer-dependencies=false \ No newline at end of file diff --git a/README.md b/README.md index 50103f3..431df26 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,7 @@ # DragonEditor 드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.
-커스터마이징이 가능하며 AMP 페이지를 지원합니다.
-2.0 기점으로 Nuxt.js만 지원합니다. +커스터마이징이 가능하며 Nuxt.js만 지원합니다. ## 사용법 @@ -70,7 +69,7 @@ editor.value.addImageBlock({ ```typescript editor.value.updateBlockData(); -// do somthing +// do save ``` ### 코멘트 @@ -83,7 +82,6 @@ editor.value.updateBlockData(); diff --git a/src/module.ts b/src/module.ts index c695522..e9ee432 100644 --- a/src/module.ts +++ b/src/module.ts @@ -7,9 +7,14 @@ export default defineNuxtModule({ setup(options, nuxt) { const resolver = createResolver(import.meta.url) + // addComponent({ + // name: 'DragonEditor', + // filePath: resolver.resolve('./runtime/shared/components/DragonEditor') + // }); + addComponent({ name: 'DragonEditor', - filePath: resolver.resolve('./runtime/shared/components/DragonEditor') + filePath: resolver.resolve('./runtime/shared/components/DragonEditor.ts') }); addComponent({ diff --git a/src/runtime/core/components/SvgIcon.ts b/src/runtime/core/components/SvgIcon.ts new file mode 100644 index 0000000..5583663 --- /dev/null +++ b/src/runtime/core/components/SvgIcon.ts @@ -0,0 +1,100 @@ +import { h, defineComponent, ref } from "vue"; + +export default defineComponent({ + name: "SvgIcon", + props: ["kind"], + setup(props: { kind: string }, ctx) { + const iconList = ref<{ [key: string]: any }>({ + TextBlock: h("path", { + class: ["path"], + "fill-rule": "evenodd", + "clip-rule": "evenodd", + d: "M19 13H45C48.3137 13 51 15.6863 51 19V45C51 48.3137 48.3137 51 45 51H19C15.6863 51 13 48.3137 13 45V19C13 15.6863 15.6863 13 19 13ZM9 19C9 13.4772 13.4772 9 19 9H45C50.5228 9 55 13.4772 55 19V45C55 50.5228 50.5228 55 45 55H19C13.4772 55 9 50.5228 9 45V19ZM20.8571 19C19.8315 19 19 19.8315 19 20.8571C19 20.8806 19.0004 20.904 19.0013 20.9272C19.0004 20.9514 19 20.9756 19 21V22.5714C19 23.676 19.8954 24.5714 21 24.5714C22.0565 24.5714 22.9217 23.7522 22.995 22.7143H30V41.2857H28.8571C27.8315 41.2857 27 42.1172 27 43.1429C27 44.1685 27.8315 45 28.8571 45H32H35.1429C36.1685 45 37 44.1685 37 43.1429C37 42.1172 36.1685 41.2857 35.1429 41.2857H34V22.7143H41.005C41.0783 23.7522 41.9435 24.5714 43 24.5714C44.1046 24.5714 45 23.676 45 22.5714V21C45 20.9756 44.9996 20.9514 44.9987 20.9272C44.9996 20.904 45 20.8806 45 20.8571C45 19.8315 44.1685 19 43.1429 19H43H32H21H20.8571Z", + }), + ImageBlock: h("path", { + class: ["path"], + "fill-rule": "evenodd", + "clip-rule": "evenodd", + d: "M45 13H19C15.6863 13 13 15.6863 13 19V45C13 45.2946 13.0212 45.5843 13.0623 45.8676L22.5157 36.4142C24.7774 34.1525 28.3955 34.0739 30.7515 36.1784L36.5157 30.4142C38.8588 28.0711 42.6578 28.0711 45.0009 30.4142L51 36.4133V19C51 15.6863 48.3137 13 45 13ZM19 51C17.4694 51 16.0727 50.4269 15.0127 49.4835C15.156 49.3993 15.2912 49.2956 15.4142 49.1725L25.3441 39.2426C26.1251 38.4616 27.3915 38.4616 28.1725 39.2426L33.1967 44.2669C33.9778 45.0479 35.2441 45.0479 36.0252 44.2669C36.8062 43.4858 36.8062 42.2195 36.0252 41.4385L33.5867 39L39.3441 33.2426C40.1251 32.4616 41.3915 32.4616 42.1725 33.2426L51 42.0701V45C51 48.3137 48.3137 51 45 51H19ZM19 9C13.4772 9 9 13.4772 9 19V45C9 50.5228 13.4772 55 19 55H45C50.5228 55 55 50.5228 55 45V19C55 13.4772 50.5228 9 45 9H19ZM27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C25.6569 21 27 22.3431 27 24ZM31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17C27.866 17 31 20.134 31 24Z", + }), + UlBlock: h("path", { + class: ["path"], + d: "M11 19C12.1046 19 13 18.1046 13 17C13 15.8954 12.1046 15 11 15C9.89543 15 9 15.8954 9 17C9 18.1046 9.89543 19 11 19ZM23 15C21.8954 15 21 15.8954 21 17C21 18.1046 21.8954 19 23 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H23ZM23 30C21.8954 30 21 30.8954 21 32C21 33.1046 21.8954 34 23 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H23ZM21 47C21 45.8954 21.8954 45 23 45H53C54.1046 45 55 45.8954 55 47C55 48.1046 54.1046 49 53 49H23C21.8954 49 21 48.1046 21 47ZM13 32C13 33.1046 12.1046 34 11 34C9.89543 34 9 33.1046 9 32C9 30.8954 9.89543 30 11 30C12.1046 30 13 30.8954 13 32ZM11 49C12.1046 49 13 48.1046 13 47C13 45.8954 12.1046 45 11 45C9.89543 45 9 45.8954 9 47C9 48.1046 9.89543 49 11 49Z", + }), + OlBlock: h("path", { + class: ["path"], + d: "M9 11.75C9 10.7835 9.76747 10 10.7143 10H13.2857C14.2325 10 15 10.7835 15 11.75V21.25C15 22.2165 14.2325 23 13.2857 23C12.3389 23 11.5714 22.2165 11.5714 21.25V13.5H10.7143C9.76747 13.5 9 12.7165 9 11.75ZM27 15C25.8954 15 25 15.8954 25 17C25 18.1046 25.8954 19 27 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H27ZM25 32C25 30.8954 25.8954 30 27 30H53C54.1046 30 55 30.8954 55 32C55 33.1046 54.1046 34 53 34H27C25.8954 34 25 33.1046 25 32ZM27 45C25.8954 45 25 45.8954 25 47C25 48.1046 25.8954 49 27 49H53C54.1046 49 55 48.1046 55 47C55 45.8954 54.1046 45 53 45H27ZM12.3846 44.2308C12.3846 43.7635 12.7635 43.3846 13.2308 43.3846C13.6981 43.3846 14.0769 43.7635 14.0769 44.2308C14.0769 44.6981 13.6981 45.0769 13.2308 45.0769C12.2961 45.0769 11.5385 45.8346 11.5385 46.7692C11.5385 47.7039 12.2961 48.4615 13.2308 48.4615C13.6981 48.4615 14.0769 48.8404 14.0769 49.3077C14.0769 49.775 13.6981 50.1538 13.2308 50.1538C12.7635 50.1538 12.3846 49.775 12.3846 49.3077C12.3846 48.3731 11.6269 47.6154 10.6923 47.6154C9.75767 47.6154 9 48.3731 9 49.3077C9 51.6443 10.8942 53.5385 13.2308 53.5385C15.5674 53.5385 17.4615 51.6443 17.4615 49.3077C17.4615 48.3553 17.1468 47.4763 16.6157 46.7692C17.1468 46.0621 17.4615 45.1832 17.4615 44.2308C17.4615 41.8942 15.5674 40 13.2308 40C10.8942 40 9 41.8942 9 44.2308C9 45.1654 9.75767 45.9231 10.6923 45.9231C11.6269 45.9231 12.3846 45.1654 12.3846 44.2308ZM13.5 28.5C13.0029 28.5 12.6 28.8918 12.6 29.375C12.6 30.3415 11.7941 31.125 10.8 31.125C9.80589 31.125 9 30.3415 9 29.375C9 26.9588 11.0147 25 13.5 25C15.9853 25 18 26.9588 18 29.375C18 29.9731 17.7566 30.5282 17.595 30.8603C17.4017 31.2573 17.1464 31.681 16.8741 32.0963C16.8175 32.1825 16.7653 32.2623 16.7163 32.3373C16.2911 32.9875 16.1104 33.2638 15.5 34.0473C15.3789 34.2028 15.0308 34.639 14.74 35.0033C14.5689 35.2177 14.4177 35.4072 14.3443 35.5H17.2C18.1941 35.5 19 36.2835 19 37.25C19 38.2165 18.1941 39 17.2 39H10.8C9.80585 39 9 38.2165 9 37.25C9 36.8843 9.11809 36.6048 9.14918 36.5312L9.15027 36.5286C9.19963 36.4117 9.25386 36.3129 9.29246 36.2463C9.37132 36.1102 9.46475 35.9726 9.54962 35.8528C9.72388 35.6068 9.95766 35.3025 10.2124 34.9778C10.4469 34.6787 10.6916 34.3714 10.949 34.0482L10.9497 34.0473C11.2967 33.6116 11.6665 33.1471 12.0651 32.6355C12.7344 31.7764 13.373 30.9246 13.8384 30.2148C14.0724 29.8581 14.2389 29.5727 14.341 29.3631C14.363 29.3178 14.3794 29.2814 14.3914 29.2532C14.3304 28.8276 13.9545 28.5 13.5 28.5Z", + }), + QuotationBlock: h("path", { + class: ["path"], + d: "M11 13C9.89543 13 9 13.7397 9 14.6522V49.3478C9 50.2603 9.89543 51 11 51C12.1046 51 13 50.2603 13 49.3478V14.6522C13 13.7397 12.1046 13 11 13ZM23.2667 15C22.0148 15 21 15.8954 21 17C21 18.1046 22.0148 19 23.2667 19H52.7333C53.9852 19 55 18.1046 55 17C55 15.8954 53.9852 15 52.7333 15H23.2667ZM21 47C21 45.8954 22.0148 45 23.2667 45H52.7333C53.9852 45 55 45.8954 55 47C55 48.1046 53.9852 49 52.7333 49H23.2667C22.0148 49 21 48.1046 21 47ZM23.2667 30C22.0148 30 21 30.8954 21 32C21 33.1046 22.0148 34 23.2667 34H52.7333C53.9852 34 55 33.1046 55 32C55 30.8954 53.9852 30 52.7333 30H23.2667Z", + }), + TableBlock: h("path", { + class: ["path"], + "fill-rule": "evenodd", + "clip-rule": "evenodd", + d: "M45 13H19C15.6863 13 13 15.6863 13 19V21H51V19C51 15.6863 48.3137 13 45 13ZM13 36V25H22V36H13ZM26 36V25H38V36H26ZM38 40H26V51H38V40ZM42 51H45C48.3137 51 51 48.3137 51 45V40H42V51ZM42 36V25H51V36H42ZM13 40H22V51H19C15.6863 51 13 48.3137 13 45V40ZM19 9C13.4772 9 9 13.4771 9 19V45C9 50.5229 13.4772 55 19 55H45C50.5228 55 55 50.5229 55 45V19C55 13.4771 50.5228 9 45 9H19Z", + }), + AlignLeft: h("path", { + class: ["path"], + d: "M11 9C9.89543 9 9 9.89543 9 11C9 12.1046 9.89543 13 11 13H23C24.1046 13 25 12.1046 25 11C25 9.89543 24.1046 9 23 9H11ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM9 39C9 37.8954 9.89543 37 11 37H37C38.1046 37 39 37.8954 39 39C39 40.1046 38.1046 41 37 41H11C9.89543 41 9 40.1046 9 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z", + }), + AlignCenter: h("path", { + class: ["path"], + d: "M26 9C24.8954 9 24 9.89543 24 11C24 12.1046 24.8954 13 26 13H38C39.1046 13 40 12.1046 40 11C40 9.89543 39.1046 9 38 9H26ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM17 39C17 37.8954 17.8954 37 19 37H45C46.1046 37 47 37.8954 47 39C47 40.1046 46.1046 41 45 41H19C17.8954 41 17 40.1046 17 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z", + }), + AlignRight: h("path", { + class: ["path"], + d: "M41 9C39.8954 9 39 9.89543 39 11C39 12.1046 39.8954 13 41 13H53C54.1046 13 55 12.1046 55 11C55 9.89543 54.1046 9 53 9H41ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM25 39C25 37.8954 25.8954 37 27 37H53C54.1046 37 55 37.8954 55 39C55 40.1046 54.1046 41 53 41H27C25.8954 41 25 40.1046 25 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z", + }), + DecorationBold: h("path", { + class: ["path"], + d: "M15 50C15 52.7614 17.2386 55 20 55H32.9922C44.0389 55 49 49.3673 49 41.8571C49 35.1933 45.4069 31.9731 39.714 30.9461C39.6526 30.935 39.607 30.8816 39.607 30.8192C39.607 30.7636 39.6438 30.714 39.6966 30.6965C44.9893 28.9442 47.1479 25.5349 47.1479 20.6006C47.1479 13.1574 42.3191 9 32 9H20C17.2386 9 15 11.2386 15 14V50ZM29.3268 48.2274C26.5654 48.2274 24.3268 45.9888 24.3268 43.2274V39.3469C24.3268 36.5855 26.5654 34.3469 29.3268 34.3469H31.0078C36.3658 34.3469 39.3424 36.3586 39.3424 41.1195C39.3424 45.9475 36.4981 48.2274 31.3385 48.2274H29.3268ZM29.3268 28.4461C26.5654 28.4461 24.3268 26.2075 24.3268 23.4461V20.7055C24.3268 17.9441 26.5654 15.7055 29.3268 15.7055H30.4125C35.3074 15.7055 37.821 17.3149 37.821 22.0087C37.821 26.8367 34.5798 28.4461 30.1479 28.4461H29.3268Z", + }), + DecorationItalic: h("path", { + class: ["path"], + d: "M25 11C25 9.89543 25.8954 9 27 9H34H40H46C47.1046 9 48 9.89543 48 11C48 12.1046 47.1046 13 46 13H39.0435L29.9565 51H36C37.1046 51 38 51.8954 38 53C38 54.1046 37.1046 55 36 55H29H23H17C15.8954 55 15 54.1046 15 53C15 51.8954 15.8954 51 17 51H23.9565L33.0435 13H27C25.8954 13 25 12.1046 25 11Z", + }), + DecorationUnderline: h("path", { + class: ["path"], + d: "M21 13C21 11.8954 20.1046 11 19 11C17.8954 11 17 11.8954 17 13V28C17 36.2843 23.7157 43 32 43C40.2843 43 47 36.2843 47 28V13C47 11.8954 46.1046 11 45 11C43.8954 11 43 11.8954 43 13V28C43 34.0751 38.0751 39 32 39C25.9249 39 21 34.0751 21 28V13ZM13 49C11.8954 49 11 49.8954 11 51C11 52.1046 11.8954 53 13 53H51C52.1046 53 53 52.1046 53 51C53 49.8954 52.1046 49 51 49H13Z", + }), + DecorationStrikethrough: h("path", { + class: ["path"], + d: "M49 42.0827C49 46.213 47.3861 49.3985 44.1583 51.6391C40.9305 53.8797 36.4003 55 30.5676 55C25.2609 55 20.9589 54.3116 17.6613 52.9349C16.6952 52.5315 16.1274 51.5533 16.1274 50.5064C16.1274 48.407 18.3376 47.0078 20.3303 47.6687C21.2971 47.9893 22.2887 48.2735 23.305 48.5211C25.8816 49.142 28.3591 49.4525 30.7375 49.4525C34.4183 49.4525 37.2497 48.8991 39.2317 47.7923C41.2136 46.6585 42.2046 44.9442 42.2046 42.6496C42.2046 40.9219 41.4118 39.4507 39.8263 38.2359C38.9729 37.5555 37.669 36.8102 35.9145 36H47.1393C48.3798 37.7105 49 39.7381 49 42.0827ZM32.2534 28H19.0141C18.3351 27.3458 17.7693 26.6544 17.3166 25.9261C16.4389 24.4683 16 22.7271 16 20.7025C16 17.0851 17.5431 14.2371 20.6293 12.1585C23.7156 10.0528 27.9485 9 33.3282 9C37.3092 9 41.2187 9.61323 45.0567 10.8397C46.6953 11.3633 47.4248 13.2208 46.708 14.7845C46.04 16.2418 44.353 16.9113 42.8299 16.4114C39.2086 15.2228 35.8715 14.6285 32.8185 14.6285C29.4775 14.6285 26.9575 15.1279 25.2587 16.1268C23.5598 17.1256 22.7104 18.5023 22.7104 20.257C22.7104 21.4448 23.0219 22.4572 23.6448 23.294C24.296 24.1309 25.3295 24.9272 26.7452 25.6831C27.8244 26.2593 29.6605 27.0316 32.2534 28ZM11 30C9.89543 30 9 30.8954 9 32C9 33.1046 9.89543 34 11 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H11Z", + }), + LinkPath: h("path", { + class: ["path"], + d: "M21 20H28C29.1046 20 30 20.8954 30 22C30 23.1046 29.1046 24 28 24H21C16.5817 24 13 27.5817 13 32C13 36.4183 16.5817 40 21 40H28C29.1046 40 30 40.8955 30 42C30 43.1045 29.1046 44 28 44H21C14.3726 44 9 38.6274 9 32C9 25.3726 14.3726 20 21 20ZM51 32C51 36.4183 47.4183 40 43 40H36C34.8964 40 34.0015 40.8939 34 41.9972V42L34 42.0028C34.0015 43.1061 34.8964 44 36 44H43C49.6274 44 55 38.6274 55 32C55 25.3726 49.6274 20 43 20H36C34.8954 20 34 20.8955 34 22C34 23.1045 34.8954 24 36 24H43C47.4183 24 51 27.5817 51 32ZM24.5 30C23.3954 30 22.5 30.8954 22.5 32C22.5 33.1046 23.3954 34 24.5 34H39.5C40.6046 34 41.5 33.1046 41.5 32C41.5 30.8954 40.6046 30 39.5 30H24.5Z", + }), + CodeBlock: h("path", { + class: ["path"], + d: "M35.2981 20C34.5175 20 33.8188 20.4842 33.5447 21.2151L25.9492 41.4698C25.4901 42.6941 26.3951 44 27.7026 44C28.4832 44 29.182 43.5158 29.4561 42.7849L37.0516 22.5302C37.5107 21.3059 36.6056 20 35.2981 20ZM11.013 35.0376C8.34071 33.499 8.34073 29.643 11.013 28.1045L18.8813 23.5745C19.8385 23.0234 21.0613 23.3526 21.6124 24.3098C22.1635 25.2671 21.8343 26.4899 20.8771 27.041L13.0088 31.571L20.8771 36.1011C21.8343 36.6522 22.1635 37.875 21.6124 38.8322C21.0613 39.7895 19.8385 40.1187 18.8813 39.5676L11.013 35.0376ZM53.1299 35.0376C55.8022 33.499 55.8022 29.643 53.1299 28.1045L45.2616 23.5745C44.3044 23.0234 43.0816 23.3526 42.5305 24.3098C41.9794 25.2671 42.3086 26.4899 43.2658 27.041L51.1341 31.571L43.2658 36.1011C42.3086 36.6522 41.9794 37.875 42.5305 38.8322C43.0816 39.7895 44.3044 40.1187 45.2616 39.5676L53.1299 35.0376Z", + }), + Cancel: h("path", { + class: ["path"], + d: "M13.2497 13.0226C11.032 15.2442 11.032 18.8461 13.2497 21.0677L24.0457 31.8826L13.0153 42.9323C10.7976 45.1539 10.7976 48.7558 13.0153 50.9774C15.2331 53.199 18.8287 53.199 21.0464 50.9774L32.0768 39.9278L42.9532 50.8233C45.1709 53.0449 48.7666 53.0449 50.9843 50.8233C53.202 48.6017 53.202 44.9997 50.9843 42.7781L40.1078 31.8826L50.7499 21.2219C52.9677 19.0003 52.9677 15.3983 50.7499 13.1767C48.5322 10.9551 44.9366 10.9551 42.7189 13.1767L32.0768 23.8375L21.2808 13.0226C19.063 10.801 15.4674 10.801 13.2497 13.0226Z", + }), + Accept: h("path", { + class: ["path"], + d: "M51.3456 17.6735C49.1181 15.4422 45.5066 15.4422 43.2792 17.6735L26.0616 34.9213L20.741 29.5914C18.5126 27.3591 14.8997 27.3591 12.6713 29.5914C10.4429 31.8236 10.4429 35.4429 12.6713 37.6752L21.9937 47.0139C24.222 49.2462 27.835 49.2462 30.0633 47.0139C30.1078 46.9693 30.1514 46.9243 30.194 46.8787C30.3822 46.7324 30.5633 46.5728 30.736 46.3997L51.3456 25.7541C53.573 23.5227 53.573 19.9049 51.3456 17.6735Z", + }), + ArrowDown: h("path", { + class: ["path"], + d: "M32 9C30.8954 9 30 9.89543 30 11V48.0208L18.4142 36.435C17.6332 35.654 16.3668 35.654 15.5858 36.435C14.8047 37.2161 14.8047 38.4824 15.5858 39.2635L30.6611 54.3388C31.4422 55.1199 32.7086 55.1199 33.4896 54.3388L48.5649 39.2635C49.346 38.4824 49.346 37.2161 48.5649 36.435C47.7839 35.654 46.5176 35.654 45.7365 36.435L34 48.1716V11C34 9.89543 33.1046 9 32 9Z", + }), + ArrowUp: h("path", { + class: ["path"], + d: "M45.7366 27.4896C46.5176 28.2706 47.7839 28.2706 48.565 27.4896C49.346 26.7085 49.346 25.4422 48.565 24.6612L33.4896 9.58579C32.7085 8.80473 31.4422 8.80474 30.6612 9.58579L15.5858 24.6612C14.8047 25.4422 14.8047 26.7085 15.5858 27.4896C16.3668 28.2706 17.6332 28.2706 18.4142 27.4896L30 15.9038V53C30 54.1046 30.8954 55 32 55C33.1045 55 34 54.1046 34 53V15.753L45.7366 27.4896Z", + }), + Delete: h("path", { + class: ["path"], + "fill-rule": "evenodd", + "clip-rule": "evenodd", + d: "M32 51C42.4934 51 51 42.4934 51 32C51 21.5066 42.4934 13 32 13C21.5066 13 13 21.5066 13 32C13 42.4934 21.5066 51 32 51ZM32 55C44.7026 55 55 44.7026 55 32C55 19.2974 44.7026 9 32 9C19.2974 9 9 19.2974 9 32C9 44.7026 19.2974 55 32 55ZM21.4142 42.6274C20.6332 41.8462 20.6332 40.5801 21.4142 39.7988L29.1715 32.0415L21.5858 24.4558C20.8047 23.6748 20.8047 22.4084 21.5858 21.6274C22.3668 20.8462 23.6332 20.8462 24.4142 21.6274L31.9999 29.2131L39.799 21.4141C40.58 20.6331 41.8464 20.6331 42.6274 21.4141C43.4084 22.1953 43.4084 23.4614 42.6274 24.2427L34.8284 32.0417L42.799 40.0122C43.58 40.7932 43.58 42.0596 42.799 42.8406C42.0179 43.6216 40.7516 43.6216 39.9706 42.8406L32.0001 34.8701L24.2426 42.6274C23.4616 43.4084 22.1953 43.4084 21.4142 42.6274Z", + }), + }); + + return () => h("svg", { class: ["d-icon"], viewBox: "0 0 64 64" }, iconList.value[props.kind]); + }, +}); diff --git a/src/runtime/core/components/SvgIcon.vue b/src/runtime/core/components/SvgIcon.vue deleted file mode 100644 index 5304958..0000000 --- a/src/runtime/core/components/SvgIcon.vue +++ /dev/null @@ -1,175 +0,0 @@ - - - diff --git a/src/runtime/core/components/icon/Accept.vue b/src/runtime/core/components/icon/Accept.vue deleted file mode 100644 index 7cc6373..0000000 --- a/src/runtime/core/components/icon/Accept.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/runtime/core/components/icon/AlignCenter.vue b/src/runtime/core/components/icon/AlignCenter.vue deleted file mode 100644 index 26044f9..0000000 --- a/src/runtime/core/components/icon/AlignCenter.vue +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/src/runtime/core/components/icon/AlignLeft.vue b/src/runtime/core/components/icon/AlignLeft.vue deleted file mode 100644 index 6300932..0000000 --- a/src/runtime/core/components/icon/AlignLeft.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/AlignRight.vue b/src/runtime/core/components/icon/AlignRight.vue deleted file mode 100644 index 118d749..0000000 --- a/src/runtime/core/components/icon/AlignRight.vue +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/src/runtime/core/components/icon/ArrowDown.vue b/src/runtime/core/components/icon/ArrowDown.vue deleted file mode 100644 index 06bd70d..0000000 --- a/src/runtime/core/components/icon/ArrowDown.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/runtime/core/components/icon/ArrowUp.vue b/src/runtime/core/components/icon/ArrowUp.vue deleted file mode 100644 index 14ac390..0000000 --- a/src/runtime/core/components/icon/ArrowUp.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/runtime/core/components/icon/Cancel.vue b/src/runtime/core/components/icon/Cancel.vue deleted file mode 100644 index 2c56431..0000000 --- a/src/runtime/core/components/icon/Cancel.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/runtime/core/components/icon/CodeBlock.vue b/src/runtime/core/components/icon/CodeBlock.vue deleted file mode 100644 index d849e23..0000000 --- a/src/runtime/core/components/icon/CodeBlock.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/DecorationBold.vue b/src/runtime/core/components/icon/DecorationBold.vue deleted file mode 100644 index 022093a..0000000 --- a/src/runtime/core/components/icon/DecorationBold.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/DecorationItalic.vue b/src/runtime/core/components/icon/DecorationItalic.vue deleted file mode 100644 index 1290949..0000000 --- a/src/runtime/core/components/icon/DecorationItalic.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/DecorationStrikethrough.vue b/src/runtime/core/components/icon/DecorationStrikethrough.vue deleted file mode 100644 index 97d1a7b..0000000 --- a/src/runtime/core/components/icon/DecorationStrikethrough.vue +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/src/runtime/core/components/icon/DecorationUnderline.vue b/src/runtime/core/components/icon/DecorationUnderline.vue deleted file mode 100644 index 9b5a7e9..0000000 --- a/src/runtime/core/components/icon/DecorationUnderline.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/Delete.vue b/src/runtime/core/components/icon/Delete.vue deleted file mode 100644 index 438d0ac..0000000 --- a/src/runtime/core/components/icon/Delete.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/runtime/core/components/icon/ImageBlock.vue b/src/runtime/core/components/icon/ImageBlock.vue deleted file mode 100644 index ed18535..0000000 --- a/src/runtime/core/components/icon/ImageBlock.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/runtime/core/components/icon/LinkPath.vue b/src/runtime/core/components/icon/LinkPath.vue deleted file mode 100644 index 1b574b6..0000000 --- a/src/runtime/core/components/icon/LinkPath.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/OlBlock.vue b/src/runtime/core/components/icon/OlBlock.vue deleted file mode 100644 index 7b4c31d..0000000 --- a/src/runtime/core/components/icon/OlBlock.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/QuotationBlock.vue b/src/runtime/core/components/icon/QuotationBlock.vue deleted file mode 100644 index fb837f5..0000000 --- a/src/runtime/core/components/icon/QuotationBlock.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/core/components/icon/TableBlock.vue b/src/runtime/core/components/icon/TableBlock.vue deleted file mode 100644 index 6a0311d..0000000 --- a/src/runtime/core/components/icon/TableBlock.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/runtime/core/components/icon/TextBlock.vue b/src/runtime/core/components/icon/TextBlock.vue deleted file mode 100644 index 0dbdcb5..0000000 --- a/src/runtime/core/components/icon/TextBlock.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/runtime/core/components/icon/UlBlock.vue b/src/runtime/core/components/icon/UlBlock.vue deleted file mode 100644 index c1b8239..0000000 --- a/src/runtime/core/components/icon/UlBlock.vue +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/runtime/shared/components/DragonEditor.ts b/src/runtime/shared/components/DragonEditor.ts new file mode 100644 index 0000000..e716917 --- /dev/null +++ b/src/runtime/shared/components/DragonEditor.ts @@ -0,0 +1,69 @@ +// default +import { h, defineComponent, ref } from "vue"; +import { createBlock, getClipboardData, getCursor } from "../../core/utils"; +import type { editorOptions, editorMenu, editorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index"; + +// style +import "../../core/style/common.css"; + +// components +import SvgIcon from "../../core/components/SvgIcon"; +import textBlock from "../../core/components/editor/TextBlock.vue"; +import imageBlock from "../../core/components/editor/ImageBlock.vue"; +import olBlock from "../../core/components/editor/OlBlock.vue"; +import ulBlock from "../../core/components/editor/UlBlock.vue"; + +export default defineComponent({ + name: "DragonEditor", + props: ["modelValue", "option"], + emits: ["update:modelValue"], + setup: ( + props: { + readonly modelValue: editorContentType; + readonly option?: editorOptions; + }, + ctx + ) => { + const modelValue = ref([]); + const option = ref({ + blockMenu: ["text", "ol", "ul"], + // blockMenu: ["text", "ol", "ul", "table", "quotation"], // TODO : 다른 블럭 만들기 + }); + + if (props.modelValue) { + modelValue.value = props.modelValue; + } + + if (props.option !== undefined) { + option.value = Object.assign(option.value, props.option); + } + + const testNode = h("div", null, "hellow"); + testNode.type = "p"; + console.log("testNode", testNode); + + function addImageBlock({ src, width, height, webp, caption }: { src: string; width: number; height: number; webp: boolean; caption?: string }) { + console.log("addImage"); + // addBlockLocal({ + // name: "image", + // value: { + // src: src, + // width: width, + // height: height, + // webp: webp, + // caption: caption, + // }, + // }); + } + + ctx.expose({ addImageBlock }); + + return () => + h("div", { + class: ["dragon-editor"], + onPaste: () => { + console.log("test"); + }, + }); + }, +}); From 531b4441ef2586f7eb7c98478f5cd970d4a48a37 Mon Sep 17 00:00:00 2001 From: lovefield Date: Fri, 20 Oct 2023 10:54:38 +0900 Subject: [PATCH 2/5] feat[hObject]: change viewer file --- playground/pages/index.vue | 4 +- src/module.ts | 2 +- .../core/components/editor/ImageBlock.vue | 10 +- .../core/components/editor/OlBlock.vue | 10 +- .../core/components/editor/TextBlock.vue | 10 +- .../core/components/editor/UlBlock.vue | 10 +- src/runtime/core/utils/convertor.ts | 56 --------- src/runtime/core/utils/index.ts | 13 +-- src/runtime/shared/components/DragonEditor.ts | 13 +-- .../shared/components/DragonEditor.vue | 20 ++-- .../shared/components/DragonEditorViewer.ts | 110 ++++++++++++++++++ .../shared/components/DragonEditorViewer.vue | 16 --- src/types/index.ts | 12 +- 13 files changed, 161 insertions(+), 125 deletions(-) delete mode 100644 src/runtime/core/utils/convertor.ts create mode 100644 src/runtime/shared/components/DragonEditorViewer.ts delete mode 100644 src/runtime/shared/components/DragonEditorViewer.vue diff --git a/playground/pages/index.vue b/playground/pages/index.vue index a95ce0f..457a012 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -32,12 +32,12 @@ const option = { customBlockMenu: [ { name: "Image", - icon: "imageBlock", + icon: "ImageBlock", action: addImage, }, { name: "Image", - icon: "imageBlock", + icon: "ImageBlock", action: addImage2, }, ], diff --git a/src/module.ts b/src/module.ts index e9ee432..17c3584 100644 --- a/src/module.ts +++ b/src/module.ts @@ -24,7 +24,7 @@ export default defineNuxtModule({ addComponent({ name: 'DragonEditorViewer', - filePath: resolver.resolve('./runtime/shared/components/DragonEditorViewer') + filePath: resolver.resolve('./runtime/shared/components/DragonEditorViewer.ts') }); } }) diff --git a/src/runtime/core/components/editor/ImageBlock.vue b/src/runtime/core/components/editor/ImageBlock.vue index aea5e49..124a782 100644 --- a/src/runtime/core/components/editor/ImageBlock.vue +++ b/src/runtime/core/components/editor/ImageBlock.vue @@ -23,11 +23,11 @@ // @ts-ignore import { ref, unref } from "#imports"; import { keyboardEvent, pasteText, styleSettings } from "../../utils/index"; -import { imageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index"; +import { ImageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index"; const $block = ref(); const $caption = ref(); -const data = ref({ +const data = ref({ type: "", id: "", classList: [], @@ -37,14 +37,14 @@ const data = ref({ webp: false, caption: "", }); -const props = defineProps<{ modelValue: imageBlock; cursorData: cursorSelection }>(); +const props = defineProps<{ modelValue: ImageBlock; cursorData: cursorSelection }>(); const emit = defineEmits<{ - (e: "update:modelValue", modelValue: imageBlock): void; + (e: "update:modelValue", modelValue: ImageBlock): void; (e: "addBlock", name: string): void; (e: "deleteBlockLocal", index?: number): void; }>(); -data.value = unref(props.modelValue) as imageBlock; +data.value = unref(props.modelValue) as ImageBlock; /** * 내부 상수 diff --git a/src/runtime/core/components/editor/OlBlock.vue b/src/runtime/core/components/editor/OlBlock.vue index b78ea6e..8c52440 100644 --- a/src/runtime/core/components/editor/OlBlock.vue +++ b/src/runtime/core/components/editor/OlBlock.vue @@ -7,14 +7,14 @@ - - diff --git a/src/types/index.ts b/src/types/index.ts index 0a34b5d..d2ebda3 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -24,12 +24,12 @@ export interface editorOptions { customStyleMenu?: userStyleMenu[]; } -export type allBlock = textBlock | imageBlock | listBlock | otherBlock; +export type allBlock = TextBlock | ImageBlock | ListBlock | OtherBlock; -export type editorContentType = allBlock[]; +export type EditorContentType = allBlock[]; // Block types -export interface textBlock { +export interface TextBlock { type: string; id: string; classList: string[]; @@ -41,7 +41,7 @@ export interface commentBlock { content: string; } -export interface imageBlock { +export interface ImageBlock { type: string; id: string; classList: string[]; @@ -56,14 +56,14 @@ export interface liItem { content: string; } -export interface listBlock { +export interface ListBlock { type: string; id: string; classList: string[]; childList: liItem[]; } -export interface otherBlock { +export interface OtherBlock { type: string; innerHTML: string; } From fbf4979ccebbf4ce8ade633fc3df7254bbcf5357 Mon Sep 17 00:00:00 2001 From: lovefield Date: Fri, 20 Oct 2023 17:56:31 +0900 Subject: [PATCH 3/5] feat[hObject]: convert code --- README.md | 10 +- playground/pages/index.vue | 35 ++- playground/pages/viewer.vue | 49 +++- src/runtime/core/style/common.css | 2 +- src/runtime/core/utils/converter.ts | 105 ++++++++ src/runtime/core/utils/global.ts | 101 +++++++ src/runtime/core/utils/index.ts | 105 +------- src/runtime/core/utils/ui.ts | 40 +++ src/runtime/shared/components/DragonEditor.ts | 250 +++++++++++++++++- .../shared/components/DragonEditorViewer.ts | 101 +------ src/types/index.ts | 4 +- style/index.scss | 3 +- 12 files changed, 564 insertions(+), 241 deletions(-) create mode 100644 src/runtime/core/utils/converter.ts create mode 100644 src/runtime/core/utils/global.ts create mode 100644 src/runtime/core/utils/ui.ts diff --git a/README.md b/README.md index 431df26..4eda4d7 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ editor.value.updateBlockData(); editor.value.focus(); ``` -### 뷰어 +### Viewer ```vue @@ -130,10 +130,16 @@ editor.value.focus(); ``` +#### Props + +- content : This props is must be Array in Editor data. +- mediaURL (Option) : This props is pre URL in Media. + +