leksy-editor 1.0.21 → 1.1.0

package/README.md

@@ -98,6 +98,9 @@ const app = createApp({
 | `pexelsApiKey` | API key for Pexels integration. |
 | `tenorApiKey` | API key for Tenor integration. |
 | `cssVariables` | Custom CSS styling variables for multiple themes and modes. |
+| `autoHeight` | Automatically adjusts height based on content. |
+| `maxHeight` | Maximum height for the editor. |
+| `minHeight` | Minimum height for the editor. |
 
 ### CSS Customization
 
@@ -118,6 +121,7 @@ cssVariables: {
   textColor: "hsl(216, 10%, 20%)",
   resizerPosition: "#fff",
   resizerPositionBackground: "#333",
+  linkColor: "#0000ff",
 }
 ```
 

package/constant.js

@@ -167,13 +167,14 @@ const CSS_VARIABLES = {
     resizerBackground: "hsl(211, 100%, 62%, 0.3)",
     shadow: "rgba(0, 0, 0, 0.3)",
     mention: " #efefef",
-    mentionHighlight: " #ddd",
+    mentionHighlight: "#ddd",
     dashedBorder: "gray",
     tableResizer: "cornsilk",
     tableResizerOutline: "darkblue",
     textColor: "hsl(216, 10%, 20%)",
     resizerPosition: "#fff",
-    resizerPositionBackground: " #333",
+    resizerPositionBackground: "#333",
+    linkColor: "#0000ff",
 }
 
 const CSS = {
@@ -194,11 +195,15 @@ const CSS = {
             --text-color: #000000;
             --resizer-position: #ffffff;
             --resizer-position-background: #333;
+            --link-color: blue;
         }
     `,
     IFRAME_TRIBUTE: `.tribute{height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:100;border:1px solid var(--base-white-dark)}.tribute ul{margin:2px 0 0;padding:0;list-style:none;background-color:var(--mention); color:var(--text-color)}.tribute .category{color:var(--text-color); padding:5px;color:var(--primary);background-color:var(--base-white)}.tribute .item{padding:5px;cursor:pointer}.tribute .highlight{background-color:var(--mention-highlight)}`,
     IFRAME_BODY: `
         body { margin: 0}
+        a {
+            color: var(--link-color);
+        }
         ::-webkit-scrollbar {
             width: 6px;
             height: 6px;

package/index.js

@@ -1,7 +1,7 @@
 import './style.css'
 import { CLASSES, CSS, CSS_VARIABLES, ERRORS, REGEX, SVG } from "./constant"
 import PLUGINS, { applyOrderList, 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 } from './utilities';
+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 } from './utilities';
 
 class LeksyEditor {
 
@@ -21,6 +21,9 @@ class LeksyEditor {
      * @property {String} tenorApiKey
      * @property {Object} cssVariables
      * @property {Boolean} disablePastedColorStyles
+     * @property {Boolean} autoHeight
+     * @property {String} maxHeight
+     * @property {String} minHeight
      */
     /**
      * 
@@ -46,7 +49,7 @@ class LeksyEditor {
                 base: baseElement,
                 toolbar: {},
             },
-            state: { isCodeViewOpen: false, page: 1, totalPages: null, next: null },
+            state: { isCodeViewOpen: false, page: 1, totalPages: null, next: null, tribute: null },
             html: options.value || '<div><br></div>',
             cursor: {
                 startIndex: 0,
@@ -127,6 +130,7 @@ class LeksyEditor {
                 }
             },
             onChange: (html = core.elements.editor.innerHTML) => {
+                updateHeight(core, options)
                 updateTableResizerPosition(options, core)
                 if (html === '<br>' || html === '<div><br></div>') html = ''
                 core.html = html;
@@ -243,6 +247,7 @@ class LeksyEditor {
             setContents: (html) => {
                 core.html = html
                 core.elements.editor.innerHTML = html
+                updateHeight(core, options)
             },
             getContents: () => core.html,
             onChange: () => { },
@@ -253,6 +258,46 @@ class LeksyEditor {
             uploadVideo: async () => { },
             focus: () => { core.elements.editor.focus() },
             getCore: () => core,
+            updateCssVariables: (newVariables) => {
+                const variableMap = {
+                    primary: '--primary',
+                    midDarker: '--white-mid-darker',
+                    baseWhite: '--base-white',
+                    whiteDark: '--base-white-dark',
+                    shadow: '--shadow',
+                    resizer: '--resizer',
+                    resizerBackground: '--resizer-background',
+                    mention: '--mention',
+                    mentionHighlight: '--mention-highlight',
+                    dashedBorder: '--dashed-border',
+                    tableResizer: '--table-resizer',
+                    tableResizerOutline: '--table-resizer-outline',
+                    textColor: '--text-color',
+                    resizerPosition: '--resizer-position',
+                    resizerPositionBackground: '--resizer-position-background',
+                    linkColor: '--link-color',
+                };
+
+                const mergedVariables = {
+                    ...CSS_VARIABLES,
+                    ...newVariables
+                };
+
+                Object.keys(variableMap).forEach(key => {
+                    const cssVar = variableMap[key];
+                    const value = mergedVariables[key];
+
+                    if (value !== undefined) {
+                        core.elements.iframeWindow.documentElement.style.setProperty(cssVar, value);
+                    }
+                });
+            },
+            updateLabels: (labels = []) => {
+                if (!core.state.tribute) return;
+
+                const values = buildTributeValues(labels);
+                core.state.tribute.append(0, values, true);
+            },
             getLocalCursor: () => core.cursor,
             setRemoteCursor: (user, cursor) => showRemoteCursor(core, user, cursor),
             onLocalCursorChange: () => { },
@@ -477,10 +522,15 @@ class LeksyEditor {
                 childList: true,
                 subtree: true
             });
+
+            // font / layout reflow
+            const ro = new ResizeObserver(() => {
+                updateHeight(core, options)
+            });
+            ro.observe(contentEditableDiv);
         }
 
         /***************************** for css theme variables ********************************* */
-
         if (options.cssVariables) {
             const cssVariable = options.cssVariables;
             const _CSS_VARIABLES = structuredClone(CSS_VARIABLES)
@@ -507,13 +557,19 @@ class LeksyEditor {
                     --text-color: ${_CSS_VARIABLES.textColor};
                     --resizer-position: ${_CSS_VARIABLES.resizerPosition};
                     --resizer-position-background: ${_CSS_VARIABLES.resizerPositionBackground};
+                    --link-color: ${_CSS_VARIABLES.linkColor};
                 }
             `;
         }
 
         const iframe = document.createElement('iframe');
         iframe.style.flex = '1 1 auto';
-        iframe.style.height = '250px'
+
+        if (options.autoHeight) iframe.style.height = 'auto';
+        else iframe.style.height = options.minHeight ?? '250px';
+        iframe.style.minHeight = options.minHeight ?? '250px';
+        if (options.maxHeight) iframe.style.maxHeight = options.maxHeight;
+
         iframe.style.border = '0';
         core.elements.base.appendChild(iframe)
 
@@ -554,6 +610,11 @@ class LeksyEditor {
         contentEditableDiv.spellcheck = !!options.spellcheck
         contentEditableDiv.innerHTML = core.html;
         contentEditableDiv.className = 'content-editable';
+        if (options.autoHeight) contentEditableDiv.style.height = 'auto';
+        else contentEditableDiv.style.height = options.minHeight ?? '250px';
+        contentEditableDiv.style.minHeight = options.minHeight ?? '250px';
+        if (options.maxHeight) contentEditableDiv.style.maxHeight = options.maxHeight;
+        if (options.autoHeight) iframe.contentDocument.body.style.overflow = 'hidden';
 
         contentEditableDiv.oninput = (e) => {
             core.onChange(e.target.innerHTML)
@@ -718,18 +779,8 @@ class LeksyEditor {
             script.src = "https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.js";
 
             script.onload = () => {
-                const tribute = new iframe.contentWindow.Tribute({
-                    values: options.labels.flatMap(category => {
-                        const fields = [
-                            { key: category.name, isCategory: true },
-                            ...category.fields.map(field => ({
-                                key: field.name,
-                                value: field.value,
-                            }))
-                        ];
-
-                        return fields
-                    }),
+                core.state.tribute = new iframe.contentWindow.Tribute({
+                    values: buildTributeValues(options.labels),
                     noMatchTemplate: () => '<li>No match found</li>',
                     menuItemTemplate: (item) => {
                         if (item.original.isCategory) return `<div class="category">${item.original.key}</div>`;
@@ -741,7 +792,7 @@ class LeksyEditor {
                         return `<span spellcheck="false" contentEditable="false" data-id="${item.original.value}">${item.original.key}</span>`;
                     },
                 });
-                tribute.attach(contentEditableDiv);
+                core.state.tribute.attach(contentEditableDiv);
                 makeObserver()
             };
             iframeDoc.body.appendChild(script);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "1.0.21",
+  "version": "1.1.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/plugin.js

@@ -542,22 +542,32 @@ const PLUGINS = {
                 }
             }
             const body = document.createElement('div')
+            const linkLabel = document.createElement("label");
+            linkLabel.innerText = "Link";
+            linkLabel.style.display = "block";
+            linkLabel.style.paddingLeft = "4px";
+
             const inputLink = document.createElement('input');
             inputLink.value = anchorLink
             inputLink.type = 'text'
             inputLink.placeholder = 'Insert link, mail, phone no'
             inputLink.addEventListener('keydown', onInputKeydown);
 
+            const textLabel = document.createElement("label");
+            textLabel.innerText = "Link Text";
+            textLabel.style.display = "block";
+            textLabel.style.paddingLeft = "4px";
+            textLabel.style.marginTop = "8px";
+
             const inputText = document.createElement('input');
             inputText.value = anchorText
             inputText.type = 'text'
-            inputText.style.marginTop = '8px'
             inputText.placeholder = 'Link text'
             inputText.addEventListener('keydown', onInputKeydown);
 
             const span = document.createElement('span');
             span.className = 'warning'
-            body.append(inputLink, inputText, span);
+            body.append(linkLabel, inputLink, span, textLabel, inputText);
 
             const footer = document.createElement('div')
             const button = document.createElement('button')
@@ -622,7 +632,7 @@ const PLUGINS = {
                     modal.close()
                     core.elements.editor.focus();
                 } else {
-                    span.innerText = 'Invalid link.'
+                    span.innerText = 'Invalid URL'
                 }
             };
             core.updateCaretPosition()
@@ -740,9 +750,9 @@ const PLUGINS = {
                 const uploadBtn = document.createElement('button');
                 uploadBtn.innerText = 'Choose Image';
                 uploadBtn.type = 'button';
-                uploadBtn.style.border = '2px solid grey';
+                uploadBtn.style.border = '1px solid grey';
                 uploadBtn.style.padding = '4px';
-                uploadBtn.style.borderRadius = '8px';
+                uploadBtn.style.borderRadius = '6px';
 
 
                 // Span to show selected file name
@@ -754,17 +764,21 @@ const PLUGINS = {
                     fileInput.click(); // Trigger file input
                 });
 
+                const altLabel = document.createElement("label");
+                altLabel.innerText = "Alternative Text";
+                altLabel.style.display = "block";
+                altLabel.style.paddingLeft = "4px";
+                altLabel.style.marginTop = '10px';
 
                 const altInput = document.createElement('input');
                 altInput.type = 'text';
                 altInput.placeholder = 'Alternative Text';
-                altInput.style.marginTop = '10px';
                 altInput.addEventListener('keydown', onInputKeydown);
 
                 const span = document.createElement('span');
                 span.className = 'warning';
 
-                body.append(fileInput, uploadBtn, fileNameSpan, altInput, span);
+                body.append(fileInput, uploadBtn, fileNameSpan, altLabel, altInput, span);
 
                 const footer = document.createElement('div');
                 const button = document.createElement('button');
@@ -835,22 +849,34 @@ const PLUGINS = {
                 }
 
                 const body = document.createElement('div')
+
+                const linkLabel = document.createElement("label");
+                linkLabel.innerText = "Link";
+                linkLabel.style.display = "block";
+                linkLabel.style.paddingLeft = "4px";
+
                 const input = document.createElement('input');
                 input.value = ''
                 input.type = 'text'
                 input.placeholder = 'Insert the link'
                 input.addEventListener('keydown', onInputKeydown);
 
+                const textLabel = document.createElement("label");
+                textLabel.innerText = "Alternative Text";
+                textLabel.style.display = "block";
+                textLabel.style.marginTop = "8px";
+                textLabel.style.paddingLeft = "4px";
+
                 const altInput = document.createElement('input');
                 altInput.value = ''
-                altInput.style.marginTop = '10px'
+                altInput.style.marginTop = '4px'
                 altInput.type = 'text'
                 altInput.placeholder = 'Alternative Text'
                 altInput.addEventListener('keydown', onInputKeydown);
 
                 const span = document.createElement('span');
                 span.className = 'warning'
-                body.append(input, altInput, span);
+                body.append(linkLabel, input, span, textLabel, altInput);
 
                 const footer = document.createElement('div')
                 const button = document.createElement('button')
@@ -1085,6 +1111,10 @@ const PLUGINS = {
             body.className = "link"
 
             // Input for Embed URL
+            const embedLabel = document.createElement("label");
+            embedLabel.innerText = "Embed URL";
+            embedLabel.style.display = "block";
+            embedLabel.style.paddingLeft = "4px";
             const urlInput = document.createElement('input');
             urlInput.type = 'text';
             urlInput.placeholder = 'Enter Embed URL';
@@ -1092,6 +1122,10 @@ const PLUGINS = {
             urlInput.addEventListener('keydown', onInputKeydown);
 
             // Input for Width (%)
+            const widthLabel = document.createElement("label");
+            widthLabel.innerText = "Width";
+            widthLabel.style.display = "block";
+            widthLabel.style.paddingLeft = "4px";
             const widthInput = document.createElement('input');
             widthInput.type = 'text';
             widthInput.placeholder = 'Width (px)';
@@ -1099,6 +1133,10 @@ const PLUGINS = {
             widthInput.value = "400"; // Default to 400px
 
             // Input for Height (%)
+            const heightLabel = document.createElement("label");
+            heightLabel.innerText = "Height";
+            heightLabel.style.display = "block";
+            heightLabel.style.paddingLeft = "4px";
             const heightInput = document.createElement('input');
             heightInput.type = 'text';
             heightInput.placeholder = 'Height (px)';
@@ -1109,7 +1147,7 @@ const PLUGINS = {
             const span = document.createElement('span');
             span.className = 'warning';
 
-            body.append(urlInput, widthInput, heightInput, span);
+            body.append(embedLabel, urlInput, widthLabel, widthInput, heightLabel, heightInput, span);
 
             const footer = document.createElement('div');
             const button = document.createElement('button');

package/utilities.js

@@ -1859,23 +1859,33 @@ const editAnchorTag = (event, core, options) => {
 
     const body = document.createElement("div");
 
+    const linkLabel = document.createElement("label");
+    linkLabel.innerText = "Link";
+    linkLabel.style.display = "block";
+    linkLabel.style.paddingLeft = "4px";
+
     // Link Input
     const inputLink = document.createElement("input");
     inputLink.value = anchorLink;
     inputLink.type = "text";
-    inputLink.placeholder = "Insert the link";
+    inputLink.placeholder = "Insert link, mail, phone no";
+
+    const textLabel = document.createElement("label");
+    textLabel.innerText = "Link Text";
+    textLabel.style.display = "block";
+    textLabel.style.marginTop = "8px";
+    textLabel.style.paddingLeft = "4px";
 
     // Text Input
     const inputText = document.createElement("input");
     inputText.value = anchorText;
     inputText.type = "text";
-    inputText.style.marginTop = "8px";
     inputText.placeholder = "Link text";
 
     const span = document.createElement("span");
     span.className = "warning";
 
-    body.append(inputLink, inputText, span);
+    body.append(linkLabel, inputLink, span, textLabel, inputText);
 
     // Footer (Buttons)
     const footer = document.createElement("div");
@@ -1944,10 +1954,10 @@ const destroyAnchorPopover = (core) => {
 };
 
 function getCharIndex(root, node, offset) {
-  const range = document.createRange();
-  range.selectNodeContents(root);
-  range.setEnd(node, offset);
-  return range.toString().length;
+    const range = document.createRange();
+    range.selectNodeContents(root);
+    range.setEnd(node, offset);
+    return range.toString().length;
 }
 
 const getNodeAndOffsetFromIndex = (root, index) => {
@@ -2155,43 +2165,43 @@ const syncRemoteChanges = (core) => {
 const syncRemoteChangesDebounce = debounce(syncRemoteChanges, 50)
 
 const applyRemoteChanges = (core, diffs) => {
-  const editor = core.elements.editor;
-  const iframeWindow = core.elements.iframeWindow;
-  if (!editor || !diffs?.diffs) return;
-
-  const selection = iframeWindow.getSelection();
-  let saved = null;
-
-  if (selection && selection.rangeCount > 0) {
-    const range = selection.getRangeAt(0);
-    if (editor.contains(range.startContainer) && editor.contains(range.endContainer)) {
-      // Save selection as indexes (pre-change)
-      saved = {
-        start: getCharIndex(editor, range.startContainer, range.startOffset),
-        end: getCharIndex(editor, range.endContainer, range.endOffset),
-      };
-    }
-  }
-
-  requestAnimationFrame(() => {
-    dd.apply(editor, diffs.diffs); // Apply patch
-    core.state.previousDOM = editor.cloneNode(true); // Update snapshot
-
-    if (saved) {
-      const newStart = getNodeAndOffsetFromIndex(editor, saved.start);
-      const newEnd = getNodeAndOffsetFromIndex(editor, saved.end);
-      if (newStart && newEnd) {
-        const newRange = iframeWindow.createRange();
-        newRange.setStart(newStart.node, newStart.offset);
-        newRange.setEnd(newEnd.node, newEnd.offset);
-        const sel = iframeWindow.getSelection();
-        if (sel) {
-          sel.removeAllRanges();
-          sel.addRange(newRange);
+    const editor = core.elements.editor;
+    const iframeWindow = core.elements.iframeWindow;
+    if (!editor || !diffs?.diffs) return;
+
+    const selection = iframeWindow.getSelection();
+    let saved = null;
+
+    if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        if (editor.contains(range.startContainer) && editor.contains(range.endContainer)) {
+            // Save selection as indexes (pre-change)
+            saved = {
+                start: getCharIndex(editor, range.startContainer, range.startOffset),
+                end: getCharIndex(editor, range.endContainer, range.endOffset),
+            };
         }
-      }
     }
-  });
+
+    requestAnimationFrame(() => {
+        dd.apply(editor, diffs.diffs); // Apply patch
+        core.state.previousDOM = editor.cloneNode(true); // Update snapshot
+
+        if (saved) {
+            const newStart = getNodeAndOffsetFromIndex(editor, saved.start);
+            const newEnd = getNodeAndOffsetFromIndex(editor, saved.end);
+            if (newStart && newEnd) {
+                const newRange = iframeWindow.createRange();
+                newRange.setStart(newStart.node, newStart.offset);
+                newRange.setEnd(newEnd.node, newEnd.offset);
+                const sel = iframeWindow.getSelection();
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.addRange(newRange);
+                }
+            }
+        }
+    });
 }
 
 const isLinkValid = (link) => {
@@ -2215,6 +2225,41 @@ const formatLink = (value) => {
     return trimmed;
 };
 
+const buildTributeValues = (labels = []) => {
+    return labels.flatMap(category => ([
+        { key: category.name, isCategory: true },
+        ...category.fields.map(field => ({
+            key: field.name,
+            value: field.value,
+        }))
+    ]));
+};
+
+function toPx(value, el = document.body) {
+    if (!value) return null;
+    if (typeof value === 'number') return value;
+
+    const tmp = document.createElement('div');
+    tmp.style.width = value;
+    tmp.style.position = 'absolute';
+    tmp.style.visibility = 'hidden';
+    el.appendChild(tmp);
+    const px = tmp.getBoundingClientRect().width;
+    tmp.remove();
+    return px;
+}
+
+const updateHeight = (core, options) => {
+    if (options.autoHeight) {
+        let h = core.elements.editor.scrollHeight;
+        const minH = toPx(options.minHeight, core.elements.iframeContainer.parentElement);
+        const maxH = toPx(options.maxHeight, core.elements.iframeContainer.parentElement);
+        if (minH != null) h = Math.max(h, minH);
+        if (maxH != null) h = Math.min(h, maxH);
+        core.elements.iframeContainer.style.height = h + 'px';
+    }
+}
+
 export {
     cleanHTML,
     debounce,
@@ -2243,4 +2288,7 @@ export {
     updateCursorPositionDebounce,
     isLinkValid,
     formatLink,
+    buildTributeValues,
+    toPx,
+    updateHeight,
 }