leksy-editor 2.2.3 → 2.3.0

package/README.md

@@ -109,6 +109,7 @@ const app = createApp({
 | `onFullScreen` | To open custom preview |
 | `showTabs` | Enables or disables the display of tabs. |
 | `enableFindAndReplace` | To enabled find and replace feature|
+| `customTooltip` | Customize tooltip according to your need, set using key-value pair|
 
 ### CSS Customization
 
@@ -203,6 +204,10 @@ Similarly, Pexels and Tenor can be integrated using `pexels` and `tenor` plugins
 
 MIT License. Free to use and modify.
 
+## Contributing
+
+Contributions are welcome. Please review the [Contribution Guide](./contribution.md) before opening a pull request.
+
 ## Author
 
 Leksy Editor is developed and maintained by **Agami Technologies**.

package/contribution.md

@@ -0,0 +1,57 @@
+# Contribution Guide
+
+Thank you for contributing to Leksy Editor.
+
+## Project Overview
+
+Leksy Editor is a JavaScript editor package with example integrations for React and Vue. The main source files live in the repository root, and example apps are available in the `examples/` directory.
+
+## Getting Started
+
+1. Fork the repository.
+2. Clone your fork locally.
+3. Install dependencies:
+
+```sh
+npm install
+```
+
+4. Review the example projects if your change affects framework integrations:
+
+```sh
+cd examples/react && npm install
+cd ../vue-cdn && npm install
+```
+
+## Contribution Workflow
+
+1. Create a feature branch for your work.
+2. Keep changes focused and avoid unrelated refactors.
+3. Update documentation when behavior, APIs, or examples change.
+4. Verify the impacted flows manually before opening a pull request.
+
+## Code Guidelines
+
+- Follow the existing code style and file structure.
+- Prefer small, readable changes over large rewrites.
+- Preserve backward compatibility unless the change is intentional and documented.
+- If you add or change a plugin-related behavior, confirm the editor still works in the example apps.
+
+## Testing
+
+This repository does not currently include an automated test suite. Before submitting a change:
+
+- Run the package locally and validate the affected editor behavior.
+- Check the relevant example app when applicable.
+- Confirm there are no obvious console errors or broken interactions.
+
+## Pull Request Checklist
+
+- The change is limited to the intended scope.
+- Documentation has been updated if needed.
+- Example usage has been reviewed if the public API changed.
+- Manual verification has been completed.
+
+## Contributor Reference
+
+Profile: [Chetan Gupta](https://github.com/chetanguptamrt)

package/index.js

@@ -178,7 +178,7 @@ class LeksyEditor {
                 syncRemoteChangesDebounce(core)
                 updateOutlineItems(core, options)
             },
-            onSave:() => {
+            onSave: () => {
                 if (editorRef.onSave instanceof Function) editorRef.onSave()
             },
             onBlur: (html) => {
@@ -416,6 +416,7 @@ class LeksyEditor {
             }
 
             const _plugin = PLUGINS[plugin] ?? options.customPlugins?.[plugin];
+            _plugin.pluginId = plugin
             /******************************* validations ******************************* */
             if (!_plugin) throw Error(ERRORS.INVALID_PLUGIN);
             if (_plugin.title === 'GIPHY' && !options.giphyApiKey) throw Error(ERRORS.GIPHY_KEY_NOT_FOUND);
@@ -700,9 +701,9 @@ class LeksyEditor {
                     applyTextFormat(core, 'underline')
                 } else if (event.key === 'i') {
                     applyTextFormat(core, 'italic')
-                } else if (event.key === 'f' || event.key === 'h'){
+                } else if (event.key === 'f' || event.key === 'h') {
                     findAndReplace(core, options, event)
-                } else if (event.key === 's'){
+                } else if (event.key === 's') {
                     core.onSave();
                 }
             }
@@ -855,7 +856,7 @@ class LeksyEditor {
                 range.setStart(textNode, textNode.length);
                 range.collapse(true);
             }
-            
+
             handleBackspaceInList(event, core);
 
             if (!isLinkCreated) core.elements.lastCreatedLink = null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "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/utilities.js

@@ -184,13 +184,16 @@ const showTooltip = (options) => {
     });
 };
 
+const getTooltip = (plugin, options) => {
+    return options?.customTooltip?.[plugin.pluginId] ?? plugin.title
+}
 
 const makeToolbarButton = (_plugin, options, core) => {
     const pluginButton = document.createElement('button');
     pluginButton.type = "button"
     pluginButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${_plugin.type === 'reset-color' ? 'reset-color' : ''}`
 
-    pluginButton.dataset.title = _plugin.title
+    pluginButton.dataset.title = getTooltip(_plugin, options)
     pluginButton.dataset.type = 'button'
     pluginButton.onclick = (e) => {
         e.preventDefault();
@@ -209,7 +212,7 @@ const makeToolbarButtonSelect = (_plugin, options, core) => {
     pluginButton.type = "button"
     pluginButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${_plugin.type === 'button-select' ? CLASSES.TOOLBAR_ITEM_BUTTON_SELECT : ''}`
 
-    pluginButton.dataset.title = _plugin.title
+    pluginButton.dataset.title = getTooltip(_plugin, options)
     pluginButton.dataset.type = 'button'
     pluginButton.onclick = (e) => {
         e.preventDefault();
@@ -233,7 +236,7 @@ const makeToolbarButtonSelect = (_plugin, options, core) => {
 const makeToolbarColor = (_plugin, options, core) => {
     const pluginContainer = document.createElement('div');
     pluginContainer.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_COLOR}`
-    pluginContainer.dataset.title = _plugin.title
+    pluginContainer.dataset.title = getTooltip(_plugin, options)
     pluginContainer.dataset.type = 'color'
 
     const pluginButton = document.createElement('input');
@@ -326,7 +329,7 @@ const makeToolbarDropdown = (_plugin, options, core) => {
     const dropdownButton = document.createElement('button');
     dropdownButton.type = "button"
     dropdownButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`
-    dropdownButton.setAttribute('data-title', _plugin.title)
+    dropdownButton.setAttribute('data-title', getTooltip(_plugin, options))
 
     const pluginIcon = document.createElement('div');
     pluginIcon.innerHTML = _plugin.icon;
@@ -569,7 +572,7 @@ const makeToolbarSelect = (_plugin, options, core) => {
     const dropdownButton = document.createElement('button');
     dropdownButton.type = "button"
     dropdownButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_SELECT} ${_plugin.type === 'button-select' ? CLASSES.TOOLBAR_ITEM_BUTTON_SELECT : ''}`
-    dropdownButton.dataset.title = _plugin.type == 'button-select' ? `Options` : _plugin.title
+    dropdownButton.dataset.title = _plugin.type == 'button-select' ? `Options` : getTooltip(_plugin, options)
 
     const pluginIcon = document.createElement('div');
     pluginIcon.style.width = _plugin.width
@@ -3219,6 +3222,12 @@ const outdentListItem = (li, core) => {
     }
 };
 
+const isEmptyLi = (li) => {
+    const text = li.textContent.replace(/\u200B/g, '').trim();
+    const hasOnlySublist = li.children.length === 1 && li.querySelector('ul, ol');
+    return text === '' && !hasOnlySublist;
+}
+
 const makeSublist = (event, core) => {
     if (event.key !== 'Tab') return;
 
@@ -3247,6 +3256,11 @@ const makeSublist = (event, core) => {
 
     if (!selectedLis.length) return;
 
+    if (!event.shiftKey) {
+        const hasContent = selectedLis.some(li => !isEmptyLi(li));
+        if (hasContent) return;
+    }
+
     event.preventDefault();
 
     selectedLis.forEach(li => {
@@ -3943,7 +3957,7 @@ const handleBackspaceInList = (event, core) => {
     const nestedList = li.querySelector('ul, ol');
     if (!nestedList) return;
 
-    
+
     if (!isCaretAtStart(range, li)) return;
 
     event.preventDefault();
@@ -3981,7 +3995,7 @@ const handleBackspaceInList = (event, core) => {
 
         selection.removeAllRanges();
         selection.addRange(newRange);
-    } 
+    }
     // Case 2: first list item
     else {
         const span = document.createElement('span');