@bagelink/vue 0.0.863 → 0.0.869

package/dist/index.mjs

@@ -599,9 +599,11 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     }
     function updateHeight() {
       if (!props2.autoHeight || !bglSlider.value) return;
-      const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
-      const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
-      yHeight.value = `${totalHeight}px`;
+      setTimeout(() => {
+        const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
+        const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
+        yHeight.value = `${totalHeight}px`;
+      }, 200);
     }
     function easeScroll(target, duration = 500) {
       if (!bglSlider.value || isPressed.value) return;
@@ -633,7 +635,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     }
     function handleResize() {
       if (!bglSlider.value) return;
-      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : Math.min(props2.items, 3);
+      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : props2.items;
       goToSlide(activeSlideIndex.value);
     }
     function onScrollEnd() {
@@ -737,7 +739,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-8e22119a"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-ca63f224"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -9585,7 +9587,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
-      if (props2.field.$el === "richtext") return _sfc_main$w;
+      if (props2.field.$el === "richtext") return RichText;
       if (props2.field.$el === "file") return $el;
       if (props2.field.$el === "date") return _sfc_main$F;
       return props2.field.$el ?? "div";
@@ -43493,12 +43495,16 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
+let modal;
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
     const range2 = selection.getRangeAt(0);
     const span = document.createElement("span");
     switch (command2) {
+      case "formatBlock":
+        formatBlock(value);
+        break;
       case "bold":
         span.style.fontWeight = "bold";
         break;
@@ -43563,8 +43569,9 @@ function applyFormatting(command2, value = "") {
         increaseFontSize();
         break;
       case "decreaseFontSize":
+        decreaseFontSize();
         break;
-      case "insertLink":
+      case "link":
         insertLink();
         break;
       case "image":
@@ -43580,6 +43587,15 @@ function applyFormatting(command2, value = "") {
     range2.surroundContents(span);
   }
 }
+function formatBlock(value) {
+  if (!value) return;
+  const selection = window.getSelection();
+  const range2 = selection == null ? void 0 : selection.getRangeAt(0);
+  if (!range2) return;
+  range2.selectNodeContents(range2.startContainer);
+  const el = document.createElement(value);
+  range2.surroundContents(el);
+}
 function increaseFontSize() {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -43591,6 +43607,17 @@ function increaseFontSize() {
     range2.surroundContents(span);
   }
 }
+function decreaseFontSize() {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range2 = selection.getRangeAt(0);
+    const span = document.createElement("span");
+    const currentFontSize = Number.parseInt(range2.startContainer.parentNode.style.fontSize || "16", 10);
+    const newFontSize = currentFontSize - 2;
+    span.style.fontSize = `${newFontSize}px`;
+    range2.surroundContents(span);
+  }
+}
 function removeFormatting() {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -43623,22 +43650,38 @@ function insertList(type3) {
   }
 }
 function insertLink() {
-  const url = prompt("Enter the URL:");
-  if (url) {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range2 = selection.getRangeAt(0);
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount < 1) return;
+  const range2 = selection.getRangeAt(0);
+  modal.showModalForm({ title: "Insert Link", schema: [
+    { id: "url", $el: "text", label: "URL" },
+    { id: "openInNewTab", $el: "check", label: "Open in new tab" }
+  ], onSubmit: (data2) => {
+    const { url, openInNewTab } = data2;
+    if (url) {
       const anchor = document.createElement("a");
       anchor.href = url;
       range2.surroundContents(anchor);
+      if (openInNewTab) anchor.target = "_blank";
     }
-  }
+  } });
 }
 function insertImage() {
-  console.log("image");
-  const { showModalForm } = useModal();
-  console.log(showModalForm);
-  showModalForm({ title: "Upload Image", schema: [{ id: "image", type: "file" }], onSubmit: (_data) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount < 1) return;
+  const range2 = selection.getRangeAt(0);
+  modal.showModalForm({ title: "Upload Image", schema: [
+    { id: "src", $el: "file", attrs: { bindkey: "url" } },
+    { id: "alt", $el: "text", label: "Alt Text" }
+  ], onSubmit: (_data) => {
+    const { src } = _data;
+    if (src) {
+      const img = document.createElement("img");
+      img.src = src;
+      img.alt = _data.alt;
+      range2.deleteContents();
+      range2.insertNode(img);
+    }
   } });
 }
 function createTable() {
@@ -43665,6 +43708,25 @@ function createTable() {
     }
   }
 }
+function clearFormatting() {
+  const selection = window.getSelection();
+  const range2 = selection == null ? void 0 : selection.getRangeAt(0);
+  if (!range2) return;
+  range2.selectNodeContents(range2.startContainer);
+  const contents = range2.extractContents();
+  const text = contents.textContent;
+  if (text !== null && text !== "") {
+    range2.deleteContents();
+    const textNode = document.createTextNode(`${text}`);
+    setTimeout(() => {
+      range2.insertNode(textNode);
+    }, 1);
+  }
+}
+function useFormatting(modalInstance) {
+  modal = modalInstance;
+  return { applyFormatting, clearFormatting };
+}
 const _hoisted_1$o = { class: "flex gap-05" };
 const _hoisted_2$f = ["disabled"];
 const _hoisted_3$c = { key: 1 };
@@ -43972,6 +44034,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     const toolbarOptions = [
+      { name: "formatBlock", label: "h2", icon: "format_h2" },
+      { name: "formatBlock", label: "h3", icon: "format_h3" },
+      { name: "formatBlock", label: "h4", icon: "format_h4" },
+      { name: "formatBlock", label: "h5", icon: "format_h5" },
+      { name: "formatBlock", label: "h6", icon: "format_h6" },
       { name: "separator" },
       { name: "bold", label: "Bold", icon: "format_bold" },
       { name: "italic", label: "Italic", icon: "format_italic" },
@@ -43988,31 +44055,22 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       { name: "clear", label: "Clear Formatting", icon: "format_clear" },
       { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
     ];
-    function handleSelectChange(selectedOption) {
-      emit2("action", "formatBlock", selectedOption);
-    }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createVNode(SelectInput, {
-          class: "m-0 w150",
-          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
-          onChange: handleSelectChange
-        }),
         (openBlock(), createElementBlock(Fragment$1, null, renderList(toolbarOptions, (action, index2) => {
-          return openBlock(), createElementBlock(Fragment$1, null, [
+          return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
             action.name !== "separator" && _ctx.config.includes(action.name) ? withDirectives((openBlock(), createBlock(unref(Btn), {
-              key: action.name,
+              key: 0,
+              icon: action.icon,
               thin: "",
               flat: "",
-              class: normalizeClass([action.class, "radius-05"]),
               "aria-label": action.name,
-              icon: action.icon,
-              onClick: ($event) => emit2("action", action.name)
-            }, null, 8, ["class", "aria-label", "icon", "onClick"])), [
+              class: normalizeClass([action.class, "radius-05"]),
+              onClick: ($event) => emit2("action", action.name, action.label)
+            }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
-            ]) : createCommentVNode("", true),
-            action.name === "separator" ? (openBlock(), createElementBlock("span", {
+            ]) : action.name === "separator" ? (openBlock(), createElementBlock("span", {
               key: `separator-${index2}`,
               class: "opacity-2 mb-025"
             }, "|")) : createCommentVNode("", true)
@@ -44022,13 +44080,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
+const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-05 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
-const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
-const _hoisted_4$7 = {
-  key: 0,
-  class: "preview-area w-100 radius-05 p-1"
-};
+const _hoisted_3$b = { class: "content-area radius-05 p-1 w-100 grid" };
+const _hoisted_4$7 = ["textContent"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -44039,8 +44094,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const modal2 = useModal();
+    const { applyFormatting: applyFormatting2, clearFormatting: clearFormatting2 } = useFormatting(modal2);
     const editableContent = ref();
     const defaultConfig2 = [
+      "formatBlock",
       "bold",
       "italic",
       "underline",
@@ -44078,36 +44136,32 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       }
       emit2("update:modelValue", contentHtml.value);
     }
+    function updateToolbarHighlight() {
+      if (document.getSelection()) {
+        const selection = document.getSelection();
+        const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+        const container = range2 == null ? void 0 : range2.commonAncestorContainer;
+        if (container) {
+          let currentElement = container.nodeType === 3 ? container.parentElement : container;
+          while (currentElement && currentElement !== editableContent.value) {
+            if (["H1", "H2", "H3"].includes(currentElement.tagName)) {
+              break;
+            }
+            currentElement = currentElement.parentElement;
+          }
+        }
+      }
+    }
+    document.addEventListener("selectionchange", updateToolbarHighlight);
     function handleToolbarAction(action, value) {
       if (!editableContent.value) return;
       if (["alignLeft", "alignCenter", "alignRight", "alignJustify"].includes(action))
         value = action.replace("align", "").toLowerCase();
-      switch (action) {
-        case "orderedList":
-          applyFormatting("insertOrderedList");
-          break;
-        case "unorderedList":
-          applyFormatting("insertUnorderedList");
-          break;
-        case "blockquote":
-          applyFormatting("formatBlock", "<blockquote>");
-          break;
-        case "codeBlock":
-          applyFormatting("formatBlock", "<pre>");
-          break;
-        case "splitView":
-          isSplitView.value = !isSplitView.value;
-          break;
-        case "codeView":
-          isCodeView.value = !isCodeView.value;
-          break;
-        case "fullScreen":
-          toggleFullScreen();
-          break;
-        default:
-          applyFormatting(action, value);
-          break;
-      }
+      if (action === "splitView") isSplitView.value = !isSplitView.value;
+      else if (action === "codeView") isCodeView.value = !isCodeView.value;
+      else if (action === "fullScreen") toggleFullScreen();
+      else if (action === "clear") clearFormatting2();
+      else applyFormatting2(action, value);
       updateContent();
     }
     function toggleFullScreen() {
@@ -44155,6 +44209,10 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         }
       }
     }
+    function logInput(e) {
+      const target = e.target;
+      contentHtml.value = target.textContent || "";
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(_sfc_main$u, {
@@ -44182,13 +44240,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ]),
-          unref(isSplitView) ? (openBlock(), createElementBlock("code", _hoisted_4$7, toDisplayString(unref(contentHtml)), 1)) : createCommentVNode("", true)
+          unref(isSplitView) ? (openBlock(), createElementBlock("code", {
+            key: 0,
+            contenteditable: "true",
+            class: "preview-area w-100 radius-05 p-1",
+            onInput: _cache[1] || (_cache[1] = (e) => logInput(e)),
+            textContent: toDisplayString(unref(contentHtml))
+          }, null, 40, _hoisted_4$7)) : createCommentVNode("", true)
         ])
       ]);
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-8f1898f5"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-492bb647"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -53374,7 +53438,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     const emit2 = __emit;
     const bagel = useBagel();
-    const modal = ref();
+    const modal2 = ref();
     const computedFormSchema = computed(() => {
       if (typeof props2.schema === "function") return props2.schema();
       return props2.schema;
@@ -53383,7 +53447,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const form = ref();
     const closeModal = () => {
       var _a2;
-      return (_a2 = modal.value) == null ? void 0 : _a2.closeModal();
+      return (_a2 = modal2.value) == null ? void 0 : _a2.closeModal();
     };
     let submitting = ref(false);
     async function runSubmit() {
@@ -53412,7 +53476,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$b), {
         ref_key: "modal",
-        ref: modal,
+        ref: modal2,
         side: _ctx.side,
         width: _ctx.width,
         visible: _ctx.visible,
@@ -55705,21 +55769,21 @@ const ModalPlugin = {
     const ModalComponent = defineComponent({
       data: () => ({ modalStack: modalStack.value }),
       render() {
-        return this.modalStack.map((modal, index2) => {
+        return this.modalStack.map((modal2, index2) => {
           const props2 = {
-            ...modal.modalOptions,
+            ...modal2.modalOptions,
             "visible": true,
             "onUpdate:visible": () => {
               hideModal(index2);
             }
           };
-          switch (modal.modalType) {
+          switch (modal2.modalType) {
             case "modalForm":
-              return h$2(ModalForm, props2, modal.componentSlots);
+              return h$2(ModalForm, props2, modal2.componentSlots);
             case "confirmModal":
               return h$2(_sfc_main$a, props2, {});
             default:
-              return h$2(_sfc_main$b, props2, modal.componentSlots);
+              return h$2(_sfc_main$b, props2, modal2.componentSlots);
           }
         });
       }
@@ -56101,8 +56165,8 @@ export {
   RadioGroup,
   RadioPillsInput,
   RangeInput,
-  _sfc_main$w as RichText,
-  index$1 as RichText2,
+  RichText,
+  _sfc_main$w as RichText2,
   RouterWrapper,
   SelectInput,
   SidebarMenu,

package/dist/style.css

@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-8e22119a] {
+.blocker[data-v-ca63f224] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-8e22119a] {
+.bgl-slider[data-v-ca63f224] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,44 +367,44 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-8e22119a] {
+.autoHeight[data-v-ca63f224] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-8e22119a] {
+.bgl-slider.allowScroll[data-v-ca63f224] {
 	overflow-x: scroll;
 }
-.bgl-slider[data-v-8e22119a] {
+.bgl-slider[data-v-ca63f224] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.odd[data-v-8e22119a] {
+.bgl-slider.odd[data-v-ca63f224] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-1[data-v-8e22119a] {
+.bgl-slider.slides-1[data-v-ca63f224] {
 	grid-auto-columns: 100%;
 	gap: 0;
 }
-.bgl-slider[data-v-8e22119a]::-webkit-scrollbar {
+.bgl-slider[data-v-ca63f224]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-8e22119a] * {
+.bgl-slider[data-v-ca63f224] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-8e22119a] {
+.dragging.bgl-slider[data-v-ca63f224] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-8e22119a] {
+.clicking.bgl-slider[data-v-ca63f224] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-8e22119a] * {
+.dragging.bgl-slider[data-v-ca63f224] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-1[data-v-8e22119a]  * {
-		margin-inline-start: 1%;
+.bgl-slider.slides-1[data-v-ca63f224]> * {
+		margin-inline-start: 0%;
 }
 }
 
@@ -1288,29 +1288,29 @@ p {
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-8f1898f5]{
+.preview-area[data-v-492bb647]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 	background: var(--bgl-code-bg);
 	color: var(--bgl-code-color)
 }
-.rich-text-editor[data-v-8f1898f5] {
+.rich-text-editor[data-v-492bb647] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-8f1898f5]{
+.editableContent[data-v-492bb647]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-8f1898f5]{
+.content-area[data-v-492bb647]{
 	background: var(--bgl-richtext-color);
 }
-.content-area[data-v-8f1898f5], .preview-area[data-v-8f1898f5]{
+.content-area[data-v-492bb647], .preview-area[data-v-492bb647]{
 	min-height: 200px;
 }
-.fullscreen-mode[data-v-8f1898f5] {
+.fullscreen-mode[data-v-492bb647] {
     position: fixed;
     top: 0;
     left: 0;
@@ -1322,14 +1322,14 @@ p {
     overflow: auto;
 	border-radius: 0;
 }
-.fullscreen-mode .content-area[data-v-8f1898f5]{
+.fullscreen-mode .content-area[data-v-492bb647]{
 	height: calc(100vh - 5rem);
 	padding: 4rem !important;
 	max-width: 900px;
 	margin-inline: auto ;
 	overflow-y: auto;
 }
-.fullscreen-mode .toolbar[data-v-8f1898f5]{
+.fullscreen-mode .toolbar[data-v-492bb647]{
 	max-width: 900px;
 	margin-inline: auto ;
 	/* border-bottom: 1px solid var(--border-color); */
@@ -3567,6 +3567,9 @@ to {
 .oval {
     border-radius: 100%;
 }
+.aspect-ratio-1 {
+    aspect-ratio: 1;
+}
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -6886,6 +6889,10 @@ to {
         border-radius: 100%;
     }
 
+    .m_aspect-ratio-1 {
+        aspect-ratio: 1;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.863",
+  "version": "0.0.869",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Carousel.vue

@@ -40,9 +40,11 @@ function disableDrag() {
 
 function updateHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const children = Array.from(bglSlider.children[activeSlideIndex].children)
-	const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
-	yHeight = `${totalHeight}px`
+	setTimeout(() => {
+		const children = Array.from(bglSlider.children[activeSlideIndex].children)
+		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
+		yHeight = `${totalHeight}px`
+	}, 200)
 }
 
 function easeScroll(target: number, duration = 500) {
@@ -81,7 +83,7 @@ function handleSlideChange() {
 
 function handleResize() {
 	if (!bglSlider) return
-	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : Math.min(props.items, 3)
+	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : props.items
 	goToSlide(activeSlideIndex)
 }
 
@@ -250,8 +252,8 @@ watch(() => activeSlideIndex, handleSlideChange)
 }
 
 @media screen and (max-width: 600px) {
-	.bgl-slider.slides-1  * {
-		margin-inline-start: 1%;
+	.bgl-slider.slides-1> * {
+		margin-inline-start: 0%;
 	}
 
 }

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -16,6 +16,11 @@ interface toolbarOption {
 	class?: string
 }
 const toolbarOptions: toolbarOption[] = [
+	{ name: 'formatBlock', label: 'h2', icon: 'format_h2' },
+	{ name: 'formatBlock', label: 'h3', icon: 'format_h3' },
+	{ name: 'formatBlock', label: 'h4', icon: 'format_h4' },
+	{ name: 'formatBlock', label: 'h5', icon: 'format_h5' },
+	{ name: 'formatBlock', label: 'h6', icon: 'format_h6' },
 	{ name: 'separator' },
 	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
 	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
@@ -46,34 +51,24 @@ const toolbarOptions: toolbarOption[] = [
 // 		emit('action', 'fontSize', size)
 // 	}
 // }
-function handleSelectChange(selectedOption: string) {
-	emit('action', 'formatBlock', selectedOption)
-}
 </script>
 
 <template>
 	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<SelectInput
-			class="m-0 w150"
-			:options="['Text', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6', 'Blockquote', 'Code']"
-			@change="handleSelectChange"
-		/>
-
-		<template v-for="(action, index) in toolbarOptions">
+		<template v-for="(action, index) in toolbarOptions" :key="index">
 			<Btn
 				v-if="action.name !== 'separator' && config.includes(action.name)"
-				:key="action.name"
 				v-tooltip="action.label"
+				:icon="action.icon"
 				thin
 				flat
+				:aria-label="action.name"
 				:class="action.class"
 				class="radius-05"
-				:aria-label="action.name"
-				:icon="action.icon"
-				@click="emit('action', action.name)"
+				@click="emit('action', action.name, action.label)"
 			/>
 			<span
-				v-if="action.name === 'separator'"
+				v-else-if="action.name === 'separator'"
 				:key="`separator-${index}`"
 				class=" opacity-2 mb-025"
 			>|</span>