origam 0.3.10 → 2.3.0

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.js

@@ -0,0 +1,92 @@
+import { computed, readonly, ref } from "vue";
+import { SNACKBAR_STACK_DEFAULT_DURATION, SNACKBAR_STACK_DEFAULT_ID } from "../../consts/index.js";
+const STORES = /* @__PURE__ */ new Map();
+const getStore = (id) => {
+  let store = STORES.get(id);
+  if (!store) {
+    store = {
+      items: ref([]),
+      timers: /* @__PURE__ */ new Map(),
+      counter: { current: 0 }
+    };
+    STORES.set(id, store);
+  }
+  return store;
+};
+const generateId = (state) => {
+  state.counter.current += 1;
+  return `origam-snackbar-stack-item-${state.counter.current}`;
+};
+const clearTimer = (state, itemId) => {
+  const handle = state.timers.get(itemId);
+  if (handle !== void 0) {
+    if (typeof window !== "undefined") window.clearTimeout(handle);
+    state.timers.delete(itemId);
+  }
+};
+export function useSnackbarStack(options = {}) {
+  const id = options.id ?? SNACKBAR_STACK_DEFAULT_ID;
+  const state = getStore(id);
+  const dismiss = (itemId) => {
+    const index = state.items.value.findIndex((item) => item.id === itemId);
+    if (index === -1) return;
+    const [removed] = state.items.value.splice(index, 1);
+    clearTimer(state, itemId);
+    removed?.onDismiss?.();
+  };
+  const scheduleAutoDismiss = (itemId, duration) => {
+    if (duration <= 0) return;
+    if (typeof window === "undefined") return;
+    const handle = window.setTimeout(() => {
+      dismiss(itemId);
+    }, duration);
+    state.timers.set(itemId, handle);
+  };
+  const notify = (opts) => {
+    const itemId = generateId(state);
+    const duration = opts.duration ?? options.defaultDuration ?? SNACKBAR_STACK_DEFAULT_DURATION;
+    const item = {
+      ...opts,
+      id: itemId,
+      createdAt: Date.now()
+    };
+    state.items.value.push(item);
+    if (options.max != null && state.items.value.length > options.max) {
+      const evicted = state.items.value.shift();
+      if (evicted) {
+        clearTimer(state, evicted.id);
+        evicted.onDismiss?.();
+      }
+    }
+    scheduleAutoDismiss(itemId, duration);
+    return itemId;
+  };
+  const dismissAll = () => {
+    const ids = state.items.value.map((item) => item.id);
+    ids.forEach(dismiss);
+  };
+  return {
+    items: readonly(state.items),
+    notify,
+    dismiss,
+    dismissAll
+  };
+}
+export function useSnackbarStackInternal(id = SNACKBAR_STACK_DEFAULT_ID) {
+  const state = getStore(id);
+  return {
+    rawItems: state.items,
+    itemCount: computed(() => state.items.value.length)
+  };
+}
+export function resetSnackbarStackForTesting() {
+  STORES.forEach((state) => {
+    state.timers.forEach((handle) => {
+      if (typeof window !== "undefined") window.clearTimeout(handle);
+    });
+    state.timers.clear();
+    state.items.value = [];
+    state.counter.current = 0;
+  });
+  STORES.clear();
+}

package/dist/src/composables/Textarea/textarea-rich.composable.cjs

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextareaRich = useTextareaRich;
+var _vue = require("vue");
+var _enums = require("../../enums/index.cjs");
+var _utils = require("../../utils/index.cjs");
+function useTextareaRich(options) {
+  const hostRef = (0, _vue.ref)();
+  const active = (0, _vue.reactive)({
+    bold: false,
+    italic: false,
+    underline: false,
+    code: false,
+    link: false,
+    listBullet: false,
+    listOrdered: false,
+    heading: 0
+  });
+  let selectionListener = null;
+  (0, _vue.onMounted)(() => {
+    if (!hostRef.value) return;
+    hostRef.value.innerHTML = (0, _utils.sanitizeHtml)(options.value());
+    selectionListener = () => {
+      const sel = document.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const node = sel.anchorNode;
+      if (!node || !hostRef.value?.contains(node)) return;
+      syncActiveState();
+    };
+    document.addEventListener("selectionchange", selectionListener);
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    if (selectionListener) {
+      document.removeEventListener("selectionchange", selectionListener);
+      selectionListener = null;
+    }
+  });
+  function syncActiveState() {
+    if (typeof document === "undefined") return;
+    try {
+      active.bold = document.queryCommandState("bold");
+      active.italic = document.queryCommandState("italic");
+      active.underline = document.queryCommandState("underline");
+      active.listBullet = document.queryCommandState("insertUnorderedList");
+      active.listOrdered = document.queryCommandState("insertOrderedList");
+    } catch {}
+    active.code = isInsideTag("code");
+    active.link = isInsideTag("a");
+    const headingLevel = currentHeadingLevel();
+    active.heading = headingLevel;
+  }
+  function isInsideTag(tag) {
+    if (typeof document === "undefined" || !hostRef.value) return false;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1 && node.tagName.toLowerCase() === tag) return true;
+      node = node.parentNode;
+    }
+    return false;
+  }
+  function currentHeadingLevel() {
+    if (typeof document === "undefined" || !hostRef.value) return 0;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1) {
+        const t = node.tagName.toLowerCase();
+        if (t === "h1") return 1;
+        if (t === "h2") return 2;
+        if (t === "h3") return 3;
+      }
+      node = node.parentNode;
+    }
+    return 0;
+  }
+  function format(command, value) {
+    if (options.disabled()) return;
+    if (typeof document === "undefined") return;
+    hostRef.value?.focus();
+    switch (command) {
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        document.execCommand("bold");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        document.execCommand("italic");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        document.execCommand("underline");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LINK:
+        {
+          const url = (value ?? "").trim();
+          if (url === "") return;
+          document.execCommand("createLink", false, url);
+          break;
+        }
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        document.execCommand("insertUnorderedList");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        document.execCommand("insertOrderedList");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        applyHeadingCycle(["H1", "H2", "H3"]);
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        document.execCommand("formatBlock", false, "H2");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        document.execCommand("formatBlock", false, "H3");
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        toggleInlineCode();
+        break;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.CLEAR_FORMAT:
+        document.execCommand("removeFormat");
+        document.execCommand("formatBlock", false, "P");
+        break;
+    }
+    options.onFormat(command, value);
+    emitSanitised();
+    syncActiveState();
+  }
+  function applyHeadingCycle(levels) {
+    const current = currentHeadingLevel();
+    if (current === 0) {
+      document.execCommand("formatBlock", false, levels[0]);
+    } else if (current < levels.length) {
+      document.execCommand("formatBlock", false, levels[current]);
+    } else {
+      document.execCommand("formatBlock", false, "P");
+    }
+  }
+  function toggleInlineCode() {
+    if (active.code) {
+      document.execCommand("removeFormat");
+      return;
+    }
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const text = sel.toString();
+    if (text === "") {
+      document.execCommand("insertHTML", false, "<code>&#8203;</code>");
+      return;
+    }
+    const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    document.execCommand("insertHTML", false, `<code>${escaped}</code>`);
+  }
+  function emitSanitised() {
+    if (!hostRef.value) return;
+    const raw = hostRef.value.innerHTML;
+    const cleaned = (0, _utils.sanitizeHtml)(raw);
+    options.onUpdate(cleaned);
+  }
+  function onInput() {
+    emitSanitised();
+  }
+  function onKeydown(event) {
+    if (options.disabled()) return;
+    const metaOrCtrl = event.metaKey || event.ctrlKey;
+    if (!metaOrCtrl) return;
+    const key = event.key.toLowerCase();
+    if (event.shiftKey) {
+      if (key === "7") {
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED);
+        return;
+      }
+      if (key === "8") {
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET);
+        return;
+      }
+    }
+    switch (key) {
+      case "b":
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.BOLD);
+        return;
+      case "i":
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.ITALIC);
+        return;
+      case "u":
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.UNDERLINE);
+        return;
+      case "e":
+        event.preventDefault();
+        format(_enums.TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE);
+        return;
+      case "k":
+        event.preventDefault();
+        options.onFormat(_enums.TEXTAREA_TOOLBAR_COMMAND.LINK);
+        return;
+    }
+  }
+  function onPaste(event) {
+    if (options.disabled()) return;
+    event.preventDefault();
+    const dt = event.clipboardData;
+    if (!dt) return;
+    const html = dt.getData("text/html");
+    const text = dt.getData("text/plain");
+    const payload = html ? (0, _utils.sanitizeHtml)(html) : escapeText(text);
+    document.execCommand("insertHTML", false, payload);
+    emitSanitised();
+  }
+  function escapeText(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+  }
+  function setValue(html) {
+    if (!hostRef.value) return;
+    const clean = (0, _utils.sanitizeHtml)(html);
+    if (hostRef.value.innerHTML !== clean) {
+      hostRef.value.innerHTML = clean;
+    }
+  }
+  function isFormatActive(command) {
+    switch (command) {
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        return active.bold;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        return active.italic;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        return active.underline;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        return active.code;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LINK:
+        return active.link;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        return active.listBullet;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        return active.listOrdered;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        return active.heading === 1;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        return active.heading === 2;
+      case _enums.TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        return active.heading === 3;
+      default:
+        return false;
+    }
+  }
+  return {
+    hostRef,
+    active,
+    format,
+    isFormatActive,
+    setValue,
+    onInput,
+    onKeydown,
+    onPaste
+  };
+}

package/dist/src/composables/Textarea/textarea-rich.composable.d.ts

@@ -0,0 +1,41 @@
+import type { IUseTextareaRichOptions } from '../../interfaces';
+import type { TTextareaToolbarCommand } from '../../types';
+/**
+ * Owns the runtime contract of the rich-text textarea:
+ *
+ *  - mounts a `contenteditable` host (caller binds the returned ref);
+ *  - applies formatting commands via `document.execCommand` (the simplest
+ *    contenteditable API still supported by all evergreen browsers — we
+ *    deliberately avoid Selection / Range hand-rolling to keep the
+ *    surface tiny without an external library);
+ *  - tracks the active formatting state at the caret via
+ *    `document.queryCommandState` for the toolbar UI;
+ *  - sanitises every emit so the consumer's `v-model` can never carry
+ *    a `<script>` or a `javascript:` href;
+ *  - registers Cmd/Ctrl keyboard shortcuts (B / I / U / K / E and the
+ *    list shortcuts) on the host.
+ *
+ * `execCommand` is "deprecated" by spec but stays the only first-party
+ * way to do this without a 100 KB library; we accept the tradeoff and
+ * document the limitations (no IME-safe undo stack, no granular
+ * collaborative cursor) downstream.
+ */
+export declare function useTextareaRich(options: IUseTextareaRichOptions): {
+    hostRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    active: {
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        code: boolean;
+        link: boolean;
+        listBullet: boolean;
+        listOrdered: boolean;
+        heading: 0 | 1 | 2 | 3;
+    };
+    format: (command: TTextareaToolbarCommand, value?: string) => void;
+    isFormatActive: (command: TTextareaToolbarCommand) => boolean;
+    setValue: (html: string) => void;
+    onInput: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onPaste: (event: ClipboardEvent) => void;
+};

package/dist/src/composables/Textarea/textarea-rich.composable.js

@@ -0,0 +1,257 @@
+import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { TEXTAREA_TOOLBAR_COMMAND } from "../../enums/index.js";
+import { sanitizeHtml } from "../../utils/index.js";
+export function useTextareaRich(options) {
+  const hostRef = ref();
+  const active = reactive({
+    bold: false,
+    italic: false,
+    underline: false,
+    code: false,
+    link: false,
+    listBullet: false,
+    listOrdered: false,
+    heading: 0
+  });
+  let selectionListener = null;
+  onMounted(() => {
+    if (!hostRef.value) return;
+    hostRef.value.innerHTML = sanitizeHtml(options.value());
+    selectionListener = () => {
+      const sel = document.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const node = sel.anchorNode;
+      if (!node || !hostRef.value?.contains(node)) return;
+      syncActiveState();
+    };
+    document.addEventListener("selectionchange", selectionListener);
+  });
+  onBeforeUnmount(() => {
+    if (selectionListener) {
+      document.removeEventListener("selectionchange", selectionListener);
+      selectionListener = null;
+    }
+  });
+  function syncActiveState() {
+    if (typeof document === "undefined") return;
+    try {
+      active.bold = document.queryCommandState("bold");
+      active.italic = document.queryCommandState("italic");
+      active.underline = document.queryCommandState("underline");
+      active.listBullet = document.queryCommandState("insertUnorderedList");
+      active.listOrdered = document.queryCommandState("insertOrderedList");
+    } catch {
+    }
+    active.code = isInsideTag("code");
+    active.link = isInsideTag("a");
+    const headingLevel = currentHeadingLevel();
+    active.heading = headingLevel;
+  }
+  function isInsideTag(tag) {
+    if (typeof document === "undefined" || !hostRef.value) return false;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1 && node.tagName.toLowerCase() === tag) return true;
+      node = node.parentNode;
+    }
+    return false;
+  }
+  function currentHeadingLevel() {
+    if (typeof document === "undefined" || !hostRef.value) return 0;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1) {
+        const t = node.tagName.toLowerCase();
+        if (t === "h1") return 1;
+        if (t === "h2") return 2;
+        if (t === "h3") return 3;
+      }
+      node = node.parentNode;
+    }
+    return 0;
+  }
+  function format(command, value) {
+    if (options.disabled()) return;
+    if (typeof document === "undefined") return;
+    hostRef.value?.focus();
+    switch (command) {
+      case TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        document.execCommand("bold");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        document.execCommand("italic");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        document.execCommand("underline");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.LINK: {
+        const url = (value ?? "").trim();
+        if (url === "") return;
+        document.execCommand("createLink", false, url);
+        break;
+      }
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        document.execCommand("insertUnorderedList");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        document.execCommand("insertOrderedList");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        applyHeadingCycle(["H1", "H2", "H3"]);
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        document.execCommand("formatBlock", false, "H2");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        document.execCommand("formatBlock", false, "H3");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        toggleInlineCode();
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.CLEAR_FORMAT:
+        document.execCommand("removeFormat");
+        document.execCommand("formatBlock", false, "P");
+        break;
+    }
+    options.onFormat(command, value);
+    emitSanitised();
+    syncActiveState();
+  }
+  function applyHeadingCycle(levels) {
+    const current = currentHeadingLevel();
+    if (current === 0) {
+      document.execCommand("formatBlock", false, levels[0]);
+    } else if (current < levels.length) {
+      document.execCommand("formatBlock", false, levels[current]);
+    } else {
+      document.execCommand("formatBlock", false, "P");
+    }
+  }
+  function toggleInlineCode() {
+    if (active.code) {
+      document.execCommand("removeFormat");
+      return;
+    }
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const text = sel.toString();
+    if (text === "") {
+      document.execCommand("insertHTML", false, "<code>&#8203;</code>");
+      return;
+    }
+    const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    document.execCommand("insertHTML", false, `<code>${escaped}</code>`);
+  }
+  function emitSanitised() {
+    if (!hostRef.value) return;
+    const raw = hostRef.value.innerHTML;
+    const cleaned = sanitizeHtml(raw);
+    options.onUpdate(cleaned);
+  }
+  function onInput() {
+    emitSanitised();
+  }
+  function onKeydown(event) {
+    if (options.disabled()) return;
+    const metaOrCtrl = event.metaKey || event.ctrlKey;
+    if (!metaOrCtrl) return;
+    const key = event.key.toLowerCase();
+    if (event.shiftKey) {
+      if (key === "7") {
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED);
+        return;
+      }
+      if (key === "8") {
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET);
+        return;
+      }
+    }
+    switch (key) {
+      case "b":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.BOLD);
+        return;
+      case "i":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.ITALIC);
+        return;
+      case "u":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.UNDERLINE);
+        return;
+      case "e":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE);
+        return;
+      case "k":
+        event.preventDefault();
+        options.onFormat(TEXTAREA_TOOLBAR_COMMAND.LINK);
+        return;
+    }
+  }
+  function onPaste(event) {
+    if (options.disabled()) return;
+    event.preventDefault();
+    const dt = event.clipboardData;
+    if (!dt) return;
+    const html = dt.getData("text/html");
+    const text = dt.getData("text/plain");
+    const payload = html ? sanitizeHtml(html) : escapeText(text);
+    document.execCommand("insertHTML", false, payload);
+    emitSanitised();
+  }
+  function escapeText(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+  }
+  function setValue(html) {
+    if (!hostRef.value) return;
+    const clean = sanitizeHtml(html);
+    if (hostRef.value.innerHTML !== clean) {
+      hostRef.value.innerHTML = clean;
+    }
+  }
+  function isFormatActive(command) {
+    switch (command) {
+      case TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        return active.bold;
+      case TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        return active.italic;
+      case TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        return active.underline;
+      case TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        return active.code;
+      case TEXTAREA_TOOLBAR_COMMAND.LINK:
+        return active.link;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        return active.listBullet;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        return active.listOrdered;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        return active.heading === 1;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        return active.heading === 2;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        return active.heading === 3;
+      default:
+        return false;
+    }
+  }
+  return {
+    hostRef,
+    active,
+    format,
+    isFormatActive,
+    setValue,
+    onInput,
+    onKeydown,
+    onPaste
+  };
+}