@lukso/web-components 1.160.4 → 1.161.2

package/dist/components/lukso-markdown-editor/index.js

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, E, x } from '../../index-B5CXCi6j.js';
-import { n, t } from '../../property-Da9lvmME.js';
-import { r } from '../../state-CtpsBPdH.js';
+import { T as TailwindStyledElement, E, x } from '../../index-CQq_Eyeu.js';
+import { n, t } from '../../property-CPkYmAYi.js';
+import { r } from '../../state-CtrTo6cC.js';
 import { e } from '../../query-CHb9Ft_d.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
@@ -10,7 +10,7 @@ import '../lukso-markdown/index.js';
 import '../lukso-switch/index.js';
 import '../lukso-button/index.js';
 import '../lukso-icon/index.js';
-import '../lukso-sanitize/index.js';
+import '../../index-JvkSiEeQ.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-tooltip/index.js';
@@ -201,6 +201,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const DEFAULT_PREVIEW_BACKGROUND_COLOR = "#f9f9f9";
 const DEFAULT_PREVIEW_TEXT_COLOR = "#374151";
+const ACCESSIBILITY_CHECK_DELAY = 1e3;
 let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -220,6 +221,18 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.placeholder = "";
     this.previewBackgroundColor = DEFAULT_PREVIEW_BACKGROUND_COLOR;
     this.previewTextColor = DEFAULT_PREVIEW_TEXT_COLOR;
+    this.stripHtmlTags = false;
+    this.tools = void 0;
+    this.toolsState = [];
+    this.defaultTools = [
+      "heading",
+      "bold",
+      "italic",
+      "list",
+      "link",
+      "alignment",
+      "color"
+    ];
     this.savedSelectionForPreview = null;
     this.isHeadingDropdownOpen = false;
     this.isColorDropdownOpen = false;
@@ -256,7 +269,6 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.accessibilityViolations = [];
     this.hasAccessibilityViolations = false;
     this.accessibilityCheckTimeout = null;
-    this.ACCESSIBILITY_CHECK_DELAY = 1e3;
     this.handleOutsideClick = (event) => {
       const target = event.target;
       const isInsideThisComponent = this.contains(target) || this.shadowRoot?.contains(target);
@@ -528,7 +540,25 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.accessibilityCheckTimeout = window.setTimeout(() => {
       this.performAccessibilityCheck();
       this.accessibilityCheckTimeout = null;
-    }, this.ACCESSIBILITY_CHECK_DELAY);
+    }, ACCESSIBILITY_CHECK_DELAY);
+  }
+  /**
+   * Clean up empty color spans from the value.
+   * This removes spans like <span style="color: #xxx"></span> with no content.
+   */
+  cleanupEmptyColorSpans() {
+    const emptyColorSpanRegex = /<span style="color: [^"]+"><\/span>/g;
+    const cleanedValue = this.value.replace(emptyColorSpanRegex, "");
+    if (cleanedValue !== this.value) {
+      this.value = cleanedValue;
+      const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+      if (textarea) {
+        const currentPos = textarea.selectionStart ?? 0;
+        textarea.value = cleanedValue;
+        const newPos = Math.min(currentPos, cleanedValue.length);
+        textarea.setSelectionRange(newPos, newPos);
+      }
+    }
   }
   /**
    * Unified helper that ensures both active format state and change events are properly
@@ -538,6 +568,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
    * @param event - Optional event that triggered the change
    */
   emitChangeAndRefresh(event) {
+    this.cleanupEmptyColorSpans();
     this.updateActiveFormats();
     this.dispatchChange(event);
     this.scheduleAccessibilityCheck();
@@ -827,9 +858,27 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       }
       this.value = before + transformed + after;
       textarea.value = before + transformed + after;
-      const cursorPosition = before.length + transformed.length;
+      let selStart;
+      let selEnd;
+      if (alignment === "left" || existingMatch && existingMatch[1] === alignment || this.getNestedAlignment(selected) === alignment) {
+        selStart = before.length;
+        selEnd = before.length + transformed.length;
+      } else {
+        const openTagMatch = transformed.match(
+          /<div style="text-align: (center|right);">([^<]*)<\/div>/
+        );
+        if (openTagMatch) {
+          const innerContent = openTagMatch[2];
+          const tagStart = transformed.indexOf(">") + 1;
+          selStart = before.length + tagStart;
+          selEnd = selStart + innerContent.length;
+        } else {
+          selStart = before.length;
+          selEnd = before.length + transformed.length;
+        }
+      }
       requestAnimationFrame(() => {
-        textarea.setSelectionRange(cursorPosition, cursorPosition);
+        textarea.setSelectionRange(selStart, selEnd);
         this.emitChangeAndRefresh();
       });
     });
@@ -1327,7 +1376,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       this.value = before + wrapped + after;
       textarea.value = before + wrapped + after;
       const selStart = before.length + newColorTagOpen.length;
-      const selEnd = selStart + (selected ? selected.length : 4);
+      const selEnd = selStart + (selected ? selected.length : 0);
       requestAnimationFrame(() => {
         textarea.setSelectionRange(selStart, selEnd);
         this.emitChangeAndRefresh();
@@ -2132,126 +2181,127 @@ ${indent}${nextNumber}. `;
   toolbarTemplate() {
     return x`
       <div class="flex items-center gap-1">
-        <div class=${cn(this.styles().headingMenu())}>
-          <!-- Heading -->
-          <lukso-tooltip text="Heading options" placement="top">
-            <lukso-button
-              id=${this.headingTriggerId}
-              @click=${(e) => {
+        <!-- Heading -->
+        ${this.toolsState.includes("heading") ? x`<div class=${cn(this.styles().headingMenu())}>
+              <lukso-tooltip text="Heading options" placement="top">
+                <lukso-button
+                  id=${this.headingTriggerId}
+                  @click=${(e) => {
       e.stopPropagation();
       this.isColorDropdownOpen = false;
       this.isListDropdownOpen = false;
       this.isAlignmentDropdownOpen = false;
       this.isHeadingDropdownOpen = !this.isHeadingDropdownOpen;
     }}
-              aria-expanded=${this.isHeadingDropdownOpen ? "true" : "false"}
-              aria-label="Heading options"
-              variant="secondary"
-              size="small"
-              custom-class=${this.toolbarButton({
+                  aria-expanded=${this.isHeadingDropdownOpen ? "true" : "false"}
+                  aria-label="Heading options"
+                  variant="secondary"
+                  size="small"
+                  custom-class=${this.toolbarButton({
       active: this.getActiveHeadingLevel() > 0
     })}
-              is-icon
-            >
-              <lukso-icon
-                name="smallcaps"
-                size="small"
-                pack="vuesax"
-                variant="linear"
-              ></lukso-icon>
-            </lukso-button>
-          </lukso-tooltip>
-          <lukso-dropdown
-            id="headingDropdown"
-            trigger-id=""
-            size="medium"
-            ?is-open=${this.isHeadingDropdownOpen}
-          >
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveHeadingLevel() === 0}
-              @click=${(e) => {
+                  is-icon
+                >
+                  <lukso-icon
+                    name="smallcaps"
+                    size="small"
+                    pack="vuesax"
+                    variant="linear"
+                  ></lukso-icon>
+                </lukso-button>
+              </lukso-tooltip>
+              <lukso-dropdown
+                id="headingDropdown"
+                trigger-id=""
+                size="medium"
+                ?is-open=${this.isHeadingDropdownOpen}
+              >
+                <lukso-dropdown-option
+                  ?is-selected=${this.getActiveHeadingLevel() === 0}
+                  @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyHeading(0);
       this.isHeadingDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Normal text
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveHeadingLevel() === 1}
-              @click=${(e) => {
+                  size="medium"
+                >
+                  Normal text
+                </lukso-dropdown-option>
+                <lukso-dropdown-option
+                  ?is-selected=${this.getActiveHeadingLevel() === 1}
+                  @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyHeading(1);
       this.isHeadingDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Heading 1
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveHeadingLevel() === 2}
-              @click=${(e) => {
+                  size="medium"
+                >
+                  Heading 1
+                </lukso-dropdown-option>
+                <lukso-dropdown-option
+                  ?is-selected=${this.getActiveHeadingLevel() === 2}
+                  @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyHeading(2);
       this.isHeadingDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Heading 2
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveHeadingLevel() === 3}
-              @click=${(e) => {
+                  size="medium"
+                >
+                  Heading 2
+                </lukso-dropdown-option>
+                <lukso-dropdown-option
+                  ?is-selected=${this.getActiveHeadingLevel() === 3}
+                  @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyHeading(3);
       this.isHeadingDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Heading 3
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveHeadingLevel() === 4}
-              @click=${(e) => {
+                  size="medium"
+                >
+                  Heading 3
+                </lukso-dropdown-option>
+                <lukso-dropdown-option
+                  ?is-selected=${this.getActiveHeadingLevel() === 4}
+                  @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyHeading(4);
       this.isHeadingDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Heading 4
-            </lukso-dropdown-option>
-          </lukso-dropdown>
-        </div>
+                  size="medium"
+                >
+                  Heading 4
+                </lukso-dropdown-option>
+              </lukso-dropdown>
+            </div>` : E}
 
         <!-- Bold -->
-        ${this.buttonTemplate(
+        ${this.toolsState.includes("bold") ? this.buttonTemplate(
       "text-bold",
       () => this.toggleWrap("**"),
       "Bold",
       this.activeFormats.bold
-    )}
+    ) : E}
 
         <!-- Italic -->
-        ${this.buttonTemplate(
+        ${this.toolsState.includes("italic") ? this.buttonTemplate(
       "text-italic",
       () => this.toggleWrap("*"),
       "Italic",
       this.activeFormats.italic
-    )}
+    ) : E}
 
         <!-- List -->
-        <div class=${this.styles().listMenu()}>
-          <lukso-tooltip text="List options" placement="top">
-            <lukso-button
-              id=${this.listTriggerId}
-              @click=${(e) => {
+        ${this.toolsState.includes("list") ? x`
+              <div class=${this.styles().listMenu()}>
+                <lukso-tooltip text="List options" placement="top">
+                  <lukso-button
+                    id=${this.listTriggerId}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.isHeadingDropdownOpen = false;
@@ -2259,82 +2309,84 @@ ${indent}${nextNumber}. `;
       this.isAlignmentDropdownOpen = false;
       this.isListDropdownOpen = !this.isListDropdownOpen;
     }}
-              aria-expanded=${this.isListDropdownOpen ? "true" : "false"}
-              aria-label="List options"
-              variant="secondary"
-              size="small"
-              custom-class=${this.toolbarButton({
+                    aria-expanded=${this.isListDropdownOpen ? "true" : "false"}
+                    aria-label="List options"
+                    variant="secondary"
+                    size="small"
+                    custom-class=${this.toolbarButton({
       active: this.activeFormats.unorderedList || this.activeFormats.orderedList
     })}
-              is-icon
-            >
-              <lukso-icon
-                name="task"
-                size="small"
-                pack="vuesax"
-                variant="linear"
-              ></lukso-icon>
-            </lukso-button>
-          </lukso-tooltip>
-          <lukso-dropdown
-            id="listDropdown"
-            trigger-id=""
-            size="medium"
-            ?is-open=${this.isListDropdownOpen}
-          >
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveListType() === "none"}
-              @click=${(e) => {
+                    is-icon
+                  >
+                    <lukso-icon
+                      name="task"
+                      size="small"
+                      pack="vuesax"
+                      variant="linear"
+                    ></lukso-icon>
+                  </lukso-button>
+                </lukso-tooltip>
+                <lukso-dropdown
+                  id="listDropdown"
+                  trigger-id=""
+                  size="medium"
+                  ?is-open=${this.isListDropdownOpen}
+                >
+                  <lukso-dropdown-option
+                    ?is-selected=${this.getActiveListType() === "none"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyList("none");
       this.isListDropdownOpen = false;
     }}
-              size="medium"
-            >
-              No list
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveListType() === "unordered"}
-              @click=${(e) => {
+                    size="medium"
+                  >
+                    No list
+                  </lukso-dropdown-option>
+                  <lukso-dropdown-option
+                    ?is-selected=${this.getActiveListType() === "unordered"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyList("unordered");
       this.isListDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Unordered
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.getActiveListType() === "ordered"}
-              @click=${(e) => {
+                    size="medium"
+                  >
+                    Unordered
+                  </lukso-dropdown-option>
+                  <lukso-dropdown-option
+                    ?is-selected=${this.getActiveListType() === "ordered"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyList("ordered");
       this.isListDropdownOpen = false;
     }}
-              size="medium"
-            >
-              Ordered
-            </lukso-dropdown-option>
-          </lukso-dropdown>
-        </div>
+                    size="medium"
+                  >
+                    Ordered
+                  </lukso-dropdown-option>
+                </lukso-dropdown>
+              </div>
+            ` : E}
 
         <!-- Link -->
-        ${this.buttonTemplate(
+        ${this.toolsState.includes("link") ? this.buttonTemplate(
       "link",
       () => this.insertLink(),
       "Link",
       this.activeFormats.link
-    )}
+    ) : E}
 
         <!-- Text Alignment -->
-        <div class=${this.styles().alignmentMenu()}>
-          <lukso-tooltip text="Text alignment" placement="top">
-            <lukso-button
-              id=${this.alignmentTriggerId}
-              @click=${(e) => {
+        ${this.toolsState.includes("alignment") ? x`
+              <div class=${this.styles().alignmentMenu()}>
+                <lukso-tooltip text="Text alignment" placement="top">
+                  <lukso-button
+                    id=${this.alignmentTriggerId}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.isHeadingDropdownOpen = false;
@@ -2342,101 +2394,103 @@ ${indent}${nextNumber}. `;
       this.isListDropdownOpen = false;
       this.isAlignmentDropdownOpen = !this.isAlignmentDropdownOpen;
     }}
-              aria-expanded=${this.isAlignmentDropdownOpen ? "true" : "false"}
-              aria-label="Text alignment"
-              variant="secondary"
-              size="small"
-              custom-class=${this.toolbarButton({
+                    aria-expanded=${this.isAlignmentDropdownOpen ? "true" : "false"}
+                    aria-label="Text alignment"
+                    variant="secondary"
+                    size="small"
+                    custom-class=${this.toolbarButton({
       active: this.activeFormats.alignment !== "left"
     })}
-              is-icon
-            >
-              <lukso-icon
-                name=${this.getAlignmentIcon()}
-                size="small"
-                pack="vuesax"
-                variant="linear"
-              ></lukso-icon>
-            </lukso-button>
-          </lukso-tooltip>
-          <lukso-dropdown
-            id="alignmentDropdown"
-            trigger-id=""
-            size="medium"
-            ?is-open=${this.isAlignmentDropdownOpen}
-          >
-            <lukso-dropdown-option
-              ?is-selected=${this.activeFormats.alignment === "left"}
-              @click=${(e) => {
+                    is-icon
+                  >
+                    <lukso-icon
+                      name=${this.getAlignmentIcon()}
+                      size="small"
+                      pack="vuesax"
+                      variant="linear"
+                    ></lukso-icon>
+                  </lukso-button>
+                </lukso-tooltip>
+                <lukso-dropdown
+                  id="alignmentDropdown"
+                  trigger-id=""
+                  size="medium"
+                  ?is-open=${this.isAlignmentDropdownOpen}
+                >
+                  <lukso-dropdown-option
+                    ?is-selected=${this.activeFormats.alignment === "left"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyAlignment("left");
       this.isAlignmentDropdownOpen = false;
     }}
-              size="medium"
-              aria-label="Align left"
-            >
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <lukso-icon
-                  name="textalign-left"
-                  size="small"
-                  pack="vuesax"
-                  variant="linear"
-                ></lukso-icon>
-                Left
-              </div>
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.activeFormats.alignment === "center"}
-              @click=${(e) => {
+                    size="medium"
+                    aria-label="Align left"
+                  >
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                      <lukso-icon
+                        name="textalign-left"
+                        size="small"
+                        pack="vuesax"
+                        variant="linear"
+                      ></lukso-icon>
+                      Left
+                    </div>
+                  </lukso-dropdown-option>
+                  <lukso-dropdown-option
+                    ?is-selected=${this.activeFormats.alignment === "center"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyAlignment("center");
       this.isAlignmentDropdownOpen = false;
     }}
-              size="medium"
-              aria-label="Align center"
-            >
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <lukso-icon
-                  name="textalign-center"
-                  size="small"
-                  pack="vuesax"
-                  variant="linear"
-                ></lukso-icon>
-                Center
-              </div>
-            </lukso-dropdown-option>
-            <lukso-dropdown-option
-              ?is-selected=${this.activeFormats.alignment === "right"}
-              @click=${(e) => {
+                    size="medium"
+                    aria-label="Align center"
+                  >
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                      <lukso-icon
+                        name="textalign-center"
+                        size="small"
+                        pack="vuesax"
+                        variant="linear"
+                      ></lukso-icon>
+                      Center
+                    </div>
+                  </lukso-dropdown-option>
+                  <lukso-dropdown-option
+                    ?is-selected=${this.activeFormats.alignment === "right"}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.applyAlignment("right");
       this.isAlignmentDropdownOpen = false;
     }}
-              size="medium"
-              aria-label="Align right"
-            >
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <lukso-icon
-                  name="textalign-right"
-                  size="small"
-                  pack="vuesax"
-                  variant="linear"
-                ></lukso-icon>
-                Right
+                    size="medium"
+                    aria-label="Align right"
+                  >
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                      <lukso-icon
+                        name="textalign-right"
+                        size="small"
+                        pack="vuesax"
+                        variant="linear"
+                      ></lukso-icon>
+                      Right
+                    </div>
+                  </lukso-dropdown-option>
+                </lukso-dropdown>
               </div>
-            </lukso-dropdown-option>
-          </lukso-dropdown>
-        </div>
+            ` : E}
 
         <!-- Color -->
-        <div class=${this.styles().colorMenu()}>
-          <lukso-tooltip text="Text color" placement="top">
-            <lukso-button
-              id=${this.colorTriggerId}
-              @click=${(e) => {
+        ${this.toolsState.includes("color") ? x`
+              <div class=${this.styles().colorMenu()}>
+                <lukso-tooltip text="Text color" placement="top">
+                  <lukso-button
+                    id=${this.colorTriggerId}
+                    @click=${(e) => {
       e.stopPropagation();
       this.restoreFocusAndSelection();
       this.isHeadingDropdownOpen = false;
@@ -2453,66 +2507,70 @@ ${indent}${nextNumber}. `;
       }
       this.isColorDropdownOpen = !this.isColorDropdownOpen;
     }}
-              aria-expanded=${this.isColorDropdownOpen ? "true" : "false"}
-              aria-pressed=${this.activeFormats.color ? "true" : "false"}
-              aria-label="Text color"
-              variant="secondary"
-              size="small"
-              custom-class=${this.toolbarButton({
+                    aria-expanded=${this.isColorDropdownOpen ? "true" : "false"}
+                    aria-pressed=${this.activeFormats.color ? "true" : "false"}
+                    aria-label="Text color"
+                    variant="secondary"
+                    size="small"
+                    custom-class=${this.toolbarButton({
       active: this.activeFormats.color
     })}
-              is-icon
-            >
-              <div
-                class="size-4 rounded-full"
-                style="background-color: ${this.activeFormats.activeColor};"
-              ></div>
-            </lukso-button>
-          </lukso-tooltip>
-          <lukso-dropdown
-            id="colorDropdown"
-            trigger-id=""
-            size="medium"
-            max-height="300"
-            ?is-open=${this.isColorDropdownOpen}
-          >
-            <div class="grid grid-cols-8 gap-2 p-2 w-[260px]">
-              <div class="col-span-8 mb-2 flex items-center justify-between">
-                <span class="text-xs text-neutral-60">Text Color</span>
-                ${this.activeFormats.color ? x`<button
-                      class="text-xs text-neutral-60 hover:text-neutral-20 underline"
-                      @click=${(e) => {
+                    is-icon
+                  >
+                    <div
+                      class="size-4 rounded-full"
+                      style="background-color: ${this.activeFormats.activeColor};"
+                    ></div>
+                  </lukso-button>
+                </lukso-tooltip>
+                <lukso-dropdown
+                  id="colorDropdown"
+                  trigger-id=""
+                  size="medium"
+                  max-height="300"
+                  ?is-open=${this.isColorDropdownOpen}
+                >
+                  <div class="grid grid-cols-8 gap-2 p-2 w-[260px]">
+                    <div
+                      class="col-span-8 mb-2 flex items-center justify-between"
+                    >
+                      <span class="text-xs text-neutral-60">Text Color</span>
+                      ${this.activeFormats.color ? x`<button
+                            class="text-xs text-neutral-60 hover:text-neutral-20 underline"
+                            @click=${(e) => {
       e.stopPropagation();
       this.clearColor();
       this.isColorDropdownOpen = false;
     }}
-                      type="button"
-                      aria-label="Clear color"
-                    >
-                      Clear
-                    </button>` : E}
-              </div>
-              ${this.colorSamples.map(
+                            type="button"
+                            aria-label="Clear color"
+                          >
+                            Clear
+                          </button>` : E}
+                    </div>
+                    ${this.colorSamples.map(
       (color) => x`
-                  <button
-                    class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
-                    style="background-color: ${color}"
-                    title=${color}
-                    aria-pressed=${this.activeFormats.activeColor === color ? "true" : "false"}
-                    aria-label="Color ${color}"
-                    @click=${(e) => {
+                        <button
+                          class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
+                          style="background-color: ${color}"
+                          title=${color}
+                          aria-pressed=${this.activeFormats.activeColor === color ? "true" : "false"}
+                          aria-label="Color ${color}"
+                          @click=${(e) => {
         e.stopPropagation();
         this.selectColor(color);
         this.isColorDropdownOpen = false;
       }}
-                  ></button>
-                `
+                        ></button>
+                      `
     )}
-            </div>
-          </lukso-dropdown>
-        </div>
+                  </div>
+                </lukso-dropdown>
+              </div>
+            ` : E}
 
-        <div class=${this.styles().divider()}></div>
+        <!-- Divider -->
+        ${this.toolsState.length > 0 ? x`<div class=${this.styles().divider()}></div>` : E}
       </div>
     `;
   }
@@ -2557,6 +2615,17 @@ ${indent}${nextNumber}. `;
     if (!this.previewTextColor) {
       this.previewTextColor = DEFAULT_PREVIEW_TEXT_COLOR;
     }
+    this.toolsState = this.defaultTools;
+    try {
+      if (this.tools) {
+        this.toolsState = JSON.parse(this.tools);
+      }
+    } catch (error) {
+      console.warn(
+        "Invalid JSON for tools property in lukso-markdown-editor. Using default tools.",
+        error
+      );
+    }
     return x`
       <div class=${wrapper()}>
         ${this.labelTemplate()} ${this.descriptionTemplate()}
@@ -2596,6 +2665,7 @@ ${indent}${nextNumber}. `;
                 >
                   <lukso-markdown
                     value=${this.value}
+                    ?strip-html-tags=${this.stripHtmlTags}
                     custom-style=${`color: ${this.previewTextColor};`}
                   ></lukso-markdown>
                   ${this.accessibilityIndicatorTemplate()}
@@ -2658,6 +2728,15 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "preview-text-color", reflect: true })
 ], LuksoMarkdownEditor.prototype, "previewTextColor", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "strip-html-tags" })
+], LuksoMarkdownEditor.prototype, "stripHtmlTags", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "tools", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "toolsState", 2);
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);