diff --git a/oldfile/bun.lockb b/oldfile/bun.lockb deleted file mode 100755 index 3cb2ef6..0000000 Binary files a/oldfile/bun.lockb and /dev/null differ diff --git a/oldfile/index.html b/oldfile/index.html deleted file mode 100644 index 05d3aa2..0000000 --- a/oldfile/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - Dragon Editor - - - -
-
-
- - - diff --git a/oldfile/src/main.ts b/oldfile/src/main.ts deleted file mode 100644 index 9693e3b..0000000 --- a/oldfile/src/main.ts +++ /dev/null @@ -1,35 +0,0 @@ -import "./style/index.scss"; -import "./types.d.ts"; -import EditorInit from "./utils/init"; - -// 기본 에디터 함수 -export function DragonEditor(selector: string, option?: DEditorOption): any | null { - // 첫 실행시 환경 확인 - if (window === undefined) { - console.error("[Dragon Editor] This environment is not client. Please using client environment."); - return null; - } - - const $element = document.querySelector(selector); - - if ($element === null) { - console.error("[Dragon Editor] Didn't find element."); - return null; - } - - if ($element.tagName !== "DIV") { - console.error("[Dragon Editor] Please use div element."); - return null; - } - - const editor = new EditorInit($element as HTMLDivElement, option); - - return { - addImageBlock: (data: DEImageData) => { - - }, - }; -} - -// 데이터 컨버트용 함수 -export function ConvertDataToView(data: any[]) {} diff --git a/oldfile/src/style/block.scss b/oldfile/src/style/block.scss deleted file mode 100644 index e1945cb..0000000 --- a/oldfile/src/style/block.scss +++ /dev/null @@ -1,83 +0,0 @@ -@mixin BlockStyle { - // 블럭 뎁스 - .de-block { - @for $i from 1 through 5 { - &[data-depth="#{$i}"] { - padding-left: $i * 30px; - } - } - } - - /** - * 블럭 스타일 - */ - - // 텍스트 블럭 - .de-text-block { - min-height: 1.6em; - outline: 0; - - &:empty:hover::before, - &:empty:focus::before { - display: inline; - content: "Type a paragraph"; - color: #ccc; - cursor: text; - } - } - - // 해딩 블럭 - .de-heading-block { - outline: 0; - - &[data-level="1"] { - font-size: 2em; - min-height: 2em; - } - - &[data-level="2"] { - font-size: 1.5em; - min-height: 1.5em; - } - - &[data-level="3"] { - font-size: 1.17em; - min-height: 1.17em; - } - - &:empty:hover::before, - &:empty:focus::before { - display: inline; - content: "Type a Heading"; - color: #ccc; - cursor: text; - } - } - - // 리스트 블럭 - .de-list-block { - display: flex; - flex-direction: column; - row-gap: 4px; - padding-left: 24px; - list-style: disc; - - .de-item { - min-height: 1.6em; - outline: 0; - list-style: inherit; - - &:empty:hover::before, - &:empty:focus::before { - display: inline; - content: "Type a list item"; - color: #ccc; - cursor: text; - } - } - } - - ol.de-list-block { - list-style: decimal; - } -} diff --git a/oldfile/src/style/controlbar.scss b/oldfile/src/style/controlbar.scss deleted file mode 100644 index e177459..0000000 --- a/oldfile/src/style/controlbar.scss +++ /dev/null @@ -1,48 +0,0 @@ -@mixin Controlbar { - .de-control-bar { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 38px; - border-bottom: 1px solid #ccc; - - .de-menu { - min-width: 38px; - height: 38px; - padding: 0 8px; - border-right: 1px solid #ccc; - box-sizing: border-box; - - &.--lastchild { - border-right: 0; - } - } - - .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; - - &.--active { - display: block; - } - - .de-list { - display: flex; - flex-direction: column; - gap: 5px; - padding: 5px; - } - - .de-add-block { - line-height: 1.6; - } - } - } -} diff --git a/oldfile/src/style/index.scss b/oldfile/src/style/index.scss deleted file mode 100644 index f8440dd..0000000 --- a/oldfile/src/style/index.scss +++ /dev/null @@ -1,80 +0,0 @@ -@import "./controlbar.scss"; -@import "./block.scss"; - -.de-wrapper { - background: #fff; - font-size: 14px; - line-height: 1.6; - - // reset css - & { - h1, - h2, - h3, - h4, - h5, - h6, - p, - blockquote, - pre, - dl, - dd, - ol, - ul, - fieldset, - legend, - figure, - menu { - margin: 0; - padding: 0; - border: 0; - } - - table, - th, - td { - border-spacing: 0; - border-collapse: collapse; - } - - ol, - ul, - li { - list-style: none; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 1em; - font-weight: normal; - } - - button { - padding: 0; - background: transparent; - border: 0; - border-radius: 0; - outline: 0; - cursor: pointer; - } - } - - &.de-editor { - position: relative; - padding-top: 39px; - } - - &.de-viewer, - .de-block-list { - display: grid; - gap: 4px; - padding: 20px; - } - - @include Controlbar; - @include BlockStyle; -} diff --git a/oldfile/src/types.d.ts b/oldfile/src/types.d.ts deleted file mode 100644 index 6064930..0000000 --- a/oldfile/src/types.d.ts +++ /dev/null @@ -1,63 +0,0 @@ -type DEMode = "view" | "edit" | "command"; - -interface DEditorOption { - mode?: DEMode; - blockList?: BlockType[]; - message?: DEMessage; -} - -type DEditorData = DEditorBlockType[]; - -type BlockType = "text" | "orderedList" | "unorderedList" | "heading1" | "heading2" | "heading3" | "ul" | "ol"; - -interface DEditorBlockDefaultType { - type: BlockType; - classList: string[]; -} - -type DEditorBlockType = DEditorTextBlock | DEditorHeadingBlock; - -interface DEditorTextBlock extends DEditorBlockDefaultType { - content: string; -} - -interface DEditorHeadingBlock extends DEditorBlockDefaultType { - level: number; - id: string; - content: string; -} - -// 부수적 타입 -interface DEditorCursor { - type: "Range" | "Caret" | "None"; - startNode: Node; - startOffset: number; - endNode: Node; - endOffset: number; -} - -interface DEBlockListItem { - name: string; - value: BlockType; -} - -interface DEArrangeCursorData { - startNode: Node; - startNodeIdx: number; - startOffset: number; - endNode: Node; - endNodeIdx: number; - endOffset: number; -} - -// 에디터에서 사용하는 모든 메세지 -interface DEMessage { - linkTextNoStyle: string; -} - -// 유저가 넣는 이미지 데이터 -interface DEImageData { - url: string; - width: number; - height: number; -} diff --git a/oldfile/src/utils/block.ts b/oldfile/src/utils/block.ts deleted file mode 100644 index d43de09..0000000 --- a/oldfile/src/utils/block.ts +++ /dev/null @@ -1,80 +0,0 @@ -import type EditorInit from "./init"; -import { generateId } from "./data"; - -export function createTextBlock(store: EditorInit): HTMLParagraphElement { - const $paragraph = document.createElement("p"); - - $paragraph.classList.add("de-block", "de-text-block"); - - if (store.mode === "edit") { - $paragraph.setAttribute("contenteditable", "true"); - } - - return $paragraph; -} - -// 해딩 블럭 생성 -// TODO : 엘리먼트 방식으로 변경 -export function createHeadingBlock(store: EditorInit, type: string): HTMLElement { - const level: number = 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 (store.mode === "edit") { - $headingBlock.setAttribute("contenteditable", "true"); - } - - return $headingBlock; -} - -// 리스트 블럭 생성 -// TODO : 엘리먼트 방식으로 변경 -export function createListBlock(store: EditorInit, type: string): HTMLElement { - const $block = document.createElement(type); - - $block.classList.add("de-block", "de-list-block"); - $block.appendChild(createListItemBlock(store)); - - return $block; -} - -// 리스트 아이템 블럭 생성 -export function createListItemBlock(store: EditorInit): HTMLLIElement { - const $li = document.createElement("li"); - - $li.classList.add("de-item"); - - if (store.mode === "edit") { - $li.setAttribute("contenteditable", "true"); - } - - return $li; -} - -// 블럭 타입 추출 -export function getBlockType(element: HTMLElement) { - const $block = element.closest(".de-block"); - let typeName: string; - - 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, - }; -} diff --git a/oldfile/src/utils/controlbarEvent.ts b/oldfile/src/utils/controlbarEvent.ts deleted file mode 100644 index 6194920..0000000 --- a/oldfile/src/utils/controlbarEvent.ts +++ /dev/null @@ -1,107 +0,0 @@ -import type EditorInit from "./init"; -import { findScrollingElement } from "./element"; -import { createTextBlock, createHeadingBlock, createListBlock } from "./block"; -import { setStyle } from "./style"; - -// 컨트롤 바 이벤트 -export function setControlbarEvetn(store: EditorInit) { - const $controlBar = store.wrap.querySelector(".de-control-bar"); - const $scrollElement = findScrollingElement(store.wrap.parentElement); - - // 상단 고정 이벤트 - $scrollElement.addEventListener("scroll", function () { - const wrapRect: DOMRect = store.wrap.getBoundingClientRect(); - const $target = store.wrap.querySelector(".de-control-bar") as HTMLElement; - let wrapRealTop: number = 0; - let scrollY: number = 0; - let constrolBarTop: number = 0; - - if (this === window) { - scrollY = window.scrollY; - wrapRealTop = wrapRect.top + window.scrollY; - } else { - const thisRect: DOMRect = this.getBoundingClientRect(); - const thisRealTop: number = thisRect.top + window.scrollY; - const thisWrapRealTop: number = wrapRect.top + window.scrollY + this.scrollTop; - - wrapRealTop = thisWrapRealTop - thisRealTop; - scrollY = this.scrollTop; - } - - constrolBarTop = scrollY - wrapRealTop; - - if (constrolBarTop < 10) { - constrolBarTop = 0; - } - - $target.style.top = `${constrolBarTop}px`; - }); - - // 메뉴 추가 리스트 토글 이벤트 - $controlBar.querySelector(".de-menu-add").addEventListener("click", function () { - $controlBar.querySelector(".de-block-menu-area").classList.toggle("--active"); - }); - - document.addEventListener("click", function (e: MouseEvent) { - if ((e.target as HTMLElement).closest(".de-menu-add") === null && (e.target as HTMLElement).closest(".de-block-menu-area") === null) { - $controlBar.querySelector(".de-block-menu-area").classList.remove("--active"); - } - }); - - // 메뉴 추가 이벤트 - $controlBar.querySelectorAll(".de-add-block").forEach(($btn) => { - $btn.addEventListener("click", function () { - const type = this.dataset["type"]; - let blockStructure: HTMLElement; - - switch (type) { - case "text": - blockStructure = createTextBlock(store); - break; - case "heading1": - case "heading2": - case "heading3": - blockStructure = createHeadingBlock(store, type); - break; - case "ul": - case "ol": - blockStructure = createListBlock(store, type); - break; - } - - if (store.cursorData === null) { - store.wrap.querySelector(".de-block-list").insertAdjacentElement("beforeend", blockStructure); - } else { - let $target = store.cursorData.startNode; - - if ($target.constructor.name === "Text") { - $target = $target.parentNode; - } - - const $block = ($target as HTMLElement).closest(".de-block"); - - $block.insertAdjacentElement("afterend", blockStructure); - } - - $controlBar.querySelector(".de-block-menu-area").classList.remove("--active"); - - switch (type) { - case "ul": - case "ol": - (blockStructure.childNodes[0] as HTMLElement).focus(); - break; - default: - blockStructure.focus(); - } - }); - }); - - // 스타일 이벤트 - $controlBar.querySelectorAll(".de-add-decoration").forEach(($btn) => { - $btn.addEventListener("click", function () { - const style = this.dataset["style"]; - - setStyle(style, store); - }); - }); -} diff --git a/oldfile/src/utils/cursor.ts b/oldfile/src/utils/cursor.ts deleted file mode 100644 index 4c67623..0000000 --- a/oldfile/src/utils/cursor.ts +++ /dev/null @@ -1,157 +0,0 @@ -import type EditorInit from "./init"; -import { getParentElementIfNodeIsText } from "./element"; - -export function setCursorData(store: EditorInit) { - const selection = window.getSelection(); - - if (selection.type !== "None") { - store.cursorData = { - type: selection.type as "Range" | "Caret", - startNode: selection.anchorNode, - startOffset: selection.anchorOffset, - endNode: selection.focusNode, - endOffset: selection.focusOffset, - }; - } -} - -export function setCursor($target: Node, startIdx: number) { - 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: Element, $endTarget: Element, startIdx: number, endIdx: number) { - 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: EditorInit) { - setCursorData(store); - - if (store.cursorData.startNode !== store.cursorData.endNode || store.cursorData.startOffset !== store.cursorData.endOffset) { - // setRangeCursor(); - } else { - if (store.cursorData.startNode.hasChildNodes() === true) { - setCursor(store.cursorData.startNode.childNodes[store.cursorData.startOffset] as Element, 0); - } else { - setCursor(store.cursorData.startNode as Element, store.cursorData.startOffset); - } - } -} - -// 엘리먼트 기준 커서 데이터 정렬 -export function soltingCursorDataOnElement(cursorData: DEditorCursor, $element: HTMLElement): DEArrangeCursorData { - 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: startNode, - startNodeIdx: startIdx, - startOffset: startOffset, - endNode: endNode, - endNodeIdx: endIdx, - endOffset: endOffset, - }; -} diff --git a/oldfile/src/utils/data.ts b/oldfile/src/utils/data.ts deleted file mode 100644 index 90fbec2..0000000 --- a/oldfile/src/utils/data.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type EditorInit from "./init"; -import defaultMessage from "./message"; - -// 난수 아이디 생성 -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; -} - -export function setEditorOption(store: EditorInit, option: DEditorOption = {}) { - const defaultBlockList: DEBlockListItem[] = [ - { - name: "Text", - value: "text", - }, - { - name: "Heading-1", - value: "heading1", - }, - { - name: "Heading-2", - value: "heading2", - }, - { - name: "Heading-3", - value: "heading3", - }, - { - name: "Unodered List", - value: "ul", - }, - { - name: "Odered List", - value: "ol", - }, - ]; - - store.mode = option.mode ?? "edit"; - store.message = option.message ?? defaultMessage; - - if (option.blockList !== undefined) { - let listArray: DEBlockListItem[] = []; - - option.blockList.forEach((value: string) => { - const target = defaultBlockList.find((item) => item.value === value); - - if (target !== undefined) { - listArray.push(target); - } - }); - - store.blockList = listArray; - } else { - store.blockList = defaultBlockList; - } -} diff --git a/oldfile/src/utils/element.ts b/oldfile/src/utils/element.ts deleted file mode 100644 index e7e3823..0000000 --- a/oldfile/src/utils/element.ts +++ /dev/null @@ -1,44 +0,0 @@ -// 스크롤 가능한 요소 찾기 -export function findScrollingElement($target: HTMLElement): HTMLElement | Window { - if ($target.scrollHeight > $target.clientHeight) { - return $target; - } else { - if ($target.parentElement.tagName === "BODY") { - return window; - } else { - return findScrollingElement($target.parentElement); - } - } -} - -// 에디팅 요소 찾기 -export function findContentEditableElement($target: Node): HTMLElement | null { - if ($target.constructor.name === "Text") { - $target = $target.parentNode; - } - - const $baseElement = $target as HTMLElement; - - if ($baseElement.parentElement.tagName === "BODY") { - return null; - } else { - if ($baseElement.getAttribute("contentEditable") === null) { - return findContentEditableElement($baseElement.parentNode); - } else { - return $baseElement; - } - } -} - -// 타겟이 텍스트 인경우 상위 엘리먼트 추출 -export function getParentElementIfNodeIsText($target: Node, $block: HTMLElement): Node { - if ($target.constructor.name === "Text") { - const $parent = $target.parentElement; - - if ($parent !== $block) { - $target = $parent; - } - } - - return $target as Node; -} diff --git a/oldfile/src/utils/event.ts b/oldfile/src/utils/event.ts deleted file mode 100644 index 1a96900..0000000 --- a/oldfile/src/utils/event.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type EditorInit from "./init"; -import { elementKeyEvent, elementKeyAfterEvent, hotKeyEvent, copyEvent, pasteEvent } from "./keyboardEvent"; -import { setCursorData } from "./cursor"; -import { setControlbarEvetn } from "./controlbarEvent"; -import { findContentEditableElement } from "./element"; - -export function setEvent(store: EditorInit) { - setContentEditorbleElementEvent(store); - setControlbarEvetn(store); - - // 마우스 조작시 커서 데이터 업데이트 - store.wrap.addEventListener("mouseup", function (e: MouseEvent) { - const originalCursorData = store.cursorData; - - setCursorData(store); - - if (store.cursorData !== null && findContentEditableElement(store.cursorData.startNode) === null) { - // 비정상 커서 값일 경우 초기화 - store.cursorData = originalCursorData; - } - // TODO : 스타일 값 추출 - }); -} - -// 에디팅 요소 이벤트 -function setContentEditorbleElementEvent(store: EditorInit) { - // 키보드 이벤트 - store.wrap.addEventListener("keydown", function (e: KeyboardEvent) { - if ((e.target as HTMLElement).isContentEditable === true) { - elementKeyEvent(e, store); - hotKeyEvent(e, store); - // TODO : 스타일 값 추출 - } - }); - - // 복사 이벤트 - store.wrap.addEventListener("copy", function (e: KeyboardEvent) { - e.preventDefault(); - copyEvent(e, store); - }); - - // 붙여넣기 이벤트 - store.wrap.addEventListener("paste", function (e: KeyboardEvent) { - e.preventDefault(); - pasteEvent(e, store); - }); -} diff --git a/oldfile/src/utils/init.ts b/oldfile/src/utils/init.ts deleted file mode 100644 index d395771..0000000 --- a/oldfile/src/utils/init.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { setEditorOption } from "./data"; -import { setLayout } from "./layout"; -import { setEvent } from "./event"; - -export default class EditorInit { - wrap: HTMLDivElement; - mode: DEMode = "edit"; - cursorData: DEditorCursor | null = null; - blockList: DEBlockListItem[] = []; - message: DEMessage; - - constructor($el: HTMLDivElement, option?: DEditorOption) { - const self = this; - - self.wrap = $el; - setEditorOption(self, option); - setLayout(self); - - if (self.mode === "edit") { - setEvent(self); - } - } -} diff --git a/oldfile/src/utils/keyboardEvent.ts b/oldfile/src/utils/keyboardEvent.ts deleted file mode 100644 index 9d965b7..0000000 --- a/oldfile/src/utils/keyboardEvent.ts +++ /dev/null @@ -1,1013 +0,0 @@ -import type EditorInit from "./init"; -import { getBlockType, createTextBlock, createListItemBlock } from "./block"; -import { setCursorData, setCursor, clenupCursor, soltingCursorDataOnElement } from "./cursor"; -import { getParentElementIfNodeIsText, findContentEditableElement } from "./element"; -import { setStyle } from "./style"; - -let preKeyEvent: KeyboardEvent; - -// 에디팅 요소 키 이벤트 -let ketEventCount: number = 0; -export function elementKeyEvent(e: KeyboardEvent, store: EditorInit) { - setCursorData(store); - preKeyEvent = e; - - switch (e.code) { - case "Enter": - e.preventDefault(); - - if (ketEventCount === 0) { - // 문자 조합에 의한 중복 제거 처리 - clenupCursor(store); - - // 커서 정렬후 딜레이 - setTimeout(() => { - if (e.shiftKey === true) { - elementShiftEnterEvent(e, store); - } else { - elementEnterEvent(e, store); - } - }); - } - - // 문자 조합에 의한 중복 이벤트 막는 처리 - ketEventCount += 1; - setTimeout(() => { - ketEventCount = 0; - }, 150); - break; - case "Backspace": - elementBackspaceEvent(e, store); - break; - case "Tab": - e.preventDefault(); - - if (ketEventCount === 0) { - // 문자 조합에 의한 중복 제거 처리 - clenupCursor(store); - - // 커서 정렬후 딜레이 - setTimeout(() => { - elementTabEvent(e, store); - }); - } - - // 문자 조합에 의한 중복 이벤트 막는 처리 - ketEventCount += 1; - setTimeout(() => { - ketEventCount = 0; - }, 150); - break; - case "Space": - console.log("space"); - break; - case "ArrowUp": - moveToBlockEvent(e, store, "up"); - break; - case "ArrowDown": - moveToBlockEvent(e, store, "down"); - break; - // default: - // console.log("e.code", e.code); - } -} - -// 엔터 이벤트 -function elementEnterEvent(e: KeyboardEvent, store: EditorInit) { - const { $element, type } = getBlockType(e.target as HTMLElement); - - switch (type) { - case "text": - case "heading": - defaultBlockEnterEvent(store, $element); - break; - case "list": - listBlockEnterEvent(e, store, $element); - break; - default: - console.log("// TODO : 다른 타입 블럭 엔터 이벤트 :", type); - } -} - -// 기본 블럭 엔터 이벤트 -function defaultBlockEnterEvent(store: EditorInit, $element: Element) { - const $textBlock = $element as HTMLElement; - - if (store.cursorData.type === "Caret") { - // 단일 커서인경우 - if ($textBlock.textContent === "") { - // 텍스트가 없는 경우 - if ($textBlock.hasChildNodes() === false) { - // 자식 노드가 없는 경우 - const $newTextBlock = createTextBlock(store); - - $textBlock.insertAdjacentElement("afterend", $newTextBlock); - $newTextBlock.focus(); - } else { - // br로 이루어진 경우 - let preStructure: HTMLBRElement[] = []; - let nextStructure: HTMLBRElement[] = []; - - $textBlock.childNodes.forEach((_, i) => { - const $br = document.createElement("br"); - - if (store.cursorData.startOffset < i) { - preStructure.push($br); - } else { - nextStructure.push($br); - } - }); - - $textBlock.replaceChildren(...preStructure); - $textBlock.insertAdjacentElement("afterend", createTextBlock(store)); - - const $nextBlock = $textBlock.nextElementSibling as HTMLParagraphElement; - - if (nextStructure.length === 0) { - $nextBlock.focus(); - } else { - if (nextStructure.length === 1) { - nextStructure.push(document.createElement("br")); - } - - $nextBlock.replaceChildren(...nextStructure); - setCursor(nextStructure[0], 0); - } - } - } else { - // 자식 노드가 있는 경우 - const childNodeList = [...$element.childNodes]; - const $targetNode = getParentElementIfNodeIsText(store.cursorData.startNode, $textBlock); - const preStructure: Node[] = []; - const nextStructure: Node[] = []; - let nodeIdx = -1; - - // 노드 위치 파악 - for (let i = 0; childNodeList.length > i; i += 1) { - if (childNodeList[i] === $targetNode) { - nodeIdx = i; - break; - } - } - - // 구조 정리 - childNodeList.forEach((node: ChildNode, i: number) => { - if (nodeIdx < i) { - nextStructure.push(node); - } else if (nodeIdx > i) { - preStructure.push(node); - } else if (nodeIdx === i) { - if (node.constructor.name === "Text") { - const text = node.textContent; - const preText = document.createTextNode(text.slice(0, store.cursorData.startOffset)); - const nextText = document.createTextNode(text.slice(store.cursorData.startOffset)); - - preStructure.push(preText); - nextStructure.push(nextText); - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent; - const preSpan = document.createElement("span"); - const nextSpan = document.createElement("span"); - - preSpan.classList.add(...originalClassList); - preSpan.textContent = text.slice(0, store.cursorData.startOffset); - preStructure.push(preSpan); - nextSpan.classList.add(...originalClassList); - nextSpan.textContent = text.slice(store.cursorData.startOffset); - nextStructure.push(nextSpan); - } - } - }); - - const $nextBlock = createTextBlock(store); - // 텍스트 블럭 삽입 - $textBlock.insertAdjacentElement("afterend", $nextBlock); - $textBlock.replaceChildren(...preStructure); - $nextBlock.replaceChildren(...nextStructure); - - // 커서 위치 지정 - if (nextStructure.length === 0) { - $nextBlock.focus(); - } else { - setCursor($nextBlock.childNodes[0], 0); - } - } - } else { - // 셀렉트 커서인경우 - const childNodeList = $textBlock.childNodes; - const cursorData = soltingCursorDataOnElement(store.cursorData, $textBlock); - const preStructure: Node[] = []; - const nextStructure: Node[] = []; - - if (cursorData.startNodeIdx === cursorData.endNodeIdx) { - // 같은 노드의 경우 - childNodeList.forEach((node: ChildNode, i: number) => { - if (cursorData.startNodeIdx > i) { - preStructure.push(node); - } else if (cursorData.endNodeIdx < i) { - nextStructure.push(node); - } else if (cursorData.startNodeIdx === i) { - if (node.constructor.name === "Text") { - const preText = node.textContent.slice(0, cursorData.startOffset); - const nextText = node.textContent.slice(cursorData.endOffset); - - if (preText !== "") { - const textNode = document.createTextNode(preText); - - preStructure.push(textNode); - } - - if (nextText !== "") { - const textNode = document.createTextNode(nextText); - - nextStructure.push(textNode); - } - } else { - const originalClassList = [...(node as Element).classList]; - const preText = node.textContent.slice(0, cursorData.startOffset); - const nextText = node.textContent.slice(cursorData.endOffset); - - if (preText !== "") { - const $span = document.createElement("span"); - - $span.classList.add(...originalClassList); - $span.textContent = preText; - preStructure.push($span); - } - - if (nextText !== "") { - const $span = document.createElement("span"); - - $span.classList.add(...originalClassList); - $span.textContent = nextText; - nextStructure.push($span); - } - } - } - }); - } else { - // 다른 노드의 경우 - childNodeList.forEach((node: ChildNode, i: number) => { - if (cursorData.startNodeIdx > i) { - preStructure.push(node); - } else if (cursorData.startNodeIdx === i) { - if (node.constructor.name === "Text") { - const text = node.textContent.slice(0, cursorData.startOffset); - - if (text !== "") { - const textNode = document.createTextNode(text); - - preStructure.push(textNode); - } - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent.slice(0, cursorData.startOffset); - - if (text !== "") { - const $span = document.createElement("span"); - - $span.classList.add(...originalClassList); - $span.textContent = text; - preStructure.push($span); - } - } - } - - if (cursorData.endNodeIdx < i) { - nextStructure.push(node); - } else if (cursorData.endNodeIdx === i) { - if (node.constructor.name === "Text") { - const text = node.textContent.slice(cursorData.endOffset); - - if (text !== "") { - const textNode = document.createTextNode(text); - - nextStructure.push(textNode); - } - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent.slice(cursorData.endOffset); - const $span = document.createElement("span"); - - if (text !== "") { - $span.classList.add(...originalClassList); - $span.textContent = text; - nextStructure.push($span); - } - } - } - }); - } - - const $nextBlock = createTextBlock(store); - - // 텍스트 블럭 삽입 - $textBlock.insertAdjacentElement("afterend", $nextBlock); - $textBlock.replaceChildren(...preStructure); - $nextBlock.replaceChildren(...nextStructure); - - // 커서 위치 지정 - if (nextStructure.length === 0) { - $nextBlock.focus(); - } else { - setCursor($nextBlock.childNodes[0], 0); - } - } -} - -// 리스트 블럭 엔터 이벤트 -function listBlockEnterEvent(event: KeyboardEvent, store: EditorInit, $element: Element) { - const $listBlock = $element as HTMLElement; - const $editableElement = findContentEditableElement(event.target as Node) as HTMLLIElement; - const liList = $listBlock.querySelectorAll(".de-item"); - let liIdx = -1; - - for (let i = 0; liList.length > i; i += 1) { - if (liList[i] === $editableElement) { - liIdx = i; - break; - } - } - - if (store.cursorData.type === "Caret") { - // 단일 커서인경우 - if ($editableElement.textContent === "") { - // 텍스트가 없는 경우 - if (liList.length - 1 === liIdx) { - // 마지막 아이템인 경우 - const $textBlock = createTextBlock(store); - - $listBlock.insertAdjacentElement("afterend", $textBlock); - - if (liList.length === 1) { - $listBlock.remove(); - } else { - $editableElement.remove(); - } - - $textBlock.focus(); - } else { - // 마지막 아이템이 아닌 경우 - const $liBlock = createListItemBlock(store); - - $editableElement.insertAdjacentElement("afterend", $liBlock); - $liBlock.focus(); - } - } else { - // 텍스트가 있는 경우 - const childNodeList = $editableElement.childNodes; - const targetNode = getParentElementIfNodeIsText(store.cursorData.startNode, $editableElement); - const preStructure: Node[] = []; - const nextStructure: Node[] = []; - let nodeIdx = -1; - - // 노드 위치 파악 - for (let i = 0; childNodeList.length > i; i += 1) { - if (childNodeList[i] === targetNode) { - nodeIdx = i; - break; - } - } - - // 구조 정리 - childNodeList.forEach((node: ChildNode, i: number) => { - if (nodeIdx < i) { - nextStructure.push(node); - } else if (nodeIdx > i) { - preStructure.push(node); - } else if (nodeIdx === i) { - if (node.constructor.name === "Text") { - const preText = node.textContent.slice(0, store.cursorData.startOffset); - const nextText = node.textContent.slice(store.cursorData.endOffset); - - if (preText !== "") { - preStructure.push(document.createTextNode(preText)); - } - - if (nextText !== "") { - nextStructure.push(document.createTextNode(nextText)); - } - } else { - const originalClassList = [...(node as Element).classList]; - const preText = node.textContent.slice(0, store.cursorData.startOffset); - const nextText = node.textContent.slice(store.cursorData.endOffset); - - if (preText !== "") { - const $span = document.createElement("span"); - - $span.textContent = preText; - $span.classList.add(...originalClassList); - preStructure.push($span); - } - - if (nextText !== "") { - const $span = document.createElement("span"); - - $span.textContent = nextText; - $span.classList.add(...originalClassList); - nextStructure.push($span); - } - } - } - }); - - const $liBlock = createListItemBlock(store); - - // 리스트 블럭 삽입 - $editableElement.insertAdjacentElement("afterend", $liBlock); - $editableElement.replaceChildren(...preStructure); - $liBlock.replaceChildren(...nextStructure); - - // 커서 위치 지정 - if (nextStructure.length === 0) { - $liBlock.focus(); - } else { - setCursor($liBlock.childNodes[0], 0); - } - } - } else { - // 셀렉트 커서인 경우 - const childNodeList = $editableElement.childNodes; - const cursorData = soltingCursorDataOnElement(store.cursorData, $editableElement); - const preStructure: Node[] = []; - const nextStructure: Node[] = []; - - childNodeList.forEach((node: ChildNode, i: number) => { - if (cursorData.startNodeIdx > i) { - preStructure.push(node); - } else if (cursorData.startNodeIdx === i) { - if (node.constructor.name === "Text") { - const text = node.textContent.slice(0, cursorData.startOffset); - - if (text !== "") { - const $textNode = document.createTextNode(text); - - preStructure.push($textNode); - } - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent.slice(0, cursorData.startOffset); - - if (text !== "") { - const $span = document.createElement("span"); - - $span.classList.add(...originalClassList); - $span.textContent = text; - preStructure.push($span); - } - } - } - - if (cursorData.endNodeIdx < i) { - nextStructure.push(node); - } else if (cursorData.endNodeIdx === i) { - if (node.constructor.name === "Text") { - const text = node.textContent.slice(cursorData.endOffset); - - if (text !== "") { - const $textNode = document.createTextNode(text); - - nextStructure.push($textNode); - } - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent.slice(cursorData.endOffset); - - if (text !== "") { - const $span = document.createElement("span"); - - $span.classList.add(...originalClassList); - $span.textContent = text; - nextStructure.push($span); - } - } - } - }); - - const $liBlock = createListItemBlock(store); - - // 리스트 블럭 삽입 - $editableElement.insertAdjacentElement("afterend", $liBlock); - $editableElement.replaceChildren(...preStructure); - - // 커서 위치 지정 - if (nextStructure.length === 0) { - $liBlock.focus(); - } else { - $liBlock.replaceChildren(...nextStructure); - setCursor(nextStructure[0], 0); - } - } -} - -// 쉬프트 엔터 이벤트 -function elementShiftEnterEvent(e: KeyboardEvent, store: EditorInit) { - const { $element, type } = getBlockType(e.target as HTMLElement); - - switch (type) { - case "text": - case "heading": - defaultBlockShiftEnterEvent(store, $element); - break; - case "list": - // NOTE: 리스트 블럭은 쉬프트 엔터 비허용 - listBlockEnterEvent(e, store, $element); - break; - default: - console.log("// TODO : 다른 타입 블럭 쉬프트 이벤트 :", type); - } -} - -// 텍스트 블럭 쉬프트 엔터 이벤트 -// TODO : 엘리먼트 방식으로 변경 -function defaultBlockShiftEnterEvent(store: EditorInit, $element: Element) { - const $textBlock = $element as HTMLElement; - - if (store.cursorData.type === "Caret") { - // 단일 커서인경우 - if ($textBlock.textContent === "") { - if ($textBlock.hasChildNodes() === false) { - // 자식 노드가 없는 경우 - $textBlock.insertAdjacentHTML("beforeend", "

"); - setCursor($textBlock.childNodes[1] as Element, 0); - } else { - // br로만 이루어진 경우 - let $target = store.cursorData.startNode; - let childIdx = -1; - - if ($textBlock === $target) { - $target = $textBlock.childNodes[store.cursorData.startOffset]; - } - - for (let i = 0; $textBlock.childNodes.length > i; i += 1) { - if ($textBlock.childNodes[i] === $target) { - childIdx = i; - break; - } - } - - ($target as HTMLElement).insertAdjacentHTML("afterend", "
"); - setCursor($textBlock.childNodes[childIdx + 1] as Element, 0); - } - } else { - // 자식 노드가 있고 br로만 이루어지지 않은 경우 - const childList = $textBlock.childNodes; - let $target = store.cursorData.startNode; - let targetIdx = -1; - let structure: string = ""; - - if ($target.constructor.name === "Text") { - if ($target.parentNode !== $textBlock) { - $target = $target.parentNode; - } - } - - if ($textBlock === $target) { - $target = $textBlock.childNodes[store.cursorData.startOffset]; - } - - for (let i = 0; childList.length > i; i += 1) { - if (childList[i] === $target) { - targetIdx = i; - break; - } - } - - let curruntIdx = targetIdx; - childList.forEach((child, i) => { - if (i === targetIdx) { - const constructorName = child.constructor.name; - - if (constructorName === "Text") { - // 텍스트 노드인 경우 - structure += child.textContent.slice(0, store.cursorData.startOffset) + "
" + child.textContent.slice(store.cursorData.endOffset); - - if (child.nextSibling === null) { - // 다음 노드가 없는 경우 - if (child.textContent.slice(store.cursorData.endOffset) === "") { - // 뒷 문자가 없는 경우 - structure += `
`; - } - - if (child.textContent.slice(0, store.cursorData.startOffset) === "") { - // 앞 문자가 없는 경우 - curruntIdx -= 1; - } - } else { - // 다음 노드가 있는 경우 - if (child.textContent.slice(store.cursorData.endOffset) !== "" && child.textContent.slice(0, store.cursorData.startOffset) === "") { - // 뒷 문자가 있고 앞 문자가 없는 경우 - curruntIdx -= 1; - } - } - - curruntIdx += 1; - } else { - // 엘리먼트인 경우 - if (constructorName === "HTMLBRElement") { - // br 태그인 경우 (가장 첫 노드의 첫 커서 인경우) - structure += `

`; - } else { - // span 태그인 경우 - // TODO : 스타일 태그 분리 작업 - console.log("TODO: 스타일 태그 분리 작업"); - } - } - } else { - if (child.constructor.name === "Text") { - structure += child.textContent; - } else { - structure += (child as HTMLElement).outerHTML; - } - } - }); - - $textBlock.innerHTML = structure; - setCursor($textBlock.childNodes[curruntIdx + 1] as Element, 0); - } - } else { - // 셀렉트 커서인경우 - const childNodeList = $textBlock.childNodes; - let startTargetNode = store.cursorData.startNode; - let startNodeIdx: number = -1; - let startOffset: number = store.cursorData.startOffset; - let endTargetNode = store.cursorData.endNode; - let endNodeIdx: number = -1; - let endOffset: number = store.cursorData.endOffset; - let structure = ""; - - if (startTargetNode.constructor.name === "Text") { - if (startTargetNode.parentElement !== $textBlock) { - startTargetNode = startTargetNode.parentElement; - } - } - - if (endTargetNode.constructor.name === "Text") { - if (endTargetNode.parentElement !== $textBlock) { - endTargetNode = endTargetNode.parentElement; - } - } - - for (let i: number = 0; childNodeList.length > i; i += 1) { - if (startTargetNode === childNodeList[i]) { - startNodeIdx = i; - } - - if (endTargetNode === childNodeList[i]) { - endNodeIdx = i; - } - - if (startNodeIdx !== -1 && endNodeIdx !== -1) { - break; - } - } - - // 역 드레그 인 경우 정리 - if (startNodeIdx !== endNodeIdx) { - if (startNodeIdx > endNodeIdx) { - const originalEndNodeIdx: number = endNodeIdx; - const originalEndOffset: number = endOffset; - const originalStartNodeIdx: number = startNodeIdx; - const originalStartOffset: number = startOffset; - - startNodeIdx = originalEndNodeIdx; - startOffset = originalEndOffset; - endNodeIdx = originalStartNodeIdx; - endOffset = originalStartOffset; - } - } else { - if (startOffset > endOffset) { - const originalEndOffset: number = endOffset; - const originalStartOffset: number = startOffset; - - startOffset = originalEndOffset; - endOffset = originalStartOffset; - } - } - - childNodeList.forEach((node: ChildNode, i: number) => { - if (startNodeIdx > i) { - if (node.constructor.name === "Text") { - structure += node.textContent; - } else { - structure += (node as Element).outerHTML; - } - } else if (startNodeIdx === i) { - if (node.constructor.name === "Text") { - structure += node.textContent.slice(0, startOffset); - structure += `
`; - } else { - if ((node as HTMLElement).tagName === "BR") { - structure += `
`; - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent; - - structure += `${text.slice(0, startOffset)}
`; - } - } - - if (childNodeList.length === i) { - structure += `
`; - } - } - - if (endNodeIdx < i) { - if (node.constructor.name === "Text") { - structure += node.textContent; - } else { - structure += (node as Element).outerHTML; - } - } else if (endNodeIdx === i) { - if (node.constructor.name === "Text") { - structure += node.textContent.slice(endOffset); - } else { - if ((node as HTMLElement).tagName === "BR") { - structure += `
`; - } else { - const originalClassList = [...(node as Element).classList]; - const text = node.textContent; - - structure += `${text.slice(endOffset)}
`; - } - } - } - }); - - $textBlock.innerHTML = structure; - setCursor($textBlock.childNodes[startNodeIdx + 2] as Element, 0); - } -} - -// 백스페이스 이벤트 -function elementBackspaceEvent(e: KeyboardEvent, store: EditorInit) { - const { $element, type } = getBlockType(e.target as HTMLElement); - - switch (type) { - case "text": - case "heading": - defaultBlockBackspaceEvent(e, store, $element); - break; - default: - console.log("// TODO : 다른 타입 블럭 백스페이스 이벤트", type); - } -} - -// 기본 블럭 백스페이스 이벤트 -// TODO : 엘리먼트 방식으로 변경 -function defaultBlockBackspaceEvent(e: KeyboardEvent, store: EditorInit, $element: Element) { - const $textBlock = $element as HTMLElement; - const childList = store.wrap.querySelectorAll(".de-block"); - const childLength: number = childList.length; - const $target: HTMLElement = getParentElementIfNodeIsText(store.cursorData.startNode); - let elementIdx: number = -1; - - for (let i = 0; childLength > i; i += 1) { - if (childList[i] === $element) { - elementIdx = i; - break; - } - } - - // 블럭의 경우 - if (elementIdx === 0) { - // 첫번째 블럭인 경우 - if (store.cursorData.startOffset === 0 && $target === $textBlock) { - // 에디팅 블럭의 첫 커서인 경우 - if ($target.textContent === "") { - // 내용이 없는 경우 : 상태 초기화를 위한 교체 - $textBlock.insertAdjacentHTML("afterend", createTextBlock(store)); - setCursor($textBlock.nextElementSibling, 0); - $textBlock.remove(); - } else { - // 내용이 있는 경우 - e.preventDefault(); - - if ($textBlock.tagName !== "P") { - // 해딩 태그인 경우 - $textBlock.insertAdjacentHTML("afterend", createTextBlock(store, $textBlock.textContent)); - setCursor($textBlock.nextElementSibling, 0); - $textBlock.remove(); - } - } - } - } else { - // 첫번째 블럭이 아닌 경우 - if ($textBlock.hasChildNodes() === false) { - // 내용이 없는 경우 - e.preventDefault(); - - const $preBlock = $textBlock.previousElementSibling; - - if ($preBlock !== null) { - const { type: preBlockType } = getBlockType($textBlock); - - $textBlock.remove(); - - if (preBlockType === "text") { - if ($preBlock.hasChildNodes() === true) { - const textBlockChildList = $preBlock.childNodes; - const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1]; - setCursor(textBlockTargetChild as Element, textBlockTargetChild.textContent.length); - } else { - setCursor($preBlock as Element, 0); - } - } - } - } else { - // 내용이 있는 경우 - if (store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) { - // 커서가 첫번째에 있는 경우 - e.preventDefault(); - - const $preBlock = $textBlock.previousElementSibling; - - if ($preBlock !== null) { - const { type: preBlockType } = getBlockType($preBlock as HTMLElement); - - if (preBlockType === "text") { - if ($preBlock.hasChildNodes() === true) { - const textBlockChildList = $preBlock.childNodes; - const textBlockTargetChildIdx = textBlockChildList.length - 1; - const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length; - const thisBlockHTML = $textBlock.innerHTML; - - $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML; - setCursor($preBlock.childNodes[textBlockTargetChildIdx] as Element, textBlockTargetCursorIdx); - } else { - $preBlock.innerHTML = $textBlock.innerHTML; - setCursor($preBlock as Element, 0); - } - - $textBlock.remove(); - } - } - } - } - } - - // 노드의 경우 - if (store.cursorData.startOffset === 1 && $target !== $textBlock) { - if ($target.textContent.length === 1) { - // 삭제될 노드의 경우 - e.preventDefault(); - - const preNode = $target.previousSibling; - - if (preNode !== null) { - // 이전 노드가 있는 경우 - $target.remove(); - setCursor(preNode as Element, preNode.textContent.length); - } else { - // 이전 노드가 없는 경우 - if ($textBlock.childNodes[1] === undefined) { - $textBlock.innerHTML = ""; - setCursor($textBlock, 0); - } else { - setCursor($textBlock.childNodes[1] as Element, 0); - $target.remove(); - } - } - } - } - - setCursorData(store); -} - -// 탭 이벤트 -function elementTabEvent(e: KeyboardEvent, store: EditorInit) { - const { $element, type } = getBlockType(e.target as HTMLElement); - - switch (type) { - case "text": - defaultTabEvent(e.shiftKey, $element); - break; - } -} - -// 기본 탭 이벤트 -function defaultTabEvent(useShiftKey: boolean, $element: Element) { - const $target = $element as HTMLElement; - let value: number = $target.dataset["depth"] === undefined ? 0 : parseInt($target.dataset["depth"]); - - if (useShiftKey === true) { - if (value !== 0) { - value -= 1; - } - } else { - if (value < 5) { - value += 1; - } - } - - if (value === 0) { - delete $target.dataset["depth"]; - } else { - $target.dataset["depth"] = String(value); - } -} - -// 위 아래 화살표 이동 이벤트 -// TODO : 엘리먼트 방식으로 변경 -function moveToBlockEvent(e: KeyboardEvent, store: EditorInit, keyType: "up" | "down") { - const $editableElement = findContentEditableElement(store.cursorData.startNode); - const { $element, type } = getBlockType($editableElement); - let $target: HTMLElement; - - switch (type) { - case "list": - if (keyType === "up") { - $target = $editableElement.previousElementSibling as HTMLElement; - } else { - $target = $editableElement.nextElementSibling as HTMLElement; - } - - if ($target === null) { - if (keyType === "up") { - $target = $element.previousElementSibling as HTMLElement; - } else { - $target = $element.nextElementSibling as HTMLElement; - } - } - break; - default: - if (keyType === "up") { - $target = $element.previousElementSibling as HTMLElement; - } else { - $target = $element.nextElementSibling as HTMLElement; - } - } - - if ($target !== null) { - if ($target.classList.contains("de-block") == true) { - // 타겟이 블럭인 경우 - const { $element, type: targetType } = getBlockType($target); - - switch (targetType) { - case "list": - const $targetItem = $element.querySelectorAll(".de-item"); - let $item: Element; - - if (keyType === "up") { - $item = $targetItem[$targetItem.length - 1]; - } else { - $item = $targetItem[0]; - } - - setCursor($item, 0); - break; - default: - setCursor($element, 0); - } - } else { - // 블럭이 아닌 경우 - setCursor($target, 0); - } - } -} - -/** - * 핫 키 이벤트 - */ -export function hotKeyEvent(event: KeyboardEvent, store: EditorInit) { - setCursorData(store); - const isControlKeyActive = event.ctrlKey || event.metaKey; - - if (isControlKeyActive === true) { - switch (event.key) { - case "b": - event.preventDefault(); - setStyle("bold", store); - break; - case "i": - event.preventDefault(); - setStyle("italic", store); - break; - case "u": - event.preventDefault(); - setStyle("underline", store); - break; - case "s": - if (event.shiftKey === true) { - event.preventDefault(); - setStyle("strikethrough", store); - } - break; - case "c": - if (event.shiftKey === true) { - event.preventDefault(); - setStyle("code", store); - } - break; - } - } -} - -/** - * 복사 & 붙여넣기 이벤트 - */ - -export function copyEvent(event: KeyboardEvent, store: EditorInit) {} - -export function pasteEvent(event: KeyboardEvent, store: EditorInit) {} diff --git a/oldfile/src/utils/layout.ts b/oldfile/src/utils/layout.ts deleted file mode 100644 index 0270cf7..0000000 --- a/oldfile/src/utils/layout.ts +++ /dev/null @@ -1,81 +0,0 @@ -import type EditorInit from "./init"; -import { createTextBlock } from "./block"; -import { getIcon } from "./ui"; - -// 레이아웃 구성 -export function setLayout(store: EditorInit) { - const structureList: HTMLDivElement[] = []; - const classList: string[] = ["de-wrapper"]; - - if (store.mode === "edit") { - structureList.push(createControlBar(store)); - structureList.push(createBlockStructure(store)); - - classList.push("de-editor"); - } else { - structureList.push(createBlockStructure(store)); - classList.push("de-viewer"); - } - - store.wrap.classList.add(...classList); - store.wrap.replaceChildren(...structureList); -} - -// 컨트롤 바 생성 -function createControlBar(store: EditorInit): HTMLDivElement { - const childList: HTMLElement[] = []; - const styleButtonList = [ - { value: "bold", iconName: "decorationBold" }, - { value: "italic", iconName: "decorationItalic" }, - { value: "underline", iconName: "decorationUnderline" }, - { value: "strikethrough", iconName: "decorationStrikethrough" }, - { value: "code", iconName: "decorationCode" }, - ]; - const $bar = document.createElement("div"); - const $plusButton = document.createElement("button"); - const $menuArea = document.createElement("div"); - const $menuList = document.createElement("div"); - - $bar.classList.add("de-control-bar"); - $menuArea.classList.add("de-block-menu-area"); - $menuList.classList.add("de-list"); - $plusButton.classList.add("de-menu", "de-menu-add"); - $plusButton.appendChild(getIcon("plus")); - childList.push($plusButton); - - styleButtonList.forEach((item) => { - const $button = document.createElement("button"); - - $button.classList.add("de-menu", "de-add-decoration"); - $button.dataset["style"] = item.value; - $button.appendChild(getIcon(item.iconName)); - - childList.push($button); - }); - - // 블럭 추가 리스트 - store.blockList.forEach((item) => { - const $button = document.createElement("button"); - - $button.classList.add("de-add-block"); - $button.dataset["type"] = item.value; - $button.textContent = item.name; - $menuList.appendChild($button); - }); - - $menuArea.appendChild($menuList); - childList.push($menuArea); - $bar.replaceChildren(...childList); - - return $bar; -} - -// 블록 구조 생성 -function createBlockStructure(store: EditorInit): HTMLDivElement { - const $list = document.createElement("div"); - - $list.classList.add("de-block-list"); - $list.appendChild(createTextBlock(store)); - - return $list; -} diff --git a/oldfile/src/utils/message.ts b/oldfile/src/utils/message.ts deleted file mode 100644 index 37421e7..0000000 --- a/oldfile/src/utils/message.ts +++ /dev/null @@ -1,9 +0,0 @@ -const defaultMessage: DEMessage = { - linkTextNoStyle: "Link text can't set any style.", -}; - -export default defaultMessage; - -export function openMessage(){ - -} diff --git a/oldfile/src/utils/style.ts b/oldfile/src/utils/style.ts deleted file mode 100644 index 02ba40a..0000000 --- a/oldfile/src/utils/style.ts +++ /dev/null @@ -1,453 +0,0 @@ -import type EditorInit from "./init"; -import { findContentEditableElement } from "./element"; -import { setCursor, setCursorData, soltingCursorDataOnElement, setRangeCursor } from "./cursor"; - -export function setStyle(type: string, store: EditorInit) { - if (store.cursorData !== null) { - const $editableElement = findContentEditableElement(store.cursorData.startNode as HTMLElement); - - if ($editableElement !== null) { - setNodeStyle(`de-${type}`, store, $editableElement); - } - - setCursorData(store); - } -} - -function setNodeStyle(className: string, store: EditorInit, $element: HTMLElement) { - if (store.cursorData.type === "Caret") { - // 단일 커서인 경우 - if ($element.hasChildNodes() === true) { - // 자식노드가 있는 경우 - let $target = store.cursorData.startNode; - - if ($target.constructor.name === "Text") { - // 텍스트 노드인 경우 - const $parentElement: HTMLElement = $target.parentElement; - - if ($parentElement === $element) { - // 부모가 최상위 노드인 경우 - const test = document.createElement("span"); - test.textContent = "123"; - - // $parentElement.replace - setCursor(test, 2); - - // const childList = $element.childNodes; - // let targetIdx: number = -1; - // let structure: string = ""; - // let cursorOffset: number = 0; - - // for (let i = 0; childList.length > i; i += 1) { - // if ($target === childList[i]) { - // targetIdx = i; - // break; - // } - // } - - // childList.forEach((node, i) => { - // if (i === targetIdx) { - // // 대상 노드인 경우 - // structure += `${node.textContent}`; - // cursorOffset = node.textContent.length; - // } else { - // // 대상 노드가 아닌 경우 - // if (node.constructor.name === "Text") { - // structure += node.textContent; - // } else { - // structure += (node as HTMLElement).outerHTML; - // } - // } - // }); - - // $element.innerHTML = structure; - // setCursor($element.childNodes[targetIdx] as Element, cursorOffset); - } else { - // 부모가 최상위 노드가 아닌 경우 - if ($parentElement.tagName === "A") { - alert(store.message.linkTextNoStyle); - } - - if ($parentElement.tagName === "SPAN") { - // 일반 태그인 경우만 허용 - const classList: string[] = [...$parentElement.classList]; - const classIdx: number = classList.indexOf(className); - - if (classIdx === -1) { - // 클레스가 없는 경우 - $parentElement.classList.add(className); - setCursor($parentElement.childNodes[0] as Element, store.cursorData.startOffset); - } else { - // 클레스가 있는 경우 - if (classList.length === 1) { - // 마지막 클레스인 경우 - $parentElement.insertAdjacentText("afterend", $parentElement.textContent); - setCursor($parentElement.nextSibling as Element, store.cursorData.startOffset); - $parentElement.remove(); - } else { - // 다른 클레스가 있는 경우 - $parentElement.classList.remove(className); - setCursor($parentElement.childNodes[0] as Element, store.cursorData.startOffset); - } - } - } - } - } - } - } else { - // 범위 선택인 경우 - const cursorData = soltingCursorDataOnElement(store.cursorData, $element); - let structure: string = ""; - let isDuble: boolean = false; - - if (cursorData.startNodeIdx === cursorData.endNodeIdx) { - // 같은 노드인 경우 - if (cursorData.startNode.constructor.name === "Text") { - // 텍스트인 경우 - - $element.childNodes.forEach((childNode: ChildNode, i: number) => { - if (cursorData.startNodeIdx === i) { - // 해당 노드인 경우 - if (cursorData.startOffset !== 0) { - structure += childNode.textContent.slice(0, cursorData.startOffset); - isDuble = true; - } - - structure += `${childNode.textContent.slice(cursorData.startOffset, cursorData.endOffset)}`; - - if (cursorData.endOffset !== childNode.textContent.length) { - structure += childNode.textContent.slice(cursorData.endOffset); - } - } else { - // 해당 노드가 아닌 경우 - if (childNode.constructor.name === "Text") { - structure += childNode.textContent; - } else { - structure += (childNode as HTMLElement).outerHTML; - } - } - }); - - let childNumber: number = cursorData.startNodeIdx; - - // @ts-ignore : IDE 인식 못함 - if (isDuble === true) { - childNumber += 1; - } - - $element.innerHTML = structure; - setCursor($element.childNodes[childNumber] as Element, cursorData.endOffset - cursorData.startOffset); - } else { - // 엘리먼트인 경우 - const $target = cursorData.startNode as HTMLElement; - - if ($target.tagName !== "A") { - // 일반 태그의 경우만 허용 - const classList = [...$target.classList]; - const classIdx = classList.indexOf(className); - - if (classIdx === -1) { - // 클레스 없는 경우 - if (cursorData.startOffset !== 0) { - structure += `${$target.textContent.slice(0, cursorData.startOffset)}`; - isDuble = true; - } - - structure += `${$target.textContent.slice(cursorData.startOffset, cursorData.endOffset)}`; - - if (cursorData.endOffset !== $target.textContent.length) { - structure += `${$target.textContent.slice(cursorData.endOffset)}`; - } - } else { - // 클레스 있는 경우 - if (cursorData.startOffset !== 0) { - structure += `${$target.textContent.slice(0, cursorData.startOffset)}`; - isDuble = true; - } - - if (classList.length === 1) { - // 마지막 클레스인 경우 - structure += $target.textContent.slice(cursorData.startOffset, cursorData.endOffset); - } else { - // 다른 클레스도 존재하는 경우 - const copyList = [...classList]; - - copyList.splice(classIdx, 1); - structure += `${$target.textContent.slice(cursorData.startOffset, cursorData.endOffset)}`; - } - - if (cursorData.endOffset !== $target.textContent.length) { - structure += `${$target.textContent.slice(cursorData.endOffset)}`; - } - } - - $target.insertAdjacentHTML("afterend", structure); - - let $nextElement = $target.nextSibling; - - if (isDuble === true) { - $nextElement = $nextElement.nextSibling; - } - - $target.remove(); - setCursor($nextElement as Element, cursorData.endOffset - cursorData.startOffset); - } - } - } else { - // 다른 노드인 경우 - let isAnchorElement: boolean = false; - let isWrap: boolean = false; - let startNodeIdx: number = cursorData.startNodeIdx; - let startOffset: number = cursorData.startOffset; - let endNodeIdx: number = cursorData.endNodeIdx; - let endOffset: number = cursorData.endOffset; - let structureArray: string[] = []; - - $element.childNodes.forEach((childNode: ChildNode, i: number) => { - const $elementNode = childNode as HTMLElement; - let isText = childNode.constructor.name === "Text"; - - if (cursorData.startNodeIdx > i) { - // 이전 노드인 경우 - if (isText === true) { - structureArray.push(childNode.textContent); - } else { - structureArray.push($elementNode.outerHTML); - } - } - - if (cursorData.startNodeIdx === i) { - // 첫번째 노드인 경우 - const preTextContent = childNode.textContent.slice(0, cursorData.startOffset); - const textContent = childNode.textContent.slice(cursorData.startOffset); - - if (isText === true) { - structureArray.push(preTextContent); - structureArray.push(`${textContent}`); - isWrap = true; - - if (cursorData.startOffset !== 0) { - isDuble = true; - } - } else { - const classList = [...$elementNode.classList]; - const classIdx = classList.indexOf(className); - - if ($elementNode.tagName === "SPAN") { - if (classIdx === -1) { - // 클레스가 없는 경우 - if (preTextContent !== "") { - structureArray.push(`${preTextContent}`); - } - structureArray.push(`${textContent}`); - isWrap = true; - } else { - // 클레스가 있는 경우 - if (classList.length === 1) { - // 마지막 클레스인 경우 - if (preTextContent !== "") { - structureArray.push(`${preTextContent}`); - } - structureArray.push(textContent); - } else { - // 마지막 클레스가 아닌 경우 - const newClassList = [...classList]; - newClassList.splice(classIdx, 1); - - if (preTextContent !== "") { - structureArray.push(`${preTextContent}`); - } - structureArray.push(`${textContent}`); - } - } - } else if ($elementNode.tagName === "BR") { - structureArray.push("
"); - } else { - isAnchorElement = true; - } - } - } - - if (cursorData.startNodeIdx < i && cursorData.endNodeIdx > i) { - // 첫번쨰 노드와 마지막 노드의 사이에 있는 노드인 경우 - if (isText === true) { - if (isWrap === true) { - structureArray.push(`${childNode.textContent}`); - } else { - structureArray.push(childNode.textContent); - } - } else { - const classList = [...$elementNode.classList]; - const classIdx = classList.indexOf(className); - - if ($elementNode.tagName === "SPAN") { - if (isWrap === true) { - // 첫 시작점이 부여인 경우 - if (classIdx === -1) { - // 클레스가 없는 경우 - structureArray.push(`${childNode.textContent}`); - } else { - // 클레스가 있는 경우 - structureArray.push($elementNode.outerHTML); - } - } else { - // 첫 시작점이 부여가 아닌 경우 - if (classIdx === -1) { - // 클레스가 없는 경우 - structureArray.push($elementNode.outerHTML); - } else { - // 클레스가 있는 경우 - if (classList.length === 1) { - // 마지막 클레스인 경우 - structureArray.push(childNode.textContent); - } else { - // 다른 클레스가 있는 경우 - const newClassList = [...classList]; - newClassList.splice(classIdx, 1); - structureArray.push(`${childNode.textContent}`); - } - } - } - } else if ($elementNode.tagName === "BR") { - structureArray.push("
"); - } else { - isAnchorElement = true; - } - } - } - - if (cursorData.endNodeIdx === i) { - // 마지막 노드인 경우 - const textContent = childNode.textContent.slice(0, cursorData.endOffset); - const endTextContent = childNode.textContent.slice(cursorData.endOffset); - - if (isText === true) { - if (isWrap === true) { - structureArray.push(`${textContent}`); - structureArray.push(endTextContent); - } else { - structureArray.push(childNode.textContent); - } - } else { - const classList = [...$elementNode.classList]; - const classIdx = classList.indexOf(className); - - if ($elementNode.tagName === "SPAN") { - if (isWrap === true) { - if (classIdx === -1) { - // 클레스가 없는 경우 - structureArray.push(`${textContent}`); - if (endTextContent !== "") { - structureArray.push(`${endTextContent}`); - } - } else { - // 클레스가 있는 경우 - structureArray.push($elementNode.outerHTML); - } - } else { - if (classIdx === -1) { - // 클레스가 없는 경우 - structureArray.push($elementNode.outerHTML); - } else { - // 클레스가 있는 경우 - if (classList.length === 1) { - // 마지막 클레스인 경우 - structureArray.push(textContent); - if (endTextContent !== "") { - structureArray.push(`${endTextContent}`); - } - } else { - // 마지막 클레스가 아닌 경우 - const newClassList = [...classList]; - newClassList.splice(classIdx, 1); - - structureArray.push(`${textContent}`); - if (endTextContent !== "") { - structureArray.push(`${endTextContent}`); - } - } - } - } - } else if ($elementNode.tagName === "BR") { - structureArray.push("
"); - } else { - isAnchorElement = true; - } - } - } - - if (cursorData.endNodeIdx < i) { - // 이후 노드인 경우 - if (isText === true) { - structureArray.push(childNode.textContent); - } else { - structureArray.push($elementNode.outerHTML); - } - } - }); - - $element.innerHTML = structureArray.join(""); - - // @ts-ignore : IDE가 인식 못함 - if (isWrap === true) { - // @ts-ignore : IDE가 인식 못함 - if (isDuble === true) { - startNodeIdx += 1; - endNodeIdx += 1; - startOffset = 0; - } - } else { - const tagReg = new RegExp("(<([^>]+)>)", "i"); - const isTagList: (boolean | null)[] = []; - let newStartNodeIdx: number = 0; - let newStartOffset: number = startOffset * 1; - let newEndOffset: number = 0; - let endMinusCount: number = 0; - - structureArray.forEach((string: string, i: number) => { - const isTag: boolean = tagReg.test(string); - - isTagList.push(isTag); - - if (startNodeIdx <= i && i <= endNodeIdx) { - if (isTag === true) { - newEndOffset = 0; - } else { - endMinusCount += 1; - newEndOffset += string.length; - } - } - }); - - // 시작 노드의 전 노드가 텍스트라면 - if (isTagList[startNodeIdx - 1] === false) { - newStartNodeIdx = startNodeIdx - 1; - newStartOffset = startOffset + structureArray[startNodeIdx - 1].length; - } - - if (isTagList.slice(startNodeIdx, endNodeIdx).includes(true) === true) { - // 중간에 태그가 있는경우 - console.log("endNodeIdx", endNodeIdx); - console.log("endMinusCount", endMinusCount); - console.log("newEndOffset", newEndOffset); - endNodeIdx -= endMinusCount - 1; - endOffset = newEndOffset; - } else { - // 중간에 태그가 없는 경우 - endNodeIdx = newStartNodeIdx; - endOffset = newStartOffset + newEndOffset; - } - - startNodeIdx = newStartNodeIdx; - startOffset = newStartOffset; - } - - setRangeCursor($element.childNodes[startNodeIdx] as Element, $element.childNodes[endNodeIdx] as Element, startOffset, endOffset); - - // @ts-ignore : IDE가 인식 못함 - if (isAnchorElement === true) { - alert(store.message.linkTextNoStyle); - } - } - } -} diff --git a/oldfile/src/utils/ui.ts b/oldfile/src/utils/ui.ts deleted file mode 100644 index 2585ea8..0000000 --- a/oldfile/src/utils/ui.ts +++ /dev/null @@ -1,36 +0,0 @@ -export function getIcon(nameOrPath: string): SVGSVGElement { - const $svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - const svgNS = $svg.namespaceURI; - const $path = document.createElementNS(svgNS, "path"); - - $svg.setAttribute("viewBox", "0 0 64 64"); - $svg.classList.add("de-icon"); - $path.classList.add("de-path"); - - switch (nameOrPath) { - case "plus": - $path.setAttribute("d", "M32 9C30.3431 9 29 10.3431 29 12V29H12C10.3431 29 9 30.3431 9 32C9 33.6569 10.3431 35 12 35H29V52C29 53.6569 30.3431 55 32 55C33.6569 55 35 53.6569 35 52V35H52C53.6569 35 55 33.6569 55 32C55 30.3431 53.6569 29 52 29H35V12C35 10.3431 33.6569 9 32 9Z"); - break; - case "decorationBold": - $path.setAttribute("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"); - break; - case "decorationItalic": - $path.setAttribute("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"); - break; - case "decorationUnderline": - $path.setAttribute("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"); - break; - case "decorationStrikethrough": - $path.setAttribute("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"); - break; - case "decorationCode": - $path.setAttribute("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"); - break; - default: - $path.setAttribute("d", nameOrPath); - } - - $svg.appendChild($path); - - return $svg; -} diff --git a/oldfile/vite.config.js b/oldfile/vite.config.js deleted file mode 100644 index ad7f3a4..0000000 --- a/oldfile/vite.config.js +++ /dev/null @@ -1,26 +0,0 @@ -import { resolve } from "path"; -import { defineConfig } from "vite"; -import pkg from "./package.json" assert { type: "json" }; -import dts from "vite-plugin-dts"; - -export default defineConfig({ - plugins: [ - dts({ - rollupTypes: true, - insertTypesEntry: true, - }), - ], - build: { - // TODO : build option check - outDir: ".output", - sourcemap: true, - minify: true, - lib: { - entry: resolve(__dirname, "src/main.ts"), - name: pkg.name, - fileName: "index", - formats: ["es", "umd", "cjs"], - }, - target: "modules", - }, -});