Merge pull request #6 from edumudu/develop

solved color functionality and bugs in text align

Author: edumudu

src/assets/scss/editor/main.scss

@@ -5,6 +5,7 @@
   padding: 20px 25px;
   background-color: #FFF;
   border-radius: 5px;
+  box-shadow: 0 0 7px #ccc;
 
   &-menu {
     display: flex;

src/assets/scss/unique/the-header.scss

@@ -6,4 +6,5 @@ header {
   color: #FFF;
   font-size: 2.4rem;
   font-weight: 600;
+  box-shadow: 0 0 8px #000;
 }

src/components/editor/VEditor.vue

@@ -30,53 +30,76 @@ import { CommandsItem } from '@/@types/index';
 const useCommandsHandler = () => {
   const actions: Record<string, Function> = {
     textAlign(el: HTMLDivElement, value: string) {
-      const { range, moveCursorToEnd } = useRange();
+      const { range, setRange, moveCursorToEnd } = useRange();
+      const { getParentByTagName } = useDOMManipulation();
       const common = range.commonAncestorContainer;
       let newElement;
 
-      if (!el.contains(common) || common.isSameNode(el)) return;
+      if (!el.contains(common)) return moveCursorToEnd(common.lastChild || common);
+
+      if (common.isSameNode(el)) {
+        if (!el.childElementCount) {
+          newElement = document.createElement('div');
+          newElement.style.textAlign = value;
+          newElement.textContent = '\u200B';
+          common.appendChild(newElement);
+
+          return moveCursorToEnd(newElement || common.lastChild || common);
+        }
+
+        let element = common.firstChild as HTMLElement;
+        const { startContainer, endContainer, startOffset, endOffset } = range;
+        let wrapper;
+
+        if (element.nodeType === 3) {
+          wrapper = document.createElement('div');
+          wrapper.appendChild(element.cloneNode());
+          common.replaceChild(wrapper, element);
+          element = wrapper;
+        }
+
+        const start = {
+          node: startContainer as Text,
+          offSet: startOffset,
+        };
+
+        const end = {
+          node: endContainer as Text,
+          offSet: endOffset,
+        };
+
+        while (!element.contains(wrapper || startContainer)) {
+          element = element.nextSibling as HTMLElement;
+        }
+
+        while (element) {
+          element.style.textAlign = value;
+          element = element.nextSibling as HTMLElement;
+        }
+
+        return setRange(start, end);
+      }
 
-      if (common.parentElement?.isSameNode(el) && common.parentElement?.nodeType === 3) {
-        newElement = document.createElement('div');
+      if (common.parentElement?.isSameNode(el)) {
+        newElement = (common.nodeType === 3 ? document.createElement('div') : common) as HTMLElement;
         newElement.appendChild(common.cloneNode());
         el.replaceChild(newElement, common);
       } else {
-        newElement = (common.nodeType === 3 ? common.parentElement : common) as HTMLElement;
-      }
-
-      newElement.style.textAlign = value;
-      moveCursorToEnd(newElement.lastChild as HTMLElement);
-    },
-
-    list(el: HTMLDivElement, value: string) {
-      const { range, moveCursorToEnd } = useRange();
-      const common = range.commonAncestorContainer;
-
-      if (!el.contains(common) || common.isSameNode(el)) return;
-
-      const getChild = (node: HTMLElement | Node): HTMLElement => {
-        if (node.parentElement?.isSameNode(el)) return node as HTMLElement;
-
-        return getChild(node.parentElement as HTMLElement);
-      };
+        const parent = getParentByTagName(common, ['div', 'li']) as HTMLElement;
 
-      const myNode = getChild(common);
-      const newEl = document.createElement(value);
-      const li = document.createElement('li');
+        if (parent.isSameNode(el)) {
+          newElement = document.createElement('div');
 
-      if (myNode.firstChild?.nodeName === 'LI') {
-        newEl.append(...Array.from(myNode.children));
-      } else {
-        newEl.appendChild(li);
-
-        Array.from(myNode.childNodes.length ? myNode.childNodes : [myNode.cloneNode()], (item) => {
-          li.appendChild(item);
-          return item;
-        });
+          newElement.append(...el.childNodes);
+          el.appendChild(newElement);
+        } else {
+          newElement = parent;
+        }
       }
 
-      el.replaceChild(newEl, myNode);
-      moveCursorToEnd(newEl);
+      newElement.style.textAlign = value;
+
+      return moveCursorToEnd(newElement.lastChild as HTMLElement);
     },
 
     color(el: HTMLDivElement, value: string): void {
@@ -85,19 +108,36 @@ const useCommandsHandler = () => {
       const { startContainer, startOffset, endOffset, endContainer } = range as Range & { startContainer: Text };
       const endSpan = document.createElement('span');
       const startSpan = document.createElement('span');
-      const startTextNode = document.createTextNode(startContainer.textContent?.slice(startOffset) || '\u200B');
+      const startTextNode = document.createTextNode('');
       const endTextNode = document.createTextNode('');
 
       if (!el.contains(startContainer)) return moveCursorToEnd(el.lastChild || el);
 
+      startContainer.textContent = startContainer.textContent?.replace(/\s/g, '\u0020') || '';
+      endContainer.textContent = endContainer.textContent?.replace(/\s/g, '\u0020') || '';
+      startTextNode.textContent = startContainer.textContent?.slice(startOffset) || '\u200B';
       startSpan.style.color = value;
       endSpan.style.color = value;
+
+      if (startContainer.isSameNode(endContainer)) {
+        const nodeValue = startTextNode.textContent || '';
+        const offSetDiff = endOffset - startOffset;
+        const afterTextNode = document.createTextNode(nodeValue.slice(offSetDiff));
+
+        startTextNode.textContent = nodeValue.slice(0, offSetDiff);
+
+        startSpan.appendChild(startTextNode);
+        startContainer.replaceData(startOffset, -1, '');
+        startContainer.after(startSpan);
+        startSpan.after(afterTextNode);
+
+        return range.selectNodeContents(startSpan);
+      }
+
       startSpan.appendChild(startTextNode);
-      startContainer.replaceData(startOffset, -1, '');
+      startContainer.replaceData(startOffset, startTextNode.nodeValue?.length || -1, '');
       startContainer.after(startSpan);
 
-      if (startContainer.isSameNode(endContainer)) return setRange({ node: startTextNode }, { node: startTextNode });
-
       const endNode = getEndNode(startTextNode, endContainer, (n) => {
         const sibling = (n.nodeType === 3 ? n.parentElement : n) as HTMLElement;
         sibling.style.color = value;

src/components/editor/VEditorHead.vue

@@ -6,12 +6,6 @@
       @changeCommand="onChangeCommand"
     />
 
-    <v-editor-group
-      :items="commands.lists"
-      :selected="listType"
-      @changeCommand="onChangeCommand"
-    />
-
     <input
       type="color"
       :value="fontColor"
@@ -75,19 +69,6 @@ export default defineComponent({
           icon: 'format-align-justify',
         },
       ],
-
-      lists: [
-        {
-          command: 'list',
-          value: 'ul',
-          icon: 'format-list-bulleted',
-        },
-        {
-          command: 'list',
-          value: 'ol',
-          icon: 'format-list-numbered',
-        },
-      ],
     });
 
     const { onChangeCommand } = useExecuteCommand(emit);

src/shared/DOMManipulation.ts

@@ -16,5 +16,14 @@ export const useDOMManipulation = () => {
     return getEndNode(n.parentNode as NodeText, endNode, wrapCallback);
   };
 
-  return { getEndNode };
+  const getParentByTagName = (node: Node, names: string | string[]): Node => {
+    const namesUpperCase = typeof names === 'string' ? [names.toLowerCase()] : names.map((name) => name.toUpperCase());
+
+    return namesUpperCase.includes(node.nodeName) ? node : getParentByTagName(node.parentNode as Node, names);
+  };
+
+  return {
+    getEndNode,
+    getParentByTagName,
+  };
 };