tulih-editor 0.1.0

package/src/plugins/hr.ts

@@ -0,0 +1,118 @@
+import type { Plugin, PluginContext } from '../types';
+
+const hr: Plugin = {
+  name: 'hr',
+  order: 55,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Horizontal rule" data-cmd="insertHR"><i class="ti ti-minus"></i></button>',
+  css: '' +
+    '.te-hr-popup {' +
+    '  position: fixed; display: none; z-index: 3000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .5rem; white-space: nowrap;' +
+    '}' +
+    '.te-hr-popup .btn {' +
+    '  padding: .15rem .4rem !important; font-size: 1rem !important; line-height: 1 !important;' +
+    '  margin-right: 2px;' +
+    '}' +
+    '.te-hr-popup .btn.active { background: #e7f1ff; border-color: #b6d4fe; }' +
+    '.te-hr-popup input[type="color"] {' +
+    '  width: 26px; height: 22px; padding: 1px; border: 1px solid #dee2e6;' +
+    '  border-radius: 3px; cursor: pointer; vertical-align: middle;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.hr) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="insertHR"]');
+    if(!btn) return;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-hr-popup';
+    popup.innerHTML = '' +
+      '<button type="button" class="btn btn-sm btn-light active" data-te-hr="solid" title="Solid">━</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-hr="dashed" title="Dashed">┅</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-hr="dotted" title="Dotted">┈</button>' +
+      '<input type="color" class="te-hr-color" value="#cccccc" title="HR color" />';
+    document.body.appendChild(popup);
+
+    var currentStyle = 'solid';
+    var currentColor = '#cccccc';
+    var savedRange: Range | null = null;
+
+    function saveEditorRange(): void{
+      var sel = window.getSelection();
+      if(sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
+      else savedRange = null;
+    }
+
+    function restoreEditorRange(): void{
+      if(!savedRange) return;
+      var sel = window.getSelection();
+      sel!.removeAllRanges();
+      sel!.addRange(savedRange);
+    }
+
+    function posPopup(): void{
+      var br = (btn as HTMLElement).getBoundingClientRect();
+      var pw = popup.offsetWidth || 200;
+      var left = br.left + (br.width / 2) - (pw / 2);
+      if(left < 4) left = 4;
+      if(left + pw > window.innerWidth - 4) left = window.innerWidth - pw - 4;
+      popup.style.left = left + 'px';
+      popup.style.top = (br.bottom + 4) + 'px';
+    }
+
+    function insertHR(): void{
+      ctx.editor.focus();
+      restoreEditorRange();
+      var style = 'border: none; border-top: 2px ' + currentStyle + ' ' + currentColor + '; margin: 1em 0;';
+      document.execCommand('insertHTML', false, '<hr style="' + style + '">');
+      hidePopup();
+    }
+
+    function hidePopup(): void{ popup.style.display = 'none'; }
+    function showPopup(): void{
+      saveEditorRange();
+      popup.style.display = 'block';
+      posPopup();
+    }
+
+    btn.addEventListener('click', function(e: Event){
+      (e as MouseEvent).preventDefault();
+      (e as MouseEvent).stopPropagation();
+      if(popup.style.display === 'block'){ hidePopup(); return; }
+      showPopup();
+    });
+
+    popup.addEventListener('mousedown', function(e: MouseEvent){
+      var opt = (e.target as HTMLElement).closest('[data-te-hr]');
+      if(opt){
+        e.preventDefault();
+        currentStyle = opt.getAttribute('data-te-hr')!;
+        popup.querySelectorAll('[data-te-hr]').forEach(function(b){ b.classList.remove('active'); });
+        opt.classList.add('active');
+        insertHR();
+        return;
+      }
+    });
+
+    popup.addEventListener('change', function(e: Event){
+      var inp = (e.target as HTMLElement).closest('.te-hr-color');
+      if(inp){
+        currentColor = (inp as HTMLInputElement).value;
+        insertHR();
+      }
+    });
+
+    document.addEventListener('click', function(e: MouseEvent){
+      if(popup.style.display !== 'block') return;
+      if(!popup.contains(e.target as Node) && e.target !== btn && !(btn as HTMLElement).contains(e.target as Node)){
+        hidePopup();
+      }
+    });
+
+    window.addEventListener('scroll', function(){ if(popup.style.display === 'block') posPopup(); });
+    window.addEventListener('resize', function(){ if(popup.style.display === 'block') posPopup(); });
+  }
+};
+
+export default hr;

package/src/plugins/iframe.ts

@@ -0,0 +1,88 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+const iframe: Plugin = {
+  name: 'iframe',
+  order: 53,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Iframe" data-cmd="insertIframe"><i class="ti ti-video"></i></button>',
+  modalHTML: '' +
+    '<div class="te-iframe-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Insert Iframe</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <form class="te-iframe-form">' +
+    '      <div class="te-modal-body">' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Src URL</label>' +
+    '          <input type="url" class="te-iframe-src form-control" placeholder="https://..." required>' +
+    '        </div>' +
+    '        <div class="row g-2 mb-3">' +
+    '          <div class="col">' +
+    '            <label class="form-label">Width (px)</label>' +
+    '            <input type="number" min="0" class="te-iframe-width form-control" placeholder="640">' +
+    '          </div>' +
+    '          <div class="col">' +
+    '            <label class="form-label">Height (px)</label>' +
+    '            <input type="number" min="0" class="te-iframe-height form-control" placeholder="360">' +
+    '          </div>' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Allow (optional)</label>' +
+    '          <input type="text" class="te-iframe-allow form-control" placeholder="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">' +
+    '        </div>' +
+    '        <div class="form-check mb-2">' +
+    '          <input class="te-iframe-allowfullscreen form-check-input" type="checkbox" checked>' +
+    '          <label class="form-check-label">Allow Fullscreen</label>' +
+    '        </div>' +
+    '        <div class="mb-2">' +
+    '          <label class="form-label">Title (accessibility, optional)</label>' +
+    '          <input type="text" class="te-iframe-title form-control" placeholder="Embedded content description">' +
+    '        </div>' +
+    '      </div>' +
+    '      <div class="te-modal-footer">' +
+    '        <button type="button" class="btn btn-outline-secondary" data-te-close>Cancel</button>' +
+    '        <button type="submit" class="btn btn-primary">Insert</button>' +
+    '      </div>' +
+    '    </form>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.iframe) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="insertIframe"]') as HTMLButtonElement | null;
+    if(btn){
+      btn.addEventListener('click', function(){
+        ctx.saveSel();
+        var m = ctx.wrapper.querySelector('.te-iframe-modal') as HTMLElement | null;
+        if(m) m.classList.add('is-open');
+      });
+    }
+    var form = ctx.wrapper.querySelector('.te-iframe-form') as HTMLFormElement | null;
+    if(form){
+      form.addEventListener('submit', function(e: Event){
+        e.preventDefault();
+        ctx.restoreSel();
+        var src = ((ctx.wrapper.querySelector('.te-iframe-src') as HTMLInputElement).value || '').trim();
+        var w = ((ctx.wrapper.querySelector('.te-iframe-width') as HTMLInputElement).value || '').trim();
+        var h = ((ctx.wrapper.querySelector('.te-iframe-height') as HTMLInputElement).value || '').trim();
+        if(!src) return;
+        var allowOk = ctx.utils.isAllowedIframeUrl ? ctx.utils.isAllowedIframeUrl(src) : true;
+        if(!allowOk) return;
+        var attrs = ' src="' + src.replace(/"/g,'&quot;') + '"';
+        if(w) attrs += ' width="' + w.replace(/"/g,'&quot;') + '"';
+        if(h) attrs += ' height="' + h.replace(/"/g,'&quot;') + '"';
+        var sandbox = (ctx.options && ctx.options.iframeSandbox) || '';
+        var allow = (ctx.options && ctx.options.iframeAllow) || '';
+        if(sandbox) attrs += ' sandbox="' + sandbox.replace(/"/g,'&quot;') + '"';
+        if(allow) attrs += ' allow="' + allow.replace(/"/g,'&quot;') + '"';
+        var html = '<iframe' + attrs + ' style="max-width:100%;border:0;"></iframe>';
+        document.execCommand('insertHTML', false, html);
+        (form!.closest('.te-modal') as HTMLElement).classList.remove('is-open');
+      });
+    }
+  }
+};
+
+export default iframe;

package/src/plugins/image.ts

@@ -0,0 +1,107 @@
+import type { Plugin, PluginContext } from '../types';
+
+const image: Plugin = {
+  name: 'image',
+  order: 51,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Image" data-cmd="insertImage"><i class="ti ti-photo"></i></button>',
+  modalHTML: '' +
+    '<div class="te-image-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Insert Image</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <form class="te-image-form">' +
+    '      <div class="te-modal-body">' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Image URL</label>' +
+    '          <input type="text" class="te-image-url form-control" placeholder="/path/to/image.jpg or https://..." required>' +
+    '          <div class="mt-2"><button type="button" class="te-image-browse btn btn-sm btn-outline-secondary"><i class="ti ti-folder"></i> Browse...</button></div>' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Alt text (optional)</label>' +
+    '          <input type="text" class="te-image-alt form-control" placeholder="Description">' +
+    '        </div>' +
+    '      </div>' +
+    '      <div class="te-modal-footer">' +
+    '        <button type="button" class="btn btn-outline-secondary" data-te-close>Cancel</button>' +
+    '        <button type="submit" class="btn btn-primary">Insert</button>' +
+    '      </div>' +
+    '    </form>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.image) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="insertImage"]');
+    if(btn){
+      btn.addEventListener('click', function(){
+        ctx.saveSel();
+        var m = ctx.wrapper.querySelector('.te-image-modal');
+        if(m) m.classList.add('is-open');
+      });
+    }
+    var inputUrl = ctx.wrapper.querySelector('.te-image-url') as HTMLInputElement | null;
+
+    var browseBtn = ctx.wrapper.querySelector('.te-image-browse');
+    if(browseBtn){
+      browseBtn.addEventListener('click', function(e: Event){
+        e.preventDefault();
+        if(ctx.TulihEditor && typeof ctx.TulihEditor.onBrowseImage === 'function'){
+          ctx.TulihEditor.onBrowseImage({ container: ctx.wrapper, editor: ctx.editor }, function(url: string){
+            if(url && inputUrl){ inputUrl.value = url; inputUrl.focus(); }
+          });
+          return;
+        }
+        var fi = document.createElement('input');
+        fi.type = 'file';
+        fi.accept = 'image/*';
+        fi.style.display = 'none';
+        document.body.appendChild(fi);
+        fi.addEventListener('change', function(){
+          var file = fi.files && fi.files[0];
+          if(!file){ document.body.removeChild(fi); return; }
+          var r = new FileReader();
+          r.onload = function(){
+            if(inputUrl){
+              inputUrl.value = r.result as string;
+              inputUrl.focus();
+            }
+            document.body.removeChild(fi);
+          };
+          r.readAsDataURL(file);
+        });
+        fi.click();
+      });
+    }
+    var form = ctx.wrapper.querySelector('.te-image-form') as HTMLFormElement | null;
+    if(form){
+      form.addEventListener('submit', function(e: Event){
+        e.preventDefault();
+        var src = ((ctx.wrapper.querySelector('.te-image-url') as HTMLInputElement).value || '').trim();
+        var alt = ((ctx.wrapper.querySelector('.te-image-alt') as HTMLInputElement).value || '').trim();
+        if(!src) return;
+        var ok = ctx.utils.isSafeUrl ? ctx.utils.isSafeUrl(src, (ctx.options as any).imageSchemes || ['http','https','data']) : true;
+        if(!ok) return;
+        ctx.restoreSel();
+        ctx.editor.focus();
+        var img = document.createElement('img');
+        img.src = src;
+        if(alt) img.alt = alt;
+        var sel = window.getSelection();
+        if(sel && sel.rangeCount > 0){
+          var range = sel.getRangeAt(0);
+          range.deleteContents();
+          range.insertNode(img);
+          range.setStartAfter(img);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+        form!.closest('.te-modal')!.classList.remove('is-open');
+      });
+    }
+  }
+};
+
+export default image;

package/src/plugins/imageProps.ts

@@ -0,0 +1,119 @@
+import type { Plugin, PluginContext } from '../types';
+
+const imageProps: Plugin = {
+  name: 'imageProps',
+  order: 52,
+  deps: ['image'],
+  modalHTML: '' +
+    '<div class="te-image-props-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Image Properties</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <form class="te-image-props-form">' +
+    '      <div class="te-modal-body">' +
+    '        <div class="row g-2 mb-3">' +
+    '          <div class="col">' +
+    '            <label class="form-label">Width</label>' +
+    '            <input type="number" min="0" class="te-image-props-width form-control" placeholder="e.g. 800">' +
+    '          </div>' +
+    '          <div class="col">' +
+    '            <label class="form-label">Height</label>' +
+    '            <input type="number" min="0" class="te-image-props-height form-control" placeholder="e.g. 600">' +
+    '          </div>' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Alt</label>' +
+    '          <input type="text" class="te-image-props-alt form-control" placeholder="Alternative text">' +
+    '        </div>' +
+    '        <div class="row g-2">' +
+    '          <div class="col">' +
+    '            <label class="form-label">Class</label>' +
+    '            <input type="text" class="te-image-props-class form-control" placeholder="class-1 class-2">' +
+    '          </div>' +
+    '          <div class="col">' +
+    '            <label class="form-label">ID</label>' +
+    '            <input type="text" class="te-image-props-id form-control" placeholder="optional-id">' +
+    '          </div>' +
+    '        </div>' +
+    '        <div class="mb-3 mt-3">' +
+    '          <label class="form-label">Style (inline CSS)</label>' +
+    '          <input type="text" class="te-image-props-style form-control" placeholder="max-width:100%; height:auto;">' +
+    '        </div>' +
+    '      </div>' +
+    '      <div class="te-modal-footer">' +
+    '        <button type="button" class="btn btn-outline-secondary" data-te-close>Cancel</button>' +
+    '        <button type="submit" class="btn btn-primary">Apply</button>' +
+    '      </div>' +
+    '    </form>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.image || !ctx.features.imageProps) return;
+    var modal = ctx.wrapper.querySelector('.te-image-props-modal') as HTMLElement | null;
+    var form = ctx.wrapper.querySelector('.te-image-props-form') as HTMLFormElement | null;
+    var altInp = ctx.wrapper.querySelector('.te-image-props-alt') as HTMLInputElement | null;
+    var wInp = ctx.wrapper.querySelector('.te-image-props-width') as HTMLInputElement | null;
+    var hInp = ctx.wrapper.querySelector('.te-image-props-height') as HTMLInputElement | null;
+    var clsInp = ctx.wrapper.querySelector('.te-image-props-class') as HTMLInputElement | null;
+    var idInp = ctx.wrapper.querySelector('.te-image-props-id') as HTMLInputElement | null;
+    var styleInp = ctx.wrapper.querySelector('.te-image-props-style') as HTMLInputElement | null;
+    var currentImg: HTMLImageElement | null = null;
+
+    ctx.editor.addEventListener('dblclick', function(e: MouseEvent){
+      var img = e.target && ((e.target as Element).closest && (e.target as Element).closest('img')) as HTMLImageElement | null;
+      if(img && ctx.wrapper.contains(img) && modal){
+        currentImg = img;
+        if(altInp) altInp.value = img.getAttribute('alt') || '';
+        if(wInp) wInp.value = img.getAttribute('width') || '';
+        if(hInp) hInp.value = img.getAttribute('height') || '';
+        if(clsInp) clsInp.value = img.getAttribute('class') || '';
+        if(idInp) idInp.value = img.getAttribute('id') || '';
+        if(styleInp) styleInp.value = img.getAttribute('style') || '';
+        modal.classList.add('is-open');
+      }
+    });
+
+    if(form){
+      form.addEventListener('submit', function(e: Event){
+        e.preventDefault();
+        if(!currentImg){
+          if(modal) modal.classList.remove('is-open');
+          return;
+        }
+        var alt = (altInp && altInp.value) || '';
+        var w = (wInp && wInp.value) || '';
+        var h = (hInp && hInp.value) || '';
+        var cls = (clsInp && clsInp.value) || '';
+        var idv = (idInp && idInp.value) || '';
+        var style = (styleInp && styleInp.value) || '';
+        if(style){
+          var safeCss: string[] = [];
+          style.split(';').forEach(function(decl){
+            var idx = decl.indexOf(':');
+            if(idx === -1) return;
+            var prop = decl.slice(0, idx).trim().toLowerCase();
+            var val = decl.slice(idx + 1).trim();
+            var SAFE = ['color','background-color','font-family','font-size','font-style','font-weight','text-align','text-decoration','line-height','letter-spacing','word-spacing','margin','margin-top','margin-right','margin-bottom','margin-left','padding','padding-top','padding-right','padding-bottom','padding-left','border','border-collapse','border-color','border-style','border-width','border-radius','width','height','max-width','max-height','min-width','min-height','float','clear','vertical-align','direction','white-space'];
+            if(SAFE.indexOf(prop) !== -1) safeCss.push(prop + ':' + val);
+          });
+          style = safeCss.join(';');
+        }
+
+        if(alt) currentImg.setAttribute('alt', alt); else currentImg.removeAttribute('alt');
+        if(w) currentImg.setAttribute('width', w); else currentImg.removeAttribute('width');
+        if(h) currentImg.setAttribute('height', h); else currentImg.removeAttribute('height');
+        if(cls) currentImg.setAttribute('class', cls); else currentImg.removeAttribute('class');
+        if(idv) currentImg.setAttribute('id', idv); else currentImg.removeAttribute('id');
+        if(style) currentImg.setAttribute('style', style); else currentImg.removeAttribute('style');
+
+        if(modal) modal.classList.remove('is-open');
+        currentImg = null;
+      });
+    }
+  }
+};
+
+export default imageProps;