@adminforth/rich-editor 1.2.0 → 1.2.2

package/README.md

@@ -0,0 +1,7 @@
+# AdminForth RichEditor Plugin
+
+<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /> <img src="https://woodpecker.devforth.io/api/badges/3848/status.svg" alt="Build Status" /> <a href="https://www.npmjs.com/package/@adminforth/rich-editor"> <img src="https://img.shields.io/npm/dt/@adminforth/rich-editor" alt="npm downloads" /></a> <a href="https://www.npmjs.com/package/@adminforth/rich-editor"><img src="https://img.shields.io/npm/v/@adminforth/rich-editor" alt="npm version" /></a> <a href="https://www.npmjs.com/package/@adminforth/rich-editor">
+
+Allows to add a rich text editor to your AdminForth text columns.
+
+## For ussage, see [AdminForth RichEditor Documentation](https://adminforth.dev/docs/tutorial/Plugins/RichEditor/)

package/build.log

@@ -10,5 +10,5 @@ custom/package.json
 custom/quillEditor.vue
 custom/tsconfig.json
 
-sent 19,594 bytes  received 115 bytes  39,418.00 bytes/sec
-total size is 19,183  speedup is 0.97
+sent 20,973 bytes  received 115 bytes  42,176.00 bytes/sec
+total size is 20,550  speedup is 0.97

package/custom/quillEditor.vue

@@ -27,7 +27,6 @@ import AsyncQueue from './async-queue';
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 
-
 function dbg(title: string,...args: any[]) {
   // return; // comment for debug
   console.log(title, ...args.map(a =>JSON.stringify(a, null, 1))); 
@@ -292,7 +291,16 @@ onMounted(() => {
 async function emitTextUpdate() {
   const editorHtml = quill.root.innerHTML;
   // remove completion from html
-  const html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+  let html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+  
+  // remove all style attributes
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const elements = doc.querySelectorAll('*');
+  elements.forEach((el) => {
+    el.removeAttribute('style');
+  });
+  html = doc.body.innerHTML;
 
   if (lastText === html) {
     return;
@@ -527,8 +535,76 @@ function removeCompletionOnBlur() {
     font-style: italic;
   }
 
-  .ql-editor p {
-    margin-bottom: 0.5rem;
+  // basic typography
+  .ql-editor {
+    line-height: 1.5;
+
+    /* Headings */
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+    /* Paragraphs */
+    p {
+      margin-bottom: 0.4rem;
+    }
+
+    /* Lists */
+    ul, ol {
+      margin-top: 0.4rem;
+      margin-bottom: 0.4rem;
+      padding-left: 1rem;
+    }
+
+    /* List items */
+    li {
+      margin-bottom: 0.2rem;
+    }
+
+    /* Horizontal rule */
+    hr {
+      margin: 0.8rem 0;
+      border: none;
+      border-top: 1px solid #ddd;
+    }
+
+    /* Blockquotes */
+    blockquote {
+      margin: 0.8rem 0;
+      padding-left: 0.8rem;
+      border-left: 2px solid #ccc;
+    }
+
+    /* Preformatted text */
+    pre {
+      margin: 0.8rem 0;
+      padding: 0.4rem;
+      background: #f8f9fa;
+      border-radius: 3px;
+    }
+
+    /* Tables */
+    table {
+      margin: 0.8rem 0;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      padding: 0.3rem;
+      border: 1px solid #ddd;
+    }
+
+    thead th {
+      border-bottom: 1.5px solid #aaa;
+    }
+
+    /* Images */
+    img {
+      margin: 0.4rem 0;
+      max-width: 100%;
+      height: auto;
+    }
   }
 
   .ql-snow .ql-stroke {

package/dist/custom/quillEditor.vue

@@ -27,7 +27,6 @@ import AsyncQueue from './async-queue';
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 
-
 function dbg(title: string,...args: any[]) {
   // return; // comment for debug
   console.log(title, ...args.map(a =>JSON.stringify(a, null, 1))); 
@@ -292,7 +291,16 @@ onMounted(() => {
 async function emitTextUpdate() {
   const editorHtml = quill.root.innerHTML;
   // remove completion from html
-  const html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+  let html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+  
+  // remove all style attributes
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const elements = doc.querySelectorAll('*');
+  elements.forEach((el) => {
+    el.removeAttribute('style');
+  });
+  html = doc.body.innerHTML;
 
   if (lastText === html) {
     return;
@@ -527,8 +535,76 @@ function removeCompletionOnBlur() {
     font-style: italic;
   }
 
-  .ql-editor p {
-    margin-bottom: 0.5rem;
+  // basic typography
+  .ql-editor {
+    line-height: 1.5;
+
+    /* Headings */
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+    /* Paragraphs */
+    p {
+      margin-bottom: 0.4rem;
+    }
+
+    /* Lists */
+    ul, ol {
+      margin-top: 0.4rem;
+      margin-bottom: 0.4rem;
+      padding-left: 1rem;
+    }
+
+    /* List items */
+    li {
+      margin-bottom: 0.2rem;
+    }
+
+    /* Horizontal rule */
+    hr {
+      margin: 0.8rem 0;
+      border: none;
+      border-top: 1px solid #ddd;
+    }
+
+    /* Blockquotes */
+    blockquote {
+      margin: 0.8rem 0;
+      padding-left: 0.8rem;
+      border-left: 2px solid #ccc;
+    }
+
+    /* Preformatted text */
+    pre {
+      margin: 0.8rem 0;
+      padding: 0.4rem;
+      background: #f8f9fa;
+      border-radius: 3px;
+    }
+
+    /* Tables */
+    table {
+      margin: 0.8rem 0;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      padding: 0.3rem;
+      border: 1px solid #ddd;
+    }
+
+    thead th {
+      border-bottom: 1.5px solid #aaa;
+    }
+
+    /* Images */
+    img {
+      margin: 0.4rem 0;
+      max-width: 100%;
+      height: auto;
+    }
   }
 
   .ql-snow .ql-stroke {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Rich editor plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",
@@ -9,6 +9,7 @@
     "prepare": "npm link adminforth",
     "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
   },
+  "homepage": "https://adminforth.dev/docs/tutorial/Plugins/RichEditor/",
   "repository": {
     "type": "git",
     "url": "https://github.com/devforth/adminforth-rich-editor.git"