leksy-editor 1.2.1 → 1.3.1

package/constant.js

@@ -653,6 +653,10 @@ const TAB_CATEGORIES = {
 
 const RESIZE_MARGIN = 10;
 
+const LIST_STYLES_BY_LEVEL = ['1', 'a', 'i', 'A'];
+const UNORDERED_LIST_STYLES_BY_LEVEL = ['disc', 'circle', 'square'];
+
+
 export {
     ERRORS,
     CLASSES,
@@ -675,4 +679,6 @@ export {
     CSS_VARIABLES,
     TAB_CATEGORIES,
     RESIZE_MARGIN,
+    LIST_STYLES_BY_LEVEL,
+    UNORDERED_LIST_STYLES_BY_LEVEL,
 }

package/index.js

@@ -1,7 +1,7 @@
 import './style.css'
 import { CLASSES, CSS, CSS_VARIABLES, ERRORS, REGEX, SVG } from "./constant"
-import PLUGINS, { applyOrderList, applyTextFormat, applyUnorderedList } from './plugin';
-import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName, showRemoteCursor, syncRemoteChangesDebounce, applyRemoteChanges, updateCursorPositionDebounce, buildTributeValues, updateHeight, getTableGrid, getCellPosition, makeUnorderedList, makeOrderedList, makeHeading, makeBlockQuote, makeStrikethrough, makeCodeBlock } from './utilities';
+import PLUGINS, { applyTextFormat } from './plugin';
+import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName, showRemoteCursor, syncRemoteChangesDebounce, applyRemoteChanges, updateCursorPositionDebounce, buildTributeValues, updateHeight, getTableGrid, getCellPosition, makeUnorderedList, makeOrderedList, makeHeading, makeBlockQuote, makeStrikethrough, makeCodeBlock, makeSublist, showTooltip } from './utilities';
 
 class LeksyEditor {
 
@@ -386,6 +386,7 @@ class LeksyEditor {
         })
 
         if (options.disabled) changeAllToolbarState(core, 'disabled')
+        showTooltip(options)
 
         core.elements.toolbarContainer = toolbarContainer;
         core.elements.base.appendChild(toolbarContainer);
@@ -725,6 +726,9 @@ class LeksyEditor {
             }
 
             if (event.key === 'Tab') {
+                makeSublist(event, core);
+                if (event.defaultPrevented) return;
+
                 event.preventDefault();
 
                 const tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
@@ -816,7 +820,7 @@ class LeksyEditor {
 
             if (e.target.closest("a")?.tagName === 'A') {
                 const anchor = e.target.closest("a");
-                if (anchor) {
+                if (anchor && element.tagName !== 'IMG') {
                     core.elements.selectedElement = anchor;
                     showAnchorPopover(anchor, e.pageX, e.pageY, options, core);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.",
   "main": "index.js",
   "directories": {

package/plugin.js

@@ -233,7 +233,7 @@ const PLUGINS = {
         }
     },
     'font-size': {
-        title: 'Font',
+        title: 'Font Size',
         icon: 'Font Size',
         type: 'select',
         options: Object.keys(FONT_SIZE_OPTIONS).map(size => ({
@@ -930,6 +930,7 @@ const PLUGINS = {
                     if (url) {
                         const a = document.createElement('a');
                         a.href = url.videoUrl
+                        a.dataset.leksyPreview = 'video-url'
                         a.target = '_blank'
                         const img = document.createElement('img');
                         img.src = url.thumbnailUrl
@@ -946,6 +947,7 @@ const PLUGINS = {
                     if (url) {
                         const a = document.createElement('a');
                         a.href = url.videoUrl
+                        a.dataset.leksyPreview = 'video-url'
                         a.target = '_blank'
                         const img = document.createElement('img');
                         img.src = url.thumbnailUrl

package/style.css

@@ -152,7 +152,9 @@
 
 .leksy-editor-toolbar-item::after {
     content: attr(data-title);
-    position: absolute;
+    position: fixed;
+    top: var(--leksy-editor-top, 0);
+    left: var(--leksy-editor-left, 0);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s;
@@ -161,8 +163,6 @@
     color: black;
     padding: 5px 10px;
     border-radius: 5px;
-    bottom: -90%;
-    left: 60%;
     transform: translateX(-50%);
     white-space: nowrap;
     z-index: 1;
@@ -516,7 +516,6 @@ button.leksy-editor-popover-tab.active {
     height: 2rem;
     padding: 0.75rem 1rem;
     background-color: hsl(160, 100%, 35%);
-    border-color: hsl(160, 75%, 50%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -530,7 +529,6 @@ button.leksy-editor-popover-tab.active {
     white-space: nowrap;
     gap: 0.5rem;
     transition: 500ms;
-    text-transform: uppercase;
     font-size: 1rem;
 }
 

package/utilities.js

@@ -1,4 +1,4 @@
-import { CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS, TAB_CATEGORIES, RESIZE_MARGIN } from "./constant";
+import { CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS, TAB_CATEGORIES, RESIZE_MARGIN, LIST_STYLES_BY_LEVEL, UNORDERED_LIST_STYLES_BY_LEVEL } from "./constant";
 import { DiffDOM } from 'diff-dom';
 import { applyUnorderedList, applyOrderList } from "./plugin";
 
@@ -161,6 +161,24 @@ function getScrollParent(element) {
     return document.body;
 }
 
+const showTooltip = (options) => {
+    document.addEventListener('mouseover', (e) => {
+        const el = e.target.closest(`.${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`);
+        if (!el) return;
+
+        const rect = el.getBoundingClientRect();
+
+        let top = rect.bottom + 2;
+        let left = rect.left + rect.width / 2;
+
+        left = Math.max(68, Math.min(left, window.innerWidth - 68));
+
+        el.style.setProperty('--leksy-editor-top', `${top}px`);
+        el.style.setProperty('--leksy-editor-left', `${left}px`);
+    });
+};
+
+
 const makeToolbarButton = (_plugin, options, core) => {
     const pluginButton = document.createElement('button');
     pluginButton.type = "button"
@@ -939,6 +957,7 @@ const makeEditToolbar = (options, core, { type, td, image, updateImage, updateTa
 
         Object.keys(TAB_CATEGORIES).forEach((categoryName, index) => {
             const tabButton = document.createElement('button');
+            tabButton.type = 'button'
             tabButton.textContent = categoryName;
             tabButton.className = `${options.classPrefix}${CLASSES.POPOVER_TAB}`
 
@@ -1098,7 +1117,18 @@ const initImageResizer = (type, image, options, core) => {
         fullscreenButton.style.justifyContent = 'center';
 
         fullscreenButton.addEventListener('click', () => {
-            createPreviewModal(image.src, core, options); // Open custom modal with image preview
+            const anchor = image.closest('a');
+            let isVideo = false;
+            let src = image.src;
+
+            if (anchor?.dataset?.leksyPreview === 'video-url') {
+                const href = anchor.getAttribute('href');
+                if (href) {
+                    isVideo = true;
+                    src = href;
+                }
+            }
+            createPreviewModal(src, core, options, isVideo);
         });
 
         resizer.appendChild(fullscreenButton);
@@ -1318,7 +1348,7 @@ const initImageResizer = (type, image, options, core) => {
     core.elements.iframeWindow.addEventListener('keydown', core.deleteImageHandler)
 }
 
-const createPreviewModal = (imageSrc, core, options) => {
+const createPreviewModal = (src, core, options, isVideo = false) => {
     // Create overlay
     const overlay = document.createElement('div');
     overlay.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_OVERLAY} `
@@ -1337,12 +1367,22 @@ const createPreviewModal = (imageSrc, core, options) => {
     const modalBody = document.createElement('div');
     modalBody.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_BODY} `
 
-    // Image element
-    const image = document.createElement('img');
-    image.src = imageSrc;
-    image.alt = 'Preview Image';
+    let element;
+    if (isVideo) {
+        element = document.createElement('video');
+        element.src = src;
+        element.controls = true;
+        element.style.maxWidth = '100%';
+        element.style.maxHeight = '100%';
+        element.setAttribute('controlsList', 'nodownload');
+        element.setAttribute('disablePictureInPicture', true);
+    } else {
+        element = document.createElement('img');
+        element.src = src;
+        element.alt = 'Preview Image';
+    }
 
-    modalBody.appendChild(image);
+    modalBody.appendChild(element);
     modalContent.append(closeButton, modalBody);
     overlay.appendChild(modalContent);
 
@@ -1350,7 +1390,7 @@ const createPreviewModal = (imageSrc, core, options) => {
     document.body.appendChild(overlay);
 
     overlay.addEventListener('click', (event) => {
-        if (event.target !== image) {
+        if (event.target !== element) {
             overlay.remove();
         }
     });
@@ -2927,6 +2967,112 @@ const makeCodeBlock = (event, core) => {
     core.updateCaretPosition();
 }
 
+const getListLevel = (li) => {
+    let level = 0;
+    let parent = li.parentElement;
+    const tagName = parent.tagName;
+
+    while (parent && parent.tagName === tagName) {
+        level++;
+        parent = parent.parentElement?.closest(tagName);
+    }
+
+    return level;
+};
+
+const applyListStyle = (list, level) => {
+    let type;
+    if (list.tagName === 'OL') {
+        type = LIST_STYLES_BY_LEVEL[(level - 1) % LIST_STYLES_BY_LEVEL.length];
+    } else if (list.tagName === 'UL') {
+        type = UNORDERED_LIST_STYLES_BY_LEVEL[(level - 1) % UNORDERED_LIST_STYLES_BY_LEVEL.length];
+    }
+    if (type) list.setAttribute('type', type);
+};
+
+const indentListItem = (li, core) => {
+    const prevLi = li.previousElementSibling;
+    if (!prevLi) return;
+
+    const parentTag = li.parentElement.tagName;
+    let subList = prevLi.querySelector(parentTag);
+
+    if (!subList) {
+        subList = document.createElement(parentTag);
+        prevLi.appendChild(subList);
+    }
+
+    subList.appendChild(li);
+    const selection = core.elements.iframeWindow.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(li);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    core.elements.editor.focus();
+    core.updateCaretPosition();
+
+    if (parentTag === 'OL' || parentTag === 'UL') {
+        const level = getListLevel(li);
+        applyListStyle(subList, level);
+    }
+};
+
+const outdentListItem = (li, core) => {
+    const parentOl = li.parentElement;
+    const parentLi = parentOl.closest('li');
+    if (!parentLi) return;
+
+    parentLi.after(li);
+
+    const selection = core.elements.iframeWindow.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(li);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    core.elements.editor.focus();
+    core.updateCaretPosition();
+
+
+    if (parentOl.children.length === 0) {
+        parentOl.remove();
+    }
+
+    if (li.parentElement.tagName === 'OL' || li.parentElement.tagName === 'UL') {
+        const level = getListLevel(li);
+        applyListStyle(li.parentElement, level);
+    }
+};
+
+const makeSublist = (event, core) => {
+    if (event.key !== 'Tab') return;
+
+    const selection = core.elements.iframeWindow.getSelection();
+    if (!selection.rangeCount) return;
+
+    let node = selection.anchorNode;
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentElement;
+    }
+
+    const li = node.closest('li');
+    if (!li) return;
+
+    const clone = li.cloneNode(true);
+    clone.querySelectorAll('ul, ol').forEach(l => l.remove());
+    const hasContent = clone.textContent.replace(/\u00A0/g, '').length > 0 || clone.querySelector('img, video, audio, table, hr');
+    if (hasContent) return;
+
+    event.preventDefault();
+
+    if (event.shiftKey) {
+        outdentListItem(li, core);
+    } else {
+        indentListItem(li, core);
+    }
+};
+
 export {
     cleanHTML,
     debounce,
@@ -2962,8 +3108,10 @@ export {
     getCellPosition,
     makeUnorderedList,
     makeOrderedList,
+    showTooltip,
     makeHeading,
     makeBlockQuote,
     makeStrikethrough,
     makeCodeBlock,
+    makeSublist,
 }